/*
 * Hit The Theatre — design tokens (#73)
 *
 * Colour, type and layout tokens shared by the header, footer and
 * homepage. The accent is deliberately a single custom property
 * (`--htt-accent`) so a colour change is one line — see issue #73 §1.
 *
 * Components read ONLY the tokens below, never a literal hex value.
 * See docs/tasks/73-homepage-redesign-header-footer.md §1 and §4.1.
 */

:root {
  /* ---- colour ---- */
  --htt-header: #2B2229; /* header + footer background — a warm dark plum brown, deliberately not black (issue #73 §1) */
  --htt-ink: #16131A; /* main text */
  --htt-ink-2: #4A4450; /* secondary text on light backgrounds */
  --htt-muted: #6B6270; /* venue names, small print */
  --htt-on-dark-muted: #B9ADB3; /* secondary text in the header/footer */
  --htt-sand: #F4F1EE; /* hero, "Not sure what to see?" backgrounds */
  --htt-white: #FFFFFF; /* page background, cards */
  --htt-rule: #E6E1DD; /* borders and dividers */

  /* THE one accent variable — see issue #73 §1: changing this alone must
     recolour every button, link, price and phone number. */
  --htt-accent: #7A1F2B;
  --htt-accent-hover: #5E1621;
  --htt-accent-soft: #F6E7E9; /* offer badge background (badge text is --htt-accent) */

  --htt-focus-on-dark: #E7A0A9; /* focus ring in the header and footer */
  --htt-open: #2E9E5B; /* the "Open now" dot */
  --htt-closed-dot: #9A9098; /* the "Closed now" dot */
  --htt-star: #F5B942; /* accent for the footer's "All theatres" link */

  /* derived surfaces, not named directly in the issue but present in the
     approved mock-up — never hard-code these values in a component. */
  --htt-on-dark-rule: rgba(255, 255, 255, 0.12);
  --htt-chip-border: #D9D2CC;
  --htt-panel-border: #E1DAD4;
  --htt-accent-border: #EFC9CE; /* border for accent-soft pills and badges */
  --htt-scrim: rgba(22, 19, 26, 0.82); /* labels laid over a card image */
  --htt-sand-lift: #FDFBF7; /* the lightest parchment, top of the hero wash */

  /* Secondary label tones. These exist ONLY for .htt-eyebrow/.htt-badge
     variants — the accent stays the one colour that drives buttons,
     links, prices and the phone number (issue #73 §1). */
  --htt-amber: #92400E;
  --htt-amber-soft: #FDF3E7;
  --htt-amber-border: #FBD9A8;
  --htt-emerald: #065F46;
  --htt-emerald-soft: #ECFDF5;
  --htt-emerald-border: #A7F3D0;

  /* ---- type ---- */
  --htt-font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Display serif for h1/h2 — the "West End heritage" voice. A system
     stack on purpose: the page still makes no Google Fonts request and
     ships no second font file. Self-hosting a serif later is a one-line
     change here, exactly like --htt-accent. */
  --htt-font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif;

  /* ---- elevation ---- */
  --htt-shadow-subtle: 0 1px 2px rgba(22, 19, 26, 0.05), 0 2px 10px rgba(22, 19, 26, 0.05);
  --htt-shadow-panel: 0 10px 30px -6px rgba(122, 31, 43, 0.10), 0 6px 18px -8px rgba(22, 19, 26, 0.08);
  --htt-shadow-hover: 0 18px 34px -10px rgba(122, 31, 43, 0.18), 0 8px 16px -8px rgba(22, 19, 26, 0.10);

  /* ---- radius ---- */
  /* Chrome heights, so anything that has to clear the sticky header adds
     them up instead of hard-coding a pixel offset (see
     .htt-sticky-below-chrome). --htt-header is 60px per issue #73 §3. */
  --htt-header-height: 60px;
  --htt-context-bar-height: 60px;

  --htt-radius: 10px; /* cards, tiles */
  --htt-radius-lg: 14px; /* nested panels */
  --htt-radius-xl: 18px; /* the hero search card, the call card */
  --htt-radius-search: 12px; /* the hero search box */
  --htt-radius-pill: 999px; /* chips, the phone pill */

  /* ---- layout ---- */
  --htt-gutter: 16px;
  --htt-max: 1200px;
}

@media (min-width: 768px) {
  :root {
    --htt-gutter: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --htt-gutter: 32px;
  }
}

/* ---------- type: Archivo, self-hosted, one variable file ---------- */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-variable.woff2') format('woff2-variations'),
       url('../fonts/archivo-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* #73 §1: "Body text is 'wdth' 100, weight 400" — the homepage's own body
   still falls back to whatever loads after this stylesheet (public/css/fonts.css's
   Roboto, until removed from layouts/homepage.blade.php — see T14 #11) unless a
   surface claims Archivo explicitly. Scoped to body.htt-homepage so this never
   touches guest/checkout pages, which are out of #73's scope.

   The `*` descendant selectors below matter, not just belt-and-braces: Tailwind's
   own preflight (resources/css/app.css, loaded AFTER this file) sets
   `html, body * { font-family: "Roboto", system-ui, sans-serif }`. That's a
   real matching rule on every element, not an inherited value, so any .htt-*
   component that doesn't declare its own font-family silently loses to it
   regardless of load order — CSS inheritance never wins against a competing
   rule, only specificity does. `.htt-header *` / `.htt-footer *` / a class
   selector beat the plain-element `body *`, so this one rule fixes every
   current and future .htt-* text node in these three surfaces at once,
   instead of requiring every component to remember to re-declare Archivo
   itself (confirmed necessary by a live Playwright check — .htt-card__title,
   .htt-feature__title, .htt-tile b and .htt-faq__list summary were all still
   rendering the browser's system-ui fallback despite --htt-font being the
   intended default, exactly because they had no font-family of their own). */
body.htt-homepage,
body.htt-homepage *,
.htt-header,
.htt-header *,
.htt-footer,
.htt-footer * {
  font-family: var(--htt-font);
}

body.htt-homepage {
  font-variation-settings: 'wdth' 100;
}

/* ---------- shared layout primitives ---------- */

/* Sticky footer. On a short page — /search-shows?offer=1 with one result,
   an empty category, a 404 — the document ended above the fold and the
   white <html> background showed as a band under the footer.

   `.htt-page` is set by layouts/base.blade.php, so this is scoped to the
   pages that actually render the shared chrome and never touches the
   Filament admin, which lays its own <body> out. A body class rather than
   `body:has(> .htt-footer)`: same result without depending on :has().

   `100dvh` after `100vh` as a progressive override: on mobile Safari
   100vh is the *expanded* viewport, which would push the footer a
   toolbar's height below the fold on every short page — the opposite of
   the bug being fixed. */
.htt-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* margin-top:auto on the footer would do the job on its own; growing
   <main> as well is what keeps a short page's empty area the page's own
   background rather than a gap between two elements. */
.htt-page > main {
  flex: 1 0 auto;
}

.htt-page > .htt-footer {
  flex: none;
  margin-top: auto;
}

.htt-wrap {
  max-width: var(--htt-max);
  margin: 0 auto;
  padding-inline: var(--htt-gutter);
}

.htt-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- reusable primitives ----------
   Four building blocks the sections share, so a new band on any page is
   assembled from these rather than given its own one-off rules:
     .htt-eyebrow  small uppercase label above a heading (or a pill)
     .htt-btn      every call to action
     .htt-panel    the white elevated surface
     .htt-badge    small label, including the ones laid over a card image
   Tone modifiers (--amber/--emerald/--ink) are the only place a colour
   other than the accent appears. */

.htt-eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  font-family: var(--htt-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--htt-accent);
}

.htt-eyebrow--amber {
  color: var(--htt-amber);
}

.htt-eyebrow--emerald {
  color: var(--htt-emerald);
}

.htt-eyebrow--muted {
  color: var(--htt-muted);
}

.htt-eyebrow--pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--htt-radius-pill);
  border: 1px solid var(--htt-accent-border);
  background: var(--htt-accent-soft);
  letter-spacing: 0.05em;
}

