/* ============================================================================
   FAMILY OBSERVATORY : SITE CHROME (header, mega menu, footer)
   Production component. Depends on tokens.css + base.css. v1.0.0 : 2026-07-10
   ========================================================================== */

/* ---- Logo lockup (shared component) ----------------------------------- */
/* min-height keeps the home link at a real tap size after the wordmark steps down
   on small screens, where it measured 29px. */
.fo-logo { display:inline-flex; align-items:center; min-height:44px; gap:0.6em; text-decoration:none; color:var(--text); }
.fo-logo .fo-svg { width:1.9em; height:1.9em; flex:none; }
.fo-logo .fo-word { font-family:var(--font-display); font-weight:600; letter-spacing:-0.005em; font-size:1.5rem; line-height:1; color:inherit; white-space:nowrap; }
.fo-logo .fo-word .obs { color:var(--brand); }

/* ================= HEADER ================= */
.fo-header { position:sticky; top:0; z-index:60; background:rgba(251,248,242,0.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.fo-header-inner { max-width:var(--container-xl); margin-inline:auto; padding:0.7rem var(--gutter); display:flex; align-items:center; gap:var(--space-5); }

.fo-nav { display:flex; align-items:center; gap:2px; margin-left:var(--space-4); }
.fo-nav-item { position:relative; }
.fo-nav-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0.5rem 0.7rem; background:none; border:0; cursor:pointer; font:600 var(--fs-sm)/1 var(--font-sans); color:var(--text-2); border-radius:var(--radius-sm); text-decoration:none; white-space:nowrap; }
.fo-nav-link:hover { color:var(--brand-strong); background:var(--brand-softer); }
.fo-nav-link svg { transition:transform var(--dur) var(--ease); }

.fo-header-cta { margin-left:auto; }

/* ---- Mega menu (floating card) ---- */
.fo-mega {
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  width:min(560px, 92vw); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:var(--space-5);
  display:grid; grid-template-columns:150px 1fr; gap:var(--space-5); align-items:start;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out); z-index:70;
}
.fo-nav-item.has-menu:hover .fo-mega,
.fo-nav-item.has-menu:focus-within .fo-mega,
.fo-nav-item.is-open .fo-mega { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.fo-nav-item.is-open .fo-nav-link svg,
.fo-nav-item.has-menu:hover .fo-nav-link svg { transform:rotate(180deg); }

.fo-mega-art { display:grid; place-items:center; align-self:center; background:var(--brand-softer); border-radius:var(--radius-md); padding:var(--space-4); }
.fo-mega-rows { display:grid; gap:2px; }
.fo-row { display:flex; gap:var(--space-3); align-items:flex-start; padding:0.65rem 0.7rem; border-radius:var(--radius-md); text-decoration:none; color:var(--text); transition:background var(--dur) var(--ease); }
.fo-row:hover { background:var(--brand-soft); }
.fo-ico { flex:none; width:40px; height:40px; display:grid; place-items:center; color:var(--brand); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); }
.fo-ico svg { width:22px; height:22px; }
.fo-tt { display:block; font-weight:700; font-size:var(--fs-sm); color:var(--text); }
.fo-ds { display:block; font-size:0.9rem; color:var(--muted); line-height:1.35; margin-top:2px; }

