/* =========================================
   ARTISAN OVEN — Apple-style look (public pages)
   Loaded AFTER each page's own styles. Look only:
   no markup, script or layout-structure changes.
   Remove the <link> tags to go back to the v1 look.
   Principles: instant press feedback, springy
   (non-bouncy) easing, translucent chrome,
   size-specific tracking, soft depth, restraint.
========================================= */

:root {
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --ap-ease: cubic-bezier(0.32, 0.72, 0, 1);       /* Apple's sheet curve: fast out, soft settle */
  --ap-hairline: rgba(60, 60, 67, 0.14);
  --ap-glass: rgba(247, 243, 236, 0.72);
  --ap-shadow-1: 0 1px 2px rgba(22, 40, 31, 0.05), 0 4px 14px rgba(22, 40, 31, 0.06);
  --ap-shadow-2: 0 2px 4px rgba(22, 40, 31, 0.05), 0 18px 44px -12px rgba(22, 40, 31, 0.22);
  --ap-radius: 22px;
  --ap-radius-sm: 14px;
}

/* ---------- Type: system font for reading, brand face only for display ---------- */
body {
  font-family: var(--ap-font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .hero-heading, .wordmark, .event-card-title, .event-header-title {
  letter-spacing: -0.022em;
}
h1, .hero-heading { line-height: 1.06; letter-spacing: -0.03em; }
h2 { line-height: 1.12; }
p, li, dd, label, input, select, textarea, button { font-family: var(--ap-font); }
small, .tracker-disclaimer, .form-help, .step-hint, .terms-meta { letter-spacing: 0.005em; }
.wordmark { letter-spacing: 0.14em; }

/* ---------- Translucent header, content scrolls under ---------- */
.site-header, .topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  background: var(--ap-glass);
  border-bottom: 0.5px solid var(--ap-hairline);
}
.site-header { padding: 14px 0 12px; }
.secondary-header { padding: 10px 0; }
.back-link { font-weight: 500; letter-spacing: -0.011em; }

/* ---------- Surfaces: soft depth, hairline edges, generous radii ---------- */
.main-interest-card, .main-interest-form-card, .main-interest-success,
.payment-card, .lookup-card, .order-summary-card, .info-card, .availability-tracker,
.event-card, .event-form-card, .event-header-card, .terms-card, .closed-card,
.order-type-card, .service-notice, .success-card, .order-result-card, .card, .method {
  border-radius: var(--ap-radius);
  border: 0.5px solid var(--ap-hairline);
  box-shadow: var(--ap-shadow-1);
  transition: box-shadow 0.5s var(--ap-ease), transform 0.5s var(--ap-ease);
}
.method { border-radius: var(--ap-radius-sm); }

@media (hover: hover) {
  .event-card:hover, .availability-tracker:hover, .order-type-card:hover {
    box-shadow: var(--ap-shadow-2);
    transform: translateY(-2px);
  }
}

/* The two big choice cards keep their oven-arch, gain the same soft motion */
.choice-card { transition: transform 0.5s var(--ap-ease), box-shadow 0.5s var(--ap-ease); }
.choice-card:active { transform: scale(0.985); transition-duration: 0.1s; }

/* ---------- Buttons: rounded, instant press feedback ---------- */
.btn, .btn-solid, .btn-outline, .choice-btn, .main-interest-button, .main-interest-submit,
.lookup-submit, .event-card-btn, .back-home-button, .payment-button, .step-next,
.add-pizza-btn, .unpaid-pay-btn, .paypal-btn, .copy-btn, .remove-pizza-btn, .menu-btn {
  border-radius: 14px;
  font-family: var(--ap-font);
  font-weight: 600;
  letter-spacing: -0.011em;
  transition: transform 0.35s var(--ap-ease), background-color 0.2s ease, box-shadow 0.35s var(--ap-ease), opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:active, .btn-solid:active, .btn-outline:active, .choice-btn:active,
.main-interest-button:active, .main-interest-submit:active, .lookup-submit:active,
.event-card-btn:active, .back-home-button:active, .payment-button:active,
.step-next:active, .add-pizza-btn:active, .unpaid-pay-btn:active, .paypal-btn:active,
.copy-btn:active, .remove-pizza-btn:active, .menu-btn:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}
button:disabled, .btn-disabled { opacity: 0.5; }

/* ---------- Fields: 16px (no iOS zoom), soft focus glow ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], select, textarea, .lookup-input, .main-interest-field input,
.main-interest-field textarea {
  font-family: var(--ap-font);
  font-size: 16px;
  letter-spacing: -0.011em;
  border-radius: 12px;
  border: 0.5px solid rgba(60, 60, 67, 0.25);
  background-color: rgba(255, 255, 255, 0.92);
  transition: border-color 0.2s ease, box-shadow 0.35s var(--ap-ease), background-color 0.2s ease;
}
input:focus, select:focus, textarea:focus, .lookup-input:focus {
  outline: none;
  border-color: var(--terracotta, #C65D3B);
  box-shadow: 0 0 0 4px rgba(198, 93, 59, 0.16);
}
:focus-visible { outline-color: var(--terracotta, #C65D3B); }
/* Keyboard focus is visible on every button and link; mouse and touch get no ring. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  outline: 2.5px solid rgba(198, 93, 59, 0.6); outline-offset: 3px; border-radius: 10px;
}
/* Taps answer at once: no double-tap-zoom wait on any control. */
a, button, label, select, summary, [role="button"], .choice-card, .choice-radio { touch-action: manipulation; }

/* Choice rows (radio cards) */
.choice-radio { border-radius: var(--ap-radius-sm); transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.3s var(--ap-ease); }
.choice-radio:active { transform: scale(0.985); transition-duration: 0.08s; }

/* ---------- Progress & status: rounded, unhurried ---------- */
.progress-container, .progress-bar, .form-progress, .form-progress-bar { border-radius: 999px; }
/* Fills settle, never overshoot: a bar that bounces past its value reads as a wrong number
   for a moment (style.css's curve overshot by ~10%). */
.progress-fill { border-radius: 999px; transition: width 0.9s var(--ap-ease), background-color 0.5s ease; }
.badge-status, .badge-order-id, .badge, .pref-tag { border-radius: 999px; letter-spacing: 0.01em; font-weight: 600; }

/* ---------- Footer: quiet, and it runs to the end of the page ---------- */
.site-footer, footer { letter-spacing: -0.006em; }
.footer-grid dt { letter-spacing: 0.04em; }
/* style.css keeps room under <body> for the WhatsApp button and the phone's home bar. Under
   the dark footer that room showed as a cream strip, and at the very bottom the button sat
   over the T&Cs / Admin links. The room now lives inside the footer's own colour. */
body:has(.site-footer) { padding-bottom: 0; }
body:has(.site-footer) .site-footer { padding-bottom: calc(28px + var(--sab, 0px)); }
body:has(.site-footer):has(.whatsapp-float) .site-footer { padding-bottom: calc(96px + var(--sab, 0px)); }

/* ---------- WhatsApp button: a round mark on phones ---------- */
/* As a wide pill it covered prices and links while scrolling (e.g. the first item's price
   on the Payment page). The words stay in the page for screen readers; the green mark is
   one everyone recognises. */
@media (max-width: 480px) {
  .whatsapp-float {
    width: 54px; height: 54px; padding: 0; gap: 0; justify-content: center;
    font-size: 0; border-radius: 50%;
  }
  .whatsapp-float svg { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
}
.whatsapp-float { transition: transform 0.35s var(--ap-ease), box-shadow 0.35s var(--ap-ease), background-color 0.2s ease; }
.whatsapp-float:active { transform: scale(0.94); transition-duration: 0.08s; }

/* ---------- Page entrance: one gentle, non-bouncy rise ---------- */
@keyframes ap-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero, .page-intro, .closed-card, .terms-card, .events-hero, .choice-grid, .order-type-grid {
  animation: ap-rise 0.6s var(--ap-ease) both;
}
/* Each order-form step, and each result, rises in as it appears (a CSS animation replays
   whenever an element goes from hidden to shown, so no script is involved). */
.form-step, #order-result-section, #unpaid-block-container, #lunch-success-container,
#term-success-container, .unpaid-block, .order-result-card {
  animation: ap-rise 0.45s var(--ap-ease) both;
}

/* ---------- Home page layout (UI audit phase B, 10 Oct 2026) ---------- */
/* Scoped to the home page: only it has the two choice cards (.choices). */

/* One column: the availability cards line up with the oven-arch cards below them
   (they were ~1030px wide over ~900px cards); the date card stays the hero's label. */
body:has(.choices) #availability-tracker,
body:has(.choices) #term-availability-tracker { max-width: 900px; margin-left: auto; margin-right: auto; }

/* One rhythm: hero → cards → footer, with no 110px drop before the footer. */
body:has(.choices) .hero { padding-bottom: 28px; }
body:has(.choices) .choices { padding: 12px 0 56px; }
body:has(.choices) .site-footer { margin-top: 0; }

/* Phones: the first screen shows the top of "I want to order" — the oven arch and its
   icon peek in under the availability card instead of starting off-screen. Same
   content, same order; just less air. */
@media (max-width: 600px) {
  body:has(.choices) .hero { padding: 26px 0 8px; }
  body:has(.choices) .hero-sub { margin-top: 14px; font-size: 1.02rem; }
  body:has(.choices) .service-notice { margin-top: 16px; padding: 12px 16px; }
  body:has(.choices) .availability-tracker { margin-top: 14px; padding: 18px 18px 16px; }
  body:has(.choices) .tracker-header { margin-bottom: 12px; }
  body:has(.choices) .progress-container { margin-bottom: 10px; }
  body:has(.choices) .tracker-disclaimer { margin-top: 12px; padding-top: 10px; }
  body:has(.choices) .tracker-deadline { margin-top: 10px; padding: 10px 12px; }
  body:has(.choices) .choices { padding: 8px 0 40px; }
}

/* ---------- Home page fluid layer (public/v2/apple/home.js) ---------- */
/* home.js adds .ap-motion to <html> only when motion is on, so without the script,
   with the owner's switch off, or under reduced motion, none of this applies. */

/* The script moves the cards itself (press via scale, lift via transform), so their own
   CSS transform transitions and hover/press transforms step aside. */
.ap-motion .choice-card {
  translate: 0 0;
  transition: box-shadow 0.5s var(--ap-ease), opacity 0.8s var(--ap-ease), translate 0.8s var(--ap-ease);
}
.ap-motion .choice-card:hover, .ap-motion .choice-card:active,
.ap-motion .payment-button:active { transform: none; }
.ap-motion .choice-grid > .choice-card:nth-child(2) { transition-delay: 0s, 90ms, 90ms; }

/* Below the first screen: waits just under its place, rises in as it scrolls into view. */
.ap-motion .site-footer .container { translate: 0 0; transition: opacity 0.8s var(--ap-ease), translate 0.8s var(--ap-ease); }
.ap-motion .ap-pending { opacity: 0; translate: 0 24px; }
@media print {   /* everything shows at once on paper, scrolled to or not */
  .ap-motion .choice-card, .ap-motion .site-footer .container { transition: none; }
  .ap-motion .ap-pending { opacity: 1; translate: 0 0; }
}

/* The header's hairline shows once the page has moved under it. */
.ap-motion .site-header { border-bottom-color: transparent; transition: border-color 0.3s ease; }
.ap-motion .site-header.ap-scrolled { border-bottom-color: var(--ap-hairline); }

/* ---------- Accessibility signals ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero, .page-intro, .closed-card, .terms-card, .events-hero, .choice-grid, .order-type-grid,
  .form-step, #order-result-section, #unpaid-block-container, #lunch-success-container,
  #term-success-container, .unpaid-block, .order-result-card { animation: none; }
  .btn:active, .btn-solid:active, .btn-outline:active, .choice-btn:active, .choice-card:active,
  .main-interest-button:active, .main-interest-submit:active, .lookup-submit:active,
  .event-card-btn:active, .step-next:active, .add-pizza-btn:active, .choice-radio:active,
  .whatsapp-float:active { transform: none; }
  .event-card:hover, .availability-tracker:hover, .order-type-card:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cream, #F7F3EC); }
}
@media (prefers-contrast: more) {
  :root { --ap-hairline: rgba(0, 0, 0, 0.5); }
  .site-header, .topbar { background: var(--cream, #F7F3EC); -webkit-backdrop-filter: none; backdrop-filter: none; }
  input, select, textarea { border-color: rgba(0, 0, 0, 0.6); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .topbar { background: var(--cream, #F7F3EC); }
}