/*
 * site.css: the only stylesheet for valentinoslangleymill.co.uk (Valentino's, Langley Mill).
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing, motion (custom properties)
 *   2. Fonts         @font-face for self-hosted Montserrat and Open Sans
 *   3. Base          reset and element defaults (the "valentinos" App4 theme's reset + typography)
 *   4. Layout        page content column
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         rare page-specific rules: "=== Page: <path> ==="
 *   7. Utilities     a handful of helpers
 *
 * Breakpoints (from the original "valentinos" theme; media queries can't use custom properties):
 *   ≤ 1020px  home tiles: smaller text
 *   ≤ 768px   mobile layout: olive "MENU" bar replaces the nav, info bar stacks, body text 15px,
 *             hero 2:1, page banner 100px, tiles 2 per row, app bar shows badges only,
 *             menu headings 18px, ORDER NOW button smaller
 *   ≤ 580px   tiles: smaller text; ORDER NOW button hidden
 *   ≤ 420px   tiles 1 per row
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (from the original's computed styles) */
  --color-red: #e61828;            /* info bar, app bar, open menu heading, button hover */
  --color-green-dark: #112c27;     /* header, menu headings, item names, buttons */
  --color-olive: #91a221;          /* links, nav hover, MENU bar, review names, slider dots */
  --color-olive-dark: #738404;     /* mobile menu list */
  --color-olive-light: #acbf31;    /* mobile menu item hover */
  --color-orange: #ff9600;         /* ORDER NOW button */
  --color-text: #333333;
  --color-text-review: #222222;
  --color-text-desc: #4a4a4a;
  --color-panel: #eeeeee;          /* menu body panel */
  --color-bg: #ffffff;
  --color-white: #ffffff;

  /* Typography */
  --font-body: "Montserrat", "Open Sans", sans-serif;
  --font-button: "Open Sans", sans-serif;
  --text-base: 14px;               /* 15px at ≤768 */
  --leading: 1.5;                  /* 1.4 at ≤768 (both give 21px lines) */
  --text-h2: 35px;                 /* 28px at ≤768 (menu headings 18px) */
  --text-banner: 40px;             /* page banner title; 20px at ≤768 */

  /* Spacing */
  --gutter: 20px;
  --content-width: 1000px;         /* .page-content max width */
  --text-column: 600px;            /* centred text column on About / Contact */
  --banner-height: 200px;          /* 100px at ≤768 */

  /* Motion (match the original's timings) */
  --duration: 200ms;               /* buttons, gallery zoom: ".2s linear" */
  --duration-tile: 100ms;          /* home tiles: ".1s linear" */
  --duration-menu: 200ms;          /* SlickNav slideToggle default */
  --duration-accordion: 600ms;     /* menu page slideToggle(600) */
  --ease-menu: cubic-bezier(0.45, 0, 0.55, 1); /* close to jQuery "swing" */
}

@media (max-width: 768px) {
  :root {
    --text-base: 15px;
    --leading: 1.4;
    --text-h2: 28px;
    --text-banner: 20px;
    --banner-height: 100px;
  }
}

/* ============ 2. Fonts ============ */
/* Self-hosted Google Fonts (variable woff2, latin subset, OFL).
 * Montserrat 400/700 is the body font; Open Sans 300 is the theme's button font. */
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-latin-variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* ============ 3. Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, iframe { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: #181818; font-weight: 700; line-height: 1.25; }
h2 { font-size: var(--text-h2); margin-bottom: 9px; }
p { margin: 0 0 18px; }
ul { margin: 0; padding: 0; list-style: none; }
li { margin: 0; }
a { color: var(--color-olive); text-decoration: none; }
a:hover, a:focus { color: var(--color-red); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 768px) {
  h2 { line-height: 1.3; }
}

/* ============ 4. Layout ============ */
/* #content on the original: 50px top/bottom, 20px sides; inner column max 1000px. */
.page-content { padding: 50px var(--gutter); }
.page-content__inner { width: 100%; max-width: var(--content-width); margin: auto; }

/* ============ 5. Components ============ */

/* === Component: skip-link === */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 8px 16px; background: var(--color-bg); color: var(--color-green-dark); }
.skip-link:focus { left: 16px; }

