/*
 * site.css: the only stylesheet for omarskitchen.co.uk.
 *
 * 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        shared section rules
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         page-specific rules: "=== Page: <path> ==="
 *   7. Utilities     a handful of helpers
 *
 * Breakpoints (from the original Elementor site; media queries can't use custom properties):
 *   mobile  <= 767px    tablet 768px-1024px    desktop >= 1025px
 *
 * The original was a one-page Elementor layout. Sizes below are the original's computed
 * values (measured at 375/768/1024/1440), so most numbers are deliberate pixel values.
 * Elementor spacing kept: 10px column padding, 20px between stacked widgets.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours */
  --color-text: #000000;
  --color-bg: #ffffff;
  --color-yellow: #ffdb49;          /* contact section, mobile menu */
  --color-yellow-button: #fcdc4c;   /* "Download" pill */
  --color-grey: #f2f2f2;            /* app section */
  --color-accent: #e83d44;          /* "App4" in the hero */
  --color-toggle-bg: rgb(0 0 0 / 0.05);

  /* Typography */
  --font-body: "Poppins", sans-serif;
  --font-nav: Arial, Helvetica, sans-serif;  /* the original's "Xhers" never loaded; visitors saw this fallback (decision d3) */
  --font-menu: "Roboto", sans-serif;          /* mobile dropdown menu */

  /* Spacing and shape (Elementor defaults on the original) */
  --col-pad: 10px;
  --widget-gap: 20px;
  --container-header: 1000px;
  --container-catering: 1200px;
  --radius-button: 3px;
  --radius-pill: 28px;

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

/* ============ 2. Fonts ============ */
/* Self-hosted Google Fonts (latin subset), only the weights in use. */
@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; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-latin-500.woff2") format("woff2"); font-weight: 500; 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: 16px; line-height: 1.5; color: var(--color-text); background: var(--color-bg); overflow-x: hidden; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1; }
p { margin: 0; }
a { color: inherit; text-decoration: none; transition: color var(--duration) var(--ease); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

/* ============ 4. Layout ============ */
/* Every section is positioned (as on the original) so a later section paints over images that overhang an earlier one. */
.section { position: relative; }
/* Stack of "widgets": 20px between items, like Elementor's widget spacing. Flex, so child margins don't collapse. */
.stack { display: flex; flex-direction: column; gap: var(--widget-gap); }

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

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

/* === Component: site-header ===
 * Logo + navigation, laid over the top of the hero's yellow background (the original had both in one
 * Elementor section). The header is absolutely positioned; the hero reserves its height with a
 * matching padding-top (see Component: hero). Desktop/tablet: text nav beside the logo.
 * Mobile: burger centred under the logo with a full-width yellow dropdown (restored from the Internet
 * Archive copy, decision d1).
 */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding: var(--col-pad); }
.site-header__inner { display: flex; max-width: var(--container-header); margin-inline: auto; }
.site-header__logo { flex: 0 0 30%; padding: var(--col-pad); display: flex; align-items: center; }
.site-header__logo img { width: 100%; aspect-ratio: 1000 / 455; }
.site-header__nav { flex: 0 0 70%; padding: var(--col-pad); }

/* Desktop/tablet nav (Elementor Extras button group on the original) */
.site-nav { padding-top: 2px; }
.site-nav__list { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.site-nav__list a { display: block; padding: 27px; font-family: var(--font-nav); font-size: 19px; font-weight: 500; line-height: 1; color: var(--color-text); transition: all var(--duration) var(--ease); }

/* Mobile burger + dropdown (hidden on tablet/desktop) */
.mobile-nav { display: none; }
.nav-toggle { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto; padding: 0; border: 0; border-radius: 3px; background: var(--color-toggle-bg); color: var(--color-text); cursor: pointer; }
.nav-toggle svg { width: 35px; height: 35px; }
.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; }
/* Slide-down: grid row 0fr -> 1fr (0.3s, as the original's max-height transition). align-items: stretch keeps the list clipped while it animates. */
.mobile-nav__panel { position: absolute; left: 0; right: 0; top: calc(100% - 40px); display: grid; grid-template-rows: 0fr; align-items: stretch; background: var(--color-yellow); visibility: hidden; transition: grid-template-rows 0.3s var(--ease), visibility 0s linear 0.3s; }
.mobile-nav__panel.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.3s var(--ease), visibility 0s; }
.mobile-nav__inner { overflow: hidden; min-height: 0; }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; text-align: center; }
.mobile-nav__list a { display: block; padding: 16px 0; font-family: var(--font-menu); font-size: 20px; font-weight: 500; line-height: 20px; color: var(--color-text); }

@media (max-width: 1024px) {
  .site-header__nav { display: flex; align-items: center; justify-content: center; }
  .site-nav { padding-top: 0; }
  .site-nav__list a { font-size: 16px; }
}
@media (max-width: 767px) {
  .site-header__inner { flex-direction: column; }
  .site-header__logo { flex: none; justify-content: center; }
  .site-header__logo img { width: 57%; }
  .site-header__nav { flex: none; display: block; padding-bottom: calc(var(--col-pad) + var(--widget-gap)); }
  .site-nav { display: none; }
  .mobile-nav { display: block; }
}

