/*
 * site.css: the only stylesheet for peppers-telford.co.uk (Peppers Telford, Indian restaurant).
 *
 * 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 (from the original Elementor build; media queries can't use custom properties):
 *   mobile  <= 767px    tablet 768px-1024px    desktop >= 1025px
 *   - the nav becomes a centred burger + slide-down list at <= 767px
 *   - fixed ("parallax") section backgrounds only at >= 1025px on mouse/trackpad devices
 *   - headings and copy tighten their line-height at <= 1024px
 *
 * Editing: change tokens to restyle the site; add new components as new blocks;
 * add modifier classes (.split--dark) instead of changing a component for one page.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (from the original's computed styles) */
  --color-black: #000000;         /* header bar, app section base */
  --color-gold: #cfa670;          /* active/hover nav, "About" heading */
  --color-text: #2d2d2d;          /* About copy */
  --color-light: #f1f0f0;         /* app section heading + copy */
  --color-white: #ffffff;
  --color-bg-alt: #fafafa;        /* About band */
  --color-dark: #262626;          /* contact band + footer bar */
  --color-menu-active: #1d181f;   /* mobile dropdown active/hover item */
  --color-icon-hover: #e2e2e2;    /* back-to-top hover */
  --overlay-hero: rgb(255 255 255 / 0.4);
  --overlay-app: rgb(0 0 0 / 0.82);
  --shadow-header: 0 0 10px 0 rgb(0 0 0 / 0.5);

  /* Typography */
  --font-heading: "Istok Web", Arial, sans-serif;   /* nav, headings, About copy */
  --font-body: "Open Sans", Arial, sans-serif;      /* app copy, button */
  --font-alt: "Raleway", Arial, sans-serif;         /* address, footer */
  --text-base: 1rem;              /* 16px */
  --text-address: 1.25rem;        /* 20px */
  --text-h2-xl: 68px;             /* "About" (desktop) */
  --text-h2: 42px;                /* other headings */

  /* Spacing and shape */
  --container: 1140px;            /* Elementor boxed width */
  --gutter: 10px;                 /* Elementor column padding ("default" gap) */
  --header-height: 46px;          /* 43px on mobile */
  --section-pad: 110px;           /* About / App / Contact vertical padding (desktop) */
  --section-pad-mobile: 68px;

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

