/*
 * site.css: the only stylesheet for simonsdiner.co.uk.
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing, breakpoints (custom properties)
 *   2. Fonts         @font-face for self-hosted fonts
 *   3. Base          reset and element defaults
 *   4. Layout        boxed container, Elementor-like widget stack, columns
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         page-specific rules: "=== Page: <path> ==="
 *   7. Utilities     a handful of helpers
 *
 * Values come from the original's computed styles (design-system/live-measure.txt), the
 * Elementor page CSS (discovery/css/post-16.css), the kit CSS (design-system/src/post-4.css)
 * and, for the Elementor Pro menus that no longer render, the archived post-16.css
 * (discovery/wayback/post-16-20250328.css).
 *
 * Breakpoints (Elementor's; media queries can't use custom properties):
 *   mobile  ≤ 767px    tablet 768px–1024px    desktop ≥ 1025px
 *   The menus collapse to a burger at ≤ 1024px (Elementor Pro "dropdown: tablet").
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-app: #ff55a4;            /* "Our App" pill */
  --color-order: #4eb5c2;          /* "Let me order" button */
  --color-cream: #ffeba5;          /* About box */
  --color-magenta: #fb05f3;        /* About box double border */
  --color-heading-dark: #2b2b2b;   /* "About us" */
  --color-text-dark: #131313;      /* About copy */
  --color-nav-hover: #56b4ef;      /* header menu hover/active */
  --color-nav-pointer: #ec2ad5;    /* header menu underline */
  --color-accent: #61ce70;         /* Elementor kit accent: footer menu hover/underline */
  --color-dropdown-text: #33373d;  /* Elementor Pro dropdown defaults */
  --color-dropdown-hover: #55595c;
  --color-arrow: rgb(238 238 238 / 0.9);

  /* Typography */
  --font-roboto: "Roboto", Arial, sans-serif;
  --font-poppins: "Poppins", Arial, sans-serif;

  /* Layout */
  --container: 1140px;
  --container-header: 1440px;
  --widget-gap: 20px;              /* Elementor kit: space between widgets */
  --column-pad: 10px;              /* Elementor default column gap */
  --header-h: 116px;               /* header bar height (desktop); hero fills the rest of the screen */

  /* Shape and motion */
  --radius-button: 3px;
  --duration: 300ms;
  --ease: ease;
}
@media (max-width: 1024px) { :root { --header-h: 114px; } }

/* ============ 2. Fonts ============ */
/* Self-hosted Google Fonts (SIL OFL), latin subset. Roboto is the variable file (400/500/600 used). */
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-latin-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ============ 3. Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-roboto); font-size: 16px; line-height: 1.5; color: var(--color-black); background: var(--color-white); }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; }
img { display: block; }
h1, h2, h3, h4 { font-family: var(--font-roboto); font-weight: 600; line-height: 1; margin: 0; }
p { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-nav-hover); outline-offset: 2px; }

/* ============ 4. Layout ============ */
/* Boxed container (Elementor "boxed" section, 1140px; tablet up to 1024px). */
.container { width: 100%; max-width: var(--container); margin-inline: auto; }

/* Widget stack: an Elementor column. Children are spaced like Elementor widgets (20px). */
.stack { display: flex; flex-direction: column; padding: var(--column-pad); }
.stack > * + * { margin-top: var(--widget-gap); }
.stack--center { align-items: center; text-align: center; }

/* Spacer (Elementor spacer widget): height via modifier */
.spacer { height: 50px; flex: none; }
.spacer--10 { height: 10px; }
.spacer--150 { height: 150px; }

/* Two columns side by side from 768px, stacked on mobile */
.columns { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .columns { grid-template-columns: 1fr 1fr; } }

/* Every section is a positioned layer, as in Elementor, so later sections paint over
   anything that overflows from earlier ones (the app section overlaps upwards). */
.band { position: relative; }

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

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

/* === Component: site-header (black bar: menu left, "Our App" right) === */
.site-header { position: relative; z-index: 20; background: var(--color-black); padding: 25px 30px; }
.site-header__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: start; max-width: var(--container-header); margin-inline: auto; }
.site-header__col { padding: var(--column-pad); min-width: 0; }
.site-header__col--app { text-align: right; }
@media (max-width: 767px) {
  .site-header__inner { grid-template-columns: 1fr; }
}

