/* ==========================================================================
   Raydn mobile command-centre drawer: interaction fix (svc264)
   --------------------------------------------------------------------------
   Loads AFTER cc-drawer-svc261.css. Purely structural / interaction fixes.
   Zero visual redesign: same navy glass, amber gradients, rounded cards,
   type scale and motion as svc261.

   What was broken and why:

   1) NO SCROLL / CONTENT CLIPPED AT THE HALFWAY POINT
      .nav__mobile is a fixed, column flex container with overflow-y:auto.
      .cc was a plain flex item, so it inherited flex-shrink:1. Because
      .cc also sets overflow:hidden, its automatic minimum size collapses
      to 0, so the browser SHRANK the 1610px-tall card down to the 730px
      of available space and clipped everything past it. The drawer's
      scrollHeight therefore equalled its clientHeight (770 = 770), so
      there was literally nothing to scroll, and every tile below the fold
      was clipped out of existence. Fix: flex:0 0 auto on .cc.

   2) LEGACY LINK RESET MANGLED EVERY ROW
      raydn.css ships .nav__mobile a{display:block;padding:.7rem 0;
      border-bottom:1px solid ...} which outranks .cc__more-row{display:flex}
      on specificity (0,1,1 vs 0,1,0). Every anchor inside the premium
      drawer was force-flattened to a bordered block, blowing up row
      heights and breaking the icon/label/chevron layout. Fix: neutralise
      the legacy reset inside .cc and restore each component's own display.

   3) REDUCED-MOTION USERS SAW EMPTY PANELS
      .stagger > * starts at opacity:0 and relies on an animation to fade
      in, but the prefers-reduced-motion block killed the animation with
      animation:none !important, leaving opacity stuck at 0. Fix: force
      the resting state visible when motion is reduced.

   4) DECORATIVE SHEEN / GLOW LAYERS COULD EAT TAPS
      The sheen ::after layers had no pointer-events:none. Fix below.
   ========================================================================== */

