/* ==========================================================================
   Tures — component styles

   WHY THIS IS ONE FILE, NOT components/<name>/<name>.css

   Weblooks bundles co-located component CSS into assets/wl-components.css at
   PUBLISH time. That file does not exist in the repo, so the project editor —
   which renders the source tree — loads none of it. The canvas then shows the
   brand colours and type (from the linked stylesheets) with every component's
   anatomy missing: no menu frames, no header row, no tab row.

   The publish pipeline also rewrites every bundled selector to
   `[data-wl-c="<name>"] <selector>`, a descendant combinator the component's
   own root element can never match — so root rules were being dropped there
   too.

   One committed stylesheet fixes both: it exists in the source tree, so the
   editor loads it, and nothing is rewritten, so a root rule means what it says.
   Component behaviour (<name>.js) stays co-located — Weblooks bundles and
   injects that, and it is the only copy.

   Sections below follow the order components appear on a page. Keep selectors
   namespaced to their component; there is no automatic scoping here.
   ========================================================================== */


/* ==== component ROOT elements ==================================== */

/* --------------------------------------------------------------------------
   site-header
   -------------------------------------------------------------------------- */
[data-wl-component="site-header"] {
  position: relative;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   hero-banner
   -------------------------------------------------------------------------- */
/* NOT clipped. The ambient glow is meant to bleed past the banner and fade
   into the section below it; clipping the hero cuts it off in a hard line. */
[data-wl-component="hero-banner"] {
  overflow: visible;
}

/* The page ground and its grain come from <body>. These two used to paint
   their own green, which hid the grain in exactly the two bands that had
   it before — so they let it through now. */
[data-wl-component="hero-banner"],
[data-wl-component="site-footer"] {
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   section-heading
   -------------------------------------------------------------------------- */
[data-wl-component="section-heading"] {
  display: flex;
  flex-direction: column;
  gap: var(--size-1);
  inline-size: 100%;
}

[data-wl-component="section-heading"].section-heading--center {
  align-items: center;
  text-align: center;
}

[data-wl-component="section-heading"].section-heading--start {
  align-items: flex-start;
  text-align: start;
}

/* --------------------------------------------------------------------------
   menu-tabs
   Without inline-size the root collapses to zero: container-type:inline-size
   makes its content contribute nothing, and a flex parent with
   align-items:center then sizes it to that nothing.
   -------------------------------------------------------------------------- */
[data-wl-component="menu-tabs"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  inline-size: 100%;
}

/* --------------------------------------------------------------------------
   menu-cell — the three frame tones
   -------------------------------------------------------------------------- */
[data-wl-component="menu-cell"] {
  position: relative;
  inline-size: 100%;
  padding: var(--space-s);
  border: var(--border-width-main) solid var(--menu-cell-frame, var(--theme-border));
  background-color: transparent;
  color: var(--theme-text);
}

/* On the green page the emphasised tone is the inverted one: a cream block
   with a cream frame, so no dark rule is cut into the ground. */
[data-wl-component="menu-cell"].menu-cell--brand {
  --menu-cell-frame: var(--swatch-neutral-50);
  background-color: var(--swatch-neutral-50);
  color: var(--swatch-neutral-950);
}

[data-wl-component="menu-cell"].menu-cell--dark {
  --menu-cell-frame: var(--theme-border);
  background-color: var(--swatch-primary-soft);
}

[data-wl-component="menu-cell"].menu-cell--brand .menu-cell__grain {
  display: block;
}

[data-wl-component="menu-cell"].menu-cell--brand .menu-cell__title,
[data-wl-component="menu-cell"].menu-cell--brand .menu-cell__aside {
  color: var(--swatch-primary);
}

/* --------------------------------------------------------------------------
   menu-week
   -------------------------------------------------------------------------- */
[data-wl-component="menu-week"] {
  inline-size: 100%;
  padding: var(--space-s);
  border: var(--border-width-main) solid var(--theme-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

/* --------------------------------------------------------------------------
   content-band
   -------------------------------------------------------------------------- */
[data-wl-component="content-band"] {
  position: relative;
  isolation: isolate;
}

[data-wl-component="content-band"].content-band--start .content-band__inner {
  justify-content: flex-start;
}

[data-wl-component="content-band"].content-band--end .content-band__inner {
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   button-group
   -------------------------------------------------------------------------- */
[data-wl-component="button-group"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

[data-wl-component="button-group"].button-group--start { justify-content: flex-start; }
[data-wl-component="button-group"].button-group--center { justify-content: center; }
[data-wl-component="button-group"].button-group--end { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   site-footer
   -------------------------------------------------------------------------- */
[data-wl-component="site-footer"] {
  overflow: clip;
}

/* --------------------------------------------------------------------------
   token-swatches (style guide only)
   -------------------------------------------------------------------------- */
[data-wl-component="token-swatches"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}



/* ==== site-header =============================================== */

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-xs);
}

.site-header__list {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
}

.site-header__item {
  margin: 0;
}

.site-header__link {
  position: relative;
  display: block;
  padding: var(--space-2xs) var(--space-xs);
  color: var(--theme-text);
  white-space: nowrap;
  --stroke-frame-color: var(--theme-text);
}

.site-header__link:hover {
  color: var(--theme-text);
}

.site-header__brand {
  flex: 0 1 auto;
  min-inline-size: 0;
  display: block;
  color: var(--theme-text);
  inline-size: var(--size-28);
  max-inline-size: 100%;
}

.site-header__wordmark {
  inline-size: 100%;
  block-size: auto;
  color: currentColor;
}

.site-header__panel {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.site-header__locales {
  display: flex;
  gap: var(--size-1-25);
  margin: 0;
}

.site-header__locale {
  color: var(--theme-text);
  white-space: nowrap;
}

.site-header__locale[aria-current="false"] {
  color: var(--theme-text-muted);
}

.site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-2-5);
  block-size: var(--size-2-5);
  color: var(--theme-text);
  border: var(--border-width-control) solid currentColor;
}

.site-header__toggle-icon {
  inline-size: 55%;
  block-size: auto;
}

.site-header__toggle-icon--close {
  display: none;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon {
  display: none;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon--close {
  display: block;
}

/* --------------------------------------------------------------------------
   Narrow containers: the trailing links, the CTA and the locale switcher
   collapse behind the toggle. Container query, not a viewport query, so the
   header behaves the same wherever it is placed.
   -------------------------------------------------------------------------- */
@container (max-width: 52rem) {
  .site-header__bar {
    flex-wrap: wrap;
    row-gap: var(--space-2xs);
  }

  .site-header__brand {
    order: 1;
    inline-size: var(--size-14);
  }

  .site-header__toggle {
    order: 2;
    display: flex;
  }

  .site-header__list--lead {
    order: 3;
  }

  .site-header__panel {
    order: 4;
  }

  .site-header__list--lead,
  .site-header__panel {
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .site-header__list--trail {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-header__actions {
    flex-wrap: wrap;
    padding-block-end: var(--space-2xs);
  }

  /* Collapse only once the script has taken control, so a page with no
     JavaScript keeps every link in the flow and reachable. */
  .site-header__bar[data-collapsible="true"][data-open="false"] .site-header__list--lead,
  .site-header__bar[data-collapsible="true"][data-open="false"] .site-header__panel {
    display: none;
  }

  .site-header__bar[data-collapsible="true"][data-open="true"] .site-header__list--lead,
  .site-header__bar[data-collapsible="true"][data-open="true"] .site-header__panel {
    animation: u-lift-in var(--duration-base) var(--ease-standard) both;
  }
}


/* ==== hero-banner =============================================== */

.hero__inner {
  padding-block-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* The banner is an arched shape, not a rectangle, so the frame cannot be a
   border: the still and the film are clipped to the path and the cream rule is
   drawn as SVG over the top. The ratio is the path's own, so the clip and the
   outline stay registered at every width. */
.hero__media {
  position: relative;
  isolation: isolate;
  margin: 0;
  aspect-ratio: 1112 / 661;
}

.hero__clip {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: url(#hero-arch);
  background-color: var(--swatch-primary-soft);
}

.hero__outline {
  position: absolute;
  inset: 0;
  z-index: 2;
  inline-size: 100%;
  block-size: 100%;
  fill: none;
  stroke: var(--theme-border);
  pointer-events: none;
  /* An SVG stroke straddles its path, so the half that falls outside was being
     clipped away at the three edges that sit on the viewBox boundary — which is
     why the rule read thin along the bottom and thick across the arches. Clip to
     the same path and draw at double width: the outer half goes, the inner half
     is left, and it is even the whole way round. */
  clip-path: url(#hero-arch);
}

.hero__outline use {
  /* The viewBox is stretched to the box, so the rule has to opt out of that
     scaling or it would thicken on one axis. */
  vector-effect: non-scaling-stroke;
  stroke-width: calc(var(--border-width-main) * 2);
  /* The arch meets the top edge over a two-unit segment. Mitred, that joint
     throws a long spike; round keeps the corner smooth. */
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Ambient glow. A copy of the same picture, clipped to the same arch and then
   blurred — the blur has to sit on an ANCESTOR of the clip, because clip-path
   is applied after filter and would otherwise crop the bleed straight off.

   The blur radius is a custom property because two rules below change it:
   they override that one value so the saturation rides along, where
   re-declaring `filter` outright would silently drop it. */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  --glow-blur: 4.5rem;
  /* Lifted above 1 so the spill reads as colour thrown off the film. The
     footage is muted enough that a straight copy of it barely registers
     against the green. */
  --glow-saturation: 2.5;
  filter: blur(var(--glow-blur)) saturate(var(--glow-saturation));
  opacity: 0.55;
  transform: scale(1.06);
  pointer-events: none;
}

.hero__glow-shape {
  position: absolute;
  inset: 0;
  clip-path: url(#hero-arch);
}

.hero__glow-image,
.hero__glow-canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero__glow-canvas[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__glow {
    --glow-blur: 3.5rem;
  }
}

.hero__image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* A slow, single-pass settle on load — the same easing as every other
     entry motion on the site. Disabled under prefers-reduced-motion by the
     global rule in utilities.css. */
  animation: u-fade-in var(--duration-reveal) var(--ease-out-expo) both;
}

/* The film lies over the still of the same room, both cropped to the frame.
   With no film in the CMS the <video> is hidden by hero-banner.js and the
   still is the banner on its own. */
.hero__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}

.hero__video[hidden] {
  display: none;
}

@container (max-width: 40rem) {
  .hero__glow {
    --glow-blur: 2rem;
  }
}


/* ==== section-heading =========================================== */

.section-heading__title {
  color: var(--theme-text);
}

.section-heading__lede {
  color: var(--theme-text);
}

.section-heading__lede:empty {
  display: none;
}


/* ==== menu-tabs ================================================= */

.menu-tabs__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.menu-tabs__tab {
  position: relative;
  padding: var(--space-xs) var(--space-m);
  color: var(--theme-text);
  --stroke-frame-color: var(--theme-brand);
  transition: color var(--duration-base) var(--ease-standard);
}

.menu-tabs__fill {
  position: absolute;
  inset: 0;
  background-color: var(--theme-brand);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.menu-tabs__label {
  position: relative;
  z-index: 1;
  color: inherit;
}

.menu-tabs__tab[aria-selected="true"] {
  color: var(--theme-on-brand);
}

.menu-tabs__tab[aria-selected="true"] .menu-tabs__fill {
  opacity: 1;
}

/* The frame only draws on tabs that are not already filled. */
.menu-tabs__tab[aria-selected="true"]::before,
.menu-tabs__tab[aria-selected="true"]::after {
  content: none;
}

.menu-tabs__panels {
  inline-size: 100%;
}

.menu-tabs__panel {
  inline-size: 100%;
}

.menu-tabs__panel[hidden] {
  display: none;
}

/* Only animate the panel that the script actually swaps in. */
.menu-tabs__panel:not([hidden])[data-entered] {
  animation: u-fade-in var(--duration-base) var(--ease-standard) both;
}

/* Panels are focusable so a long drinks list can be scrolled from the
   keyboard; the ring should hug the panel, not the page. */
.menu-tabs__panel:focus-visible {
  outline-offset: calc(var(--focus-ring-offset) * -1);
}

/* With no script, every panel is visible; separate them so the page still
   reads as three distinct menus. */
.menu-tabs__panels:not([data-enhanced="true"]) .menu-tabs__panel + .menu-tabs__panel {
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-l);
  border-block-start: var(--border-width-control) solid var(--theme-text-muted);
}

@container (max-width: 34rem) {
  .menu-tabs__tab {
    padding-inline: var(--space-s);
  }
}


/* ==== menu-cell ================================================= */

.menu-cell__grain {
  display: none;
}

.menu-cell__body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.menu-cell__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-m);
  inline-size: 100%;
}

.menu-cell__header:has(.menu-cell__title:empty):has(.menu-cell__aside:empty) {
  display: none;
}

.menu-cell__title {
  color: var(--theme-brand);
}

.menu-cell__title:empty {
  display: none;
}

.menu-cell__aside {
  flex: none;
  color: var(--theme-brand);
}

.menu-cell__aside:empty {
  display: none;
}

.menu-cell__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  inline-size: 100%;
  margin: 0;
}

.menu-cell__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  inline-size: 100%;
  color: inherit;
}

.menu-cell__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--space-m);
  row-gap: var(--space-3xs);
  inline-size: 100%;
  margin: 0;
}

.menu-cell__name {
  max-inline-size: 70%;
  color: inherit;
}

.menu-cell__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-weight: var(--font-primary-bold);
  white-space: nowrap;
}

.menu-cell__price:has(.menu-cell__amount:empty):has(.menu-cell__unit:empty) {
  display: none;
}

.menu-cell__unit {
  font-weight: var(--font-primary-regular);
  color: inherit;
}

.menu-cell__unit:empty {
  display: none;
}

.menu-cell__description {
  max-inline-size: var(--measure-prose);
  font-size: var(--text-main-font-size);
  line-height: var(--line-height-1-3);
  color: inherit;
}

.menu-cell__description:empty {
  display: none;
}

/* In a narrow container the dish name gets the full width and the price drops
   underneath it, rather than being squeezed to two characters per line. */
@container (max-width: 22rem) {
  .menu-cell__name {
    max-inline-size: 100%;
  }

  .menu-cell__row {
    flex-direction: column;
  }
}


/* ==== menu-week ================================================= */

.menu-week__header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs);
  inline-size: 100%;
}

.menu-week__title {
  color: var(--theme-brand);
}

.menu-week__badge {
  margin: 0;
  color: var(--theme-text);
}

.menu-week__days {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.menu-week__day {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  inline-size: 100%;
}

.menu-week__day-title {
  color: var(--theme-brand);
}

.menu-week__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin: 0;
}

.menu-week__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.menu-week__name {
  margin: 0;
  color: var(--theme-text);
}

.menu-week__description {
  margin: 0;
  max-inline-size: var(--measure-prose);
  font-size: var(--text-main-font-size);
  line-height: var(--line-height-1-3);
}

.menu-week__description:empty {
  display: none;
}

@container (max-width: 24rem) {
  .menu-week__header {
    flex-direction: column;
    gap: var(--space-3xs);
  }
}


/* ==== gallery-strip ============================================= */

.gallery__list {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr));
  gap: var(--space-m);
  margin: 0;
}