.htt-eyebrow--pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.htt-eyebrow--pill.htt-eyebrow--amber {
  border-color: var(--htt-amber-border);
  background: var(--htt-amber-soft);
}

/* the pill on an --htt-ink band (the footer newsletter) */
.htt-eyebrow--on-dark {
  color: var(--htt-focus-on-dark);
  border-color: var(--htt-on-dark-rule);
  background: rgba(255, 255, 255, 0.06);
}

.htt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 9px;
  font: 700 15px/1 var(--htt-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* The modifiers are chained (.htt-btn.htt-btn--x) on purpose. Tailwind's
   preflight in app.css sets `background-color: transparent` on
   button/[type=submit] at the same specificity as a single class, and it
   loads after this file — a lone .htt-btn--primary would lose the
   cascade and paint transparent. */
.htt-btn.htt-btn--primary {
  background: var(--htt-accent);
  color: var(--htt-white);
}

.htt-btn.htt-btn--primary:hover {
  background: var(--htt-accent-hover);
}

.htt-btn.htt-btn--soft {
  background: var(--htt-accent-soft);
  color: var(--htt-accent);
}

.htt-btn.htt-btn--soft:hover {
  background: var(--htt-accent);
  color: var(--htt-white);
}

.htt-btn.htt-btn--outline {
  background: var(--htt-white);
  color: var(--htt-ink);
  border-color: var(--htt-chip-border);
}

.htt-btn.htt-btn--outline:hover {
  border-color: var(--htt-accent);
  color: var(--htt-accent);
}

.htt-btn.htt-btn--light {
  background: var(--htt-white);
  color: var(--htt-ink);
}

.htt-btn.htt-btn--light:hover {
  background: var(--htt-sand);
}

.htt-btn--sm {
  min-height: 36px;
  padding: 0 13px;
  font-size: 13px;
  border-radius: 8px;
}

/* <x-htt.icon> renders a viewBox-only SVG, so anything placing one
   inside a button or badge has to give it a size. */
.htt-btn__icon {
  width: 17px;
  height: 17px;
  flex: none;
}

.htt-badge__icon {
  width: 13px;
  height: 13px;
  flex: none;
}

.htt-panel {
  background: var(--htt-white);
  border: 1px solid var(--htt-panel-border);
  border-radius: var(--htt-radius-xl);
  box-shadow: var(--htt-shadow-panel);
}

.htt-panel--sand {
  background: var(--htt-sand);
  box-shadow: none;
}

.htt-panel--flat {
  box-shadow: var(--htt-shadow-subtle);
}

.htt-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  font: 700 11.5px/1.55 var(--htt-font);
  background: var(--htt-accent-soft);
  color: var(--htt-accent);
  border-color: var(--htt-accent-border);
}

.htt-badge--amber {
  background: var(--htt-amber-soft);
  color: var(--htt-amber);
  border-color: var(--htt-amber-border);
}

.htt-badge--emerald {
  background: var(--htt-emerald-soft);
  color: var(--htt-emerald);
  border-color: var(--htt-emerald-border);
}

.htt-badge--ink {
  background: var(--htt-scrim);
  color: var(--htt-white);
  border-color: transparent;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* ---------- focus ---------- */

/* Issue #73 §7: never accent text on ink (fails contrast) — the ink-side
   focus ring uses --htt-focus-on-dark instead of --htt-accent, on every
   --htt-header/--htt-ink surface: the header, the footer, the mobile
   drawer. */
:focus-visible {
  outline: 3px solid var(--htt-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.htt-header :focus-visible,
.htt-footer :focus-visible,
.htt-drawer :focus-visible {
  outline-color: var(--htt-focus-on-dark);
}

/* ---------- logo (#73 T2 — components/logo.blade.php) ---------- */

.htt-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex: none;
  color: inherit;
}

/* The mark reads on both surfaces it sits on — the light header and the
   ink footer — so it is accent-filled in both, not surface-dependent. */
.htt-logo__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--htt-accent);
  color: var(--htt-white);
  display: grid;
  place-items: center;
  font-family: var(--htt-font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
}

.htt-logo__word {
  font-family: var(--htt-font);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.htt-logo img {
  display: block;
  height: 44px;
  width: auto;
}

.htt-logo--footer img {
  height: 38px;
}

/* ---------- nav links (#73 T3 — components/htt/nav-links.blade.php) ---------- */

.htt-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
}

.htt-nav-links--column {
  flex-direction: column;
  gap: 0;
}

.htt-nav-links__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  font-family: var(--htt-font);
  font-weight: 500;
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 6px;
  min-height: 44px;
  line-height: 28px; /* 44px target with the 8px vertical padding above */
}

/* The one nav item pulled out of the set ("All shows"). The header and
   the drawer are both --htt-header dark surfaces, so both use the
   on-dark tint — issue #73 §7: "Never accent text on --htt-header." */
.htt-nav-links__link--accent {
  font-weight: 700;
}

.htt-header .htt-nav-links__link--accent,
.htt-drawer .htt-nav-links__link--accent {
  color: var(--htt-focus-on-dark);
}