/* === Component: site-header (red info bar; dark green bar with centred logo and nav). Not sticky. === */
.site-header {
  position: relative;
  z-index: 100;
  background-color: var(--color-green-dark);
  color: var(--color-white);
  box-shadow: 0 -5px 10px 5px #000000;
}
.site-header__brand { padding: 0 var(--gutter); }
.site-header__logo { display: block; width: 70%; max-width: 400px; margin: 15px auto; }
.site-header__logo img { width: 100%; vertical-align: baseline; } /* inline, as on the original (keeps its 6px baseline gap) */

/* === Component: info-bar (top red bar: Facebook icon · address · hours · phone) === */
.info-bar {
  display: flex;
  align-items: center;
  padding: 5px;
  background-color: var(--color-red);
  color: var(--color-white);
  font-size: 12px;
  line-height: 12px;
}
.info-bar__item { display: flex; align-items: center; min-height: 20px; }
.info-bar__item + .info-bar__item::before {
  content: "";
  display: block;
  flex: none;
  width: 2px;
  height: 2px;
  margin: 0 12px;
  background-color: var(--color-white);
}
.info-bar__social { display: block; }
.info-bar__social img { display: block; width: 20px; height: 20px; }
.info-bar__social:focus-visible { outline-color: var(--color-white); }
@media (max-width: 768px) {
  .info-bar { display: block; text-align: center; }
  .info-bar__item { display: block; min-height: 0; margin-bottom: 3px; }
  .info-bar__item:last-child { margin-bottom: 0; }
  .info-bar__item + .info-bar__item::before { display: none; }
  .info-bar__item--social { min-height: 22px; }
  .info-bar__social { display: inline-block; vertical-align: top; }
}

/* === Component: site-nav (desktop: centred uppercase white links under the logo; olive on hover) === */
.site-nav { text-align: center; }
.site-nav__list li { display: inline-block; }
.site-nav__list a {
  display: block;
  padding: 10px 20px;
  font-size: 0.9em;
  text-transform: uppercase;
  color: var(--color-white);
}
.site-nav__list a:hover,
.site-nav__list a:focus { color: var(--color-olive); }

/* === Component: nav-toggle (mobile olive "MENU ☰" bar, SlickNav look) === */
.nav-toggle { display: none; }

@media (max-width: 768px) {
  .nav-toggle {
    position: relative;
    display: block;
    width: 100%;
    min-height: 30px;
    margin: 0;
    padding: 6px;
    border: 0;
    border-radius: 0;
    background-color: var(--color-olive);
    color: var(--color-white);
    font: inherit;
    line-height: 1.125em;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* Invisible extension of the tap area into the dark bar above, so the 30px bar is a 44px target. */
  .nav-toggle::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .nav-toggle:focus-visible { outline: 2px solid var(--color-white); outline-offset: -3px; }
  .nav-toggle__text { display: inline-block; font-size: 0.8em; }
  .nav-toggle__icon { display: inline-block; margin: 0 5px -1px; vertical-align: baseline; }
  .nav-toggle__icon span { display: block; width: 20px; height: 2px; border-radius: 1px; background-color: var(--color-white); }
  .nav-toggle__icon span + span { margin-top: 3px; }

  /* Slide-down list: grid row 0fr → 1fr. align-items: stretch keeps the list clipped while it animates. */
  .site-nav {
    display: grid;
    grid-template-rows: 0fr;
    align-items: stretch;
    background-color: var(--color-olive);
    visibility: hidden;
    transition: grid-template-rows var(--duration-menu) var(--ease-menu), visibility 0s linear var(--duration-menu);
  }
  .site-nav.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--duration-menu) var(--ease-menu), visibility 0s; }
  .site-nav__list {
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid var(--color-white);
    background-color: var(--color-olive-dark);
    font-size: 0.875em;
  }
  .site-nav.is-open .site-nav__list, html:not(.js) .site-nav__list { margin-top: 0; }
  .site-nav__list li { display: block; border-bottom: 1px solid var(--color-white); }
  .site-nav__list li:last-child { border-bottom: 0; }
  /* 44px tall items (original 29px) for the tap-target rule; labels in their original case. */
  .site-nav__list a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 5px 10px;
    font-size: inherit;
    text-transform: none;
    color: var(--color-white);
  }
  .site-nav__list a:hover,
  .site-nav__list a:focus { background-color: var(--color-olive-light); color: var(--color-white); }
  .site-nav__list a:focus-visible { outline-color: var(--color-white); outline-offset: -3px; }

  /* Without JavaScript the menu can't toggle: show the list open. */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav { grid-template-rows: 1fr; visibility: visible; }
}

