/* =========================================================================
   WW1AHT MASTER — NAVIGATION  (header 1a + 1b, mega-menu, mobile, footer)
   Two switchable header treatments (decision D2), chosen via the
   'ww1aht_header_style' theme mod. Both share the brand, Donate button and
   footer; only the header/nav layout differs.
   ========================================================================= */

.site-header { position: sticky; top: 0; z-index: 30; }

/* ---- Brand (shared) ---------------------------------------------------- */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__logo, .brand__logo img, .brand__logo a { display: block; }
.brand__text { display: flex; flex-direction: column; }
.brand__word {
  font-family: var(--font-heading); font-weight: var(--fw-heading);
  line-height: 1.05; text-decoration: none;
}
.brand__tag {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-ink); margin-top: 3px;
}

/* Nav-scale buttons.
   The header runs a compact size for EVERY button, not just Donate, so the
   CTA pair matches height for height. Bordered variants lose their border
   width from the padding to keep the same outer box (7+2 = 9, 18+2 = 20). */
.site-header .btn { padding: 9px 20px; font-size: 0.95rem; }
.site-header .btn--secondary { padding: 7px 18px; }

/* Mobile toggle (hidden on desktop) */
.nav-toggle {
  display: none; margin-left: auto;
  background: transparent; border: 1px solid currentColor; color: inherit;
  border-radius: var(--radius); padding: 8px 12px; font: inherit; cursor: pointer;
}

/* =========================== HEADER 1a =================================== */
.header-1a .utility-bar { background: var(--primary-dark); color: var(--accent); font-size: 0.78rem; }
/* flex-wrap matters more than it looks. Without it this bar is a nowrap row of
   a charity line, a ~34-character email address and the basket, which cannot
   fit a phone — so the DOCUMENT overflowed sideways. That pushed the basket off
   the right edge, and it broke the mobile menu's close button too: on mobile,
   position:fixed anchors to the LAYOUT viewport, so "16px from the right" lands
   16px from the right of the overflow rather than of the screen. */
.header-1a .utility-bar .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; padding-block: 6px; }
.header-1a .utility-bar .wrap > * { min-width: 0; }
.header-1a .utility-bar a { color: var(--accent); text-decoration: none; }
.header-1a .utility-bar a:hover { color: var(--hover-accent); }
.header-1a .util-right { margin-left: auto; display: flex; gap: 18px; }
/* Utility bar is menu-driven (Appearance > Menus > Utility Menu), so strip list chrome. */
.header-1a .util-right .utility-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }

/* ---- Basket link -------------------------------------------------------
   Printed in the header on EVERY page (see assets/custom/setup-shop.php), so
   its rules must live in a stylesheet that loads everywhere. They began life
   in woocommerce.css, which is only enqueued on shop pages — off the shop the
   SVG had no width and _base.css's `svg { max-width: 100% }` let it balloon to
   about 46px in the utility bar. Header furniture belongs here.

   Sized against the bar's 0.78rem text rather than in isolation: a 15px
   trolley and an 18px count disc both out-shouted the type around them.     */