/* the small "Save" pill beside Offers */
.htt-nav-links__badge {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--htt-accent-soft);
  color: var(--htt-accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.htt-nav-links__link:hover {
  background: rgba(255, 255, 255, 0.07);
}

/* ---------- phone link (#73 T3 — components/htt/phone-link.blade.php) ---------- */

.htt-phone-link {
  text-decoration: none;
  color: inherit;
  font-family: var(--htt-font);
}

.htt-phone-link--pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--htt-radius-pill);
  border: 1px solid var(--htt-on-dark-rule);
  min-height: 44px;
}

.htt-phone-link--pill svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.htt-phone-link__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.htt-phone-link__text small {
  font-size: 11px;
  color: var(--htt-on-dark-muted);
  font-weight: 500;
}

.htt-phone-link__text strong {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.htt-phone-link--icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.htt-phone-link--icon:hover {
  background: rgba(255, 255, 255, 0.07);
}

.htt-phone-link--icon svg {
  width: 22px;
  height: 22px;
}

.htt-phone-link--big {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: var(--htt-phone-link-big-size, 26px);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.htt-phone-link--big svg {
  width: 24px;
  height: 24px;
  color: var(--htt-accent);
}

.htt-phone-link--inline {
  font-weight: 700;
}

/* ---------- header (#73 T3 — components/site-header.blade.php) ---------- */

.htt-header {
  background: var(--htt-header);
  color: var(--htt-white);
  border-bottom: 1px solid var(--htt-on-dark-rule);
  position: sticky;
  top: 0;
  z-index: 20;
  font-family: var(--htt-font);
  font-variation-settings: 'wdth' 100;
}

.htt-header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--htt-header-height);
}

/* Nav links, the phone pill and icon buttons are shared with the mobile
   drawer, which is also a dark surface, so both fall back to those
   components' own default (dark-appropriate) rules — the .htt-nav-links__link
   hover, .htt-phone-link--icon colour/hover and .htt-phone-link--pill's
   border-only base style all already read correctly on --htt-header
   without a header-specific override. */
.htt-header .htt-phone-link--pill:hover {
  background: var(--htt-accent);
  border-color: var(--htt-accent);
}

.htt-header__nav {
  display: none;
  margin-left: 18px;
}

.htt-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.htt-header__phone-pill {
  display: none;
}

@media (min-width: 1024px) {
  .htt-header__nav {
    display: flex;
  }

  .htt-header__phone-pill {
    display: inline-flex;
  }

  .htt-header__phone-icon,
  .htt-header__menu-toggle {
    display: none;
  }
}

/* ---------- booking context bar (#73 T15 — components/htt/booking-context-bar.blade.php) ----------

   The strip under the shared header on the three booking-funnel layouts.
   Light surface on purpose: it sits directly below --htt-header, and two
   dark bands stacked read as one 120px-tall header rather than as chrome
   plus context. --htt-rule underneath separates it from the page. */

.htt-context-bar {
  background: var(--htt-white);
  border-bottom: 1px solid var(--htt-rule);
  font-family: var(--htt-font);
  font-variation-settings: 'wdth' 100;
}

.htt-context-bar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--htt-context-bar-height);
  padding-block: 8px;
}

.htt-context-bar__poster {
  flex: none;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--htt-radius);
  overflow: hidden;
}

.htt-context-bar__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.htt-context-bar__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Rendered as an <h1> on find-tickets and the seat plan — reset the
   heading defaults rather than inherit the page's h1 scale, which would
   dwarf the 60px bar. */
