/*
 * site.css: the only stylesheet for egghamontoast.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        container, 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 menus collapse to a burger at ≤ 1024px; columns stack at ≤ 767px.
 *
 * Measurements come from the original Elementor page (boxed container 1140px,
 * 10px column padding, 20px space between widgets). Values are in px on purpose
 * so the page lines up with the original screenshots.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (from the original's computed styles) */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-button-alt: #090909;      /* "Let me order" in the grey section */
  --color-grey-band: #e3e0e0;       /* "Freshly made food" section */
  --color-toggle-bg: rgb(0 0 0 / 0.05);
  --color-dropdown-hover: #55595c;  /* Elementor Pro dropdown hover default */

  /* Typography */
  --font-main: "Poppins", sans-serif;
  --font-alt: "Roboto", sans-serif; /* "Order now" button, "Freshly made food" heading */

  /* Spacing (Elementor defaults on the original) */
  --gutter: 10px;          /* column padding */
  --widget-gap: 20px;      /* space between widgets */
  --container: 1140px;     /* boxed sections */

  /* Background images (media keeps its original URLs) */
  --bg-brick: url("/wp-content/uploads/2022/05/image-1.png");
  --bg-diagonal: url("/wp-content/uploads/2022/05/Group-25.png");

  /* Motion */
  --duration: 300ms;
  --ease: ease;
}

/* ============ 2. Fonts ============ */
/* Google Fonts (SIL Open Font Licence), self-hosted, latin subset. */
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-latin-variable.woff2") format("woff2"); font-weight: 500 600; 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; }
/* The brick background starts at the top of the page and shows behind the header and hero,
   exactly as the original hero section's tiled background did. Other sections set their own. */
body { margin: 0; font-family: var(--font-main); font-size: 16px; line-height: 1.5; color: var(--color-black); background: var(--color-white) var(--bg-brick) 0 0 repeat; }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
a { color: inherit; transition: color var(--duration) var(--ease); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; }
main > section { background-color: var(--color-white); }
body { display: flex; flex-direction: column; min-height: 100vh; } /* footer stays at the bottom on short pages (404) */
main { flex: 1 0 auto; }

/* ============ 4. Layout ============ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; }

/* ============ 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 ===
 * Transparent top bar over the brick background: menu in the left half, "Order now" centred
 * in the right half (hidden on mobile, as on the original). Not sticky. */
.site-header { position: relative; z-index: 10; padding: var(--gutter) var(--gutter) 0; }
.site-header__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.site-header__col { padding: var(--gutter); min-width: 0; }
.site-header__order { text-align: center; }
@media (max-width: 767px) {
  .site-header__inner { grid-template-columns: 1fr; }
  .site-header__order { display: none; }
}

/* === Component: site-nav ===
 * Restored Elementor Pro menu (manifest d1). Used twice: in the header (black text) and at the
 * bottom of "Download Our App" (.site-nav--light, white text).
 * Desktop: centred row, Poppins 600 19px, 0 50px item padding, 1px dividers, underline that fades in on hover.
 * ≤1024px: centred burger; the list slides down (grid rows 0fr → 1fr, 0.3s) with black links. */