/* === Component: hero (home: full-width cover photo, 60% of the window height; 2:1 at ≤768; ORDER NOW button) ===
 * The original set the height with JS (60% of window height ≥769px, 50% of the width below). */
.hero {
  position: relative;
  width: 100%;
  height: 60vh;
  max-height: 720px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 -10px 10px -10px #000000;
}
.hero__order {
  position: absolute;
  right: 50px;
  bottom: 50px;
  display: block;
  width: 200px;
  padding: 30px;
  border-radius: 30px;
  background-color: var(--color-orange);
  box-shadow: inset -3px -3px 5px 0 rgb(0 0 0 / 0.5), inset 3px 3px 3px 0 rgb(255 255 255 / 0.5);
  box-sizing: content-box;
}
.hero__order img { display: block; width: 100%; }
@media (max-width: 768px) {
  .hero { height: auto; aspect-ratio: 2 / 1; }
  .hero__order { width: 150px; right: 30px; bottom: 30px; padding: 20px; border-radius: 20px; }
}
@media (max-width: 580px) {
  .hero__order { display: none; }
}

/* === Component: tiles (home: 4 photo links with uppercase labels; text grows, overlay lightens on hover) === */
.tiles { display: flex; flex-wrap: wrap; width: 100%; margin-bottom: 6px; } /* the original's inline-block row left a 6px gap below */
.tile {
  display: block;
  width: 25%;
  padding: 10% 0;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-white);
  font-size: 2em;
  line-height: 0;
  text-shadow: 2px 2px 2px #000000;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1000px rgb(0 0 0 / 0.4);
  transition: all var(--duration-tile) linear;
}
.tile:hover,
.tile:focus {
  color: var(--color-white);
  font-size: 2.2em;
  box-shadow: inset 0 0 0 1000px rgb(0 0 0 / 0.1);
}
.tile:focus-visible { outline: 2px solid var(--color-white); outline-offset: -4px; }
@media (max-width: 1020px) {
  .tile { font-size: 1.7em; }
  .tile:hover, .tile:focus { font-size: 1.9em; }
}
@media (max-width: 768px) {
  .tiles { margin-bottom: 5px; }
  .tile { width: 50%; padding: 12% 0; }
}
@media (max-width: 580px) {
  .tile { font-size: 1.4em; }
  .tile:hover, .tile:focus { font-size: 1.6em; }
}
@media (max-width: 420px) {
  .tile { width: 100%; padding: 20% 0; }
}

/* === Component: reviews (home: customer quotes, olive dots; Swiper) ===
 * Section height matches the original: 50px padding, review text + 30px, name + 30px, dots row. */
.reviews { padding: 50px var(--gutter); text-align: center; color: var(--color-text-review); }
.review-slider { padding-bottom: 20px; }
.review__text { display: block; margin: 0 auto 30px; }
.review__text::before,
.review__text::after { content: " '' "; white-space: pre; }
.review__name {
  display: block;
  width: 80%;
  max-width: 800px;
  margin: 0 auto 30px;
  font-size: 0.9em;
  font-style: italic;
  color: var(--color-olive);
}
.review-slider .swiper-pagination.swiper-pagination-bullets {
  position: absolute;
  top: auto;
  bottom: 4px;
  left: 0;
  width: 100%;
  line-height: 0;
}
.review-slider .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 9px;
  --swiper-pagination-bullet-horizontal-gap: 9px;
  border-radius: 10px;
  background-color: var(--color-olive);
  opacity: 0.5;
}
.review-slider .swiper-pagination-bullet-active { opacity: 1; }
.review-slider .swiper-pagination.swiper-pagination-bullets { left: -4px; } /* Slick drew each dot at the left of a 20px button */
/* Before Swiper starts (or without JS) show only the first review. */
.review-slider:not(.swiper-initialized) .swiper-slide:not(:first-child) { display: none; }

/* === Component: page-banner (inner pages: cover photo, 40% dark tint, uppercase white title) === */
.page-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--banner-height);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1000px rgb(0 0 0 / 0.4);
}
.page-banner__title {
  width: 100%;
  font-size: var(--text-banner);
  line-height: 1;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 2px 2px 2px #000000;
}

/* === Component: menu-accordion (menu page: dark green heading bars open a grey panel; native <details>) ===
 * Independent sections (several can be open). Open heading turns red. site.js "accordion"
 * module adds the 600ms slide; without JS <details> opens instantly. */
