/* The site's header and footer — structure/behavior comes from
   assets/js/site-shell.js, this file is everything that styles that
   markup (.wc-site-header, .wc-nav, .wc-brand, .wc-dropdown,
   .wc-site-footer, .wc-footer-*, .wc-menu-*).

   This file is the SINGLE, LITERAL source of these rules. It is loaded
   two ways, never copy-pasted:
     - Bundled into shared.css / index-bundle.css (via
       admin/tools/bundle-css.php) for every page that uses the shared
       CSS bundle.
     - Linked directly via <link rel="stylesheet"> on any standalone
       page that can't load the shared bundle (currently
       word-counter-usa.html).
   Both paths load this exact file, so there is no hand-copied duplicate
   left to drift out of sync — which is exactly what happened twice
   before this file existed (word-counter-usa.html's own copy of this
   CSS silently fell behind on font-family, then again on font-size/
   spacing, because keeping a second copy manually in sync depends on
   remembering to update it every time, which failed in practice).

   Depends on CSS custom properties it does not define itself
   (--wc-primary, --wc-ink, --wc-muted, --wc-surface, --wc-border,
   --wc-shadow, --wc-body-gutter, etc.) — every page that loads this
   file already defines a :root block with these (site-theme.css for
   bundle pages, word-counter-usa.html's own inline :root for itself),
   so this file intentionally does not redeclare them. */
.wc-site-header {
  /* Explicit on purpose, not inherited: without this, the header's font
     silently follows whatever font-family that page's own body happens
     to declare - confirmed as a real, live bug where the 5 error pages
     (Arial) and word-counter-usa.html (a system-font stack) rendered the
     header in a visibly different font than every other page. This is
     the site's one real font, matching home.css's body rule - it must
     never be page-dependent. */
  font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  position: sticky;
  top: 10px;
  z-index: 1200;
  width: calc(90vw - 32px);
  max-width: 1440px;
  /* Literal 16px, not calc(5vw + 16px - var(--wc-body-gutter)) (changed
     2026-09-05): that older form only produced the intended flat 16px
     because --wc-body-gutter always equalled 5vw everywhere it was used —
     the 5vw term and the -var(--wc-body-gutter) term were written
     specifically to cancel each other out. Since --wc-body-gutter now
     varies by breakpoint (see the Page Width Rule in CLAUDE.md — it's a
     fixed 16px on screens 768px and under, not 5vw there), that
     cancellation would have silently broken, shifting the header sideways
     on every phone-sized screen. Writing the real, always-intended 16px
     directly removes the dependency entirely — same exact position at
     every screen size as before this change, just no longer fragile
     against a body-margin rule that no longer holds a single value. */
  margin: 10px 16px 0;
  padding: 0.65rem clamp(0.85rem, 3vw, 2rem);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--wc-border);
  border-radius: 32px;
  box-shadow: 0 8px 30px rgba(20, 30, 75, 0.08);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.dark-mode .wc-site-header {
  background: rgba(11, 16, 32, 0.92);
}
.wc-nav {
  /* position: relative added 2026-09-05 alongside the mega-menu redesign:
     .wc-dropdown is positioned absolute and anchored right: 0 against
     its nearest positioned ancestor. Before this, that ancestor was
     .wc-nav-links > li (the Countries <li> itself, a narrow element sitting
     mid-header) - a wide 1180px dropdown anchored to a narrow, off-center
     <li> overflowed both left and upward past the header's own edges,
     rendering the panel overlapping/behind the header instead of cleanly
     below it. Anchoring to .wc-nav instead - the same element whose own
     width (min(1180px, 100%)) the dropdown is deliberately matching -
     means right: 0 lines up with the header's real right content edge. */
  position: relative;
  width: min(1180px, 100%);
  min-height: 52px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.wc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  color: var(--wc-primary);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}
