/* Sprega — mobile corrections.
 *
 * Loaded LAST in <head> on every page, deliberately. No other stylesheet loads last everywhere:
 * index/404 end on sprega.css, prijava/registracija end on sprega-auth.css, operator.html loads no
 * external sheet at all, and most pages then add an inline <style> after their links. This is the
 * only file that can reliably win the cascade site-wide — which is the whole point, because most of
 * what it overrides lives in those inline blocks.
 *
 * Everything is scoped to `pointer: coarse`, `env(safe-area-*)`, or a viewport unit. Nothing here
 * changes how the site looks on a mouse-driven screen.
 */

/* ─────────────────────────────────────────────────────────────────────────────────────────────────
   1. iOS auto-zoom on focus.

   Safari zooms the whole viewport when you focus an input whose computed font-size is under 16px,
   and it does NOT zoom back out afterwards. Every form on this site sat at 14–15px, so a customer
   filling in the selidbe or carina form got thrown into a zoomed page partway through and had to
   pinch back out to keep going. 16px is a hard threshold in WebKit, not a guideline.

   !important is load-bearing, not laziness: the page rules are `.field input{font-size:14px}`
   (specificity 0,1,1) and this is a bare element selector (0,0,1). Loading later does not beat that.
   Enumerating every input selector across 12 files would win on specificity but would rot the moment
   someone adds a thirteenth.
   ───────────────────────────────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  select,
  textarea{
    font-size: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────────
   2. Touch targets.

   The hero carousel dots were NINE pixels square (ten on mobile). Apple's HIG and WCAG 2.5.5 both
   want ~44px.

   The usual trick — hang an invisible 44px ::after on the small control — does not work for the dots
   and would have been a silent bug: they sit on a 17px pitch (9px dot + 8px gap), so 44px hit areas
   would overlap by 27px and a tap between two dots would land on whichever came later in the DOM.
   The buttons themselves have to grow. So on touch they become real 44×44 buttons, transparent, with
   the visible dot redrawn as a ::before at its original size. The glass pill that contains them grows
   with them; its padding is trimmed here to keep that in proportion.

   For the genuinely standalone controls (menu toggle, modal close, icon buttons) the ::after overlay
   IS correct — nothing sits within 44px of them, so there is nothing to overlap.
   ───────────────────────────────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse){

  /* hero carousel dots. :not(.heroplay) spares the pause control, which is a text button and sizes
     itself; it gets a min-size instead.

     width:max-content and flex-shrink:0 are both required, and neither is obvious. The pill is
     position:absolute with left:50%, so its shrink-to-fit width is capped at the space remaining to
     the right of that 50% — about 207px on a 414px phone. Four 44px dots plus the pause button need
     ~228px. Without these two declarations the flex items silently compress and the dots come out
     28px wide: the height looks right, the width quietly fails, and the whole fix is a no-op. */
  .hero-dots{
    gap: 0;
    padding: 2px 4px;
    width: max-content;
    max-width: calc(100vw - 20px);
  }
  .hero-dots button:not(.heroplay){
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    display: grid;
    place-items: center;
  }
  .hero-dots button:not(.heroplay):hover{ transform: none; background: transparent; }
  .hero-dots button:not(.heroplay)::before{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.58);
    /* width, not scaleX: the dot is a pill (border-radius 20px) that stretches to 30px when active.
       scaleX would stretch the rounded caps into ellipses. This mirrors the transition already on
       .hero-dots button in index.html, and it is contained — the ::before sits in a fixed 44px grid
       cell, so its width cannot move a single sibling. */
    transition: width .25s, background .25s;
  }
  .hero-dots button:not(.heroplay).on::before{
    width: 30px;
    background: var(--amber, #e8791a);
  }
  .heroplay{ min-width: 44px; min-height: 44px; }

  /* standalone icon controls: keep the visual, grow the hit area with a centred invisible overlay */
  .iconbtn,
  .spmenu-btn,
  .mclose,
  .modal-x,
  .spmenu-close{
    position: relative;
  }
  .iconbtn::after,
  .spmenu-btn::after,
  .mclose::after,
  .modal-x::after,
  .spmenu-close::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
    transform: translate(-50%, -50%);
  }

  /* buttons that are already wide enough but sit short of 44px tall */
  .btn-sm,
  .docbtn,
  .fchip{
    min-height: 44px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────────
   3. The iOS viewport, for real.

   `100vh` on iOS is the LARGE viewport — the height the page would have if the address bar were
   hidden. It does not shrink when the toolbar is showing. So `.case-modal-card{max-height:calc(100vh
   - 24px)}` let the carina bottom sheet run taller than the actually-visible area, and its bottom
   edge — which is where the submit button is — could sit behind the Safari toolbar. Unreachable.

   `dvh` is the dynamic viewport: it tracks the toolbar as it collapses and expands. This is the fix
   for the one real mobile-viewport bug on the site. Guarded by @supports so a browser without dvh
   keeps the vh value rather than dropping the declaration and going unbounded.

   Each rule below mirrors the original's geometry exactly and swaps only the unit. carina defines
   .case-modal-card twice — calc(100vh - 48px) at any width, then calc(100vh - 24px) inside
   @media(max-width:620px) where it becomes a bottom sheet — so both are restated here. Collapsing
   them into one rule would quietly make the DESKTOP modal 24px taller, which is not the ask.
   ───────────────────────────────────────────────────────────────────────────────────────────────── */
@supports (height: 100dvh){
  .case-modal-card{ max-height: calc(100dvh - 48px); }          /* carina base — was calc(100vh - 48px) */
  @media (max-width: 620px){
    .case-modal-card{ max-height: calc(100dvh - 24px); }        /* carina bottom sheet — was calc(100vh - 24px) */
  }
  .modal-card{ max-height: 88dvh; }                             /* operator modals — was 88vh */
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────────
   4. Safe area.

   Paired with `viewport-fit=cover` on the viewport meta (added to all 12 pages in the same commit).
   Without cover, iOS letterboxes the page below the notch and above the home indicator and env()
   reports 0px — so these rules and that meta only make sense together, and neither is useful alone.

   Vertical insets only. A horizontal (landscape) inset would need side gutters on the full-bleed
   hero, which reads worse than letting a dark scrim run under the notch — left alone deliberately.
   ───────────────────────────────────────────────────────────────────────────────────────────────── */
@supports (padding: env(safe-area-inset-top)){

  /* All three sticky headers clear the status bar / notch. There are three because the markup is not
     uniform: .spnav on the nine public pages, .nav on index.html alone, .topbar on operator.html
     alone. (There is also a header.top{position:sticky} rule in four files with no <header class="top">
     anywhere — pre-existing dead CSS, left alone, but worth knowing it is not a fourth header.) */
  header.spnav,
  header.nav,
  header.topbar{
    padding-top: env(safe-area-inset-top);
  }

  /* the one fixed overlay class on the site, and the carina bottom sheet, clear the home indicator */
  .modal{
    padding-bottom: env(safe-area-inset-bottom);
  }
  .case-modal-card{
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  /* the footer is the last thing above the home indicator on every public page */
  .spft-base{
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}