.gallery__item {
  position: relative;
  margin: 0;
  overflow: clip;
  aspect-ratio: 1;
}

.gallery__list--wide .gallery__item {
  aspect-ratio: 3 / 2;
}

.gallery__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transform: none;
  transition: transform var(--duration-base) var(--ease-standard);
}

.gallery__item:hover .gallery__image,
.gallery__item:focus-within .gallery__image {
  transform: scale(1.1);
}

/* Breakpoints are on the component's own container, so the strip adapts
   wherever it is placed — full width, in a grid cell, or in a sidebar. */
@container (max-width: 46rem) {
  .gallery__list {
    --gallery-columns: 2;
  }
}

@container (max-width: 28rem) {
  .gallery__list {
    --gallery-columns: 1;
  }
}


/* ==== content-band ============================================== */

.content-band__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.content-band__inner {
  display: flex;
  padding-block: var(--padding-block-section);
}

.content-band__card {
  inline-size: 50%;
  --frame-color: var(--swatch-primary);
  --frame-fill: var(--swatch-neutral-50);
  --frame-gap: var(--space-xs);
  --frame-pad: var(--space-s);
}

.content-band__card-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  color: var(--swatch-neutral-950);
}

.content-band__title {
  max-inline-size: 26ch;
  color: var(--swatch-neutral-950);
}

