/* Public profile page styles.

   Extracted from the inline <style> that used to live in
   templates/profiles/public.html so the bytes are fetched and cached once and
   shared across every profile page, and so the page's JSON-LD and visible
   markup sit near the top of the document (within the embedding budget AI
   readers ingest) instead of behind ~48k of inline CSS.

   Self-contained: the only external dependency is the self-hosted Inter font.
   The foundational rules below (font-face, reset, html/body/a) are ported from
   base.html's form_css block, which the public page no longer loads. */

/* Self-hosted Inter (variable, 100–900) so the page renders identically on
   every browser/OS. font-display:swap paints immediately in the fallback then
   swaps — no invisible-text flash. The url is relative to this file at
   /static/css/, so it resolves to /static/fonts/ regardless of host. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/InterVariable.woff2') format('woff2');
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#f0efed;
  color:#1a1a1a;
  font-size:clamp(1rem,0.9rem + 0.5vw,1.25rem);
  line-height:1.6;
  min-height:100vh;
}
a{color:#004683;text-decoration:none}
a:hover{text-decoration:underline}

/* ── CSS VARIABLES — autonomous, no external dependencies ── */
:root {
  /* Typography */
  --profile-fs-sm:  clamp(0.875rem, 0.8rem + 0.4vw, 1.125rem);
  --profile-fs-xs:  clamp(0.75rem, 0.7rem + 0.3vw, 0.9375rem);
  --profile-fs-xxs: clamp(0.6875rem, 0.64rem + 0.25vw, 0.875rem);
  --profile-fs-xl:  clamp(1.125rem, 1rem + 0.65vw, 1.5rem);
  --profile-fs-2xl: clamp(1.375rem, 1.2rem + 0.9vw, 2rem);

  /* Colors — text */
  --profile-text-primary:   #1a1a1a;
  --profile-text-secondary: #727272;
  --profile-text-tertiary:  #727272;

  /* Colors — UI */
  --profile-accent:    #004683;
  --profile-success:   #1D9E75;
  --profile-amber:     #6B3F09;
  --profile-amber-bg:  #FFF3CD;

  /* Colors — backgrounds & borders */
  --profile-bg-secondary: #f5f5f3;
  --profile-border:       rgba(0, 0, 0, 0.18);
  --profile-border-light: rgba(0, 0, 0, 0.1);

  /* Radius */
  --profile-radius-md: 0.5rem;
  --profile-radius-lg: 0.75rem;
  --profile-radius-xl: 1rem;
}

