/*
 * site.css: the only stylesheet for bossperiperi.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        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 (Elementor defaults on the original; media queries can't use custom properties):
 *   mobile  <= 767px    tablet 768px-1024px    desktop >= 1025px
 *   The burger menu is used at <= 1024px, as on the original.
 *
 * Editing: change tokens to restyle the site; add new components as new blocks;
 * add modifier classes (.section--dark) instead of changing a component for one page.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (from the original's computed styles) */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-red: #930b0f;          /* buttons "Download App", favourite card titles */
  --color-text: #000000;
  --color-bg: #ffffff;

  /* Typography */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;  /* nav, buttons, page titles */
  --text-body: 20px;             /* 16px at <= 1024px */
  --text-title: 49px;            /* section titles (Poppins 600 uppercase); 40px at <= 1024px */
  --text-hero: 62px;             /* Bebas Neue hero/page titles */

  /* Spacing and shape */
  --container: 1140px;
  --section-pad-y: 100px;
  --section-pad-x: 60px;
  --radius-card: 20px;
  --radius-panel: 30px;

  /* Motion (Elementor default 0.3s on buttons and the mobile menu) */
  --duration: 300ms;
  --ease: ease;
}
@media (max-width: 1024px) {
  :root { --text-body: 16px; --text-title: 40px; }
}

/* ============ 2. Fonts ============ */
/* Self-hosted Google Fonts (latin subset, woff2). Inter is the variable font (covers 400/600/700). */
@font-face { font-family: "Bebas Neue"; src: url("/assets/fonts/bebas-neue-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-600-latin.woff2") format("woff2"); font-weight: 600; 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-text); background: var(--color-bg); }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }

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

/* Section: full-width band with a boxed (1140px) inner.
   --section-pad-x varies on the original (60px or 100px desktop; 30/50/60px mobile): use modifiers. */
.section { padding: var(--section-pad-y) var(--section-pad-x); background: var(--color-white); color: var(--color-black); }
.section--dark { background: var(--color-black); color: var(--color-white); }
.section--pad-100 { --section-pad-x: 100px; }
.section--pad-150 { --section-pad-y: 150px; }   /* text-only bands on the home page */
/* Trailing space: most sub-page bands end with a 38px spacer after the text */
.section--tail { padding-bottom: calc(var(--section-pad-y) + 38px); }
@media (max-width: 767px) {
  /* Mobile modifiers (home bands and the "Find Us" strip use tighter padding on the original) */
  .section--m30 { --section-pad-x: 30px; --section-pad-y: 60px; }
  .section--m50 { --section-pad-x: 50px; --section-pad-y: 50px; }
  .section--m60 { --section-pad-x: 60px; --section-pad-y: 60px; }
  .section--m30-x { --section-pad-x: 30px; }
}
/* Watermark: the faded top-hat logo behind white sections (original: no-repeat, auto size) */
.section--watermark { background-image: url("/wp-content/uploads/2023/10/waterrmark_logo_3.png"); background-repeat: no-repeat; background-position: -149px 66px; }
.section--watermark-sub { background-image: url("/wp-content/uploads/2023/10/waterrmark_logo_3-1.png"); background-position: -141px -17px; }
@media (max-width: 1024px) { .section--watermark { background-position: 0 0; } }

/* ============ 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: icons (inline SVG sprite in the header partial) === */
.icon { width: 1em; height: 1em; fill: currentColor; display: block; }

/* === Component: site-header ===
   Black bar, not sticky. Columns 15% logo / 65% nav / 20% social icons.
   The round logo overflows the bar into the section below (as on the original). */
