/*
 * site.css: the only stylesheet for The Spice Merchant (spicemerchantcrookhamvillage.com).
 *
 * 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        shared section helpers
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         page-specific rules: "=== Page: <path> ==="
 *   7. Utilities     a handful of helpers
 *
 * Breakpoints (from the original Elementor kit; media queries can't use custom properties):
 *   mobile  ≤ 767px    tablet 768px–1024px (burger menu)    laptop 1025px–1366px    desktop ≥ 1367px
 * The original's root font size was 10px (Elementor "rem" values = px / 10); here everything is in px.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (Elementor global colours of the original) */
  --color-teal: #134853;        /* primary: headings, links, buttons */
  --color-gold: #e1b168;        /* secondary/accent: header, footer, hero button */
  --color-text: #6a6a6a;        /* body copy, box borders */
  --color-text-theme: #666666;  /* legal pages (theme template) */
  --color-ink: #292e36;         /* contact details */
  --color-white: #ffffff;
  --color-hero-heading: #f2f7ff;
  --color-grey-bg: #f1f1f1;     /* contact page background */
  --color-menu-active: #3f444b; /* mobile menu: current/open item */
  --color-toggle: #33373d;
  --color-tickets: #d36fdf;     /* What's On "GET TICKETS" button */

  /* Typography */
  --font-heading: "Old Standard TT", "Times New Roman", serif;
  --font-body: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-theme: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --text-heading: 42px;         /* "secondary" global: section headings */
  --text-body: 20px;
  --leading-body: 30px;

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

/* ============ 2. Fonts (self-hosted Google Fonts, latin subset, variable where available) ============ */
@font-face { font-family: "Old Standard TT"; src: url("/assets/fonts/old-standard-tt-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; }
@font-face { font-family: "Josefin Sans"; src: url("/assets/fonts/josefin-sans-var-latin.woff2") format("woff2"); font-weight: 100 700; 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; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-var-latin.woff2") format("woff2"); font-weight: 100 900; 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; }
@font-face { font-family: "Open Sans"; src: url("/assets/fonts/open-sans-var-latin.woff2") format("woff2"); font-weight: 300 800; 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-body); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text); background: var(--color-white); overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); font-weight: 400; line-height: 1; color: var(--color-teal); }
p { margin: 0; }
a { color: var(--color-teal); text-decoration: none; transition: color var(--duration) var(--ease); }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ============ 4. Layout ============ */
/* Section heading used on several pages ("Our Menu", "Download Our App", card titles) */
.section-heading { font-family: var(--font-heading); font-size: var(--text-heading); line-height: 1; text-transform: uppercase; color: var(--color-teal); }

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

/* === Component: site-header ===
 * Gold sticky bar: logo | menu | Order Now. Column widths are the original's percentages.
 * Burger menu at ≤1024px; the logo is hidden at ≤767px (as the original).
 */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-gold); }
.site-header__inner { display: flex; align-items: center; justify-content: center; padding: 0 25px; }
.site-header__logo { flex: 0 0 10%; padding: 10px; display: flex; justify-content: center; }
.site-header__logo img { width: 80px; }
.site-header__menu { flex: 0 0 51.822%; padding: 10px; display: flex; flex-direction: column; align-items: stretch; }
.site-header__order { flex: 0 0 12%; padding: 10px; display: flex; justify-content: center; align-items: center; }
/* d6: label shown in white (original: teal on teal, invisible until hover). Switch back: set color to var(--color-teal). */
.header-order { display: inline-block; padding: 20px 20px 15px; border-radius: var(--radius-button); background: var(--color-teal); color: var(--color-white); font-family: var(--font-body); font-size: 18px; line-height: 18px; text-align: center; }
.header-order:hover, .header-order:focus-visible { color: var(--color-white); }
@media (max-width: 1024px) {
  .site-header__logo { flex-basis: 15%; }
  .site-header__menu { flex-basis: 46%; }
  .header-order { padding: 15px; }
}
@media (max-width: 767px) {
  .site-header__inner { padding: 7px; }
  .site-header__logo { display: none; }
  .site-header__menu { flex-basis: 50%; padding: 0; }
  .site-header__order { flex-basis: 50%; padding: 0; }
}

