/* ==========================================================================
   Bengal Photographer — mobile / touch layer
   ==========================================================================
   WHY THIS FILE EXISTS
   The site ships 13 stylesheets, all written for a mouse and a keyboard.
   This one file is linked LAST by every page (public/*.html), so it is the
   single place where "phone / tablet / finger" rules live: one edit here
   reaches all 22 pages instead of 13 media blocks scattered around.

   It only ever ADDS comfort — it never changes the desktop design, and it
   never blocks pinch-zoom (no user-scalable=no): a visitor who needs the
   page bigger can still spread two fingers.

   Covered here
     1. text never inflates on rotate / zoom          (Android + iOS)
     2. instant taps, gold tap feedback               (coarse pointers)
     3. 16px form fields                              (stops iOS auto-zoom)
     4. 44px finger targets on every small control
     5. fullscreen menu that still scrolls
     6. dvh heights + no sideways page scroll
     7. short landscape phones
   ========================================================================== */


/* ---------- 1. Text must not inflate -------------------------------------
   iOS/Android scale text up when the phone is rotated or the user pinch
   zooms, and never scale it back down.  Locking the ratio keeps our
   type sizes honest on every device. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* ---------- 2. Tap feedback + no double-tap-zoom delay --------------------
   `manipulation` drops the 300ms tap delay and the double-tap zoom on
   links/buttons (pinch zoom stays), and the gold highlight tells a finger
   "yes, that registered" — the mouse-only :hover never fires on a phone. */
a,
button,
[role="button"],
summary,
label[for],
input[type="button"],
input[type="submit"],
input[type="reset"],
.nav-toggle,
.slider-dots button,
.exhibit-dots button,
.whatsapp-fab {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 199, 44, 0.35);
}


/* ==========================================================================
   3 + 4.  Touch-sized rules — small phones, tablets and any touch device
   ========================================================================== */
@media (max-width: 860px), (pointer: coarse) {

  /* ---- 3. iOS zooms the whole page when a field below 16px is focused.
     Every form on the site then jumps sideways and the visitor loses the
     button they were aiming for.  16px is the threshold. ---- */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ---- 4a. Inline text links: grow the hit box by 26px, then take the
     space straight back with a negative margin, so the line the text sits
     on does not move by a single pixel. ---- */
  .footer-contact a,
  .footer-bottom a:not(.admin-eye),
  .auth-foot a,
  .eq-empty a,
  .topbar a,
  .back-link,
  a.value {
    display: inline-block;
    padding: 13px 7px;
    margin: -13px -7px;
  }

  /* Prose links — "Create a customer account", "Camera Equipment
     Marketplace", the Privacy Policy line.  These sit mid-sentence, so
     they keep `display: inline`: an inline box is laid out ignoring its
     vertical padding, which means the line does not move, yet the padding
     is still part of the hit area.  `li > a` covers the contact lists that
     are written as plain lists; every styled link (nav, footer, buttons)
     carries a class, and a class always outranks this selector. */
  p a,
  li > a {
    padding: 12px 8px;
  }

  /* Native checkboxes and radios are drawn 13px by every browser, and the
     admin panel even forces `width: auto !important` on its "remember me"
     box.  24px is the floor for a fingertip; the wrapping <label> is what
     actually toggles them, so a bigger box only helps.  (No checkbox on
     the site is custom-drawn — there is no `appearance: none` on one —
     so a fixed square is safe everywhere.) */
  input[type="checkbox"],
  input[type="radio"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
  }

  /* The hidden admin eye in the footer: 19×14 today.  Padding + a matching
     negative margin gives a 45×40 target while the footer row stays as
     tall as it was. */
  .footer-bottom .admin-eye {
    padding: 13px 13px;
    margin: -13px -13px;
  }

  /* ---- 4b. Stand-alone controls simply get a minimum box.  Padding and
     colours are untouched — only the empty space around the label grows. ---- */
  .footer-links a,
  .dir-chip,
  .dir-reset,
  .dir-pager button,
  .dir-perpage button,
  .dir-viewtoggle button,
  .dir-filters select,
  .dir-filters input,
  .breadcrumb a,
  .auth-head-nav a,
  .auth-nav a,
  .nav-drop-btn,
  .mp-nav button,
  .exhibit-tools button,
  .exhibit-tools a,
  .eq-tab,
  .eq-tabs a {
    min-height: 44px;
  }

  /* Breadcrumb sits in an inline-flex row: let the row itself carry the
     height so every crumb (Home, /, Equipment…) inherits it. */
  .breadcrumb {
    display: inline-flex;
    align-items: stretch;
    padding: 11px 0;
  }
  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
  }

  /* Labels inside those controls must stay vertically centred once the
     box grows. */
  .footer-links a,
  .auth-head-nav a,
  .auth-nav a,
  .exhibit-tools a,
  .exhibit-tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  /* ---- 4c. The hero slider dots are 11px dots on a 10px gap — far below
     a fingertip.  Painting the dot in the CONTENT box (background-clip)
     keeps the dot visually identical while the BUTTON grows to 25px, and
     gap:0 puts the dots back on their original 21px pitch. ---- */
  .slider-dots { gap: 0; }
  .slider-dots button {
    width: 25px;
    height: 25px;
    padding: 7px;
    background-clip: content-box;
  }

  /* ---- 4d. The directory's pager shrinks to 36px on phones — put a real
     44px box back under the finger. ---- */
  .dir-pager button { min-width: 44px; }

  /* ---- 4e. A bare `1fr` track never narrows past its content's
     min-content size, so one long word (or the marketplace's stat tiles)
     drags the whole page 10–30px sideways.  min-width:0 removes that
     floor; the text then wraps instead of scrolling the page. ---- */
  .auth-body > *,
  .auth-feats > *,
  .ls-numbers > *,
  .ls-pillars > *,
  .ls-two > *,
  .rev-grid > *,
  .grid > * {
    min-width: 0;
  }

  /* ---- 4f. The marketplace's Login / Register / Admin tab strip is a
     no-wrap flex row: on a 320px phone the three buttons are wider than
     the card and the last one hangs off the screen.  Wrapping (and
     letting each tab grow into its line) keeps them all inside. ---- */
  .auth-tabs { flex-wrap: wrap; }
  .auth-tab { flex: 1 1 auto; min-width: 0; }

  /* ---- 4g. A district report card is a flex row (name · status chip,
     no wrap) whose min-content is 300px.  Below ~330px the card is wider
     than the column and the chip pokes out.  Let the card shrink and the
     head wrap onto a second line instead. ---- */
  .rpt-card,
  .rpt-grid > * { min-width: 0; }
  .rpt-card__head { flex-wrap: wrap; }

  /* The report grid is `repeat(auto-fill, minmax(300px, 1fr))` — a 300px
     track that simply does not fit a 320px phone, so the whole grid ran
     off the side of the screen.  One full-width column below, and the
     three stat cells get a track they are allowed to shrink into. */
  .rpt-grid { grid-template-columns: minmax(0, 1fr); }
  .rpt-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==========================================================================
   5. Fullscreen menu (phones) — must scroll when text is enlarged
   ========================================================================== */
