/*
 * site.css: the only stylesheet for chillies-ek.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        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 (from the original Elementor CSS; media queries can't use custom properties):
 *   mobile  <= 767px    tablet 768px-1024px    desktop >= 1025px
 *
 * Values come from the original's computed styles (Elementor page 2 + kit 150).
 * The original used line-height 1 everywhere (theme reset), kept here for fidelity.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours */
  --color-text: #7a7a7a;          /* body copy (Elementor "text" global) */
  --color-heading: #000000;
  --color-bg: #ffffff;
  --color-dark: #000000;          /* header bar, footer button */
  --color-primary: #ed1d24;       /* chilli red: buttons, dividers, footer bar, credit link */
  --color-primary-contrast: #ffffff;

  /* Typography */
  --font-body: "Roboto", Arial, Helvetica, sans-serif;
  --font-heading: var(--font-body);
  --text-base: 16px;
  --text-button: 15px;
  --text-intro: 29px;
  --weight-regular: 400;
  --weight-medium: 500;            /* buttons */
  --weight-semibold: 600;          /* headings */
  --leading: 1;

  /* Spacing and shape */
  --gutter: 10px;                  /* Elementor column padding */
  --widget-gap: 20px;              /* space between stacked widgets */
  --container: 1140px;
  --radius-button: 3px;
  --divider-thickness: 7px;

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

/* ============ 2. Fonts ============ */
/* Roboto (Google Fonts, SIL OFL), latin subset, variable file covering 400/500/600. */
@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; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading); color: var(--color-text); background: var(--color-bg); }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--weight-semibold); line-height: 1; color: var(--color-heading); margin: 0; }
h3 { font-size: var(--text-base); }
p { margin: 0; }
a { color: var(--color-primary); text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ============ 4. Layout ============ */
/* Boxed container: 1140px max, full width below. Inner padding = Elementor column padding. */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { text-align: center; }

/* ============ 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-heading); }
.skip-link:focus { left: 16px; }

/* === Component: button ===
 * Red by default; .button--dark for the black footer button. No hover change (as original).
 * On touch screens an invisible ::after enlarges the tap area to 45px tall without
 * changing the layout. */
.button { position: relative; display: inline-block; padding: 12px 24px; border-radius: var(--radius-button); background: var(--color-primary); color: var(--color-primary-contrast); font-family: var(--font-body); font-size: var(--text-button); font-weight: var(--weight-medium); line-height: 1; text-align: center; text-decoration: none; transition: all var(--duration); }
.button--dark { background: var(--color-dark); font-size: var(--text-base); text-transform: uppercase; }
.button:hover, .button:focus { color: var(--color-primary-contrast); }
@media (pointer: coarse) {
  .button::after { content: ""; position: absolute; inset: -3px 0; }
}

/* === Component: site-header ===
 * Black bar, min-height 150px. Desktop: logo left, DOWNLOAD APP right.
 * Tablet: logo centred in the left half, button centred on a second row.
 * Mobile: logo (70% wide) above the button, both centred. Not sticky. */
.site-header { background: var(--color-dark); margin-bottom: 1px; } /* 1px white gap below, as the original's empty Elementor section */
.site-header__inner { display: grid; grid-template-columns: 21.89% 1fr 19.51%; grid-template-areas: "logo . action"; align-items: center; min-height: 150px; padding-inline: 0; }
.site-header__logo { grid-area: logo; padding: var(--gutter); }
.site-header__logo img { max-width: 100%; }
.site-header__action { grid-area: action; padding: var(--gutter); text-align: center; }
@media (max-width: 1024px) {
  .site-header__inner { grid-template-columns: 50% 50%; grid-template-areas: "logo ." "action action"; }
  .site-header__logo img { max-width: 51%; margin-inline: auto; }
}
@media (max-width: 767px) {
  .site-header__inner { grid-template-columns: 100%; grid-template-areas: "logo" "action"; row-gap: 1px; min-height: 0; } /* 1px = original empty middle column */
  .site-header__logo, .site-header__action { padding: 20px; }
  .site-header__logo img { max-width: 70%; }
}

/* === Component: section-heading ===
 * Uppercase black heading followed by the red divider bar.
 * .section-heading--intro is the large 29px statement heading. */
.section-heading { text-transform: uppercase; color: var(--color-heading); font-size: var(--text-base); text-align: center; }
.section-heading--intro { font-size: var(--text-intro); }

/* === Component: divider ===
 * Red 7px bar with 15px space above and below (inside a 37px block).
 * Width is a percentage of the column: 10% default, .divider--wide 20%. */
.divider { margin: var(--widget-gap) 0; padding-block: 15px; }
.divider::before { content: ""; display: block; width: 10%; margin-inline: auto; border-top: var(--divider-thickness) solid var(--color-primary); }
.divider--wide::before { width: 20%; }

/* === Component: intro (statement heading section) === */
.intro { padding-block: 60px 20px; }
@media (max-width: 767px) {
  .intro { padding-block: 30px; }
}

/* === Component: hours-location (address, phone, hours; id="contact") === */
.hours-location { padding-block: 60px; }
.hours-location__text { max-width: 500px; margin-inline: auto; }

/* === Component: offers (two image cards) ===
 * Two columns from 768px (first image hugs the centre line from the left, second from the right),
 * stacked on mobile with 50px between cards. */
.offers { padding-block: 60px 110px; }
.offers__grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 70px; }
.offer-card__image { display: flex; justify-content: flex-start; }
.offer-card:first-child .offer-card__image { justify-content: flex-end; }
.offer-card__title { margin-top: var(--widget-gap); }
.offer-card__text { margin-bottom: var(--widget-gap); }
@media (max-width: 767px) {
  .offers { padding-block: 60px; }
  .offers__grid { grid-template-columns: 100%; row-gap: 50px; margin-top: var(--widget-gap); }
  .offer-card__image img { width: 100%; }
}

