/*
 * site.css: the only stylesheet for kathscafe.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, 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's Elementor CSS; media queries can't use custom properties):
 *   mobile  <= 767px    tablet 768px-1024px    desktop >= 1025px
 *   The container is 1280px wide on desktop with 10px column padding (content 1260px).
 *
 * Spacing values below are measured from the original (Elementor spacers + 20px widget gaps),
 * so vertical rhythm matches it pixel for pixel.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (Elementor kit: primary #000, secondary #fff) */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-text: var(--color-black);
  --color-bg: var(--color-white);

  /* Typography: Poppins everywhere */
  --font-body: "Poppins", Arial, Helvetica, sans-serif;
  --text-base: 16px;

  /* Layout */
  --container: 1280px;
  --gutter: 10px;            /* Elementor column padding */

  /* Shape and motion */
  --radius-button: 6px;
  --duration: 300ms;
  --ease: ease;

  /* Decorative chequered strip (1440x82 tile, repeats horizontally) */
  --checker-image: url("/wp-content/uploads/2023/09/Rectangle-132.png");
}

/* ============ 2. Fonts ============ */
/* Poppins, self-hosted (Google Fonts, OFL), latin subset. 300 is only used by the
   "Our story" paragraphs, which are hidden by decision q1; kept so restoring them is one change. */
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-800.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: var(--text-base); line-height: normal; color: var(--color-text); background: var(--color-bg); }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ============ 4. Layout ============ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ============ 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 ===
   Black bar, not sticky. Desktop: business name left, MENU right.
   <=1024px: name hidden (as on the original), MENU centred lower down.
   The hero below slides up under it (negative margin), as on the original. */
.site-header { position: relative; z-index: 60; background: var(--color-black); color: var(--color-white); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-top: 56px; padding-bottom: 10px; }
.site-header__title { font-size: 28px; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--color-white); }
.site-header__menu { display: inline-block; padding: 12px 24px; font-size: 20px; font-weight: 700; line-height: 1; text-transform: uppercase; text-decoration: none; color: var(--color-white); border-radius: 3px; }
@media (max-width: 1024px) {
  .site-header__inner { justify-content: center; padding-top: 102px; }
  .site-header__title { display: none; }
}

/* === Component: button ===
   Black, white text, 2px white border, arrow icon after the label. */
.button { display: inline-flex; align-items: center; gap: 20px; padding: 10px 20px; border: 2px solid var(--color-white); border-radius: var(--radius-button); background: var(--color-black); color: var(--color-white); font-family: var(--font-body); font-size: 20px; font-weight: 500; line-height: 27px; letter-spacing: 2.1px; word-spacing: 5px; text-transform: uppercase; text-decoration: none; transition: all var(--duration) var(--ease); }
.button:hover, .button:focus { border-color: var(--color-black); }
.button__icon { width: 1em; height: auto; flex: none; fill: currentColor; }

/* === Component: badge ===
   Small black label above section titles (an Elementor "alert" widget on the original). */
.badge { display: inline-block; padding: 15px; background: var(--color-black); color: var(--color-white); font-size: 14px; font-weight: 700; line-height: 15px; word-spacing: 7px; text-transform: uppercase; }
.badge--medium { font-weight: 500; word-spacing: 2px; }
@media (max-width: 767px) {
  .badge { padding: 10px; }
}

/* === Component: section-title === */
.section-title { font-size: 80px; font-weight: 800; line-height: 1; text-transform: uppercase; }

/* === Component: checker ===
   70px chequered divider strip. */
.checker { height: 70px; background-image: var(--checker-image); background-repeat: repeat; background-position: 0 0; }

/* === Component: hero ===
   Black panel with the centred logo; 93vh tall; pulled up under the header. */
.hero { display: flex; align-items: center; justify-content: center; min-height: 93vh; margin-top: -63px; padding: var(--gutter); background: var(--color-black); }
.hero__logo { width: 473px; }
@media (max-width: 767px) {
  .hero { margin-top: -144px; }
  .hero__logo { width: 86%; }
}

