/* ===========================================================================
   Pro League Hub — plh-mobile.css
   ===========================================================================
   MOBILE-FIRST REPAIRS. Additive only.

   A 360px render of every page in the site turned up no horizontal scroll and
   no clipped text -- the cards fit, the type fits. What failed was TOUCH.

   Every footer nav link on every page measured 11-13px tall. So did the back
   links. They are bare anchors: the markup sets font, colour and letter-spacing
   inline, but never padding. Apple's HIG and WCAG 2.5.8 both put the floor at
   44px, and a 13px target on a phone is a miss waiting to happen.

   Because those anchors never declare padding inline, this file can raise all
   of them from one place -- no !important, no inline edits, no page rewritten.
   It only ever ADDS hit area. It does not move, recolour, or restyle anything.

   Load it AFTER the page's own <style>. Order does not actually matter here,
   since nothing below collides with an inline declaration, but keep it last so
   the intent is obvious.
   =========================================================================== */

/* --- 1. TAP TARGETS --------------------------------------------------------
   Padding was the wrong tool: it depends on the line-height of whatever font
   the anchor happens to inherit, and it left these links at 39-41px -- close
   enough to look right in a screenshot and still miss under a thumb.

   min-height on an inline-flex box is deterministic. 44px is 44px whatever the
   type does. The negative margin keeps the footer's visual rhythm, so nothing
   moves; only the hit box grows.

   Scoped to chrome -- footers, navs, headers. NOT to <a> generally, or every
   inline link inside a news article would become a 44px block and shred the
   prose. */
footer a:not(:has(div, img, picture)),
nav a:not(:has(div, img, picture)),
[data-mobile-menu] a:not(:has(div, img, picture)),
header nav a:not(:has(div, img, picture)) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  margin: 0 -8px;
}

/* --- 2. BACK LINKS ---------------------------------------------------------
   "◂ BACK TO LEAGUE", "← BACK TO HOME", "← BACK TO PRO LEAGUE HUB" -- all ~13px.
   plh-back.js mounts one of these too; same rule covers it. */
[data-plh-back],
[data-back-league],
[data-back-game],
[data-compare-link] {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
}

/* --- 3. CONTROLS -----------------------------------------------------------
   Buttons and selects carry their padding inline, so they land at 40-42px --
   just under. min-height wins without touching the inline style, because the
   markup never declares one. */
button, select, input[type="submit"], [role="button"] {
  min-height: 44px;
}
@media (pointer: coarse) {
  [data-menu-btn] { min-width: 46px; min-height: 46px; }
}


/* --- 3b. THE STRAGGLERS ----------------------------------------------------
   REGRESSION FIXED HERE.

   This block used to say, flatly:

       a[href^="player.html"] { display:inline-flex; align-items:center; }

   which was a bug with real consequences. A player CARD is also an <a href=
   "player.html...">, and it contains stacked block children -- a name on one
   line, "#31 · 5 GP" underneath. Forcing inline-flex turned every one of those
   into a horizontal row, so the jersey line jumped up and sat ON TOP of the
   name. It broke the Arena panel, the Duel card, and every player card on the
   site. Chasing a 44px tap target, I wrecked the layout of the thing I was
   trying to make tappable.

   :has() draws the line properly: give the tap box ONLY to links that are plain
   text. Anything containing block content is already a card -- it is large
   enough to hit, and its internal layout is none of this file's business. */
a[href^="launch.html"]:not(:has(div, img, picture)),
a[href^="contact.html"]:not(:has(div, img, picture)),
a[href^="index.html"]:not(:has(div, img, picture)),
a[href^="news.html"]:not(:has(div, img, picture)),
a[href^="game.html"]:not(:has(div, img, picture)),
a[href^="player.html"]:not(:has(div, img, picture)),
a[href^="team.html"]:not(:has(div, img, picture)),
a[href^="league.html"]:not(:has(div, img, picture)),
a[href^="compare.html"]:not(:has(div, img, picture)),
a[href^="arena.html"]:not(:has(div, img, picture)) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Form fields. Users type in these; 42px is a miss on a moving bus. */
input, textarea, select {
  min-height: 44px;
}

/* --- 4. SAFE AREA ----------------------------------------------------------
   Once this is installed to a home screen it runs without browser chrome, so
   the footer can end up under the iPhone home indicator and the topbar under
   the notch. Only applies in standalone; the browser render is unchanged. */
@media (display-mode: standalone) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  footer { padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important; }
}

/* --- 5. IOS TEXT INFLATION -------------------------------------------------
   Safari on iOS silently upsizes text in tall blocks, which is what makes a
   card that fits in Chrome overflow on an iPhone. Pin it. */
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* --- 6. TAP HIGHLIGHT ------------------------------------------------------
   The default grey flash reads as a bug on a black broadcast canvas. */
a, button { -webkit-tap-highlight-color: rgba(245,109,12,0.18); }