/* Siqwes site-header-v1.css (Creative, 2026-10-20). ONE shared top banner on all 6 sites:
   siqwes.com (hub) + business., education., realestate., assistants., bookkeeping.siqwes.com.
   Spec: brand/specs/site-header-v1.md. DRAFT for Web. Not deployed.
   Load order: tokens.css > dark-tokens.css > dark-site.css > polish-v1.css > space-scroll-v2.css > blog-v1.css > site-header-v1.css
               (> blog-chips-v1.css on /blog/ pages; > members-area-v1.css on members routes).
   Pure HTML/CSS, CSP-safe (script-src 'none'; style-src 'self'): no inline style, no JS, no <details> needed.
   Layout: 3-column grid (1fr auto 1fr) so the title sits in the TRUE centre of the header.
     [wordmark -> https://siqwes.com/]   [AI for {niche} / Everyday AI, accent]   [Blog (text link)  16px  Members log in (cyan outline)]
   Below 880px: row 1 = wordmark + Blog + Members log in, row 2 = the full title, centred (text-wrap:balance).
   Titles are never shortened or truncated. Below 330px only, the button's visible words become "Log in" (name stays "Members log in").
   Footer: unchanged from live (Privacy, Terms, Canceling your membership, support@, X + LinkedIn); no blog link (founder 20:05 UTC). */