/* The card gives up the float and takes the full measure once its own
   container can no longer hold two comfortable columns. */
@container (max-width: 56rem) {
  .content-band__card {
    inline-size: 100%;
  }
}


/* ==== contact-panel ============================================= */

.contact-panel__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  padding-block-start: var(--padding-block-section);
  padding-block-end: var(--space-m);
}

.contact-panel__title {
  max-inline-size: 30ch;
  color: var(--theme-text);
  text-align: center;
}

.contact-panel__wordmark {
  inline-size: 100%;
  max-inline-size: var(--size-30);
  margin: 0;
  /* The section sits on the green ground, where the brand green is the
     ground. Follow the theme's ink instead, or the wordmark disappears. */
  color: var(--theme-text);
}

.contact-panel__wordmark svg {
  inline-size: 100%;
  block-size: auto;
}

.contact-panel__exceptions {
  margin-block-start: var(--space-m);
}

/* No upcoming dates — or the script removed the ones that have passed — and
   the heading goes with them, rather than standing over an empty list. */
.contact-panel__exceptions:not(:has([data-exception])) {
  display: none;
}

.contact-panel__exceptions-title {
  margin-block-end: var(--space-2xs);
}

.contact-panel__exception-why {
  color: var(--theme-text-muted);
}

.contact-panel__exception-why::before {
  content: " — ";
}

