/* ============================================================
   COMPONENT · Header / Nav  (.header, .nav, .sub, .burger, .mobile*, header CTAs, inner-page header fixes, compact-tier @media)
   Auto-split from main.css (Phase 1). Load order fixed in inc/enqueue.php.
   ============================================================ */


/* header — measured to SecurityBlog: 80px, transparent overlay, sticky slides in dark #1F445E */
.header{position:absolute;top:0;left:0;right:0;z-index:30;height:80px;background:transparent;transition:.4s background;}
.header.is-stuck{position:fixed;background:#1F445E;box-shadow:0 6px 24px rgba(0,0,0,.22);animation:ndDrop .4s ease;}
@keyframes ndDrop{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.header__inner{display:flex;align-items:center;height:80px;}
.logo{font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-.01em;line-height:80px;}
.logo span{color:var(--green);}
.logo--light{color:#fff;}
.nav{flex:1;display:flex;justify-content:center;}
.nav>ul{display:flex;align-items:center;}
.nav>ul>li{margin-right:25px;}
.nav>ul>li:last-child{margin-right:0;}
.nav>ul>li>a{position:relative;display:inline-block;height:80px;line-height:80px;font-size:.75rem;font-weight:400;letter-spacing:0;text-transform:uppercase;color:#fff;transition:.2s color;}
.nav>ul>li>a:hover{color:var(--green);}
.nav>ul>li>a::after{content:"";position:absolute;left:0;right:0;margin:0 auto;bottom:22px;width:0;height:1px;background:var(--green);transition:width .6s;}
.nav>ul>li.current>a::after,.nav>ul>li>a:hover::after{width:100%;}
.caret{display:inline-block;margin-left:5px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7;vertical-align:middle;}
.has-sub{position:relative;}
.sub{position:absolute;top:100%;left:0;min-width:180px;background:#1F445E;border-radius:0;padding:8px 0;opacity:0;visibility:hidden;transform:translateY(20px);transition:.3s;z-index:40;}
.has-sub:hover .sub{opacity:1;visibility:visible;transform:translateY(0);}
.sub li a{display:block;height:40px;line-height:40px;padding:0 25px 0 15px;color:#fff;font-size:.75rem;text-transform:capitalize;white-space:nowrap;transition:.4s;}
.sub li a:hover{color:var(--green);background:rgba(255,255,255,.05);}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;margin-left:auto;z-index:50;}
.burger span{width:26px;height:2px;background:#fff;border-radius:3px;transition:.25s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* mobile off-canvas drawer — 260px from right, #1F445E, 0.4s */
.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:.4s;z-index:45;}
.nav-overlay.open{opacity:1;visibility:visible;}
.mobile{position:fixed;top:0;right:0;height:100vh;width:260px;background:#1F445E;padding:92px 0 30px;transform:translateX(100%);transition:.4s cubic-bezier(1,0,.95,1);z-index:46;overflow-y:auto;}
.mobile.open{transform:translateX(0);}
.mobile a{display:block;line-height:32px;padding:6px 30px;color:#fff;font-size:.8125rem;transition:.4s;}
.mobile a:hover{color:var(--green);}

/* ===================== INNER-PAGE HEADER & RESPONSIVE FIXES =====================
   Scoped to body:not(.home) so the FROZEN homepage header (80px transparent
   overlay) is untouched. Inner pages get a solid 90px header that reserves its
   own space — no overlap, static or sticky. Additive; no homepage selectors. */

/* Solid, fixed, 90px header on inner pages only (H1, H2, H6) */
body:not(.home) .header{position:fixed;height:90px;background:var(--sb-navy);box-shadow:0 4px 18px rgba(0,0,0,.14);}
body:not(.home) .header.is-stuck{position:fixed;background:var(--sb-navy);}
body:not(.home) .header__inner{height:90px;}
body:not(.home) .logo{line-height:90px;}
body:not(.home) .nav>ul>li>a{height:90px;line-height:90px;}      /* keeps menu vertically centered */
body:not(.home) .site-main{padding-top:90px;}                     /* reserves header space — kills overlap */
body:not(.home) .page-hero{margin-top:0;}                                    /* anchor jumps clear the header */

/* Logo never overflows the bar (H3) */
.custom-logo{max-height:60px;width:auto;height:auto;}

/* No menu wrapping + tablet compact tier (H4, H5) */
.nav>ul{flex-wrap:nowrap;white-space:nowrap;}
@media (max-width:1180px) and (min-width:981px){
  .nav>ul>li{margin-right:16px;}
  .nav>ul>li>a{font-size:.7rem;}
  body:not(.home) .header__inner .header__cta{margin-left:14px;}
}

/* ===================== HEADER CTAS + MOBILE SUBMENU (additive) ===================== */
.header__ctas{display:flex;gap:10px;align-items:center;margin-left:20px;flex:none;}
.header__cta-audit,.header__cta-score,.mobile__ctas .btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border-radius:6px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;transition:.2s;white-space:nowrap;line-height:1;}
.header__cta-audit{color:#fff;border:1px solid rgba(255,255,255,.5);}
.header__cta-audit:hover{background:#fff;color:var(--sb-navy);}
.header__cta-score{background:var(--sb-gold);color:var(--sb-dark);border:1px solid var(--sb-gold);}
.header__cta-score:hover{filter:brightness(1.07);}
@media (max-width:1180px) and (min-width:981px){.header__cta-audit{display:none;}}
@media (max-width:980px){.header__ctas{display:none;}}

.mobile__menu{list-style:none;margin:0;padding:0;}
.mobile__menu li{position:relative;border-bottom:1px solid rgba(255,255,255,.08);}
.mobile__menu a{display:block;padding:12px 24px;color:#fff;font-size:.9rem;line-height:1.3;}
.mobile__menu a:hover{color:var(--green);}
.mobile__menu .sub-menu{list-style:none;margin:0;padding:0;background:rgba(0,0,0,.18);max-height:0;overflow:hidden;transition:max-height .3s ease;}
.mobile__menu li.open>.sub-menu{max-height:640px;}
.mobile__menu .sub-menu a{padding:10px 24px 10px 40px;font-size:.82rem;opacity:.9;}
.mobile__acc{position:absolute;top:5px;right:14px;width:34px;height:34px;background:rgba(255,255,255,.1);border:0;color:#fff;font-size:1.15rem;border-radius:6px;cursor:pointer;line-height:1;}
.mobile__menu li.open>.mobile__acc{background:var(--sb-gold);color:var(--sb-dark);}
.mobile__ctas{display:flex;flex-direction:column;gap:10px;padding:18px 24px 6px;}
.mobile__ctas .btn{width:100%;}
.mobile__ctas .btn--ghost{color:#fff;border:1px solid rgba(255,255,255,.5);}
.mobile__ctas .btn--solid{background:var(--sb-gold);color:var(--sb-dark);border:1px solid var(--sb-gold);}

/* ===================== OPTIONAL MOBILE LOGO (additive) =====================
   Only renders in markup when a Mobile logo is set in the Customizer, so this
   is inert (no visual change) until that setting is filled in. Reuses the
   same 980px breakpoint the burger/nav toggle already uses. */
.logo--mobile{display:none;}
.logo--mobile img{max-height:36px;width:auto;height:auto;vertical-align:middle;}
@media (max-width:980px){
	.logo--desktop{display:none;}
	.logo--mobile{display:inline-block;}
}

/* ===================== NAV ACCESSIBILITY + GROUP LABELS (additive) =====================
   Makes the hover dropdowns keyboard-operable (open on focus-within, plus an
   .is-open class toggled by theme.js for Escape/outside-click) and gives non-page
   grouping labels (.sub__label) their own non-interactive style. Purely additive —
   the existing :hover open rule above is unchanged. */
.has-sub:focus-within>.sub,.has-sub.is-open>.sub{opacity:1;visibility:visible;transform:translateY(0);}
.nav>ul>li>a:focus-visible,.sub li a:focus-visible,.mobile a:focus-visible{outline:2px solid var(--sb-gold,#B89F69);outline-offset:2px;border-radius:2px;}
/* Non-clickable grouping label inside a dropdown (has no page). */
.sub__label{display:block;padding:10px 15px 4px;color:rgba(255,255,255,.48);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;pointer-events:none;}
.mobile__menu .sub-menu .sub__label{padding:8px 24px 4px 40px;}