/* ============================================================
   ISTA — PREMIUM POLISH LAYER
   Site-wide quality details that genuinely cannot be inline:
   the WCAG 2.2 dual focus ring (mandated by the design system),
   branded selection, a refined scrollbar, typographic balance,
   and reusable card / media micro-interactions.
   Linked from every page <helmet>; applies across child DCs too.
   ============================================================ */

/* --- WCAG 2.2 dual focus ring (2.4.7 / 2.4.13 / 1.4.11) ----
   3px brand-blue outline + a contrasting halo so the indicator
   keeps ≥3:1 on white, tinted, dark navy and full-photo bands. */
:where(a, button, input, select, textarea, summary, [tabindex], .mn-link, .mn-col a):focus-visible {
  outline: 3px solid #1134ff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.9);
  border-radius: 4px;
  position: relative;
  z-index: 2;
}

/* --- Pill fields (search / newsletter): ring the pill, not the bare input ----
   Bare borderless inputs sit inside a rounded pill container; the default
   rectangular ring drew an ugly box INSIDE the pill. Move the ring to the
   container (which is already border-radius:999px) and clear the inner one. */
input[style*="background:transparent"]:focus-visible,
input[style*="background: transparent"]:focus-visible {
  outline: none;
  box-shadow: none;
}
*:has(> input[style*="background:transparent"]):focus-within,
*:has(> input[style*="background: transparent"]):focus-within {
  outline: 3px solid #1134ff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.9);
}
/* On the deep tonal bands the white halo would glare — use a navy halo. */
.fl-hero[data-movement] :where(a, button, input, .mn-link):focus-visible,
[style*="background:#17154f"] :where(a, button, input):focus-visible,
[style*="background:#062d08"] :where(a, button, input):focus-visible,
[style*="background:#411c4c"] :where(a, button, input):focus-visible,
[style*="background:#1134ff"] :where(a, button, input):focus-visible {
  box-shadow: 0 0 0 6px rgba(255,255,255,0.95);
}

/* --- Branded text selection --- */
::selection { background: #1134ff; color: #fff; }
::-moz-selection { background: #1134ff; color: #fff; }

/* --- Refined scrollbar (premium, unobtrusive) --- */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: #cfd6ef transparent; }
  *::-webkit-scrollbar { width: 11px; height: 11px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb { background: #cfd6ef; border: 3px solid #fff; border-radius: 999px; }
  *::-webkit-scrollbar-thumb:hover { background: #1134ff; }
}

/* --- Typographic balance --- */
h1, h2, h3, .fl-hero__title { text-wrap: balance; }
p { text-wrap: pretty; }

/* Tabular, lining figures for the numerals & data rhythm */
.ista-num, [class*="Numerals"] { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* --- Reusable premium media zoom -------------------------------
   Wrap an image/background tile in .prem-media; the inner
   .prem-media__img scales gently on hover/focus of the link. */
.prem-media { overflow: hidden; position: relative; }
.prem-media__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), filter 0.7s ease;
  will-change: transform;
}
a:hover .prem-media__img,
a:focus-visible .prem-media__img,
.prem-card:hover .prem-media__img { transform: scale(1.05); }

/* Generic clickable-card lift (opt-in via .prem-card) */
.prem-card { transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease; }
.prem-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -24px rgba(17,21,79,0.28); }

/* Arrow nudge on text links carrying a trailing ›/→ */
.prem-arrow svg, .prem-arrow span[data-arrow] { transition: transform 0.22s cubic-bezier(0.16,1,0.3,1); }
.prem-arrow:hover svg, .prem-arrow:hover span[data-arrow] { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .prem-media__img, .prem-card, .prem-arrow svg, .prem-arrow span[data-arrow] { transition: none !important; }
}