/* === Component: site-footer ===
 * Red bar: social icons | inline links (MENU, ORDER, CONTACT) | black DOWNLOAD APP button.
 * Tablet: icons + links on one row, button centred below. Mobile: everything stacked and centred. */
.site-footer__bar { background: var(--color-primary); padding: var(--gutter); }
.site-footer__inner { display: grid; grid-template-columns: 33.333% 46.667% 19.997%; align-items: center; padding-inline: 0; }
.site-footer__social, .site-footer__links, .site-footer__action { padding: var(--gutter); }
.site-footer__action { text-align: center; }
@media (max-width: 1024px) {
  .site-footer__inner { grid-template-columns: 25% 75%; }
  .site-footer__action { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .site-footer__inner { grid-template-columns: 100%; }
  .site-footer__social, .site-footer__links, .site-footer__action { padding: 20px; }
}

/* === Component: social-links (white icons, transparent circles; hover opacity 0.9) === */
.social-links { display: flex; gap: 5px; list-style: none; margin: 0; padding: 0; }
.social-links__item { display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; font-size: 16px; border-radius: 50%; color: #ffffff; transition: opacity var(--duration); }
.social-links__item svg { width: 1em; height: 1em; fill: currentColor; }
a.social-links__item:hover { opacity: 0.9; color: #ffffff; }
@media (max-width: 1024px) {
  .social-links__item { font-size: 24px; }
}
@media (max-width: 767px) {
  .social-links { justify-content: center; gap: 10px; }
}

/* === Component: footer-links (inline, 30px apart, right-aligned; centred on mobile) === */
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; list-style: none; margin: 0 -15px; padding: 0; }
.footer-links li { margin-inline: 15px; }
.footer-links a { position: relative; display: block; color: #ffffff; font-size: var(--text-base); text-transform: uppercase; }
@media (pointer: coarse) {
  .footer-links a::after { content: ""; position: absolute; inset: -14px -8px; }
}
@media (max-width: 767px) {
  .footer-links { justify-content: center; }
}

/* === Component: credit ("POWERED BY ORDERYOYO", white strip under the footer) === */
.credit { padding: 20px var(--gutter); background: var(--color-bg); text-align: center; color: var(--color-text); }
.credit a { color: var(--color-primary); }
@media (pointer: coarse) {
  .credit a { display: inline-block; padding-block: 14px; margin-block: -14px; }
}

/* === Component: contact-email (template component; this site has no forms) === */
.contact-email { display: grid; gap: var(--widget-gap); justify-items: center; text-align: center; }
.contact-email__address { font-weight: var(--weight-medium); word-break: break-word; }
.contact-email__phone a { color: inherit; }

/* === Component: not-found (404 page body) === */
.not-found { padding-block: 60px 110px; }
.not-found__text { max-width: 500px; margin: 0 auto var(--widget-gap); line-height: 1.5; }
.not-found__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--widget-gap); }

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

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

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