/* =========================================================================
   The Last Batch — design system
   Tokens live here; Tailwind utilities in the markup reference them via the
   theme extension in inc/header.php. Nothing brand-specific is hard-coded
   anywhere else.
   ========================================================================= */

:root {
  --tlb-orange:        #F26522;
  --tlb-orange-dark:   #D3521A;
  --tlb-orange-soft:   #FFF1E8;
  --tlb-ink:           #17181A;
  --tlb-ink-soft:      #55585E;
  --tlb-cream:         #FBF6EF;
  --tlb-cream-deep:    #F4EDE3;
  --tlb-night:         #121316;
  --tlb-line:          rgba(23, 24, 26, .10);
}

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }

body {
  background: var(--tlb-cream);
  color: var(--tlb-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Handwriting -------------------------------------------------------- */
.script      { font-family: 'Caveat Brush', 'Caveat', cursive; font-weight: 400; line-height: .95; }
.script-note { font-family: 'Caveat', cursive; font-weight: 700; line-height: 1.05; }

/* --- Brush underline under a word --------------------------------------- */
.brushed { position: relative; display: inline-block; }
.brushed::after {
  content: '';
  position: absolute;
  left: -.04em; right: -.04em; bottom: -.12em;
  height: .18em;
  border-radius: 50%;
  background: var(--tlb-orange);
  transform: rotate(-1.1deg);
  opacity: .92;
}
.brushed--thin::after { height: .1em; bottom: -.02em; }

/* --- Section label ------------------------------------------------------ */
.eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tlb-orange);
}

/* --- Contour-map texture behind pale sections --------------------------- */
.topo {
  background-image:
    radial-gradient(ellipse 60% 40% at 12% 22%, rgba(242,101,34,.055), transparent 60%),
    radial-gradient(ellipse 50% 40% at 88% 78%, rgba(242,101,34,.045), transparent 60%);
}

/* --- Destination card --------------------------------------------------- */
.dest-card { position: relative; overflow: hidden; border-radius: 1.25rem; isolation: isolate; }
.dest-card img { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.dest-card:hover img,
.dest-card:focus-within img { transform: scale(1.08); }
.dest-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.92) 4%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.12) 78%);
  pointer-events: none;
}
/* z-index only — never re-declare `position`, Tailwind's `absolute` owns it */
.dest-card > .dest-body { z-index: 2; }

/* --- Polaroid ----------------------------------------------------------- */
.polaroid {
  background: #fff;
  padding: .6rem .6rem 2.1rem;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.42);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.polaroid:hover { transform: rotate(0deg) scale(1.05) !important; z-index: 20; box-shadow: 0 22px 48px -14px rgba(0,0,0,.5); }
.polaroid img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Ranges / marquee --------------------------------------------------- */
/* Horizontal scrollers. `contain: paint` is load-bearing: without it Chrome
   counts the scroller's off-screen content toward the ROOT scrollable width,
   which produces a phantom page-level horizontal scrollbar. */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; contain: paint; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; border-radius: 999px;
  padding: .8rem 1.5rem; line-height: 1;
  transition: transform .2s, background-color .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--tlb-orange); color: #fff; box-shadow: 0 10px 24px -10px rgba(242,101,34,.85); }
.btn-primary:hover { background: var(--tlb-orange-dark); }
.btn-ghost { border: 1.5px solid var(--tlb-line); color: var(--tlb-ink); background: transparent; }
.btn-ghost:hover { border-color: var(--tlb-ink); }
.btn-light { background: #fff; color: var(--tlb-ink); }

/* --- Accordion ---------------------------------------------------------- */
details.faq > summary { list-style: none; cursor: pointer; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq[open] .faq-chevron { transform: rotate(45deg); }
.faq-chevron { transition: transform .25s; }

/* --- Reveal on scroll --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .polaroid, .dest-card img, .btn { transition: none; }
}

/* --- Scrollbar ---------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tlb-cream-deep); }
::-webkit-scrollbar-thumb { background: #cdbfae; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--tlb-orange); }

/* --- Selection ---------------------------------------------------------- */
::selection { background: var(--tlb-orange); color: #fff; }

/* --- Prose (legal pages) ------------------------------------------------ */
.prose-tlb h2 { font-size: 1.25rem; font-weight: 700; margin: 2.25rem 0 .75rem; color: var(--tlb-ink); }
.prose-tlb h3 { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 .5rem; color: var(--tlb-ink); }
.prose-tlb p  { margin-bottom: 1rem; color: var(--tlb-ink-soft); line-height: 1.75; }
.prose-tlb ul { margin: 0 0 1.25rem; padding-left: 1.15rem; list-style: disc; color: var(--tlb-ink-soft); }
.prose-tlb li { margin-bottom: .5rem; line-height: 1.7; }
.prose-tlb a  { color: var(--tlb-orange); text-decoration: underline; text-underline-offset: 3px; }
.prose-tlb strong { color: var(--tlb-ink); font-weight: 600; }