/*
 * site.css: the only stylesheet for kebana.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, split rows
 *   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 CSS; media queries can't use custom properties):
 *   mobile  <= 767px    tablet 768px-1024px    desktop >= 1025px
 *
 * Values come from the live site's computed styles (design-system/live-styles.json).
 * The original is one Elementor page; spacing mirrors Elementor's 10px column padding,
 * 20px widget spacing and 1140px boxed container so positions match pixel for pixel.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours */
  --color-red: #ed1c24;          /* headings, hero overlay */
  --color-yellow: #e6d500;       /* buttons */
  --color-text: #000000;
  --color-bg: #ffffff;
  --hero-overlay: radial-gradient(at center bottom, rgb(237 28 36 / 0.39) 28%, #ed1c24 80%);

  /* Typography */
  --font-text: "Lato", sans-serif;        /* body copy (self-hosted, 400) */
  --font-ui: Arial, sans-serif;           /* headings, buttons, footer (system font) */
  --letter-spacing: 0.3px;
  --text-title: 42px;   --leading-title: 68px;    /* ABOUT US / MOBILE APP */
  --text-footer-title: 26px;
  --text-prose: 18px;   --leading-prose: 36px;
  --text-footer: 16px;  --leading-footer: 42px;
  --text-button: 18px;

  /* Spacing and shape */
  --container: 1140px;
  --col-pad: 10px;          /* Elementor "default" column gap (each side) */
  --widget-gap: 20px;       /* Elementor space between widgets */
  --radius: 5px;

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

/* ============ 2. Fonts ============ */
@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-ui); font-size: 16px; line-height: normal; color: var(--color-text); background: var(--color-bg); }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: inline-block; vertical-align: middle; border: 0; }
h1, h2, h3 { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

/* ============ 4. Layout ============ */
/* Boxed container (Elementor "boxed": max 1140px, full width below that) */
.container { max-width: var(--container); margin-inline: auto; }

/* Split row: heading column + content column(s). Mirrors Elementor's inner section:
   10px wrapper padding + 10px padding on each column. Column widths are the original's. */
.split { display: grid; padding: var(--col-pad); grid-template-columns: 33.036% 66.964%; }
.split--app { grid-template-columns: 32.982% 34.035%; }   /* third (empty) column of 32.979% left blank */
.split__col { padding: var(--col-pad); min-width: 0; }
@media (max-width: 767px) {
  .split, .split--app { grid-template-columns: 100%; text-align: center; }
}

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

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

/* === Component: hero (background photo, red radial overlay, logo, brush-stroke bottom edge) === */
.hero { position: relative; display: flex; flex-direction: column; background: url("/wp-content/uploads/2020/05/memories-4.jpg") center top / cover no-repeat; text-align: center; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-overlay); }
.hero__logo { position: relative; padding-top: 100px; margin-bottom: var(--widget-gap); }
.hero__logo img { display: block; width: 30%; margin-inline: auto; }
.hero__brush { position: relative; height: 126px; margin-top: 430px; background: url("/wp-content/uploads/2020/05/Brushoverlay02.png") center bottom / cover no-repeat; }
.hero--compact .hero__brush { margin-top: 120px; }
@media (max-width: 767px) {
  .hero__logo img { width: 300px; }
  .hero__brush { margin-top: 170px; }
  .hero--compact .hero__brush { margin-top: 60px; }
}

/* === Component: content-section (white boxed band under the hero) === */
.content-section { position: relative; background: var(--color-bg); }
.content-section--first { margin-top: -5px; }   /* overlaps the brush edge by 5px, as the original */
@media (max-width: 1024px) {
  .content-section--first { padding-inline: 20px; }
}
@media (max-width: 767px) {
  .content-section--first { margin-top: 0; padding: 0 0 0 15px; }   /* original's asymmetric mobile padding; no overlap on mobile */
}

/* === Component: section-title (red uppercase Arial headings) === */
.section-title { font-family: var(--font-ui); font-size: var(--text-title); font-weight: 600; line-height: var(--leading-title); color: var(--color-red); margin: 0 0 16px; }

/* === Component: prose (Lato body copy) === */
.prose { display: flow-root; font-family: var(--font-text); font-size: var(--text-prose); line-height: var(--leading-prose); letter-spacing: var(--letter-spacing); margin-bottom: var(--widget-gap); }
.prose p { margin: 18px 0; }

/* === Component: button (yellow, grows on hover like Elementor "grow") === */
.button-wrap { padding-top: 16px; }
.button { display: inline-block; padding: 15px 30px; border-radius: var(--radius); background: var(--color-yellow); color: var(--color-text); font-family: var(--font-ui); font-size: var(--text-button); font-weight: 600; line-height: 1; letter-spacing: var(--letter-spacing); text-decoration: none; text-align: center; transition: transform var(--duration) var(--ease); }
.button:hover, .button:focus-visible { transform: scale(1.1); }

/* === Component: map (keyless Google Maps iframe, full width, 330px) === */
.map { display: block; width: 100%; height: 330px; border: 0; }

/* === Component: site-footer (email / opening times / address) === */
.site-footer { background: var(--color-bg); padding: 68px 0 24px; font-family: var(--font-ui); font-size: var(--text-footer); letter-spacing: var(--letter-spacing); color: var(--color-text); }
.site-footer__columns { display: grid; grid-template-columns: repeat(3, 1fr); }
.site-footer__col { padding: var(--col-pad); min-width: 0; }
.site-footer__col--email { padding: 0 16px; align-self: center; }
.site-footer__title { font-family: var(--font-ui); font-size: var(--text-footer-title); font-weight: 600; line-height: 1; letter-spacing: var(--letter-spacing); color: var(--color-red); margin: 16px 0 16px; }
.site-footer__col--hours { text-align: center; }
.site-footer__col--address { text-align: end; }
.site-footer__address { display: flow-root; line-height: var(--leading-footer); }
.site-footer__address p { margin: 16px 0; }
.site-footer__credit { margin: 44px 0 0; padding-inline: 16px; text-align: center; font-size: 14px; line-height: 1.5; }
.site-footer__credit a { color: inherit; }
@media (max-width: 767px) {
  .site-footer__columns { grid-template-columns: 100%; }
  .site-footer__col, .site-footer__col--email { padding: 0; }
  .site-footer__col--address { text-align: center; }
}

/* === Component: email-line (envelope icon + plain-text address, not a link: like the original) === */
.email-line { display: flex; align-items: center; margin: 0 0 var(--widget-gap); }
.email-line__icon { display: inline-flex; justify-content: center; width: 32.5px; height: 26px; margin-right: 16px; font-size: 26px; }
.email-line__text { padding-left: 5px; }
@media (max-width: 767px) {
  .email-line { justify-content: center; }
}

/* === Component: hours-table (opening times) === */
.hours-table { width: 100%; border-collapse: separate; border-spacing: 2px; line-height: var(--leading-footer); text-align: center; }
.hours-table td { padding: 1px; }

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

/* === Page: /404.html === */
.not-found { padding-block: 40px 60px; }
.not-found .prose { margin-bottom: 0; }
.not-found .button-wrap { display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 767px) { .not-found .button-wrap { justify-content: center; } }

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