.htt-context-bar__show {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  font-variation-settings: 'wdth' 80;
  line-height: 1.25;
  color: var(--htt-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.htt-context-bar__show a {
  color: inherit;
  text-decoration: none;
}

.htt-context-bar__show a:hover {
  color: var(--htt-accent);
}

.htt-context-bar__venue {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--htt-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.htt-context-bar__when {
  flex: none;
  margin: 0;
  padding-left: 12px;
  border-left: 1px solid var(--htt-rule);
  font-size: 13px;
  color: var(--htt-ink-2);
  text-align: right;
}

.htt-context-bar__when-date {
  display: block;
  font-weight: 700;
}

.htt-context-bar__when-time {
  display: block;
  color: var(--htt-muted);
}

.htt-context-bar__change {
  flex: none;
}

/* For a page's own sticky element that has to clear the chrome — the seat
   plan's basket panel, which was `xl:sticky xl:top-4` against the top of
   the viewport and would now sit behind the sticky header. A class rather
   than an arbitrary Tailwind value so it needs no asset rebuild, and one
   sum rather than a magic number so it follows the chrome's height. */
.htt-sticky-below-chrome {
  top: calc(var(--htt-header-height) + var(--htt-context-bar-height) + 16px);
}

/* Phone: the poster and the date/time are the first things to go — the
   show name and the way back to the date picker are what matter mid-
   booking, and the bar has to stay one line (issue #73 §2: nothing
   scrolls sideways at any width). */
@media (max-width: 767px) {
  .htt-context-bar__poster,
  .htt-context-bar__when {
    display: none;
  }

  .htt-context-bar__change {
    min-height: 44px;
    padding: 0 12px;
    font-size: 13px;
  }
}

/* ---------- search panel (part of site-header.blade.php) ---------- */

.htt-search-panel {
  background: var(--htt-white);
  color: var(--htt-ink);
  border-bottom: 1px solid var(--htt-rule);
}

.htt-search-panel__inner {
  padding-block: 16px;
}

.htt-search-panel__form {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--htt-white);
  border: 1px solid var(--htt-chip-border);
  border-radius: var(--htt-radius-search);
  padding: 6px;
}

.htt-search-panel__form:focus-within {
  box-shadow: 0 0 0 3px var(--htt-accent);
}

.htt-search-panel__form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: 500 16px var(--htt-font);
  color: var(--htt-ink);
  padding: 10px;
}

.htt-search-panel__form input::placeholder {
  color: var(--htt-muted);
}

.htt-search-panel__form input:focus {
  outline: none;
}

.htt-search-panel__submit,
.htt-search-panel__close {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* chained for the same preflight reason as .htt-btn above */
.htt-search-panel__form .htt-search-panel__submit {
  background: var(--htt-accent);
  color: var(--htt-white);
}

.htt-search-panel__form .htt-search-panel__submit:hover {
  background: var(--htt-accent-hover);
}

.htt-search-panel__close {
  background: transparent;
  color: var(--htt-ink);
}

.htt-search-panel__close:hover {
  background: var(--htt-sand);
}

.htt-search-panel__results {
  margin-top: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.htt-search-panel__error {
  color: var(--htt-accent);
  padding: 8px 4px;
  margin: 0;
}

/* ---------- mobile drawer (part of site-header.blade.php) ---------- */

.htt-drawer {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(22, 19, 26, 0.6);
}

.htt-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--htt-header);
  color: var(--htt-white);
  padding: 16px;
  overflow-y: auto;
  font-family: var(--htt-font);
}

.htt-drawer__header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.htt-drawer .htt-nav-links__link {
  font-size: 17px;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.htt-drawer__phone {
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .htt-drawer {
    display: none;
  }
}

/* ---------- newsletter form (#73 T4 — components/htt/newsletter-form.blade.php) ---------- */

.htt-newsletter {
  font-family: var(--htt-font);
}

.htt-newsletter__heading {
  margin: 0 0 8px;
  font-family: var(--htt-font);
  font-weight: 800;
  font-variation-settings: 'wdth' 80;
  font-size: clamp(22px, 3.4vw, 30px);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.htt-newsletter__line {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.55;
}

.htt-newsletter__fine {
  margin: 12px 0 0;
  font-size: 12px;
}

.htt-newsletter--dark .htt-newsletter__fine {
  color: var(--htt-on-dark-muted);
}

.htt-newsletter--light .htt-newsletter__fine {
  color: var(--htt-muted);
}

/* centred treatment, used by the footer band */
.htt-newsletter--center {
  text-align: center;
}

.htt-newsletter--center .htt-newsletter__line,
.htt-newsletter--center .htt-newsletter-form {
  margin-inline: auto;
}

.htt-newsletter--center .htt-newsletter__line {
  max-width: 54ch;
}

.htt-newsletter--center .htt-newsletter-form {
  max-width: 520px;
}

.htt-newsletter--dark {
  color: var(--htt-white);
}

.htt-newsletter--dark .htt-newsletter__line {
  color: var(--htt-on-dark-muted);
}

.htt-newsletter--light {
  color: var(--htt-ink);
}

.htt-newsletter--light .htt-newsletter__line {
  color: var(--htt-ink-2);
}

.htt-newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.htt-newsletter-form__input {
  flex: 1 1 220px;
  min-height: 48px;
  border-radius: 8px;
  font: 16px var(--htt-font);
  padding: 0 14px;
}

.htt-newsletter--dark .htt-newsletter-form__input {
  border: 1px solid var(--htt-on-dark-rule);
  background: rgba(255, 255, 255, 0.06);
  color: var(--htt-white);
}

.htt-newsletter--dark .htt-newsletter-form__input::placeholder {
  color: var(--htt-on-dark-muted);
}

.htt-newsletter--light .htt-newsletter-form__input {
  border: 1px solid var(--htt-chip-border);
  background: var(--htt-white);
  color: var(--htt-ink);
}

.htt-newsletter--light .htt-newsletter-form__input::placeholder {
  color: var(--htt-muted);
}

.htt-newsletter-form__submit {
  min-height: 48px;
  border-radius: 8px;
  border: 0;
  font: 700 16px var(--htt-font);
  padding: 0 20px;
  cursor: pointer;
}

.htt-newsletter--dark .htt-newsletter-form__submit {
  background: var(--htt-white);
  color: var(--htt-ink);
}

.htt-newsletter--light .htt-newsletter-form__submit {
  background: var(--htt-accent);
  color: var(--htt-white);
}

.htt-newsletter--light .htt-newsletter-form__submit:hover {
  background: var(--htt-accent-hover);
}

.htt-newsletter-form__status {
  flex-basis: 100%;
  margin: 0;
  font-size: 14px;
}

/* ---------- footer (#73 T4 — components/htt/site-footer.blade.php) ---------- */

.htt-footer {
  background: var(--htt-header);
  color: var(--htt-white);
  font-family: var(--htt-font);
  font-variation-settings: 'wdth' 100;
}

.htt-footer a {
  text-decoration: none;
  color: inherit;
}

.htt-footer a:hover {
  text-decoration: underline;
}

.htt-footer__newsletter {
  border-bottom: 1px solid var(--htt-on-dark-rule);
  padding-block: 44px;
}

.htt-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 20px;
  padding-block: 32px;
}

@media (min-width: 1024px) {
  .htt-footer__cols {
    grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
  }
}

.htt-footer__col--brand {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .htt-footer__col--brand {
    grid-column: auto;
  }
}

.htt-footer__col--brand p {
  margin: 12px 0 0;
  color: var(--htt-on-dark-muted);
  font-size: 15px;
  max-width: 32ch;
}

.htt-footer__phone {
  display: inline-block;
  margin-top: 10px;
}

.htt-footer__hours {
  margin-top: 4px !important;
  font-size: 14px;
}

.htt-footer__col h3 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--htt-on-dark-muted);
  font-weight: 600;
}

.htt-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.htt-footer__col li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
}

/* the "All theatres →" link that closes the Theatres column */
.htt-footer__all-link {
  color: var(--htt-star);
  font-weight: 600;
}

.htt-footer__legal {
  border-top: 1px solid var(--htt-on-dark-rule);
}

.htt-footer__star {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--htt-on-dark-rule);
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--htt-on-dark-muted);
}

.htt-footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
  font-size: 13px;
  color: var(--htt-on-dark-muted);
}

.htt-footer__social {
  display: flex;
  gap: 14px;
}

.htt-footer__social a {
  color: var(--htt-on-dark-muted);
  display: flex;
}

.htt-footer__social a:hover {
  color: var(--htt-white);
}

.htt-footer__social svg {
  width: 20px;
  height: 20px;
}

