/*
 * site.css: the only stylesheet for seafoodsbidford.co.uk.
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing (custom properties)
 *   2. Fonts         @font-face for self-hosted Google Fonts
 *   3. Base          reset and element defaults
 *   4. Layout        container
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         page-specific rules (the home page sections)
 *   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 header switches to the burger menu at <= 1024px (as the original).
 *
 * Values come from the original's computed styles (design-system/orig-measure.json) and
 * its Elementor CSS (design-system/_src/post-21.css). Elementor columns have a 10px gutter;
 * sections reproduce it with padding.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (Elementor global colours of the original) */
  --color-primary: #004807;    /* green: header, headings, text, footer */
  --color-secondary: #d9d9d9;  /* light grey: buttons, light text on green */
  --color-bg: #ffffff;
  --color-toggle-bg: rgb(0 0 0 / 0.05);

  /* Typography */
  --font-display: "Trade Winds", "Zilla Slab", Georgia, serif;  /* headings, nav */
  --font-body: "Zilla Slab", Georgia, serif;                    /* text, buttons */
  --font-footer: Roboto, Arial, sans-serif;                     /* footer line */
  --text-heading: 50px;
  --text-heading-sm: 40px;   /* contact headings <= 1024px */
  --text-button: 23px;
  --text-nav: 16px;
  --text-dropdown: 13px;

  /* Spacing and shape */
  --container: 1280px;
  --gutter: 10px;            /* Elementor column padding */
  --radius-button: 10px;
  --text-shadow-button: 0 0 10px rgb(0 0 0 / 0.3);
  --header-overlap: 61px;    /* the hero slides 61px under the sticky header */

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

/* ============ 2. Fonts ============ */
/* Self-hosted Google Fonts (latin subset, SIL OFL / Apache 2.0). */
@font-face { font-family: "Trade Winds"; src: url("/assets/fonts/trade-winds-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("/assets/fonts/zilla-slab-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("/assets/fonts/zilla-slab-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-latin-400.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: normal; color: var(--color-primary); 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; line-height: 1; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ============ 4. Layout ============ */
/* Boxed Elementor sections: 1280px max, full width below that. Columns carry the 10px gutter. */
.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-bg); color: var(--color-primary); }
.skip-link:focus { left: 16px; }

/* === Component: heading ===
 * Trade Winds section heading, 50px, line-height 1, centred by default.
 */
.heading { font-family: var(--font-display); font-size: var(--text-heading); font-weight: 400; line-height: 1; color: var(--color-primary); text-align: center; }

/* === Component: button ===
 * Rounded pill, Zilla Slab 23px. --light: grey with green text; --dark: green with grey text.
 * --shadow adds the original's soft text shadow (header and hero buttons).
 * The ::after extends the tap area to 45px without changing the look.
 */
.button { position: relative; display: inline-block; padding: 8px 18px; border-radius: var(--radius-button); font-family: var(--font-body); font-size: var(--text-button); font-weight: 400; line-height: 1; text-align: center; text-decoration: none; transition: all var(--duration) var(--ease); }
.button::after { content: ""; position: absolute; inset: -3px 0; }
.button--light { background: var(--color-secondary); color: var(--color-primary); }
.button--dark { background: var(--color-primary); color: var(--color-secondary); }
.button--shadow { text-shadow: var(--text-shadow-button); }

/* === Component: button-group === */
.button-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* === Component: site-header ===
 * Sticky green bar. Desktop: centred anchor nav (underline on hover/active) + "Order Now" at right.
 * <= 1024px: burger centred on top, grey dropdown slides open below it (grid 0fr -> 1fr; the
 * column uses align-items: stretch so items are clipped while animating), then a full-width
 * row with "Order Now".
 */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--color-primary); }
