/*
 * site.css: the only stylesheet for newcastle-eats.online.
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing (custom properties)
 *   2. Fonts         @font-face for self-hosted Poppins
 *   3. Base          reset and element defaults
 *   4. Layout        container, sections
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         rare page-specific rules
 *   7. Utilities     a handful of helpers
 *
 * Breakpoints (Elementor's, from the original; media queries can't use custom properties):
 *   mobile  <= 767px     tablet 768px-1024px     desktop >= 1025px
 *   The header menu collapses to the burger at <= 1024px; columns stack at <= 767px.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (from the original's computed styles) */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-yellow: #f4b33a;          /* buttons, burger, active/hover menu item */
  --color-card-border: #ffb433;     /* restaurant photo frames */
  --color-red: #cf4033;             /* gradient end */
  --color-dropdown-text: #33373d;
  --color-dropdown-hover: #3f444b;
  --gradient-brand: linear-gradient(260deg, var(--color-yellow) 0%, var(--color-red) 100%);

  /* Typography */
  --font-body: "Poppins", Sans-serif;
  --text-base: 16px;
  --text-lead: 20px;                /* story and app paragraphs */
  --text-button: 18px;
  --text-h1: 3.5rem;                /* 2.5rem on mobile */
  --text-section: 2rem;             /* centred section headings */
  --text-feature: 1.5rem;
  --text-card: 1.25rem;
  --text-story: 2.5rem;
  --text-app: 3rem;                 /* 1.9rem on mobile */

  /* Spacing and shape */
  --container: 1140px;
  --gutter: 10px;                   /* Elementor default column padding */
  --gutter-wide: 30px;              /* Elementor "wider" column gap */
  --section-pad: 120px;             /* 80px on mobile */
  --header-pad: 15px 30px;
  --radius-pill: 50px;
  --radius-toggle: 3px;

  /* Motion (original timings) */
  --duration: 300ms;
  --duration-nav: 400ms;
  --ease: ease;
}

/* ============ 2. Fonts ============ */
/* Poppins (Google Fonts, SIL OFL), latin subset, self-hosted. Weights used: 400, 500, 600, 700. */
@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: "Poppins"; src: url("/assets/fonts/poppins-latin-700.woff2") format("woff2"); font-weight: 700; 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-body); font-size: var(--text-base); font-weight: 400; line-height: 1.5; color: var(--color-black); background: var(--color-white); }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-body); line-height: 1; margin: 0; }
p { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; }

/* ============ 4. Layout ============ */
/* .container: Elementor's boxed 1140px container; its children carry the 10px column gutter. */
.container { max-width: var(--container); margin-inline: auto; }
.section { padding: var(--section-pad) 30px; }
.section--flush { padding-inline: 0; }                 /* hero, story, app: no side padding above 767px */
.section--gradient { background-image: var(--gradient-brand); }
.section__inner { padding: var(--gutter); }          /* Elementor column padding around a full-width section's content */
@media (max-width: 767px) {
  .section { padding-block: 80px; }
  .section--flush { padding-inline: 30px; }
  .section--contact { padding-block: var(--section-pad); } /* the original kept 120px here on mobile */
}

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

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

/* === Component: site-header ===
 * White sticky bar, 130px. Desktop: menu left (40%), logo centre (20%), Order Now right (40%).
 * <= 1024px: burger replaces the menu; the dropdown slides open full width below it
 *   (grid 0fr -> 1fr; the menu column uses align-items: stretch so items are clipped while animating).
 * <= 767px: logo left (75%), burger right (25%), no Order Now.
 */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-white); padding: var(--header-pad); }
.site-header__inner { display: flex; align-items: center; max-width: var(--container); margin-inline: auto; }
.site-header__menu { flex: 0 0 40%; min-width: 0; padding: var(--gutter); }
.site-header__brand { flex: 0 0 20%; min-width: 0; padding: var(--gutter); }
.site-header__cta { flex: 0 0 39.608%; min-width: 0; padding: var(--gutter); text-align: end; }
.site-header__logo { width: 127px; margin-inline: auto; }
.site-nav__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.site-nav__list li + li a { margin-inline-start: 34px; }
.site-nav__list a { display: flex; font-size: var(--text-base); font-weight: 500; line-height: 20px; color: var(--color-black); text-decoration: none; transition: color var(--duration-nav); }
.site-nav__list a:hover, .site-nav__list a:focus-visible, .site-nav__list a.is-active { color: var(--color-yellow); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 33px; height: 33px; padding: 0; border: 0; border-radius: var(--radius-toggle); background: var(--color-yellow); color: var(--color-white); cursor: pointer; }
.nav-toggle .icon { 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) {
  .site-header__menu { display: flex; flex-direction: column; align-items: stretch; }
  .nav-toggle { display: inline-flex; position: relative; align-self: flex-start; }
  .nav-toggle::after { content: ""; position: absolute; inset: -6px; } /* 45px tap target */
  .site-nav { position: absolute; left: 0; right: 0; top: calc(50% + 26.5px); display: grid; grid-template-rows: 0fr; visibility: hidden; background: var(--color-white); transition: grid-template-rows var(--duration) var(--ease), visibility var(--duration); }
  .site-nav.is-open { grid-template-rows: 1fr; visibility: visible; }
  .site-nav.is-instant { transition: none; }
  .site-nav__inner { overflow: hidden; min-height: 0; }
  .site-nav__list { display: block; }
  .site-nav__list li + li a { margin-inline-start: 0; }
  .site-nav__list a { padding: 10px 20px; color: var(--color-dropdown-text); transition: none; }
  .site-nav__list a.is-active { color: var(--color-dropdown-text); }
  .site-nav__list a:hover, .site-nav__list a:focus-visible { color: var(--color-white); background: var(--color-dropdown-hover); }
}
@media (max-width: 767px) {
  .site-header__brand { order: 1; flex-basis: 75%; }
  .site-header__menu { order: 2; flex-basis: 25%; }
  .site-header__cta { display: none; }
  .site-header__logo { margin-inline: 0; }
}

