/* Approved header: navy bar with an angled white logo panel. Built in CSS, so the logo stays a replaceable image. */
.top-bar, .site-header { --hdr-rule: var(--line-dark); --hdr-note: rgba(255, 255, 255, .74); --hdr-angle: 34px; }
.wp-block-template-part:has(> .site-header) { display: contents; }

.top-bar { border: 0; background: #050f20; color: var(--hdr-note); font-size: .75rem; }
.top-bar-inner { min-height: 28px; }
.top-bar-note { margin: 0; }

.site-header { border-bottom: 1px solid rgba(255, 208, 33, .38); background: var(--navy-900); }
.site-header :focus-visible { outline-color: var(--gold-400); }
.header-inner { align-items: stretch; gap: 20px; min-height: 72px; }

.brand { position: relative; z-index: 1; align-self: stretch; gap: 10px; margin-right: var(--hdr-angle); padding-block: 8px; }
.brand::before, .brand::after { content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; clip-path: polygon(0 0, 100% 0, calc(100% - var(--hdr-angle)) 100%, 0 100%); }
.brand::before { right: calc(-1 * var(--hdr-angle)); z-index: -1; background: var(--white); }
.brand::after { right: calc(-1 * var(--hdr-angle) - 4px); z-index: -2; background: var(--gold-400); }
.brand .logo { width: 132px; margin: 0; }
.brand .logo a { display: block; }
.brand .logo img { display: block; width: 100%; height: auto; }
.brand .badge { flex: none; width: 36px; margin: 0; }
.brand .badge img { display: block; width: 100%; height: auto; }

.main-nav { align-self: center; }
.nav-list { gap: 2px; }
.nav-top { position: relative; padding: 8px 12px; color: var(--white); font: 700 .9375rem/1.2 var(--font-head); letter-spacing: -.005em; }
.nav-top:hover, .nav-top[aria-expanded="true"] { background: none; color: var(--white); }
.nav-top::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--gold-400); transform: scaleX(0); transform-origin: left; transition: transform .16s ease; }
.nav-top:hover::before, .nav-top[aria-expanded="true"]::before, .nav-top:focus-visible::before { transform: scaleX(1); }

.header-util { align-self: center; order: 2; }
.header-util .wp-block-button__link { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border: 0; border-radius: var(--r-sm); background: var(--gold-400); color: var(--navy-900); font: 800 var(--fs-sm)/1.2 var(--font-head); white-space: nowrap; text-decoration: none; }
.header-util .wp-block-button__link:hover { background: var(--gold-300); color: var(--navy-900); }
.menu-toggle { align-self: center; order: 3; border-color: rgba(255, 255, 255, .45); background: none; color: var(--white); }

.mega { padding-top: 10px; }
.mega-inner { grid-template-columns: 250px repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; padding: 18px 24px 18px 18px; border-color: var(--line-dark); background: var(--navy-800); box-shadow: 0 28px 56px -22px rgba(0, 0, 0, .7); }
.mega-inner:has(> div:nth-child(2):last-child) { width: min(100% - 2 * var(--gutter), 680px); }
.mega-inner > div:not(.mega-intro) { padding-block: 14px 6px; }
.mega-intro { padding: 22px; background: rgba(255, 255, 255, .06); }
.mega-intro h2 { color: var(--white); font-family: var(--font-head); font-weight: 800; }
.mega-intro p { color: var(--hdr-note); }
.mega-intro .link-arrow { display: inline; color: var(--gold-300); font-size: .9375rem; }
.mega-group-title { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--hdr-rule); color: var(--gold-300); letter-spacing: .08em; }
.mega a.mega-link { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 58px; margin-inline: -12px; padding: 8px 12px; color: var(--white); }
.mega a.mega-link:hover { background: rgba(255, 255, 255, .08); color: var(--white); }
.mega-title { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.mega-note { color: var(--hdr-note); font-size: var(--fs-xs); font-weight: 400; line-height: 1.35; }
.nav-sheet { display: none; }

/* The header stays in view except on short screens, such as phones held sideways. */
@media (max-height: 560px) {
  .site-header { position: static; }
}

@media (max-width: 1239px) {
  .main-nav { left: 0; right: 0; max-height: calc(100dvh - 72px); background: var(--navy-900); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .7); }
  .nav-list { gap: 0; padding: 8px var(--gutter) 20px; }
  .nav-top { padding-inline: 4px; font-size: var(--fs-base); }
  .nav-top::before { display: none; }
  .nav-item { border-bottom: 1px solid var(--hdr-rule); }
  .mega { padding-top: 0; }
  .mega-inner, .mega-inner:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; width: 100%; padding: 2px 4px 14px; border: 0; background: none; box-shadow: none; }
  .mega-inner > div:not(.mega-intro) { padding-block: 6px 0; }
  .mega-intro { padding: 10px 0; background: none; }
  .nav-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
  .nav-sheet .btn { min-height: 48px; font-family: var(--font-head); font-weight: 800; }
  .nav-sheet p { grid-column: 1 / -1; margin: 4px 0 0; color: var(--hdr-note); font-size: var(--fs-xs); text-align: center; }
  .nav-call { border-color: rgba(255, 255, 255, .55); color: var(--white); }
}

@media (max-width: 599px) {
  .top-bar, .site-header { --hdr-angle: 22px; }
  .header-inner { min-height: 60px; gap: 10px; }
  .header-util.wp-block-buttons { display: none; }
  .menu-toggle { margin-left: auto; }
  .brand { gap: 8px; padding-block: 6px; }
  .brand .logo { width: 104px; }
  .brand .badge { width: 30px; }
  .main-nav { max-height: calc(100dvh - 60px); padding-bottom: 76px; }
  .mega-inner, .mega-inner:has(> div:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }
  .nav-sheet { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 359px) {
  .brand .logo { width: 88px; }
  .brand .badge { width: 26px; }
  .menu-toggle { min-width: 60px; padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-top::before { transition: none; }
}