/*
 * site.css: the only stylesheet for myhomefresh.co.uk (Home Fresh).
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing (custom properties)
 *   2. Fonts         @font-face for self-hosted fonts
 *   3. Base          reset and element defaults
 *   4. Layout        containers and sections
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         rare page-specific rules: "=== Page: <path> ==="
 *   7. Utilities     a handful of helpers
 *
 * Breakpoints (Elementor defaults on the original; media queries can't use custom properties):
 *   mobile  <= 767px    tablet 768px-1024px    desktop >= 1025px
 *   The header menu collapses to a burger at <= 1024px (Elementor Pro nav "dropdown: tablet").
 *
 * Editing: change tokens to restyle the site; add new components as new blocks;
 * add modifier classes (.menu-tile--x) instead of changing a component for one page.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (from the original's Elementor CSS) */
  --color-text: #000000;
  --color-bg: #ffffff;
  --color-green: #158a59;        /* buttons, INDIAN / MOROCCAN labels */
  --color-green-dark: #0e5537;   /* header wave (in background.jpg), discount badge */
  --color-muted: #555555;
  --color-overlay: rgb(0 0 0 / 0.6);

  /* Navigation colours: INFERRED (the original nav CSS was never archived; manifest d3).
     BUILD DEFAULT: change these tokens to restyle both menus. */
  --nav-color: #ffffff;              /* header menu text, on the green wave */
  --nav-pointer: #ffffff;            /* header menu underline on hover */
  --nav-toggle-color: #ffffff;       /* burger icon */
  --nav-dropdown-bg: var(--color-green-dark);
  --nav-dropdown-color: #ffffff;
  --footer-nav-color: #000000;       /* footer menu text, on white */

  /* Typography */
  --font-script: "Satisfy", "Brush Script MT", cursive;      /* "Welcome" */
  --font-display: "Secular One", "Arial Rounded MT Bold", Arial, sans-serif;  /* headings, buttons */
  --font-ui: "Roboto", "Helvetica Neue", Arial, sans-serif;  /* app heading, map heading, menus */

  /* Spacing (Elementor: 10px column padding, 20px widget spacing, 1140px boxed width) */
  --col-pad: 10px;
  --widget-gap: 20px;
  --container: 1140px;
  --radius-pill: 50px;
  --shadow: 0 6px 18px rgb(0 0 0 / 0.15);

  /* Height of the header that sits over the top of the hero (logo column: logo + 2 x 10px).
     Desktop/tablet: the logo is 251x58 but shrinks with its 1/3 column. Mobile: logo + burger row. */
  --header-h: calc(min(251px, (100vw - 20px) / 3 - 20px) * 0.2311 + 20px);

  /* Motion */
  --duration: 300ms;
  --ease: ease;
}
@media (max-width: 767px) {
  :root { --header-h: 132px; }
}

/* ============ 2. Fonts ============ */
/* Google Fonts, self-hosted (latin subset). Satisfy and Secular One only exist in 400;
   the original asks for 600 on some headings, so the browser synthesises bold exactly as before. */
