/* ==========================================================================
   Radiant — cross-page layout corrections.

   Every page inlines its own copy of the stylesheet, so a fix applied to one
   page does not reach the others. This file is linked LAST on every page,
   which means equal-specificity rules here win over the inlined <style>.

   Each block names the bug it fixes. Fold a block back into the page
   stylesheets and delete it here, or leave it — it is load-order safe.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · The mobile menu was trapped inside the header.

   .site-header carries `backdrop-filter: blur(14px)`. A filtered element
   becomes the containing block for its position:fixed descendants, so the
   nav's `inset: 0` resolved to the header's own 109px-tall box instead of the
   viewport. The open menu rendered as six unbacked links floating over the
   hero, with no panel behind them, on every page of the site.

   Dropping the blur below 720px hands the viewport back. The header keeps a
   solid background, so nothing else changes visually.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--porcelain);
  }
  .nav {
    padding: 5.5rem 1.5rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* the toggle has to stay clickable above the open panel */
  .nav-toggle { position: relative; z-index: 70; }
}


/* --------------------------------------------------------------------------
   2 · Grid tracks could not shrink below their contents, so the lead form ran
       off the right edge of every phone.

   `1fr` means `minmax(auto, 1fr)`, and that `auto` floor is the item's
   min-content width. A <select>'s min-content is as wide as its longest
   option — "Launch a new telehealth business" — which forced the .split track
   to 457px inside a 390px viewport. `body { overflow-x: hidden }` then hid the
   evidence: the form was simply cut in half, inputs and all, with no
   scrollbar to reveal it.

   Letting grid items shrink to zero fixes it at every level at once.
   -------------------------------------------------------------------------- */
.split > *,
.hero .container > *,
.form-grid > *,
.guide-fields > *,
.grid--2 > *, .grid--3 > *, .grid--4 > *,
.stat-grid > *,
.footer-main > *,
.shop > * { min-width: 0; }

/* and the controls themselves must never set a floor wider than their column */
.field input,
.field select,
.field textarea,
.guide-fields input,
.sched-grid input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}


/* --------------------------------------------------------------------------
   3 · Legibility on phones.

   Product-card price captions and badges were rendering at 9.8–10.9px, below
   the ~11px floor where small type stops being readable at arm's length.
   -------------------------------------------------------------------------- */
.pcard__price small { font-size: 0.74rem; }
.pcard__tag { font-size: 0.7rem; }
.pcard__badge { font-size: 0.7rem; }
.offer-tag { font-size: 0.7rem; }
.sched-day span { font-size: 0.7rem; }

/* the cheaper-format hint appended to the price caption */
.pcard__alt { color: var(--ink-soft); opacity: 0.85; }


/* --------------------------------------------------------------------------
   5 · Pen photography.

   The pen shots are landscape and almost entirely white. The card art uses
   `mix-blend-mode: multiply` to knock the opaque white backgrounds out, which
   means a white pen body renders as exactly the panel colour — only its own
   shading survives. At the vial's portrait sizing that left a pale sliver
   floating in a lot of empty panel. Running them wider gives the shape enough
   presence to read as a pen.
   -------------------------------------------------------------------------- */
.pcard__art img.is-pen {
  max-width: 94%;
  max-height: 104px;
}


/* --------------------------------------------------------------------------
   4 · Tap targets.

   Footer links, filter rows and the card's compare button were 15–28px tall.
   Apple and Google both put the comfortable minimum at ~44px; these get close
   without changing how anything looks on a desktop.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .footer-col a,
  .footer-links a,
  .footer-legal a,
  .topbar a { display: inline-block; padding-block: 0.42rem; }

  .filter-row { padding-block: 0.6rem; }
  .pcard__cmp { width: 34px; height: 34px; }
  .pcard__add { width: 36px; height: 36px; }

  .mkA-quick { gap: 0.35rem 0.8rem; }
  .mkA-quick button { padding-block: 0.42rem; }
  .crumb a { display: inline-block; padding-block: 0.35rem; }
}