/* ==========================================================================
   Components – reusable BEM classes (.block, .block__element, .block--modifier).
   Uses semantic tokens from tokens.css only.
   ========================================================================== */

/* ---------- Skip link (accessibility) ---------- */
.skip-link {
  position: absolute;
  left: var(--spacing-offset);
  top: var(--spacing-offscreen);
  padding: var(--spacing-inline-sm) var(--spacing-inline-md);
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-raised);
}

.skip-link:focus {
  top: var(--spacing-offset);
}

/* ---------- Button ----------
   Figma: Button component (Components page).
   Type:  .button--primary | .button--secondary | .button--secondary-light
   Size:  large is the default; add .button--medium for medium.
   State: hover and keyboard focus are automatic; disabled is the
          `disabled` attribute on <button>, or aria-disabled="true" on <a>.
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-inline-sm);
  padding: var(--spacing-button-l-y) var(--spacing-button-l-x);
  font-family: var(--button-l-font-family);
  font-size: var(--button-l-font-size);
  font-weight: var(--button-l-font-weight);
  line-height: var(--button-l-line-height);
  letter-spacing: var(--button-l-letter-spacing);
  white-space: nowrap;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-button);
  background: transparent;
  cursor: pointer;
}

.button:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-width);
}

.button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
}

/* Links can't be truly disabled, so stop clicks on them */
a.button[aria-disabled="true"] {
  pointer-events: none;
}

/* Size: medium */
.button--medium {
  padding: var(--spacing-button-m-y) var(--spacing-button-m-x);
  font-family: var(--button-m-font-family);
  font-size: var(--button-m-font-size);
  font-weight: var(--button-m-font-weight);
  line-height: var(--button-m-line-height);
  letter-spacing: var(--button-m-letter-spacing);
}

/* Type: primary (filled) */
.button--primary {
  border: var(--border-width-button) solid var(--color-button-border-primary);
  background: var(--color-button-fill-primary);
  color: var(--color-button-text-primary);
}

/* Text color is restated so the general link hover color can't override it */
.button--primary:hover {
  border-color: var(--color-button-border-primary-hover);
  background: var(--color-button-fill-primary-hover);
  color: var(--color-button-text-primary);
}

.button--primary:disabled,
.button--primary[aria-disabled="true"] {
  border-color: var(--color-button-border-primary-disabled);
  background: var(--color-button-fill-primary-disabled);
  color: var(--color-button-text-primary-disabled);
}

/* Type: secondary (outline) */
.button--secondary {
  border: var(--border-width-button) solid var(--color-button-border-secondary);
  background: var(--color-button-fill-secondary);
  color: var(--color-button-text-secondary);
}

.button--secondary:hover {
  border-color: var(--color-button-border-secondary-hover);
  background: var(--color-button-fill-secondary-hover);
  color: var(--color-button-text-secondary-hover);
}

/* Type: secondary light (outline, for dark backgrounds) */
.button--secondary-light {
  border: var(--border-width-button) solid var(--color-button-border-secondary-light);
  background: var(--color-button-fill-secondary);
  color: var(--color-button-text-secondary-light);
}

.button--secondary-light:hover {
  border-color: var(--color-button-fill-secondary-light-hover);
  background: var(--color-button-fill-secondary-light-hover);
  color: var(--color-button-text-secondary-light-hover);
}

.button--secondary-light:focus-visible {
  outline-color: var(--color-focus-ring-light);
}

/* Disabled secondary and secondary light share the same look in Figma */
.button--secondary:disabled,
.button--secondary[aria-disabled="true"],
.button--secondary-light:disabled,
.button--secondary-light[aria-disabled="true"] {
  border-color: var(--color-button-border-secondary-disabled);
  background: var(--color-button-fill-secondary);
  color: var(--color-button-text-secondary-disabled);
}