/* === Component: button (Elementor button: 12px 24px, line-height 1, 0.3s transition) === */
.button { display: inline-block; padding: 12px 24px; border-radius: var(--radius-button); font-family: var(--font-roboto); font-weight: 500; font-size: 15px; line-height: 1; color: var(--color-white); background: var(--color-accent); text-decoration: none; transition: all var(--duration); }
.button--app { background: var(--color-app); border-radius: 50px; }
.button--order { background: var(--color-order); border-radius: 20px; font-size: 24px; }

/* === Component: menu (rebuilt Elementor Pro nav-menu; header and footer variants) ===
   Desktop: horizontal links with a fading underline pointer.
   ≤1024px: a burger toggle (centred) opens a white dropdown that slides down over the page
   (overlay rather than Elementor's in-flow list, so anchor jumps land correctly; manifest d8). */
.menu__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.menu__link { position: relative; display: block; padding: 13px 20px; line-height: 20px; text-decoration: none; color: var(--color-white); transition: color var(--duration); }
.menu__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--menu-pointer, var(--color-accent)); opacity: 0; transition: opacity var(--duration); }
.menu__link:hover, .menu__link:focus-visible, .menu__link.is-active { color: var(--menu-hover, var(--color-accent)); }
.menu__link:hover::after, .menu__link:focus-visible::after, .menu__link.is-active::after { opacity: 1; }
.menu__toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto; padding: 0; border: 0; border-radius: 3px; background: rgb(255 255 255 / 0.05); color: var(--color-white); cursor: pointer; }
.menu__icon-close { display: none; }
.menu__toggle[aria-expanded="true"] .menu__icon-open { display: none; }
.menu__toggle[aria-expanded="true"] .menu__icon-close { display: block; }
.menu__dropdown { display: none; }
.menu__dropdown-list { list-style: none; margin: 0; padding: 0; min-height: 0; overflow: hidden; }
.menu__dropdown-link { display: block; padding: 15px 20px; line-height: 20px; text-align: left; text-decoration: none; color: var(--color-dropdown-text); background: var(--color-white); transition: color var(--duration), background-color var(--duration); }
.menu__dropdown-link:hover, .menu__dropdown-link:focus-visible { color: var(--color-white); background: var(--color-dropdown-hover); }
@media (max-width: 1024px) {
  .menu__main { display: none; }
  .menu__toggle { display: flex; }
  .menu { position: relative; }
  .menu__dropdown { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 30; display: grid; grid-template-rows: 0fr; align-items: stretch; box-shadow: 0 6px 16px rgb(0 0 0 / 0.25); visibility: hidden; transition: grid-template-rows var(--duration) var(--ease), visibility 0s linear var(--duration); }
  .menu__dropdown.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--duration) var(--ease), visibility 0s; }
}
/* Header menu: Poppins 18px, hover/active #56b4ef, underline #ec2ad5 (archived post-16.css) */
.menu--header { --menu-hover: var(--color-nav-hover); --menu-pointer: var(--color-nav-pointer); font-family: var(--font-poppins); font-size: 18px; font-weight: 400; }
/* Footer menu: centred, white, Elementor kit defaults otherwise (Roboto 600, accent hover) */
.menu--footer { font-family: var(--font-roboto); font-size: 16px; font-weight: 600; }
.menu--footer .menu__list { justify-content: center; }

/* === Component: site-footer (black: footer menu, then the Powered by OrderYOYO bar) === */
.site-footer { background: var(--color-black); color: var(--color-white); }
.site-footer__menu { max-width: var(--container); margin-inline: auto; padding: 70px 40px 40px; }
.site-footer__bar { padding: 12px 30px 16px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--color-white); }
.site-footer__bar a { color: inherit; }
.site-footer__bar a:hover { color: var(--color-nav-hover); }

/* === Component: section-title (Elementor heading widgets, all line-height 1, centred) === */
.section-title { text-align: center; }
.section-title--light { color: var(--color-white); }
.offer__title { font-size: 50px; font-weight: 400; }  /* "What we offer" */

/* === Component: hero (neon brick background, logo, Order Now image button, address) ===
   Fills the screen under the header from 768px, like Elementor "height: fit to screen". */
.hero { display: flex; flex-direction: column; justify-content: space-between; background: url("/wp-content/uploads/2022/05/bg.png") center / cover no-repeat; }
.hero::before { content: ""; }
@media (min-width: 768px) { .hero { height: calc(100vh - var(--header-h)); } }
.hero__body { width: 100%; }
.hero__logo { width: 500px; }
@media (max-width: 1024px) { .hero__logo { width: 58%; } }
@media (max-width: 767px) { .hero__logo { width: 85%; } }
.hero__order img { width: 463px; }
.hero__title { font-size: 24px; color: var(--color-white); }