.site-nav { display: grid; justify-items: center; align-items: stretch; --nav-color: var(--color-black); --nav-size: 19px; }
.site-nav--light { --nav-color: var(--color-white); --nav-size: 20px; }
.site-nav__menu { width: 100%; }
.site-nav__list { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.site-nav__list li { display: flex; }
.site-nav__list li:not(:last-child)::after { content: ""; align-self: center; height: 35%; border-left: 1px solid var(--nav-color); }
.site-nav__list a { position: relative; display: block; padding: 13px 50px; font-size: var(--nav-size); font-weight: 600; line-height: 20px; color: var(--nav-color); text-decoration: none; }
.site-nav__list a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--nav-color); opacity: 0; transition: opacity var(--duration) var(--ease); }
.site-nav__list a:hover::after, .site-nav__list a:focus-visible::after { opacity: 1; }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 3px; background: var(--color-toggle-bg); color: var(--color-black); cursor: pointer; }
.nav-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.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; }
@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }
  .site-nav__menu { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--duration) ease, visibility 0s linear var(--duration); }
  .site-nav__menu.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--duration) ease, visibility 0s; }
  .site-nav__list { display: block; min-height: 0; overflow: hidden; text-align: center; }
  .site-nav__list li { display: block; }
  .site-nav__list li:not(:last-child)::after { content: none; }
  .site-nav__list a { padding: 13px 20px; color: var(--color-black); transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease); }
  .site-nav__list a::after { content: none; }
  .site-nav__list a:hover, .site-nav__list a:focus-visible { background: var(--color-dropdown-hover); color: var(--color-white); }
}

/* === Component: page-header (hidden page title, as on the original theme) === */
.page-header { display: none; }

/* === Component: button ===
 * Black pill, white text; no hover change on the original (only a 0.3s transition). */
.button { display: inline-block; padding: 10px 30px; border-radius: 30px; background: var(--color-black); color: var(--color-white); font-family: var(--font-main); font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; text-align: center; transition: all var(--duration) var(--ease); }
.button--large { padding: 15px 50px; }
.button--alt-font { font-family: var(--font-alt); }
.button--soft-black { background: var(--color-button-alt); }
@media (max-width: 767px) {
  .button { padding-block: 14.5px; } /* 44px tap target on phones */
}

/* === Component: hero ===
 * Logo, tagline, "Let Me Order", Restaurant Guru badge and address over the brick background. */
.hero { padding: 0 var(--gutter) var(--gutter); text-align: center; background: none; }
main > section.hero { background-color: transparent; }
.hero__intro { padding: var(--gutter); margin-inline: auto; max-width: var(--container); }
.hero__logo { padding: 20px; margin-bottom: var(--widget-gap); }
.hero__logo img { margin-inline: auto; }
.hero__tagline { display: flow-root; } /* keeps the p margins inside, as Elementor widgets do */
.hero__tagline p { margin: 25px 0; font-size: 25px; font-weight: 500; line-height: 4px; }
.hero__actions { margin-bottom: var(--widget-gap); }
.hero__spacer { height: 115px; margin-bottom: var(--widget-gap); }
.hero__badge { display: flex; justify-content: center; padding: var(--gutter); }
.hero__address { margin: 25px 0; font-size: 25px; font-weight: 600; }
@media (max-width: 767px) {
  .hero__tagline p { line-height: 1.6em; }
  .hero__spacer { height: 48px; }
}

/* === Component: badge (Restaurant Guru provider embed) ===
 * The provider's own HTML and CSS (awards.infcdn.net/r_gold.css, loaded by site.js "embedcss").
 * The box is reserved so the page doesn't jump while the provider CSS loads. */
.badge { width: 180px; min-height: 139px; }

/* === Component: section-heading ===
 * Centred Poppins headings in 20px-padded wrappers, as Elementor's heading widget. */
.section-heading { padding: 20px; text-align: center; font-size: 40px; font-weight: 600; line-height: 1; }
.section-heading--regular { font-weight: 400; }
.section-heading--xl { font-size: 51px; }
@media (max-width: 767px) {
  .section-heading--xl { font-size: 26px; }
  .section-heading--regular { font-size: 29px; }
  .section-heading--sm-mobile { font-size: 24px; }
}

/* === Component: about === */
.about { padding: var(--gutter); }