.util-cart { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.util-cart:hover { text-decoration: underline; }
.util-cart__icon { width: 12px; height: 12px; flex: 0 0 auto; stroke-width: 1.75; }
.util-cart__count {
  display: inline-grid; place-items: center;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px;
  background: var(--accent); color: var(--primary-dark);
  font-size: 0.6rem; font-weight: var(--fw-semibold); line-height: 1;
}
.util-cart.is-empty .util-cart__count { display: none; }

.header-1a .main-bar { background: var(--primary); color: var(--bg); }
.header-1a .main-bar .wrap { display: flex; align-items: center; gap: 18px; padding-block: 12px; }
.header-1a .brand__logo img { width: 52px; height: 52px; }
.header-1a .brand__word { color: var(--bg); font-size: 1.3rem; }

/* Nav flows on from the brand; only the call-to-action pair is pushed hard
   right, so there is no dead space between the logo and the first menu item. */
.header-1a .primary-nav { flex: 1; display: flex; align-items: center; gap: 22px; font-size: 0.98rem; }
.header-1a .primary-nav .nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header-1a .primary-menu { list-style: none; display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; }
.header-1a .primary-menu a { color: var(--bg); text-decoration: none; }
.header-1a .primary-menu a:hover { color: var(--hover-accent); }

/* Explore mega-menu */
.nav-mega { position: relative; }
.nav-mega__trigger {
  color: var(--bg); background: none; border: 0; font: inherit; cursor: pointer;
  padding: 8px 0; display: inline-flex; gap: 5px; align-items: center;
}
.nav-mega__panel {
  /* Widened from 620px and given a deeper shadow: over the dark hero the old
     panel read as a flat white rectangle pasted on the page rather than
     something floating above it. */
  position: absolute; top: 100%; left: 0; width: 720px; max-width: calc(100vw - 32px);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: 0 0 4px 4px; padding: 24px 26px;
  box-shadow: 0 24px 60px rgba(15, 22, 34, 0.38); z-index: 40;
  /* Column count follows the Explore menu, so it adapts to 2, 3 or 4 columns. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 18px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--dur-menu) var(--ease), transform var(--dur-menu) var(--ease), visibility var(--dur-menu);
}
.nav-mega:hover .nav-mega__panel,
.nav-mega:focus-within .nav-mega__panel,
.nav-mega.is-open .nav-mega__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-mega__col h3 { font-size: 1.1rem; margin: 0 0 6px; }
.nav-mega__col h3 a { color: var(--primary); text-decoration: none; }
.nav-mega__col a { display: block; font-size: 0.85rem; color: var(--muted); line-height: 1.9; text-decoration: none; }
.nav-mega__col a:hover { color: var(--primary); }

/* =========================== HEADER 1b =================================== */
.header-1b { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-1b .brand-row .wrap { display: flex; align-items: center; gap: 18px; padding-block: 16px; }
.header-1b .brand__logo img { width: 56px; height: 56px; }
.header-1b .brand__word { color: var(--primary); font-size: 1.4rem; }
.header-1b .util-cluster { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
/* 1b sits on a light surface, so the plain system secondary is used as-is. */
.header-1b .nav-cta { display: flex; align-items: center; gap: 12px; }
.header-1b .util-links { display: flex; gap: 16px; font-size: 0.8rem; }
.header-1b .util-links .utility-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; }
.header-1b .util-links a { color: var(--muted); text-decoration: none; }
.header-1b .util-links a:hover { color: var(--primary); }

.header-1b .navbar { background: var(--primary); border-top: 1px solid var(--line); color: var(--bg); }
.header-1b .navbar .wrap { display: flex; align-items: stretch; }
.header-1b .navbar .primary-menu { list-style: none; display: flex; gap: 4px; align-items: stretch; margin: 0; padding: 0; }
.header-1b .navbar .primary-menu a {
  color: var(--bg); font-size: 0.95rem; padding: 13px 16px; text-decoration: none;
  border-bottom: 3px solid transparent; display: block;
}
.header-1b .navbar .primary-menu a:hover { border-bottom-color: var(--hover-accent); }
.header-1b .navbar .primary-menu .current-menu-item > a,
.header-1b .navbar .primary-menu .current_page_item > a,
.header-1b .navbar .primary-menu .current-menu-parent > a { border-bottom-color: var(--accent); }

/* ============================ FOOTER ==================================== */
.site-footer { background: var(--primary); color: var(--bg); border-top: 3px solid var(--accent); }
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { color: var(--hover-accent); }

/* Tier 1 — brand opposite the social row. */
.site-footer__main .wrap {
  display: flex; align-items: center; gap: var(--space-md);
  flex-wrap: wrap; padding-block: var(--space-lg);
}
.site-footer__brand { display: flex; align-items: center; gap: 14px; }
.site-footer__logo img { width: 40px; height: 40px; }
.site-footer__names { display: flex; flex-direction: column; }
.site-footer__word { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 1.15rem; }
.site-footer__tag { font-size: 0.82rem; color: var(--accent); }

/* Social icon row — icons inherit colour via fill="currentColor". */
.social { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.social__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent);
  transition: background var(--dur-menu) var(--ease), color var(--dur-menu) var(--ease);
}
.social__link:hover { background: var(--accent); color: var(--primary-dark); }
.social__link svg { display: block; }

/* Tier 2 — About / Contact / Affiliations columns. */
.site-footer__cols { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.site-footer__cols .wrap {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-lg); padding-block: var(--space-lg);
}
.site-footer__h {
  font-family: var(--font-heading); font-size: 1.05rem; font-weight: var(--fw-semibold);
  color: var(--accent); margin: 0 0 10px;
}
.site-footer__col p { margin: 0; font-size: 0.88rem; line-height: 1.65; }
.site-footer__contact { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.site-footer__contact li { margin-bottom: 5px; }
.site-footer__aff .footer-aff-menu { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.site-footer__aff .footer-aff-menu li { margin-bottom: 5px; }

/* Tier 4 — photography credit. */
.site-footer__credits {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.76rem; color: rgba(255, 255, 255, 0.6);
}
.site-footer__credits p { margin: 0; padding-block: var(--space-sm); }

/* Tier 3 — legal bar. */
.site-footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.82rem; }
.site-footer__legal .wrap {
  display: flex; align-items: center; gap: var(--space-md);
  flex-wrap: wrap; padding-block: var(--space-md);
}
.site-footer__charity { color: var(--accent); }
.site-footer__links { margin-left: auto; }
.site-footer__links .footer-menu {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px;
}

/* ============================ MOBILE ==================================== */
@media (max-width: 860px) {
  .nav-toggle { display: inline-block; }

  /* Footer columns stack — reset the desktop column flow. */
  .site-footer__cols .wrap { grid-auto-flow: row; grid-template-columns: 1fr; gap: var(--space-md); }
  .site-footer__main .wrap { flex-direction: column; align-items: flex-start; }
  .social { margin-left: 0; }
  .site-footer__links { margin-left: 0; }

  /* 1a */
  .header-1a .main-bar .wrap { flex-wrap: wrap; }
  .header-1a .primary-nav { display: none; flex-basis: 100%; margin-left: 0; flex-direction: column; align-items: stretch; gap: 0; }

  /* ---- Mobile menu: a full-screen panel, not a dropdown -------------------
     It used to expand inline below the bar, so page content showed underneath
     it and there was no obvious way to close it — the button just carried on
     saying "Menu". Now it covers the viewport on a solid background, the
     toggle becomes a close control pinned top-right, and ui.js locks the page
     behind it so the body does not scroll under your thumb. */
  .header-1a.nav-open .primary-nav {
    display: flex;
    position: fixed; inset: 0;
    z-index: 60;
    background: var(--primary-dark);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 74px var(--space-lg) var(--space-xl);
    gap: 0;
  }
  /* Clear the WordPress admin bar for logged-in editors. */
  body.admin-bar .header-1a.nav-open .primary-nav { top: 46px; }

  .header-1a.nav-open .nav-toggle {
    position: fixed; top: 16px; right: 16px; z-index: 61;
  }
  body.admin-bar .header-1a.nav-open .nav-toggle { top: 62px; }

  /* Donate must not be two taps away on a charity site. A compact pill stays
     in the collapsed bar; the full-width one inside the menu still exists for
     anyone who has opened it. Composed from the sanctioned .btn--donate — this
     class only positions and sizes it, it is not a new button variant. */
  .header-1a .nav-donate-mobile {
    display: inline-flex; align-items: center;
    margin-left: auto; margin-right: 12px;
    padding: 8px 16px; font-size: 0.88rem;
  }
  .header-1a.nav-open .nav-donate-mobile { display: none; }
  .header-1a .primary-menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .header-1a .primary-menu a { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .header-1a .nav-mega { width: 100%; }
  .header-1a .nav-mega__panel {
    position: static; width: auto; box-shadow: none;
    /* Override the desktop column flow — columns stack on a narrow screen. */
    grid-auto-flow: row; grid-template-columns: 1fr;
    opacity: 1; visibility: visible; transform: none; display: none;
    border-radius: 0; padding: var(--space-md) 0;
  }
  .header-1a .nav-mega.is-open .nav-mega__panel { display: grid; }
  /* Buttons stack full width rather than sitting side by side. */
  .header-1a .primary-nav .nav-cta {
    margin-left: 0; flex-direction: column; align-items: stretch; gap: var(--space-sm);
  }
  .header-1a .site-header .btn--donate,
  .header-1a .primary-nav .nav-cta .btn { margin-top: var(--space-sm); text-align: center; }

  /* 1b */
  .header-1b .navbar .wrap { flex-wrap: wrap; }
  .header-1b .navbar .primary-menu { display: none; flex-basis: 100%; flex-direction: column; }
  .header-1b.nav-open .navbar .primary-menu { display: flex; }
  .header-1b .navbar .primary-menu a { border-bottom: none; border-top: 1px solid rgba(255, 255, 255, 0.12); }
}

/* ---- Phone: keep the utility bar to a single tidy line -------------------
   Wrapping stops the overflow, but three items on a 390px screen still costs
   two or three lines of vertical space above the fold. On a phone the bar
   keeps the charity number (it legitimises the site at a glance) and the
   basket (it is functional). The Trust email address goes: it is a poor use of
   a cramped top bar and it already appears in the footer Contact column on
   every single page, so nothing is actually lost. */
@media (max-width: 640px) {
  .header-1a .util-right { display: none; }
  .header-1a .utility-bar { font-size: 0.72rem; }
  .header-1a .util-cart { margin-left: auto; }
}

/* The mobile-only Donate pill has no place on a desktop header, where the full
   Donate button already sits in the nav. */
.nav-donate-mobile { display: none; }

/* Footer widget area (populated from the footer-widgets sidebar) */
.site-footer__widgets { background: var(--primary); color: var(--bg); border-top: 3px solid var(--accent); }
.footer-widgets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); padding-block: var(--space-xl); }
.site-footer__widgets + .site-footer { border-top: 1px solid rgba(255, 255, 255, 0.14); }

/* ---- Primary-menu sub-menus → hover dropdown (fixes the open-submenu spill) */
.primary-menu li { position: relative; }
.primary-menu .sub-menu {
  list-style: none; margin: 0; padding: 8px 0;
  position: absolute; top: 100%; left: 0; min-width: 230px;
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: 0 0 4px 4px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2); z-index: 40;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--dur-menu) var(--ease), transform var(--dur-menu) var(--ease), visibility var(--dur-menu);
}
.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu,
.primary-menu .has-children:hover > .sub-menu,
.primary-menu .has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-menu .menu-item-has-children > a::after,
.primary-menu .has-children > a::after { content: " \25be"; font-size: 0.78em; }
.header-1a .primary-menu .sub-menu a,
.header-1b .navbar .primary-menu .sub-menu a { color: var(--primary); display: block; padding: 7px 16px; border: 0; }
.header-1a .primary-menu .sub-menu a:hover,
.header-1b .navbar .primary-menu .sub-menu a:hover { color: var(--accent-ink); background: var(--bg); }
.header-1b .navbar .primary-menu .sub-menu a { border-bottom: 0; }
/* Nested submenu spacing */
.primary-menu .sub-menu .sub-menu { top: 0; left: 100%; }