/* === Component: about-box (cream box, magenta double border, pink glow) === */
.about-box { padding: 60px 30px; background: var(--color-cream); border: 13px double var(--color-magenta); box-shadow: -100px 64px 49px 100px rgb(234 8 182 / 0.5); }
.about-box:hover { box-shadow: -100px 64px 59px 100px rgb(251 5 243 / 0.57); }
@media (max-width: 1024px) { .about-box .container { max-width: 695px; } }
.about-box__title { font-size: 42px; color: var(--color-heading-dark); }
.about-box__text { font-size: 20px; font-weight: 500; line-height: 37px; color: var(--color-text-dark); }

/* === Component: brick-band (sections on the neon brick background) === */
.brick-band { background: url("/wp-content/uploads/2022/05/bg.png") 0 0 / cover no-repeat; }
.brick-band--tiled { background-size: auto; background-repeat: repeat; }

/* === Component: image-pair (two images side by side) === */
.image-pair { align-items: center; }
.image-pair__item { display: flex; flex-direction: column; align-items: center; }
.image-pair__item img { width: 100%; }
.image-pair__item--narrow img { max-width: 536px; }
.image-pair__item--narrow { padding-bottom: 70px; }
.image-pair__item--wide { padding-bottom: 50px; }

/* === Component: carousel (Swiper; library CSS in /assets/vendor/swiper-14.3.0/) ===
   Elementor image carousel: arrows outside the slides (39px chevrons), dots below. */
.carousel { position: relative; width: 100%; }
.carousel .swiper { margin: 0 30px; padding-bottom: 30px; }
.carousel .swiper-slide { height: auto; }
.carousel .swiper-slide img { width: 100%; height: auto; }
.carousel__arrow { position: absolute; top: calc((100% - 30px) / 2); z-index: 2; display: flex; align-items: center; justify-content: center; width: 39px; height: 39px; margin-top: -19.5px; padding: 0; border: 0; background: none; color: var(--color-arrow); cursor: pointer; }
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }
.carousel__arrow svg { width: 15px; height: 26px; }
.carousel .swiper-pagination { bottom: 8px; }
.carousel .swiper-pagination-bullet { width: 6px; height: 6px; background: #000; opacity: 0.2; }
.carousel .swiper-pagination-bullet-active { opacity: 1; }

/* === Component: app-promo (Download Our App: full-screen band that overlaps the band above) === */
.app-promo { display: flex; align-items: center; justify-content: center; margin-top: -112px; background: url("/wp-content/uploads/2022/05/Group-24.png") center / cover no-repeat; }
@media (min-width: 768px) { .app-promo { height: 100vh; } }
.app-promo__inner { width: 100%; padding: 0; }
.app-promo__title { font-size: 56px; color: var(--color-white); }
.app-promo__badges { display: block; }

/* === Component: find-us (map left, "Where to find us" right) === */
.find-us { padding: 60px 30px; background: var(--color-white); }
.find-us__map { padding: var(--column-pad); }
.find-us__info { display: flex; flex-direction: column; justify-content: center; padding: 16px 30px; text-align: center; color: var(--color-black); }
.find-us__info > * + * { margin-top: var(--widget-gap); }
.find-us__title { font-size: 41px; }
.find-us__address { font-size: 24px; }

/* === Component: map (keyless Google Maps iframe) === */
.map { display: block; width: 100%; height: 300px; border: 0; }

/* === Component: contact-band (black "Contact us" band; the footer continues it) === */
.contact-band { padding: 110px 40px 0; background: var(--color-black); }
.contact-band__title { font-size: 57px; color: var(--color-white); text-align: center; }

/* === Component: contact-email (replaces WordPress forms: a mailto button + visible address) ===
   Not used on this site yet: the contact form had no usable address (manifest d2). */
.contact-email { display: grid; gap: 16px; justify-items: center; text-align: center; color: var(--color-white); }
.contact-email__address { font-weight: 600; word-break: break-word; }
.contact-email__phone a { color: inherit; }

/* === Component: not-found (404 page) === */
.not-found { padding: 80px 30px; text-align: center; color: var(--color-white); }
.not-found__title { font-size: 50px; font-weight: 400; }
.not-found__text { margin-top: 20px; font-size: 20px; font-weight: 500; line-height: 1.6; }
.not-found__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 30px; }

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

/* ============ 7. Utilities ============ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-title { display: none; }  /* the original hides its page title (Elementor "hide title") */

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