/* ============================================================
   CV Warehouse - mobile polish
   ------------------------------------------------------------
   Shared responsive repairs, applied to every English and Arabic
   page. Everything is scoped to touch/narrow viewports so the
   desktop layout is untouched; the only rules that run at every
   width are the anchor scroll-margin and the menu scroll lock.

   Loaded from the end of <head> on all 40 pages. Several rules
   need !important because each page carries its own minified
   stylesheet inside <body>, which would otherwise win on document
   order alone.
   ============================================================ */

/* ---- 1. Mobile menu sits flush under the header -------------
   The panel is pinned with `inset:82px 0 0 0`, the desktop bar
   height. Most pages shrink the bar to 64-65px on phones, which
   left a 17-18px strip of the page showing between the header and
   the menu. --cvw-nav-h is measured by mobile-polish.js. */
@media (max-width: 1439px) {
  .nav-mobile-panel {
    top: var(--cvw-nav-h, 82px) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- 2. The page behind the open menu must not scroll ------- */
html.cvw-nav-open,
html.cvw-nav-open body {
  overflow: hidden !important;
}

/* ---- 3. In-page anchors clear the sticky header -------------
   The header is sticky at every width, so a jump to #section put
   the heading underneath it. Pages that already set their own
   scroll-margin-top keep winning; this only fills the gaps. */
[id] {
  scroll-margin-top: calc(var(--cvw-nav-h, 82px) + 14px);
}

/* ---- 4. iOS zooms the whole page when a focused field is under
   16px, and leaves the layout scrolled sideways afterwards. Touch
   devices and narrow windows only. */
@media (max-width: 640px), (pointer: coarse) and (max-width: 1180px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ---- 5. Touch targets ---------------------------------------
   Two techniques, both of which leave the artwork exactly as it
   is: a centred transparent ::after for icon buttons, and matched
   padding/negative margin for inline text links. */
@media (max-width: 1024px) {

  /* 5a. the language pill inside the menu was a 96x27 hit box */
  .nav-mobile-panel .lang-toggle {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* 5b. icon buttons: keep the artwork, widen the hit area.
     A transparent centred ::after costs no layout, which matters for
     the hamburger - a wider button pushed the 320px header row two
     pixels past the screen edge. None of these selectors carries a
     ::after of its own on any page in this build. */
  .nav-toggle,
  .vt-dot,
  .plan-pick,
  .plan-video-btn,
  .svc-autoplay-btn,
  .hvc-btn,
  .comp-nav-dot,
  .footer-back-top,
  .checkout-close,
  .viral-popup-close,
  .viral-popup-mute,
  .ohc-search-clear,
  .pv-anchor,
  .icon-btn {
    position: relative;
  }

  .nav-toggle::after,
  .vt-dot::after,
  .plan-pick::after,
  .plan-video-btn::after,
  .svc-autoplay-btn::after,
  .hvc-btn::after,
  .comp-nav-dot::after,
  .footer-back-top::after,
  .checkout-close::after,
  .viral-popup-close::after,
  .viral-popup-mute::after,
  .ohc-search-clear::after,
  .pv-anchor::after,
  .icon-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }

  /* the hamburger is already 38x42, so only the height needs padding */
  .nav-toggle {
    min-height: 44px !important;
  }

  /* the carousel dots sit 9px apart, so 44px hit boxes would
     overlap each other; give the rows room for them first */
  .vt-dots,
  .comp-nav-dots {
    gap: 16px !important;
  }

  /* the video controls are a tight row, so their haloes get a
     narrower box than the round icon buttons above */
  .hvc-btn::after {
    width: 40px;
    height: 44px;
    border-radius: 8px;
  }

  /* 5c. small pill buttons that already sit in a flex row */
  .svc-nav-btn,
  .svc-bar-link {
    min-height: 44px !important;
  }

  /* items in a horizontal scroller can simply be wider */
  .subnav-item {
    min-width: 44px !important;
  }

  /* buttons that were 28-31px tall. They are all flex-centred, so a
     floor on the height only makes the pill taller, nothing else. */
  button.chip,
  .hero-sample-pill,
  .hero-audience-btn,
  .symptom-all-btn,
  .btn-sm,
  .lang-toggle,
  .nav-logo,
  summary {
    min-height: 44px !important;
  }

  /* Every page that ships <details> already makes its summary a
     centred flex row and hides the default marker, so the height
     floor above is all that is needed - setting display here as
     well would risk dropping the marker on a page that does not. */

  /* a.back is inline-flex with a min-height of 28px of its own */
  a.back {
    min-height: 44px !important;
  }

  /* 5d. inline links: vertical padding on an inline box grows the
     touch area without changing the line box, so no text moves. */
  p a,
  li a,
  td a,
  dd a {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  #cvwGeoChange,
  .helper-foot a,
  .section-subtitle a,
  .faq-a a,
  .hero-note-link,
  .service-link,
  .vs-link,
  .checkout-skip,
  .cl-qn-inner a {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* these two are standalone text buttons rather than links inside a
     sentence, so they can take a full box; the margin cancels it */
  button.linklike,
  .ofi-foot-guide {
    display: inline-block !important;
    padding: 15px 4px !important;
    margin: -15px -4px !important;
  }

  /* footer links sit on their own rows, so they can take a real box;
     the negative margin cancels the padding, so nothing shifts */
  footer li a,
  footer p a,
  .footer-legal a {
    display: inline-block !important;
    padding: 11px 4px !important;
    margin: -11px -4px !important;
  }
}

/* ---- 6. Labels that shrink only on phones -------------------
   The brand uses a mono uppercase micro-scale of 8-9.5px right
   across the site; that is a design decision and is left alone.
   These eleven are different: they sit at 10-11.5px everywhere
   else and are stepped *down* below 10px by a narrow-screen media
   query, so the smallest screens got the smallest type. Each one
   is put back to the size the design already uses for it - no new
   sizes are introduced, and nothing above 640px is touched. */
@media (max-width: 640px) {
  .brand-tag,
  .hero-eyebrow,
  .hero-hint,
  .nav-label {
    font-size: 10px !important;
  }

  #hero .hstat .l,
  .hero-grid .hero-system-badge,
  .sticky-subnav .subnav-item,
  .tb-card-label {
    font-size: 10.5px !important;
  }

  .mini-dash .md-title {
    font-size: 11px !important;
  }

  .tag {
    font-size: 11.5px !important;
  }

  .cvh-eyebrow {
    font-size: 10.5px !important;
  }
}

/* ---- 7. Media never pushes the page sideways ---------------- */
@media (max-width: 1024px) {
  img,
  video,
  canvas,
  iframe {
    max-width: 100%;
  }

  table {
    max-width: 100%;
  }
}

/* ---- 8. Long unbroken strings (emails, URLs, order ids) ------ */
@media (max-width: 480px) {
  body {
    overflow-wrap: break-word;
  }
}

/* ---- 9. Landscape phones: the menu is taller than the screen - */
@media (max-height: 480px) and (orientation: landscape) {
  .nav-mobile-panel {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
  }
}