.site-header__inner { display: flex; align-items: center; max-width: var(--container); margin-inline: auto; min-height: 59px; }
.site-header__menu { flex: 0 0 85.938%; min-width: 0; padding-left: 159px; display: flex; flex-direction: column; justify-content: center; }
.site-header__cta { flex: 0 0 13.906%; min-width: 0; padding: var(--gutter); text-align: right; }
.site-nav__list { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.site-nav__list a { position: relative; display: block; padding: 13px 20px; font-family: var(--font-display); font-size: var(--text-nav); font-weight: 400; line-height: 20px; color: var(--color-secondary); }
.site-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--color-secondary); opacity: 0; transition: opacity var(--duration) var(--ease); }
.site-nav__list a:hover::after, .site-nav__list a:focus-visible::after, .site-nav__list a.is-active::after { opacity: 1; }
.nav-toggle { display: none; align-items: center; justify-content: center; margin: 0 auto; width: 33px; height: 33px; padding: 0; border: 0; border-radius: 3px; background: var(--color-toggle-bg); color: var(--color-secondary); cursor: pointer; }
.nav-toggle svg { width: 22px; height: 22px; }
.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; }
@media (max-width: 1024px) {
  .site-header__inner { flex-direction: column; align-items: stretch; min-height: 0; }
  .site-header__menu { flex: none; padding: 0; align-items: stretch; justify-content: flex-start; }
  .nav-toggle { display: inline-flex; position: relative; }
  .nav-toggle::after { content: ""; position: absolute; inset: -6px; } /* 45px tap target */
  .site-nav { display: grid; grid-template-rows: 0fr; margin-top: 10px; visibility: hidden; transition: grid-template-rows var(--duration) var(--ease), visibility var(--duration); }
  .site-nav.is-open { grid-template-rows: 1fr; visibility: visible; }
  .site-nav.is-instant { transition: none; }
  .site-nav__inner { overflow: hidden; min-height: 0; }
  .site-nav__list { display: block; background: var(--color-secondary); }
  .site-nav__list a { padding: 10px 20px; font-size: var(--text-dropdown); text-align: center; color: var(--color-primary); transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease); }
  .site-nav__list a::after { display: none; }
  /* the original dropdown does not mark the scroll-spy item, only hover/focus */
  .site-nav__list a:hover, .site-nav__list a:focus-visible { background: var(--color-primary); color: var(--color-secondary); }
  /* the original's 160px button widget, button aligned right inside it */
  .site-header__cta { flex: none; width: 160px; margin-inline: auto; padding: var(--gutter) 0; }
}

/* === Component: info-list ===
 * Plain stacked lines of bold Zilla Slab (phone, hours, address).
 */
.info-list { list-style: none; margin: 0; padding: 0; font-family: var(--font-body); font-size: 23px; font-weight: 700; line-height: normal; color: var(--color-primary); }
@media (max-width: 1024px) { .info-list { font-size: 18px; } }

/* === Component: map ===
 * Keyless Google Maps iframe cropped by a 600px corner radius (a circle at desktop).
 */
.map-crop { border-radius: 600px; overflow: hidden; }
.map { display: block; width: 100%; height: 600px; border: 0; }
@media (max-width: 1024px) { .map { height: 358px; } }
@media (max-width: 767px) { .map { height: 340px; } }

/* === Component: social-icon === */
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 60px; background: var(--color-secondary); color: var(--color-primary); }
.social-icon svg { width: 18px; height: 18px; fill: currentColor; }

/* === Component: site-footer === */
.site-footer { background: var(--color-primary); color: var(--color-secondary); font-family: var(--font-footer); font-size: 16px; line-height: normal; }
.site-footer__inner { display: flex; align-items: center; }
.site-footer__copy { flex: 0 0 50%; min-width: 0; padding: 20px var(--gutter); }
.site-footer__copy p { margin: 1em 0; }
.site-footer__copy a { color: inherit; }
.site-footer__copy a:hover { text-decoration: underline; }
.site-footer__social { flex: 0 0 50%; min-width: 0; padding: var(--gutter); display: flex; justify-content: flex-end; }
@media (max-width: 1024px) {
  .site-footer__inner { align-items: stretch; }
  .site-footer__copy { padding: 40px 30px; }
  .site-footer__social { justify-content: center; align-items: center; }
}
@media (max-width: 767px) {
  .site-footer__inner { flex-direction: column; }
  .site-footer__copy, .site-footer__social { flex: none; }
  .site-footer__copy { text-align: center; }
}

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

/* === Page: / (hero) === */
.hero { margin-top: calc(-1 * var(--header-overlap)); min-height: 100vh; padding: var(--gutter); display: flex; flex-direction: column; align-items: center; justify-content: center; background: url("/wp-content/uploads/2023/08/bg.png") center / cover no-repeat; }
.hero__logo { width: 52.446%; margin-bottom: 50px; }  /* widget 60.283% x image 87% */
@media (max-width: 1024px) { .hero__logo { width: 474.8px; } }

/* === Page: / (features band, green wave) ===
 * Wrapping flex with stretched lines: when stacked on mobile, the spare height is shared
 * between the three rows (as Elementor's min-height section does).
 */
