/*
 * site.css: the only stylesheet for knightonplaice.co.uk.
 *
 * 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, columns, stacks (mirrors the original Elementor boxed sections)
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         rare page-specific rules: "=== Page: <path> ==="
 *   7. Utilities     a handful of helpers
 *
 * Breakpoints (the original Elementor ones; media queries can't use custom properties):
 *   mobile  <= 767px    tablet 768px-1024px    desktop >= 1025px
 *   Container max-width: 1140px desktop, 1024px tablet, 767px mobile (i.e. full width below 1140px).
 *
 * Editing: change tokens to restyle the site; add new components as new blocks;
 * add modifier classes (.button--light) instead of changing a component for one page.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (from the original's computed styles) */
  --color-text: #0c0c0c;          /* contact text, footer text */
  --color-heading: #231f20;       /* CONTACT / OPENING TIMES headings */
  --color-black: #000000;         /* intro text, card headings, credit link */
  --color-muted: #4f4f4f;         /* card text */
  --color-bg: #ffffff;
  --color-dark: #424242;          /* order / app band */
  --color-tan: #c5ac80;           /* card bodies */
  --color-red: #ee2e2e;           /* buttons, "FREE Mobile App" box */
  --color-on-red: rgb(255 255 255 / 0.92);
  --color-copyright: #222222;
  --color-facebook: #3b5998;
  --overlay-hero: rgb(0 0 0 / 0.25);
  --shadow-section: 0 0 10px 0 rgb(0 0 0 / 0.29);

  /* Typography */
  --font-body: "Roboto", Sans-serif;
  --font-heading: "Open Sans", Sans-serif;
  --font-copyright: arial, sans-serif;

  /* Spacing and shape (Elementor defaults: 10px column padding, 20px between widgets) */
  --column-pad: 10px;
  --widget-gap: 20px;
  --container: 1140px;

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

/* ============ 2. Fonts ============ */
/* Self-hosted Google Fonts (SIL OFL), latin subset. Roboto is a variable font (300/400/700 used).
   Open Sans: the original asked for 900, which Google doesn't serve; browsers drew the 800 face,
   so only 800 is shipped and headings keep font-weight: 900 (rendered with this 800 face). */
@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; }
@font-face { font-family: "Open Sans"; src: url("/assets/fonts/open-sans-800-latin.woff2") format("woff2"); font-weight: 800; 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: 16px; line-height: normal; color: var(--color-black); background: var(--color-bg); }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 1em 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }

/* ============ 4. Layout ============ */
/* A section is full width; .container is the 1140px boxed row; .column is an Elementor column
   (10px padding); .stack spaces its children 20px apart like Elementor widgets. */
.section { position: relative; }
.container { display: flex; max-width: var(--container); margin-inline: auto; }
.column { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; padding: var(--column-pad); }
.column--half { width: 50%; }
.stack > :not(:last-child) { margin-bottom: var(--widget-gap); }
.text-block { display: flow-root; }

@media (max-width: 1024px) {
  .container { max-width: 1024px; }
}
@media (max-width: 767px) {
  .container { flex-wrap: wrap; max-width: 767px; }
  .column--half { width: 100%; }
}

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

/* === Component: icon sprite (inline SVG symbols in shared/header.html) === */
.icon-sprite { display: none; }

/* === Component: button ===
   Full-width block button. .button--grow = Elementor "grow" hover (scale 1.1, 0.3s).
   .button--light = white button with dark text (inside the red box). */
