/*
 * site.css: the only stylesheet for forsythsbakery.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 (from the original Elementor CSS; media queries can't use custom properties):
 *   mobile  ≤ 767px    tablet 768px–1024px    desktop ≥ 1025px
 *   The burger menu shows at ≤ 1024px (Elementor "dropdown: tablet").
 *
 * Values come from the original Elementor page CSS (post-13.css) and computed styles.
 * Editing: change tokens to restyle the site; add new components as new blocks;
 * add modifier classes instead of changing a component for one page.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours */
  --color-bg: #fff6ee;           /* page background (cream) */
  --color-accent: #ffb371;       /* buttons, burger, footer band, nav hover */
  --color-text: #232323;         /* headings, nav, footer text */
  --color-heading-strong: #000000; /* hero headline */
  --color-text-muted: #454545;   /* contact card intro */
  --color-white: #ffffff;
  --color-dark: #33373d;         /* burger icon */
  --color-overlay: rgb(0 0 0 / 0.5); /* gallery hover overlay */

  /* Typography */
  --font-heading: "Crimson Pro", Georgia, serif;
  --font-body: "Poppins", Arial, sans-serif;
  --text-body: 1.15rem;          /* footer and card text (18.4px) */
  --text-nav: 20px;
  --text-button: 16px;
  --text-button-lg: 22px;
  --text-hero: 80px;             /* tablet 64px, mobile 40px */
  --text-h2: 64px;               /* tablet/mobile 48px */
  --text-h2-card: 48px;
  --text-footer-heading: 24px;
  --tracking-heading: -0.04em;
  --tracking-button: 0.09em;

  /* Layout */
  --container: 1140px;
  --container-header: 1440px;
  --container-split: 1180px;
  --gutter: 32px;
  --radius-button: 6px;
  --shadow-card: 0 0 10px 0 rgb(0 0 0 / 0.12);

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

/* ============ 2. Fonts ============ */
/* Self-hosted Google Fonts (latin subset). Crimson Pro is a variable font: one file covers 300 and 400. */
@font-face { font-family: "Crimson Pro"; src: url("/assets/fonts/crimson-pro-latin-variable.woff2") format("woff2"); font-weight: 200 900; 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; }

/* ============ 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: 1rem; line-height: 1.5; color: var(--color-text); background: var(--color-bg); }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: 400; }
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-text); 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: var(--color-white); color: var(--color-text); }
.skip-link:focus { left: 16px; }

/* === Component: button (orange, Crimson Pro uppercase) === */
.button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border: 1px solid var(--color-accent); border-radius: var(--radius-button); background: var(--color-accent); color: var(--color-text); font-family: var(--font-heading); font-size: var(--text-button); font-weight: 300; line-height: 1; letter-spacing: var(--tracking-button); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: all var(--duration) var(--ease); }
.button:hover { color: var(--color-text); }
.button--lg { padding: 14px 20px; font-size: var(--text-button-lg); }

/* === Component: heading (Crimson Pro uppercase display headings) === */
.heading { font-family: var(--font-heading); font-weight: 300; text-transform: uppercase; line-height: 1.4; letter-spacing: var(--tracking-heading); color: var(--color-text); font-size: var(--text-h2); }
.heading--hero { font-weight: 400; line-height: 1.5; color: var(--color-heading-strong); font-size: var(--text-hero); }
.heading--card { font-size: var(--text-h2-card); }
.heading--center { text-align: center; }
@media (max-width: 1024px) {
  .heading { font-size: 48px; }
  .heading--hero { font-size: 64px; }
}
@media (max-width: 767px) {
  .heading--hero { font-size: 40px; }
}

/* === Component: site-header (not sticky on the original) === */
.site-header { padding: 20px 24px; background: var(--color-bg); }
.site-header__inner { display: grid; grid-template-columns: 20% 45.789% 1fr; align-items: center; max-width: var(--container-header); margin-inline: auto; }
.site-header__logo { justify-self: start; }
.site-header__logo img { width: 121px; height: 81px; }
.site-header__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 10px; }
.site-header__actions .button:nth-child(2) { margin: 0 5px; }
.nav-toggle { display: none; }
.site-nav__list { display: flex; justify-content: center; gap: 40px; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; font-family: var(--font-heading); font-size: var(--text-nav); font-weight: 300; line-height: 20px; text-transform: uppercase; color: var(--color-text); }
.site-nav a:hover { color: var(--color-accent); }

