/*
 * site.css: the only stylesheet for this site (Rainbow Pizza Swadlincote).
 *
 * 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        sections
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         rare page-specific rules: "=== Page: <path> ==="
 *   7. Utilities     a handful of helpers
 *
 * Rebuilt from the App4 "Green Bottle" theme. Breakpoints are the original theme's
 * (media queries can't use custom properties):
 *   ≤ 510px / ≤ 420px   (unused here: only for the theme's .logo-text)
 *   ≤ 767px             split-row padding 60px 20px, image panels 300px tall
 *   ≤ 768px             mobile typography (body 14px, h1 32px…), menu items 20px, banner 200px
 *   ≥ 769px             hero title box 600px wide
 *   ≤ 1199px            split rows stack (text, then image), image panels 400px tall
 *   ≥ 1200px            split rows side by side; second row reversed (image left)
 *
 * Editing: change tokens to restyle the site; add new components as new blocks;
 * add modifier classes (.split--reverse) instead of changing a component for one page.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (from the original theme's style.css and computed styles) */
  --color-text: #ffffff;            /* body and heading text is white on the colour panels */
  --color-grey: #696969;            /* menu items, button border, button hover */
  --color-button: #808080;          /* .readMore background ("grey") */
  --color-lime: #c6dc57;            /* links, hamburger when active/solid, sub-page title band */
  --color-red: #c61a22;             /* default split-row text panel */
  --color-yellow: #d2d209;          /* second split-row text panel */
  --color-green: #9bbf47;           /* home contact block */
  --color-footer: #7cccde;          /* footer background */
  --color-header: #000000;          /* solid header */
  --color-hero-bg: #7d7d7d;         /* hero placeholder while the image loads */
  --color-bg: #ffffff;

  /* /contact/ page-content text colour (decision d5).
     The original renders this text white on white (#ffffff, invisible).
     To match the original exactly, change #696969 to #ffffff. */
  --page-content-color: #696969;

  /* Typography */
  --font-body: "Open Sans", sans-serif;
  --text-base: 18px;
  --text-base-mobile: 14px;
  --leading: 1.5;
  --heading-weight: 600;            /* resolves to the 700 face, as on the original (only 400/700 loaded) */
  --heading-spacing: 0.1em;

  /* Shape and size */
  --header-height: 110px;
  --split-min-height: 460px;

  /* Motion (original: jQuery fadeToggle 'fast' linear ≈ 200ms; CSS transitions .2s linear) */
  --duration: 200ms;
  --ease: linear;
}

/* ============ 2. Fonts ============ */
/* Open Sans, self-hosted (latin variable file). The original loaded weights 300/400/700
   from Google Fonts; only 400 and 700 are used. Two faces with single weights keep the
   original's matching: headings at 600 render with the 700 face. */
@font-face { font-family: "Open Sans"; src: url("/assets/fonts/open-sans-latin-variable.woff2") format("woff2"); font-weight: 400; 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: 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); line-height: var(--leading); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; color: var(--color-text); font-weight: var(--heading-weight); line-height: 1.25; letter-spacing: var(--heading-spacing); }
h1 { font-size: 40px; margin-bottom: 20px; }
h2 { font-size: 35px; margin-bottom: 9px; }
h3 { font-size: 28px; margin-bottom: 9px; }
p { margin: 0 0 18px; font-size: var(--text-base); line-height: var(--leading); }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--color-lime); text-decoration: none; }
a:hover, a:focus { color: var(--color-grey); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-lime); outline-offset: 2px; }

@media (max-width: 768px) {
  h1 { font-size: 32px; line-height: 1.3; }
  h2 { font-size: 28px; line-height: 1.3; }
  h3 { font-size: 21px; line-height: 1.3; }
  body, p { font-size: var(--text-base-mobile); line-height: 1.5; }
}

/* ============ 4. Layout ============ */
.section { position: relative; display: block; }

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

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

/* === Component: site-header ===
   Fixed, 110px. Transparent over the home hero; solid black (+ visible logo) when
   <body class="header-solid"> (inner pages) or .is-scrolled (site.js, after scrolling past the hero). */
.site-header { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: var(--header-height); background-color: transparent; transition: all var(--duration) var(--ease); }
.site-header.is-scrolled, .header-solid .site-header { background-color: var(--color-header); box-shadow: 0 -5px 10px 5px rgb(0 0 0 / 0.2); }
.site-header__logo { position: absolute; top: 50%; left: 50%; display: block; width: auto; transform: translateX(-50%); opacity: 0; pointer-events: none; color: var(--color-text); }
.site-header.is-scrolled .site-header__logo, .header-solid .site-header .site-header__logo { opacity: 1; pointer-events: auto; }
.site-header__logo-text { font-size: 24px; text-align: center; text-transform: uppercase; color: var(--color-text); }

/* === Component: nav-toggle (hamburger: three 2px lines, 40 × 26) === */
.nav-toggle { position: absolute; z-index: 1020; top: 33px; right: 38px; display: flex; flex-direction: column; justify-content: center; gap: 10px; width: 44px; height: 44px; padding: 0 2px; margin: 0; background: none; border: 0; cursor: pointer; }
.nav-toggle__line { display: block; width: 40px; height: 2px; background-color: var(--color-text); }
.nav-toggle[aria-expanded="true"] .nav-toggle__line,
.site-header.is-scrolled .nav-toggle__line,
.header-solid .site-header .nav-toggle__line { background-color: var(--color-lime); }
@media (max-width: 768px) {
  .nav-toggle { right: 18px; }
}

