/* ============================================================================
   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) ----------------------------------- */
.fo-logo { display:inline-flex; align-items:center; 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:38px; height:38px; 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); }
.fo-footer-cols a { display:block; 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-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; }
}