.htt-footer__pay {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.htt-footer__pay svg {
  width: 32px;
  height: 22px;
  border: 1px solid var(--htt-on-dark-rule);
  border-radius: 4px;
}

/* ---------- card + grid (#73 T5 — components/htt/card.blade.php, card-grid.blade.php) ---------- */

.htt-card-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .htt-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

/* A listing of horizontal cards is a single column at every width — the
   card itself is already image-beside-text. */
.htt-card-grid--horizontal {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .htt-card-grid--horizontal {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

/* Venue cards carry more text (address, capacity, a CTA) than a show
   card, so they stay one column narrower than the base grid at each
   breakpoint — 1/2/3-across rather than 2/4-across. */
.htt-card-grid--venues {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .htt-card-grid--venues {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .htt-card-grid--venues {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

.htt-card {
  display: flex;
  flex-direction: column;
  background: var(--htt-white);
  border: 1px solid var(--htt-rule);
  border-radius: var(--htt-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  font-family: var(--htt-font);
  box-shadow: var(--htt-shadow-subtle);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.htt-card:hover {
  transform: translateY(-3px);
  border-color: var(--htt-panel-border);
  box-shadow: var(--htt-shadow-hover);
}

.htt-card__img {
  aspect-ratio: 3 / 2;
  background: #DDD7D2;
  position: relative;
  overflow: hidden;
}

.htt-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.htt-card:hover .htt-card__img img {
  transform: scale(1.05);
}

/* offer / opening-date labels, stacked down the top-left corner */
.htt-card__tags {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: calc(100% - 20px);
}

/* the theatre name, bottom-right over the image */
.htt-card__venue-chip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.htt-card__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  background: var(--htt-accent);
}

.htt-card__fallback span {
  color: var(--htt-white);
  font-weight: 800;
  font-size: clamp(18px, 4.6vw, 24px);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.htt-card__body {
  padding: 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.htt-card__title {
  margin: 0;
  font-family: var(--htt-font);
  font-size: clamp(15px, 3.9vw, 17px);
  font-weight: 700;
  font-variation-settings: 'wdth' 92;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--htt-ink);
}

.htt-card:hover .htt-card__title {
  color: var(--htt-accent);
}

.htt-card__venue {
  margin: 0 0 11px;
  font-size: clamp(12.5px, 3.4vw, 13.5px);
  color: var(--htt-muted);
}

/* price on the left, the call to action on the right, over a hairline.
   margin-top stays `auto` so the row sits on the card's baseline and
   lines up across a grid row whatever the title/venue wrap to. */
.htt-card__meta {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--htt-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.htt-card__from {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.htt-card__from small {
  font-size: 10.5px;
  color: var(--htt-muted);
  letter-spacing: 0.01em;
}

.htt-card__from b {
  font-size: 18px;
  color: var(--htt-ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.htt-card__cta {
  flex: none;
}

.htt-card__from--unpriced {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--htt-ink-2);
}

.htt-card__status {
  font-size: 12px;
}

/* ---- sale status (#65/#66) ---- */

/* A closed show stays legible but visibly inactive: the image is muted
   rather than the card being hidden, because these still rank and still
   get linked to. */
.htt-card--closed .htt-card__img img {
  filter: grayscale(1);
  opacity: 0.7;
}

.htt-card--closed .htt-card__title {
  color: var(--htt-ink-2);
}

.htt-card--closed:hover .htt-card__title {
  color: var(--htt-ink-2);
}

/* ---- horizontal layout (listings) ---- */

.htt-card--horizontal {
  flex-direction: row;
  align-items: stretch;
}

.htt-card--horizontal .htt-card__img {
  flex: none;
  width: 132px;
  aspect-ratio: auto;
}

.htt-card--horizontal .htt-card__body {
  flex: 1;
  min-width: 0;
}

/* the chip repeats the body's venue line at this size */
.htt-card--horizontal .htt-card__venue-chip {
  display: none;
}

@media (min-width: 640px) {
  .htt-card--horizontal .htt-card__img {
    width: 200px;
  }

  .htt-card--horizontal .htt-card__body {
    padding: 18px;
  }
}

@media (min-width: 1024px) {
  .htt-card--horizontal .htt-card__img {
    width: 248px;
  }

  .htt-card--horizontal .htt-card__title {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .htt-card,
  .htt-card__img img {
    transition: none;
  }

  .htt-card:hover {
    transform: none;
  }

  .htt-card:hover .htt-card__img img {
    transform: none;
  }
}

/* ---------- open line (#73 T7 — components/htt/open-line.blade.php) ---------- */

.htt-open-line {
  font-weight: 600;
  color: inherit;
}

.htt-open-line::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--htt-open);
  margin-right: 7px;
  vertical-align: 1px;
}

.htt-open-line.closed::before {
  background: var(--htt-closed-dot);
}

/* ---------- call card (#73 T7 — components/htt/call-card.blade.php) ---------- */

.htt-call-card {
  font-family: var(--htt-font);
}

.htt-call-card__panel {
  display: none;
  padding: 24px;
}

.htt-call-card__heading {
  margin: 0 0 8px;
  font-family: var(--htt-font);
  font-size: 26px;
  font-weight: 800;
  font-variation-settings: 'wdth' 80;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.htt-call-card__line {
  margin: 0 0 4px;
  color: var(--htt-ink-2);
  font-size: 15px;
  line-height: 1.55;
}

/* the phone number, plain — icon + big number, no button chrome
   (#73 Round 8: matches the approved mock-up exactly — no boxed panel,
   no circular icon badge, no "Call now" CTA pill, none of which are in
   the mock-up or the issue's own §4b spec for this block) */
.htt-call-card__action {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  text-decoration: none;
  color: inherit;
}

.htt-call-card__action-icon {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--htt-accent);
}

.htt-call-card__number {
  /* #1.2 type table: "Big phone (call card / FAQ / footer) 28 / 26 / 22px, 800, wdth 85" */
  font-family: var(--htt-font);
  font-size: 28px;
  font-weight: 800;
  font-variation-settings: 'wdth' 85;
  letter-spacing: -0.015em;
  color: var(--htt-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.htt-call-card__action:hover .htt-call-card__number,
.htt-call-card__action:hover .htt-call-card__action-icon {
  color: var(--htt-accent);
}

.htt-call-card__hours {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--htt-ink-2);
}

.htt-call-card__inline {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--htt-ink-2);
}

.htt-call-card__inline a {
  color: var(--htt-ink);
  font-weight: 700;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .htt-call-card__panel {
    display: block;
  }

  .htt-call-card__inline {
    display: none;
  }
}

/* ---------- chips (#73 T7 — components/htt/chips.blade.php, chip.blade.php) ---------- */

.htt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.htt-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 15px;
  border-radius: var(--htt-radius-pill);
  background: var(--htt-white);
  border: 1px solid var(--htt-chip-border);
  color: var(--htt-ink);
  text-decoration: none;
  font-family: var(--htt-font);
  font-size: 15px;
  font-weight: 500;
}

.htt-chip:hover {
  border-color: var(--htt-accent);
  color: var(--htt-accent);
}

/* compact form, for the quick filters inside the hero search card */
.htt-chip--sm {
  min-height: 34px;
  padding: 0 13px;
  font-size: 13.5px;
  background: var(--htt-sand);
  border-color: transparent;
}

.htt-chip--sm:hover {
  background: var(--htt-white);
}

/* the one chip worth pulling out of the set (Offers) */
.htt-chip--accent {
  background: var(--htt-accent-soft);
  border-color: var(--htt-accent-border);
  color: var(--htt-accent);
  font-weight: 700;
}

.htt-chip--accent:hover {
  background: var(--htt-accent);
  border-color: var(--htt-accent);
  color: var(--htt-white);
}

/* ---------- section heading (#73 T7 — components/htt/section-heading.blade.php) ---------- */

.htt-section-heading__title {
  margin: 0;
  font-family: var(--htt-font);
  font-weight: 800;
  font-variation-settings: 'wdth' 82;
  font-size: clamp(22px, 4.6vw, 30px);
  letter-spacing: -0.015em;
  line-height: 1.12;
}

.htt-section-heading__line {
  margin: 6px 0 0;
  color: var(--htt-ink-2);
  font-size: 15px;
}

/* ---------- row (#73 T7 — components/htt/row.blade.php) ---------- */

.htt-row {
  padding-block: 44px;
}

.htt-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 20px;
}

/* The basis decides when the see-all link drops to its own line: a short
   "All shows" stays alongside the heading on a phone, a long "More
   questions and answers" wraps instead of squeezing the heading. */
.htt-row__head > .htt-section-heading {
  flex: 1 1 260px;
}

/* the hairline under a section heading — on the rows that carry a
   see-all link, not on the ones that are just a heading and a line */
.htt-row__head--ruled {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--htt-rule);
}

.htt-row__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-family: var(--htt-font);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  color: var(--htt-accent);
  flex: none;
}

.htt-row__link::after {
  content: "\2192";
  transition: transform 0.15s ease;
}

.htt-row__link:hover {
  color: var(--htt-accent-hover);
}

.htt-row__link:hover::after {
  transform: translateX(3px);
}

.htt-row--sand {
  background: var(--htt-sand);
}

/* Cards sit half on the hero's sand, half on white. The switch points
   below are measured from the top of the section, so they track the
   height of the heading row above the grid. */
.htt-row--sand-overlap {
  padding-top: 28px;
  background: linear-gradient(to bottom, var(--htt-sand) 0, var(--htt-sand) 190px, var(--htt-white) 190px);
}

@media (min-width: 1024px) {
  .htt-row--sand-overlap {
    background: linear-gradient(to bottom, var(--htt-sand) 0, var(--htt-sand) 250px, var(--htt-white) 250px);
  }
}

/* ---------- feature list (#73 T7 — components/htt/feature-list.blade.php, feature.blade.php) ---------- */

.htt-feature-list {
  border-block: 1px solid var(--htt-rule);
  background: var(--htt-white);
}

.htt-feature-list__heading {
  padding-top: 22px;
  text-align: center;
}

@media (min-width: 768px) {
  .htt-feature-list__heading {
    padding-top: 30px;
  }
}

.htt-feature-list__grid {
  display: grid;
  gap: 0;
  padding-block: 8px;
}

@media (min-width: 768px) {
  /* auto-fit, so three or four features both lay out correctly */
  .htt-feature-list__grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    padding-block: 30px;
    gap: 28px;
  }
}

.htt-feature {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 3px 14px;
  padding-block: 18px;
  border-top: 1px solid var(--htt-rule);
  font-family: var(--htt-font);
}

.htt-feature:first-child {
  border-top: 0;
}

@media (min-width: 768px) {
  .htt-feature {
    border-top: 0;
    padding-block: 0;
  }
}

/* the icon sits in a soft rounded tile, not loose on the background */
.htt-feature__icon {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 11px;
  background: var(--htt-sand);
  border: 1px solid var(--htt-rule);
  color: var(--htt-accent);
  grid-row: span 2;
  margin-top: 2px;
}

.htt-feature__title {
  margin: 0;
  font-family: var(--htt-font);
  font-size: 17px;
  font-weight: 700;
  font-variation-settings: 'wdth' 92;
}

.htt-feature__line {
  margin: 0;
  color: var(--htt-ink-2);
  font-size: 15px;
}

/* ---------- tiles (#73 T7 — components/htt/tiles.blade.php, tile.blade.php) ---------- */

.htt-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1024px) {
  .htt-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
}

.htt-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  min-height: 132px;
  padding: 18px;
  border-radius: var(--htt-radius);
  background: var(--htt-white);
  border: 1px solid var(--htt-panel-border);
  box-shadow: var(--htt-shadow-subtle);
  text-decoration: none;
  font-family: var(--htt-font);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.htt-tile:hover {
  border-color: var(--htt-accent);
  box-shadow: var(--htt-shadow-hover);
  transform: translateY(-2px);
}

.htt-tile b {
  font-family: var(--htt-font);
  font-size: 16px;
  font-weight: 700;
  font-variation-settings: 'wdth' 92;
  line-height: 1.3;
  color: var(--htt-ink);
}

.htt-tile:hover b {
  color: var(--htt-accent);
}

.htt-tile__line {
  font-size: 13.5px;
  color: var(--htt-ink-2);
  line-height: 1.45;
}

.htt-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--htt-muted);
  transition: color 0.15s ease;
}

.htt-tile__cta::after {
  content: "\2192";
  transition: transform 0.15s ease;
}

.htt-tile:hover .htt-tile__cta {
  color: var(--htt-accent);
}

.htt-tile:hover .htt-tile__cta::after {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .htt-tile,
  .htt-tile__cta::after {
    transition: none;
  }

  .htt-tile:hover {
    transform: none;
  }
}

/* ---------- faq list (#73 T7 — components/htt/faq-list.blade.php) ---------- */

.htt-faq {
  padding-block: 48px;
  background: var(--htt-white);
  font-family: var(--htt-font);
}

.htt-faq__grid {
  display: grid;
  gap: 22px;
}

@media (min-width: 1024px) {
  .htt-faq__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
    gap: 40px;
  }
}

/* the support column is a panel, not loose text beside the questions */
.htt-faq__aside {
  align-self: start;
  padding: 24px;
}

.htt-faq__aside-heading {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--htt-ink);
}