/* ── SITE HEADER ── */
.site-header { background:#fff; border-bottom:.5px solid var(--profile-border-light); position:sticky; top:0; z-index:50 }
.site-header-inner { max-width:75rem; margin:0 auto; padding:0 1.5rem; height:3.5rem; display:flex; align-items:center; justify-content:space-between }
.site-header-logo { display:inline-flex; align-items:center; text-decoration:none; flex-shrink:0 }
.site-header-logo:hover { opacity:.8 }
.site-header-cta { font-size:var(--profile-fs-xs); font-weight:500; color:#fff; background:linear-gradient(90deg,#0074da 0%,#004683 100%); padding:.4rem .875rem; border-radius:.4375rem; text-decoration:none; white-space:nowrap }
.site-header-cta:hover { opacity:.85 }

/* ── PAGE GRID ── */
.profile-grid { max-width:75rem; margin:0 auto; padding:2rem 1.5rem; display:grid; grid-template-columns:1fr 17rem; gap:2rem; align-items:start }
.profile-main { grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:1rem; min-width:0 }
.profile-sidebar { grid-column:2; grid-row:1; align-self:start; display:flex; flex-direction:column; gap:1rem; position:sticky; top:2rem }
/* Mobile sidebar hidden by default (desktop); the lg query below reveals it and
   hides the desktop aside. Default-hidden avoids needing a second breakpoint. */
.sidebar-mobile { display:none }
@media(max-width:60rem) {
  .profile-grid { grid-template-columns:1fr; padding:1.25rem 1rem; gap:.75rem }
  .profile-main, .profile-sidebar { grid-column:1 }
  .profile-sidebar { position:static; top:auto }
  .sidebar-desktop { display:none }
  .sidebar-mobile { display:block }
}

/* ── PROFILE HEADER CARD ── */
.profile-header-card { background:#fff; border-radius:var(--profile-radius-xl); border:.5px solid var(--profile-border-light); padding:1.75rem 2rem }
@media(max-width:40rem) { .profile-header-card { padding:1.25rem } }
.profile-header-top { display:flex; align-items:flex-start; gap:1.25rem; margin-bottom:1.25rem }
/* Fixed 8x5rem box, reserved up front, so the logo loading in cannot grow the
   header and shove the page down (Cumulative Layout Shift). The image is centered
   and object-fit:contain keeps any aspect ratio inside the box without cropping. */
.profile-avatar { flex-shrink:0; border-radius:.5rem; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; width:8rem; height:5rem }
.profile-avatar img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain }
.profile-meta { flex:1; min-width:0 }
.profile-name { font-size:var(--profile-fs-2xl); font-weight:600; line-height:1.2; margin-bottom:.2rem }
.profile-status-badge { display:inline-flex; align-items:center; gap:.25rem; font-size:var(--profile-fs-xxs); font-weight:500; padding:.2rem .625rem; border-radius:999px }
.profile-status-badge.verified   { background:#e1f5ee; color:var(--profile-success) }
.profile-status-badge.pending    { background:#FFF3CD; color:#854F0B }
.profile-status-badge.unverified { background:var(--profile-amber-bg); color:var(--profile-amber) }
.profile-status-badge svg { flex-shrink:0 }
.profile-tagline { font-size:var(--profile-fs-sm); color:var(--profile-text-secondary); line-height:1.6; margin-top:.875rem; padding-top:.875rem; border-top:.5px solid var(--profile-border-light); margin-bottom:.75rem }
.profile-details { display:flex; flex-wrap:wrap; gap:.375rem 1.5rem; font-size:var(--profile-fs-xs); color:var(--profile-text-primary) }
.profile-details-item { display:inline-flex; align-items:center; gap:.375rem }
.profile-details-item svg { flex-shrink:0; color:#004683 }
.profile-details-item b { color:#004683; font-weight:500 }

/* ── SIDEBAR CARDS ── */
.sidebar-card { background:#fff; border-radius:var(--profile-radius-xl); border:.5px solid var(--profile-border-light); padding:1.25rem 1.5rem }
.sidebar-title { font-size:var(--profile-fs-xxs); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#004683; margin-bottom:.875rem }
.sidebar-row { display:flex; align-items:flex-start; gap:.625rem; font-size:var(--profile-fs-xs); margin-bottom:.75rem }
.sidebar-row > div { min-width:0 }
.sidebar-row:last-of-type { margin-bottom:0 }
.sidebar-row svg { stroke:#004683; margin-top:.175rem; flex-shrink:0 }
.sidebar-label { font-size:var(--profile-fs-xxs); font-weight:500; color:#004683; margin-bottom:.1rem }
.sidebar-value { color:var(--profile-text-primary); line-height:1.4; overflow-wrap:break-word; word-break:break-word; min-width:0 }
/* Working-hours schedule — same fs-xs rhythm and blue-label palette as the
   sidebar rows, so day/hours never render at the oversized inherited fs-base. */
/* Delivery & Operations: working-hours schedule on the left, the
   time-zone/response/work-format fields stacked on the right. Stacks on mobile
   (falls to a single column via flex-wrap when the right column can't fit). */
.ops-layout { display:flex; flex-wrap:wrap; gap:1.25rem 2.5rem; align-items:start }
.ops-hours { flex:0 0 auto; width:18rem; max-width:100% }
/* margin-left:auto pushes the fields to the far-right edge of the block. */
.ops-fields { flex:0.3 1 auto; min-width:0; margin-left:auto; display:flex; flex-direction:column; justify-content:flex-end; gap:2rem }
/* No working-hours column (nothing entered): the fields are the only child, so
   don't push them to the right (that left a big empty gap). Span the full width
   and flow left-to-right instead. */
.ops-fields:only-child { margin-left:0; flex:1 1 100%; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:1.25rem 2.5rem }
@media(max-width:40rem) { .ops-hours { width:100% } .ops-fields { margin-left:0 } }
.wh-schedule { display:flex; flex-direction:column; gap:.5rem; font-size:var(--profile-fs-xs) }
.wh-schedule-row { display:flex; justify-content:space-between; gap:1rem; align-items:baseline }
.wh-schedule-day { color:#004683; font-weight:500; flex-shrink:0 }
.wh-schedule-hours { color:var(--profile-text-primary); text-align:right }
.sidebar-link { color:#0074da; text-decoration:none; overflow-wrap:break-word; word-break:break-word; min-width:0 }
.sidebar-link:hover { text-decoration:underline }
.sidebar-cta { display:block; text-align:center; background:linear-gradient(90deg,#0074da 0%,#004683 100%); color:#fff; border-radius:var(--profile-radius-md); padding:.625rem 1rem; font-size:var(--profile-fs-sm); font-weight:500; text-decoration:none; margin-top:1rem }
.sidebar-cta:hover { opacity:.82; text-decoration:none; color:#fff }

/* ── SECTION CARDS ── */
.profile-section { background:#fff; border-radius:var(--profile-radius-xl); border:.5px solid var(--profile-border-light); padding:1.5rem 2rem }
@media(max-width:40rem) { .profile-section { padding:1.25rem } }
.section-title { font-size:var(--profile-fs-xxs); font-weight:700; color:#004683; text-transform:uppercase; letter-spacing:.06em; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem }
.section-title svg { width:.875rem; height:.875rem; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; flex-shrink:0 }
.section-body { font-size:var(--profile-fs-sm); color:var(--profile-text-secondary); line-height:1.75 }
.section-divider { border:none; border-top:.5px solid var(--profile-border-light); margin:1rem 0 }
.section-label { font-size:var(--profile-fs-xxs); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.4rem }
h2.section-label { color:#004683 }
h3.section-label { color:#005eb2 }
.section-value { font-size:var(--profile-fs-xs); color:var(--profile-text-primary) }
.pricing-sublabel { font-size:var(--profile-fs-xxs); font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#005eb2; margin-bottom:.625rem }

/* ── KEYWORDS ── */
.keywords-list { display:flex; flex-wrap:wrap; gap:.375rem; margin-bottom:1rem }
.keyword-tag { font-size:var(--profile-fs-xxs); background:rgba(169,215,255,.4); border:.5px solid rgba(0,70,131,.15); border-radius:.3125rem; padding:.25rem .625rem; color:var(--profile-text-primary); font-weight:500 }

/* ── OPS GRID ── */
.ops-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1rem }

/* ── PRICING ACCORDION ── */
.pricing-table { display:grid; grid-template-columns:1fr auto auto; column-gap:2rem; border-top:.5px solid var(--profile-border-light) }
.pricing-table-header { grid-column:1/-1; display:grid; grid-template-columns:subgrid; padding:0 0 .5rem }
.pricing-table-header span { font-size:var(--profile-fs-xxs); font-weight:600; color:var(--profile-text-tertiary); text-transform:uppercase; letter-spacing:.04em }
.pricing-table-row { grid-column:1/-1; display:grid; grid-template-columns:subgrid; border-top:.5px solid var(--profile-border-light) }
details.pricing-table-row > summary { list-style:none; cursor:pointer; user-select:none }
details.pricing-table-row > summary::-webkit-details-marker { display:none }
.pricing-row-cells { grid-column:1/-1; display:grid; grid-template-columns:subgrid; padding:.625rem 0; font-size:var(--profile-fs-xs); margin:0 }
.pricing-item-name { font-weight:500; color:var(--profile-text-primary); display:flex; align-items:center; gap:.375rem; min-width:0 }
.pricing-item-price, .pricing-item-unit { color:var(--profile-text-secondary); white-space:nowrap }
.pricing-chevron { width:.8rem; height:.8rem; flex-shrink:0; stroke:var(--profile-text-tertiary); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s; margin-left:.125rem }
details[open] .pricing-chevron { transform:rotate(90deg) }
.pricing-item-desc { grid-column:1/-1; font-size:var(--profile-fs-xs); color:var(--profile-text-secondary); line-height:1.65; padding:.125rem 0 .875rem }
/* Was three copies of the same inline style attribute, one per link shape. */
.pricing-item-link { display:inline-flex; align-items:center; gap:.25rem; margin-top:.5rem; font-size:var(--profile-fs-xxs); font-weight:400; color:var(--profile-accent); text-decoration:none }
.pricing-item-link:hover { text-decoration:underline }
.pricing-item-name .pricing-item-link { margin-top:0 }
.pricing-item-link svg { width:.75rem; height:.75rem; flex-shrink:0 }
/* Mobile (sm): the subgrid columns squeeze the name to 3 lines on a phone, so
   reflow each row to stacked key/value — name as a heading, then labelled
   Price/Currency (or Price/Billing) lines from the cells' data-label. */
@media(max-width:40rem) {
  .pricing-table, .pricing-table-row, .pricing-row-cells { display:block }
  .pricing-table-header { display:none }
  .pricing-row-cells { padding:.75rem 0 }
  .pricing-item-name { font-size:var(--profile-fs-sm); justify-content:space-between; margin-bottom:.35rem }
  .pricing-item-price, .pricing-item-unit { display:flex; justify-content:space-between; gap:1rem; padding:.15rem 0; white-space:normal }
  .pricing-item-price::before, .pricing-item-unit::before {
    content:attr(data-label); flex-shrink:0;
    color:var(--profile-text-tertiary); font-size:var(--profile-fs-xxs);
    font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  }
  .pricing-item-unit:empty { display:none }
}

/* ── SOCIAL ── */
.social-links { display:flex; flex-wrap:wrap; gap:.5rem }
.social-link { display:inline-flex; align-items:center; gap:.4rem; font-size:var(--profile-fs-xs); color:var(--profile-accent); text-decoration:none; background:#e8f0f8; padding:.3rem .75rem; border-radius:999px }
.social-link:hover { background:#d0e4f5 }

/* ── REVIEWS ── */
.review-list { display:flex; flex-wrap:wrap; gap:.625rem }
.review-platform { display:inline-flex; align-items:center; gap:.5rem; background:var(--profile-bg-secondary); border:.5px solid var(--profile-border-light); border-radius:var(--profile-radius-md); padding:.5rem .875rem }
.review-platform-name { font-size:var(--profile-fs-xs); font-weight:600; color:var(--profile-text-primary) }
.review-platform-score { font-size:var(--profile-fs-xxs); color:var(--profile-text-tertiary) }

/* ── TEAM ── */
.team-list { display:flex; flex-direction:column; gap:.625rem }
.team-member { display:flex; align-items:center; justify-content:space-between; gap:.75rem }
.team-member-info { display:flex; align-items:center; gap:.375rem; flex-wrap:wrap; flex:1; min-width:0 }
.team-member-name { font-size:var(--profile-fs-xs); font-weight:500; color:var(--profile-text-primary) }
.team-member-role { font-size:var(--profile-fs-xxs); color:var(--profile-text-tertiary) }
.team-member-role::before { content:"·"; margin-right:.375rem }
.team-member-link { display:inline-flex; align-items:center; font-size:var(--profile-fs-xxs); color:var(--profile-accent); text-decoration:none; white-space:nowrap; flex-shrink:0 }
.team-member-link:hover { opacity:.75 }

/* ── FAQ ── */
.faq-list { display:flex; flex-direction:column }
.faq-item { border-bottom:.5px solid var(--profile-border-light) }
.faq-item:last-child { border-bottom:none }
.faq-item summary { font-size:var(--profile-fs-sm); font-weight:500; padding:.875rem 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:.75rem; user-select:none; list-style:none }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary svg { width:1rem; height:1rem; stroke:currentColor; stroke-width:2; stroke-linecap:round; flex-shrink:0; transition:transform .2s; color:var(--profile-text-tertiary) }
.faq-item[open] summary svg { transform:rotate(180deg) }
.faq-answer { font-size:var(--profile-fs-sm); color:var(--profile-text-secondary); line-height:1.75; padding-bottom:.875rem }

/* ── UNVERIFIED NOTICE ── */
.unverified-notice { background:var(--profile-amber-bg); border:.5px solid rgba(133,79,11,.2); border-radius:var(--profile-radius-xl); padding:1.25rem 1.5rem; font-size:var(--profile-fs-xs); color:var(--profile-amber); line-height:1.6; display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap }
.unverified-notice p { flex:1; min-width:0 }
.unverified-notice strong { display:block; margin-bottom:.2rem; font-size:var(--profile-fs-sm) }
.unverified-notice .btn-verify-cta { display:inline-flex; align-items:center; gap:.375rem; background:linear-gradient(90deg,#1a1a1a 0%,#004683 100%); color:#fff; font-size:var(--profile-fs-xs); font-weight:500; padding:.4rem .875rem; border-radius:.4375rem; text-decoration:none; white-space:nowrap; flex-shrink:0 }
.unverified-notice .btn-verify-cta:hover { opacity:.85 }
@media(max-width:40rem) { .unverified-notice { flex-direction:column; align-items:flex-start } }

/* ── POWERED BY FOOTER ── */
.powered-by { text-align:center; font-size:var(--profile-fs-xxs); color:var(--profile-text-tertiary); padding:1.5rem 0 .5rem }
.powered-by a { color:var(--profile-accent); text-decoration:none }
.powered-by a:hover { text-decoration:underline }

/* ── ACCESSIBILITY ── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
:focus-visible { outline:2px solid var(--profile-accent); outline-offset:3px; border-radius:2px }
/* List resets for semantic ul/li usage */
.keywords-list, .social-links, .team-list, .review-list { list-style:none; margin:0; padding:0 }

/* ── SKIP LINK ── */
.skip-link { position:absolute; top:-100%; left:0; background:var(--profile-accent); color:#fff; padding:.5rem 1.25rem; font-size:var(--profile-fs-sm); font-weight:500; text-decoration:none; z-index:200; border-radius:0 0 var(--profile-radius-md) 0 }
.skip-link:focus { top:0 }