/* Triple Victor — shell styling.
 *
 * Hand-written. Consumes the custom properties in tokens.css, which IS
 * generated — so a palette change never comes through this file.
 *
 * Scope: the header and footer twins, plus the base typography and surfaces
 * the three plugin shells render into. FluentCommunity, FluentCart and
 * FluentBooking component overrides go at the bottom, each in its own block.
 */

/* ---------------------------------------------------------------
   Base
   --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* next/font is not available here, so the stack resolves to the system UI
   face. Inter is not self-hosted in this theme deliberately — shipping a
   second copy of the webfont to style three shells is not worth the bytes.
   Revisit if the mismatch reads badly next to a Next-rendered page. */

a {
  color: var(--color-accent-ink);
}

.tv-skip {
  position: absolute;
  left: -9999px;
}

.tv-skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 60;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* ---------------------------------------------------------------
   Header — twin of site-header.tsx
   --------------------------------------------------------------- */

.tv-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-line-subtle);
  background: var(--color-bg);
}

@supports (backdrop-filter: blur(8px)) {
  .tv-header {
    background: color-mix(in oklab, var(--color-bg) 80%, transparent);
    backdrop-filter: blur(8px);
  }
}

.tv-header__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 72rem;
  margin-inline: auto;
  padding: 0.75rem var(--spacing-gutter);
}

.tv-wordmark {
  margin-right: auto;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-decoration: none;
}

.tv-wordmark__dot {
  color: var(--color-accent-ink);
}

.tv-nav__list,
.tv-nav__panel-list,
.tv-nav__group,
.tv-submenu,
.tv-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tv-nav__link {
  color: var(--color-ink-secondary);
  text-decoration: none;
  transition: color 0.15s;
}

.tv-nav__link:hover,
.tv-nav__link:focus-visible {
  color: var(--color-ink);
}

.tv-nav--inline {
  display: none;
}

.tv-nav--inline .tv-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  font-size: 0.875rem;
}

.tv-nav__item--has-children {
  position: relative;
}

.tv-menu__summary,
.tv-menu__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
}

.tv-menu__summary::-webkit-details-marker,
.tv-menu__toggle::-webkit-details-marker {
  display: none;
}

.tv-menu__toggle {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink);
}

.tv-menu__caret {
  font-size: 0.65em;
  transition: transform 0.15s;
}

.tv-menu[open] > summary .tv-menu__caret {
  transform: rotate(180deg);
}

.tv-submenu {
  position: absolute;
  left: 0;
  z-index: 20;
  width: 18rem;
  margin-top: 0.75rem;
  padding: 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: 0.5rem;
  background: var(--color-surface);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.25);
}

.tv-submenu__link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
}

.tv-submenu__link:hover {
  background: var(--color-surface-alt);
}

/* Collapsed nav, below the inline breakpoint */

.tv-nav__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 75dvh;
  overflow-y: auto;
  padding: 1rem var(--spacing-gutter);
  border-bottom: 1px solid var(--color-line-subtle);
  background: var(--color-bg);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.25);
}

.tv-nav__panel-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 72rem;
  margin-inline: auto;
}

.tv-nav__group-label {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-ink-muted);
}

.tv-nav__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--color-line);
}

@media (min-width: 1024px) {
  .tv-nav--inline {
    display: block;
  }

  .tv-nav--collapsed {
    display: none;
  }

  .tv-header__bar {
    padding-block: 1rem;
  }
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */

.tv-button {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s;
}

.tv-button:hover {
  background: var(--color-accent-hover);
}

/* ---------------------------------------------------------------
   Prose
   ---------------------------------------------------------------
   The old `.tv-shell` rule lived here — a centred 72rem column with
   3rem of padding, from when this theme only rendered fallback pages.
   ADR 0021's shell reuses that class name for the flex container, so
   the two collided: every store page inherited 3rem of dead space
   above its title strip and was capped mid-screen. Removed rather than
   renamed, because nothing emits the old markup any more.
   --------------------------------------------------------------- */

.tv-prose {
  max-width: var(--container-readable);
}

.tv-prose h1 {
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
  font-weight: var(--text-display--font-weight);
}

.tv-prose p {
  color: var(--color-ink-secondary);
}

/* ---------------------------------------------------------------
   Footer — twin of site-footer.tsx
   --------------------------------------------------------------- */

.tv-footer {
  margin-top: 4rem;
  border-top: 1px solid var(--color-line-subtle);
}

.tv-footer__bar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 72rem;
  margin-inline: auto;
  padding: 2.5rem var(--spacing-gutter);
}

.tv-footer__copy {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-ink-muted);
}

.tv-footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.875rem;
}

.tv-footer__link {
  color: var(--color-ink-muted);
  text-decoration: none;
}

.tv-footer__link:hover {
  color: var(--color-ink);
}

@media (min-width: 640px) {
  .tv-footer__bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------------------------------------------------------------
   FluentCommunity
   ---------------------------------------------------------------
   Not yet written. This is the block that does the actual work of
   making the community look like the rest of the platform, and it
   needs to be written against the rendered markup rather than
   guessed at. Inspect a logged-in feed on staging, find the
   plugin's own custom properties first — overriding those is far
   more durable than chasing its class names — and map them onto
   the tokens above.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   FluentCart / FluentBooking
   ---------------------------------------------------------------
   Same, once those shells are installed on staging. FluentCart is
   not installed yet (kickoff brief §8; step 1.1 deliberately left
   it out so the spike tested one variable).
   --------------------------------------------------------------- */