.htt-faq__aside-line {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--htt-ink-2);
}

/* Each question is its own bordered card. The rules below are shared
   with <x-htt.accordion> — the FAQ list is just an accordion that also
   knows how to emit FAQPage JSON-LD, so the two must not drift apart. */
.htt-faq__list details,
.htt-accordion__item {
  border: 1px solid var(--htt-panel-border);
  border-radius: var(--htt-radius);
  background: var(--htt-white);
  padding: 0 16px;
  margin-bottom: 10px;
}

.htt-faq__list details[open],
.htt-accordion__item[open] {
  border-color: var(--htt-accent-border);
  background: var(--htt-sand-lift);
}

.htt-faq__list summary,
.htt-accordion__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  min-height: 56px;
  font-weight: 600;
  font-size: 17px;
  font-variation-settings: 'wdth' 100;
}

.htt-faq__list summary::-webkit-details-marker,
.htt-accordion__summary::-webkit-details-marker {
  display: none;
}

.htt-faq__list summary::after,
.htt-accordion__summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--htt-accent);
  flex: none;
}

.htt-faq__list details[open] summary::after,
.htt-accordion__item[open] .htt-accordion__summary::after {
  content: "\2212";
}

.htt-faq__list p,
.htt-accordion__body {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--htt-ink-2);
  max-width: 62ch;
}