/* === Component: button ===
 * Outline button (ORDER NOW, ENQUIRE) and the yellow pill (Download). No hover change on the original.
 */
.button { position: relative; z-index: 1; display: inline-block; padding: 12px 24px; border: 3px solid var(--color-text); border-radius: var(--radius-button); background: transparent; color: var(--color-text); font-family: var(--font-body); font-weight: 500; line-height: 1; text-align: center; transition: all var(--duration) var(--ease); }
.button--large { font-size: 30px; text-transform: uppercase; }
.button--enquire { font-size: 37px; }
.button--pill { padding: 14px 50px; border: 0; border-radius: var(--radius-pill); background: var(--color-yellow-button); font-size: 19px; }
@media (max-width: 1024px) {
  .button--enquire { font-size: 20px; }
  .button--pill { padding: 10px 40px; }
}

/* === Component: hero ===
 * Yellow blob background (Group-20.png, cover) behind the header and the hero text + burger image.
 * padding-top = header height + the original's spacer + widget gap:
 *   header = 10px + 2 x 10px + logo height, logo = 45.5% of its width, width = 30% of the 1000px container minus 20px.
 */
.hero { min-height: 980px; padding: calc(30px + 0.455 * (0.3 * min(var(--container-header), 100% - 20px) - 20px) + 120px) var(--col-pad) var(--col-pad); background: url("/wp-content/uploads/2022/03/Group-20.png") 0 0 / cover no-repeat; }
.hero__inner { display: flex; max-width: var(--container-header); margin-inline: auto; }
.hero__text { flex: 0 0 51.8%; align-items: flex-start; }
.hero__media { flex: 0 0 48.15%; padding: var(--col-pad); }
.hero__media img { width: 100%; }
.hero__partner { font-size: 23px; font-weight: 600; }
.hero__partner span { color: var(--color-accent); }
.hero__title-top { font-size: 70px; font-weight: 800; }
.hero__title { font-size: 100px; font-weight: 700; }
.hero__lead { margin: 1em 0; font-size: 26px; font-weight: 500; }
/* Basil leaves overhanging the button, desktop only (negative margins as on the original) */
.hero__leaf { align-self: stretch; margin: -81px -215px -49px 13px; }
.hero__leaf img { width: 38%; margin-inline: auto; }
@media (max-width: 1024px) {
  .hero { min-height: 59vh; padding-top: calc(30px + 0.455 * (0.3 * min(var(--container-header), 100% - 20px) - 20px) + 30px); }
  .hero__text { padding-left: var(--col-pad); padding-bottom: var(--widget-gap); } /* the hidden leaf was the last widget, so the button kept its 20px gap */
  .hero__partner { font-size: 13px; }
  .hero__title-top { font-size: 44px; }
  .hero__title { font-size: 71px; }
  .hero__lead { font-size: 20px; }
  .hero__leaf { display: none; }
  .hero__media img { margin-top: 100px; }
}
@media (max-width: 767px) {
  /* header on phones: 10px + logo column (20px + logo at 57% of the width - 40px) + burger column (10 + 52 + 20 + 10) + spacer 10 + gap 20 */
  .hero { padding-top: calc(10px + 20px + 0.455 * 0.57 * (100% - 40px) + 92px + 30px); }
  .hero__inner { flex-direction: column; }
  .hero__text { flex: none; align-items: center; text-align: center; }
  .hero__title { font-size: 49px; }
  .hero__lead { font-size: 16px; }
  .hero__media { flex: none; padding-bottom: 60px; }
  .hero__media img { margin-top: 0; }
}

/* === Component: catering ===
 * White section with yellow blobs (Group-21.png), heading, intro, three image cards
 * (labels are part of the images) and the ENQUIRE button.
 */
.catering { min-height: 100vh; padding: var(--col-pad); background: url("/wp-content/uploads/2022/03/Group-21.png") top center / cover; }
.catering__inner { max-width: calc(var(--container-catering) - 20px); margin-inline: auto; text-align: center; }
.catering__inner::before, .contact__main::before, .contact__main::after { flex: none; }
.catering__inner::before { content: ""; display: block; height: 98px; }
.catering__title { font-size: 40px; font-weight: 600; }
.catering__intro { margin: 21px 0; font-size: 21px; }
.catering__cards { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0 0 125px; padding: 0; }
.catering__cards li { padding: var(--col-pad); }
.catering__cards img { width: 100%; }
.catering__cta { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; padding-bottom: 30px; }
.catering__cta > * { padding: var(--col-pad); }
.catering__cta-button { grid-column: 2; }
.catering__leaf img { width: 74%; margin: -218px auto 0; }
@media (max-width: 1024px) {
  .catering { min-height: 61vh; }
  .catering__inner::before { height: 34px; }
  .catering__intro { margin: 16px 0; font-size: 16px; line-height: 1.6; }
  .catering__cards { margin-bottom: 16px; }
  .catering__leaf { display: none; }
}
@media (max-width: 767px) {
  .catering__cards { grid-template-columns: 1fr; }
  .catering__cta { grid-template-columns: 1fr; }
  .catering__cta-button { grid-column: 1; }
}

