/* ============================================================
   HaloLogic.ai — sitewide shell (Modern Halo)
   Header, footer, skip link, and the shared .wrap container —
   the pieces every page needs, ported from the approved design
   render (D-006) with the real logo (D-007) in place of the
   CSS wordmark. Load order: tokens.css -> base.css -> this file.

   The markup these rules style is output by the child theme
   (functions.php: halologic_site_header / halologic_site_footer),
   which replaces the GeneratePress defaults.

   Contrast (BRAND.md): header/footer are charcoal surfaces, so
   gold IS allowed as text/accent here (10.4:1); the CTA is
   charcoal-on-gold; footer body text is --muted-on-dark-safe.
   ============================================================ */

.wrap { width: min(var(--maxw), 92%); margin-inline: auto; }

/* ---- GP entry-content gap kill (live-DOM find, 2026-07-11) ----
   GeneratePress's `.entry-content:not(:first-child){margin-top:2em}`
   (specificity 0,2,0) beats the patterns' `.entry-content{margin:0}`
   reset whenever the GP per-page meta trio is missing: GP then renders
   its (visually hidden) .entry-header first, and :not(:first-child) is
   STRUCTURAL, so display:none doesn't save us — the page shows a 34px
   white bar between the site header and the hero. This (0,2,1) rule
   outranks GP's regardless of the meta, on every page type. */
.page div.entry-content, .home div.entry-content { margin-top: 0; }

/* ---- Focus fallback, sitewide (mirrors the page-scoped A11Y-6 fix;
   workshop.css carries identical rules so the live page is unchanged).
   Browsers without :focus-visible keep an indicator; supporting
   browsers drop it for pointer focus. No border-radius (NEW-1). */
:focus { outline: 3px solid var(--charcoal); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.site-header :focus, .site-footer :focus { outline-color: var(--gold); }
/* (.site-header/.site-footer :focus-visible gold lives in base.css) */

/* ---- Skip link ----
   Styles our own chip AND GeneratePress's fallback (.screen-reader-text
   .skip-link) if it ever renders — gold border so the chip has a visible
   boundary over the charcoal header when focused (A11Y-8). */
.skip-link {
  position: absolute; left: 1rem; top: -100px;
  background: var(--charcoal); color: var(--white);
  border: 2px solid var(--gold);
  padding: .7rem 1.1rem; border-radius: var(--radius-sm);
  text-decoration: none; z-index: 999; font-weight: 600;
}
.skip-link:focus,
a.skip-link.screen-reader-text:focus {
  position: absolute; left: 1rem; top: 1rem;
  width: auto; height: auto; clip: auto; clip-path: none; overflow: visible;
  background: var(--charcoal); color: var(--white);
  border: 2px solid var(--gold);
  padding: .7rem 1.1rem; border-radius: var(--radius-sm);
  text-decoration: none; z-index: 999; font-weight: 600;
}

/* ---- Header + primary nav (0b②) ----
   Mobile: disclosure menu (button ships hidden; site.js enables it and
   collapses the list — no-JS always sees the expanded menu, A11Y-7
   convention). Desktop (≥48rem): inline links + CTA, no toggle.
   All text on charcoal: white links 16.9:1, gold accents 10.4:1. */
.site-header { background: var(--charcoal); color: var(--white); padding: 1.1rem 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; }
.logo-link { display: inline-flex; align-items: center; }
.logo-img { display: block; width: 185px; max-width: 44vw; height: auto; }
.logo-img--footer { width: 160px; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ff-head); font-weight: 600; font-size: 1rem;
  color: var(--white); background: transparent;
  border: 2px solid rgba(255, 255, 255, .45); border-radius: 999px;
  padding: .5rem 1rem; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--gold); color: var(--gold); }
.nav-toggle[hidden] { display: none; }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .25rem 1.4rem; }
.site-nav a { color: var(--white); text-decoration: none; font-weight: 500; padding: .35rem 0; }
.site-nav a:hover { color: var(--gold); }
/* Current page: gold underline mark — not color alone */
.site-nav a[aria-current="page"] { color: var(--gold); border-bottom: 3px solid var(--gold); font-weight: 600; }
/* Charcoal-on-gold CTA, never white-on-gold. Padding restated because the
   generic `.site-nav a` rule above outranks `.btn` and was zeroing the
   pill's horizontal padding (text touched the rounded ends — Brad,
   2026-07-11). Two-class specificity wins at both breakpoints. */
.site-nav .nav-cta { color: var(--charcoal); padding: .55rem 1.3rem; }

/* Mobile (<48rem): the list stacks full-width under the logo row. The
   .nav-collapsible class is added by the INLINE header script atomically
   with the toggle unhide (gate NEW-22) — without JS the class never
   exists and the stacked menu is simply always visible. */
@media (max-width: 47.99rem) {
  .site-nav { flex-basis: 100%; }
  .site-nav ul { flex-direction: column; align-items: stretch; padding: .6rem 0 .4rem; }
  .site-nav a { display: block; padding: .65rem 0; font-size: 1.1rem; }
  .site-nav a[aria-current="page"] { border-bottom: none; border-left: 3px solid var(--gold); padding-left: .7rem; }
  .site-nav .nav-cta { display: inline-flex; margin-top: .5rem; }
  .site-nav.nav-collapsible { display: none; }
  .site-nav.nav-collapsible.is-open { display: block; }
}
@media (min-width: 48rem) {
  .nav-toggle { display: none !important; } /* desktop never shows the toggle */
  .site-nav.nav-collapsible { display: block; }
}

/* ---- Footer (0b②: brand + secondary nav + newsletter, PRD §7.2) ---- */
.site-footer { background: var(--charcoal); color: #C7CDD4; padding: 3rem 0 2.4rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.2fr .8fr 1.4fr; gap: 2.5rem; align-items: start; } }
.site-footer .parent { color: #9AA2AB; font-size: .9rem; margin: .6rem 0 0; }
.footer-contact { font-size: .95rem; margin: .6rem 0 0; }
.footer-contact a { color: var(--gold); text-decoration: underline; }

.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav a { color: #C7CDD4; text-decoration: underline; font-size: .95rem; }
.footer-nav a:hover { color: var(--gold); }
.footer-nav li + li { margin-top: .55rem; }

.footer-heading { font-family: var(--ff-head); font-size: 1.05rem; font-weight: 700; color: var(--white); margin: 0 0 .4rem; }
.footer-news-sub { font-size: .95rem; margin: 0 0 .9rem; max-width: 34ch; }
.footer-news label { display: block; font-weight: 600; color: var(--white); font-size: .95rem; margin-bottom: .35rem; }
.footer-news-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.footer-news-row input[type="email"] {
  flex: 1 1 14rem; font: inherit; color: var(--charcoal);
  padding: .7rem .85rem; border: 1.5px solid var(--field-border);
  border-radius: var(--radius-sm); background: var(--white); min-width: 0;
}
.footer-news-row input:focus-visible { outline-color: var(--gold); border-color: var(--charcoal); }
.nl-error { color: var(--error-on-dark); font-size: .95rem; font-weight: 500; margin: .6rem 0 0; } /* 9.16:1 on charcoal (NEW-19); --error red fails on dark */
.nl-success { color: var(--white); font-size: 1rem; font-weight: 600; margin: .5rem 0 0; }
.nl-success:empty { margin: 0; } /* the status region ships visible-and-empty (NEW-18) */

/* Honeypot — off-screen, not display:none (promoted from page CSS; the
   footer form needs it sitewide) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }