/*
 * site.css: the only stylesheet for treathut.co.uk.
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing (custom properties)
 *   2. Fonts         @font-face for self-hosted fonts
 *   3. Base          reset and element defaults
 *   4. Layout        containers
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         rare page-specific rules
 *   7. Utilities     a handful of helpers
 *
 * Breakpoints (Elementor defaults on the original; media queries can't use custom properties):
 *   mobile  ≤ 767px    tablet 768px–1024px    desktop ≥ 1025px
 *   The burger menu appears at ≤ 767px only (Elementor nav "dropdown: mobile").
 *   The header "Order Now" button is hidden at ≤ 1024px (as the original).
 *
 * Values come from the original Elementor CSS (post-5.css, post-7.css) and computed styles.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours */
  --color-bg: #0f100c;            /* page background (dark sections, header, footer) */
  --color-cream: #fff3d7;         /* About Us section */
  --color-text: #232323;          /* About Us text */
  --color-text-light: #ffffff;    /* text on the dark background */
  --color-accent: #d683a2;        /* pink line under the header */
  --color-nav-hover: rgb(255 255 255 / 0.42);   /* nav hover / current section */
  --color-dropdown-text: #33373d; /* mobile dropdown links (Elementor default) */
  --color-dropdown-hover: #3f444b;
  --color-divider: rgb(255 255 255 / 0.17);
  --color-map-tint: rgb(123 0 89 / 0.43);       /* purple veil over the map (original custom CSS) */
  --color-arrow: rgb(237 237 237 / 0.9);        /* carousel arrows */

  /* Typography */
  --font-body: "Poppins", Arial, sans-serif;
  /* Original section-heading fonts "Gadimon" + "Gadimon Extrude" (Kotak Kuning Studio, commercial,
     no licence on file) → closest Google Font: Leckerli One (decision d4). One-line switch here. */
  --font-title: "Leckerli One", "Brush Script MT", cursive;
  --text-title: 56px;            /* Leckerli One runs ~20% wider than Gadimon: 56px keeps the original heading widths and line breaks */
  --title-line: 64px;             /* original heading box height */
  --text-nav: 18px;
  --text-body: 18px;
  --text-lead: 20px;
  --tracking-footer: -0.03em;
  --tracking-footer-heading: -0.04em;

  /* Spacing and widths */
  --container: 1140px;            /* Elementor boxed width */
  --container-menu: 1080px;       /* Our Menu section */
  --container-story: 900px;       /* About Us text columns */
  --gutter: 32px;                 /* section side padding */
  --section-pad: 160px;           /* Our Menu and Download Our App top/bottom padding */
  --col-pad: 10px;                /* Elementor default column gap */

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

/* ============ 2. Fonts ============ */
@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-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Leckerli One"; src: url("/assets/fonts/leckerli-one-400-latin.woff2") format("woff2"); font-weight: 400; 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: 1.5; color: var(--color-text-light); background: var(--color-bg); overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; transition: color var(--duration) var(--ease); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

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

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

/* === Component: skip-link === */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 8px 16px; background: #fff; color: #000; }
.skip-link:focus { left: 16px; }

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

/* === Component: site-header ===
 * Static (not sticky), 24px/32px padding, 4px pink line underneath; 128px tall at every width.
 * Desktop (≥1025px): logo 25% | centred nav 49.33% | Order Now image 25%.
 * Tablet (768–1024px): logo 30% | centred nav 70% (Order Now hidden, as original).
 * Mobile (≤767px): logo 75% | burger 25%; full-width white dropdown overlays the page below.
 */
.site-header { position: relative; z-index: 20; padding: 24px var(--gutter); border-bottom: 4px solid var(--color-accent); background: var(--color-bg); }
.site-header__inner { display: flex; align-items: center; max-width: var(--container); margin-inline: auto; }
.site-header__brand { flex: 0 0 25%; }
.site-header__menu { flex: 0 0 49.332%; min-width: 0; }
.site-header__action { flex: 0 0 25%; display: flex; justify-content: flex-end; }
.site-header__logo { width: 180px; height: auto; }
.site-header__action img { width: 200px; }