/* ---------- Navigation bar ----------
   Figma: Navigation Bar component (Components page).
   Variants: desktop | tablet/mobile (menu closed) | tablet/mobile (menu open).
   Desktop shows logo, links and the Order Now button in one row. Below
   64rem (1024px) the links and button move into a menu opened by the
   toggle button; js/main.js adds .nav--open and updates aria-expanded.
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--color-background-brand-dark);
}

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--nav-bar-padding-y);
}

.nav__brand {
  display: block;
  flex-shrink: 0;
}

.nav__logo {
  width: auto;
  height: var(--nav-logo-height);
}

/* Desktop: the menu wrapper disappears so links and button sit in the bar */
.nav__menu {
  display: contents;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--nav-links-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  font-family: var(--nav-menu-font-family);
  font-size: var(--nav-menu-font-size);
  font-weight: var(--nav-menu-font-weight);
  line-height: var(--nav-menu-line-height);
  letter-spacing: var(--nav-menu-letter-spacing);
  color: var(--color-text-primary-light);
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:hover {
  color: var(--color-text-primary-light);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--nav-toggle-size);
  height: var(--nav-toggle-size);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav__toggle img {
  width: var(--nav-toggle-size);
  height: var(--nav-toggle-size);
}

/* Dark background, so every focus outline in the nav is white */
.nav a:focus-visible,
.nav button:focus-visible,
.nav .button:focus-visible {
  outline-color: var(--color-focus-ring-light);
}

/* Tablet and mobile. Breakpoint: CSS variables can't be used in media queries.
   64rem (1024px) is where the desktop row no longer fits. */
@media (max-width: 64rem) {
  .nav__bar {
    flex-wrap: wrap;
    padding-block: 0;
  }

  .nav__brand {
    padding-block: var(--nav-bar-padding-y-mobile);
  }

  .nav__logo {
    height: var(--nav-logo-height-mobile);
  }

  .nav__toggle {
    display: inline-flex;
  }

  /* Open menu: full-width panel below the bar */
  .nav__menu {
    display: none;
    /* Full screen width: the bar's width plus both gutters */
    flex-basis: calc(100% + 2 * var(--spacing-page-gutter));
    flex-direction: column;
    gap: var(--nav-menu-gap);
    margin-inline: calc(-1 * var(--spacing-page-gutter));
    padding: var(--nav-menu-padding);
    background: var(--color-background-brand);
  }

  .nav--open .nav__menu {
    display: flex;
  }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: var(--nav-menu-gap);
  }

  .nav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--nav-item-height);
    border: var(--border-width-button) solid var(--color-button-border-secondary-light);
    background: var(--color-button-fill-secondary);
    color: var(--color-button-text-secondary-light);
  }

  .nav__link:hover {
    background: var(--color-button-fill-secondary-light-hover);
    color: var(--color-button-text-secondary-light-hover);
    text-decoration: none;
  }

  /* Order Now becomes a full-width block with the nav menu text style */
  .nav__cta {
    width: 100%;
    height: var(--nav-item-height);
    padding: 0;
    border-radius: 0;
    font-family: var(--nav-menu-font-family);
    font-size: var(--nav-menu-font-size);
    font-weight: var(--nav-menu-font-weight);
    line-height: var(--nav-menu-line-height);
    letter-spacing: var(--nav-menu-letter-spacing);
  }
}

/* ---------- Footer ----------
   Figma: Footer component (Components page).
   Variants: desktop (one row) | tablet/mobile (stacked, below 64rem).
   The HTML order is brand, links, social, button (the desktop reading
   order); on tablet/mobile the button moves up under the brand, as in Figma.
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-background-brand-dark);
}

.footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: calc(var(--footer-content-max) + 2 * var(--footer-padding));
  margin-inline: auto;
  padding: var(--footer-padding);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--footer-brand-gap);
  width: var(--footer-brand-width);
}

.footer__logo {
  align-self: flex-start; /* keep its proportions instead of stretching to the column */
  width: auto;
  height: var(--footer-logo-height);
}

/* Figma text style: body large */
.footer__tagline {
  margin: 0;
  font-family: var(--body-l-font-family);
  font-size: var(--body-l-font-size);
  font-weight: var(--body-l-font-weight);
  line-height: var(--body-l-line-height);
  letter-spacing: var(--body-l-letter-spacing);
  color: var(--color-text-primary-light-subtle);
}

.footer__group {
  display: flex;
  flex-direction: column;
  gap: var(--footer-column-gap);
}

/* Figma text style: accent. Written in normal case in the HTML so screen
   readers don't spell it out; shown in capitals as in Figma. */