/* ============ 2. Fonts ============ */
/* Self-hosted Google Fonts (latin subset). Istok Web has only 400/700; Open Sans and Raleway are variable. */
@font-face { font-family: "Istok Web"; src: url("/assets/fonts/istok-web-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Istok Web"; src: url("/assets/fonts/istok-web-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("/assets/fonts/open-sans-latin-variable.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("/assets/fonts/raleway-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-heading); font-size: var(--text-base); line-height: 1.5; color: var(--color-text); 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-heading); font-weight: 600; margin: 0; }
p { margin: 1em 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
[id] { scroll-margin-top: var(--header-height); }

/* ============ 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 ===
 * Fixed black bar over the top of the hero (no body offset, like the original), links centred.
 * Home is gold as the current page; Contact turns gold while #contact is on screen (scroll-spy).
 * <= 767px: burger centred; the list slides down inside the bar (grid 0fr -> 1fr; the bar
 * uses align-items: stretch so items stay clipped while it animates).
 */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 0 16px; background: var(--color-black); box-shadow: var(--shadow-header); }
.site-header__inner { display: flex; flex-direction: column; align-items: stretch; max-width: var(--container); margin-inline: auto; }
.site-nav__list { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.site-nav__list a { display: block; padding: 13px 16px; font-family: var(--font-heading); font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-white); transition: color var(--duration-nav), background-color var(--duration-nav); }
.site-nav__list a:hover, .site-nav__list a:focus-visible, .site-nav__list a[aria-current="page"], .site-nav__list a.is-active { color: var(--color-gold); }
.nav-toggle { display: none; align-items: center; justify-content: center; align-self: center; position: relative; width: 33px; height: 33px; padding: 5.5px; border: 0; border-radius: 3px; background: rgb(0 0 0 / 0.05); color: var(--color-white); font-size: 22px; cursor: pointer; }
.nav-toggle::after { content: ""; position: absolute; inset: -6px; } /* 44px tap target */
.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: 767px) {
  :root { --header-height: 43px; }
  .nav-toggle { display: inline-flex; }
  .site-nav { display: grid; grid-template-rows: 0fr; margin-top: 10px; visibility: hidden; 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; text-align: center; }
  .site-nav__list a { padding: 16px 20px; font-weight: 500; }
  .site-nav__list a:hover, .site-nav__list a:focus-visible, .site-nav__list a[aria-current="page"], .site-nav__list a.is-active { color: var(--color-white); background: var(--color-menu-active); }
}

/* === Component: hero ===
 * Full-width photo with a white 40% overlay; logo left, vertically centred; 70vh tall.
 * Background image set per page with style="--hero-image: url(...)".
 */
.hero { position: relative; background: var(--hero-image) 0 0 / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--overlay-hero); }
.hero__inner { position: relative; display: flex; align-items: center; min-height: 70vh; padding: var(--gutter); }
.hero__logo { width: 500px; margin-bottom: 26px; }

/* === Component: split ===
 * Two 50% columns, vertically centred: text + image (About) or text + empty column (App).
 * .split--light: #FAFAFA band; .split--dark: photo background (style="--split-image: url(...)")
 * under a black 82% overlay. <= 767px: stacked, second column first, text centred.
 */
.split { position: relative; padding: var(--section-pad) 16px; }
.split__inner { position: relative; display: flex; align-items: center; }
.split__text, .split__media { flex: 0 0 50%; min-width: 0; }
.split__text { display: flex; flex-direction: column; } /* flex: the text blocks' margins add up, as in Elementor */
.split__media img { margin-inline: auto; }
.split__title { font-size: var(--text-h2); line-height: 110px; letter-spacing: 1px; }
.split__copy { line-height: 42px; }
.split--light { background: var(--color-bg-alt); }
.split--light .split__text, .split--light .split__media { padding: 16px; }
.split--light .split__title { font-size: var(--text-h2-xl); color: var(--color-gold); }
.split--light .split__copy { font-family: var(--font-heading); color: var(--color-text); }
.split--dark { background: var(--color-black) var(--split-image) center / cover no-repeat; }
.split--dark::before { content: ""; position: absolute; inset: 0; background: var(--overlay-app); mix-blend-mode: luminosity; }
.split--dark .split__title { color: var(--color-light); }
.split--dark .split__copy { font-family: var(--font-body); color: var(--color-light); }
.split__action { margin-top: 26px; }
@media (max-width: 1024px) {
  .split__title, .split--light .split__title { font-size: var(--text-h2); line-height: 68px; }
  .split__copy { line-height: 26px; }
}
@media (max-width: 767px) {
  .split { padding-block: var(--section-pad-mobile); }
  .split__inner { flex-direction: column-reverse; align-items: stretch; }
  .split__text, .split__media { flex-basis: auto; }
  .split__text { padding-block: 26px; text-align: center; }
  .split--light .split__text { padding: 42px 16px; }
  .split__action { padding-top: 16px; }
}

/* === Component: fixed backgrounds ===
 * The original fixed the hero and app photos at desktop widths only. Limited to mouse/trackpad
 * devices so touch browsers that ignore background-attachment: fixed never get a zoomed photo.
 */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .hero, .split--dark { background-attachment: fixed; }
}

/* === Component: button ===
 * White 3px outline, transparent; hover turns black and grows (Elementor "grow").
 */
.button { display: inline-block; padding: 15px 30px; border: 3px solid var(--color-white); border-radius: 0; background: transparent; color: var(--color-white); font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 16px; letter-spacing: 1px; text-align: center; cursor: pointer; transition: transform var(--duration), background-color var(--duration), border-color var(--duration), color var(--duration); }
.button:hover, .button:focus-visible { transform: scale(1.1); background: var(--color-black); border-color: var(--color-black); color: var(--color-white); }

/* === Component: contact-block ===
 * Dark band: name + address on the left (38%), map on the right (62%). Stacked and centred <= 767px.
 */
.contact-block { padding: var(--section-pad) 0; background: var(--color-dark); color: var(--color-white); }
.contact-block__inner { display: flex; align-items: stretch; }
.contact-block__details { display: flex; flex-direction: column; flex: 0 0 38.07%; min-width: 0; padding: var(--gutter); }
.contact-block__map { flex: 0 0 61.93%; min-width: 0; padding: var(--gutter); }
.contact-block__title { margin-bottom: 20px; font-size: var(--text-h2); font-weight: 700; line-height: 68px; letter-spacing: 0.3px; color: var(--color-white); }
.contact-block__address { margin: 20px 0; font-family: var(--font-alt); font-size: var(--text-address); font-weight: 500; line-height: 42px; letter-spacing: 0.3px; }
@media (max-width: 1024px) {
  .contact-block { padding: 50px 25px 100px; }
}
@media (max-width: 767px) {
  .contact-block { padding: 50px 25px; }
  .contact-block__inner { flex-direction: column; }
  .contact-block__details { text-align: center; }
}

/* === Component: map === */
.map { display: block; width: 100%; height: 400px; border: 0; }

/* === Component: site-footer ===
 * Footer bar (#262626): copyright + "Powered By OrderYOYO" left, back-to-top chevrons right.
 * 768-1024px: 75% / 25%; <= 767px stacked and centred.
 */
.site-footer { padding: 25px 0; background: var(--color-dark); color: var(--color-white); font-family: var(--font-alt); }
.site-footer__inner { display: flex; align-items: center; }
.site-footer__copyright, .site-footer__top { flex: 0 0 50%; min-width: 0; padding: var(--gutter); }
.site-footer__copyright p { margin: 0; font-size: 16px; font-weight: 700; line-height: 26px; letter-spacing: 0.3px; }
.site-footer__copyright a { color: var(--color-white); }
.site-footer__top { display: flex; justify-content: flex-end; align-items: flex-start; }
@media (max-width: 1024px) {
  .site-footer { padding: 25px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .site-footer__copyright { flex-basis: 75%; }
  .site-footer__top { flex-basis: 25%; }
}
@media (max-width: 767px) {
  .site-footer__inner { flex-direction: column; align-items: stretch; }
  .site-footer__copyright { text-align: center; }
  .site-footer__top { justify-content: center; }
}

/* === Component: back-to-top === */
.back-to-top { display: inline-flex; justify-content: center; width: 35px; height: 39px; font-size: 35px; line-height: 0; color: var(--color-white); transition: transform var(--duration), color var(--duration); }
.back-to-top .icon { width: 35px; height: 35px; }
.back-to-top:hover, .back-to-top:focus-visible { transform: scale(1.1); color: var(--color-icon-hover); }

/* === Component: notice (404 page) === */
.notice { min-height: calc(100vh - 109px); padding: calc(var(--header-height) + var(--section-pad)) 16px var(--section-pad); background: var(--color-bg-alt); text-align: center; } /* fills the window above the footer bar */
.notice__title { font-size: var(--text-h2-xl); line-height: 110px; letter-spacing: 1px; color: var(--color-gold); }
.notice__copy { line-height: 26px; color: var(--color-text); }
.notice__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 32px; list-style: none; margin: 26px 0 0; padding: 0; }
.notice__links a { display: inline-block; padding: 13px 0; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text); transition: color var(--duration-nav); }
.notice__links a:hover, .notice__links a:focus-visible { color: var(--color-gold); }
@media (max-width: 1024px) { .notice__title { font-size: var(--text-h2); line-height: 68px; } }
@media (max-width: 767px) { .notice { min-height: calc(100vh - 181px); padding-block: calc(var(--header-height) + var(--section-pad-mobile)) var(--section-pad-mobile); } }

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

/* === Component: popup (starter; unused on this site) === */
.popup { border: 0; padding: 32px; max-width: min(90vw, 600px); }
.popup::backdrop { background: rgb(0 0 0 / 0.6); }

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

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

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