/* === Component: site-nav (full-screen white overlay, fades in/out 200ms linear) === */
.site-nav__list { position: fixed; inset: 0; z-index: 1010; margin: 0; padding: 76px 10% 0; text-align: center; background: var(--color-bg); opacity: 0; visibility: hidden; transition: opacity var(--duration) var(--ease), visibility 0s linear var(--duration); }
.site-nav.is-open .site-nav__list { opacity: 1; visibility: visible; transition: opacity var(--duration) var(--ease), visibility 0s; }
.site-nav__list li { display: block; margin: 0; padding: 0; overflow: hidden; border-bottom: 1px solid var(--color-grey); }
.site-nav__list li:last-child { border-bottom: none; }
.site-nav__list a { display: block; margin: 0; padding: 20px 0; color: var(--color-grey); font-size: 26px; line-height: 36px; text-transform: uppercase; text-decoration: none; }
.site-nav__list li:hover a, .site-nav__list a:focus-visible { color: var(--color-lime); }
@media (max-width: 768px) {
  .site-nav__list a { font-size: 20px; padding: 12px 0; }
}

/* === Component: site-footer === */
.site-footer { display: block; padding: 50px 30px; background: var(--color-footer); color: var(--color-text); text-align: center; font-size: 0.7em; }
.site-footer p { margin: 0; font-size: inherit; line-height: var(--leading); }
.site-footer a { color: inherit; }
.site-footer a:hover, .site-footer a:focus { color: inherit; text-decoration: underline; }

/* === Component: button (.button = the theme's .readMore: grey, bold, darkens on hover) === */
.button { display: inline-block; height: 46px; margin-top: 20px; padding: 9px 20px 11px; border: 1px solid var(--color-grey); background: var(--color-button); color: var(--color-text); font-weight: 700; line-height: 26px; text-decoration: none; transition: all var(--duration) var(--ease); }
.button:hover, .button:focus { color: var(--color-text); background: var(--color-grey); }

/* === Component: hero (home: full-viewport background image with a 25% black overlay) === */
.hero { position: relative; display: block; height: 100vh; height: 100svh; overflow: hidden; background-color: var(--color-hero-bg); background-size: cover; background-position: center; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.25); }
.hero__title-box { position: absolute; top: 28%; left: 50%; z-index: 100; width: 80%; margin-left: -40%; }
.hero__title { margin-top: 5vh; font-size: 48px; line-height: 1.25; text-align: center; text-transform: uppercase; color: var(--color-text); }
@media (min-width: 769px) {
  .hero__title-box { width: 600px; margin-left: -270px; }
}

/* === Component: split (colour text panel + background-image panel) ===
   Desktop (≥1200px): side by side, both at least 460px tall. --reverse puts the image
   on the left. Below 1200px: stacked, text first, image panel 400px (300px ≤767px). */
.split { display: flex; flex-direction: column; }
.split__text { padding: 80px 30px; background: var(--color-red); }
.split__text--yellow { background: var(--color-yellow); }
.split__image { position: relative; height: 400px; background: var(--color-red); }
.split__image-inner { position: absolute; inset: 0; background-size: cover; background-position: center; }
.split__body { width: 100%; margin: auto; text-align: center; }
.split__body h1 { text-transform: uppercase; }
@media (max-width: 767px) {
  .split__text { padding: 60px 20px; }
  .split__image { height: 300px; }
}
@media (min-width: 1200px) {
  .split { flex-direction: row; }
  .split--reverse { flex-direction: row-reverse; }
  .split__text, .split__image { min-height: var(--split-min-height); height: auto; padding: 50px 30px; }
  .split__text { flex: 0 0 50%; }
  .split__image { flex: 0 0 50%; }
  .split__text--narrow { flex-basis: 41.66666%; }
  .split__image--wide { flex-basis: 58.33333%; }
  .split__body { width: 76%; }
}

/* === Component: contact-block (green address / phone / hours block, id="contact") === */
.contact-block { display: block; width: 100%; padding: 50px 30px; text-align: center; background: var(--color-green); scroll-margin-top: var(--header-height); }
.contact-block h2 { margin-bottom: 20px; }

/* === Component: page-title (lime band under the fixed header on inner pages) === */
.page-title { padding: 140px 30px 30px; text-align: center; background: var(--color-lime); }
.page-title h1 { margin-bottom: 0; color: var(--color-text); }

/* === Component: image-banner (inner pages: background image, cover, centred;
   site.js parallaxBg moves the background down 0.4px per px scrolled once the banner
   reaches the header, like the original theme) === */
.image-banner { position: relative; display: block; height: 360px; background-size: cover; background-position: center center; }
@media (max-width: 768px) {
  .image-banner { height: 200px; }
}

/* === Component: page-content (centred text column on inner pages) === */
.page-content { display: block; width: 100%; max-width: 660px; margin: auto; padding: 50px 30px; text-align: center; color: var(--page-content-color); }
.page-content h2, .page-content h3, .page-content p { color: var(--page-content-color); }
.page-content p:last-child { margin-bottom: 0; }

/* === Component: parallax (GSAP moves the first child) === */
.parallax { overflow: hidden; }

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

/* === Component: contact-email (replaces WordPress forms; none on this site, kept for future use) === */
.contact-email { display: grid; gap: 16px; justify-items: center; }
.contact-email__address { font-weight: 700; word-break: break-word; }
.contact-email__phone a { color: inherit; }

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

/* === Page: /404.html (added by redirects-seo) === */
.page-content--404 { color: var(--color-grey); }
.page-content--404 h2, .page-content--404 p { color: var(--color-grey); }
.page-content--404 a:not(.button) { color: var(--color-grey); text-decoration: underline; }
.page-content--404 a:not(.button):hover { color: var(--color-lime); }

/* ============ 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; }
  [data-reveal] { visibility: visible !important; }
}