/* ==========================================================================
   RR EXCELLENCE 2026 — site-wide refinement layer
   www.reed-relay.com  |  v2026.11.11-b

   Loaded AFTER rr-design-2026.css. Purely additive: no markup changes, no
   content changes, no database writes. Rollback = remove the mu-plugin and
   this stylesheet (see deploy.sh output for the exact command).

   Sections
     1  Accessibility & motion
     2  Header / top bar
     3  Cookie notice + floating language switcher (they used to overlap)
     4  Homepage hero depth & hierarchy
     5  Inner-page cards, tables & reading rhythm
     6  404 / search / empty states
     7  Responsive
     8  Print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Accessibility & motion
   -------------------------------------------------------------------------- */
.rr-skip-link{
  position:fixed;top:-120px;left:16px;z-index:100000;
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;border-radius:0 0 10px 10px;
  background:#f0d080;color:#0a1628 !important;
  font:700 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:top .18s ease;
}
.rr-skip-link:focus,.rr-skip-link:focus-visible{top:0;outline:3px solid #fff;outline-offset:2px}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible{
  outline:3px solid #f0d080 !important;
  outline-offset:3px;
  border-radius:5px;
}
/* Dark surfaces need a brighter ring so it never disappears into the navy. */
.rr2026 .hero a:focus-visible,
.rr2026 .hero button:focus-visible,
body.rrds .rrds-hero a:focus-visible,
body.rrds .rrds-hero button:focus-visible,
.rrds-cta a:focus-visible,
.rrds-cta button:focus-visible{
  outline-color:#ffd86b !important;
  box-shadow:0 0 0 6px rgba(240,208,128,.22);
}
main[id]{scroll-margin-top:96px}
::selection{background:#2580d4;color:#fff}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* --------------------------------------------------------------------------
   2. Header / top bar
   -------------------------------------------------------------------------- */
.topbar a{transition:color .18s ease,opacity .18s ease}
.topbar a:hover{text-decoration:underline;text-underline-offset:3px}
.topbar-meta{gap:16px}
.nav-redesign .nav-link{transition:color .18s ease,background .18s ease}
/* Mega menu: a stronger panel edge and clearer column rhythm. */
.nav-dropdown.nav-mega{
  border:1px solid rgba(10,22,40,.10);
  box-shadow:0 24px 64px rgba(6,16,34,.18);
}
.nav-dropdown__grid--5cols{gap:18px}
.nav-dropdown__intro{
  border-bottom:1px solid rgba(10,22,40,.08);
  padding-bottom:14px;margin-bottom:18px;
}

/* --------------------------------------------------------------------------
   3. Cookie notice + floating language switcher
   The two were stacked in the same bottom-right corner, producing overlapping
   text and buttons. Move the language switcher to the opposite corner and give
   the cookie dialog a proper reading width.
   -------------------------------------------------------------------------- */
/* The legacy bundle defines a dozen `body .shr-cookie-banner ... !important`
   overrides, including one that locks the dialog to 300px with 10.5px text.
   We must match that specificity, use !important, and — critically — NEVER
   touch `display`, because the show/hide logic is driven by .is-visible. */
@media (min-width:1025px){
  body .shr-cookie-banner[data-cookie-banner],
  body [role="dialog"][aria-label="Cookie notice"]{
    width:min(440px,calc(100vw - 32px)) !important;
    max-width:min(440px,calc(100vw - 32px)) !important;
    left:auto !important;right:16px !important;bottom:16px !important;
    padding:18px 20px !important;gap:14px !important;
    background:#0b1a30 !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:14px !important;
    box-shadow:0 20px 56px rgba(0,0,0,.42) !important;
    z-index:9997 !important;
    flex-wrap:wrap !important;
    grid-template-columns:minmax(0,1fr) !important;
  }
  body .shr-cookie-banner[data-cookie-banner] p,
  body [role="dialog"][aria-label="Cookie notice"] p{
    margin:0 !important;
    font-size:12.5px !important;line-height:1.6 !important;
    color:#dbe7f5 !important;
    flex:1 1 100% !important;
  }
  body .shr-cookie-banner[data-cookie-banner] p a{
    color:#f0d080 !important;text-decoration:underline;text-underline-offset:2px;
  }
  body .shr-cookie-banner .shr-cookie-actions{
    display:flex !important;gap:10px !important;
    justify-content:flex-end !important;flex-shrink:1 !important;
    width:auto !important;
  }
  body .shr-cookie-banner .shr-cookie-actions .btn{
    min-width:0 !important;width:auto !important;
    padding:9px 17px !important;font-size:12.5px !important;
    border-radius:8px !important;line-height:1.2 !important;
    white-space:nowrap !important;
  }
}
.trp-language-switcher.trp-floating-switcher.trp-switcher-position-bottom{
  left:16px !important;right:auto !important;bottom:16px !important;
  z-index:9996 !important;
  box-shadow:0 10px 30px rgba(6,16,34,.16) !important;
}

/* --------------------------------------------------------------------------
   4. Homepage hero — restore depth without touching a single word of copy
   -------------------------------------------------------------------------- */
/* Homepage sections rely on an IntersectionObserver reveal. When JS is
   blocked, delayed or the observer never fires, those blocks remain at
   opacity:0 forever (reproduced in headless rendering). Content visibility
   takes priority over the entrance animation. */
.rr2026 .reveal{opacity:1 !important;transform:none !important;transition:none !important}
.rr2026 .hero-shade{
  background:
    linear-gradient(90deg,rgba(6,10,20,.98) 0%,rgba(6,10,20,.95) 34%,rgba(6,10,20,.76) 58%,rgba(6,10,20,.22) 100%),
    linear-gradient(180deg,rgba(6,10,20,.26) 0%,transparent 42%,rgba(6,10,20,.38) 100%) !important;
}
.rr2026 .hero-inner{padding-top:88px;padding-bottom:88px}
.rr2026 .hero .lead{color:#d7e5f4;text-shadow:0 1px 12px rgba(0,0,0,.28)}
.rr2026 .quickfind{color:#a8c2de;gap:8px 6px}
.rr2026 .quickfind a{
  color:#e4effb;background:rgba(8,20,38,.62);
  border-color:rgba(255,255,255,.22);
  transition:background .18s ease,border-color .18s ease;
}
.rr2026 .quickfind a:hover{background:rgba(37,128,212,.42);border-color:rgba(127,182,240,.6)}
.rr2026 .hero-cta{margin-top:26px;gap:12px}
.rr2026 .hero-cta .btn{
  box-shadow:0 8px 24px rgba(0,0,0,.30);
  backdrop-filter:blur(6px);
}
/* Stats used to sit directly on top of the product photo with no backing. */
.rr2026 .hero-stats{
  max-width:640px;
  margin-top:34px;padding:18px 22px !important;
  border:1px solid rgba(255,255,255,.16);
  border-top:1px solid rgba(255,255,255,.16) !important;
  border-radius:14px;
  background:rgba(6,14,28,.66);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 36px rgba(0,0,0,.22);
}
.rr2026 .stat b{color:#fff;font-variant-numeric:tabular-nums}
.rr2026 .stat span{color:#b8cde3}
.rr2026 .hero-card{
  background:rgba(8,18,34,.88) !important;
  border-color:rgba(255,255,255,.24) !important;
  box-shadow:0 28px 68px rgba(0,0,0,.42) !important;
}
.rr2026 .section.param{padding-top:60px}
.rr2026 .param-box{border-radius:16px}
/* Consistent media behaviour so card imagery never shifts on load (CLS). */
.rr2026 img:not([width]):not([height]){background:linear-gradient(120deg,#eaf1f8,#f6f9fc)}
.rr2026 .card-media img{aspect-ratio:3/2}

/* --------------------------------------------------------------------------
   5. Inner pages — cards, tables, reading rhythm
   -------------------------------------------------------------------------- */
body.rrds .rrds-card::before{
  height:3px;opacity:.6;
  background:linear-gradient(90deg,#2580d4 0%,rgba(37,128,212,.35) 46%,transparent 100%);
}
body.rrds .rrds-card:hover::before{opacity:1}
/* Some legacy span rules stretched the tag into a full-width blue bar. */
body.rrds .rrds-card-tag{
  display:inline-flex !important;align-items:center;
  width:auto !important;align-self:flex-start;
  padding:5px 10px !important;
  letter-spacing:.09em;
}
body.rrds .rrds-section p,
body.rrds .rrds-section li{max-width:78ch}
body.rrds .rrds-section-head h2{position:relative}
body.rrds main table{
  width:100%;border-collapse:collapse;
  font-size:14px;line-height:1.55;
}
body.rrds main table thead th{
  position:sticky;top:0;z-index:2;
  background:#f2f7fc;color:#0f2240;
  font-weight:700;text-align:left;
  padding:12px 14px;border-bottom:2px solid #cfe0f0;
  white-space:nowrap;
}
body.rrds main table td{padding:11px 14px;border-bottom:1px solid #e8eef5;vertical-align:top}
body.rrds main table tbody tr:nth-child(even){background:#fafcfe}
body.rrds main table tbody tr:hover{background:#eef6ff}
body.rrds main table a{color:#125fa8;text-decoration:none}
body.rrds main table a:hover{text-decoration:underline;text-underline-offset:2px}
/* Long data tables (626 models) should scroll rather than break the layout. */
body.rrds .rrds-section{overflow-x:visible}
body.rrds main table{min-width:560px}
body.rrds main input[type="text"],
body.rrds main input[type="email"],
body.rrds main input[type="search"],
body.rrds main select,
body.rrds main textarea{
  border:1px solid #cfdceb;border-radius:8px;
  padding:10px 12px;background:#fff;color:#0f172a;
  transition:border-color .18s ease,box-shadow .18s ease;
}
body.rrds main input:focus,
body.rrds main select:focus,
body.rrds main textarea:focus{
  border-color:#2580d4;box-shadow:0 0 0 3px rgba(37,128,212,.14);
}
body.rrds .rrds-related ul{gap:12px}
body.rrds .rrds-related li a{padding:10px 12px;border-radius:8px;background:#f7fafd}

/* --------------------------------------------------------------------------
   6. 404 / search / empty states
   -------------------------------------------------------------------------- */
body.rrds .rrds-grid .rrds-card{min-height:186px}
body.rrds .rrds-card .rrds-card-link{font-weight:700}
body.rrds .rrds-card .rrds-card-link::after{
  content:"";display:inline-block;width:0;height:0;
  margin-left:7px;border-left:5px solid currentColor;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .18s ease;
}
body.rrds .rrds-card .rrds-card-link:hover::after{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .rr2026 .hero-inner{padding-top:66px;padding-bottom:66px}
  .rr2026 .hero-stats{max-width:100%}
  body.rrds .rrds-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .rr2026 .hero-stats{grid-template-columns:repeat(2,1fr);gap:16px}
  .rr2026 .hero-cta .btn{flex:1 1 auto}
  body.rrds main table{min-width:520px}
}
@media (max-width:600px){
  /* The header already carries language links, and the mobile menu has its
     own language block — the floating switcher only competes with the cookie
     dialog on small screens. */
  .trp-language-switcher.trp-floating-switcher{display:none !important}
  .shr-cookie-banner[data-cookie-banner]{
    left:12px !important;right:12px !important;bottom:12px !important;
    width:auto !important;padding:16px !important;
  }
  .shr-cookie-actions .btn{flex:1;justify-content:center}
  body.rrds .rrds-grid,
  body.rrds .rrds-grid-2,
  body.rrds .rrds-grid-4{grid-template-columns:1fr}
  .rr-skip-link{left:8px;right:8px;justify-content:center}
}

/* --------------------------------------------------------------------------
   8. Print — datasheets and parameter tables are frequently printed
   -------------------------------------------------------------------------- */
@media print{
  .topbar,.nav-redesign,.rrds-cta,.shr-cookie-banner,
  .trp-language-switcher,.rr-skip-link,footer{display:none !important}
  body{background:#fff !important;color:#000 !important}
  body.rrds .rrds-hero{background:#fff !important;color:#000 !important;padding:0 0 16px !important}
  body.rrds .rrds-hero h1,body.rrds .rrds-hero p{color:#000 !important}
  body.rrds main table thead th{position:static;background:#eee !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#555}
}