.site-header { position: relative; z-index: 50; background: var(--color-black); padding: 0 30px; }
.site-header__inner { display: flex; align-items: stretch; height: 112px; }
.site-header__brand { flex: 0 0 15%; padding: 10px; }
.site-header__logo { display: block; }
.site-header__logo img { width: 100%; height: auto; }
.site-nav { flex: 0 0 65%; padding: 10px; display: flex; align-items: center; }
.site-header__social { flex: 0 0 20%; padding: 10px; display: flex; align-items: center; justify-content: center; }
.nav-toggle { display: none; background: none; border: 0; padding: 0; width: 44px; height: 44px; color: var(--color-white); cursor: pointer; align-items: center; justify-content: center; font-size: 22px; }
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }
.site-nav__list { display: flex; flex-wrap: wrap; }
.site-nav__list a { display: flex; align-items: center; padding: 13px 20.5px; font-family: var(--font-display); font-size: 20px; line-height: 20px; color: var(--color-white); }
.site-nav__list li:first-child a { padding-left: 0; }

@media (max-width: 1024px) {
  .site-header__inner { height: 56px; }
  .site-nav { justify-content: center; padding: 0 10px; }
  .nav-toggle { display: inline-flex; }
  /* Full-width dropdown under the bar (grid 0fr -> 1fr slide, 0.3s like the original) */
  .site-nav__panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; grid-template-rows: 0fr; align-items: stretch; background: var(--color-black); transition: grid-template-rows var(--duration) var(--ease); }
  .site-nav.is-open .site-nav__panel { grid-template-rows: 1fr; }
  .site-nav__list { min-height: 0; overflow: hidden; flex-direction: column; flex-wrap: nowrap; }
  .site-nav__list a, .site-nav__list li:first-child a { justify-content: center; padding: 10px 20px; }
  .site-nav__list a[aria-current="page"] { background: var(--color-white); color: var(--color-black); }
}
@media (max-width: 767px) {
  .site-header__inner { flex-direction: column; height: auto; }
  .site-header__brand { flex: none; padding: 0; display: flex; justify-content: center; }
  .site-header__logo img { width: 76px; }
  .site-nav { flex: none; padding: 4.5px 10px; }
  .site-header__social { display: none; }
}

/* === Component: social-icons ===
   White circles with black brand icons. Default 36px (header); --lg 64px (contact strips). */
.social-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.social-icons__link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-white); color: var(--color-black); font-size: 18px; }
.social-icons--lg .social-icons__link { width: 64px; height: 64px; font-size: 32px; }
.social-icons__link .icon--tiktok-colour { width: 1.1em; height: 1.1em; }

/* === Component: site-footer === */
.site-footer { background: var(--color-black); color: var(--color-white); padding: 100px 0; text-align: center; }
.site-footer__inner { max-width: var(--container); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.site-footer__col { padding: 10px; }
.site-footer__logo { display: block; margin-inline: auto; width: 243px; }
.site-footer__heading { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 30px; }
.site-footer__text { font-size: 20px; }
.site-footer__bar { max-width: var(--container); margin-inline: auto; padding: 10px; }
.site-footer__bar p { font-size: 20px; line-height: 12px; }
.site-footer__bar p + p { margin-top: 20px; }
.site-footer__bar a { text-decoration: none; }
@media (max-width: 1024px) {
  .site-footer__inner, .site-footer__bar { max-width: none; }
  .site-footer__logo { width: 100%; max-width: 243px; }
}
@media (max-width: 767px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__logo { width: 149px; }
  .site-footer__heading { font-size: 25px; line-height: 25px; }
  .site-footer__text, .site-footer__bar p { font-size: 16px; }
}

/* === Component: button ===
   Bebas Neue 23px, square, no visible hover change on the original (0.3s transition kept). */
.button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 49px 7px; font-family: var(--font-display); font-size: 23px; line-height: 23px; text-transform: uppercase; border: 0; border-radius: 0; cursor: pointer; transition: all var(--duration) var(--ease); }
.button--light { background: var(--color-white); color: var(--color-black); }
.button--red { background: var(--color-red); color: var(--color-white); }
.button--dark { background: var(--color-black); color: var(--color-white); }
.button-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px 10px; }
/* --offset: the original had a 50px spacer before the buttons in the home split columns (desktop only) */
.button-group--offset::before { content: ""; width: 50px; }
@media (max-width: 1024px) {
  .button-group--offset::before { display: none; }
  .button-group--stack-tablet { flex-direction: column; align-items: center; padding-top: 20px; }
}
/* --wide: 20px between buttons (sub-page "Order Now / View Menu") */
.button-group--wide { gap: 20px; }
/* --sub: sub-page button rows, 38px below the text; stacked with 20px gaps on mobile */
.button-group--sub { margin-top: 38px; }
@media (max-width: 767px) {
  .button-group--stack { flex-direction: column; align-items: center; gap: 12px; }
  .button-group--sub { flex-direction: column; align-items: center; gap: 20px; }
}