.contact-panel__address {
  font-style: normal;
}

.contact-panel__address-line {
  display: block;
}

.contact-panel__address-link {
  text-decoration: none;
  text-underline-offset: 0.2em;
}

.contact-panel__address-link:hover,
.contact-panel__address-link:focus-visible {
  text-decoration: underline;
}

.contact-panel__hours-title {
  color: var(--theme-text);
}

/* The map keeps a stable box whether it is showing the consent notice or the
   embed, so accepting it never shifts the page under the pointer. */
.contact-panel__map {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 3 / 1;
  min-block-size: clamp(14rem, 32vh, 25rem);
  overflow: clip;
  background-color: var(--swatch-primary-soft);
}

.contact-panel__map iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.contact-panel__map-consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-s);
  text-align: center;
}

.contact-panel__map-text {
  max-inline-size: 40ch;
  color: var(--theme-text);
}

@container (max-width: 40rem) {
  .contact-panel__map {
    aspect-ratio: 4 / 3;
  }
}


/* ==== site-footer =============================================== */

.site-footer__frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
  border: var(--border-width-main) solid var(--theme-text);
}

.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.site-footer__wordmark {
  inline-size: 100%;
  max-inline-size: var(--size-50);
  margin: 0;
  color: var(--theme-text);
}