.footer__heading {
  margin: 0;
  font-family: var(--accent-font-family);
  font-size: var(--accent-font-size);
  font-weight: var(--accent-font-weight);
  line-height: var(--accent-line-height);
  letter-spacing: var(--accent-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-accent-orange);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--footer-column-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Figma text style: footer menu */
.footer__link {
  display: inline-block;
  font-family: var(--footer-menu-font-family);
  font-size: var(--footer-menu-font-size);
  font-weight: var(--footer-menu-font-weight);
  line-height: var(--footer-menu-line-height);
  letter-spacing: var(--footer-menu-letter-spacing);
  color: var(--color-text-primary-light);
  text-decoration: none;
  white-space: nowrap;
}

.footer__link:hover {
  color: var(--color-text-primary-light);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.footer__social {
  display: flex;
  align-items: center;
  gap: var(--footer-social-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--footer-social-size);
  height: var(--footer-social-size);
  border-radius: var(--radius-pill);
  background: var(--color-background-primary);
}

.footer__social-link:hover {
  background: var(--color-background-brand-light);
}

/* Dark background, so every focus outline in the footer is white */
.footer a:focus-visible,
.footer .button:focus-visible {
  outline-color: var(--color-focus-ring-light);
}

/* Tablet and mobile (same 64rem breakpoint as the navigation bar) */
@media (max-width: 64rem) {
  .footer {
    flex-direction: column;
    gap: var(--footer-stack-gap);
    padding: var(--footer-padding-y-mobile) var(--spacing-page-gutter);
  }

  .footer__brand {
    width: 100%;
  }

  /* Visual order from Figma: brand, button, links, social */
  .footer__cta {
    order: 1;
    width: 100%;
  }

  .footer__group--links {
    order: 2;
  }

  .footer__group--social {
    order: 3;
  }
}

/* ---------- Article excerpt slider ----------
   Figma: article-excerpt-carousel (Components page).
   Variants: article = Vogue | Tatler, breakpoint = desktop | tablet/mobile.
   All slides share one grid cell so the slider keeps the height of the
   tallest slide and the page doesn't jump when slides change.
   js/main.js rotates slides every 8 seconds (data-interval, in ms; 0 = off),
   pauses while it has keyboard focus, and fills the progress bars.
   -------------------------------------------------------------------------- */
.article-slider {
  display: grid;
  max-width: var(--article-max-width);
  border-radius: var(--article-radius);
  overflow: hidden;
}

.article-slide {
  display: flex;
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--article-fade-duration) ease,
    visibility 0s linear var(--article-fade-duration);
}

.article-slide.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--article-fade-duration) ease;
}

@media (prefers-reduced-motion: reduce) {
  .article-slide,
  .article-slide.is-active {
    transition: none;
  }
}

.article-slide__image {
  flex-shrink: 0;
  width: var(--article-image-width);
  height: auto;
  min-height: 100%;
  object-fit: cover;
}

.article-slide__card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--article-card-gap);
  min-width: 0;
  padding: var(--article-card-padding);
  background: var(--color-background-brand-dark);
}

.article-slide__excerpt {
  display: flex;
  flex-direction: column;
  gap: var(--article-excerpt-gap);
  margin: 0;
}

/* Figma text style: h4 */
.article-slide__quote {
  margin: 0;
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  color: var(--color-text-primary-light);
}

/* Figma text style: body extra large, shown in capitals */
.article-slide__source {
  font-family: var(--body-xl-font-family);
  font-size: var(--body-xl-font-size);
  font-weight: var(--body-xl-font-weight);
  font-style: normal;
  line-height: var(--body-xl-line-height);
  letter-spacing: var(--body-xl-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-accent-purple-light);
}

/* Pagination: one 6px bar per article, 100px wide and 8px apart (Figma
   pagination-wrapper). The current article's bar fills with white as its
   time runs out: js/main.js sets --article-progress (0 to 1) on the slider.
   Without the script, or when rotation is off, the current bar is full.
   Each button is a 24px tall click area; negative margins keep the layout
   at the bar height. */
.article-slider {
  --article-progress: 1;
}

.article-slide__pages {
  display: flex;
  gap: var(--article-progress-gap);
  margin-block: calc((var(--article-progress-height) - var(--article-progress-hit-height)) / 2);
}