/* === Component: section-title (Poppins 600 uppercase, 49px / 40px) === */
.section-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-title); line-height: 1; text-transform: uppercase; text-align: center; }

/* Modifier: 30px on mobile (some titles on the original drop to 30px at <= 767px) */
.section-title--left { text-align: left; }
@media (max-width: 767px) { .section-title--m30 { font-size: 30px; } }

/* === Component: text (Inter body copy, 20px / 16px) ===
   Gap after a section title: 23px by default (sub-pages), 30px with .section__gap-30 (home). */
.text { font-size: var(--text-body); }
.text--center { text-align: center; }
.text p + p, .text ol + p { margin-top: 14.4px; }
.text__list { margin: 0; padding: 14px 0 12px 40px; }
.section-title + .text { margin-top: 23px; }
.section-title + .section__gap-30 { margin-top: 30px; }

/* === Component: page-hero (sub-page banner: background photo + white Bebas Neue title) ===
   Background image set per page with an inline style on .page-hero (one-off value). */
.page-hero { position: relative; background-color: var(--color-black); background-size: cover; background-position: 50% 50%; padding: 110px 10px 94px; color: var(--color-white); }
.page-hero--overlay::before { content: ""; position: absolute; inset: 0; background: var(--color-black); opacity: var(--overlay, 0.7); }
.page-hero--short { padding-bottom: 10px; }
.page-hero--findus { padding-bottom: 100px; }
.page-hero__title { position: relative; font-family: var(--font-display); font-weight: 400; font-size: var(--text-hero); line-height: 1; text-align: center; padding-bottom: 23px; }
@media (max-width: 1024px) {
  .page-hero { --text-hero: 50px; }
  .page-hero--findus { --text-hero: 62px; }
}
@media (max-width: 767px) {
  .page-hero--findus { --text-hero: 50px; }
}

/* === Component: split (two columns: image + text; stacks at <= 1024px) === */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.split__col { padding: 10px; }
.split__col--center { align-self: center; }
.split img { width: 100%; }
@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; }
}
.split__col--flush { padding: 0; }
@media (min-width: 768px) and (max-width: 1024px) {
  .split--keep-tablet { grid-template-columns: 1fr 1fr; }   /* franchise page keeps two columns on tablet */
}
@media (max-width: 767px) {
  .split__col--m0 { padding: 0; }
}

/* === Component: home-hero (home page: full-bleed photo, dark overlay, centred Bebas Neue title)
   Pulled up 96px under the header bar, as on the original. === */
.home-hero { position: relative; margin-top: -96px; min-height: 900px; padding: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: var(--color-black); background-size: cover; background-position: 50% 50%; color: var(--color-white); text-align: center; }
.home-hero::before { content: ""; position: absolute; inset: 0; background: var(--color-black); opacity: 0.68; }
.home-hero__content { position: relative; width: 100%; }
.home-hero__title, .home-hero__text { width: 38%; margin-inline: auto; }
.home-hero__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-hero); line-height: 1; }
.home-hero__text { font-size: var(--text-body); }
.home-hero .button-group { gap: 12px; }
@media (max-width: 767px) {
  .home-hero__title, .home-hero__text { width: 80%; }
  .home-hero__title { padding-top: 100px; }
}