.site-footer__wordmark svg {
  inline-size: 100%;
  block-size: auto;
}

.site-footer__nav-list {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin: 0;
}

.site-footer__link {
  display: block;
  padding: var(--space-2xs) var(--space-xs);
  color: var(--theme-text);
  white-space: nowrap;
  --stroke-frame-color: var(--theme-text);
}

.site-footer__link:hover {
  color: var(--theme-text);
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  /* Bottom-aligned so the legal line finishes level with the last contact
     row — the phone number — rather than floating up beside the address. */
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.site-footer__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.site-footer__social {
  display: block;
  inline-size: var(--size-1-5);
  color: var(--theme-text);
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-footer__social svg {
  inline-size: 100%;
  block-size: auto;
}

.site-footer__social:hover {
  color: var(--theme-text-muted);
}

.site-footer__address {
  font-style: normal;
  color: var(--theme-text);
}

.site-footer__address-line {
  display: block;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: 0;
}

.site-footer__contact-link {
  color: var(--theme-text-muted);
}

.site-footer__contact-link:hover {
  color: var(--theme-text);
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3xs);
  text-align: end;
}

.site-footer__legal-list {
  justify-content: flex-end;
  gap: var(--space-m);
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin: 0;
}

.site-footer__legal-link {
  color: var(--theme-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer__legal-link:hover {
  color: var(--theme-text-muted);
}

.site-footer__fineprint {
  margin: 0;
  color: var(--theme-text-muted);
}

.site-footer__fineprint:empty {
  display: none;
}

@container (max-width: 44rem) {
  .site-footer__top,
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__legal {
    align-items: flex-start;
    text-align: start;
  }

  .site-footer__legal-list {
    justify-content: flex-start;
  }
}


/* ==== cookie-consent ============================================ */

/* Full width, a third of the viewport tall. A consent choice tucked into a
   corner invites a reflexive click on whichever button is nearest; one that
   takes a third of the screen asks to be read, which is the only reason to
   ask at all. */
.cookie-consent__banner {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-s);
  min-block-size: 33vh;
  padding: var(--space-m) var(--space-s);
  border-block-start: var(--border-width-control) solid var(--theme-border);
  background-color: var(--swatch-primary);
  color: var(--swatch-secondary);
  box-shadow: var(--shadow-supersoft);
  animation: u-lift-in var(--duration-base) var(--ease-standard) both;
}

.cookie-consent__banner[hidden] {
  display: none;
}

.cookie-consent__text {
  margin: 0;
  max-inline-size: 60ch;
  color: var(--swatch-secondary);
  text-align: center;
}

.cookie-consent__inline {
  display: inline;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.cookie-consent__inline:hover {
  color: var(--swatch-on-brand-muted);
}

.cookie-consent__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  inline-size: 100%;
}

/* Out of the centred row and into the corner of the bar. */
.cookie-consent__close {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-end: var(--space-xs);
  display: flex;
  align-items: center;
  color: var(--swatch-secondary);
}

.cookie-consent__close svg {
  inline-size: var(--size-0-75);
  block-size: auto;
}

/* --------------------------------------------------------------------------
   Reopen glyph
   -------------------------------------------------------------------------- */
.cookie-consent__reopen {
  position: fixed;
  inset-block-end: var(--space-xs);
  inset-inline-start: var(--space-xs);
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  aspect-ratio: 1;
  padding: var(--size-0-25);
  background-color: var(--swatch-neutral-50);
  color: var(--swatch-primary);
  box-shadow: var(--shadow-supersoft);
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.cookie-consent__reopen[hidden] {
  display: none;
}

.cookie-consent__reopen:hover,
.cookie-consent__reopen:focus-visible {
  background-color: var(--swatch-primary);
  color: var(--swatch-secondary);
}

.cookie-consent__reopen svg {
  inline-size: 100%;
  block-size: auto;
}

/* --------------------------------------------------------------------------
   Preferences sheet
   -------------------------------------------------------------------------- */
/* Cream, via .u-theme-light in tokens.css rather than a bare background and
   colour here. Painting it by hand left every descendant reading the GREEN
   page's --theme-text-muted: cream notes on a cream sheet, which is why the
   categories were unreadable. */
.cookie-consent__dialog {
  inline-size: min(36rem, calc(100% - var(--space-m)));
  max-block-size: min(70vh, 45rem);
  padding: 0;
  border: 0;
  box-shadow: var(--shadow-supersoft);
}

.cookie-consent__dialog::backdrop {
  background-color: var(--swatch-scrim);
  animation: u-fade-in var(--duration-base) var(--ease-standard) both;
}

.cookie-consent__dialog[open] {
  animation: u-lift-in var(--duration-base) var(--ease-standard) both;
}

.cookie-consent__sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-s);
}

.cookie-consent__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
}