/* === Component: nav-toggle (burger, ≤1024px) === */
.nav-toggle { display: none; align-self: center; width: 33px; height: 33px; padding: 5.5px; border: 0; border-radius: 3px; background: rgb(0 0 0 / 0.05); color: var(--color-toggle); cursor: pointer; }
.nav-toggle svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.nav-toggle__close { display: none !important; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none !important; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block !important; }

/* === Component: site-nav ===
 * Desktop: horizontal Inter caps with a white double line (over + under) on the current/hovered item;
 * drop-downs open on hover/focus (and on click via site.js submenu module).
 * ≤1024px: panel under the burger that slides open (grid 0fr → 1fr), sub-menus expand inline.
 */
.site-nav__list, .site-nav__sub { list-style: none; margin: 0; padding: 0; }
.site-nav__list { display: flex; flex-wrap: nowrap; justify-content: center; }
.site-nav__item { position: relative; }
.site-nav__link { position: relative; display: flex; align-items: center; margin: 0; padding: 13px 7px; border: 0; background: none; cursor: pointer; font-family: var(--font-ui); font-size: 16px; font-weight: 600; line-height: 20px; text-transform: uppercase; color: var(--color-teal); white-space: nowrap; }
.site-nav__caret { width: 10px; height: 16px; margin-left: 10px; fill: currentColor; }
.site-nav__sub a { display: block; padding: 13px 20px; font-family: var(--font-body); font-size: 20px; line-height: 20px; color: var(--color-teal); }
@media (min-width: 1025px) {
  .site-nav__link::before, .site-nav__link::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--color-white); opacity: 0; transition: opacity var(--duration) var(--ease); }
  .site-nav__link::before { top: 0; }
  .site-nav__link::after { bottom: 0; }
  .site-nav__link[aria-current="page"]::before, .site-nav__link[aria-current="page"]::after,
  .site-nav__link:hover::before, .site-nav__link:hover::after,
  .site-nav__link:focus-visible::before, .site-nav__link:focus-visible::after { opacity: 1; }
  .site-nav__sub { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 12em; background: var(--color-white); visibility: hidden; opacity: 0; transition: opacity 200ms ease, visibility 200ms; }
  .site-nav__item--parent:hover > .site-nav__sub, .site-nav__item--parent:focus-within > .site-nav__sub, .site-nav__item--parent.is-open > .site-nav__sub { visibility: visible; opacity: 1; }
  .site-nav__sub a { white-space: nowrap; }
  .site-nav__sub a:hover, .site-nav__sub a:focus-visible { background: var(--color-gold); }
}
@media (max-width: 1024px) {
  .nav-toggle { display: block; }
  .site-nav { display: grid; grid-template-rows: 0fr; align-items: stretch; transition: grid-template-rows 300ms ease; }
  .site-nav.is-open { grid-template-rows: 1fr; margin-top: 10px; }
  .site-nav__clip { overflow: hidden; min-height: 0; background: var(--color-white); }
  .site-nav:not(.is-open) .site-nav__clip { visibility: hidden; transition: visibility 0s 300ms; }
  .site-nav__list { display: block; }
  .site-nav__link { width: 100%; padding: 10px 20px; font-size: 11px; text-align: left; white-space: normal; }
  .site-nav__link[aria-current="page"], .site-nav__parent[aria-expanded="true"] { background: var(--color-menu-active); color: var(--color-white); }
  .site-nav__caret { width: 7px; height: 11px; margin-left: 11px; }
  .site-nav__sub { display: none; }
  .site-nav__item--parent.is-open > .site-nav__sub { display: block; }
  .site-nav__sub a { padding: 10px 20px; }
}

/* === Component: hero (home) ===
 * d7: shown at every width (original pushed it off-screen at ≥768px with margin-top:-524px).
 * Switch back: add `margin-top: -524px` to .hero inside @media (min-width: 768px).
 */