.article-slide__page {
  display: flex;
  align-items: center;
  width: var(--article-progress-width);
  height: var(--article-progress-hit-height);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.article-slide__page::before {
  content: "";
  width: 100%;
  height: var(--article-progress-height);
  border-radius: var(--radius-pill);
  background: var(--color-background-brand-light);
}

/* The fill: a white bar over the track, as wide as the time shown so far */
.article-slide__page[aria-current="true"]::before {
  background:
    linear-gradient(var(--color-background-primary), var(--color-background-primary))
      left / calc(var(--article-progress) * 100%) 100% no-repeat,
    var(--color-background-brand-light);
}

.article-slide__page:hover::before {
  background-color: var(--color-background-brand-extralight);
}

.article-slide__page[aria-current="true"] {
  cursor: default;
}

/* Dark background, so focus outlines are white */
.article-slide a:focus-visible,
.article-slide .button:focus-visible,
.article-slide__page:focus-visible {
  outline-color: var(--color-focus-ring-light);
}

/* Tablet and mobile: photo on top, smaller text (via tokens), medium button */
@media (max-width: 64rem) {
  .article-slide {
    flex-direction: column;
  }

  .article-slide__image {
    width: 100%;
    height: var(--article-image-height-mobile);
    min-height: 0;
  }

  .article-slide__card {
    gap: var(--article-card-gap-mobile);
    padding: var(--article-card-padding-mobile);
  }

  /* Bars share the full width of the card */
  .article-slide__pages {
    align-self: stretch;
  }

  .article-slide__page {
    flex: 1;
    width: auto;
  }

  .article-slide__cta {
    padding: var(--spacing-button-m-y) var(--spacing-button-m-x);
    font-family: var(--button-m-font-family);
    font-size: var(--button-m-font-size);
    font-weight: var(--button-m-font-weight);
    line-height: var(--button-m-line-height);
    letter-spacing: var(--button-m-letter-spacing);
  }
}

/* ---------- Providers badge ----------
   Figma: Providers Badge component (Components page). Static, not clickable.
   Type:    compact (default: black, outlined, hugs its content)
            | .provider-badge--full (dark purple, fills the width, bigger logos)
   Content: delivery apps (Grab, Foodpanda, ShopeeFood tiles) or Five/NEO.
   Below 64rem the text moves under the logos.
   -------------------------------------------------------------------------- */
.provider-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--badge-gap);
  /* Figma's padding plus 2px on every side (by request). Figma draws the
     border inside the edge, so it comes out of the padding. */
  padding:
    calc(var(--badge-padding-y) + var(--badge-padding-extra) - var(--border-width-button))
    calc(var(--badge-padding-end) + var(--badge-padding-extra) - var(--border-width-button))
    calc(var(--badge-padding-y) + var(--badge-padding-extra) - var(--border-width-button))
    calc(var(--badge-padding-start) + var(--badge-padding-extra) - var(--border-width-button));
  border: var(--border-width-button) solid var(--color-border-primary);
  border-radius: var(--badge-radius);
  background: var(--color-background-primary-dark);
  --badge-tile: var(--badge-tile-size);
}

.provider-badge--full {
  display: flex;
  width: 100%;
  padding: var(--badge-padding-full);
  border: none;
  background: var(--color-background-brand-dark);
  --badge-tile: var(--badge-tile-size-full);
}

.provider-badge__logos {
  display: flex;
  flex-shrink: 0;
  gap: var(--badge-logos-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Logo tile: brand-coloured square with the logo inside */
.provider-badge__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--badge-tile);
  height: var(--badge-tile);
  border-radius: var(--badge-tile-radius);
  overflow: hidden;
}

.provider-badge__tile--grab {
  background: var(--color-background-grab);
}

/* Grab logo: 27.5% of the tile tall, placed 37.5% from the top (as in Figma) */
.provider-badge__tile--grab .provider-badge__logo {
  position: absolute;
  top: 37.5%;
  left: 50%;
  width: auto;
  height: 27.5%;
  transform: translateX(-50%);
}

.provider-badge__tile--foodpanda {
  background: var(--color-background-foodpanda);
}

.provider-badge__tile--shopeefood {
  padding-inline: var(--badge-tile-inset);
  background: var(--color-background-shopeefood);
}

.provider-badge__tile--shopeefood .provider-badge__logo {
  width: 100%;
  height: auto;
}