.cookie-consent__dismiss {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--theme-text-muted);
}

.cookie-consent__dismiss:hover {
  color: var(--swatch-neutral-950);
}

.cookie-consent__dismiss svg {
  inline-size: var(--size-0-75);
  block-size: auto;
}

.cookie-consent__intro {
  max-inline-size: none;
}

.cookie-consent__bulk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.cookie-consent__categories {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin: 0;
}

.cookie-consent__category {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.cookie-consent__category-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
}

.cookie-consent__category-label {
  margin: 0;
}

.cookie-consent__note {
  margin: 0;
  max-inline-size: var(--measure-prose);
  color: var(--theme-text-muted);
}

.cookie-consent__always {
  color: var(--theme-text-muted);
  white-space: nowrap;
}

.cookie-consent__category[data-locked="false"] .cookie-consent__always,
.cookie-consent__category[data-locked="true"] .cookie-consent__switch {
  display: none;
}

/* --------------------------------------------------------------------------
   The switch — boxy like everything else in the system, never a pill.

   Geometry comes from ONE token: the track is H tall and 2H wide, the knob is
   square and inset on every side, so it travels exactly H. Deliberately not
   calc() across two different clamp() tokens: that arithmetic is correct but
   brittle to read and easy to "fix" wrongly. Never add a fudge factor to the
   translate.
   -------------------------------------------------------------------------- */
.cookie-consent__switch {
  --switch-h: var(--size-1-5);
  --switch-inset: 0.1875rem;
  position: relative;
  flex: none;
  display: block;
  inline-size: calc(var(--switch-h) * 2);
  block-size: var(--switch-h);
  border: var(--border-width-control) solid var(--swatch-neutral-400);
  background-color: transparent;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.cookie-consent__input {
  position: absolute;
  inset: 0;
  z-index: 2;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cookie-consent__track {
  position: absolute;
  inset: 0;
  display: block;
}

.cookie-consent__knob {
  position: absolute;
  inset-block: var(--switch-inset);
  inset-inline-start: var(--switch-inset);
  aspect-ratio: 1;
  background-color: var(--swatch-neutral-400);
  transition:
    transform var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.cookie-consent__switch:has(.cookie-consent__input:checked) {
  border-color: var(--swatch-primary);
  background-color: var(--swatch-primary);
}

.cookie-consent__input:checked ~ .cookie-consent__track .cookie-consent__knob {
  transform: translateX(var(--switch-h));
  background-color: var(--swatch-secondary);
}

.cookie-consent__switch:has(.cookie-consent__input:focus-visible) {
  outline: var(--focus-ring-width) solid var(--theme-focus);
  outline-offset: var(--focus-ring-offset);
}

.cookie-consent__foot {
  display: flex;
  justify-content: flex-end;
  inline-size: 100%;
}

@media (max-width: 30rem) {
  .cookie-consent__banner {
    max-inline-size: none;
  }

  .cookie-consent__category-head {
    flex-wrap: wrap;
  }
}


/* ==== legal-doc ================================================= */

.legal-doc__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-m);
}

.legal-doc__head {
  display: flex;
  flex-direction: column;
  gap: var(--size-1);
}

.legal-doc__title {
  color: var(--theme-text);
}

.legal-doc__updated {
  margin: 0;
  color: var(--theme-text-muted);
}

/* An empty list is what a section with only prose renders; hide it rather
   than leaving a stray bullet gap in the flow. */
.legal-doc__body ul:empty {
  display: none;
}

.legal-doc__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-block-start: var(--space-s);
  border-block-start: var(--border-width-control) solid var(--theme-text-muted);
}