/* Fix: keep each nav item on one line (no mid-word wrapping) */
.primary-menu li { flex-shrink: 0; }
.primary-menu a { white-space: nowrap; line-height: 1.15; }
.header-1a .primary-nav { flex-wrap: wrap; row-gap: 4px; }

/* Fix: use lining figures so the "1" in "WW1" is full cap-height, not a small
   old-style figure. Applies to the brand wordmark in header and footer. */
.brand__word, .site-footer__word { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* Tighten 1a nav to fit the full menu + Donate on one line */
.header-1a .primary-nav { flex-wrap: nowrap; gap: 15px; font-size: 0.9rem; }
.header-1a .primary-menu { gap: 15px; }
.header-1a .main-bar .wrap { gap: 14px; }

/* Bigger logo + single-line wordmark; nav tightened to keep one row */
.header-1a .brand__logo img { width: 74px; height: 74px; }
.header-1b .brand__logo img { width: 72px; height: 72px; }
.site-footer__logo img { width: 54px; height: 54px; }
.brand__word { white-space: nowrap; }
.header-1a .brand__word { font-size: 1.2rem; }
.header-1a .primary-nav { gap: 14px; font-size: 0.88rem; }
.header-1a .primary-menu { gap: 14px; }

/* Logo: use the crisp native-res logo (122px source) at a size close to native
   so it never softens from heavy downscaling. */
.header-1a .brand__logo img { width: 92px; height: 92px; }
.header-1b .brand__logo img { width: 88px; height: 88px; }
.site-footer__logo img { width: 60px; height: 60px; }
.brand__logo img { image-rendering: auto; }

/* Logo medallion: the official badge has a black outer ring that disappears on
   the navy header, so seat it on a light tile so it reads cleanly on dark. */
.header-1a .brand__logo { background: #fefdfb; border-radius: 10px; padding: 6px 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28); display: inline-flex; }
.header-1a .brand__logo img { display: block; }

/* Logo: drop the medallion box, go large and readable (wordmark removed frees
   the room), give the bar more depth to seat it. */
.header-1a .brand__logo { background: transparent; box-shadow: none; padding: 0; }
.header-1a .brand__logo img { width: 118px; height: 118px; }
.header-1a .main-bar .wrap { padding-block: 12px; align-items: center; }

/* Logo bigger than live (122px) for legibility; deeper bar to seat it. */
.header-1a .brand__logo img { width: 148px; height: 148px; }
.header-1a .main-bar .wrap { padding-block: 10px; }

/* Logo EXACTLY as live: the live file (cropped-cropped-object644706095-3.png)
   at its native 122x122, 1:1, no box, no scaling. */
.header-1a .brand__logo, .header-1b .brand__logo { background: transparent; box-shadow: none; padding: 0; }
.header-1a .brand__logo img, .header-1b .brand__logo img { width: 122px; height: 122px; }