.provider-badge__tile--five-neo {
  border-radius: var(--badge-tile-radius-five-neo);
  background: var(--color-background-primary);
}

.provider-badge__tile--five-neo .provider-badge__logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma text style: body medium (compact) or body large (full width) */
.provider-badge__text {
  display: flex;
  flex-direction: column;
  gap: var(--badge-text-gap);
  margin: 0;
  font-family: var(--body-m-font-family);
  font-size: var(--body-m-font-size);
  font-weight: var(--body-m-font-weight);
  line-height: var(--body-m-line-height);
  letter-spacing: var(--body-m-letter-spacing);
  white-space: nowrap;
}

.provider-badge--full .provider-badge__text {
  font-family: var(--body-l-font-family);
  font-size: var(--body-l-font-size);
  font-weight: var(--body-l-font-weight);
  line-height: var(--body-l-line-height);
  letter-spacing: var(--body-l-letter-spacing);
}

.provider-badge__label {
  color: var(--color-text-primary-light-faded);
}

.provider-badge__name {
  color: var(--color-text-primary-light);
}

/* Tablet and mobile: text under the logos. A single logo (Five/NEO) keeps
   its text beside it, as in the Figma Home mobile frame. */
@media (max-width: 64rem) {
  .provider-badge:not(:has(.provider-badge__tile--five-neo)) {
    flex-direction: column;
    align-items: flex-start;
  }

}

/* ---------- Dish card ----------
   Figma: Dish Card component (Components page). Static, not clickable.
   Stack: vertical (default: square photo on top) | .dish-card--horizontal
          (text left, 320px photo right). The HTML is the same for both:
          photo first, then text.
   Horizontal cards stack vertically below 48rem, where 630px won't fit.
   -------------------------------------------------------------------------- */
.dish-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--dish-card-radius);
  overflow: hidden;
  background: var(--color-background-accent);
}

/* Photo with a red fade at the bottom, blending into the card */
.dish-card__media {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 1;
}

.dish-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-background-accent), transparent var(--dish-card-fade-height));
}

.dish-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dish-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--dish-card-gap);
  padding: var(--dish-card-padding);
}

/* Figma: h3 font (Sharpie) at h5 size with h3 line height, in capitals */
.dish-card__name {
  margin: 0;
  font-family: var(--h3-font-family);
  font-size: var(--h5-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-primary-light);
}

/* Figma text style: body large */
.dish-card__description {
  margin: 0;
  font-family: var(--body-l-font-family);
  font-size: var(--body-l-font-size);
  font-weight: var(--body-l-font-weight);
  line-height: var(--body-l-line-height);
  letter-spacing: var(--body-l-letter-spacing);
  color: var(--color-text-primary-light-subtle);
}

/* Stack: horizontal */
.dish-card--horizontal {
  flex-direction: row-reverse;
}

.dish-card--horizontal .dish-card__media {
  width: var(--dish-card-image-size);
}

.dish-card--horizontal .dish-card__content {
  justify-content: center;
}

/* Figma: h3 font (Sharpie) at h4 size and line height */
.dish-card--horizontal .dish-card__name {
  font-size: var(--h4-font-size);
  line-height: var(--h4-line-height);
}

/* Mobile: horizontal cards stack like vertical ones */
@media (max-width: 48rem) {
  .dish-card--horizontal {
    flex-direction: column;
  }

  .dish-card--horizontal .dish-card__media {
    width: 100%;
  }

  /* Same name style as the vertical card (Figma Menu mobile frame) */
  .dish-card--horizontal .dish-card__name {
    font-size: var(--h5-font-size);
    line-height: var(--h3-line-height);
  }
}

/* ---------- Testimonial card ----------
   Figma: testimonial-card (Components page). Static, not clickable.
   Fills the width it's placed in (Figma: 413px, a third of a row).
   -------------------------------------------------------------------------- */
.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--testimonial-card-gap);
  margin: 0;
  padding: var(--testimonial-card-padding);
  border-radius: var(--testimonial-card-radius);
  background: var(--color-background-primary);
  box-shadow: var(--testimonial-card-shadow);
}

.testimonial-card__rating {
  display: flex;
  align-items: center;
  gap: var(--testimonial-rating-gap);
  margin: 0;
}