/* === Component: site-footer === */
.site-footer { padding: 30px; }
.site-footer__inner { max-width: var(--container); margin-inline: auto; padding: var(--gutter); text-align: center; }
.site-footer__text { font-size: var(--text-base); line-height: normal; font-weight: 400; color: var(--color-black); }
.site-footer__text a { color: var(--color-black); text-decoration: none; }

/* === Component: button === */
/* Pill buttons. --order: yellow header button; --light: white hero button; --send: yellow contact button. */
.button { display: inline-block; font-family: var(--font-body); font-size: var(--text-button); line-height: 1; text-decoration: none; text-align: center; border: 0; border-radius: var(--radius-pill); cursor: pointer; transition: all var(--duration); }
.button--order { padding: 14px 20px; font-weight: 500; color: var(--color-white); background: var(--color-yellow); }
.button--light { padding: 12px 24px; font-weight: 700; color: var(--color-black); background: var(--color-white); }
.button--send { padding: 8px 30px 8px 25px; font-weight: 700; color: var(--color-white); background: var(--color-yellow); }

/* === Component: section-heading (centred black H2 + 50px space) === */
.section-heading { margin-bottom: 50px; font-size: var(--text-section); font-weight: 600; text-align: center; color: var(--color-black); }

/* === Component: hero (#home: gradient, white H1, white pill button) === */
.hero { text-align: center; }
.hero__inner { padding: var(--gutter); }
.hero__title { margin-bottom: 20px; font-size: var(--text-h1); font-weight: 700; line-height: 1.3; color: var(--color-white); }
@media (max-width: 767px) { .hero__title { font-size: 2.5rem; } }

/* === Component: features (#why: two icon tiles) === */
.features { display: flex; }
.feature { flex: 0 0 50%; text-align: center; }
.feature__icon { margin-inline: auto; }
.feature__title { margin-top: 20px; font-size: var(--text-feature); font-weight: 700; color: var(--color-black); }
@media (max-width: 767px) {
  .features { flex-direction: column; }
  .feature { margin-bottom: 20px; }
}

/* === Component: media-split (image column + white text column on the gradient; #story and #app) ===
 * Columns have the 30px "wider" padding and are vertically centred. Stacks (image first) at <= 767px.
 * --app: 39% / 61% columns, image centred in its column.
 */
.media-split { display: flex; align-items: center; }
.media-split__media, .media-split__body { flex: 0 0 50%; min-width: 0; padding: var(--gutter-wide); }
.media-split__media img { width: 100%; }
.media-split__eyebrow { margin-bottom: 10px; font-size: var(--text-base); font-weight: 600; line-height: 1.3; color: var(--color-white); }
.media-split__title { margin-bottom: 20px; font-size: var(--text-story); font-weight: 600; line-height: 1.3; color: var(--color-white); }
.media-split__text { font-size: var(--text-lead); font-weight: 400; line-height: 1.6; color: var(--color-white); }
.media-split--app .media-split__media { flex-basis: 39.035%; }
.media-split--app .media-split__body { flex-basis: 60.965%; }
.media-split--app .media-split__media img { width: 353px; margin-inline: auto; } /* natural width, centred */
.media-split--app .media-split__title { font-size: var(--text-app); }
.media-split--app .media-split__text { margin-bottom: 20px; }
.app-badges { display: inline-block; }
@media (max-width: 767px) {
  .media-split { flex-direction: column; align-items: stretch; }
  .media-split--app .media-split__title { font-size: 1.9rem; }
}

/* === Component: restaurant-grid (#story's neighbour "Our Restaurants": 4 x 2 framed photos, not links) ===
 * Photos are 311px tall, cropped to fill (cover), in a 9px #FFB433 frame.
 * --natural keeps the photo's own ratio (Nugelato); --contain shows the whole photo (Froth Bistro).
 */
.restaurant-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.restaurant-card { padding: var(--gutter-wide); }
.restaurant-card__photo { width: 100%; height: 311px; object-fit: cover; object-position: center; border: 9px solid var(--color-card-border); }
.restaurant-card__photo--natural { height: auto; }
.restaurant-card__photo--contain { object-fit: contain; }
.restaurant-card__name { margin-top: 20px; font-size: var(--text-card); font-weight: 500; color: var(--color-black); }
@media (max-width: 767px) { .restaurant-grid { grid-template-columns: minmax(0, 1fr); } }

/* === Component: contact-email (replaces the Elementor form; filled by site.js from CONFIG.contactEmail) ===
 * Hidden until CONFIG.contactEmail is set; then a yellow "Send" pill (mailto with the form's fields) and the address.
 */
.contact-email[hidden] { display: none; }
.contact-email { display: grid; gap: 16px; justify-items: center; text-align: center; }
.contact-email__button { display: inline-block; padding: 8px 30px 8px 25px; border-radius: var(--radius-pill); background: var(--color-yellow); color: var(--color-white); font-size: var(--text-button); font-weight: 700; line-height: 1; text-decoration: none; }
.contact-email__address { font-size: var(--text-button); word-break: break-word; }
.contact-email__address a { color: var(--color-black); }

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

/* === Page: 404 === */
.not-found { text-align: center; }
.not-found__text { margin-bottom: 30px; font-size: var(--text-lead); line-height: 1.6; color: var(--color-white); }
.not-found__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin: 30px 0 0; padding: 0; list-style: none; }
.not-found__links a { color: var(--color-white); font-weight: 500; }

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

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