/*
 * site.css: the only stylesheet for sunshine-ibstock.co.uk (Sunshine Takeaway, Ibstock).
 * Rebuilt from the classic App4 theme "app4image" (style.css + theme customiser colours + SlickNav).
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing, motion (custom properties)
 *   2. Fonts         @font-face for self-hosted Montserrat
 *   3. Base          reset and element defaults (the theme's typography)
 *   4. Layout        text sections and the centred content column
 *   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 theme; media queries can't use custom properties):
 *   ≤ 768px   mobile layout: "MENU" button replaces the nav (Facebook icon hidden, as on the
 *             original), smaller headings, body text 14px, map 300px tall
 *   > 768px   desktop layout
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (theme customiser output on the original) */
  --color-red: #ec1429;            /* header, Order Now band, page title band, footer, links */
  --color-navy: #223a6b;           /* Order Now button hover */
  --color-black: #000000;          /* body background */
  --color-white: #ffffff;          /* body text, headings, nav text */
  --color-map-bg: #e5e3df;         /* placeholder behind the map iframe while it loads */

  /* Typography */
  --font-body: "Montserrat", "Open Sans", sans-serif;
  --text-base: 16px;
  --text-base-mobile: 14px;
  --leading: 1.5;

  /* Spacing */
  --gutter: 20px;
  --section-pad: 50px;             /* section#welcome, #lower, #sub-content */
  --content-width: 720px;          /* .content column */
  --header-height: 60px;           /* desktop header: 5px padding + 50px links + 5px */

  /* Motion (match the original's timings) */
  --duration: 200ms;               /* nav links: "all .2s linear" */
  --ease: linear;
  --duration-menu: 200ms;          /* SlickNav slideToggle (~200ms) */
  --ease-menu: cubic-bezier(0.45, 0, 0.55, 1); /* close to jQuery "swing" */
}

/* ============ 2. Fonts ============ */
/* Self-hosted Google Font (variable woff2, latin subset, OFL). The original loaded Montserrat
 * 300/400/700 from Google Fonts; only 400 is used on the pages. */
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-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);
  line-height: var(--leading);
  color: var(--color-white);
  background: var(--color-black);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--color-white); font-weight: 400; line-height: 1.25; }
h1 { font-size: 46px; margin-bottom: 22px; }
h2 { font-size: 35px; margin-bottom: 19px; }
h3 { font-size: 28px; margin-bottom: 19px; }
p { margin: 0 0 18px; font-size: var(--text-base); line-height: var(--leading); }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
li { margin: 0; }
a { color: var(--color-red); text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-white); 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 ============ */
/* Text sections (section#welcome / #lower / #sub-content on the original): 50px 20px padding,
 * centred 720px column, centred text. Modifier --light: white background, black text. */
.text-section { padding: var(--section-pad) var(--gutter); text-align: center; }
.text-section--light { background-color: var(--color-white); color: var(--color-black); }
.text-section--light h2,
.text-section--light h3 { color: var(--color-black); }
.content { width: 100%; max-width: var(--content-width); margin: auto; }

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

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

/* === Component: site-header ===
 * Red bar, 60px tall, scrolls away (not sticky). Left: the theme's invisible 1×1 "logo" link
 * (blank.png, kept like for like). Right: nav links, then the Facebook icon.
 * DOM order: logo, nav-toggle, site-nav, social. */
.site-header {
  position: relative;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 5px var(--gutter);
  background-color: var(--color-red);
}
.site-header__logo { display: block; }
.site-header__logo img { display: block; max-height: 50px; }
.site-header__social { display: block; margin-left: 20px; padding: 12px 5px; }
.site-header__social img { display: block; width: 26px; height: 26px; }

/* === Component: site-nav (desktop: uppercase 13px links, white box on hover) === */
.site-nav { margin-left: auto; }
.site-nav__list { display: flex; }
.site-nav__list a {
  display: block;
  height: 50px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 50px;
  text-transform: uppercase;
  color: var(--color-white);
  transition: all var(--duration) var(--ease);
}
.site-nav__list a:hover,
.site-nav__list a:focus {
  color: var(--color-red);
  box-shadow: inset 0 -50px 0 0 var(--color-white);
}
.site-nav__list a:focus-visible { outline-offset: -2px; outline-color: var(--color-red); }

/* === Component: nav-toggle (mobile "MENU ☰" button, SlickNav look: white text in the red bar) === */
.nav-toggle { display: none; }