.button { display: block; width: 100%; padding: 25px; border: 0; border-radius: 0; background: var(--color-red); color: #ffffff; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 2.2px; text-align: center; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform var(--duration) var(--ease); }
.button--light { background: #ffffff; color: var(--color-text); }
.button--grow:hover, .button--grow:focus-visible, .button--grow:active { transform: scale(1.1); }
@media (max-width: 1024px) {
  .button { font-size: 14px; }
}

/* === Component: heading === (Open Sans 900, uppercase, 1px tracking: every on-page heading) */
.heading { font-family: var(--font-heading); font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: 1px; text-transform: uppercase; color: var(--color-black); }
@media (max-width: 1024px) {
  .heading { font-size: 20px; }
}

/* === Component: hero === (background photo + 25% black overlay + centred logo; fixed background on desktop) */
.hero { position: relative; padding: 110px 0; background-color: #ffffff; background-position: bottom center; background-repeat: no-repeat; background-size: cover; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--overlay-hero); }
.hero__inner { position: relative; display: flex; align-items: center; justify-content: center; max-width: var(--container); min-height: 50vh; margin-inline: auto; padding: var(--column-pad); }
.hero__logo { display: block; width: 400px; }
@media (min-width: 1025px) {
  .hero { background-attachment: fixed; }
}
@media (max-width: 767px) {
  .hero { padding: 0; }
}

/* === Component: intro === (white band with soft shadow, centred text, social icons) */
.intro { padding: 68px 0; background: #ffffff; box-shadow: var(--shadow-section); }
.intro__text { font-size: 16px; font-weight: 400; line-height: 42px; text-align: center; color: var(--color-black); }

/* === Component: social-icons === (rounded squares, 50px, 25px icon) */
.social-icons { display: flex; justify-content: center; gap: 5px; margin: 0; padding: 0; list-style: none; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 10%; color: #ffffff; text-decoration: none; }
.social-icon svg { width: 25px; height: 25px; fill: currentColor; }
.social-icon--facebook { background: var(--color-facebook); }

/* === Component: promo-band === (dark band holding two promo cards) */
.promo-band { padding: 68px 0 90px; background: var(--color-dark); }
.promo-band__column { margin-right: 16px; }
@media (max-width: 1024px) {
  .promo-band { padding: 70px 10px; }
  .promo-band__column { margin-right: 0; }
}
@media (max-width: 767px) {
  .promo-band { padding: 40px; }
  .promo-band__column { padding: 0; }
}

/* === Component: promo-card === (square photo at 80% width, tan body overlapping it by 120px, full-width button) */
.promo-card__image { display: block; width: 80%; margin: 0 auto var(--widget-gap); }
.promo-card__body { position: relative; margin: -120px 20px 0; padding-top: 30px; background: var(--color-tan); text-align: center; }
.promo-card__title { color: var(--color-black); }
.promo-card__text { padding: 0 25px; font-size: 16px; font-weight: 300; line-height: 1.8em; color: var(--color-muted); }
@media (max-width: 1024px) {
  .promo-card__body { margin: -100px 10px 0; }
  .promo-card__text { padding: 0 20px; font-size: 14px; }
}
@media (max-width: 767px) {
  .promo-card__body { margin: -130px 20px 0; }
}

/* === Component: info === (contact + opening times on the left, red app box on the right) */
.info { padding: 120px 0 0; }
.info__details { padding: 0; }
.info__heading { color: var(--color-heading); }
.info__text { font-size: 16px; font-weight: 300; line-height: 1.8em; letter-spacing: 0.3px; color: var(--color-text); }
.info__app { padding: 60px; background: var(--color-red); }
.info__app-heading { color: #ffffff; }
.info__app-text { padding: 10px 0; font-size: 21px; font-weight: 300; line-height: 1.8em; letter-spacing: 0.3px; color: var(--color-on-red); }
/* Tablet: the red box is pulled up 180px over the dark band (as on the original). */
@media (max-width: 1024px) {
  .info { padding-top: 90px; }
  .info__details { padding: 30px 50px 0 30px; }
  .info .heading { padding-top: 30px; }
  .info__text { font-size: 14px; }
  .info__app { margin-top: -180px; padding: 40px 20px 40px 40px; }
  .info__app-text { padding: 5px 0; font-size: 18px; }
}
@media (max-width: 767px) {
  .info { padding-top: 50px; }
  .info__details { padding: 0 30px 60px; }
  .info__app { margin-top: 0; padding: 30px; }
  .info__app-text { padding: 0; font-size: 16px; }
}

/* === Component: site-footer === (copyright left, "Powered by OrderYOYO" right; stacks on mobile) */
.site-footer { margin-top: 20px; font-family: var(--font-body); font-size: 20px; line-height: 42px; color: var(--color-text); }
.site-footer__col { justify-content: center; }
.site-footer__copyright { margin: 20px 0; }
.site-footer__copyright-text { font-family: var(--font-copyright); font-size: 16px; color: var(--color-copyright); background-color: #ffffff; }
.site-footer__credit { text-align: end; }
.site-footer__credit a { color: var(--color-black); text-decoration: none; }
.site-footer__credit a:hover { text-decoration: underline; }

/* === Component: not-found === (404 page body) */
.not-found { padding: 68px 0 90px; text-align: center; }
.not-found__title { margin-bottom: 0; }
.not-found__text { font-size: 16px; font-weight: 300; line-height: 1.8em; color: var(--color-text); }
.not-found__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.not-found__actions .button { width: auto; min-width: 220px; }

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