/* KWCS site-header styles — extracted from _assets/kwcs-homepage-v4.html */

/* ─── KWCS LOGO (navy badge w/ gold wedge bottom, sticks with nav) ─── */
  .kwcs-logo-badge {
    position: fixed;
    top: 0px;
    left: 32px;
    width: 380px;
    z-index: 110;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content:center;
    transition: transform 0.2s ease;
    /* gold wedge layer is the background of the wrapper */
    background: var(--navy);
    /* tilt only the very bottom — the gold strip peeks below the navy */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), 0 100%);
    padding:0 2rem 2rem;
  }

.kwcs-logo-badge img {
    position: relative;
    z-index: 1;
    margin: 22px 36px 18px;
    width: calc(100% - 72px);
  }

/* ─── ANNOUNCEMENT BAR ─── */
  .announcement-bar {
    background: var(--navy);
    padding: 11px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    height: 44px;
  }

.announcement-bar-text {
    font-size: 13px;
    color: rgba(255,255,255,0.88);
    text-align: center;
    line-height: 1.4;
    font-weight: 500;
  }

.announcement-bar-text strong {
    color: var(--gold-light);
    font-weight: 800;
  }

.announcement-bar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gold);
    color: var(--navy-deep);
    border-radius: 100px;
    padding: 4px 12px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
  }

/* ─── NAV ─── */
  .kwcs-nav {
    position: fixed;
    top: 0px; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    height: 76px;
    background: var(--warm-white);
    border-bottom: 1px solid var(--border);
    transition: box-shadow 0.3s ease;
  }

.nav-logo { flex-shrink: 0; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
  }

.nav-links a {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy);
    text-decoration: none;
    transition: color 0.18s;
  }

.nav-links a:hover { color: var(--gold-deep); }

.nav-donate {
    background: #FFC80B;
    background: radial-gradient(circle, rgba(255, 200, 11, 1) 0%, rgba(245, 166, 36, 1) 100%);
    color: var(--navy-deep) !important;
    padding: 12px 30px;
    border-radius: 100px;
    font-weight: 800 !important;
    font-size: 14.5px !important;
    transition: background 0.18s, transform 0.15s !important;
  }

.nav-donate:hover {
    background: var(--gold-light) !important;
    color: var(--navy-deep) !important;
  }

/* Dropdowns */
  .nav-links li { position: relative; }

.nav-links li > a { display: flex; align-items: center; gap: 5px; }

.nav-links li > a .chevron {
    width: 12px; height: 12px;
    opacity: 0.55;
    transition: transform 0.2s ease, opacity 0.2s;
    flex-shrink: 0;
  }

.nav-links li:hover > a .chevron { transform: rotate(180deg); opacity: 1; }

.dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 2px solid var(--navy);
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(30,75,143,0.18);
    min-width: 240px;
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
    z-index: 200;
    pointer-events: none;
    margin-top: 14px;
  }

.dropdown::before {
    content: '';
    position: absolute;
    top: -18px; left: 0; right: 0;
    height: 18px;
    background: transparent;
  }

.nav-links li:hover .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

.dropdown a {
    display: block;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy) !important;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
  }

.dropdown a:hover { background: var(--gold-tint); color: var(--navy) !important; }

.dropdown-divider { height: 1px; background: var(--border); margin: 6px 8px; }

/* ─── HAMBURGER ─── */
  .nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px; height: 42px;
    background: var(--navy-tint);
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 12px;
    transition: background 0.2s;
  }

.nav-hamburger:hover { background: var(--gold-tint); }

.nav-hamburger span {
    display: block; height: 2.5px;
    background: var(--navy);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
  }

.nav-hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }

.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }

.nav-hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-menu {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--warm-white);
    z-index: 99;
    padding: 130px 32px 40px;
    flex-direction: column;
    overflow-y: auto;
  }

.mobile-menu.open { display: flex; }