/* === Component: fav (home "Our favourites": dark photo panel with white menu cards) === */
.fav { --section-pad-x: 100px; }
.fav__panel { position: relative; max-width: var(--container); margin-inline: auto; padding: 60px; border-radius: var(--radius-panel); background-size: cover; background-position: 0 0; color: var(--color-white); }
.fav__panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-black); opacity: 0.9; }
.fav__panel > * { position: relative; }
.fav__cards { display: grid; grid-template-columns: repeat(3, 278px); justify-content: center; column-gap: 31px; padding: 90px 0 62px; }
.fav-card { display: flex; flex-direction: column; padding: 30px 15px; border-radius: var(--radius-card); background: var(--color-white); color: var(--color-black); text-align: center; }
.fav-card__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: -65px; border-radius: var(--radius-card); }
.fav-card__title { margin-top: 10px; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--color-red); }
.fav-card__price, .fav-card__text { font-size: var(--text-body); }
.fav-card__text { margin-top: 10px; }
@media (max-width: 1024px) {
  .fav { --section-pad-x: 79px; --section-pad-y: 79px; }
  .fav__panel { padding: 60px 130px; }
  .fav__cards { grid-template-columns: 1fr; row-gap: 113px; padding: 110px 40px 0; }
  .fav-card { padding: 0 15px 15px; }
}
@media (max-width: 767px) {
  .fav { --section-pad-x: 0px; --section-pad-y: 0px; }
  .fav__panel { padding: 60px 0; border-radius: 0; }
}

/* === Component: app-promo (home "Skip the queue": phone image + text) === */
.app-promo.section--watermark { background-position: -158px -9px; }
.app-promo__image { width: 328px !important; margin-inline: auto; }
.app-promo__media { padding-bottom: 60px; }
.app-promo__text { margin-top: 20px; }
.app-promo__buttons { padding: 20px 0 0; }
@media (max-width: 1024px) {
  .app-promo.section--watermark { background-position: 0 0; }
  .app-promo__image { width: 40% !important; }
}
@media (max-width: 767px) {
  .app-promo__image { width: 94% !important; }
}

/* === Component: testimonials (three quotes with star images) === */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px; margin-top: 10px; }
.testimonial { margin: 0; padding: 0 10px 10px; }
.testimonial__stars { width: 195px; max-width: 100%; }
.testimonial__title { margin-top: 10px; font-family: var(--font-heading); font-weight: 600; font-size: 30px; line-height: 1; text-transform: uppercase; }
.testimonial__title--plain { font-size: 28px; text-transform: none; }
.testimonial__quote { margin: 10px 0 0; font-size: var(--text-body); }
.testimonial__name { margin-top: 10px; font-family: var(--font-heading); font-weight: 400; font-size: 25px; line-height: 1; text-transform: uppercase; }
@media (max-width: 1024px) {
  .testimonial__title, .testimonial__title--plain, .testimonial__name { font-size: 20px; }
}
@media (max-width: 767px) {
  .testimonials { grid-template-columns: 1fr; }
  .testimonials { margin-top: 0; }
  .testimonial { padding: 10px; }
}

/* === Component: contact-strip ("Find Us" band: email, WhatsApp, socials | address) === */
.contact-strip { display: grid; grid-template-columns: 1fr 1fr; text-align: center; padding: 10px; margin: 50px 0 23px; }
.contact-strip__col { padding: 10px; }
.contact-strip__email { display: inline-block; color: var(--color-white); font-size: 30px; font-weight: 600; text-transform: uppercase; word-break: break-word; }
.contact-strip__whatsapp { display: flex; flex-direction: column; align-items: center; margin-top: 23px; }
.contact-strip__whatsapp-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 17px; border-radius: 50%; background: var(--color-white); color: var(--color-black); font-size: 30px; }
.contact-strip__phone { margin: 19px 0 6px; font-size: 18.72px; font-weight: 700; }
.contact-strip .social-icons { margin-top: 38px; padding-bottom: 32px; }
.contact-strip__address { font-size: 30px; font-weight: 600; text-transform: uppercase; }
@media (max-width: 1024px) {
  .contact-strip__email { font-size: 16px; }
  .contact-strip__address { font-size: 20px; }
}
@media (max-width: 767px) {
  .contact-strip { grid-template-columns: 1fr; padding: 0; }
  .contact-strip .social-icons { gap: 10px; }
}