.menu-section > summary { list-style: none; }
.menu-section > summary::-webkit-details-marker { display: none; }
.menu-head {
  margin: 0 0 9px;
  padding: 5px 20px;
  background-color: var(--color-green-dark);
  color: var(--color-white);
  font-size: var(--text-h2);
  font-weight: 400;
  text-align: center;
  cursor: pointer;
}
.menu-section[open] > summary .menu-head,
.menu-section.is-opening > summary .menu-head { background-color: var(--color-red); }
.menu-section.is-closing > summary .menu-head { background-color: var(--color-green-dark); }
.menu-section > summary:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }
.menu-body {
  margin-bottom: 10px;
  padding: 20px;
  background-color: var(--color-panel);
  text-align: center;
}
.menu-item__name { margin-top: 15px; font-weight: 700; color: var(--color-green-dark); }
.menu-item__name:first-child { margin-top: 0; }
.menu-item__desc { font-size: 0.9em; font-style: italic; color: var(--color-text-desc); }
.menu-item__desc p { margin: 0; }
@media (max-width: 768px) {
  .menu-head { font-size: 18px; }
}

/* === Component: gallery-grid (rows of three square photo links; zoom on hover; GLightbox) === */
.gallery-grid { width: 100%; max-width: 980px; margin: 0 auto; }
.gallery-grid__row { display: flex; }
.gallery-grid__item {
  position: relative;
  display: block;
  width: 30%;
  aspect-ratio: 1 / 1;
  margin: 0 5% 5% 0;
  overflow: hidden;
}
.gallery-grid__item:nth-child(3) { margin-right: 0; }
.gallery-grid__row:last-child .gallery-grid__item { margin-bottom: 0; }
.gallery-grid__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--duration) linear;
}
.gallery-grid__item:hover img, .gallery-grid__item:focus img { transform: scale(1.1); }
/* GLightbox: dark overlay close to the original Colorbox (styled here, vendor files untouched). */
.glightbox-clean .gclose, .glightbox-clean .gnext, .glightbox-clean .gprev { background-color: rgb(0 0 0 / 0.75); }

/* === Component: text-column (centred 600px text block on About / Contact) === */
.text-column { max-width: var(--text-column); margin: 0 auto 50px; text-align: center; }
.text-column--intro { margin-bottom: 40px; }

/* === Component: map (keyless Google Maps iframe; 100% of the 1000px column × 400px) === */
.map-embed { margin: 0 0 18px; }
.map { display: inline-block; vertical-align: baseline; width: 100%; height: 400px; border: 0; }

/* === Component: button (theme button: full-width dark green bar, Open Sans 300 uppercase; hover red) === */
.button {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 20px;
  border: 0;
  border-radius: 0;
  background-color: var(--color-green-dark);
  color: var(--color-white);
  font-family: var(--font-button);
  font-size: 1.1em;
  font-weight: 300;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--duration) linear;
}
.button:hover,
.button:focus { background-color: var(--color-red); color: var(--color-white); }

/* === Component: contact-email (replaces the CF7 form: address and phone in the form's 600px column; no form, no email) === */
.contact-email { max-width: var(--text-column); margin: 0 auto; text-align: center; }
.contact-email__line { margin: 0 0 15px; word-break: break-word; }
.contact-email__label { display: block; font-size: 0.9em; color: var(--color-text); }
.contact-email > :last-child { margin-bottom: 0; }

/* === Component: app-bar (red "Get our Mobile App" strip with iPhone / Android badges) === */
.app-bar {
  height: 50px;
  padding: 10px var(--gutter);
  text-align: center;
  font-size: 24px;
  line-height: 0;
  color: var(--color-white);
  background-color: var(--color-red);
}
.app-bar__link { display: inline-block; position: relative; width: 144px; height: 30px; margin-bottom: -7.5px; }
.app-bar__link img { display: block; width: 100%; height: auto; }
.app-bar__link:focus-visible { outline-color: var(--color-white); }
@media (max-width: 768px) {
  .app-bar { height: auto; font-size: 0; color: transparent; }
  .app-bar__link { width: 130px; height: auto; margin: 0 5px; }
}

/* === Component: site-footer (copyright + Powered by OrderYOYO) === */
.site-footer {
  padding: 30px var(--gutter);
  text-align: center;
  font-size: 0.8em;
  color: var(--color-text);
}
.site-footer p { margin: 0; }
.site-footer a, .site-footer a:hover, .site-footer a:focus { color: var(--color-text); }

/* ============ 6. Pages ============ */

/* ============ 7. Utilities ============ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.text-center { text-align: center; }

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}