.wc-brand-mark {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 0.8rem;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(67, 97, 238, 0.28);
}
.wc-brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
}
.wc-nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wc-nav-links > li {
  position: relative;
}
/* Overrides the general rule above specifically for the Countries item:
   .wc-dropdown (absolute-positioned) must resolve against .wc-nav, not
   this narrow, off-center <li> - see the position: relative comment on
   .wc-nav for why. static removes this <li> as a positioning context so
   .wc-dropdown's absolute positioning skips past it to .wc-nav instead.
   Specificity note: written as .wc-nav-links > li.wc-has-dropdown (not
   just .wc-has-dropdown alone) so it's at least as specific as the
   ".wc-nav-links > li" rule above it - a bare .wc-has-dropdown selector
   is LESS specific than ".wc-nav-links > li" (one class vs one class +
   one type selector) and silently lost the cascade, which is exactly
   what happened the first time this was written this way: the dropdown
   kept resolving against the <li> instead of .wc-nav, still overlapping
   the header, until this was caught by live measurement. */
.wc-nav-links > li.wc-has-dropdown {
  position: static;
}
.wc-nav-links a {
  display: block;
  padding: 0.68rem 0.82rem;
  border-radius: 0.72rem;
  color: var(--wc-muted);
  font-weight: 650;
  line-height: 1.1;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}
.wc-nav-links button.wc-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.68rem 0.82rem;
  border: none;
  border-radius: 0.72rem;
  background: none;
  color: var(--wc-muted);
  font: inherit;
  font-weight: 650;
  line-height: 1.1;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.wc-nav-links a:hover,
.wc-nav-links button.wc-nav-toggle:hover {
  color: var(--wc-primary);
  background: rgba(67, 97, 238, 0.1);
  transform: translateY(-1px);
}
/* The dropdown-open indicator is deliberately a lighter touch than the
   filled "current page" pill above — recolor only, no background — so an
   open Countries menu never reads as if it were the current page sitting
   right next to it (e.g. Home showing aria-current on the homepage). */
.wc-has-dropdown.wc-open button.wc-nav-toggle {
  color: var(--wc-primary);
}
.wc-caret {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  margin-top: -2px;
}
.wc-nav-toggle[aria-expanded="true"] .wc-caret {
  transform: rotate(-135deg);
  margin-top: 2px;
}
/* Mega-menu treatment (added 2026-09-05, at the site owner's explicit
   request to match a wide, icon-illustrated card-grid reference design):
   the panel itself now spans the same content width as the header's own
   nav bar (min(1180px, 100%), matching .wc-nav) instead of a narrow
   15.5rem column, and each Countries link renders as an icon + title
   card rather than a plain text row. Positioned so its right edge lines
   up with the header's own right edge (right: 0, not left: 0) since the
   Countries toggle sits near the left of the nav but the panel is far
   wider than before - anchoring left would push most of the panel past
   the header's right boundary. */
.wc-dropdown {
  position: absolute;
  /* calc(100% + 0.65rem [.wc-site-header's own top/bottom padding] +
     1px [its border] + 0.4rem [the original visual gap]) - not just
     "100% + 0.4rem": now that .wc-dropdown is positioned against .wc-nav
     (see the position: relative comment on .wc-nav above) rather than the
     Countries <li>, 100% means the bottom of .wc-nav's own box - which
     sits INSIDE .wc-site-header's padding, not at the header's actual
     visible bottom edge. Without adding the header's own padding+border
     back in here, the panel's top edge lands about 11px above where the
     header visually ends, overlapping it - confirmed by live measurement
     (ddTop was 80px against a real headerBottom of 85px before this). */
  top: calc(100% + 0.65rem + 1px + 0.4rem);
  right: 0;
  width: min(1180px, calc(100vw - 2rem));
  margin: 0;
  padding: 0.85rem;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 0.6rem;
  /* Solid #fff, not var(--wc-surface) (added 2026-09-05): --wc-surface is
     a semi-transparent white (rgba(255,255,255,0.88)) everywhere else on
     the site, which reads fine on a small dropdown sitting over mostly
     plain background - but this panel is now wide enough to sit directly
     over the page's own H1 heading text, and the site owner reported the
     heading visibly showing through the panel. A dedicated solid color
     here (with its own dark-mode override right below) fixes this
     specific panel without changing --wc-surface's transparency
     everywhere else it's used (cards, the header itself, etc.). */
  background: #fff;
  border: 1px solid var(--wc-border);
  border-radius: 1.1rem;
  box-shadow: var(--wc-shadow);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s;
}
.dark-mode .wc-dropdown {
  /* Matching solid dark-mode counterpart to the light-mode #fff above -
     without this, dark mode would show a solid white panel (wrong) since
     .wc-dropdown no longer reads its background from --wc-surface, which
     is the variable that used to flip between light/dark automatically. */
  background: #181f35;
}
/* Same brand gradient already used on the logo mark and the tab/section
   underlines elsewhere on the site (var(--wc-primary) -> --wc-primary-dark)
   - reused here as a thin top accent instead of a new color. */
