/* visualfix-20261003: responsive nav + layout safety net (visual QA pass 2026-10-03).
   Rules wrapped in :where() have zero specificity, so any rule the page already
   defines for the same element wins; they only fill in where styles are missing. */

/* ---- 1. Bootstrap-style unified navbar ---------------------------------- */
/* Toggler was a blank square: Bootstrap only draws the icon under
   .navbar-dark/.navbar-light, which these navs do not use. */
.unified-navbar .navbar-toggler,
nav.navbar:not(.navbar-light):not(.navbar-dark) .navbar-toggler{
  border:1px solid rgba(255,255,255,.55)!important;
  background:rgba(0,0,0,.35)!important;
  border-radius:8px!important;
  padding:.35rem .55rem!important;
  line-height:1!important;
}
.unified-navbar .navbar-toggler:focus,nav.navbar:not(.navbar-light):not(.navbar-dark) .navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(255,255,255,.25)!important}
.unified-navbar .navbar-toggler-icon,
nav.navbar:not(.navbar-light):not(.navbar-dark) .navbar-toggler-icon{
  display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;
  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.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important;
  background-repeat:no-repeat!important;background-position:center!important;background-size:100%!important;
  filter:none!important;
}
/* Collapse / dropdown basics, in case Bootstrap CSS is missing on a page */
:where(.unified-navbar) .collapse:not(.show){display:none}
:where(.unified-navbar) .dropdown-menu:not(.show){display:none}
:where(.unified-navbar.navbar){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
:where(.unified-navbar.navbar) > :where(.container,.container-fluid){display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}
:where(.unified-navbar) :where(.navbar-collapse){flex-basis:100%;flex-grow:1;align-items:center}
:where(.unified-navbar) :where(.navbar-nav){display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}
.unified-navbar .navbar-brand{min-width:0;white-space:normal}
@media (max-width:1199.98px){
  /* keep brand and toggler on one row; long brand names wrap instead of pushing the button down */
  .unified-navbar.navbar:not([class*="navbar-expand"]) .navbar-brand{flex:1 1 0;margin-right:.75rem}
}
@media (max-width:575.98px){nav.unified-navbar .navbar-brand{font-size:1.15rem!important;letter-spacing:normal!important}}
@media (max-width:1199.98px){
  /* opened mobile menu: readable stacked list, scrollable if long */
  .unified-navbar:not([class*="navbar-expand"]) .navbar-collapse.show,
  .unified-navbar:not([class*="navbar-expand"]) .navbar-collapse.collapsing{max-height:75vh;overflow-y:auto}
  .unified-navbar:not([class*="navbar-expand"]) .dropdown-menu{position:static!important;transform:none!important;float:none}
}
/* Navs built without .navbar-expand-* were hamburger-only even on desktop,
   with the (invisible) toggler as the only way in. Show links inline on wide screens. */
@media (min-width:1200px){
  .unified-navbar.navbar:not([class*="navbar-expand"]){flex-wrap:nowrap;justify-content:flex-start}
  .unified-navbar.navbar:not([class*="navbar-expand"]) > .container,
  .unified-navbar.navbar:not([class*="navbar-expand"]) > .container-fluid{flex-wrap:nowrap}
  .unified-navbar.navbar:not([class*="navbar-expand"]) .navbar-toggler{display:none!important}
  .unified-navbar.navbar:not([class*="navbar-expand"]) .navbar-collapse{display:flex!important;flex-basis:auto;flex-grow:1;justify-content:flex-end}
  .unified-navbar.navbar:not([class*="navbar-expand"]) .navbar-nav{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;margin-bottom:0!important}
  .unified-navbar.navbar:not([class*="navbar-expand"]) .navbar-nav .nav-link{padding:.5rem .55rem!important;white-space:nowrap}
  .unified-navbar.navbar:not([class*="navbar-expand"]) .navbar-nav .dropdown-menu{position:absolute}
  .unified-navbar.navbar:not([class*="navbar-expand"]) .navbar-brand{flex-shrink:0;margin-right:1rem}
}
/* A slide-out menu panel left behind next to a Bootstrap navbar has no button
   to open it and rendered as a raw bullet list under the header. */
body:not(:has(#navHamburger)) #navPanel.nav-panel{display:none!important}

/* Header bar left with no background on some pages (light brand text on light page) */
:where(nav.unified-navbar){background:#111827;padding:.6rem 0}
:where(nav.unified-navbar) :where(.navbar-brand){color:#fff;text-decoration:none}

/* ---- 2. Hamburger + slide-down panel nav (only where the page lacks styles) */
/* Header row relies on Bootstrap's d-flex, but some pages ship without Bootstrap CSS:
   brand and hamburger stacked on two lines */
.unified-navbar > .container.d-flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap}
/* white lines on a light header were invisible: give the button its own dark backing */
.unified-navbar .nav-hamburger{background:rgba(0,0,0,.35)!important;border-color:rgba(255,255,255,.55)!important}
.unified-navbar .nav-hamburger span{background:rgba(255,255,255,.95)!important}
:where(.nav-hamburger){background:none;border:1px solid rgba(255,255,255,.4);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:var(--vf-navh,60px);left:0;right:0;background:rgba(10,12,24,.97);border-bottom:1px solid rgba(255,255,255,.1);z-index:1049;transform:translateY(-110%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .3s ease,opacity .25s ease,visibility 0s linear .3s;box-shadow:0 12px 48px rgba(0,0,0,.5);max-height:calc(100vh - var(--vf-navh,60px));overflow-y:auto}
:where(.nav-panel.open){transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:transform .3s ease,opacity .25s ease}
:where(.nav-panel) ul{list-style:none;margin:0 auto;padding:.75rem 0;max-width:1320px}
:where(.nav-panel) li a{display:flex;align-items:center;padding:.7rem 2rem;color:rgba(255,255,255,.85);text-decoration:none;font-weight:500;font-size:.95rem;border-left:3px solid transparent}
:where(.nav-panel) li a:hover{background:rgba(255,255,255,.07);border-left-color:currentColor}
:where(.nav-panel) li a i{width:22px;margin-right:10px;opacity:.7}

/* ---- 2b. Shared "site-redesign-master" block sets [class*='hero']{position:relative!important},
   which also hit the hero's absolutely-positioned background/overlay/slide layers. They then
   joined the flex row and pushed the hero text off-screen (blank hero). Put them back. */
[class*="hero"] > .hero-background,[class*="hero"] > .hero-overlay,
[class*="hero"] > .hero-slide,[class*="hero"] > .hero-bg{position:absolute!important;inset:0}

/* ---- 3. Duplicate mobile bottom bars (same bar injected 2-3x) ------------ */
.mobile-bottom-nav ~ .mobile-bottom-nav,
.bottom-mobile-nav ~ .bottom-mobile-nav{display:none!important}

/* ---- 4. Guide/article pages with no wrapper (text ran edge to edge) ------ */
:where(body > article){display:block;max-width:960px;margin:0 auto;padding:1.25rem 1rem 2.5rem}
:where(article .toc){display:block;padding:1rem 1.25rem;margin:1.25rem 0;border-radius:8px;background:rgba(127,127,127,.08);border:1px solid rgba(127,127,127,.2)}
:where(article .toc) a,:where(.toc-sidebar) a{display:block;padding:.2rem 0}
:where(article .highlight){padding:.85rem 1rem;margin:1rem 0;border-radius:8px;background:rgba(127,127,127,.08);border-left:4px solid rgba(127,127,127,.45)}

/* Some guide templates give <body> a max-width but Bootstrap's reboot zeroes its auto
   margins, so the whole page hugged the left edge on desktop. Auto margins are a no-op
   on full-width bodies. */
html body{margin-left:auto;margin-right:auto}

/* ---- 4b. Contact forms whose stylesheet never shipped (bare browser inputs) */
:where(.contact-form) :where(.form-group){margin-bottom:1rem}
:where(.contact-form) :where(label){display:block;font-weight:600;margin-bottom:.35rem}
:where(.contact-form) :where(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea){display:block;width:100%;max-width:100%;padding:.65rem .85rem;border:1px solid rgba(127,127,127,.45);border-radius:6px;font:inherit;background:#fff;color:#1f2937}
:where(.contact-form) :where(textarea){min-height:140px;resize:vertical}
:where(.contact-form) :where(.submit-btn,button[type=submit]){display:inline-block;padding:.7rem 1.6rem;border:0;border-radius:6px;background:#1f2937;color:#fff;font-weight:600;cursor:pointer}

/* ---- 5. Cookie banner text inherited a light page colour on a white card -- */
#af-cookie p{color:var(--af-text,#1e293b)!important}

/* ---- 5a. "auto-injected" cookie bar whose stylesheet is missing on some pages
   (rendered as bare text + button stuck under the footer). Same look as where it works. */
:where(#cookie-consent-banner){position:fixed;bottom:0;left:0;right:0;background:#1a1a2e;color:#e0e0e0;padding:1rem 1.5rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:.95rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;z-index:99999;box-shadow:0 -2px 12px rgba(0,0,0,.35);transform:translateY(110%);transition:transform .45s ease}
:where(#cookie-consent-banner.cc-visible){transform:translateY(0)}
:where(#cookie-consent-banner) p{margin:0;flex:1 1 300px;line-height:1.5}
/* On phones the bar switches to a column, where the text's flex-basis:300px became a
   300px *height*: a third of the screen covered by mostly empty bar */
@media (max-width:576px){#cookie-consent-banner p{flex:0 0 auto!important}}
:where(#cookie-consent-banner) a{color:#82b1ff;text-decoration:underline}
:where(#cookie-consent-accept){background:#0d6efd;color:#fff;border:none;padding:.5rem 1.75rem;border-radius:.375rem;cursor:pointer;font-weight:600;white-space:nowrap}

/* ---- 5b. Two or three cookie banners stacked on top of each other: keep one ------ */
body:has(#af-cookie) #sf-cookie-banner,
body:has(#af-cookie) #cookie-consent-banner,
body:has(#sf-cookie-banner) #cookie-consent-banner{display:none!important}
/* same for 2-3 stacked back-to-top buttons and two newsletter pop-ups at once */
body:has(#af-btt) #sf-back-to-top,
body:has(#af-btt) #site-back-top,
body:has(#sf-back-to-top) #site-back-top{display:none!important}
body:has(#phub-widget-container) #nl-popup-overlay{display:none!important}

/* ---- 5c. PapeyesHub subscribe widget: site-wide `h3{color:dark!important}` made its
   title dark-on-dark */
#phub-widget-container h3{color:#fff!important}

/* ---- 5d. Content-engine news/trending widgets: a long unbroken headline/snippet sized the
   1fr grid column, making the page ~720px wide on phones */
html body .ce-news-grid > *,html body .ce-news-item,html body .ce-trending-list li{min-width:0;overflow-wrap:anywhere}

/* ---- 6. Media never wider than the screen -------------------------------- */
:where(img,video,iframe,svg,table){max-width:100%}
:where(h1,h2,h3,h4){overflow-wrap:break-word}

/* ---- site-specific ---- */
/* `section:nth-child(even){light !important}` out-ranked the home hero's dark gradient: white text on cream */
html body section.fx-hero{background:linear-gradient(135deg,#0d3b66,#0b1220)!important}