/* ==== page-notice =============================================== */

.page-notice__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  text-align: center;
}

.page-notice__eyebrow {
  margin: 0;
  color: var(--theme-brand);
}

.page-notice__eyebrow:empty {
  display: none;
}

.page-notice__title {
  color: var(--theme-text);
}

.page-notice__body {
  margin: 0;
  color: var(--theme-text);
}

.page-notice__actions:empty {
  display: none;
}


/* ==== site-search =============================================== */

.site-search__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-inline-size: var(--measure-long-form);
}

.site-search__title {
  color: var(--theme-text);
}

.site-search__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.site-search__field {
  display: flex;
  gap: var(--space-2xs);
  inline-size: 100%;
}

.site-search__input {
  flex: 1;
  min-inline-size: 0;
  padding: var(--size-0-5) var(--size-1);
  border: var(--border-width-control) solid var(--swatch-neutral-400);
  border-radius: var(--radius-none);
  background-color: var(--swatch-neutral-50);
  color: var(--swatch-neutral-950);
  font-size: var(--text-large-font-size);
}

.site-search__input:focus-visible {
  border-color: var(--theme-brand);
}

.site-search__hint {
  margin: 0;
  color: var(--theme-text-muted);
}

.site-search__status {
  margin: 0;
  color: var(--theme-text-muted);
}

.site-search__status:empty {
  display: none;
}

.site-search__results {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.site-search__result {
  border-block-start: var(--border-width-control) solid var(--theme-text-muted);
}

.site-search__result:last-child {
  border-block-end: var(--border-width-control) solid var(--theme-text-muted);
}

.site-search__result[hidden] {
  display: none;
}

.site-search__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding-block: var(--space-xs);
}

.site-search__link:hover .site-search__result-title {
  color: var(--theme-brand);
}

.site-search__result-note {
  color: var(--theme-text-muted);
}

.site-search__empty[hidden] {
  display: none;
}

@container (max-width: 30rem) {
  .site-search__field {
    flex-direction: column;
  }
}


/* ==== token-swatches ============================================ */

.token-swatches__title {
  color: var(--theme-text);
}

.token-swatches__note {
  margin: 0;
  max-inline-size: var(--measure-prose);
  color: var(--theme-text-muted);
}

.token-swatches__note:empty {
  display: none;
}

.token-swatches__grid {
  display: grid;
  grid-template-columns: repeat(var(--swatch-columns, 5), minmax(0, 1fr));
  gap: var(--space-s);
  margin: 0;
}

.token-swatches__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.token-swatches__chip {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  aspect-ratio: 3 / 2;
  padding: var(--space-2xs);
  border: var(--border-width-control) solid var(--swatch-neutral-300);
}

.token-swatches__ratio {
  font-weight: var(--font-primary-bold);
}

.token-swatches__name,
.token-swatches__token,
.token-swatches__hex {
  margin: 0;
}

.token-swatches__token,
.token-swatches__hex {
  color: var(--theme-text-muted);
}

.token-swatches__token code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

@container (max-width: 48rem) {
  .token-swatches__grid { --swatch-columns: 3; }
}

@container (max-width: 26rem) {
  .token-swatches__grid { --swatch-columns: 2; }
}


/* ==== all caps ==================================================
   The nav and every label in the menus are set in caps. Prose, prices and
   dish descriptions are not: caps wreck the measure and flatten the Swedish
   diacritics that carry half these dish names.
   -------------------------------------------------------------------------- */
.site-header__link,
.site-footer__link,
.menu-tabs__label,
.menu-cell__title,
.menu-cell__name,
.menu-week__title,
.menu-week__day-title {
  text-transform: uppercase;
}


/* ==== menu-today ================================================ */

/* Dagens lunch is this week's list narrowed to today, so every weekday is in
   the page and menu-today.js reveals one. The list is display:flex, which
   beats the browser's own rule for [hidden], so hiding has to be said here or
   all five days show at once. */
.menu-today [data-today][hidden],
.menu-today [data-today-veg][hidden] {
  display: none;
}

.menu-today__note {
  margin: 0;
  color: var(--theme-text-muted);
}

/* The day's dishes and the week's vegetarian are two <ul>s only because they
   are two CMS queries. Giving the column that holds them the same gap the
   list puts between its own items closes the seam: the vegetarian reads as
   the next dish you can order today, with no label and no rule above it. */
.menu-today__lists {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}


/* ==== menu-actions ============================================== */

/* The print affordance for whichever menu panel is open. It sits in normal
   flow at the top right rather than being positioned over the panel, so it
   can never land on top of the menu it belongs to. */