.testimonial-card__stars {
  display: flex;
  gap: var(--testimonial-stars-gap);
}

/* The star shape comes from star.svg; its colour comes from the token */
.testimonial-card__star {
  width: var(--testimonial-star-size);
  height: var(--testimonial-star-size);
  background: var(--color-background-ratings);
  mask: url("../assets/icons/star.svg") center / contain no-repeat;
}

/* Figma text style: accent */
.testimonial-card__score {
  font-family: var(--accent-font-family);
  font-size: var(--accent-font-size);
  font-weight: var(--accent-font-weight);
  line-height: var(--accent-line-height);
  letter-spacing: var(--accent-letter-spacing);
  color: var(--color-text-secondary);
}

.testimonial-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--testimonial-content-gap);
  margin: 0;
}

/* Figma text style: testimonial */
.testimonial-card__highlight {
  margin: 0;
  font-family: var(--testimonial-font-family);
  font-size: var(--testimonial-font-size);
  font-weight: var(--testimonial-font-weight);
  line-height: var(--testimonial-line-height);
  letter-spacing: var(--testimonial-letter-spacing);
  color: var(--color-text-primary);
}

/* Figma text style: paragraph */
.testimonial-card__review {
  margin: 0;
  font-family: var(--paragraph-font-family);
  font-size: var(--paragraph-font-size);
  font-weight: var(--paragraph-font-weight);
  line-height: var(--paragraph-line-height);
  letter-spacing: var(--paragraph-letter-spacing);
  color: var(--color-text-primary-subtle);
}

/* ---------- Page header ----------
   Big page title + intro (+ optional badge) on a textured banner, from the
   Menu page. HTML: <header class="page-header"> with an img.page-header__bg,
   then .page-header__inner > .page-header__text (h1.page-header__title +
   p.page-header__intro) and any badge after it.
   Desktop: text left, badge right, bottoms aligned. Below 64rem they stack.
   -------------------------------------------------------------------------- */
.page-header {
  position: relative;
  padding-block: var(--page-header-padding-y);
  overflow: hidden;
  background: var(--color-background-brand-dark);
}

.page-header__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkening layer over the background */
.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--page-header-overlay);
}

.page-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--page-header-gap);
}

.page-header__text {
  display: flex;
  flex: 0 1 var(--page-header-intro-width);
  flex-direction: column;
  gap: var(--page-header-text-gap);
  min-width: 0;
}

.page-header__inner > :not(.page-header__text) {
  flex-shrink: 0;
}

/* Figma text style: h1, in capitals */
.page-header__title {
  margin: 0;
  text-transform: uppercase;
  color: var(--color-text-primary-light);
}

/* Figma text style: body extra large */
.page-header__intro {
  margin: 0;
  font-family: var(--body-xl-font-family);
  font-size: var(--body-xl-font-size);
  font-weight: var(--body-xl-font-weight);
  line-height: var(--body-xl-line-height);
  letter-spacing: var(--body-xl-letter-spacing);
  color: var(--color-text-primary-light-subtle);
}

@media (max-width: 64rem) {
  .page-header__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--page-header-gap-mobile);
  }

  .page-header__text {
    flex-basis: auto;
  }
}

/* ---------- Branch ----------
   One branch: name, address and "Open in Maps" button on a panel, next to a
   photo (Branches page). HTML: <article class="branch"> with .branch__panel
   first, then .branch__media. Desktop: panel left, photo right; add
   .branch--reverse for photo left. Panel colour: dark by default (use a
   button--secondary-light), .branch--light for white (use button--secondary).
   Below 64rem the text sits above the photo.
   -------------------------------------------------------------------------- */
.branch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: var(--branch-min-height);
}

.branch--reverse .branch__media {
  order: -1;
}

.branch__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--branch-gap);
  padding: var(--branch-padding-y) var(--branch-padding-x);
  background: var(--color-background-brand-dark);
}

.branch__text {
  display: flex;
  flex-direction: column;
  gap: var(--branch-text-gap);
}

/* Figma text style: h3, in capitals */
.branch__name {
  margin: 0;
  font-family: var(--h3-font-family);
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-primary-light);
}