/* ---- 1. the drawer is the scroller, the card is its natural-height child - */
.nav__mobile.rdn-mnav {
  position: fixed;
  top: var(--rdn-nav-h, 73px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10010;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  /* room for the bottom call bar + iOS home indicator */
  padding: 14px 14px calc(28px + env(safe-area-inset-bottom, 0px));
  /* opaque on-brand backdrop so page content never peeks through the gutter
     around the card (the flat navy fill let the hero bleed through) */
  background: radial-gradient(120% 60% at 50% -10%, #0f1e35 0%, #060c1a 55%, #04070d 100%);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.nav__mobile.rdn-mnav::-webkit-scrollbar { width: 0; height: 0; }

.nav__mobile.rdn-mnav.open { display: block; }

/* THE core fix: never shrink or clip the card, let it define the scroll height */
.nav__mobile.rdn-mnav > .cc {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  max-height: none;
  pointer-events: auto;
}

/* the drawer scrolls, the page behind it does not */
html.rdn-nav-locked,
body.rdn-nav-locked {
  overflow: hidden !important;
  touch-action: none;
}
body.rdn-nav-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

/* ---- 2. undo the legacy .nav__mobile a reset inside the premium card ----- */
.nav__mobile.rdn-mnav .cc a {
  display: revert;
  padding: 0;
  margin: 0;
  border-bottom: 0 !important;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav__mobile.rdn-mnav .cc a:hover { color: inherit; }

/* restore each component's own box now that the reset is neutralised */
.nav__mobile.rdn-mnav .cc a.cc__hero-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  min-height: 48px;
  color: #0a1526;
}
.nav__mobile.rdn-mnav .cc a.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  min-height: 112px;
  color: var(--off, #f4f6fb);
}
.nav__mobile.rdn-mnav .cc a.cc__more-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  min-height: 48px;
  color: var(--off, #f4f6fb);
}
.nav__mobile.rdn-mnav .cc a.cc__calc-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  min-height: 56px;
  color: #0a1526;
}
.nav__mobile.rdn-mnav .cc a.cc__calc-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  min-height: 76px;
  color: var(--off, #f4f6fb);
}
.nav__mobile.rdn-mnav .cc a.cc__score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  min-height: 48px;
  color: #e8fff0;
}
.nav__mobile.rdn-mnav .cc a.cc__co-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  min-height: 52px;
  color: var(--off, #f4f6fb);
}
.nav__mobile.rdn-mnav .cc .cc__foot a.r {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  min-height: 48px;
  min-width: 92px;
  color: #0a1526;
}
/* nested label blocks must stay block-level after display:revert */
.nav__mobile.rdn-mnav .cc a.cc__more-row .lbl,
.nav__mobile.rdn-mnav .cc a.cc__co-row > span:last-child { display: block; }

/* ---- 3. reduced motion must not leave the panels invisible --------------- */
@media (prefers-reduced-motion: reduce) {
  .nav__mobile.rdn-mnav .cc,
  .nav__mobile.rdn-mnav .cc__panel,
  .nav__mobile.rdn-mnav .stagger > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* failsafe: if the stagger animation never runs (script blocked, print,
   forced-colors), the tiles must still be readable rather than invisible */
@media print, (forced-colors: active) {
  .nav__mobile.rdn-mnav .stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ---- 4. decorative layers never intercept taps -------------------------- */
.nav__mobile.rdn-mnav .cc::before,
.nav__mobile.rdn-mnav .cc__hero-inner::before,
.nav__mobile.rdn-mnav .cc__hero-btn::after,
.nav__mobile.rdn-mnav .cc__calc-hero::after,
.nav__mobile.rdn-mnav .cc__bill--live::after,
.nav__mobile.rdn-mnav .tile::before,
.nav__mobile.rdn-mnav .cc svg { pointer-events: none; }

.nav__mobile.rdn-mnav .cc__tabs,
.nav__mobile.rdn-mnav .cc__panels,
.nav__mobile.rdn-mnav .cc__panel,
.nav__mobile.rdn-mnav .cc__grid,
.nav__mobile.rdn-mnav .cc__more,
.nav__mobile.rdn-mnav .cc__more-list,
.nav__mobile.rdn-mnav .cc__calc-grid,
.nav__mobile.rdn-mnav .cc__co-list,
.nav__mobile.rdn-mnav .cc__foot { pointer-events: auto; }

/* the sliding tab thumb sits under the tab buttons and is decorative */
.nav__mobile.rdn-mnav .cc__tab-thumb { pointer-events: none; }
.nav__mobile.rdn-mnav .cc__tab { min-height: 44px; position: relative; z-index: 2; }

/* ---- 5. keyboard focus is visible on every target ---------------------- */
.nav__mobile.rdn-mnav .cc a:focus-visible,
.nav__mobile.rdn-mnav .cc button:focus-visible,
#nav-burger:focus-visible {
  outline: 2px solid var(--amber, #f5a524);
  outline-offset: 3px;
  border-radius: 12px;
}

/* ---- 6. desktop / tablet: same drawer, centred and width-capped ---------
   The burger is only rendered below 900px, so this is a safety net for
   keyboard users and wide tablets: the drawer still opens, scrolls and
   clicks, it just does not stretch the card to a silly width. */
@media (min-width: 641px) {
  .nav__mobile.rdn-mnav { padding-left: 0; padding-right: 0; }
  .nav__mobile.rdn-mnav > .cc {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* short viewports (landscape phones): keep the card breathing */
@media (max-height: 560px) {
  .nav__mobile.rdn-mnav .cc__hero { padding: 12px 12px 14px; }
  .nav__mobile.rdn-mnav .cc__hero-title { font-size: 18px; }
}

/* ------------------------------------------------------------------
   TAP TARGETS 2026-08-06 (svc265)
   Measured on the live homepage at 390x844: 8 carousel dot buttons at
   exactly 9x9px, plus one at 26x9. That is roughly a 25th of the area of
   a comfortable 44px target. The visual dot is unchanged; only the
   invisible hit area grows, via padding plus a transparent ::after that
   covers the full 44x44 box.
   ------------------------------------------------------------------ */
.bstk__dot,
.rr-tcar__dot,
.case-carousel__dot,
.wt-rail__dots > button {
  position: relative;
  min-width: 0;
  min-height: 0;
}
.bstk__dot::after,
.rr-tcar__dot::after,
.case-carousel__dot::after,
.wt-rail__dots > button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
}
/* keep the dot rows from growing now that each hit box is 44px wide */
.bstk__dots,
.wt-rail__dots,
.rr-tcar__dots,
.case-carousel__dots {
  position: relative;
  z-index: 2;
}
/* the skip link was 30x44, widen it to a full 44 in both axes */
.skip-link,
a[href="#main"].skip-link {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------
   VISUAL HIERARCHY 2026-08-06 (svc265)

   Measured on the homepage first viewport at 390x844, before this block:
   five amber elements competed for the eye, and the two largest were

     (780) 904-3462 phone pill ....... 351 x 58 = 20,204 px^2
     "See my payback" primary CTA .... 299 x 56 = 16,736 px^2
     "5.0 Google, 62 reviews" chip ... 351 x 46 = 16,146 px^2

   The biggest amber block on the screen was the phone number, not the
   thing the page is built to make people do. When three blocks share the
   same accent at the same weight, none of them reads as the primary ask.

   No copy is changed and no path is removed. Every tap target that
   existed still exists and still goes to the same place. Only the fill
   weight changes, so exactly one filled amber button remains per screen
   and the other two become clearly tappable outline and neutral chips.
   ------------------------------------------------------------------ */

/* the phone stays fully available, as an amber outline instead of a fill */
.hero__phone-pill,
.hero__phone-pill--v2 {
  background: rgba(245, 165, 36, .10) !important;
  background-image: none !important;
  border: 1.5px solid rgba(245, 165, 36, .55) !important;
  color: var(--amber, #f5a524) !important;
  box-shadow: none !important;
}
.hero__phone-pill *,
.hero__phone-pill--v2 * { color: inherit !important; }
.hero__phone-pill:active,
.hero__phone-pill--v2:active {
  background: rgba(245, 165, 36, .20) !important;
}

/* the trust chip is proof, not an ask. neutral glass, amber only on the score */
.hero-trust__chip,
.hero-trust__chip--link {
  background: rgba(255, 255, 255, .05) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  color: #dbe3ef !important;
  box-shadow: none !important;
}
.hero-trust__chip strong,
.hero-trust__chip b,
.hero-trust__chip .hero-trust__score { color: var(--amber, #f5a524) !important; }

/* the one primary ask keeps the full amber fill and gains a little presence */
.rr-hero-addr__btn {
  box-shadow: 0 8px 26px rgba(245, 165, 36, .28) !important;
}

/* ------------------------------------------------------------------
   TAP TARGETS, second pass 2026-08-06 (svc265)
   12 footer links measured 351x40, four pixels under the 44px minimum.
   Padding is added rather than height, so the footer rhythm is unchanged.
   The three remaining sub-44 elements are inline <summary> disclosure
   text inside running paragraphs, where a 44px box would break the line
   flow. Those are left as they are on purpose.
   ------------------------------------------------------------------ */
.footer a,
.footer__nav a,
.footer__col a,
.footer-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}