@font-face { font-family: "Satisfy"; src: url("/assets/fonts/satisfy-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Secular One"; src: url("/assets/fonts/secular-one-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@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; }

/* ============ 3. Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; position: relative; font-family: var(--font-ui); font-size: 16px; line-height: 1.5; color: var(--color-text); background: var(--color-bg); overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; }
img { vertical-align: middle; }
h1, h2, h3 { margin: 0; line-height: 1; }
p { margin: 0 0 1em; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ============ 4. Layout ============ */
.container { width: min(100%, var(--container)); margin-inline: auto; }
.section { padding: var(--col-pad); }

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

/* === Component: skip-link === */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.5rem 1rem; background: var(--color-bg); color: var(--color-text); }
.skip-link:focus { left: 1rem; }

/* === Component: button (Elementor button: Secular One 16px, 15px 30px, pill, green) === */
.button { display: inline-block; padding: 15px 30px; border: 0; border-radius: var(--radius-pill); background: var(--color-green); color: #ffffff; font-family: var(--font-display); font-size: 16px; font-weight: 500; line-height: 1; text-decoration: none; text-align: center; cursor: pointer; transition: all var(--duration) var(--ease); }
.button:focus-visible { outline-color: #ffffff; }

/* === Component: site-header (sits over the top of the hero, on the green wave of background.jpg) ===
   Three equal columns: empty | logo (centred) | menu. At <= 1024px the menu is a burger in the
   third column; at <= 767px the columns stack (logo, then the burger centred under it). */
.site-header { position: absolute; z-index: 20; top: 0; left: 0; right: 0; padding: var(--col-pad); }
.site-header__inner { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.site-header__logo { grid-column: 2; padding: var(--col-pad); text-align: center; }
.site-header__logo img { width: 251px; }
.site-header__nav { grid-column: 3; padding: var(--col-pad); }
@media (max-width: 767px) {
  .site-header__inner { grid-template-columns: minmax(0, 1fr); }
  .site-header__logo, .site-header__nav { grid-column: 1; }
  .site-header__nav { padding-top: 0; text-align: center; }
}

/* === Component: site-nav (restored Elementor Pro nav menu: horizontal, underline pointer with fade; burger <= 1024px) === */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--nav-toggle-color); cursor: pointer; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
.site-nav__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.site-nav a { position: relative; display: block; padding: 13px 20px; color: var(--nav-color); font-family: var(--font-ui); font-size: 15px; font-weight: 500; line-height: 20px; text-decoration: none; }
.site-nav a::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; background: var(--nav-pointer); opacity: 0; transition: opacity var(--duration) var(--ease); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { opacity: 1; }
@media (max-width: 1024px) {
  .site-header__nav { text-align: center; }
  .nav-toggle { display: inline-flex; }
  .site-nav { position: absolute; z-index: 30; left: calc(-1 * var(--col-pad)); right: calc(-1 * var(--col-pad)); top: 100%; display: grid; grid-template-rows: 0fr; align-items: stretch; background: var(--nav-dropdown-bg); box-shadow: var(--shadow); text-align: left; visibility: hidden; transition: grid-template-rows var(--duration) var(--ease), visibility 0s linear var(--duration); }
  .site-nav.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--duration) var(--ease), visibility 0s; }
  .site-nav__list { display: block; overflow: hidden; min-height: 0; }
  .site-nav a { padding: 12px 20px; min-height: 44px; color: var(--nav-dropdown-color); }
  .site-nav a::after { display: none; }
  .site-nav a:hover, .site-nav a:focus-visible { background: rgb(255 255 255 / 0.12); }
}

/* === Component: hero (full-width background photo with the header wave; content centred) ===
   Elementor column with "space between": header space at the top, content in the middle,
   a 10px spacer at the bottom. Min height 500px. */
.hero { display: flex; flex-direction: column; justify-content: space-between; min-height: 500px; padding: var(--col-pad); background-color: #1b1b1b; background-position: top center; background-size: cover; background-repeat: no-repeat; }
.hero::before { content: ""; display: block; height: var(--header-h); }
.hero::after { content: ""; display: block; height: 10px; }
.hero__content { width: min(100%, var(--container)); margin-inline: auto; padding: var(--col-pad); padding-top: calc(var(--col-pad) + 50px + var(--widget-gap)); text-align: center; }
.hero__title { margin-bottom: var(--widget-gap); font-family: var(--font-script); font-size: 70px; font-weight: 600; line-height: 1; color: #ffffff; }
.hero__actions { display: flex; flex-direction: column; align-items: center; gap: var(--widget-gap); }

/* === Component: menu-intro (section heading + green discount pill) === */
.menu-intro { padding: var(--col-pad); padding-top: calc(var(--col-pad) + 10px + var(--widget-gap)); text-align: center; }
.menu-intro__title { margin-bottom: var(--widget-gap); font-family: var(--font-display); font-size: 32px; font-weight: 600; line-height: 1; color: var(--color-text); }
.menu-intro__badge { display: block; width: fit-content; margin-inline: auto; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--color-green-dark); color: #ffffff; font-family: var(--font-display); font-size: 11px; font-weight: 500; line-height: 22px; text-transform: uppercase; text-shadow: 0 0 10px rgb(0 0 0 / 0.3); }

/* === Component: menu-tiles (INDIAN / MOROCCAN: a row of labels, then a row of darkened photo tiles) ===
   As on the original, labels and photos are separate rows, so on mobile both labels stack above both photos. */
.menu-labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.menu-labels > * { padding: var(--col-pad); text-align: center; font-family: var(--font-display); font-weight: 600; line-height: 1; color: var(--color-green); }
.menu-tile__label--large { font-size: 20px; }
.menu-tile__label--small { font-size: 15px; }
.menu-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.menu-tile__image { position: relative; min-height: 580px; margin-bottom: 20px; background-color: #333333; background-position: center center; background-size: cover; }
.menu-tile__image::before { content: ""; position: absolute; inset: 0; background: var(--color-overlay); }
@media (max-width: 767px) {
  .menu-labels, .menu-tiles { grid-template-columns: minmax(0, 1fr); }
  .menu-tile__image { min-height: 380px; margin: 10px; }
}

/* === Component: app (phones image left, white heading + store badges right, on a dark photo) === */
.app { margin-block: 50px; background: #000000 url("/wp-content/uploads/2022/03/Group-8.png") center center no-repeat; }
.app__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app__col { padding: var(--col-pad); text-align: center; }
.app__col--phones { padding-top: calc(var(--col-pad) + 10px + var(--widget-gap)); padding-bottom: calc(var(--col-pad) + var(--widget-gap) + 50px); }
.app__col--text { padding-top: calc(var(--col-pad) + 50px + var(--widget-gap) + 35px + var(--widget-gap)); }
.app__phones { width: 435px; }
.app__title { margin-bottom: var(--widget-gap); font-family: var(--font-ui); font-size: 24px; font-weight: 500; line-height: 1; color: #ffffff; }
.app__badges { display: inline-block; }
.app__badges img { width: 448px; }
@media (max-width: 767px) {
  .app__inner { grid-template-columns: minmax(0, 1fr); }
}

/* === Component: location (small kicker, heading, map) === */
.location { padding: var(--col-pad); padding-top: calc(var(--col-pad) + 10px + var(--widget-gap)); text-align: center; }
.location__kicker { margin-bottom: 3px; font-family: var(--font-display); font-size: 20px; font-weight: 400; line-height: 1; color: var(--color-text); }
.location__title { margin-bottom: 13px; font-family: var(--font-ui); font-size: 24px; font-weight: 600; line-height: 1; color: var(--color-text); }
[id] { scroll-margin-top: 0; }

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

/* === Component: site-footer (restored centred footer menu + "Powered by OrderYOYO" credit) === */
.site-footer { text-align: center; }
.footer-nav__list { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.footer-nav a { position: relative; display: block; padding: 13px 20px; color: var(--footer-nav-color); font-family: var(--font-ui); font-size: 15px; font-weight: 500; line-height: 20px; text-decoration: none; }
.footer-nav a::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; background: currentColor; opacity: 0; transition: opacity var(--duration) var(--ease); }
.footer-nav a:hover::after, .footer-nav a:focus-visible::after { opacity: 1; }
.site-footer__bar { padding: 10px 20px 20px; }
.site-footer__credit { margin: 0; font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--color-muted); }
.site-footer__credit a { color: var(--color-text); }
@media (max-width: 767px) {
  .footer-nav a { padding: 13px 12px; }
  .footer-nav a::after { left: 12px; right: 12px; }
}

/* === Component: contact-email (replaces WordPress forms; unused: the only form, the Elementor Pro "Join Us" popup, is not rebuilt, manifest d2) === */
.contact-email { display: grid; gap: 1rem; justify-items: center; text-align: center; }
.contact-email__address { font-weight: 600; word-break: break-word; }

/* === Component: error-page (404, inside the hero) === */
.error-page__text { margin: 0 auto var(--widget-gap); max-width: 32em; font-family: var(--font-ui); font-size: 18px; font-weight: 500; color: #ffffff; }

/* === Component: reveal / popup (starter site.js hooks; unused on this site) === */
.reveal-ready [data-reveal] { visibility: hidden; }

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

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

/* ============ 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; }
  [data-reveal] { visibility: visible !important; }
}