/* ---------- 0. Per-site variables (data-site on <header class="site-header sh">) ---------- */
.sh{
  --sh-accent:#2FD3EE;                 /* title colour + bottom hairline; set per site below */
  --sh-cta:#2FD3EE;                    /* Members log in = cyan secondary outline button on every site */
  --sh-cta-text:#FFFFFF;
  --sh-navy:#0B1F45;
  --sh-h:64px;                         /* one-row height */
  --sh-logo-h:40px;                    /* wordmark height in the header (106px wide) */
  --sh-gap:24px;
  --sh-ease:.18s ease;
}
.sh[data-site="hub"]        {--sh-accent:#2FD3EE}
.sh[data-site="business"]   {--sh-accent:#9BE8F6}
.sh[data-site="education"]  {--sh-accent:#AAD8B6}
.sh[data-site="realestate"] {--sh-accent:#ECBEAC}
.sh[data-site="assistants"] {--sh-accent:#C5B7E6}
.sh[data-site="bookkeeping"]{--sh-accent:#E4B5CF}

/* ---------- 1. Bar: space-scroll v2 glass (unchanged values) + niche hairline ---------- */
.site-header.sh{
  position:relative;
  background:rgba(7,18,43,.62) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(155,232,246,.10) !important;
}
.site-header.sh::after{content:"";position:absolute;inset:auto 0 -1px 0;height:1px;pointer-events:none;opacity:.45;
  background:linear-gradient(90deg,transparent,var(--sh-accent) 50%,transparent)}

.sh__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);   /* equal side columns = true centre */
  grid-template-areas:"home title right";
  align-items:center;
  column-gap:var(--sh-gap);
  min-height:var(--sh-h);
  padding-top:6px;padding-bottom:6px;   /* the 44px targets sit inside the 64px row */
}

/* ---------- 2. Wordmark (home link, always https://siqwes.com/) ---------- */
.sh__home{
  grid-area:home;justify-self:start;
  display:inline-flex;align-items:center;min-height:44px;
  padding:2px 6px;margin-left:-6px;border-radius:8px;
  text-decoration:none;transition:background-color var(--sh-ease),box-shadow var(--sh-ease);
}
.sh__home img{display:block;height:var(--sh-logo-h);width:auto;flex:none}
.sh__home:hover{background:rgba(255,255,255,.06)}
.sh__home:focus-visible{outline:none;box-shadow:var(--dk-focus-ring,0 0 0 2px #0A1838,0 0 0 5px #2FD3EE)}
/* current page = siqwes.com/ itself (hub home only): 2px accent bar under the wordmark */
.sh__home[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--sh-accent);border-radius:8px 8px 2px 2px}
.sh__home[aria-current="page"]:focus-visible{box-shadow:inset 0 -2px 0 var(--sh-accent),var(--dk-focus-ring,0 0 0 2px #0A1838,0 0 0 5px #2FD3EE);border-radius:8px}

/* ---------- 3. Title: "AI for {niche}" / "Everyday AI", Nunito 800 in the site accent ---------- */
.sh__title{
  grid-area:title;justify-self:center;
  margin:0;text-align:center;
  font-family:var(--font-heading,'Nunito'),'Nunito','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  font-weight:800;font-size:1.25rem;line-height:1.2;letter-spacing:-.005em;
  color:var(--sh-accent);
  white-space:nowrap;                 /* one row from 880px: the longest title fits (measured, spec §4) */
  font-synthesis:none;
}
@media (min-width:1024px){.sh__title{font-size:1.375rem}}   /* 22px */

/* ---------- 4. Right group: Blog (text link) + Members log in (cyan outline button), 16px apart ---------- */
.sh__right{grid-area:right;justify-self:end;display:flex;align-items:center;gap:16px;margin:0;padding:0;list-style:none}
.sh__right > li{display:flex}
.sh__blog{
  display:inline-flex;align-items:center;min-height:44px;padding:0 6px;border-radius:6px;
  font-family:var(--font-heading,'Nunito'),'Nunito','Segoe UI',system-ui,Arial,sans-serif;font-weight:700;font-size:1rem;line-height:1;
  color:#FFFFFF;white-space:nowrap;text-decoration:none;
  text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--sh-accent);
  transition:text-decoration-color var(--sh-ease),color var(--sh-ease);
}
.sh__blog:hover{text-decoration-line:underline;color:#FFFFFF}
.sh__blog[aria-current="page"]{text-decoration-line:underline}
.sh__blog:focus-visible{outline:none;box-shadow:var(--dk-focus-ring,0 0 0 2px #0A1838,0 0 0 5px #2FD3EE)}
.sh__cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 16px;border-radius:10px;box-sizing:border-box;
  border:1px solid var(--sh-cta);background:transparent;color:var(--sh-cta-text);
  font-family:var(--font-heading,'Nunito'),'Nunito','Segoe UI',system-ui,Arial,sans-serif;font-weight:700;font-size:1rem;line-height:1;
  white-space:nowrap;text-decoration:none;
  transition:background-color var(--sh-ease),border-color var(--sh-ease),color var(--sh-ease),box-shadow var(--sh-ease);
}
.sh__cta:hover{background:rgba(47,211,238,.10);border-color:#9BE8F6;color:#FFFFFF}
.sh__cta:active{background:rgba(47,211,238,.18)}
.sh__cta:focus-visible{outline:none;box-shadow:var(--dk-focus-ring,0 0 0 2px #0A1838,0 0 0 5px #2FD3EE)}
.sh__cta[aria-current="page"]{background:var(--sh-cta);border-color:var(--sh-cta);color:var(--sh-navy)}   /* on the members login page */
.sh__cta[aria-current="page"]:hover{background:#9BE8F6;border-color:#9BE8F6;color:var(--sh-navy)}
.sh__cta-short{display:none}

/* ---------- 5. Small screens (< 880px): two rows, title never shortened ----------
   Row 1: wordmark (left) + Members log in (right). Row 2: the FULL title, centred across the bar.
   The title may wrap to 2 balanced lines only if it is wider than the bar (only the Assistants title at <= 359px). */
@media (max-width:879.98px){
  .sh__inner{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"home right" "title title";
    row-gap:2px;padding-top:6px;padding-bottom:10px;min-height:0;
  }
  .sh__title{justify-self:stretch;white-space:normal;text-wrap:balance;overflow-wrap:normal;font-size:1.1875rem}  /* 19px */
}
/* < 420px: tighter row 1 so wordmark + Blog + Members log in fit from 330px (measured, spec §4). */
@media (max-width:419.98px){
  .sh{--sh-logo-h:37px}                         /* 98px wide: brand minimum is 96px */
  .sh__inner{column-gap:8px;padding-left:16px;padding-right:16px}
  .sh__home{margin-left:-4px;padding:2px 4px}
  .sh__blog{padding:0 4px;font-size:.9375rem}    /* 15px */
  .sh__cta{padding:0 10px;font-size:.9375rem}
  .sh__title{font-size:1.125rem}                 /* 18px */
}
/* < 330px only (measured fit point 329px): the button shows "Log in" (accessible name stays "Members log in" via aria-label). */
@media (max-width:329.98px){
  .sh__cta-full{display:none}
  .sh__cta-short{display:inline}
}

/* ---------- 6. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){.sh__home,.sh__cta{transition:none}}

/* ---------- 7. Footer ----------
   Unchanged from live (founder 20:05 UTC): Privacy, Terms, Canceling your membership, support@siqwes.com, X + LinkedIn
   (cancel-footer-v1.css + footer-linkedin-link-v1.md). No blog link in the footer: Blog lives in the header only. */