/* ==========================================================================
   SMWF Header (Components) – token-aware, minimal
   Depends on global tokens:
   --smwf-surface, --smwf-bg, --smwf-ink, --smwf-ring, --smwf-shadow,
   --smwf-radius, --smwf-gap, --smwf-container
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .smwf-header * {
    transition: none !important;
  }
}

/* Scope to your custom header wrapper if you add one */
#smwf-header,
.smwf-header {
  --hd-bg: var(--smwf-surface, #fff);
  --hd-border: color-mix(in oklab, var(--smwf-ink, #2B1B17) 12%, #fff);
  background: var(--hd-bg);
  color: var(--smwf-ink, #2B1B17);
  border-bottom: 1px solid var(--hd-border);
  position: relative;
  z-index: 40;
}

/* Inner container */
.smwf-header__inner {
  max-width: var(--smwf-container, 1200px);
  margin: 0 auto;
  padding: .75rem 20px;
  display: flex;
  align-items: center;
  gap: var(--smwf-gap, 20px);
  justify-content: space-between;
  min-height: 64px;
}

/* Brand link */
.smwf-header__brand {
  font-weight: 800;
  color: var(--smwf-donate, #C74B1C);
  text-decoration: none;
  line-height: 1;
}

.smwf-header__brand:focus-visible {
  outline: 3px solid var(--smwf-ring, rgba(218, 165, 32, .35));
  outline-offset: 2px;
}

/* Optional compact mega menu width helpers (kept minimal) */
.smwf-mega {
  max-width: var(--smwf-container, 1200px);
  margin: 0 auto;
  padding: 1rem 20px;
}

/* Optional: subtle elevated state when a “scrolled” class is present */
.smwf-header.is-scrolled,
#smwf-header.is-scrolled {
  box-shadow: var(--smwf-shadow, 0 4px 20px rgba(0, 0, 0, .06));
  background: color-mix(in oklab, var(--smwf-surface, #fff) 85%, var(--smwf-bg, #EDC9AF1a) 15%);
}

/* Optional: when using a dark hero behind a transparent header */
.smwf-header.is-transparent {
  background: transparent;
  border-bottom-color: transparent;
}

.smwf-header.is-transparent.is-scrolled {
  background: var(--smwf-surface, #fff);
  border-bottom-color: color-mix(in oklab, var(--smwf-ink, #2B1B17) 12%, #fff);
}

/* --------------------------------------------------------------------------
   CTA Buttons (Partner + Donate)
   v1.1 – 2025-10-24
   Author: SMWF System Styles
--------------------------------------------------------------------------- */
.smw-nav .smw-cta>a,
.smw-nav .smw-cta--secondary>a {
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.55rem 1rem;
}

/* Primary CTA – Donate */
.smw-nav .smw-cta>a {
  background-color: var(--smwf-accent-2, #d97706);
  color: #fff !important;
}

.smw-nav .smw-cta>a:hover,
.smw-nav .smw-cta>a:focus-visible {
  background-color: #b86505;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
}

/* Secondary CTA – Partner with Us */
.smw-nav .smw-cta--secondary>a {
  background-color: var(--smwf-accent-3, #0d7a5f);
  color: #fff !important;
}

.smw-nav .smw-cta--secondary>a:hover,
.smw-nav .smw-cta--secondary>a:focus-visible {
  background-color: #0b664f;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
}

/* Active press + focus accessibility */
.smw-nav .smw-cta>a:active,
.smw-nav .smw-cta--secondary>a:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

.smw-nav .smw-cta>a:focus-visible,
.smw-nav .smw-cta--secondary>a:focus-visible {
  outline: 3px solid var(--smwf-ring, rgba(218, 165, 32, .35));
  outline-offset: 2px;
}

/* ===== Expansion Mega tweaks (reuse existing .smw-mega styles) ===== */

/* Meta CTA row at bottom of mega */
.smw-mega__meta {
  display: flex;
  gap: .6rem;
  align-items: center;
  border-top: 1px solid color-mix(in oklab, var(--smwf-ink, #2B1B17) 10%, transparent);
  padding-top: .75rem;
  margin-top: .75rem;
}

/* Pills – inherit your token palette */
.smw-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .95rem;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  background: var(--smwf-pill, #EDC9AF);
  /* Desert Sand tint fallback */
  color: var(--smwf-accent, #7C8A4D);
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
  transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.smw-pill:hover {
  transform: translateY(-1px);
}

.smw-pill--outline {
  background: transparent;
  color: var(--smwf-ink, #2B1B17);
  border: 1px solid color-mix(in oklab, var(--smwf-ink, #2B1B17) 18%, transparent);
}

/* Badges for LIVE / COMING SOON */
.badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: .15rem .4rem;
  border-radius: .4rem;
  line-height: 1;
  margin-left: .35rem;
  border: 1px solid transparent;
}

.badge.live {
  background: color-mix(in oklab, var(--smwf-accent, #7C8A4D) 14%, #fff);
  color: var(--smwf-accent, #7C8A4D);
  border-color: color-mix(in oklab, var(--smwf-accent, #7C8A4D) 35%, transparent);
}

.badge.soon {
  background: color-mix(in oklab, var(--smwf-donate, #C74B1C) 8%, #fff);
  color: var(--smwf-donate, #C74B1C);
  border-color: color-mix(in oklab, var(--smwf-donate, #C74B1C) 28%, transparent);
}

/* Nested list inside Expansion mega */
.smw-mega-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .35rem;
}

.smw-mega-list a {
  display: flex;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
  color: var(--smwf-ink, #2B1B17);
  font-weight: 500;
  line-height: 1.45;
  padding: .2rem 0;
}

.smw-mega-list a:hover {
  color: var(--smwf-accent, #7C8A4D);
}

/* ===== Expansion Mega: regional summary lines ===== */
.smw-mega__desc {
  font-size: .85rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--smwf-ink, #2B1B17) 65%, transparent);
  margin: .25rem 0 .6rem;
  max-width: 22ch;
}

/* Ensure lists sit close after the description */
.smw-mega-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .35rem;
}

.smw-mega-list a {
  display: flex;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
  color: var(--smwf-ink, #2B1B17);
  font-weight: 500;
  line-height: 1.45;
  padding: .2rem 0;
}

.smw-mega-list a:hover {
  color: var(--smwf-accent, #7C8A4D);
}