/* KWCS site header — core blocks in parts/header.html (patterns/header.php).

   Structure, all siblings inside the header template part:
     [.announcement-bar]  optional Group, from the "KWCS Announcement Bar" pattern
     .kwcs-logo-badge     Image block linked to the home page
     .kwcs-nav            Group holding the Navigation block and the Donate button

   Everything is position:fixed on the front end. editor.css puts it back in
   flow for the Site Editor canvas. */

/* ─── LOGO BADGE (navy badge w/ angled bottom, sticks with nav) ─── */
.kwcs-logo-badge.wp-block-image {
  position: fixed;
  top: 0;
  left: 52px;
  width: 276px;
  margin: 0;
  /* Fixed ratio so the masked silhouette keeps its shape at every size. */
  aspect-ratio: 276 / 132;
  z-index: 110;
  background: var(--navy);
  /*
   * The badge is a rounded rectangle whose bottom edge rises to the right.
   * clip-path can do the angle but not the rounded corners with it, so the
   * silhouette is an SVG mask instead — stretched to the element, so the one
   * shape serves every breakpoint.
   */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 276 132' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H276 V88 Q276 106 258 108 L18 130 Q0 132 0 114 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 276 132' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H276 V88 Q276 106 258 108 L18 130 Q0 132 0 114 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.kwcs-logo-badge a { display: block; }

/* The Image block writes an inline width; the badge owns the sizing. */
.kwcs-logo-badge img {
  display: block;
  position: relative;
  z-index: 1;
  margin: 26px 42px 0;
  width: calc(100% - 85px) !important;
  height: auto;
}

/* ─── ANNOUNCEMENT BAR ─── */
.announcement-bar.wp-block-group {
  /* Darkest on the left, where it sits on top of the navy logo badge, so the
     two read as separate pieces; the gold rule marks the seam between them. */
  background: linear-gradient(90deg, #0F2A55 0%, var(--navy-deep) 45%, var(--navy-mid) 100%);
  box-shadow: inset 0 -3px 0 var(--gold), 0 2px 8px rgba(15, 42, 85, 0.25);
  padding: 11px 48px;
  gap: 16px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 44px;
  margin: 0;
}

/* Site Settings → Announcement renders a bare <p>, so the bar carries the
   flex centring itself rather than relying on the Group block's layout class. */
.announcement-bar.wp-block-group {
  display: flex;
  align-items: center;
  justify-content: center;
}

.announcement-bar .announcement-bar-text {
  font-size: 15px;
  color: var(--gold-light);
  text-align: center;
  line-height: 1.4;
  font-weight: 700;
  margin: 0;
  /* The bar is a fixed 44px tall; one line or nothing. */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.announcement-bar .announcement-bar-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transition: text-decoration-color 0.18s;
}

.announcement-bar .announcement-bar-text a:hover,
.announcement-bar .announcement-bar-text a:focus-visible { text-decoration-color: currentColor; }

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

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

/* ─── NAV BAR ─── */
.kwcs-nav.wp-block-group {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  gap: 30px;
  margin: 0;
  padding: 0 48px;
  height: 90px;
  background: var(--warm-white);
  border-top: 14px solid var(--navy);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s ease;
}

/* Reserves the space the logo badge overlaps, and pushes everything else to
   the right. */
.kwcs-nav::before {
  content: '';
  width: 170px;
  flex-shrink: 0;
  margin-right: auto;
}

.kwcs-primary-nav.wp-block-navigation {
  gap: 30px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
}

.kwcs-primary-nav .wp-block-navigation__container { gap: 30px; }

.kwcs-primary-nav .wp-block-navigation-item__content {
  color: var(--navy);
  text-decoration: none;
  transition: color 0.18s;
}

.kwcs-primary-nav .wp-block-navigation-item__content:hover,
.kwcs-primary-nav .wp-block-navigation-item__content:focus-visible { color: var(--gold-deep); }

/* Submenu chevron */
.kwcs-primary-nav .wp-block-navigation__submenu-icon {
  width: 12px;
  height: 12px;
  margin-left: 5px;
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.2s;
}

.kwcs-primary-nav .wp-block-navigation__submenu-icon svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.8;
}

.kwcs-primary-nav .has-child:hover > .wp-block-navigation__submenu-icon,
.kwcs-primary-nav .has-child:focus-within > .wp-block-navigation__submenu-icon {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown panel */
.kwcs-primary-nav .has-child > .wp-block-navigation__submenu-container {
  top: calc(100% + 14px);
  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);
  padding: 10px;
  z-index: 200;
  transition: opacity 0.2s ease, visibility 0.2s;
}

.kwcs-primary-nav .has-child:hover > .wp-block-navigation__submenu-container,
.kwcs-primary-nav .has-child:focus-within > .wp-block-navigation__submenu-container {
  min-width: 240px;
}

/* Bridges the gap so the panel doesn't close on the way down to it. */
.kwcs-primary-nav .has-child > .wp-block-navigation__submenu-container::before {
  content: '';
  position: absolute;
  top: -18px; left: 0; right: 0;
  height: 18px;
}

.kwcs-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--navy);
  white-space: nowrap;
  transition: background 0.15s;
}

.kwcs-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--gold-tint);
  color: var(--navy);
}

/* ─── DONATE BUTTON ─── */
.kwcs-nav-actions.wp-block-buttons { margin: 0; flex-shrink: 0; }

.nav-donate .wp-block-button__link {
  background: #FFC80B;
  background: radial-gradient(circle, rgba(255, 200, 11, 1) 0%, rgba(245, 166, 36, 1) 100%);
  color: var(--navy-deep);
  padding: 12px 30px;
  border-radius: 100px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 14.5px;
  line-height: 1.6;
  text-decoration: none;
  transition: background 0.18s, transform 0.15s;
}