.site-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 32px; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; font-size: var(--text-nav); font-weight: 400; line-height: 20px; color: var(--color-text-light); }
.site-nav a:hover, .site-nav a:focus, .site-nav a.is-active { color: var(--color-nav-hover); }

.nav-toggle { display: none; align-items: center; justify-content: center; width: 33px; height: 33px; margin-left: auto; padding: 5.5px; border: 0; border-radius: 3px; background: #fff; color: #000; cursor: pointer; }
.nav-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.site-dropdown { display: none; }

@media (max-width: 1024px) {
  .site-header__brand { flex-basis: 30%; }
  .site-header__menu { flex-basis: 70%; }
  .site-header__action { display: none; }
}
@media (max-width: 767px) {
  .site-header__brand { flex-basis: 75%; }
  .site-header__menu { flex-basis: 25%; }
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  /* Dropdown: absolutely placed 10px under the toggle, full viewport width; grid row 0fr -> 1fr
     slide (0.3s, as Elementor). align-items: stretch keeps the list clipped while it slides. */
  .site-dropdown { display: grid; position: absolute; left: 0; right: 0; top: 88px; grid-template-rows: 0fr; align-items: stretch; background: #fff; transition: grid-template-rows var(--duration) var(--ease); }
  .site-dropdown.is-open { grid-template-rows: 1fr; }
  .site-dropdown.is-instant { transition: none; }
  .site-dropdown__list { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0; visibility: hidden; transition: visibility 0s linear var(--duration); }
  .site-dropdown.is-open .site-dropdown__list { visibility: visible; transition-delay: 0s; }
  .site-dropdown a { display: block; padding: 10px 20px; font-size: var(--text-nav); line-height: 20px; color: var(--color-dropdown-text); }
  .site-dropdown a:hover, .site-dropdown a:focus-visible { background: var(--color-dropdown-hover); color: #fff; }
}

/* === Component: text-block ===
 * Elementor text-editor widget: paragraphs keep the browser's 1em top/bottom margins, contained in the block
 * (display: flow-root), so spacing around text matches the original.
 */
.text-block { display: flow-root; }
.text-block p { margin: 1em 0; }

/* === Component: image-button (linked PNG buttons/badges: Order Now, Download now, store badges) === */
.image-button { display: inline-block; vertical-align: top; }

/* === Component: section-title ===
 * The original stacked two headings: "Gadimon Extrude" (outline/extrude layer) under "Gadimon" (fill).
 * Here: one heading in --font-title; the outline + extrude is a ring of text-shadows in --title-outline.
 * .section-title--dark: black fill, white outline (dark sections). .section-title--light: white fill, black outline (cream).
 */
.section-title { padding-top: 2px; /* the original fill layer sat 2px below the extrude layer (margin -62px on a 64px line) */ font-family: var(--font-title); font-size: var(--text-title); font-weight: 400; line-height: var(--title-line); text-align: center; color: var(--title-fill); text-shadow:
    6px 0px 0 var(--title-outline),
    5.5px 2.3px 0 var(--title-outline),
    4.2px 4.2px 0 var(--title-outline),
    2.3px 5.5px 0 var(--title-outline),
    0px 6px 0 var(--title-outline),
    -2.3px 5.5px 0 var(--title-outline),
    -4.2px 4.2px 0 var(--title-outline),
    -5.5px 2.3px 0 var(--title-outline),
    -6px 0px 0 var(--title-outline),
    -5.5px -2.3px 0 var(--title-outline),
    -4.2px -4.2px 0 var(--title-outline),
    -2.3px -5.5px 0 var(--title-outline),
    0px -6px 0 var(--title-outline),
    2.3px -5.5px 0 var(--title-outline),
    4.2px -4.2px 0 var(--title-outline),
    5.5px -2.3px 0 var(--title-outline),
    9px 4px 0 var(--title-outline),
    8.5px 6.3px 0 var(--title-outline),
    7.2px 8.2px 0 var(--title-outline),
    5.3px 9.5px 0 var(--title-outline),
    3px 10px 0 var(--title-outline),
    0.7px 9.5px 0 var(--title-outline),
    -1.2px 8.2px 0 var(--title-outline),
    -2.5px 6.3px 0 var(--title-outline),
    -3px 4px 0 var(--title-outline),
    -2.5px 1.7px 0 var(--title-outline),
    -1.2px -0.2px 0 var(--title-outline),
    0.7px -1.5px 0 var(--title-outline),
    3px -2px 0 var(--title-outline),
    5.3px -1.5px 0 var(--title-outline),
    7.2px -0.2px 0 var(--title-outline),
    8.5px 1.7px 0 var(--title-outline); }
.section-title--dark { --title-fill: #000; --title-outline: #fff; }
.section-title--light { --title-fill: #fff; --title-outline: #000; }

/* === Component: hero (full-width banner photo, 40vw tall) === */
.hero { min-height: 40vw; background: url("/wp-content/uploads/2023/03/banner.jpg") center / cover no-repeat; }

/* === Component: dark-section (logo watermark on the dark background; Our Menu + Download Our App) === */
.dark-section { padding: var(--section-pad) var(--gutter); background: var(--color-bg) url("/wp-content/uploads/2023/02/logo-bg.png") center / auto no-repeat; }
.dark-section__inner { max-width: var(--container); margin-inline: auto; padding: var(--col-pad); }
.dark-section--menu .dark-section__inner { max-width: var(--container-menu); }
.dark-section__title { margin-bottom: 64px; }
.dark-section__action { margin-top: 64px; text-align: center; }

/* === Component: carousel (Swiper; library CSS in /assets/vendor/swiper-14.3.0/) ===
 * Like Elementor's image carousel: square photos with the caption over the bottom-left,
 * white chevron arrows inside the slides (10px from the edges), no dots.
 */
.carousel { --swiper-navigation-size: 25px; --swiper-navigation-sides-offset: 10px; --swiper-navigation-color: var(--color-arrow); }
.carousel .swiper-slide { position: relative; }
.carousel__figure { position: relative; margin: 0; padding-bottom: 4px; } /* Elementor's inline image leaves a 4px gap under each photo */
.carousel__figure img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.carousel__caption { position: absolute; left: 0; bottom: 0; padding: 16px; font-size: 12px; line-height: normal; color: #fff; text-align: left; text-shadow: -2px 1px 4px #000; }
.carousel .swiper-button-prev, .carousel .swiper-button-next { padding: 0; border: 0; background: none; }
.carousel .swiper-button-prev svg, .carousel .swiper-button-next svg { width: 25px; height: 25px; fill: currentColor; }
/* Without JS (or before Swiper starts): the first slides in a row, not a tall stack */
.carousel:not(.swiper-initialized) .swiper-wrapper { display: flex; gap: 20px; overflow: hidden; }
.carousel:not(.swiper-initialized) .swiper-slide { flex: 0 0 calc((100% - 80px) / 5); }
.carousel:not(.swiper-initialized) .swiper-button-prev, .carousel:not(.swiper-initialized) .swiper-button-next { display: none; }
@media (max-width: 1024px) {
  .carousel:not(.swiper-initialized) .swiper-slide { flex-basis: calc((100% - 40px) / 3); }
}
@media (max-width: 767px) {
  .carousel:not(.swiper-initialized) .swiper-slide { flex-basis: calc((100% - 20px) / 2); }
}

/* === Component: story (About Us: cream section, two text columns, photo, macaron strip) === */
.story { padding: 64px 0 32px; background: var(--color-cream); color: var(--color-text); }
.story__title { margin-bottom: 48px; }
.story__cols { display: grid; grid-template-columns: 1fr 1fr; max-width: var(--container-story); margin-inline: auto; }
.story__text { padding: 20px; font-size: var(--text-body); line-height: 1.5; }
.story__image { width: 640px; margin: 0 auto; }
.story__strip { width: 100%; margin-top: 32px; border-style: solid; border-color: #000; border-width: 5px 0 7px; }
@media (max-width: 767px) {
  .story__cols { grid-template-columns: 1fr; }
}

/* === Component: app-promo (Download Our App: text + button | phones | "Available On" + badges) === */
.app-promo__row { display: flex; align-items: center; }
.app-promo__text { flex: 0 0 calc(30% - 24px); margin-right: 24px; font-size: var(--text-lead); line-height: 1.5; }
.app-promo__text .image-button { display: block; margin-top: 24px; }
.app-promo__text img { width: 240px; }
.app-promo__phones { flex: 0 0 39.333%; min-width: 0; }
.app-promo__phones img { width: 100%; }
.app-promo__stores { flex: 0 0 calc(30% - 48px); margin-left: 48px; font-size: var(--text-lead); line-height: 1.5; }
.app-promo__stores .image-button { margin-top: 24px; }
@media (max-width: 767px) {
  /* Phones first, then text + button; store badges hidden (as original) */
  .app-promo__row { flex-direction: column-reverse; align-items: stretch; }
  .app-promo__text { margin-right: 0; }
  .app-promo__phones { margin-bottom: 32px; }
  .app-promo__stores { display: none; }
}

/* === Component: map (keyless Google iframe with the original's purple veil) === */
.map-block { position: relative; line-height: 0; }
.map-block::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: var(--color-map-tint); pointer-events: none; }
.map { display: block; width: 100%; height: 300px; border: 0; }

/* === Component: site-footer (#contact: 4 columns, divider, copyright line) === */
.site-footer { padding: 96px var(--gutter) 48px; color: var(--color-text-light); }
.site-footer__inner { max-width: var(--container); margin-inline: auto; }
.site-footer__cols { display: flex; }
.site-footer__col:nth-child(1) { width: 22.667%; padding-right: 24px; }
.site-footer__col:nth-child(2) { width: 29.419%; padding-right: 24px; }
.site-footer__col:nth-child(3) { width: 29.914%; padding-inline: 12px; }
.site-footer__col:nth-child(4) { width: 17.979%; padding-left: 24px; }
.site-footer__heading { margin-bottom: 24px; font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: var(--tracking-footer-heading); color: #fff; }
.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__links li + li { margin-top: 12px; }
.site-footer__links a { font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: var(--tracking-footer); color: #fff; }
.site-footer__links a:hover, .site-footer__links a:focus-visible { color: var(--color-nav-hover); }
.site-footer__text, .site-footer__copyright { font-size: 20px; line-height: 1.6; letter-spacing: var(--tracking-footer); }
.site-footer__note { display: block; max-width: 240px; font-size: 14px; line-height: 1.5; }
.site-footer__divider { border: 0; border-top: 1px solid var(--color-divider); margin: 64px 0; }
.site-footer__bar { display: flex; }
.site-footer__copyright { width: 73.417%; }
.site-footer__copyright a { color: inherit; }
.site-footer__copyright a:hover, .site-footer__copyright a:focus-visible { text-decoration: underline; }
@media (max-width: 767px) {
  .site-footer__cols { flex-direction: column; }
  .site-footer__col:nth-child(n) { width: 100%; padding: 0; }
  .site-footer__col:not(:last-child) { margin-bottom: 24px; }
  .site-footer__divider { margin: 48px 0; }
  .site-footer__copyright { width: 100%; }
}

/* === Component: contact-email (replaces WordPress forms; unused on this site, the original had no forms) === */
.contact-email { display: grid; gap: 16px; justify-items: start; }
.contact-email__address { font-weight: 600; word-break: break-word; }
.contact-email__phone a { color: inherit; }

/* === Component: not-found (404 page) === */
.not-found { padding: var(--section-pad) var(--gutter); text-align: center; }
.not-found__title { margin-bottom: 48px; }
.not-found__text { margin-bottom: 40px; font-size: var(--text-lead); }
.not-found__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 32px; list-style: none; margin: 0; padding: 0; font-size: var(--text-nav); }
.not-found__links a:hover, .not-found__links a:focus-visible { color: var(--color-nav-hover); }

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

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