@media (max-width: 1024px) {
  .site-header__inner { grid-template-columns: 33% 33% 30%; }
  .site-header__actions { padding: 0; }
  .site-header__actions .button:nth-child(2) { margin: 5px 0; }
  .nav-toggle { grid-column: 2; grid-row: 1; justify-self: center; display: inline-flex; align-items: center; justify-content: center; width: 33px; height: 33px; padding: 0; border: 0; border-radius: 3px; background: var(--color-accent); color: var(--color-dark); cursor: pointer; }
  .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-header__logo { grid-row: 1; }
  .site-header__actions { grid-column: 3; grid-row: 1; }
  /* Dropdown: full width, pushes content down; grid 0fr → 1fr slide (align-items: stretch keeps it clipped while it animates) */
  .site-nav { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-rows: 0fr; align-items: stretch; margin-inline: -24px; background: var(--color-white); transition: grid-template-rows var(--duration) var(--ease); }
  .site-nav.is-open { grid-template-rows: 1fr; margin-top: 10px; }
  .site-nav__inner { overflow: hidden; min-height: 0; }
  .site-nav:not(.is-open) .site-nav__inner { visibility: hidden; transition: visibility 0s var(--duration); }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav a { padding: 10px 20px; min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 767px) {
  .site-header__inner { grid-template-columns: 50% 50%; }
  .site-header__actions { grid-column: 1 / -1; grid-row: 3; padding: 0; margin-top: 10px; }
  .site-header__actions .button:nth-child(1) { margin: 0 0 5px; }
  .site-header__actions .button:nth-child(2) { margin: 0 5px 0 0; }
}

/* === Component: tilted-images (two overlapping rotated photos) === */
.tilted-images { padding: 80px 24px; overflow: hidden; } /* overflow: original scrolled sideways 7–22px; clipped here (decision d8) */
.tilted-images__inner { display: grid; grid-template-columns: 1fr 1fr; }
.tilted-images img { width: auto; max-width: 100%; }
.tilted-images__a img { transform: rotate(5deg); }
.tilted-images__b img { transform: rotate(-13deg); margin-top: 120px; }
@media (max-width: 767px) {
  .tilted-images__inner { grid-template-columns: 1fr; }
  .tilted-images__b img { margin-top: 0; }
}

/* === Component: intro (big headline + three-photo row) === */
.intro { padding: 64px 0 160px; }
.intro__headline { max-width: calc(var(--container) + 2 * var(--gutter)); padding: 0 var(--gutter); }
.intro__headline .heading { width: 69.561%; }
.intro__photos { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 149px; } /* 129px spacer + 20px widget gap */
.intro__photos img { width: 100%; height: 660px; object-fit: cover; object-position: center; }
.intro__photos > :nth-child(1) { margin-right: 16px; }
.intro__photos > :nth-child(2) { margin: 0 8px; }
.intro__photos > :nth-child(3) { margin-left: 16px; }
@media (max-width: 1024px) {
  .intro { padding: 120px 0; }
  .intro__headline .heading { width: 100%; }
  .intro__photos { margin-top: 84px; }
  .intro__photos img { height: 400px; }
}
@media (max-width: 767px) {
  .intro { padding: 80px 0; }
  .intro__photos { grid-template-columns: 1fr; }
  .intro__photos > * { margin: 0 0 24px !important; }
  .intro__photos > :last-child { margin-bottom: 0 !important; }
  .intro__photos img { height: 320px; }
}

/* === Component: split (image + text, vertically centred) === */
.split { padding: 0 var(--gutter) 160px; }
.split__inner { display: grid; grid-template-columns: 55.932% 44.068%; align-items: center; max-width: var(--container-split); margin-inline: auto; }
.split__media { margin-right: 80px; }
.split__body .button { margin-top: 55px; } /* 23px + 32px spacers */
@media (max-width: 1024px) {
  .split__inner { grid-template-columns: 50% 50%; }
  .split__media { margin-right: 24px; }
  .split__body { margin-left: 24px; }
}
@media (max-width: 767px) {
  .split { padding-bottom: 80px; }
  .split__inner { grid-template-columns: 1fr; }
  .split__media { margin: 0; order: 2; }
  .split__body { margin: 0 0 32px; order: 1; }
}

/* === Component: photo-band (full-width background photo) === */
.photo-band { min-height: 860px; background-repeat: no-repeat; background-size: cover; background-position: 0 70%; }
@media (max-width: 1024px) { .photo-band { min-height: 600px; background-position: 0 0; } }
@media (max-width: 767px) { .photo-band { min-height: 400px; } }

/* === Component: gallery (grid 3/2/1, 3:2 crop, hover overlay; GLightbox opens a.glightbox) === */
.gallery-section { padding: 160px var(--gutter); }
.gallery-section .heading { margin-bottom: 20px; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.gallery__item { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item::after { content: ""; position: absolute; inset: 0; background: transparent; transition: background-color var(--duration-gallery) var(--ease); }
.gallery__item:hover::after, .gallery__item:focus-visible::after { background: var(--color-overlay); }
@media (max-width: 1024px) {
  .gallery-section { padding: 120px var(--gutter); }
}
@media (max-width: 1023px) { /* the original gallery script switches to its tablet layout below 1024px */
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 767px) {
  .gallery-section { padding: 80px var(--gutter); }
  .gallery { grid-template-columns: 1fr; }
}
/* GLightbox: match the original Elementor lightbox (dark backdrop) */
.glightbox-clean .goverlay { background: rgb(0 0 0 / 0.87); }

/* === Component: map === */
.map { display: block; width: 100%; height: 480px; border: 0; }

/* === Component: site-footer (orange band with the contact card overlapping the section above) === */
.site-footer { position: relative; padding: 80px var(--gutter) 64px; background: var(--color-accent); }
.site-footer__inner { display: grid; grid-template-columns: 37.431% 1fr; max-width: var(--container); margin-inline: auto; }
.site-footer__main { display: flex; flex-direction: column; justify-content: space-between; margin-left: 64px; }
.site-footer__cols { display: grid; grid-template-columns: 36.122% 41.681% 1fr; }
.site-footer__heading { margin-bottom: 32px; font-family: var(--font-heading); font-size: var(--text-footer-heading); font-weight: 400; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: var(--color-text); }
.site-footer__text { font-size: var(--text-body); line-height: 1.8; letter-spacing: -0.02em; }
.site-footer__list { list-style: none; margin: 0; padding: 0; font-size: var(--text-body); line-height: 1; letter-spacing: -0.02em; }
.site-footer__list li + li { margin-top: 15px; }
.site-footer__list--links li + li { margin-top: 20px; }
.site-footer__bar { margin-top: 48px; font-size: var(--text-body); line-height: 1.8; letter-spacing: -0.02em; }
@media (max-width: 1024px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__main { margin: 64px 0 0; }
  .site-footer__cols { grid-template-columns: 32% 43% 25%; }
  .site-footer__bar { margin-top: 64px; }
}
@media (max-width: 767px) {
  .site-footer__cols { grid-template-columns: 1fr; }
  .site-footer__cols > * { margin-bottom: 40px; }
  .site-footer__cols > :last-child { margin-bottom: 0; }
  .site-footer__bar { margin-top: 40px; }
}

/* === Component: contact-email (replaces the Elementor Pro form; white card in the footer) ===
 * Built without an email address until q1 is answered (see SITE.md "Contact email").
 * The card pulls up over the end of the page above it, as on the original (-240px / -200px). */
.contact-email { position: relative; z-index: 1; align-self: start; margin-top: -240px; padding: 48px; background: var(--color-white); box-shadow: var(--shadow-card); }
.contact-email__intro { margin-top: 16px; font-family: var(--font-body); font-size: var(--text-body); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--color-text-muted); }
.contact-email__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px 16px; margin-top: 40px; }
.contact-email__actions .button { padding: 2px 12px; border-radius: 4px; font-size: 20px; font-weight: 400; letter-spacing: 0.08em; min-height: 44px; }
.contact-email__address { font-size: var(--text-body); letter-spacing: -0.02em; color: var(--color-text-muted); word-break: break-word; }
@media (max-width: 1024px) {
  .contact-email { margin-top: -200px; padding: 32px; }
}
@media (max-width: 767px) {
  .contact-email__intro { line-height: 1.5; }
  .contact-email__actions { margin-top: 32px; }
}

/* === Component: not-found (404 page body) === */
.not-found { padding: 120px var(--gutter) 360px; text-align: center; } /* bottom space for the overlapping contact card */
.not-found p { margin-top: 24px; font-size: var(--text-body); }
.not-found__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }

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