/* === Component: story ===
   "Our story": badge, title, (body copy), ORDER NOW. */
.story { padding-block: 172px; text-align: center; }
.story__title { margin-top: 43px; }
.story__body { margin-top: 63px; padding-inline: 100px; font-size: 20px; font-weight: 300; }
.story__body p { margin-bottom: 16px; }
.story__body p:last-child { margin-bottom: 0; }
.story__cta { margin-top: 106px; }
.story__body + .story__cta { margin-top: 63px; }
@media (max-width: 767px) {
  .story__title { font-size: 65px; }
  .story__body { padding: 0 26px 26px; }
}

/* === Component: photo-strip ===
   Three photos side by side (stacked on mobile), cropped to fill. */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); }
.photo-strip__item { height: 505px; overflow: hidden; }
.photo-strip__item img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.photo-strip__item:nth-child(1) { margin-right: 10px; }
.photo-strip__item:nth-child(2) { margin-inline: 10px; }
.photo-strip__item:nth-child(3) { margin-left: 10px; }
@media (max-width: 767px) {
  .photo-strip { grid-template-columns: 1fr; }
  .photo-strip__item:nth-child(2) { margin-inline: 0; height: 341px; }
  .photo-strip__item:nth-child(3) { margin-left: 0; height: 321px; }
}

/* === Component: app-promo ===
   "Download our app": badge, title, phone mock-up, DOWNLOAD NOW. */
.app-promo { padding-top: 197px; padding-bottom: 217px; text-align: center; }
.app-promo__title { margin-top: 47px; }
.app-promo__image { margin: 140px auto 0; width: 652px; }
.app-promo__cta { margin-top: 100px; }
@media (max-width: 1024px) {
  .app-promo__image { width: 69%; }
}
@media (max-width: 767px) {
  .app-promo__title { padding-inline: 30px; font-size: 47px; }
}

/* === Component: social ===
   Round outlined icon links (Facebook). */
.social { display: flex; justify-content: center; gap: 25px; list-style: none; margin: 0; padding: 0; }
.social__link { --icon-size: 30px; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--icon-size) * 2); height: calc(var(--icon-size) * 2); border: 1px solid var(--color-white); border-radius: 60px; background: var(--color-black); color: var(--color-white); transition: all var(--duration) var(--ease); }
.social__link svg { width: var(--icon-size); height: var(--icon-size); fill: currentColor; }
.social__link:hover { background: var(--color-white); color: var(--color-black); }
@media (max-width: 767px) {
  .social__link { --icon-size: 21px; }
}

/* === Component: site-footer ===
   Black; "Follow us" + social, then two ruled rows: address | hours, copyright | credit. */
.site-footer { padding-top: 96px; padding-bottom: 10px; background: var(--color-black); color: var(--color-white); }
.site-footer__title { font-size: 40px; font-weight: 800; line-height: 1; text-align: center; text-transform: uppercase; }
.site-footer .social { margin-top: 63px; }
.site-footer__rule { margin: 94px 0 0; padding-block: 15px; border: 0; }
.site-footer__rule::before { content: ""; display: block; border-top: 1px solid var(--color-white); }
.site-footer__rule + .site-footer__row { margin-top: 20px; }
.site-footer__row + .site-footer__rule { margin-top: 0; }
.site-footer__row { display: grid; grid-template-columns: 1fr 1fr; }
.site-footer__cell { padding: 26px 10px; font-size: 16px; font-weight: 400; }
.site-footer__cell--end { text-align: end; }
.site-footer__credit a { text-decoration: none; }
.site-footer__credit a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .site-footer__title { font-size: 25px; }
  .site-footer__row { grid-template-columns: 1fr; }
  .site-footer__cell, .site-footer__cell--end { text-align: center; }
}

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

/* === Page: /404.html === */
.not-found { padding-block: 120px; text-align: center; }
.not-found__title { margin-top: 43px; }
.not-found__text { margin-top: 40px; font-size: 20px; }
.not-found__cta { margin-top: 60px; }
@media (max-width: 767px) {
  .not-found__title { font-size: 47px; }
}

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