.htt-faq__more {
  margin: 16px 0 0;
}

.htt-faq__more a {
  font-weight: 700;
  color: var(--htt-accent);
}

/* ---------- campaign banner (#73 T7 — components/htt/campaign-banner.blade.php) ---------- */

.htt-campaign-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  font-family: var(--htt-font);
  font-size: 14px;
  margin-bottom: 18px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--htt-white);
  border: 1px solid var(--htt-panel-border);
}

.htt-campaign-banner b {
  color: var(--htt-accent);
  font-weight: 700;
}

.htt-campaign-banner a {
  font-weight: 600;
  color: var(--htt-accent);
}

/* ---------- hero (#73 T7 — resources/views/homepage.blade.php) ---------- */

.htt-hero {
  position: relative;
  background: linear-gradient(to bottom, var(--htt-sand-lift) 0%, var(--htt-white) 45%, var(--htt-sand) 100%);
  color: var(--htt-ink);
  font-family: var(--htt-font);
  border-bottom: 1px solid var(--htt-rule);
}

/* the faint accent dot field over the wash */
.htt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(122, 31, 43, 0.085) 0.8px, transparent 0.8px);
  background-size: 24px 24px;
  pointer-events: none;
}

.htt-hero > * {
  position: relative;
}

.htt-hero__grid {
  display: grid;
  gap: 28px;
  padding-block: 28px 24px;
}

@media (min-width: 1024px) {
  .htt-hero__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    padding-block: 52px 44px;
    gap: 48px;
  }
}

.htt-hero__h1 {
  margin: 0 0 14px;
  font-family: var(--htt-font);
  font-weight: 800;
  font-variation-settings: 'wdth' 80;
  font-size: clamp(32px, 7.6vw, 54px);
  max-width: 17ch;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.htt-hero__proof {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--htt-ink-2);
  max-width: 52ch;
  line-height: 1.6;
}

/* the white card that holds the search box and the quick filters */
.htt-hero__panel {
  max-width: 640px;
  padding: 12px;
}

.htt-hero__filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--htt-rule);
}

.htt-hero__filters-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--htt-muted);
  margin-right: 2px;
}

.htt-hero-search {
  display: flex;
  gap: 8px;
  position: relative;
  background: transparent;
  border-radius: var(--htt-radius-search);
}

.htt-hero-search__input {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  background: var(--htt-sand);
  border-radius: 10px;
  font: 500 16px var(--htt-font);
  color: var(--htt-ink);
  padding: 13px 14px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.htt-hero-search__input::placeholder {
  color: var(--htt-muted);
  font-weight: 400;
}

/* input[type="text"]:focus, not just .htt-hero-search__input:focus: the
   input carries type="text", so @tailwindcss/forms' own focus reset
   ([type='text']:focus in app.css, loaded after this file) ties this
   rule's specificity and wins the tie on source order, silently dropping
   our border-color/box-shadow in favour of Tailwind's default blue ring.
   The extra `input` qualifier breaks the tie in our favour. */
input.htt-hero-search__input:focus {
  outline: none;
  background: var(--htt-white);
  border-color: var(--htt-accent);
  box-shadow: 0 0 0 3px var(--htt-accent);
}

.htt-hero-search__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  background: var(--htt-white);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  max-height: 400px;
  overflow-y: auto;
  z-index: 5;
}

.htt-faq__phone {
  margin: 16px 0 0;
}

.htt-faq__hours {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--htt-ink-2);
}

/* ==========================================================================
   Shared UI primitives
   The generic pieces every page needs, built on the same tokens as the
   homepage so a redesigned page assembles from these instead of growing
   its own stylesheet. Accordion styling lives with the FAQ list above,
   and buttons/badges/eyebrows/panels are in "reusable primitives".
   ========================================================================== */

/* ---------- alert (components/htt/alert.blade.php) ---------- */

.htt-alert {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--htt-panel-border);
  border-left-width: 3px;
  border-radius: var(--htt-radius);
  background: var(--htt-sand-lift);
  font-family: var(--htt-font);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--htt-ink-2);
}

.htt-alert__icon {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  color: var(--htt-ink-2);
}

.htt-alert__body {
  min-width: 0;
  flex: 1;
}

.htt-alert__title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--htt-ink);
}

.htt-alert__body p {
  margin: 0;
}

.htt-alert__dismiss {
  flex: none;
  width: 28px;
  height: 28px;
  margin: -2px -4px 0 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--htt-muted);
  cursor: pointer;
}

.htt-alert__dismiss:hover {
  background: rgba(22, 19, 26, 0.06);
  color: var(--htt-ink);
}

.htt-alert__dismiss svg {
  width: 16px;
  height: 16px;
}

/* Tone colours the rule, the tint and the icon only — body text stays
   --htt-ink-2 so contrast never depends on the tone. */
.htt-alert--success {
  border-color: var(--htt-emerald-border);
  border-left-color: var(--htt-emerald);
  background: var(--htt-emerald-soft);
}

.htt-alert--success .htt-alert__icon {
  color: var(--htt-emerald);
}

.htt-alert--warning {
  border-color: var(--htt-amber-border);
  border-left-color: var(--htt-amber);
  background: var(--htt-amber-soft);
}

.htt-alert--warning .htt-alert__icon {
  color: var(--htt-amber);
}

.htt-alert--error {
  border-color: var(--htt-accent-border);
  border-left-color: var(--htt-accent);
  background: var(--htt-accent-soft);
}

.htt-alert--error .htt-alert__icon {
  color: var(--htt-accent);
}

.htt-alert--info {
  border-left-color: var(--htt-accent);
}

.htt-alert--info .htt-alert__icon {
  color: var(--htt-accent);
}

/* ---------- breadcrumbs (components/htt/breadcrumbs.blade.php) ---------- */

.htt-breadcrumbs {
  font-family: var(--htt-font);
  font-size: 13px;
  margin-bottom: 10px;
}

.htt-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
}

.htt-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--htt-muted);
}

.htt-breadcrumbs li + li::before {
  content: "/";
  color: var(--htt-chip-border);
}

.htt-breadcrumbs a {
  color: var(--htt-ink-2);
  text-decoration: none;
}

.htt-breadcrumbs a:hover {
  color: var(--htt-accent);
  text-decoration: underline;
}

.htt-breadcrumbs [aria-current="page"] {
  color: var(--htt-muted);
}

/* ---------- page header (components/htt/page-header.blade.php) ---------- */

.htt-page-header {
  background: var(--htt-sand);
  border-bottom: 1px solid var(--htt-rule);
  font-family: var(--htt-font);
  padding-block: 26px;
}

@media (min-width: 768px) {
  .htt-page-header {
    padding-block: 36px;
  }
}