.features { display: flex; flex-wrap: wrap; align-items: center; min-height: 415px; margin-top: -40px; background: url("/wp-content/uploads/2023/08/top_banner.png") center / cover no-repeat; }
.feature { flex: 1 1 0; min-width: 0; padding: var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; }
.feature__icon { display: block; margin-bottom: 40px; }
.feature__title { max-width: 40%; font-family: var(--font-body); font-size: 24px; font-weight: 400; line-height: 1; color: var(--color-secondary); }
.feature__title--wide { max-width: 58.438%; }
.feature__title--mid { max-width: 52.048%; }
@media (max-width: 767px) {
  .features { min-height: 638px; margin-top: -64px; }
  .feature { flex: 0 0 100%; }
}

/* === Page: / (about) === */
.about { padding-block: 110px; }
.about .container { padding-inline: var(--gutter); }
.about__text { margin: 1em 0; font-family: var(--font-body); font-size: 24px; text-align: center; color: var(--color-primary); }
@media (max-width: 1024px) { .about__text { font-size: 20px; padding-inline: 30px; } }

/* === Page: / (menu promo) === */
.menu-promo__inner { display: flex; align-items: center; }
.menu-promo__text, .menu-promo__media { flex: 0 0 50%; min-width: 0; padding: var(--gutter); }
.menu-promo__text .heading { margin-bottom: 50px; }
.menu-promo__media { padding-bottom: 110px; }
.menu-promo__media img { width: 78%; margin-inline: auto; }
@media (max-width: 1024px) {
  .menu-promo__text { padding: 30px; }
  .menu-promo__media { align-self: flex-start; padding: 40px 40px 140px; }
}
@media (max-width: 767px) {
  .menu-promo__inner { flex-direction: column; align-items: stretch; }
  .menu-promo__text, .menu-promo__media { flex: none; }
  .menu-promo__media { align-self: stretch; }
}

/* === Page: / (app promo) === */
.app-promo { background: url("/wp-content/uploads/2023/08/app_bg-1.png") center / contain no-repeat; }
.app-promo__inner { display: flex; align-items: stretch; }
.app-promo__col { flex: 0 0 50%; min-width: 0; padding: var(--gutter); }
.app-promo__disc { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: url("/wp-content/uploads/2023/08/circle.png") center / contain no-repeat; color: var(--color-secondary); }
.app-promo__download { font-family: var(--font-body); font-size: 50px; margin-bottom: 40px; }
.app-promo__title { font-family: var(--font-display); font-size: 86px; margin-bottom: 41px; }
.app-promo__stores { display: block; width: 43.012%; }
.app-promo__stores img { width: 100%; margin-inline: auto; }
.app-promo__phone { padding-block: 60px; text-align: center; }
.app-promo__phone a { display: block; width: fit-content; margin-inline: auto; }
.app-promo__phone img { width: 285px; }
@media (max-width: 1024px) {
  .app-promo__col:first-child { padding: 0; }
  .app-promo__disc { height: calc(100% - 60px); margin: 30px; padding: 30px; }
  .app-promo__download { font-size: 28px; margin-bottom: 21px; }
  .app-promo__title { font-size: 46px; margin-bottom: 22px; }
  .app-promo__stores { width: 211px; }
  .app-promo__stores img { width: 92%; }
  .app-promo__phone img { width: 187px; }
}
@media (max-width: 767px) {
  .app-promo__inner { flex-direction: column; }
  .app-promo__col { flex: none; }
  .app-promo__disc { height: auto; margin: 0; padding: 71px; }
  .app-promo__phone { padding-top: 75px; padding-bottom: 160px; }
}

/* === Page: / (contact) === */
.contact__inner { display: flex; align-items: center; }
.contact__info { flex: 0 0 50%; min-width: 0; padding: 0 30px; }
.contact__info .heading { text-align: left; margin-bottom: 10px; }
.contact__info .info-list + .heading { margin-top: 40px; }
.contact__map { flex: 0 0 50%; min-width: 0; padding: 142px var(--gutter); }
@media (max-width: 1024px) { .contact__info .heading { font-size: var(--text-heading-sm); } }
@media (max-width: 767px) {
  .contact__inner { flex-direction: column; align-items: stretch; }
  .contact__info, .contact__map { flex: none; }
  .contact__info, .contact__info .heading { text-align: center; }
}

/* === Page: /404.html === */
.not-found { padding: 120px var(--gutter); text-align: center; }
.not-found__text { margin: 1em auto 40px; max-width: 40em; font-size: 24px; }
@media (max-width: 1024px) { .not-found__text { font-size: 20px; } }

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