.mobile-menu > a,
  .mobile-nav-item > .mobile-nav-trigger {
    font-family: 'Chewy', cursive;
    font-size: 30px;
    color: var(--navy-deep);
    text-decoration: none;
    padding: 14px 0;
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    width: 100%;
    text-align: left;
    transition: color 0.2s;
  }

.mobile-menu > a:hover,
  .mobile-nav-item > .mobile-nav-trigger:hover { color: var(--gold-deep); }

.mobile-nav-trigger .mob-chevron { width: 20px; height: 20px; color: var(--muted); transition: transform 0.25s; flex-shrink: 0; }

.mobile-nav-item.open > .mobile-nav-trigger .mob-chevron { transform: rotate(180deg); }

.mobile-nav-item.open > .mobile-nav-trigger { color: var(--gold-deep); border-color: var(--gold); }

.mobile-subnav { display: none; flex-direction: column; padding: 8px 0 16px 16px; border-bottom: 2px solid var(--border); gap: 2px; }

.mobile-nav-item.open > .mobile-subnav { display: flex; }

.mobile-subnav a {
    font-family: 'Nunito', sans-serif;
    font-size: 16px; font-weight: 700;
    color: var(--navy); text-decoration: none;
    padding: 10px 14px; border-radius: 10px;
    transition: background 0.15s;
  }

.mobile-subnav a:hover { background: var(--gold-tint); }

.mobile-menu .mobile-donate {
    margin-top: 24px;
    background: var(--gold);
    color: var(--navy-deep);
    padding: 18px 32px;
    border-radius: 100px;
    text-align: center;
    font-size: 18px;
    font-family: 'Chewy', cursive;
    border: none;
    text-decoration: none;
    box-shadow: 0 4px 0 var(--gold-deep);
  }

/* ── Collapse to the drawer, but keep Donate in the bar ──────────────────
   Below 1140px the six top-level links stop fitting, so they move into the
   mobile drawer. Donate stays visible in the bar down to 768px.

   The hamburger is the last child in the markup, so it needs an explicit
   order to sit to the left of the Donate button, and the logo's spacer takes
   margin-right:auto to push both of them to the right. */
@media (max-width: 1140px) {
  .kwcs-nav { gap: 16px; }
  .kwcs-nav-spacer { margin-right: auto; }

  .nav-hamburger { display: flex; order: 2; }
  .nav-links { order: 3; gap: 0; }

  /* Every item except the last (Donate) moves into the drawer. */
  .nav-links li:not(:last-child) { display: none; }
}

@media (max-width: 1024px) {
  .kwcs-nav { padding: 0 28px; }
  .nav-links { font-size: 13.5px; }
}

@media (max-width: 768px) {
  .announcement-bar { padding: 10px 20px; gap: 10px; }
  .announcement-bar-badge { display: none; }
  .announcement-bar-text { font-size: 12px; }
  .kwcs-nav { padding: 0 20px; height: 68px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}

/* ── Logo badge sizing ───────────────────────────────────────────────────
   The mockup pins the badge at a fixed 380px at every width, which on a
   phone covers most of the screen and sits on top of the open menu drawer.
   Scale it with the viewport and keep it under the drawer. */

.kwcs-nav-spacer {
    width: 200px;
    flex-shrink: 0;
  }

/* Steps down at 1250px rather than 1024px: the full-size badge starts
   crowding the nav links well before the tablet breakpoint. */
@media (max-width: 1250px) {
  .kwcs-logo-badge { width: 280px; left: 20px; padding: 0 1.4rem 1.4rem; }
  .kwcs-logo-badge img { margin: 16px 24px 12px; width: calc(100% - 48px); }
  .kwcs-nav-spacer { width: 150px; }
}

@media (max-width: 768px) {
  .kwcs-logo-badge {
    width: 190px;
    left: 12px;
    padding: 0 1rem 1rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 0 100%);
  }
  .kwcs-logo-badge img { margin: 10px 14px 8px; width: calc(100% - 28px); }
  .kwcs-nav-spacer { width: 110px; }

  /* The drawer opens below the nav, so it must clear the badge. */
  .mobile-menu { z-index: 120; }
}