/* ── UI CORRECTIONS ──────────────────────────────────────────────────
   Linked LAST on every page, so these deliberately win over page-level
   styles. Four fixes and one addition, all felt rather than seen.
   Press feedback, touch input sizing, focus rings, selection colour.
   Keep this file last in the head or the overrides stop working. */

/* iOS resizes type unpredictably when a phone turns landscape. */
html { -webkit-text-size-adjust: 100%; }

/* Brand selection instead of the browser's default blue. */
::selection { background: var(--orange, #FF6B35); color: #fff; }
::-moz-selection { background: var(--orange, #FF6B35); color: #fff; }

/* Focus rings that follow the border radius. An outline draws a
   rectangle around a pill; a box-shadow traces the actual shape. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg, #181a17), 0 0 0 4px var(--orange, #FF6B35);
}

/* Safari zooms the whole page when a field under 16px takes focus, and
   does not zoom back out. Touch only, so desktop keeps its designed sizes. */
@media (hover: none) and (pointer: coarse) {
  input, textarea, select { font-size: 16px; }
}

/* ── PRESS FEEDBACK ──
   On touch there is no hover, so this is the only thing that responds
   between a thumb going down and the page changing. */
.btn,
.btn-cta,
.btn-submit,
.btn-ghost,
.btn--ghost,
.btn-quiet,
.sticky-cta,
.panel-cta-ghost,
.embed-facade-btn,
.card-link,
.feed-card-link,
.package-card-link,
.pkg-select-card,
.format-card,
.partner-slot,
.kit-card,
.gate-form button,
.booking-form button {
  transition: transform 120ms var(--ease-site, cubic-bezier(0.25, 0.6, 0.3, 1));
}

.btn:active,
.btn-cta:active,
.btn-submit:active,
.btn-ghost:active,
.btn--ghost:active,
.btn-quiet:active,
.sticky-cta:active,
.panel-cta-ghost:active,
.embed-facade-btn:active,
.card-link:active,
.feed-card-link:active,
.package-card-link:active,
.pkg-select-card:active,
.format-card:active,
.partner-slot:active,
.kit-card:active,
.gate-form button:active,
.booking-form button:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-cta, .btn-submit, .btn-ghost, .btn--ghost, .btn-quiet,
  .sticky-cta, .panel-cta-ghost, .embed-facade-btn, .card-link,
  .feed-card-link, .package-card-link, .pkg-select-card, .format-card,
  .partner-slot, .kit-card, .gate-form button, .booking-form button {
    transition: none !important;
  }
  .btn:active, .btn-cta:active, .btn-submit:active, .btn-ghost:active,
  .btn--ghost:active, .btn-quiet:active, .sticky-cta:active,
  .panel-cta-ghost:active, .embed-facade-btn:active, .card-link:active,
  .feed-card-link:active, .package-card-link:active, .pkg-select-card:active,
  .format-card:active, .partner-slot:active, .kit-card:active,
  .gate-form button:active, .booking-form button:active {
    transform: none !important;
  }
}

/* ── CROSS-DOCUMENT VIEW TRANSITIONS ─────────────────────────────────
   Pages crossfade into each other instead of blinking white, and the
   persistent chrome holds its place instead of flickering.

   Both the page being left and the page being opened must carry this
   rule, which is why it lives in the stylesheet linked on every page.
   Browsers without support ignore all of it, so there is no fallback
   to build and nothing degrades. */

@view-transition { navigation: auto; }

/* Named elements persist across the navigation rather than fading with
   the rest of the page. Each name must appear exactly once per page.
   Pages without these elements simply crossfade, which is correct. */
.hamburger   { view-transition-name: site-hamburger; }
.site-footer { view-transition-name: site-footer; }

/* Match the site's own easing and timing rather than the browser default. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: var(--ease-site, cubic-bezier(0.25, 0.6, 0.3, 1));
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}