/* ---- Burger + mobile ---- */
.fo-burger { display:none; margin-left:auto; width:48px; height:48px; background:none; border:0; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; padding:0 12px; }
.fo-burger span { display:block; height:2.5px; background:var(--text); border-radius:2px; transition:transform var(--dur) var(--ease), opacity var(--dur); }
.fo-burger.is-open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.fo-burger.is-open span:nth-child(2) { opacity:0; }
.fo-burger.is-open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }
.fo-mobile-nav { display:none; }
.fo-header.is-mobile-open .fo-mobile-nav { display:flex; flex-direction:column; padding:var(--space-4) var(--gutter) var(--space-6); border-top:1px solid var(--border); background:var(--bg); }
.fo-header.is-mobile-open .fo-mobile-nav > a { padding:1rem 0.25rem; min-height:56px; display:flex; align-items:center; font-weight:600; font-size:var(--fs-lg); color:var(--text); text-decoration:none; border-bottom:1px solid var(--border); }
.fo-header.is-mobile-open .fo-mobile-nav > a.btn { justify-content:center; border:0; color:#fff; }

@media (max-width: 900px) {
  .fo-nav, .fo-header-cta { display:none; }
  .fo-burger { display:flex; }
}

/* ================= FOOTER ================= */
.fo-footer { background:#14201d; color:#c4d1cb; }
.fo-footer a { color:#c4d1cb; text-decoration:none; }
.fo-footer a:hover { color:#fff; }

.fo-footer-top { max-width:var(--container-xl); margin-inline:auto; padding:var(--space-8) var(--gutter) var(--space-6); display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-7); align-items:center; border-bottom:1px solid rgba(255,255,255,0.08); }
.fo-footer-brand { position:relative; }
.fo-footer-art { position:absolute; top:-24px; right:0; opacity:0.5; pointer-events:none; }
.fo-logo--footer { display:block; margin-bottom:var(--space-3); }
.fo-footer-tag { max-width:44ch; color:#9fb2ab; font-size:var(--fs-sm); }
.fo-footer-social { display:flex; gap:var(--space-3); margin-top:var(--space-4); }
.fo-footer-social a { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#c4d1cb; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.fo-footer-social a:hover { background:var(--brand); color:#fff; border-color:var(--brand); }
.fo-footer-social svg { width:18px; height:18px; }
.fo-footer-cta-eyebrow { font-size:var(--fs-xs); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:#7fb3a6; font-weight:700; margin:0 0 var(--space-2); }
.fo-footer-cta h3 { color:#fff; font-size:var(--fs-2xl); margin:0 0 var(--space-4); }

.fo-footer-cols { max-width:var(--container-xl); margin-inline:auto; padding:var(--space-7) var(--gutter); display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); }
.fo-col-label { font-size:var(--fs-xs); letter-spacing:0.12em; text-transform:uppercase; color:#6f8b83; font-weight:700; margin:0 0 var(--space-3); }
/* TAP TARGETS. The accessibility page promises large touch targets to an audience
   of older adults, and measured at a real 390px viewport the footer was serving 16
   links at 36px, three social buttons at 38px and three legal links at 23px.
   A promise the CSS does not keep is the kind of claim this whole property is
   built to avoid making.

   Raised to 44px, which is the WCAG 2.2 target size. Inline links inside a sentence
   are deliberately NOT padded: the standard exempts them, and padding text links
   would wreck the typography to satisfy a number rather than a person. */
.fo-footer-cols a { display:flex; align-items:center; min-height:44px; padding:5px 0; font-size:var(--fs-sm); }

.fo-footer-bottom { max-width:var(--container-xl); margin-inline:auto; padding:var(--space-5) var(--gutter); display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:0.9rem; color:#8b9e97; border-top:1px solid rgba(255,255,255,0.08); }
.fo-footer-bottom a { display:inline-flex; align-items:center; min-height:44px; }
.fo-sep { color:#3f524c; }
.fo-footer-note { color:#7fb3a6; font-weight:600; }

@media (max-width: 820px) {
  .fo-footer-top { grid-template-columns:1fr; }
  .fo-footer-cols { grid-template-columns:repeat(2,1fr); }
  .fo-footer-art { display:none; }
}

/* THE HEADER OVERFLOWED THE VIEWPORT ON EVERY PAGE. Found 2026-08-08 by measuring
   document.scrollWidth against innerWidth at a real 390px viewport: 447 against 390.
   The logo is 269px, "Sign in" is 74px, the burger is 24px, and with the container
   gutter that is 57px more than a phone has.

   The burger sat at right:447, entirely off-screen, so the menu button was reachable
   only because Chrome shrink-to-fit scaled the page to exactly 448 CSS pixels. The
   design was accidentally depending on that rescue, and the price of the rescue is
   that EVERY mobile visitor read the whole site about 13% smaller than intended, on
   a product whose accessibility page promises generous text sizing to older adults.

   Nothing is hidden to fix it. The logo steps down, the gutter tightens, and both
   the sign-in link a paying member needs and the menu button stay on screen.
   Verified by asserting innerWidth === 390, not by looking at a screenshot: a
   screenshot of a shrunk-to-fit page looks correct, which is how this survived. */
@media (max-width: 560px) {
  .fo-logo .fo-word { font-size:1.18rem; }
  .fo-logo .fo-svg { width:1.6em; height:1.6em; }
  .fo-logo { gap:0.45em; }
  .fo-header-inner { gap:var(--space-3); padding-inline:var(--space-4); }
}
@media (max-width: 400px) {
  .fo-logo .fo-word { font-size:1.05rem; }
  .fo-header-inner { gap:var(--space-2); padding-inline:var(--space-3); }
}


/* ============================================================
   DIGILU SIGNAL GRID: the house field, inside the badges this site already has
   ============================================================
   Four cells and a hairline, from the back of the Digilu business card. It is
   the one thing every mark in the ecosystem now shares, and it is deliberately
   felt rather than read: a grid you notice is graph paper.

   NOT AN EXTRA BOX. These selectors are badges the site already draws. Adding a
   plate around the icon would have put a box inside a box, which is what
   measuring the properties showed and what killed the original plan.

   CSS only. No markup moved. Delete this block and the site is as it was.
   ============================================================ */
:root{ --dg-signal-grid:rgba(26,42,52,.075); }

.fo-ico{
  background-image:
    linear-gradient(to right,  var(--dg-signal-grid) 0 1px, transparent 1px),
    linear-gradient(to bottom, var(--dg-signal-grid) 0 1px, transparent 1px);
  background-size: 14px 14px;
  background-position: center center;
}