.nav-donate .wp-block-button__link:hover {
  background: var(--gold-light);
  color: var(--navy-deep);
}

/* ─── HAMBURGER ─── */
.kwcs-primary-nav .wp-block-navigation__responsive-container-open {
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--navy-tint);
  border-radius: 12px;
  color: var(--navy);
  transition: background 0.2s;
}

.kwcs-primary-nav .wp-block-navigation__responsive-container-open:hover { background: var(--gold-tint); }

.kwcs-primary-nav .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; }

/* ─── MOBILE DRAWER (core Navigation overlay) ─── */
.kwcs-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--warm-white);
  color: var(--navy-deep);
  padding: 24px 32px 40px;
}

.kwcs-primary-nav .is-menu-open .wp-block-navigation__responsive-container-close {
  top: 0;
  right: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-tint);
  border-radius: 12px;
  color: var(--navy);
}

.kwcs-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  /* Clears the logo badge, which stays on top of the drawer. */
  padding-top: 106px;
}

.kwcs-primary-nav .is-menu-open .wp-block-navigation__container {
  width: 100%;
  gap: 0;
}

.kwcs-primary-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  width: 100%;
  border-bottom: 2px solid var(--border);
  padding: 14px 0;
}

.kwcs-primary-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  font-family: 'Chewy', cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--navy-deep);
}

.kwcs-primary-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: var(--gold-deep); }

.kwcs-primary-nav .is-menu-open .has-child .wp-block-navigation__submenu-container {
  transform: none;
  box-shadow: none;
  border-radius: 0;
  padding: 8px 0 0 16px;
  gap: 2px;
}

.kwcs-primary-nav .is-menu-open .has-child .wp-block-navigation__submenu-container::before { display: none; }

.kwcs-primary-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 16px;
  padding: 10px 14px;
  white-space: normal;
}

/* ── Collapse to the drawer, but keep Donate in the bar ──────────────────
   Below 1140px the top-level links stop fitting, so they move into the
   drawer. Core Navigation switches at 600px, so the switch is moved up here. */
@media (max-width: 1140px) {
  .kwcs-nav.wp-block-group { gap: 16px; }

  .kwcs-primary-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .kwcs-primary-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

@media (max-width: 1024px) {
  .kwcs-nav.wp-block-group { padding: 0 28px; }
}

@media (max-width: 768px) {
  .announcement-bar.wp-block-group { padding: 10px 20px; gap: 10px; }
  .announcement-bar .announcement-bar-badge { display: none; }
  .announcement-bar .announcement-bar-text { font-size: 13px; }
  .kwcs-nav.wp-block-group { padding: 0 20px; height: 82px; gap: 10px; }
  .nav-donate .wp-block-button__link { padding: 10px 18px; font-size: 13.5px; }
}

/* ── Logo badge sizing ───────────────────────────────────────────────────
   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.wp-block-image { width: 240px; left: 20px; }
  .kwcs-logo-badge img { margin: 22px 28px 0; width: calc(100% - 56px) !important; }
  .kwcs-nav::before { width: 140px; }
}

@media (max-width: 768px) {
  .kwcs-logo-badge.wp-block-image { width: 186px; left: 12px; }
  .kwcs-logo-badge img { margin: 17px 22px 0; width: calc(100% - 44px) !important; }
  .kwcs-nav::before { width: 110px; }
}

@media (max-width: 400px) {
  .kwcs-logo-badge.wp-block-image { width: 160px; left: 8px; }
  .kwcs-logo-badge img { margin: 15px 19px 0; width: calc(100% - 38px) !important; }
  .kwcs-nav::before { width: 90px; }
}

/* ── Announcement bar on ─────────────────────────────────────────────────
   It takes the top 44px and the nav and logo badge slide down under it.
   (base.css adjusts main's top padding to match.) */
.announcement-bar ~ .kwcs-nav.wp-block-group {
  top: 44px;
  border-top: 0;
  height: 76px;
}

.announcement-bar ~ .kwcs-logo-badge.wp-block-image { top: 44px; }

/* ── Admin bar ───────────────────────────────────────────────────────────
   WordPress clears the admin bar with `html { margin-top: 32px }`, but that
   does nothing for position:fixed elements — they resolve against the
   viewport — so the header has to be pushed down by hand. */
.admin-bar .kwcs-nav.wp-block-group,
.admin-bar .kwcs-logo-badge.wp-block-image,
.admin-bar .announcement-bar.wp-block-group { top: 32px; }

.admin-bar .announcement-bar ~ .kwcs-nav.wp-block-group,
.admin-bar .announcement-bar ~ .kwcs-logo-badge.wp-block-image { top: 76px; }

@media screen and (max-width: 782px) {
  .admin-bar .kwcs-nav.wp-block-group,
  .admin-bar .kwcs-logo-badge.wp-block-image,
  .admin-bar .announcement-bar.wp-block-group { top: 46px; }

  .admin-bar .announcement-bar ~ .kwcs-nav.wp-block-group,
  .admin-bar .announcement-bar ~ .kwcs-logo-badge.wp-block-image { top: 90px; }
}

@media screen and (max-width: 600px) {
  /* Below 600px WordPress un-fixes the admin bar and it scrolls away, so the
     header goes back to sitting at the top of the viewport. */
  .admin-bar .kwcs-nav.wp-block-group,
  .admin-bar .kwcs-logo-badge.wp-block-image,
  .admin-bar .announcement-bar.wp-block-group { top: 0; }

  .admin-bar .announcement-bar ~ .kwcs-nav.wp-block-group,
  .admin-bar .announcement-bar ~ .kwcs-logo-badge.wp-block-image { top: 44px; }
}