.wc-dropdown::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--wc-primary), var(--wc-primary-dark));
}
/* Each item is now its own bordered card in a grid, not a row in a
   stacked list, so the divider-per-row rule from the old narrow layout
   no longer applies. */
.wc-dropdown li + li {
  border-top: none;
}
.wc-dropdown a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
  padding: 0.85rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 0.85rem;
  color: var(--wc-ink);
  font-weight: 500;
  font-size: 0.88rem;
  line-height: 1.25;
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}
.wc-dropdown-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  background: rgba(67, 97, 238, 0.1);
  color: var(--wc-primary);
}
.wc-dropdown-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}
.wc-dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.wc-dropdown-title {
  color: var(--wc-ink);
  font-weight: 650;
  font-size: 0.92rem;
}
.wc-dropdown-desc {
  color: var(--wc-muted);
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.4;
}
/* Same rightward hover-shift already used on footer links (footer a:hover)
   elsewhere on the site - reused here so the two nav surfaces feel like
   one design language instead of two different hover styles. */
.wc-dropdown a:hover,
.wc-dropdown a:focus-visible {
  border-color: rgba(67, 97, 238, 0.35);
  background: rgba(67, 97, 238, 0.08);
  transform: translateY(-2px);
}
.wc-dropdown a:hover .wc-dropdown-title,
.wc-dropdown a:focus-visible .wc-dropdown-title {
  color: var(--wc-primary);
}
@media (min-width: 861px) {
  .wc-has-dropdown:hover > .wc-dropdown,
  .wc-has-dropdown.wc-open > .wc-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.wc-menu-button {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--wc-border);
  border-radius: 0.8rem;
  color: var(--wc-ink);
  background: var(--wc-surface);
  box-shadow: 0 6px 16px rgba(33, 43, 91, 0.1);
  cursor: pointer;
}
.wc-menu-lines,
.wc-menu-lines::after,
.wc-menu-lines::before {
  width: 20px;
  height: 2px;
  display: block;
  border-radius: 99px;
  background: currentColor;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.wc-menu-lines {
  position: relative;
}
.wc-menu-lines::after,
.wc-menu-lines::before {
  position: absolute;
  content: "";
  left: 0;
}
.wc-menu-lines::before {
  top: -6px;
}
.wc-menu-lines::after {
  top: 6px;
}
.wc-menu-button[aria-expanded="true"] .wc-menu-lines {
  background: 0 0;
}
.wc-menu-button[aria-expanded="true"] .wc-menu-lines::before {
  top: 0;
  transform: rotate(45deg);
}
.wc-menu-button[aria-expanded="true"] .wc-menu-lines::after {
  top: 0;
  transform: rotate(-45deg);
}
.wc-site-footer {
  /* Explicit on purpose - see the matching comment on .wc-site-header
     above: this must never silently follow whatever font a given page's
     own body declares. */
  font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  width: 100vw;
  margin-left: calc(-1 * var(--wc-body-gutter));
  margin-top: clamp(3rem, 8vw, 6rem);
  color: #fff;
  background:
    radial-gradient(
      circle at 10% 0,
      rgba(76, 201, 240, 0.16),
      transparent 24rem
    ),
    linear-gradient(145deg, #111827, #17112f);
  border-top: 1px solid rgba(76, 201, 240, 0.22);
}
.wc-footer-grid {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 2rem;
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(150px, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
}
.wc-site-footer h2 {
  margin: 0 0 1rem;
  color: #75dcfa;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#wc-footer-brand {
  font-size: 1.5rem;
  text-transform: none;
  letter-spacing: normal;
}
.wc-site-footer p {
  max-width: 34rem;
  color: #d6dceb;
  line-height: 1.7;
}
.wc-site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wc-site-footer li + li {
  margin-top: 0.6rem;
}
.wc-site-footer a {
  color: #e7ebf5;
  text-decoration: none;
}
.wc-site-footer a:hover {
  color: #75dcfa;
}
.wc-footer-social-label {
  margin: 1.35rem 0 0.8rem;
  color: #9aa5c0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.wc-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
/* Rounded-square "tinted badge" shape (16px radius) is this site's own
   established icon-container language — the same shape/size .feature-icon
   and .wc-feature-overlay-icon already use elsewhere, not a generic round
   social-icon button borrowed from somewhere else. Background stays a soft
   near-white (not solid #fff, not the header's dark-surface glass) since
   these icons carry their own real brand color and need a light, neutral
   surface to read correctly against the dark footer.
   !important on the properties home.css's older "footer a" rule also sets
   (index.html only) so this button keeps its own look there instead of
   inheriting that rule's text-link slide-and-recolor hover. */
.wc-footer-social-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 20px rgba(8, 12, 30, 0.32);
  text-decoration: none !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.wc-footer-social-link:hover,
.wc-footer-social-link:focus-visible {
  background: #ffffff;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 26px rgba(8, 12, 30, 0.4);
}
.wc-footer-social-link .wc-icon {
  width: 1.9rem;
  height: 1.9rem;
  filter: none;
}
@media (max-width: 480px) {
  .wc-footer-social-link {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 14px;
  }
  .wc-footer-social-link .wc-icon {
    width: 1.65rem;
    height: 1.65rem;
  }
}
.wc-footer-bottom {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.25rem 0 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #b7c0d4;
  text-align: center;
  font-size: 0.9rem;
}
.wc-footer-legal {
  margin-top: 0.6rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.wc-footer-legal a {
  font-size: 0.82rem;
  color: #9aa5c0;
}
.wc-footer-legal a:hover {
  color: #75dcfa;
}

@media (max-width: 860px) {
  .wc-menu-button {
    display: grid;
  }
  .wc-nav-links {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 50%;
    width: min(calc(100vw - 1.5rem), 34rem);
    max-height: min(72vh, 34rem);
    padding: 0.65rem;
    display: grid;
    gap: 0.18rem;
    overflow-y: auto;
    background: var(--wc-surface);
    border: 1px solid var(--wc-border);
    border-radius: 1rem;
    box-shadow: var(--wc-shadow);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s;
  }
  .wc-nav-links[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
  .wc-nav-links a {
    padding: 0.85rem 1rem;
    text-align: left;
  }
  .wc-nav-links button.wc-nav-toggle {
    width: 100%;
    justify-content: space-between;
  }
  .wc-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: auto;
    max-width: none;
    grid-template-columns: 1fr;
    box-shadow: none;
    border: none;
    background: rgba(67, 97, 238, 0.06);
    backdrop-filter: none;
    display: none;
    margin-top: 0.2rem;
  }
  .wc-has-dropdown.wc-open > .wc-dropdown {
    display: grid;
  }
}

@media (max-width: 640px) {
  .wc-footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  .wc-site-header {
    top: 10px;
    width: calc(90vw - 16px);
    margin-top: 10px;
    /* Literal 8px, not calc(5vw + 8px - var(--wc-body-gutter)) — same
       2026-09-05 fix and reasoning as the base .wc-site-header rule above:
       this only ever produced 8px because --wc-body-gutter was always 5vw
       everywhere; now that it's a fixed 16px at 768px and under (this
       360px rule is nested inside that same range), the old cancel-out
       form would have silently shifted the header. */
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 20px;
    padding-inline: 0.6rem;
  }
  .wc-brand {
    font-size: 1.03rem;
  }
  .wc-brand-mark {
    width: 2rem;
    height: 2rem;
  }
}