/* =========================================================================
   polish.css — the fifty small things.

   Loaded last so it can settle defaults the component sheets do not own:
   selection, scrollbars, form-control resets, pressed states, and print.
   Nothing here introduces layout; if a rule in this file changes geometry
   it is in the wrong file.
   ========================================================================= */

/* =========================================================================
   SELECTION — branded, and readable. Bubblegum ground with cocoa text
   measures 5.93:1 — measured, not estimated. Hot pink would be ~2.4:1 and
   is a fill colour, never text.
   ========================================================================= */
/* background-COLOR, not the `background` shorthand. A shorthand whose value
   contains var() cannot be resolved at parse time, so the browser leaves
   every longhand empty and the declared colour is unreadable from the CSSOM
   — which made the contrast check silently score a fictional 21:1. */
::selection {
  background-color: var(--bubblegum);
  color: var(--cocoa);
  text-shadow: none;
}
::-moz-selection {
  background-color: var(--bubblegum);
  color: var(--cocoa);
}

/* =========================================================================
   SCROLLBARS
   Standard properties first so Firefox and modern Chromium take them; the
   -webkit- pseudo-elements are the fallback for older WebKit, which ignores
   scrollbar-color entirely.
   ========================================================================= */
html {
  scrollbar-color: var(--teal) rgba(var(--cocoa-rgb), .08);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(var(--cocoa-rgb), .06); }
::-webkit-scrollbar-thumb {
  background: var(--teal);
  border-radius: var(--r-pill);
  border: 2px solid var(--cream);
}
::-webkit-scrollbar-thumb:hover { background: var(--teal-deep); }

/* The assistant panel scrolls against teal, so it needs its own pair. */
.assistant__log {
  scrollbar-color: rgba(var(--cream-rgb), .5) transparent;
  scrollbar-width: thin;
}
.assistant__log::-webkit-scrollbar { width: 8px; }
.assistant__log::-webkit-scrollbar-track { background: transparent; }
.assistant__log::-webkit-scrollbar-thumb {
  background: rgba(var(--cream-rgb), .38);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* =========================================================================
   FORM CONTROLS — no default chrome anywhere.
   A single unstyled <select> in an otherwise designed form is the tell that
   nobody looked at the page on Windows.
   ========================================================================= */
input, select, textarea, button {
  font: inherit;
  color: inherit;
  border-radius: var(--r-pill);
}
select {
  appearance: none;
  -webkit-appearance: none;
  /* The arrow, drawn rather than inherited, so it matches the palette.
     background-image only — no layout, no extra element. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235C3521' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}
textarea { border-radius: var(--r-md); resize: vertical; }

/* Chromium autofill paints its own yellow. The inset shadow trick is the
   only way to override it without !important on background-color. */
input:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--cocoa);
  box-shadow: 0 0 0 100px var(--cream) inset;
}

input::placeholder, textarea::placeholder {
  color: rgba(var(--cocoa-rgb), .52);   /* 4.6:1 on cream */
  opacity: 1;                            /* Firefox dims placeholders */
}

/* =========================================================================
   FOCUS — one ring everywhere, never the browser default.
   The ink ring carries the signal (17.44:1 on cream); the hot-pink halo is
   decorative reinforcement and must never be the only indicator.
   ========================================================================= */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-sm);
}

/* =========================================================================
   PRESSED STATES
   Hover says "this is live", pressed says "I registered that". A control
   with only a hover state feels unresponsive on the click itself, and on
   touch — where there is no hover at all — it feels like nothing happened.
   ========================================================================= */
.btn:active,
.chip:active,
.card__cta:active,
button:active:not(:disabled) {
  transform: translateY(1px) scale(.985);
  transition-duration: 90ms;      /* the press must feel instant */
}
a:active { transition-duration: 90ms; }

/* =========================================================================
   HOVER GAPS
   Found by auditing every interactive element against the stylesheets
   rather than by looking: the skip link, the nav logo, the footer phone
   number, the giant footer wordmark and any bare <a> had focus states but
   no hover, so they were live and did not say so.
   ========================================================================= */
.skip-link:hover { background: var(--teal-deep); color: var(--cream); }

.nav__logo:hover .logo-badge { background: var(--teal); }
.logo-badge { transition: background-color var(--dur-control) var(--ease-out); }

.footer__tel:hover,
.intro__tel:hover { text-decoration-thickness: 2.5px; }

.footer__wordmark-btn:hover { color: var(--bubblegum); }
.footer__wordmark-btn { transition: color var(--dur-control) var(--ease-out), opacity .5s var(--ease-out); }

/* Any link not covered by a component rule still gets a visible change. */
a:hover { text-underline-offset: 4px; }

/* Text fields: hover is a hint that the field is live, focus is the state. */
input:hover:not(:disabled),
textarea:hover:not(:disabled),
select:hover:not(:disabled) { border-color: rgba(var(--cocoa-rgb), .38); }

/* =========================================================================
   DURATIONS BY SIZE — see the token comments. Applied here rather than
   edited into a dozen component rules.
   ========================================================================= */
.btn, .chip, .nav__link, .hero__dot, .footer__tile, .card__tag {
  transition-duration: var(--dur-control);
}
.card, .bundle, .review, .location__card {
  transition-duration: var(--dur-card);
}

/* =========================================================================
   NOTHING MOVES ON HOVER UNLESS IT IS CLICKABLE.
   Decorative lift on a non-interactive block reads as a broken link.
   ========================================================================= */
.card:not(a):not(:has(a)):hover { translate: none; box-shadow: var(--shadow-card); }

/* =========================================================================
   PRINT
   A menu is the one page people genuinely print. Strip the chrome, drop the
   backgrounds, and let the URLs be readable on paper.
   ========================================================================= */
@media print {
  @page { margin: 14mm; }

  html, body { background: #fff !important; color: #000 !important; }

  /* Everything that exists only to move, hover, or float. */
  .preloader, .nav, .assistant, #totop, .cursor, .cursor-ring, .crumb,
  .marquee, .arc, .hero__dots, .hero__cue, .hero__badge, .menu-overlay,
  .newsletter, .footer__confetti, .page-wipe, .menu__filters,
  .footer__wordmark { display: none !important; }

  /* The hero is a full-viewport photograph; on paper it is a wasted page. */
  .hero { height: auto !important; min-height: 0 !important; position: static !important; }
  .hero__slides { display: none !important; }
  .hero__content { padding: 0 !important; }
  .hero__title, .hero__script { color: #000 !important; }

  .section { padding-block: 8mm !important; }
  .after-hero { background: #fff !important; }

  /* Cards must not break across pages mid-price. */
  .card, .bundle, .review, .story__step { break-inside: avoid; page-break-inside: avoid; }
  .menu__grid { display: block !important; }
  .card { border: 1px solid #999 !important; box-shadow: none !important; margin-bottom: 6mm; }
  .card__media { display: none !important; }

  /* Reveal the destination of every link that is not obvious. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  a[href^="#"]::after, a[href^="tel:"]::after, a[href^="mailto:"]::after { content: ""; }

  /* Anything pre-hidden by the reveal system must print regardless — the
     failsafe never runs if the page is printed before it fires. */
  [data-anim], .cards-gate .card { opacity: 1 !important; transform: none !important; }
}