/* === Component: feature (grey band: photo + white card) === */
.feature { padding: 100px var(--gutter) 80px; }
main > section.feature { background-color: var(--color-grey-band); }
.feature__inner { display: grid; grid-template-columns: 1fr 1fr; max-width: var(--container); margin-inline: auto; }
.feature__media { display: flex; justify-content: flex-end; }
.feature__card { background: var(--color-white); }
.feature__title { padding: 40px 40px 0; margin-bottom: var(--widget-gap); font-family: var(--font-alt); font-size: 40px; font-weight: 600; line-height: 1; }
.feature__actions { padding: 0 40px 40px; }
@media (max-width: 1024px) {
  .feature__title { padding: 10px; font-size: 22px; }
  .feature__actions { padding: 0 0 0 10px; }
}
@media (max-width: 767px) {
  .feature__inner { grid-template-columns: 1fr; }
  .feature__media img { width: 100%; }
}

/* === Component: delivery (platform logos + food photos on brick) === */
.delivery { padding: 60px var(--gutter) 241px; }
main > section.delivery { background: var(--color-white) var(--bg-brick) 0 0 repeat; }
.delivery .section-heading { padding: 0; margin-bottom: var(--widget-gap); }
.delivery__logos { display: grid; grid-template-columns: repeat(3, 1fr); max-width: var(--container); margin: 0 auto 120px; }
.delivery__logo { padding: 30px; }
.delivery__logo img { margin-inline: auto; }
.delivery__logo--justeat img { width: 64%; }
.delivery__photos { display: grid; grid-template-columns: repeat(4, 1fr); }
.delivery__photo { padding: var(--gutter); }
@media (max-width: 1024px) {
  .delivery { padding-bottom: 80px; }
  .delivery__logos { margin-bottom: 56px; }
}
@media (max-width: 767px) {
  .delivery__logos, .delivery__photos { grid-template-columns: 1fr; }
}

/* === Component: offer ("What we offer" full-width image link) === */
.offer { padding-bottom: 70px; }
.offer .section-heading { margin-bottom: var(--widget-gap); }
.offer__link { display: block; }
.offer__link img { width: 100%; }

/* === Component: app ("Download Our App": mockup, store buttons, second menu) === */
.app { position: relative; padding: var(--gutter); text-align: center; }
main > section.app { background: var(--color-white) var(--bg-brick) 0 0 repeat; }
.app::before { content: ""; position: absolute; inset: 0; background: var(--bg-diagonal) center / cover no-repeat; }
.app > * { position: relative; }
.app .section-heading { margin-bottom: var(--widget-gap); }
.app__mockup { margin-bottom: var(--widget-gap); }
.app__mockup img { margin-inline: auto; }
.app__stores { padding: 20px; margin-bottom: var(--widget-gap); }
.app__stores a { display: inline-block; }
@media (max-width: 1024px) {
  .app__mockup img { width: 60%; }
}
@media (max-width: 767px) {
  .app__stores { padding: 0; }
  .app__stores img { width: 100%; }
}

/* === Component: site-footer ===
 * The original footer was empty; only the "Powered by OrderYOYO" bar is added (build rules s10). */
.site-footer { background: var(--color-white); }
.site-footer__bar { padding: 12px var(--gutter); text-align: center; font-size: 13px; }
.site-footer__credit { margin: 0; }
.site-footer__credit a { color: inherit; }

/* === Component: not-found (404 page) === */
.not-found { padding: 40px var(--gutter) 80px; text-align: center; }
.not-found .hero__logo img { margin-inline: auto; }
main > section.not-found { background-color: transparent; }
.not-found__title { margin-bottom: 20px; font-size: 40px; font-weight: 600; line-height: 1.2; }
.not-found__text { margin-bottom: 30px; font-size: 18px; }
.not-found__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
@media (max-width: 767px) {
  .not-found__title { font-size: 26px; }
}

/* === Component: contact-email (for any future form replacement; the site has no forms) === */
.contact-email { display: grid; gap: 16px; justify-items: center; text-align: center; }
.contact-email__address { font-weight: 600; word-break: break-word; }
.contact-email__phone a { color: inherit; }

/* ============ 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; }
}