/* Figma text style: body extra large */
.branch__address {
  margin: 0;
  font-family: var(--body-xl-font-family);
  font-size: var(--body-xl-font-size);
  font-weight: var(--body-xl-font-weight);
  line-height: var(--body-xl-line-height);
  letter-spacing: var(--body-xl-letter-spacing);
  color: var(--color-text-primary-light-subtle);
}

.branch--light .branch__panel {
  background: var(--color-background-primary);
}

.branch--light .branch__name {
  color: var(--color-text-primary);
}

.branch--light .branch__address {
  color: var(--color-text-primary-subtle);
}

.branch__media {
  position: relative;
  overflow: hidden;
}

.branch__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark panel: white focus outline */
.branch:not(.branch--light) .button:focus-visible {
  outline-color: var(--color-focus-ring-light);
}

@media (max-width: 64rem) {
  .branch {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .branch--reverse .branch__media {
    order: 0;
  }

  .branch__media {
    height: var(--branch-media-height-mobile);
  }
}

/* ---------- Section head ----------
   Centred eyebrow + big title (+ optional button), from the Home page
   ("Fan favorites / Our beast-sellers", "Love for Burger Beast").
   Default colours are for light backgrounds; add .section-head--light on
   dark backgrounds.
   -------------------------------------------------------------------------- */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-head-gap);
  text-align: center;
}

/* Figma text style: accent, in capitals */
.section-head__eyebrow {
  margin: 0;
  font-family: var(--accent-font-family);
  font-size: var(--accent-font-size);
  font-weight: var(--accent-font-weight);
  line-height: var(--accent-line-height);
  letter-spacing: var(--accent-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-accent-purple);
}

/* Figma text style: h2, in capitals */
.section-head__title {
  margin: 0;
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-black);
}

.section-head--light .section-head__eyebrow {
  color: var(--color-text-accent-purple-light);
}

.section-head--light .section-head__title {
  color: var(--color-text-primary-light);
}

/* ---------- Split feature ----------
   Photo on one side, text panel on the other (Home: Awards and Story).
   HTML: media first, then panel. .split-feature--reverse puts the photo on
   the right on desktop. Panel background: .split-feature__panel--brand
   (purple) or a .split-feature__backdrop image inside the panel.
   Below 64rem the photo sits on top.
   -------------------------------------------------------------------------- */
.split-feature {
  display: grid;
  grid-template-columns: var(--split-media-ratio) var(--split-panel-ratio);
}

/* Mirrored: photo on the right, keeping the photo column the narrower one */
.split-feature--reverse {
  grid-template-columns: var(--split-panel-ratio) var(--split-media-ratio);
}

.split-feature--reverse .split-feature__media {
  order: 2;
}

.split-feature__media {
  position: relative;
  overflow: hidden;
}

.split-feature__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-feature__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--split-panel-gap);
  /* Side padding grows on wide screens so the content stays a centred
     720px column (text inside it keeps its alignment) */
  padding: var(--split-panel-padding-y)
    max(var(--split-panel-padding-x), calc((100% - var(--split-content-max-width)) / 2));
  overflow: hidden;
}

.split-feature__panel--brand {
  background: var(--color-background-brand);
}

/* Optional photo/texture behind the panel content */
.split-feature__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-feature__panel > :not(.split-feature__backdrop) {
  position: relative;
}

.split-feature__text {
  display: flex;
  flex-direction: column;
  gap: var(--split-text-gap);
}

/* Figma text style: h2, in capitals */
.split-feature__title {
  margin: 0;
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-primary-light);
}

/* Figma text style: body extra large. Paragraphs are a blank line apart. */
.split-feature__body p {
  margin: 0;
  font-family: var(--body-xl-font-family);
  font-size: var(--body-xl-font-size);
  font-weight: var(--body-xl-font-weight);
  line-height: var(--body-xl-line-height);
  letter-spacing: var(--body-xl-letter-spacing);
  color: var(--color-text-primary-light-subtle);
}

.split-feature__body p + p {
  margin-top: var(--body-xl-line-height);
}

@media (max-width: 64rem) {
  .split-feature,
  .split-feature--reverse {
    grid-template-columns: 1fr;
  }

  .split-feature--reverse .split-feature__media {
    order: 0;
  }

  .split-feature__media {
    height: var(--split-media-height-mobile);
  }

  .split-feature__panel {
    gap: var(--split-panel-gap-mobile);
  }
}

