/*
 * AE site chrome — the ONE stylesheet that decides what the header and footer
 * look like, on native Astro pages and on the 19 served WP mirror pages alike.
 *
 * Loaded by:
 *   src/layouts/Base.astro          (native pages, linked last in <head>)
 *   scripts/unify-mirror-chrome.mjs (injected into each mirror, linked last)
 *
 * Two rules for anyone editing this:
 *   1. Do NOT restate .site-header / .site-footer rules in Base.astro's global
 *      <style>. Two copies is exactly the bug this file exists to fix.
 *   2. It is injected into pages carrying Elementor's stylesheets, which are
 *      loaded BEFORE it and are heavily scoped to .elementor-* / .hfe-*. That
 *      is why everything here hangs off .site-header / .site-footer and why the
 *      link goes last — equal specificity, later wins.
 *
 * The design tokens live here rather than in Base.astro because the mirrors
 * need them too and have no other way to get them.
 */

:root {
  --color-primary: #0E0E0E;      /* header-ink */
  --color-bg: #FFFFFF;           /* paper */
  --color-cream: #F7F2E7;        /* parchment section bg */
  --color-accent: #C9A227;       /* antique-gold */
  --color-accent-dark: #a9861d;
  --color-bronze: #8C6239;       /* earth-bronze */
  --color-text: #1A1A1A;
  --color-text-dim: #5c5c5c;
  --color-white: #ffffff;
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;
  --max-width: 1140px;
}

/* Screen-reader-only text. Needed by the icon-only social links: an icon with
   no accessible name is an unlabelled link, which is the usual hidden cost of
   swapping text for icons. */
.site-header .sr-only,
.site-footer .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;
}

/* ── Reset against the WordPress theme ────────────────────────────────────────
 * `.site-header` and `.site-footer` are not our class names alone: the
 * hello-elementor theme that the mirrors still load defines both, in theme.css
 * and header-footer.css, and it sets layout we have to undo —
 *   .site-header { display:flex; flex-wrap:wrap; justify-content:space-between;
 *                  padding-block:1rem; position:relative }
 *   .site-header:not(.dynamic-header) { max-width:1140px; margin-inline:auto }
 * Loading later is not enough to win: that second selector is more specific than
 * a bare `.site-header`, which is why the first attempt rendered the black bar
 * inset inside white gutters with the nav wrapped onto its own row.
 *
 * !important is deliberate here and confined to this block. We are overriding a
 * third-party stylesheet we do not control and cannot reorder, on pages whose
 * <head> we only append to. Raising specificity instead would mean guessing at
 * selectors the theme might add in future; these six properties are the whole
 * surface of the conflict. Nothing else in this file uses !important.
 */
.site-header,
.site-footer,
.site-footer .footer-inner {
  display: block !important;
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  padding-block: 0 !important;
}

/* ── Header (ink black) ───────────────────────────────────────────────────── */
.site-header { background: var(--color-primary); position: sticky; top: 0; z-index: 50; }
.site-header .container,
.site-footer .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.site-header .header-inner { display: flex; flex-wrap: nowrap; align-items: center; gap: 28px; padding: 14px 24px; }
.site-header .header-inner.header-funnel { justify-content: center; }
.site-header .logo-link { display: inline-flex; align-items: center; line-height: 0; }
.site-header .logo-img { height: 42px; width: auto; display: block; max-width: none; }

.site-header .site-nav { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.site-header .site-nav a {
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .4px;
  white-space: nowrap;
  color: #e8e2d4;
  transition: color .15s;
  text-transform: none;
}
.site-header .site-nav a:hover { color: var(--color-accent); }

/* The School is the only page on this site that sells, so it gets the one
   accented slot rather than sitting as a peer of "Blog". */
.site-header .site-nav a.nav-cta {
  background: var(--color-accent);
  color: var(--color-primary);
  padding: 9px 18px;
  border-radius: 5px;
  font-weight: 700;
}
.site-header .site-nav a.nav-cta:hover { background: var(--color-accent-dark); color: #fff; }

/* ── Mobile menu ──────────────────────────────────────────────────────────────
   Before this existed the nav was simply `display:none` under 820px with no
   control to bring it back, so every phone visitor had no navigation at all —
   which also meant adding a School link to the menu would have been invisible
   to most of the traffic. */
.site-header .nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}
.site-header .nav-toggle-bar { display: block; width: 24px; height: 2px; background: #e8e2d4; }

@media (max-width: 820px) {
  .site-header .nav-toggle { display: flex; }
  .site-header .header-inner { flex-wrap: wrap; gap: 0; padding: 12px 16px; }
  .site-header .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 8px 0 4px;
  }
  .site-header .site-nav.is-open { display: flex; }
  .site-header .site-nav a { padding: 12px 4px; width: 100%; font-size: 16px; }
  .site-header .site-nav a.nav-cta {
    margin: 10px 0 4px;
    width: auto;
    padding: 12px 22px;
    text-align: center;
  }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer { background: var(--color-primary); color: #e8e2d4; text-align: center; padding-block: 56px 40px !important; }
/* .footer-inner is in the reset above for the same reason: the theme lays it out
   as a flex row, which put the logo, nav and social icons side by side instead of
   AE's centred stack. */
.site-footer .footer-logo { height: 48px; width: auto; margin: 0 auto 24px; display: block; max-width: none; }
.site-footer .footer-nav { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.site-footer .footer-nav a {
  color: #e8e2d4;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  opacity: .9;
}
.site-footer .footer-nav a:hover { opacity: 1; color: var(--color-accent); }

/* Social: icons, not words. Sized as tap targets (40px) rather than to the
   glyph, so they are usable on a phone. */
.site-footer .footer-social { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.site-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(232, 226, 212, .35);
  color: #e8e2d4;
  text-decoration: none;
  opacity: .9;
  transition: color .15s, border-color .15s, background .15s, opacity .15s;
}
.site-footer .footer-social a:hover {
  opacity: 1;
  color: var(--color-primary);
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.site-footer .footer-social svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* Selector matches the theme's own `.site-footer .footer-inner .copyright`, which
   sets `display:flex; justify-content:flex-end` and pushed this line off to the
   right. A two-class `.site-footer .copyright` loses to it on specificity, so this
   one deliberately carries the same three classes and wins by loading later. */
.site-footer .footer-inner .copyright { display: block; font-size: 13px; opacity: .8; }
.site-footer .footer-legal { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 0 0 10px; }
.site-footer .footer-legal a { font-size: 13px; color: inherit; opacity: .75; text-decoration: underline; }
.site-footer .footer-legal a:hover { opacity: 1; }
