/*
 * site.css: the only stylesheet for newadams.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, columns
 *   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
 *
 * Values come from the original's computed styles (Elementor post-9.css). The original's
 * Elementor columns have 10px inner padding ("column gap default"), kept as --gutter.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours */
  --color-dark: #3b3a3b;          /* header band, buttons, "CONTACT" heading */
  --color-red: #d42a2a;           /* card headings, opening-times box, gradient bottom */
  --color-red-deep: #821a1a;      /* gradient top */
  --color-white: #ffffff;
  --color-text: #000000;          /* browser default body text on the original */
  --color-text-intro: #231f20;
  --color-text-card: #4f4f4f;
  --color-text-contact: #2d2d2d;
  --color-text-footer: #222222;
  --color-text-on-red: rgb(255 255 255 / 0.92);

  /* Typography (Google Fonts self-hosted; the intro and body use the browser's default serif, as the original) */
  --font-body: Times, "Times New Roman", serif;
  --font-heading: "Open Sans", Arial, sans-serif;
  --font-text: "Roboto", Arial, sans-serif;
  --font-address: "Lato", Arial, sans-serif;
  --font-footer: Arial, Helvetica, sans-serif;
  --heading-size: 30px;           /* 20px at <= 1024px */
  --heading-weight: 900;          /* Open Sans tops out at 800; the browser uses 800, as on the original */
  --heading-tracking: 1px;

  /* Spacing and shape */
  --container: 1140px;
  --gutter: 10px;                 /* Elementor column padding */
  --widget-gap: 20px;             /* Elementor space between widgets */

  /* Motion (Elementor: animated 1.25s, animated-slow 2s, button grow 0.3s) */
  --duration: 300ms;
  --ease: ease;
}