.hero { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 58vh; padding: 0 165px; background: #000 url("/wp-content/uploads/2024/03/9b4adf922c766338ccadd59a0038baf8-1.png") center / cover no-repeat; text-align: center; }
.hero::before { content: ""; position: absolute; inset: 0; background: #000; opacity: 0.4; }
.hero > * { position: relative; }
.hero__title { font-size: 80px; line-height: 1; color: var(--color-hero-heading); text-shadow: 11px 0 0 rgb(0 0 0 / 0.3); }
.hero__subtitle { font-size: 21px; line-height: 1; text-transform: uppercase; color: var(--color-gold); margin-bottom: 25px; }
.hero__button-wrap { padding: 25px; }
.hero__button { display: inline-block; padding: 50px; border-radius: 20px; background: var(--color-gold); color: var(--color-white); font-family: var(--font-heading); font-size: 40px; line-height: 10px; text-transform: uppercase; text-shadow: 4px 0 0 var(--color-teal); transition: transform var(--duration) var(--ease), color var(--duration) var(--ease); }
.hero__button:hover, .hero__button:focus-visible { color: var(--color-teal); transform: translateY(8px); } /* Elementor "sink" hover */
.hero__note { font-size: 20px; line-height: 15px; color: var(--color-gold); }
@media (max-width: 1024px) {
  .hero { padding-inline: 0; }
  .hero__title { font-size: 55px; }
  .hero__subtitle { font-size: 20px; }
  .hero__button { padding: 5px 10px; font-size: 35px; line-height: 70px; }
}
@media (max-width: 767px) {
  .hero { min-height: 51vh; padding-top: 120px; }
  .hero__title { font-size: 36px; }
  .hero__subtitle { margin-bottom: 33px; }
  .hero__button { padding: 0 20px; font-size: 23px; }
  .hero__note { font-size: 14px; padding-bottom: 20px; }
}

/* === Component: info-strip (home: Locate us / Opening times / Contact us) === */
.info-strip { display: grid; grid-template-columns: 32% 39% 29%; align-items: center; padding: 40px 0; }
.info-strip__item { display: flex; align-items: center; gap: 12px; padding: 10px; }
.info-strip__icon { flex: 0 0 11.774%; display: flex; justify-content: center; }
.info-strip__icon svg { width: 50px; height: 50px; fill: var(--color-teal); }
.info-strip__body { display: flex; flex-direction: column; gap: 8px; padding: 0 10px; min-width: 0; }
.info-strip__title { font-size: 30px; line-height: 1; text-transform: uppercase; }
.info-strip__text { font-size: 25px; line-height: 30px; color: var(--color-teal); overflow-wrap: anywhere; }
@media (max-width: 1024px) {
  .info-strip { grid-template-columns: repeat(3, 1fr); }
  .info-strip__title { font-size: 14px; }
  .info-strip__text { font-size: 11px; }
  .info-strip__item--contact .info-strip__text { font-size: 10px; }
  .info-strip__item--locate .info-strip__icon svg { width: 41px; height: 41px; }
  .info-strip__item--hours .info-strip__icon svg { width: 35px; height: 35px; }
  .info-strip__item--contact .info-strip__icon svg { width: 39px; height: 39px; }
}
@media (max-width: 767px) {
  .info-strip { grid-template-columns: 1fr; padding-top: 30px; }
  .info-strip__item { flex-wrap: wrap; padding: 20px 10px; }
  .info-strip__icon { flex-basis: auto; }
  .info-strip__body { flex-basis: 100%; padding: 0 10px; }
}

/* === Component: story (home: image + "The Story So Far") === */
.story { display: flex; margin-top: 20px; padding: 0 10px; }
.story__image { flex: 0 0 45%; padding: 10px; background: url("/wp-content/uploads/2024/03/1b620becb2611bc03457714761b6c540-2-1024x819.png") center / cover no-repeat; background-clip: content-box; }
.story__body { flex: 0 0 50%; display: flex; flex-direction: column; justify-content: center; padding: 10px 20px; }
.story__body .section-heading { margin: -22px 0 31px; }
.story__text { font-size: 20px; line-height: 30px; }
.story-more { margin-top: 20px; padding: 0 10px; font-size: 20px; line-height: 30px; }
@media (max-width: 1024px) {
  .story, .story-more { padding: 0 32px; }
  .story__text { max-width: 401px; }
}
@media (max-width: 767px) {
  .story { flex-direction: column; }
  .story__image { display: none; } /* the original's image container collapses to 20px on mobile */
  .story__body { padding: 20px 20px 10px; }
  .story__text { max-width: none; }
}

/* === Component: menu-cards (home "Our Menu": linked cards with a teal 1px frame) === */
.menu-heading { margin: 60px 0; padding: 10px; text-align: center; }
.menu-cards { display: grid; grid-template-columns: 46% 21% 21%; grid-template-rows: minmax(304px, auto) minmax(110px, auto) minmax(508px, auto); column-gap: 2%; row-gap: 27.5px; padding: 0 calc(32px + 2%); }
.menu-card { display: flex; flex-direction: column; border: 1px solid var(--color-teal); color: var(--color-teal); overflow: hidden; }
.menu-card__img { width: 100%; object-fit: cover; }
.menu-card__title { font-family: var(--font-heading); font-size: var(--text-heading); line-height: 1; text-transform: uppercase; color: var(--color-teal); }
.menu-card__text { font-size: 20px; line-height: 40px; color: var(--color-text); }
.menu-card--starters { grid-column: 1; grid-row: 1 / span 2; }
.menu-card--starters .menu-card__img { height: 302px; }
.menu-card--starters .menu-card__title { margin-top: 16px; }
.menu-card--starters .menu-card__title, .menu-card--starters .menu-card__text,
.menu-card--mains .menu-card__title, .menu-card--mains .menu-card__text { padding: 0 30px; }
.menu-card--small { justify-content: center; padding: 10px; }
.menu-card--sides { grid-column: 2; grid-row: 1; }
.menu-card--desserts { grid-column: 3; grid-row: 1; }
.menu-card--drinks { grid-column: 1; grid-row: 3; flex-direction: row; gap: 11px; }
.menu-card--drinks .menu-card__img { flex: 0 0 52.075%; width: 52.075%; height: 500px; }
.menu-card--drinks .menu-card__body { display: flex; flex-direction: column; justify-content: center; padding: 0 10px; }
.menu-card--mains { grid-column: 2 / span 2; grid-row: 2 / span 2; justify-content: space-around; min-height: 646px; }
.menu-card--mains .menu-card__img { max-width: 673px; height: 342px; margin: -11px 4px 30px 0; align-self: center; }
@media (max-width: 1024px) {
  .menu-cards { display: flex; flex-direction: column; gap: 0; padding: 0 32px; }
  .menu-card { margin: 2%; }
  .menu-card--small { padding: 10px; }
  .menu-card--drinks { flex-direction: column; }
  .menu-card--drinks .menu-card__img { width: 100%; height: auto; flex-basis: auto; }
  .menu-card--drinks .menu-card__body { justify-content: flex-end; }
  .menu-card--mains { min-height: 0; }
  .menu-card--mains .menu-card__img { max-width: 100%; height: auto; margin: 0; padding-bottom: 12px; }
}
@media (max-width: 767px) {
  .menu-card { margin: 0 0 16px; }
}

/* === Component: app-promo ("Download Our App": framed text card linking to the app page + phone image) === */
.app-promo { display: flex; margin: 120px 0; padding: 0 32px; }
.app-promo__col { flex: 0 0 50%; display: flex; flex-direction: column; justify-content: center; padding: 10px; }
.app-promo__card { display: flex; flex-direction: column; justify-content: center; min-height: 350px; padding: 30px 30px 0; border: 3px solid var(--color-text); border-radius: 1px; color: var(--color-teal); }
.app-promo__text { font-size: 20px; line-height: 30px; color: var(--color-text); }
.app-promo__arrow { display: flex; justify-content: flex-end; margin: -25px 0; }
.app-promo__arrow svg { width: 125px; height: 125px; fill: var(--color-ink); }
.app-promo__image { display: flex; justify-content: center; }
.app-promo__image img { width: auto; }
.app-promo__image--phone img { max-width: 40%; border: 5px solid var(--color-text-theme); border-radius: 35px; }
@media (max-width: 767px) {
  .app-promo { flex-direction: column; }
  .app-promo__col { padding: 0; }
  .app-promo__col--image { padding: 10px; }
}

/* === Component: page-band (teal spacer under the header on What's On / Contact, only ≥1367px like the original) === */
.page-band { display: none; min-height: 176px; background: var(--color-teal); }
@media (min-width: 1367px) { .page-band { display: block; } }

/* === Component: title-banner (What's On: photo strip with big white title and gold bottom border) === */
.title-banner { display: flex; justify-content: center; align-items: center; min-height: 120px; padding: 20px; border-bottom: 30px solid var(--color-gold); background: url("/wp-content/uploads/2024/03/9b4adf922c766338ccadd59a0038baf8-1.png") center / cover no-repeat; text-align: center; }
.title-banner__title { font-size: 80px; line-height: 1; text-transform: uppercase; color: var(--color-white); text-shadow: 12px 12px 6px rgb(0 0 0 / 0.41); }
@media (max-width: 1366px) { .title-banner__title { font-size: 64px; } }
@media (max-width: 767px) { .title-banner__title { font-size: 50px; } }

/* === Component: event-card (What's On: framed poster + text + ticket button) === */
.events { display: flex; gap: 15px; padding: 0 10px; }
.events--single { gap: 0; }
.events--single .events__col { flex: 0 0 50%; padding: 10px; }
.event-card { flex: 1 1 0; display: flex; flex-direction: column; padding: 10px; border: 3px solid var(--color-text-theme); }
.event-poster { display: flex; justify-content: center; }
.event-poster img { width: 640px; }
.event-card__text { font-size: 20px; line-height: 24px; color: var(--color-text); text-align: center; }
.event-card__text .spacer { line-height: 15px; }
.event-card__button { align-self: center; display: inline-block; margin-top: 10px; padding: 12px 24px; border-radius: 3px; background: var(--color-tickets); color: var(--color-teal); font-size: 20px; line-height: 20px; }
@media (max-width: 767px) {
  .events { flex-direction: column; }
  .events--single .events__col { flex-basis: auto; }
  .events--single .events__col--empty { display: none; }
}

/* === Component: contact-details (Contact Us: white title card, Find Us / Opening Hours on grey) === */
.contact-title { padding: 60px 0 70px; background: var(--color-grey-bg); border-radius: 2px; }
.contact-title__card { width: min(1047px, 100%); margin: 0 auto; padding: 11px; border-radius: 20px; background: var(--color-white); text-align: center; }
.contact-title__card h2 { padding: 50px 0 35px; font-size: 60px; text-transform: uppercase; color: #000; }
.contact-details { display: flex; padding: 40px 10px 60px; background: var(--color-grey-bg); }
.contact-details__col { flex: 0 0 50%; padding: 0 10px; }
.contact-details__col h3 { font-size: 40px; line-height: 1; text-transform: uppercase; color: var(--color-ink); }
.contact-details__text { padding: 15px 15px 15px 5px; font-size: 20px; line-height: 28px; color: var(--color-ink); overflow-wrap: anywhere; }
.contact-details__text a { color: inherit; }
@media (max-width: 767px) {
  .contact-title__card { width: auto; margin-inline: 0; }
  .contact-details { flex-direction: column; gap: 40px; }
}

/* === Component: footer-map (full-width map with the round logo overlapping it, ≥1025px) === */
.footer-map { position: relative; background: var(--color-gold); }
.map { display: block; width: 100%; height: 350px; border: 0; }
.footer-map { padding-bottom: 75px; } /* room for the logo, as the original's image widget (225px with -60px/-90px margins) */
.footer-map__logo { position: absolute; left: 50%; top: 290px; z-index: 2; width: 225px; height: 225px; transform: translateX(-50%); }
@media (max-width: 1024px) { .footer-map { padding-bottom: 0; } .footer-map__logo { display: none; } }

/* === Component: site-footer === */
.site-footer { padding: 120px 0 75px; background: var(--color-gold); color: var(--color-teal); }
.site-footer__columns { display: flex; padding: 10px; }
.site-footer__col { flex: 0 0 auto; display: flex; flex-direction: column; padding: 10px; color: var(--color-teal); }
.site-footer__col--links { width: 13.309%; }
.site-footer__col:nth-child(2) { width: 19.014%; }
.site-footer__col:nth-child(3) { width: 36.337%; }
.site-footer__col--app { width: 25%; }
.site-footer__heading { margin-bottom: 10px; font-family: var(--font-body); font-size: 20px; font-weight: 800; line-height: 15px; color: var(--color-teal); }
.site-footer__heading--find { line-height: 20px; }
.site-footer__heading--app { font-weight: 700; }
.site-footer__text { font-size: 20px; line-height: 30px; color: var(--color-teal); }
.site-footer__text--hours p:nth-child(2) { min-height: 30px; }
.site-footer__bar { padding: 10px; }
.site-footer__credit { font-family: var(--font-ui); font-size: 20px; line-height: 15px; color: var(--color-teal); }
.site-footer__credit a { color: inherit; }
@media (max-width: 767px) {
  .site-footer__columns { flex-direction: column; }
  .site-footer__col, .site-footer__col--links, .site-footer__col:nth-child(2), .site-footer__col:nth-child(3), .site-footer__col--app { width: 100%; }
  .site-footer__credit { line-height: 20px; }
}

/* === Component: footer-nav (Quick Links; same menu as the header, drop-downs open in place) === */
.footer-nav__list, .footer-nav__sub { list-style: none; margin: 0; padding: 0; }
.footer-nav__link { display: flex; align-items: center; padding: 10px 0; border: 0; background: none; cursor: pointer; font-family: var(--font-body); font-size: 20px; line-height: 15px; color: var(--color-teal); text-align: left; }
.footer-nav__link:hover, .footer-nav__link:focus-visible, .footer-nav__link[aria-current="page"] { color: var(--color-white); }
.footer-nav__caret { width: 10px; height: 16px; margin-left: 10px; fill: currentColor; }
.footer-nav__sub { display: none; padding-left: 10px; }
.footer-nav__item--parent.is-open > .footer-nav__sub { display: block; }
.footer-nav__sub a { display: block; padding: 8px 0; font-size: 18px; line-height: 20px; color: var(--color-teal); }
.footer-nav__sub a:hover, .footer-nav__sub a:focus-visible { color: var(--color-white); }

/* === Component: legal (Privacy Policy / Terms: theme banner + text column) === */
.legal-banner { position: relative; margin-bottom: 50px; background: #2d2d2d; }
.legal-banner img { width: 100%; opacity: 0.6; }
.legal-banner h1 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 15px; font-family: var(--font-theme); font-size: 48px; font-weight: 700; line-height: 1.1; color: var(--color-white); text-align: center; }
.legal { width: 1170px; max-width: 100%; margin: 30px auto 0; padding: 0 15px; font-family: var(--font-theme); font-size: 14px; line-height: 24px; color: var(--color-text-theme); }
.legal__content { width: 66.6667%; margin-top: 21px; padding-bottom: 36px; }
.legal__content a { text-decoration: underline; overflow-wrap: anywhere; }
.legal__content strong { font-weight: 700; }
.legal-table { margin: 0 0 1em; }
.legal-table table { width: 100%; border-collapse: collapse; }
.legal-table td { padding: 0.5em; border: 0; vertical-align: top; }
.legal-table tr:nth-child(odd) td { background: #f0f0f0; }
@media (max-width: 1199px) { .legal { width: 970px; } }
@media (max-width: 991px) { .legal { width: 750px; } .legal-banner h1 { font-size: 36px; } }
@media (max-width: 767px) { .legal { width: auto; margin-top: 28px; } .legal__content { width: 100%; } .legal-banner { margin-bottom: 30px; } }

/* === Component: contact-email (catalogue only: this site has no form; see SITE.md) === */
.contact-email { display: grid; gap: 16px; justify-items: start; }
.contact-email__address { font-weight: 700; word-break: break-word; }

/* === Component: not-found (404 page, inside .contact-title card) === */
.not-found__title { padding: 50px 0 25px; font-size: 60px; text-transform: uppercase; color: #000; }
.not-found__text { padding: 0 20px 20px; font-size: 20px; line-height: 28px; color: var(--color-ink); }
.not-found__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin: 0; padding: 0 20px 40px; list-style: none; font-family: var(--font-ui); font-size: 16px; font-weight: 600; text-transform: uppercase; }
@media (max-width: 767px) { .not-found__title { font-size: 40px; } }

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

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