@media (max-width: 860px) {

  /* The overlay is centred; with larger text the first and last links
     would sit half off-screen with no way to reach them.  `safe center`
     keeps the top item reachable and overflow-y lets the list scroll.
     Scoped to the overlay only: on desktop .main-nav holds the floating
     login dropdown, which an overflow would clip. */
  .main-nav {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-content: safe center;
  }

  /* Menu entries: 40px tall today → a comfortable 50px. */
  .nav-list a {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Hamburger: 40×34 → 50×44 (the open/close transforms only read the
     spans' gap, so extra padding is safe). */
  .nav-toggle { padding: 13px; }

  /* ---- 6. Nothing may push the page sideways.  A stray 20px somewhere
     makes the whole page pan horizontally on a phone, which on iOS also
     swallows the first tap.  `clip` (not `hidden`) because it does not
     turn the page into a scroll container — sticky headers keep working. */
  body { overflow-x: clip; }
}

/* The About photo's offset gold frame is -14px proud of the photo.  The
   container's side padding is proportional, so below ~360px it is smaller
   than 14px and the frame pokes 2–4px off the screen (it cannot scroll
   sideways any more — this rule stops the clip from shaving the frame). */
@media (max-width: 359px) {
  .about-photo::after { right: -8px; }
}


/* ---- 6b. dvh: the address bar / home-indicator changes the viewport
   height while scrolling, so 100vh leaves a gap or a cut-off button.
   Browsers that do not know `dvh` drop the line and keep the vh one. */
.auth-shell { min-height: 100dvh; }
.hero-slider { height: min(620px, 88dvh); }

@media (max-width: 620px) {
  .hero-slider { height: min(560px, 88dvh); }
}

/* The floating WhatsApp button must clear the iPhone home indicator when
   the page ever opts into viewport-fit=cover.  Reads as 0px today. */
.whatsapp-fab {
  right: calc(22px + env(safe-area-inset-right, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}


/* ==========================================================================
   7. Short landscape phones (≈ 740 × 360) — there is almost no height,
      so the page chrome has to give it back to the content.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 480px) {
  section { padding: 30px 0; }
  .page-hero { padding: 46px 0; }
  .features-strip { padding: 30px 0; }

  /* The overlay menu must fit the whole screen without scrolling. */
  .nav-list { gap: 12px; }
  .nav-list a { padding-top: 6px; padding-bottom: 6px; font-size: 16px; }

  /* The hero has to fit the visible area exactly, toolbar included. */
  .hero-slider { height: min(620px, 100dvh); }
}