/* ============ 2. Fonts ============ */
@font-face { font-family: "Open Sans"; src: url("/assets/fonts/opensans-latin-var.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-latin-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; src: url("/assets/fonts/lato-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============ 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; color: var(--color-text); background: var(--color-white); overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }

/* ============ 4. Layout ============ */
/* Boxed container: 1140px wide, full width below that (columns keep a 10px gutter). */
.container { width: 100%; max-width: var(--container); margin-inline: auto; }
.section { position: relative; }

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

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

/* === Component: site-header (dark band with the centred logo; no navigation, as the original) === */
.site-header { background: var(--color-dark); padding: 42px 0; }
.site-header__inner { padding: var(--gutter); display: flex; justify-content: center; }
.site-header__logo { width: 300px; }
@media (max-width: 767px) {
  .site-header { padding: 0; }
  .site-header__logo { width: 100%; margin: 42px; }
}

/* === Component: site-footer (copyright line + Powered by OrderYOYO) === */
/* The original had no footer: the copyright sat at the bottom of the page content.
   Default: a plain line below the content. The home page pulls it up beside the
   opening-times box (see "Page: /"). */
.site-footer { padding: 0 0 50px; }
.site-footer__inner { padding: 0 var(--gutter); }
.site-footer__line { margin: 0; font-family: var(--font-footer); font-size: 16px; line-height: 42px; color: var(--color-text-footer); }
.site-footer__sep { padding-inline: 0.35em; }
.site-footer__credit { white-space: nowrap; }
.site-footer__credit a { color: inherit; }
.site-footer__credit a:hover { color: var(--color-red); }
@media (max-width: 767px) {
  .site-footer { padding: 20px 0 50px; }
  .site-footer__line { text-align: center; line-height: 28px; }
  .site-footer__sep { display: none; }
  .site-footer__credit { display: block; }
}

/* === Component: icon (inline SVG from the sprite in shared/footer.html) === */
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.icon-sprite { display: none; }

/* === Component: section-heading (Open Sans 900 uppercase) === */
.section-heading { font-family: var(--font-heading); font-size: var(--heading-size); font-weight: var(--heading-weight); line-height: 1; letter-spacing: var(--heading-tracking); text-transform: uppercase; color: var(--color-dark); }
.section-heading--red { color: var(--color-red); }
.section-heading--white { color: var(--color-white); }
@media (max-width: 1024px) { :root { --heading-size: 20px; } }

/* === Component: button (dark block button with Elementor "grow" hover) === */
.button { display: block; width: 100%; padding: 25px; background: var(--color-dark); color: var(--color-white); font-family: var(--font-text); font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 2.2px; text-transform: uppercase; text-align: center; text-decoration: none; transition: transform var(--duration) var(--ease); }
.button:hover, .button:focus-visible { transform: scale(1.1); color: var(--color-white); }
@media (max-width: 1024px) { .button { font-size: 14px; } }

/* === Component: intro (centred serif paragraph) === */
.intro { padding: 68px 0; }
.intro__text { display: flow-root; padding: var(--gutter); text-align: center; font-size: 26px; line-height: 42px; color: var(--color-text-intro); }
.intro__text p { margin: 1em 0; }
@media (max-width: 767px) { .intro__text { font-size: 16px; } }

/* === Component: promo-band (red gradient band holding two promo cards) === */
.promo-band { background-image: linear-gradient(180deg, var(--color-red-deep) 0%, var(--color-red) 100%); padding: 120px 0 90px; }
.promo-band__grid { display: flex; }
.promo-band__col { width: 50%; padding: var(--gutter); margin-right: 16px; }
@media (max-width: 1024px) {
  .promo-band { padding: 70px 10px; }
  .promo-band__col { margin-right: 0; }
}
@media (max-width: 767px) {
  .promo-band { padding: 40px; }
  .promo-band__grid { flex-direction: column; }
  .promo-band__col { width: 100%; padding: 0; }
  .promo-band__col + .promo-band__col { margin-top: 42px; }
}

/* === Component: promo-card (image with a white card overlapping its bottom) === */
.promo-card__image { width: 80%; margin: 0 auto var(--widget-gap); aspect-ratio: 1; object-fit: cover; }
.promo-card__body { margin: -120px 20px 0; padding-top: 30px; background: var(--color-white); position: relative; text-align: center; }
.promo-card__title { margin-bottom: var(--widget-gap); }
.promo-card__text { display: flow-root; padding: 0 25px; font-family: var(--font-text); font-size: 16px; font-weight: 300; line-height: 1.8em; color: var(--color-text-card); margin-bottom: var(--widget-gap); }
.promo-card__text p { margin: 1em 0; }
@media (max-width: 1024px) {
  .promo-card__body { margin: -100px 10px 0; padding-top: 0; }
  .promo-card__title { padding-top: 30px; }
  .promo-card__text { padding: 0 20px; font-size: 14px; }
}
@media (max-width: 767px) {
  .promo-card__body { margin: -130px 20px 0; }
}

/* === Component: contact-block (address + phone list beside a food photo) === */
.contact-block { padding-top: 120px; }
.contact-block__grid { display: flex; }
.contact-block__info { width: 39.006%; }
.contact-block__photo { width: 60.994%; min-height: 50px; background-size: cover; background-position: center; }
.contact-block__heading { margin-bottom: var(--widget-gap); }
.contact-block__address p { margin: 16px 0; }
.contact-block__address { display: flow-root; margin: 0 0 var(--widget-gap); font-family: var(--font-address); font-size: 16px; line-height: 42px; letter-spacing: 0.3px; color: var(--color-text-contact); }
@media (max-width: 1024px) {
  .contact-block { padding-top: 90px; }
  .contact-block__info { width: calc(39.006% - 80px); margin: 30px 50px 0 30px; }
  .contact-block__heading { padding-top: 30px; }
}
@media (max-width: 767px) {
  .contact-block { padding-top: 50px; }
  .contact-block__grid { flex-direction: column; }
  .contact-block__info { width: 100%; margin: 0; padding: 0 30px 60px; }
  .contact-block__heading { text-align: center; }
  .contact-block__address { text-align: center; line-height: 26px; }
  .contact-block__photo { width: 100%; min-height: 260px; }
}

/* === Component: phone-list (icon + tel: link, styled as the original plain text) === */
.phone-list { list-style: none; margin: 0; padding: 0; }
.phone-list__item { display: flex; align-items: center; min-height: 42px; color: var(--color-text-contact); }
.phone-list__icon { width: 20px; margin-right: 26px; display: flex; justify-content: center; }
.phone-list__icon .icon { font-size: 16px; }
.phone-list__link { padding-left: 5px; font-family: var(--font-heading); font-size: 16px; line-height: 42px; letter-spacing: 0.3px; color: inherit; text-decoration: none; }
.phone-list__link:hover { text-decoration: underline; }
/* 44px tap area without changing the original 42px line spacing */
.phone-list__link { position: relative; }
.phone-list__link::after { content: ""; position: absolute; inset: -1px 0; }
@media (max-width: 767px) { .phone-list__item { justify-content: center; } }

/* === Component: opening-hours (red box overlapping the photo above it) === */
.opening-hours { padding-bottom: 100px; }
.opening-hours__row { display: flex; justify-content: flex-end; }
.opening-hours__box { width: 55.526%; margin-top: -220px; padding: 60px; background: var(--color-red); position: relative; }
.opening-hours__heading { margin-bottom: var(--widget-gap); }
.opening-hours__body { display: flow-root; padding: 10px 0; font-family: var(--font-text); font-size: 21px; font-weight: 300; line-height: 1.8em; letter-spacing: 0.3px; color: var(--color-text-on-red); }
.opening-hours__body p { margin: 1em 0; }
/* The original ended the text with an empty paragraph; this keeps the same box height. */
.opening-hours__body::after { content: ""; display: block; height: 1.8em; margin: 1em 0; }
@media (max-width: 1024px) {
  .opening-hours__box { margin-top: -180px; padding: 40px 20px 40px 40px; }
  .opening-hours__heading { padding-top: 30px; }
  .opening-hours__body { padding: 5px 0; font-size: 18px; }
}
@media (max-width: 767px) {
  .opening-hours { padding-bottom: 0; }
  .opening-hours__box { width: auto; margin: -26px 20px 0; padding: 30px; flex: 1; }
  .opening-hours__body { padding: 0; font-size: 16px; }
}

/* === Component: reveal (GSAP animates these; hidden only once GSAP has loaded) === */
.reveal-ready [data-reveal] { visibility: hidden; }

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

/* === Page: / (copyright line sits bottom-left beside the opening-times box, as the original) === */
@media (min-width: 768px) {
  .page-home .opening-hours { padding-bottom: 0; }
  .page-home .site-footer { margin-top: -180px; padding-bottom: 100px; pointer-events: none; position: relative; }
  .page-home .site-footer__inner { min-height: 180px; display: flex; align-items: flex-end; padding-bottom: 30px; }
  .page-home .site-footer__line { width: calc(44.474% - 2 * var(--gutter)); pointer-events: auto; }
}

/* === Page: /404.html === */
.not-found { padding: 68px 0 90px; text-align: center; }
.not-found__inner { padding: var(--gutter); }
.not-found__title { margin-bottom: 30px; }
.not-found__text { font-size: 26px; line-height: 42px; color: var(--color-text-intro); margin: 0 0 30px; }
.not-found__text a { color: var(--color-red); }
.not-found .button { display: inline-block; width: auto; min-width: 240px; }
@media (max-width: 767px) { .not-found__text { font-size: 16px; } }

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