/* ================================================================
   SITE NAV — drop-in component
   ================================================================
   Self-contained styles for the <nav id="navbar" x-data="siteNav()">
   block in index.html. Pairs with js/nav-component.js.

   TO REUSE ON ANOTHER SITE:
     1. Copy this file, js/nav-component.js, and the <nav>...</nav>
        block (including the .nav__backdrop div) from index.html.
     2. Load Alpine.js, then js/nav-component.js, then link this file.
     3. This file assumes the host page defines these CSS custom
        properties on :root (values below are this site's — swap
        them for the target site's own palette/scale):
          --navy               (nav background, e.g. #0F2044)
          --white              (link/logo text)
          --red / --red-dark   (CTA button + link underline accent)
          --nav-height             (bar height, desktop)
          --nav-height-scrolled    (bar height, scrolled/menu-open)
          --container-max, --container-pad   (inner content width)
          --space-2 / -4 / -6 / -8            (spacing scale)
          --text-xs / -sm / -lg / -xl         (font-size scale)
          --radius-sm / -full                 (border-radius scale)
          --transition-fast / -base / -slow   (timing scale)
          --font-display                      (logo typeface)
        If a target site doesn't have these tokens, define them
        (scoped to .nav if you don't want to touch its global
        tokens) before linking this file.
     4. The mobile slide-out breakpoint is hard-coded to 768px
        below — adjust the @media query if the target site's
        breakpoint differs.
   ================================================================ */

/* Nav CTA button ("Donate" link) */
.nav__link--cta {
  background: var(--red) !important;
  color: var(--white) !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  transition: background var(--transition-base), transform var(--transition-fast);
}
.nav__link--cta:hover {
  background: var(--red-dark) !important;
  transform: translateY(-1px);
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  transition: background var(--transition-slow),
              height var(--transition-slow),
              box-shadow var(--transition-slow),
              backdrop-filter var(--transition-slow);
}

/* Transparent when over hero */
.nav:not(.nav--scrolled):not(.nav--menu-open) {
  background: transparent;
}

/* Solid when scrolled or menu open */
.nav--scrolled,
.nav--menu-open {
  background: var(--navy);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
  height: var(--nav-height-scrolled);
}

.nav__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  gap: var(--space-8);
}

/* Logo */
.nav__logo {
  position: relative; /* stack above .nav__links (z-index 999) while the mobile menu is open */
  z-index: 1001;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}
.nav__logo:hover { opacity: 0.85; }

.nav__logo-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}

.nav__logo-sub {
  padding-top: 5px;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* Links */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__link {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
  padding-block: var(--space-2);
  transition: color var(--transition-fast);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
}

.nav__link:hover {
  color: var(--white);
}
.nav__link:hover::after {
  width: 100%;
}

/* Hamburger toggle */
.nav__toggle {
  position: relative; /* stack above .nav__links (z-index 999) — otherwise the open panel covers
                          it and it becomes both invisible and unclickable */
  z-index: 1001;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.nav__toggle:hover { background: rgba(255,255,255,0.1); }

/* Backdrop (mobile menu only — hidden entirely above the breakpoint) */
.nav__backdrop {
  display: none;
}

.nav__toggle-bar {
  display: block;
  /* Explicit width + flex:none — iOS Safari does not reliably stretch
     empty flex children inside a <button>, which collapsed the bars to
     0px wide and made the hamburger look like it had disappeared. */
  width: 24px;
  height: 2px;
  flex: none;
  background: var(--white, #fff);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base), width var(--transition-base);
  transform-origin: center;
}

/* Hamburger → X animation */
.nav__toggle-bar--top-open { transform: translateY(7px) rotate(45deg); }
.nav__toggle-bar--mid-open { opacity: 0; transform: scaleX(0); }
.nav__toggle-bar--bot-open { transform: translateY(-7px) rotate(-45deg); }


/* --- Compact desktop / landscape tablet (769px–1050px) ---
   Keep the desktop nav on one line right up to the mobile breakpoint.
   This prevents Get Involved / Donate from wrapping or clipping while
   the rest of the page is still in its desktop presentation. */
@media (min-width: 769px) and (max-width: 1050px) {
  .nav__container {
    gap: var(--space-4);
    padding-inline: clamp(0.75rem, 2vw, 1.25rem);
  }

  .nav__links {
    gap: clamp(0.65rem, 1.6vw, var(--space-4));
  }

  .nav__logo-name {
    font-size: clamp(1rem, 2vw, var(--text-xl));
  }

  .nav__logo-sub {
    font-size: 0.625rem;
    letter-spacing: 0.06em;
  }

  .nav__link {
    font-size: clamp(0.72rem, 1.35vw, var(--text-sm));
    white-space: nowrap;
  }

  .nav__link--cta {
    padding: 0.45rem clamp(0.7rem, 1.5vw, 1rem) !important;
  }
}


/* --- Mobile slide-out panel (< 768px) --- */
@media (max-width: 768px) {

  .nav__toggle {
    display: flex;
  }

  .nav__links {
    position: fixed;
    /* Sits below the header bar instead of behind it — the panel used to
       start at top:0 with padding pushing its *content* down, which left
       its background overlapping the logo/toggle row for the full header
       height. Same color, so no visible seam — reads as the logo crowding
       into (or "overlapping") the menu. Starting the box itself below the
       bar removes the overlap structurally instead of just padding around it. */
    top: var(--nav-height-scrolled);
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--navy);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: var(--space-4);
    padding-inline: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    box-shadow: -8px 0 32px rgba(0,0,0,0.3);
    z-index: 999;
    overflow-y: auto;
  }

  .nav__links--open {
    transform: translateX(0);
  }

  /* Tap anywhere outside the panel to close it */
  .nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
    z-index: 998; /* below .nav__links (999) and .nav__toggle (part of .nav, 1000) */
  }

  .nav__backdrop--visible {
    opacity: 1;
    pointer-events: auto;
  }

  .nav__link {
    display: block;
    width: 100%;
    padding: var(--space-4) 0;
    font-size: var(--text-lg);
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.9);
  }

  .nav__link::after { display: none; }

  .nav__link--cta {
    margin-top: var(--space-4);
    width: 100%;
    text-align: center;
    border-radius: var(--radius-sm) !important;
    border: none !important;
  }
}