/* mobile.css — D107, 17.09.2026. Corrections measured on five phone viewports (320/360/390/430 and
   844×390 landscape) across the twenty public routes and the eight customer-portal routes before the
   advertising launch. This file exists separately because styles+aurora+editorial+pricing-studio sit
   at 203,915 of the 204,800 raw bytes the release budget allows (point512Release.test.js); the same
   reason home-search.css is its own file. It loads LAST, so equal-specificity rules here win.

   What was measured, and why each block exists:
   1 · 49 fields rendered under 16px. iOS Safari zooms the whole page when such a field takes focus,
       and the visitor lands mid-page at 1.4× with no way back. aurora.css already tried to fix this
       with `@media (max-width:620px){input,select,textarea{font-size:16px}}`, but `.filters input`
       and `.field input` are (0,1,1) and beat a bare element selector, so the rule never applied.
       The selector below is (0,2,2) and does.
   2 · At 360px and below the header buttons collapse to 31×32 icon pills: "Log in" renders as a bare
       ● with no label. That is deliberate in aurora.css, but on a 320px phone an ad visitor sees no
       way in. Labels come back, and every header control reaches the 44px tap target.
   3 · Footer navigation links are 22px tall. They keep their type size and gain tappable padding.
   4 · Customer-facing text under 12px (10px eyebrows, 11px labels) gets a 12px floor on phones.
       Admin surfaces (.cost-*, .admin-*) are deliberately untouched: they are desktop tools and
       their density is the point. */

/* ---------------------------------------------------------------- 1 · no iOS zoom on focus */
@media (max-width: 820px), (max-height: 520px) and (orientation: landscape) {
  body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    font-size: 16px;
  }
}

/* ------------------------------------------------------- 2 · header controls stay readable */
@media (max-width: 820px), (max-height: 520px) and (orientation: landscape) {
  body > header .nav-actions .btn-sm { min-height: 44px; }
  .public-nav-menu { width: 44px; height: 44px; flex-basis: 44px; }
}

@media (max-width: 360px) {
  body > header .nav { padding-inline: 10px; gap: 6px; }
  body > header .logo { font-size: 17px; }
  body > header .nav-actions { gap: 6px; }
  body > header .nav-actions .btn-sm {
    width: auto;
    min-height: 44px;
    padding: 0 10px;
    font-size: 12.5px;
    white-space: nowrap;
  }
  body > header .nav-actions .btn-sm::before { content: none !important; }
  .public-nav-menu { width: 44px; flex-basis: 44px; }
}

/* --------------------------------------------------------- 3 · footer links are tappable */
@media (max-width: 820px), (max-height: 520px) and (orientation: landscape) {
  .aurora-foot-grid > div > a { padding-block: 9px; }
  .dest-links a { padding-block: 7px; }
  /* The last footer row: a 17px "Contact support" link and a 23px cookie-settings button. */
  .foot-legal a,
  .footer-cookie-settings { display: inline-block; padding-block: 11px; }
  /* The login dialog is where an advertisement lands. Its legal links were 17px tall and its
     recovery buttons 26px — the two controls a visitor reaches for when something goes wrong. */
  .modal a,
  .modal .link-button { display: inline-block; padding-block: 10px; }
  .home-error button,
  .home-empty button { min-height: 40px; padding-inline: 14px; }
  /* The generated destination and guide pages carry their own chrome: a 21px footer link column, a
     20px breadcrumb, 22px inline calls to action and 25px related-destination rows. Padding on an
     inline link still grows its hit box, so the calls to action keep flowing with their sentence. */
  .atlas-static-footer-links nav a { padding-block: 9px; }
  .crumbs a { display: inline-block; padding-block: 10px; }
  .seo-country-split article a { padding-block: 9px; }
  .seo-related a { min-height: 40px; align-items: center; }
  /* Card calls to action — the last line of a help or ReadyCheck card, not part of a sentence.
     Links that sit INSIDE prose ("… use the contact form", "… our Privacy Policy") are left alone on
     purpose: padding them would make neighbouring lines overlap, which is worse than an 18px target. */
  .help-grid article > a,
  .tool-card > a { padding-block: 9px; }
  /* A phone number or an address on a phone is a control, wherever it sits in the text. */
  a[href^="mailto:"],
  a[href^="tel:"] { padding-block: 9px; }
  /* <small> is 0.8em by browser default, which lands at 11.25px in the footer note. */
  .aurora-foot-grid small,
  .atlas-static-footer small { font-size: 12px; }
}

/* ------------------------------------------------------------- 4 · 12px floor for phones */
@media (max-width: 820px), (max-height: 520px) and (orientation: landscape) {
  .shop-compare-labels b,
  .shop-compare-empty > div > span,
  .shop-compare-panel > header span,
  .home-launch-card span,
  .home-destination-badge,
  .seo-plan-card span,
  .shop-filters label,
  .shop-filters label small,
  .shop-compare-table th:first-child,
  .shop-compare-table thead button,
  .shop-compare-reasons p,
  .destination-media-fallback small,
  .destination-directory-intro small,
  .destination-directory-list summary small,
  .home-destination-options small,
  .home-destination-card strong small,
  .home-plan-tag,
  .home-search > label,
  .home-usage-demo,
  .home-plan-head small,
  .home-plan-facts span,
  .home-plan-networks,
  .home-usage-buttons span,
  .usg-net,
  .usg-fresh,
  .lpa-code,
  .cat-card .soon,
  .hz-card .home-destination-badge,
  .hz-tag,
  .hz-card em.hz-card-none,
  .hz-fare span,
  .hz-meter .home-usage-buttons button span,
  .hz-launch .home-launch-card span,
  .hz-hero .home-announcement b,
  .home-launch-card strong small,
  .home-anchor-tag b,
  .home-anchor-tag span,
  .atlas-gift-pass > i,
  .atlas-gift-pass > span,
  .atlas-table-wrap th,
  .atlas-gift-row dt,
  .atlas-static-nav > .btn,
  .service-current b,
  .service-event-facts b,
  .strategy-measures span,
  .gift-ticket span,
  .trip-phase-grid section > span,
  .article-card > span,
  .destination-card-body > span,
  .seo-country-visual.fallback small,
  .seo-plan-visual > small,
  .seo-plan-visual figcaption small,
  .seo-plan-media.fallback small,
  .is-stacked > table > tbody > tr > *::before,
  .side-nav::before,
  .tbl th,
  .article-related a span,
  .seo-guide-related a span,
  .article-card small,
  .guide-discovery button em,
  .editorial-record-meta,
  .seo-guide-sources small,
  .hs-picks-label,
  .hs-hint {
    font-size: 12px;
  }
}