/* === Component: app-promo ===
 * Grey band with phone mock-ups (Group-15.png background), skewer images, heading, Download pill
 * and store badges (images only, not links, as on the original). Hidden on phones, as on the original.
 */
.app-promo { display: flex; align-items: center; min-height: 65vh; background: var(--color-grey) url("/wp-content/uploads/2022/03/Group-15.png") center / contain no-repeat; }
.app-promo > div { padding: var(--col-pad); }
.app-promo__spacer--left { flex: 0 0 20%; }
.app-promo__skewer--left { flex: 0 0 18.598%; }
.app-promo__main { flex: 0 0 25.77%; align-items: center; text-align: center; }
.app-promo__badges { align-self: stretch; }
.app-promo__skewer--right { flex: 0 0 18.694%; }
.app-promo__spacer--right { flex: 0 0 16.929%; }
/* The skewers hang below the column centre line (-400px bottom margin on the original) */
.app-promo__skewer img { width: 100%; margin-bottom: -400px; }
.app-promo__title { font-size: 47px; font-weight: 600; }
.app-promo__badges { display: flex; padding-bottom: 10px; }
.app-promo__badges > * { flex: 1 1 50%; min-width: 0; padding: var(--col-pad); }
.app-promo__badges img { margin-inline: auto; }
@media (max-width: 1024px) {
  .app-promo { min-height: 19vh; padding: 30px 0; }
  .app-promo__title { font-size: 23px; }
}
@media (max-width: 767px) {
  .app-promo { display: none; }
}

/* === Component: contact ===
 * Yellow column (logo, heading, intro, food-splash image-31.png) and the white column where the
 * Elementor Pro enquiry form used to be (not rebuilt, decision d2: it rendered empty on the live site).
 * To let the yellow column span the full width instead, add the class "contact--no-form" to the section.
 */
.contact { display: flex; background: var(--color-yellow); }
.contact__side { flex: 0 0 9.997%; }
.contact__main { flex: 0 0 40.003%; padding: var(--col-pad); background: var(--color-yellow) url("/wp-content/uploads/2022/03/image-31.png") -17px 100% / 695px auto no-repeat; }
.contact__main::before { content: ""; display: block; height: 50px; }
.contact__logo { display: flex; margin-bottom: 50px; }
.contact__logo > div { flex: 0 0 31.9%; padding: var(--col-pad); }
.contact__logo img { width: 100%; }
.contact__title { font-size: 69px; font-weight: 600; text-align: center; }
.contact__intro { margin: 23px 0; padding: 0 50px 0 100px; font-size: 23px; }
.contact__main::after { content: ""; display: block; height: 100px; }
.contact__form-slot { flex: 0 0 39.935%; min-height: 160px; padding: var(--col-pad); background: var(--color-bg); scroll-margin-top: 0; }
.contact__side--right { flex: 0 0 10.048%; background: var(--color-bg); }
.contact--no-form .contact__form-slot, .contact--no-form .contact__side--right { display: none; }
.contact--no-form .contact__main { flex-grow: 1; }
@media (max-width: 1024px) {
  .contact__side { display: none; }
  .contact__main { flex-basis: 50%; background-size: 555px auto; }
  .contact__form-slot { flex-basis: 50%; }
  .contact__title { font-size: 53px; }
  .contact__intro { padding: 0 30px 0 40px; font-size: 20px; }
  .contact__main::after { height: 127px; }
}
@media (max-width: 767px) {
  .contact { flex-direction: column; }
  .contact__main { flex-basis: auto; background-position: 41px 100%; background-size: 405px auto; }
  .contact__logo > div { flex-basis: 100%; }
  .contact__main::after { height: 180px; }
  .contact__form-slot { flex-basis: auto; min-height: 180px; padding: 20px; }
}

/* === Component: contact-email (not used on this site yet) ===
 * Former forms become a mailto block. This site has no business email (form dropped, flagged
 * for the form endpoint), so the block is not on the page. Kept for when an address exists.
 */
.contact-email { display: grid; gap: 16px; justify-items: center; text-align: center; }
.contact-email__address { font-weight: 600; word-break: break-word; }

/* === Component: site-footer ===
 * The original had no footer; this small bar carries the "Powered by OrderYOYO" credit.
 */
.site-footer { background: var(--color-yellow); }
.site-footer__bar { margin: 0; padding: 12px 16px; font-size: 14px; text-align: center; }
.site-footer__bar a { text-decoration: underline; }

/* === Component: error-page (404) === */
.error-page { padding: 0 var(--col-pad) 80px; text-align: center; }
.error-page__title { margin-bottom: 20px; font-size: 44px; font-weight: 800; }
.error-page p { margin-bottom: 30px; font-size: 20px; }
.error-page__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.error-page__links .button { font-size: 20px; }

/* ============ 6. Pages ============ */
/* 404: the hero background without the 980px desktop height */
.hero--short { min-height: 75vh; }

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