/* Interaction polish, from Emil Kowalski's skills (github.com/emilkowalski/skills):
   press feedback, hover only where hover exists, and the touch fixes that make
   a web page feel native on a phone. Loaded last on every page. */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- Touch ---------- */
html { -webkit-tap-highlight-color: transparent; }
/* Removes the double-tap-zoom delay on controls. */
a, button, [role="button"], summary, label, input, select, textarea, .btn {
  touch-action: manipulation;
}
/* iOS zooms into any field under 16px; keep zoom available, make the text big enough. */
@media (max-width: 760px) {
  /* !important on purpose: page stylesheets size some fields by #id (15.2px),
     and anything under 16px makes iOS zoom the page on focus. */
  :root:root :is(input, select, textarea) { font-size: 16px !important; }
}
/* Don't let a pull on the menu drawer or an open mega panel scroll the page behind. */
.mobile-menu, .mega-inner { overscroll-behavior: contain; }
/* Long-pressing a button shouldn't select its label. Controls only, never body. */
button, .btn, .nav-link, .mobile-sub-trigger { -webkit-user-select: none; user-select: none; }

/* Notches and home indicators (needs viewport-fit=cover in the page head). */
.site-header { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
.mobile-menu { padding-bottom: env(safe-area-inset-bottom); }
.mobile-menu-footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

/* ---------- Press feedback ----------
   Scale down a little while pressed, snap back fast. Presses give feedback on
   press, not on release. */
.btn, .mc-buy, .mc-add-cart, .vm-plan-buy, .bm-plan-buy, .vps-card-cta,
.mh-btn, .vm-btn, .mc-btn, .bm-btn, .gh-btn, .dp-btn,
.mobile-sub-trigger, .header-cart-link, .nav-toggle {
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease;
}
.btn:active, .mc-buy:active, .mc-add-cart:active, .vm-plan-buy:active, .bm-plan-buy:active,
.vps-card-cta:active, .mh-btn:active, .vm-btn:active, .mc-btn:active, .bm-btn:active,
.gh-btn:active, .dp-btn:active, .nav-toggle:active, .header-cart-link:active {
  transform: scale(0.97);
}

/* ---------- Numbers ----------
   Tabular figures so prices and counters don't jitter as digits change. */
[class*="price"], [class*="amt"], [class*="stat"], [class*="-spec"] strong,
.vh-cart-badge, table, .footer-status {
  font-variant-numeric: tabular-nums;
}

/* Avatars squash into ovals when a flex row gets tight. */
.team-avatar, [class*="avatar"] { flex-shrink: 0; }

/* ---------- Hover only where hover exists ----------
   A tap on a touch screen leaves :hover stuck on. Undo the hover-only tints
   from nav.css and taste.css for touch devices. */
@media (hover: none), (pointer: coarse) {
  .site-header .mega-link:hover { background: transparent; }
  .site-header .mega-link[aria-current="page"]:hover { background: rgba(182, 154, 255, 0.12); }
  .site-header .mega-link:hover .mega-item-name::after { opacity: 0; }
  .site-header .mega-link:hover .mega-item-name { transform: none; }
  .site-header .header-cart-link:hover,
  .site-header .header-action-link:hover { background: transparent; }
  .site-header .nav-indicator { display: none; }
}

/* Reduced motion keeps colour and opacity changes (they explain state) but
   drops movement. */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .mc-buy:active, .mc-add-cart:active, .vm-plan-buy:active, .bm-plan-buy:active,
  .vps-card-cta:active, .mh-btn:active, .vm-btn:active, .mc-btn:active, .bm-btn:active,
  .gh-btn:active, .dp-btn:active, .nav-toggle:active, .header-cart-link:active { transform: none; }
}