/* === Component: contact-panel (light contact details: Inter 600 uppercase lines, black WhatsApp
   circle, black social circles). Used on /find-us/ and /contact/. === */
.contact-panel { text-align: center; }
.contact-panel__heading { font-family: var(--font-body); font-weight: 600; font-size: 30px; line-height: 30px; text-transform: uppercase; }
.contact-panel__heading--tight { line-height: 1px; }   /* /contact/: the original email line had line-height 1px */
.contact-panel__whatsapp { display: flex; flex-direction: column; align-items: center; margin-top: 32px; }
.contact-panel__heading--tight + .contact-panel__whatsapp { margin-top: 26px; }
.contact-panel__whatsapp-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 17px; border-radius: 50%; background: var(--color-black); color: var(--color-white); font-size: 30px; }
.contact-panel__phone { margin: 19px 0 6px; font-size: 18.72px; font-weight: 700; }
.contact-panel .social-icons { margin-top: 19px; }
.contact-panel--compact .social-icons { margin-top: 35px; }
.social-icons--dark .social-icons__link { width: 50px; height: 50px; background: var(--color-black); color: var(--color-white); font-size: 25px; }
@media (max-width: 1024px) {
  .findus .contact-panel__heading { font-size: 20px; line-height: 20px; }
  .findus .contact-panel__heading--email { font-size: 15px; line-height: 15px; }
  .social-icons--findus .social-icons__link { width: 34px; height: 34px; font-size: 17px; }
}
@media (max-width: 767px) {
  .contact-panel__heading--tight { font-size: 16px; }
  .contact-panel--compact .social-icons .social-icons__link { width: 36px; height: 36px; font-size: 18px; }
}

/* === Component: findus (map left, details right; /find-us/) === */
.findus { --section-pad-y: 60px; }
.findus__grid { display: grid; grid-template-columns: 1fr 1fr; }
.findus__map { padding: 10px; }
.findus__map .map { border-radius: var(--radius-card); }
.findus__details { text-align: center; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.findus__cell { padding: 10px; }
.findus__cell--wide { grid-column: 1 / -1; }
@media (max-width: 1024px) {
  .findus .map { height: 293px; }
}
@media (max-width: 767px) {
  .findus { --section-pad-x: 30px; --section-pad-y: 30px; }
  .findus__grid, .findus__details { grid-template-columns: 1fr; }
}

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

/* === Component: contact-email (replaces the Elementor forms: mailto button + visible address) === */
.contact-email { display: grid; gap: 16px; justify-items: center; text-align: center; margin-top: 23px; font-size: var(--text-body); }
.button--submit { font-size: 25px; line-height: 25px; }
.contact-email__intro { font-size: var(--text-body); }
.contact-email__fields { font-size: var(--text-body); }
.contact-email__address { font-weight: 600; word-break: break-word; }
.contact-email__address a, .contact-email__phone a { text-decoration: underline; }

/* ============ 6. Pages ============ */
/* === Page: /franchise-opportunities/ === */
.franchise__image { border-radius: var(--radius-card); }
.franchise__offer { padding-top: 33px; }
@media (max-width: 1024px) { .franchise__offer { padding-top: 20px; } }
@media (max-width: 767px) { .franchise__offer { padding-top: 10px; } .text__list { padding-left: 22px; } }

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