/* ---------- Award ----------
   Provider logo tile + award name, in a list (Home: Awards section).
   Reuses the providers badge logo tiles at a bigger size.
   -------------------------------------------------------------------------- */
.award-list {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--award-list-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.award {
  display: flex;
  align-items: center;
  gap: var(--award-gap);
  --badge-tile: var(--award-tile-size);
}

.award .provider-badge__tile {
  flex-shrink: 0;
}

/* The award Foodpanda logo (panda + wordmark) is taller than the badge one */
.award .provider-badge__tile--foodpanda .provider-badge__logo {
  width: auto;
  height: var(--award-foodpanda-logo-height);
}

/* Figma text style: body extra large */
.award__name {
  margin: 0;
  font-family: var(--body-xl-font-family);
  font-size: var(--body-xl-font-size);
  font-weight: var(--body-xl-font-weight);
  line-height: var(--body-xl-line-height);
  letter-spacing: var(--body-xl-letter-spacing);
  color: var(--color-text-primary-light);
}

@media (max-width: 64rem) {
  .award {
    --badge-tile: var(--award-tile-size-mobile);
  }
}

/* ---------- Style guide (styleguide.html) ---------- */
.styleguide__section {
  margin-block-end: var(--spacing-section);
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--styleguide-swatch-min-width), 1fr));
  gap: var(--spacing-inline-md);
  list-style: none;
  margin: 0 0 var(--spacing-stack-lg);
  padding: 0;
}

.swatch {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-sm);
  font-family: var(--body-s-font-family);
  font-size: var(--body-s-font-size);
  line-height: var(--body-s-line-height);
}

.swatch__chip {
  height: var(--styleguide-swatch-height);
  border: var(--border-default);
  border-radius: var(--radius-card);
  background: var(--swatch-color);
}

.swatch__name {
  font-weight: var(--body-m-font-weight);
  word-break: break-all;
}

.swatch__figma,
.swatch__ref,
.swatch__value {
  color: var(--color-text-secondary);
  word-break: break-all;
}

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

.type-specimen {
  padding-block: var(--spacing-stack-lg);
  border-top: var(--border-default);
}

.type-specimen__sample {
  margin-block: 0 var(--spacing-stack-md);
}

.type-specimen__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-stack-sm) var(--spacing-stack-lg);
  margin: 0;
  color: var(--color-text-secondary);
}

.type-specimen__meta dt {
  font-weight: var(--body-m-font-weight);
  color: var(--color-text-primary);
}

.type-specimen__meta dd {
  margin: 0;
}

.styleguide__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-inline-md);
  padding: var(--spacing-stack-lg);
  border-radius: var(--radius-card);
}

.styleguide__panel--brand-light {
  background: var(--color-background-brand-light);
}

.styleguide__panel--brand-dark {
  background: var(--color-background-brand-dark);
}

/* Comparison grid: 6 columns like the Figma component set */
.button-grid {
  display: grid;
  grid-template-columns: repeat(6, max-content);
  justify-items: start;
  margin-block-end: var(--spacing-stack-lg);
  overflow-x: auto;
}

.button-grid__label {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-text-primary);
}

.button-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--styleguide-card-min-width), 1fr));
  gap: var(--spacing-stack-lg);
}

.button-card {
  min-width: 0;
}

.code-snippet {
  position: relative;
  margin-block-start: var(--spacing-stack-sm);
  border-radius: var(--radius-card);
  background: var(--color-background-secondary);
}

.code-snippet__code {
  margin: 0;
  padding: var(--spacing-stack-md);
  padding-block-end: var(--spacing-section);
  overflow-x: auto;
  font-family: var(--code-font-family);
  font-size: var(--body-s-font-size);
  line-height: var(--body-s-line-height);
  color: var(--color-text-primary);
}

.code-snippet__copy {
  position: absolute;
  right: var(--spacing-stack-md);
  bottom: var(--spacing-stack-md);
}

/* Navigation bar previews: each variant renders in a frame at its Figma width */
.nav-card {
  margin-block-end: var(--spacing-stack-lg);
}

.nav-card__stage {
  overflow-x: auto;
  padding: var(--spacing-stack-md);
  border-radius: var(--radius-card);
  background: var(--color-background-brand-light);
}

.nav-frame {
  display: block;
  max-width: none;
  border: none;
}