.htt-page-header--plain {
  background: var(--htt-white);
}

.htt-page-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
}

.htt-page-header__text {
  flex: 1 1 320px;
  min-width: 0;
}

.htt-page-header__title {
  margin: 0;
  font-family: var(--htt-font);
  font-weight: 800;
  font-variation-settings: 'wdth' 80;
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--htt-ink);
}

.htt-page-header__line {
  margin: 8px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--htt-ink-2);
  max-width: 62ch;
}

.htt-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ---------- table (components/htt/table.blade.php) ---------- */

/* The scroll container is the table's own, so a wide table never makes
   the page itself scroll sideways (issue #73 §2). */
.htt-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--htt-panel-border);
  border-radius: var(--htt-radius-lg);
  background: var(--htt-white);
}

.htt-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--htt-font);
  font-size: 14.5px;
}

.htt-table caption {
  caption-side: top;
  text-align: left;
  padding: 14px 16px 0;
  font-size: 13px;
  color: var(--htt-muted);
}

.htt-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--htt-muted);
  background: var(--htt-sand-lift);
  border-bottom: 1px solid var(--htt-rule);
  white-space: nowrap;
}

.htt-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--htt-rule);
  color: var(--htt-ink-2);
  vertical-align: middle;
}

.htt-table tbody tr:last-child td {
  border-bottom: 0;
}

.htt-table tbody tr:hover td {
  background: var(--htt-sand-lift);
}

.htt-table__numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- empty state (components/htt/empty-state.blade.php) ---------- */

.htt-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 44px 20px;
  text-align: center;
  font-family: var(--htt-font);
}

.htt-empty__icon {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 12px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--htt-sand);
  border: 1px solid var(--htt-rule);
  color: var(--htt-muted);
}

.htt-empty__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--htt-ink);
}

.htt-empty__line {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--htt-ink-2);
  max-width: 46ch;
}

.htt-empty__actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* ---------- pagination (components/htt/pagination.blade.php) ---------- */

.htt-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-block: 8px;
  font-family: var(--htt-font);
}

.htt-pagination__link {
  min-width: 42px;
  min-height: 42px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--htt-chip-border);
  border-radius: 8px;
  background: var(--htt-white);
  color: var(--htt-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.htt-pagination__link:hover {
  border-color: var(--htt-accent);
  color: var(--htt-accent);
}

.htt-pagination__link[aria-current="page"] {
  background: var(--htt-accent);
  border-color: var(--htt-accent);
  color: var(--htt-white);
}

.htt-pagination__link--disabled {
  opacity: 0.45;
  pointer-events: none;
}

.htt-pagination__dots {
  padding-inline: 4px;
  color: var(--htt-muted);
}

/* the "Showing x to y of z" line */
.htt-pagination__summary {
  width: 100%;
  text-align: center;
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--htt-muted);
}

/* ---------- tabs (components/htt/tabs.blade.php) ---------- */

.htt-tabs {
  font-family: var(--htt-font);
}

.htt-tabs__nav {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--htt-rule);
}

.htt-tabs__nav::-webkit-scrollbar {
  display: none;
}

.htt-tabs__tab {
  flex: none;
  min-height: 48px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: 600 15px var(--htt-font);
  color: var(--htt-ink-2);
  white-space: nowrap;
  cursor: pointer;
}

.htt-tabs__tab:hover {
  color: var(--htt-accent);
}

.htt-tabs__tab[aria-selected="true"] {
  color: var(--htt-accent);
  border-bottom-color: var(--htt-accent);
}

.htt-tabs__panel {
  padding-top: 20px;
}

/* htt-ui.js sets [hidden] on the inactive panels; stated explicitly so a
   future display rule on the panel can't silently reveal them all. */
.htt-tabs__panel[hidden] {
  display: none;
}

/* ---------- modal (components/htt/modal.blade.php) ---------- */

/* A native <dialog>, so focus trapping, Escape and inertness of the rest
   of the page come from the browser rather than from script. */
.htt-modal {
  width: 100%;
  max-width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.htt-modal--lg {
  max-width: min(880px, calc(100vw - 32px));
}

.htt-modal::backdrop {
  background: rgba(22, 19, 26, 0.6);
}

.htt-modal__panel {
  background: var(--htt-white);
  border-radius: var(--htt-radius-xl);
  box-shadow: var(--htt-shadow-panel);
  font-family: var(--htt-font);
  overflow: hidden;
}

.htt-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 0;
}

.htt-modal__title {
  margin: 0;
  font-family: var(--htt-font);
  font-size: 22px;
  font-weight: 800;
  font-variation-settings: 'wdth' 80;
  line-height: 1.2;
  color: var(--htt-ink);
}

.htt-modal__close {
  flex: none;
  width: 40px;
  height: 40px;
  margin: -8px -8px 0 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--htt-ink-2);
  cursor: pointer;
}

.htt-modal__close:hover {
  background: var(--htt-sand);
  color: var(--htt-accent);
}

.htt-modal__close svg {
  width: 20px;
  height: 20px;
}

.htt-modal__body {
  padding: 14px 20px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--htt-ink-2);
  max-height: min(60vh, 520px);
  overflow-y: auto;
}

.htt-modal__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 20px 20px;
}

/* ---------- loading (spinner + skeleton) ---------- */

.htt-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--htt-chip-border);
  border-top-color: var(--htt-accent);
  border-radius: 50%;
  animation: htt-spin 0.7s linear infinite;
}

.htt-spinner--lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

@keyframes htt-spin {
  to {
    transform: rotate(360deg);
  }
}

.htt-skeleton {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--htt-sand) 25%, var(--htt-rule) 37%, var(--htt-sand) 63%);
  background-size: 400% 100%;
  animation: htt-shimmer 1.3s ease infinite;
}

@keyframes htt-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .htt-spinner,
  .htt-skeleton {
    animation: none;
  }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .htt-header *,
  .htt-footer *,
  [class^="htt-"] *,
  [class^="htt-"] {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- #35 cookie consent banner ---------- */

.htt-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--htt-header);
  color: var(--htt-white);
  padding: 16px 20px;
  box-shadow: 0 -8px 24px rgba(22, 19, 26, 0.18);
}

.htt-consent-banner--hidden {
  display: none;
}

.htt-consent-banner__inner {
  max-width: var(--htt-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.htt-consent-banner__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--htt-on-dark-muted);
}

.htt-consent-banner__text a {
  color: var(--htt-white);
  text-decoration: underline;
}

.htt-consent-banner__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .htt-consent-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .htt-consent-banner__actions {
    justify-content: stretch;
  }

  .htt-consent-banner__actions .htt-btn {
    flex: 1;
  }
}