.menu-actions {
  display: flex;
  justify-content: flex-end;
  margin-block-end: var(--space-s);
}

/* The row ships hidden and menu-tabs.js reveals it; a display declaration
   outranks the UA rule for [hidden], so it has to be spelled out. */
.menu-actions[hidden] {
  display: none;
}

.menu-actions__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
}

.menu-actions__icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
}


/* ==== lunch-sheet =============================================== */

/* The printable week menu. It is in the document on every load and never
   visible on screen: the @media print block below is the only thing that
   reveals it, and only while the Lunch tab's print button has flagged the
   document. An ordinary Cmd+P still prints the page.

   Everything inside is sized in mm and pt rather than in the page's fluid
   tokens, because this one component is laid out for a sheet of paper and
   not for a viewport. The sizes are picked so a full week — eleven dishes,
   each with a description — lands on ONE page with room left over, even
   when every description wraps. */
.lunch-sheet {
  display: none;
}

@media print {
  /* No page margin, which is also what keeps the browser's own header and
     footer off the paper: the URL, the date and the page number are drawn in
     the margin, so a page with none has nowhere to put them. The sheet
     supplies the margin it needs as its own padding instead. */
  @page {
    size: A4;
    margin: 0;
  }

  :root[data-printing="lunch"] .lunch-sheet {
    display: block;
  }

  /* Everything else goes, so the sheet starts on page one with no blank
     pages behind it. The sprite stays: it carries the <symbol> the wordmark
     below is a <use> of. */
  :root[data-printing="lunch"] body > *:not(.lunch-sheet):not([data-wl-component="brand-sprite"]) {
    display: none !important;
  }

  /* Nothing after the sheet, and nothing split across a break. */
  .lunch-sheet,
  .lunch-sheet__page {
    break-inside: avoid;
    break-after: avoid;
  }

  .menu-actions {
    display: none;
  }
}

.lunch-sheet__page {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 190mm;
  margin-inline: auto;
  /* The sizes below fit a normal week comfortably, but "normal" is not a
     guarantee and a menu that spills onto a second page is a broken menu.
     menu-tabs.js measures the real content before printing and sets this,
     so an unusually wordy week is shrunk to fit rather than split. */
  transform: scale(var(--lunch-sheet-scale, 1));
  transform-origin: top center;
  padding: 8mm 10mm;
  background-color: #fff;
  color: var(--swatch-neutral-950);
  font-family: var(--font-body);
}

.lunch-sheet__wordmark {
  display: block;
  inline-size: 40mm;
  block-size: auto;
  margin-block-end: 3.5mm;
  margin-inline: auto;
  color: var(--swatch-primary);
}

/* The two solid green blocks. Browsers drop background colour from printouts
   unless asked, and a menu whose banner prints white is not the design. */
.lunch-sheet__banner,
.lunch-sheet__price {
  background-color: var(--swatch-primary);
  color: #fff;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.lunch-sheet__banner {
  margin: 0;
  padding-block: 2mm;
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}

.lunch-sheet__body {
  border-inline: 2px dotted var(--swatch-primary);
  padding: 4.5mm 6mm;
}

.lunch-sheet__hours {
  margin: 0 0 5mm;
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.lunch-sheet__veg {
  margin-block-end: 5mm;
  padding: 3.5mm;
  border: 1px solid var(--swatch-primary);
  text-align: center;
  break-inside: avoid;
}

.lunch-sheet__veg-title {
  margin: 0 0 1.5mm;
  color: var(--swatch-primary);
  font-size: 10pt;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lunch-sheet__day {
  margin-block-end: 3mm;
  break-inside: avoid;
}

.lunch-sheet__day:last-of-type {
  margin-block-end: 0;
}

.lunch-sheet__day-title {
  margin: 0 0 1.5mm;
  color: var(--swatch-primary);
  font-size: 10.5pt;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lunch-sheet__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lunch-sheet__item {
  margin-block-end: 2mm;
  break-inside: avoid;
}

.lunch-sheet__item:last-child {
  margin-block-end: 0;
}

.lunch-sheet__name {
  margin: 0;
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lunch-sheet__description {
  margin: 0;
  color: var(--swatch-neutral-500);
  font-size: 7pt;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lunch-sheet__price {
  inline-size: fit-content;
  margin-block: 5mm 2.5mm;
  margin-inline: auto;
  padding: 1.5mm 11mm;
  border-radius: var(--radius-round);
  font-size: 10pt;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.lunch-sheet__allergens {
  margin: 0;
  color: var(--swatch-neutral-500);
  font-size: 6.5pt;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}