/* visualfix-20261003: visual QA fixes (mobile nav, toggler icon, cookie banner, overflow).
   Base rules use :where() (zero specificity) so any existing site style still wins. */

/* 1. Hamburger "unified nav" (pages whose nav markup shipped without its CSS) */
:where(.unified-navbar:not(.navbar)){background:rgba(8,8,20,.92);border-bottom:1px solid rgba(255,255,255,.07);padding:.65rem 0;z-index:1050;position:sticky;top:0}
:where(.unified-navbar:not(.navbar))>:where(.container){display:flex;align-items:center;justify-content:space-between;gap:.75rem}
:where(.unified-navbar:not(.navbar) .navbar-brand){font-weight:800;font-size:1.3rem;color:#fff;text-decoration:none;min-width:0}
:where(.unified-navbar:not(.navbar) .navbar-brand i){margin-right:6px}
:where(.nav-hamburger){flex:0 0 auto;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;gap:5px;outline:none}
:where(.nav-hamburger span){display:block;width:22px;height:2px;background:rgba(255,255,255,.9);border-radius:2px;transition:transform .3s ease,opacity .25s ease;transform-origin:center}
:where(.nav-hamburger.open span:nth-child(1)){transform:translateY(7px) rotate(45deg)}
:where(.nav-hamburger.open span:nth-child(2)){opacity:0;transform:scaleX(0)}
:where(.nav-hamburger.open span:nth-child(3)){transform:translateY(-7px) rotate(-45deg)}
:where(.nav-panel){position:fixed;top:57px;left:0;right:0;max-height:calc(100vh - 57px);overflow-y:auto;background:rgba(6,6,18,.97);border-bottom:1px solid rgba(255,255,255,.08);z-index:1049;transform:translateY(-105%);opacity:0;transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .25s ease;pointer-events:none;box-shadow:0 12px 48px rgba(0,0,0,.55)}
:where(.nav-panel.open){transform:translateY(0);opacity:1;pointer-events:auto}
:where(.nav-panel ul){list-style:none;margin:0;padding:1rem 0}
:where(.nav-panel li a){display:flex;align-items:center;padding:.7rem 2rem;color:rgba(255,255,255,.8);text-decoration:none;font-weight:500;font-size:.95rem;border-left:3px solid transparent}
:where(.nav-panel li a:hover){color:#fff;background:rgba(255,255,255,.06);border-left-color:currentColor}
:where(.nav-panel li a i){width:22px;margin-right:10px;opacity:.65;font-size:.9rem}

/* 2. Bootstrap "unified-navbar": hamburger icon was dark-on-dark (blank square) */
.unified-navbar .navbar-toggler{background-color:rgba(0,0,0,.3)!important;border:1px solid rgba(255,255,255,.45)!important;padding:.3rem .55rem;flex:0 0 auto}
.unified-navbar .navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-repeat:no-repeat;background-position:center;background-size:100%;filter:none!important;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important}
/* keep brand + toggler on one row on phones */
@media (max-width:575.98px){
  .unified-navbar .navbar-brand{max-width:calc(100% - 68px);white-space:normal;overflow-wrap:anywhere;line-height:1.2}
}

/* 3. Cookie banner: on phones the <p> had flex-basis 300px in a column => 300px-tall empty box; text colour overridden by site p rules */
#cookie-consent-banner p{color:#e0e0e0!important}
@media (max-width:576px){#cookie-consent-banner p{flex:0 1 auto!important}}

/* 4. Content-engine news grid overflowed 390px phones (minmax(320px,1fr) inside padded cards) */
.ce-news-grid{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))!important}
@media (max-width:576px){.ce-dynamic-wrapper{padding:12px!important}.ce-section{padding:16px!important}}

/* 5. Fixed "bottom" mobile nav inherited a generic nav{position:fixed;top:0} rule => stretched to full screen height */
:is(nav,div):is([class*="bottom-nav"],[class*="bottom-mobile-nav"]){top:auto!important}

/* 6. Network footer (inline dark #1a202c): site-wide h3{color:...!important}/a{} rules made headings/links dark-on-dark */
#network-footer :is(h2,h3,h4,h5,h6){color:#fff!important}
#network-footer a{color:#a0aec0!important}

/* 7. Theme rule [class*='hero']{position:relative!important} turned the absolute .hero-overlay into a flex item
      that squeezed/cropped the hero text */
:is(section,div,header)>.hero-overlay{position:absolute!important;inset:0}

/* 8. Inline-styled white-on-dark newsletter block and footer paragraphs lost their light text to site-wide p/h2 colour rules */
#newsletter[style*="color:#fff"] :is(h1,h2,h3,p,label){color:inherit!important}
.unified-footer p{color:inherit!important}

/* 9. Bare contact form (inputs without classes or CSS) rendered as tiny inline boxes */
:where(#contactForm:has(>input:not([class]))){display:flex;flex-direction:column;gap:.75rem;max-width:640px}
:where(#contactForm>input:not([class]):not([type=hidden]),#contactForm>textarea:not([class])){display:block;width:100%;padding:.7rem .9rem;border:1px solid #cbd5e1;border-radius:8px;font:inherit;background:#fff;color:#1f2937}
:where(#contactForm>button[type=submit]:not([class])){align-self:flex-start;padding:.7rem 1.6rem;border:0;border-radius:8px;background:#334155;color:#fff;font-weight:600}