@media (max-width: 768px) {
  .site-header { padding: 0 var(--gutter); min-height: 44px; }
  .site-header__logo { margin-top: 5px; }
  .site-header__social { display: none; }

  /* 44px tap target; the label sits 21px from the top, as on the original. */
  .nav-toggle {
    display: flex;
    align-items: flex-start;
    margin-left: auto;
    height: 44px;
    padding: 21px 0 5px 10px;
    border: 0;
    background: none;
    color: var(--color-white);
    font: inherit;
    font-size: 14px;
    line-height: 18.2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle:focus-visible { outline-offset: -2px; }
  .nav-toggle__icon { display: inline-block; width: 20px; height: 12px; margin: 3px 0 0 5px; }
  .nav-toggle__icon span { display: block; width: 20px; height: 2px; border-radius: 1px; background-color: var(--color-white); }
  .nav-toggle__icon span + span { margin-top: 3px; }

  /* Slide-down list: grid row 0fr → 1fr. align-items: stretch keeps the list clipped while it animates. */
  .site-nav {
    flex-basis: 100%;
    display: grid;
    grid-template-rows: 0fr;
    align-items: stretch;
    margin-left: 0;
    visibility: hidden;
    transition: grid-template-rows var(--duration-menu) var(--ease-menu), visibility 0s linear var(--duration-menu);
  }
  .site-nav.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows var(--duration-menu) var(--ease-menu), visibility 0s;
  }
  .site-nav__list { display: block; min-height: 0; overflow: hidden; font-size: 12px; text-align: center; }
  .site-nav__list li { border-bottom: 1px solid var(--color-white); }
  .site-nav__list li:last-child { border-bottom: 0; }
  /* 44px tall items (original 38px) for the tap-target rule; labels in their original case. */
  .site-nav__list a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 44px;
    padding: 10px;
    font-size: inherit;
    line-height: 18px;
    text-transform: none;
    transition: none;
  }
  .site-nav__list a:hover,
  .site-nav__list a:focus { color: var(--color-red); background-color: var(--color-white); box-shadow: none; }

  /* Without JavaScript the menu can't toggle: show the list open. */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav { grid-template-rows: 1fr; visibility: visible; }
}

/* === Component: site-footer (red, centred copyright line with the OrderYOYO credit) === */
.site-footer { padding: 50px; background-color: var(--color-red); color: var(--color-white); text-align: center; }
.site-footer__copyright { margin: 0; font-size: 0.8em; line-height: 1.5; }
.site-footer__copyright a { color: var(--color-white); }

/* === Component: home-hero (home: full-width bg.jpg, centred logo; padding 8% scales with width) === */
.home-hero {
  padding: 8% var(--gutter);
  background-size: cover;
  background-position: center;
  text-align: center;
}
.home-hero__logo { display: inline-block; width: 50%; max-width: 600px; height: auto; vertical-align: baseline; }

/* === Component: link-strip (red band with a white pill button; hover navy) === */
.link-strip { padding: 10px var(--gutter); background-color: var(--color-red); text-align: center; }
.link-strip__button {
  display: inline-block;
  min-width: 260px;
  margin: 5px;
  padding: 13px 20px;            /* 12px on the original; +1px keeps the 44px tap target */
  border-radius: 50px;
  background-color: var(--color-white);
  color: var(--color-red);
  font-size: 18px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
.link-strip__button:hover,
.link-strip__button:focus { background-color: var(--color-navy); color: var(--color-white); }

/* === Component: image-strip (4 static photo tiles; the row is 120% wide and shifted −5%,
 * so the outer tiles are cropped at both edges, as on the original) === */
.image-strip { overflow: hidden; }
.image-strip__row { display: flex; width: 120%; margin-left: -5%; }
.image-strip__tile {
  flex: none;
  width: 24%;
  padding: 9% 0;                 /* % of the row width: the tile's height */
  margin: 0 1% 1% 0;
  background-size: cover;
  background-position: center;
}

/* === Component: image-banner (inner pages: 300px bg.jpg band) === */
.image-banner { height: 300px; background-size: cover; background-position: center; }

/* === Component: page-title (red band with the page H1) === */
.page-title { padding: 30px var(--gutter); background-color: var(--color-red); text-align: center; }
.page-title h1 { margin: 0; line-height: 1; color: var(--color-white); }

/* === Component: map (keyless Google Maps iframe, full width; 400px, 300px on mobile) === */
.map { display: block; width: 100%; height: 400px; border: 0; background-color: var(--color-map-bg); }
@media (max-width: 768px) {
  .map { height: 300px; }
}

/* === Component: contact-email (not used: the site has no form on any page; kept for later) === */
.contact-email { display: grid; gap: 1rem; justify-items: center; }
.contact-email__address { word-break: break-word; }

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