/*
 * site.css: the only stylesheet for Abbey Fisheries (abbeyfisheries.co.uk).
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing (custom properties)
 *   2. Fonts         @font-face for the self-hosted Google Fonts
 *   3. Base          reset and element defaults
 *   4. Layout        page-top wrapper, section rows
 *   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 used by the original; media queries can't use custom properties):
 *   mobile  <= 767px    tablet 768px-1024px    desktop >= 1025px
 *   - columns sit side by side from 768px up (Elementor "min-width: 768px")
 *   - the nav menus collapse to a burger at <= 1024px ("dropdown: tablet")
 *
 * The original was one Elementor page whose sections all had 10px column padding and
 * 20px between widgets; --gutter and --widget-gap carry those two values.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (from the original's computed styles) */
  --color-text: #000000;
  --color-bg: #ffffff;
  --color-teal: #327874;          /* nav links, header ORDER NOW, burger buttons */
  --color-teal-kicker: #3c8f8b;   /* "Fresh Fish & Chips" */
  --color-app-bg: #d2f0ee;        /* app download band */
  --color-dropdown: #33373d;      /* footer dropdown links (Elementor default) */
  --color-dropdown-hover-bg: #3f444b; /* dropdown hover (Elementor default) */

  /* Typography */
  --font-body: "Roboto", Arial, sans-serif;
  --font-condensed: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

  /* Spacing */
  --gutter: 10px;                 /* Elementor column padding */
  --widget-gap: 20px;             /* Elementor space between widgets */

  /* Motion (match the original's timings) */
  --duration: 300ms;
  --duration-link: 400ms;
  --ease: ease;
  --ease-pointer: cubic-bezier(0.58, 0.3, 0.005, 1);
}

/* ============ 2. Fonts ============ */
/* Google Fonts (SIL OFL), self-hosted variable fonts, latin subset. Weights used:
   Roboto 300/400/500/600, Roboto Condensed 300/400/500/800. */
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("/assets/fonts/roboto-condensed-variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ============ 3. Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* no smooth scroll: the original's anchors jump */
body { margin: 0; font-family: var(--font-body); font-size: 16px; 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; line-height: 1; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }

/* ============ 4. Layout ============ */
/* page: one-column grid so the pale-teal blob (Vector.png, right, contain) can sit behind
   both the header and the hero, as in the original, while the hero stays inside <main>.
   Rows: 1 header, 2 hero, 3 rest of main. <main> spans rows 2-3 as a subgrid; the
   decorative .page__top-bg spans rows 1-2. Without subgrid the blob just covers more
   of the page (graceful). Phones use Rectangle-38.png instead, as the original. */
.page { display: grid; grid-template-columns: 100%; grid-template-rows: auto auto auto; }
.page__top-bg { grid-row: 1 / 3; grid-column: 1; background: url("/wp-content/uploads/2022/04/Vector.png") right center / contain no-repeat; }
.page > .site-header { grid-row: 1; grid-column: 1; position: relative; }
.page > main { grid-row: 2 / 4; grid-column: 1; display: grid; grid-template-rows: subgrid; grid-template-columns: 100%; position: relative; }
.page__rest { min-width: 0; }
@media (max-width: 767px) {
  .page__top-bg { background-image: url("/wp-content/uploads/2022/04/Rectangle-38.png"); }
}
/* A widget stack: 20px between children, none after the last (Elementor widget spacing). */
.stack > * + * { margin-top: var(--widget-gap); }

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

/* === Component: button ===
 * .button--teal  header ORDER NOW (Roboto Condensed 300 19px, tight letter-spacing, teal outline)
 * .button--black hero ORDER NOW (Roboto Condensed 800 15px, black outline)
 */
.button { display: inline-block; background: var(--color-bg); border: 1px solid currentColor; border-radius: 0; text-decoration: none; text-transform: uppercase; text-align: center; transition: all var(--duration); }
.button--teal { padding: 12px 24px; font-family: var(--font-condensed); font-size: 19px; font-weight: 300; line-height: 19px; letter-spacing: -1.7px; color: var(--color-teal); }
.button--black { padding: 10px 30px; font-family: var(--font-condensed); font-size: 15px; font-weight: 800; line-height: 15px; color: var(--color-text); }

/* === Component: nav-toggle (burger, <= 1024px) === */
.nav-toggle { display: none; position: relative; align-items: center; justify-content: center; width: 33px; height: 33px; margin: 0 auto; padding: 0; border: 0; border-radius: 3px; background: var(--color-teal); color: var(--color-text); cursor: pointer; }
.nav-toggle::after { content: ""; position: absolute; inset: -6px; } /* 44px tap target */
.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; }

/* === Component: menu (header and footer nav: Home / App / Location) ===
 * Desktop: Roboto Condensed 500 26px teal; hover and the in-view section (.is-active,
 * scroll-spy) show a 3px teal line above and below ("double line" pointer, fade).
 * <= 1024px: hidden behind the burger; opens in place as a dropdown that pushes the page
 * down (grid 0fr -> 1fr, 0.3s), links centred.
 */
.menu__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.menu--center .menu__list { justify-content: center; }
.menu__list a { position: relative; display: flex; justify-content: center; padding: 13px 20px; font-family: var(--font-condensed); font-size: 26px; font-weight: 500; line-height: 20px; letter-spacing: 2px; color: var(--color-teal); text-decoration: none; }
.menu__list a::before, .menu__list a::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--color-teal); opacity: 0; transition: opacity var(--duration) var(--ease-pointer); }
.menu__list a::before { top: 0; }
@media (min-width: 1025px) {
  .menu__list a { transition: color var(--duration-link), background-color var(--duration-link); }
}
.menu__list a::after { bottom: 0; }
.menu__list a:hover::before, .menu__list a:hover::after,
.menu__list a:focus-visible::before, .menu__list a:focus-visible::after,
.menu__list a.is-active::before, .menu__list a.is-active::after { opacity: 1; }
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  .menu { display: grid; grid-template-rows: 0fr; align-items: stretch; margin-top: 10px; visibility: hidden; transition: grid-template-rows var(--duration), visibility var(--duration); }
  .menu.is-open { grid-template-rows: 1fr; visibility: visible; }
  .menu.is-instant { transition: none; }
  .menu__inner { overflow: hidden; min-height: 0; }
  .menu__list { display: block; }
  .menu__list a { padding: 10px 20px; color: var(--color-text); }
  .menu--footer .menu__list a { color: var(--color-dropdown); }
  .menu__list a::before, .menu__list a::after { content: none; }
  .menu__list a:hover, .menu__list a:focus-visible, .menu__list a.is-active { color: #ffffff; background: var(--color-dropdown-hover-bg); }
}

/* === Component: site-header ===
 * Four columns from 768px up (logo / menu / empty / ORDER NOW, widths as the original);
 * stacked and centred on phones. Not sticky. Sits inside .page-top on the home page.
 */
.site-header { display: block; padding: var(--gutter) var(--gutter) 0; }
.site-header__col { padding: var(--gutter); }
.site-header__logo { width: 58%; margin-inline: auto; }
.site-header__logo img { width: 100%; }
.site-header__nav, .site-header__cta { display: flex; flex-direction: column; justify-content: center; }
.site-header__cta { align-items: center; }
.site-header__gap { padding: 0; }
@media (min-width: 768px) {
  .site-header { display: grid; grid-template-columns: 25% 25% 19.241% 30.759%; align-items: stretch; }
  .site-header__gap { padding: var(--gutter); }
}
@media (max-width: 1024px) {
  .site-header__logo { width: 100%; }
  .site-header__nav { justify-content: center; }
}
@media (max-width: 767px) {
  .site-header__logo { padding: 20px; }
  .site-header__gap { height: 1px; }
}

/* === Component: hero ===
 * Three columns from 768px up: empty 10.654% / text 38.178% (vertically centred) / image 50.834%.
 */
.hero { margin-top: 91px; padding: 0 var(--gutter) 112px; min-width: 0; } /* 71px spacer + widget gap above, 102px spacer + 10px below, as the original */
.hero__col { padding: var(--gutter); }
.hero__text { display: flex; flex-direction: column; justify-content: center; }
.hero__kicker { font-size: 24px; font-weight: 600; line-height: 1; color: var(--color-teal-kicker); }
.hero__title { font-size: 98px; font-weight: 300; line-height: 1; }
.hero__intro { font-size: 18px; line-height: 34px; }
.hero__intro p { margin: 18px 0; }
.hero__image img { margin-inline: auto; }
@media (min-width: 768px) {
  .hero { display: grid; grid-template-columns: 10.654% 38.178% 50.834%; }
}
@media (max-width: 1024px) {
  .hero__title { font-size: 30px; }
  .hero__intro { font-size: 14px; line-height: 1.5; }
  .hero__intro p { margin: 14px 0; }
}
@media (max-width: 767px) {
  .hero { margin-top: 30px; }
  .hero__spacer { height: 1px; padding: 0; }
  .hero__order { display: none; }
}

/* === Component: address (map-pin icon + address line) === */
.address { display: flex; align-items: center; margin-bottom: 0; font-family: var(--font-condensed); font-size: 16px; line-height: normal; font-style: normal; }
.address svg { flex: none; width: 31px; height: 31px; margin-right: 7.75px; }
.address span { padding-left: 5px; }

/* === Component: app-promo (#App: pale-teal band, phone mockups background) ===
 * download-app.png holds the phones and the dashed borders; cover on desktop and phones,
 * contain on tablets, like the original. Paragraph sizes copy the original exactly,
 * including its 9px line-height on desktop/tablet.
 */
.app-promo { padding: 0; background: url("/wp-content/uploads/2022/04/download-app.png") center / cover no-repeat, var(--color-app-bg); }
.app-promo__inner { display: flex; flex-direction: column; justify-content: center; min-height: 70vh; padding: var(--gutter); text-align: center; }
.app-promo__title { font-size: 54px; font-weight: 500; line-height: 1; }
.app-promo__text { font-size: 29px; line-height: 9px; }
.app-promo__text p { margin: 29px 0; }
.app-promo__badges { display: inline-block; }
.app-promo__badges img { margin-inline: auto; }
@media (max-width: 1024px) {
  .app-promo { background-size: contain, auto; }
  .app-promo__inner { min-height: 34vh; }
  .app-promo__title { font-size: 28px; }
  .app-promo__text { font-size: 12px; }
  .app-promo__text p { margin: 12px 0; }
}
@media (max-width: 767px) {
  .app-promo { padding: 23px; background-size: cover, auto; }
  .app-promo__title { font-size: 22px; }
  .app-promo__text { font-size: 13px; line-height: 1.3; }
  .app-promo__text p { margin: 13px 0; }
}

/* === Component: section-heading ("Popular Items") === */
.section-heading { padding: 40px; font-size: 59px; font-weight: 600; line-height: 1; }
@media (max-width: 1024px) {
  .section-heading { font-size: 35px; }
}

/* === Component: carousel (Swiper; library CSS in /assets/vendor/swiper-14.3.0/) ===
 * "Popular Items": 4 per view (2 on tablets, 1 on phones), no gaps, no arrows or dots;
 * captions are part of the images.
 */
.carousel-block { padding: var(--gutter) var(--gutter) calc(var(--gutter) + 50px); }
.carousel-block .swiper { margin-top: var(--widget-gap); }
.swiper-slide img { width: 100%; height: auto; }

/* === Component: map (#Location) === */
.map-block { padding: var(--gutter); }
.map { display: block; width: 100%; height: 532px; border: 0; }

/* === Component: site-footer (centred footer menu + credit) === */
.site-footer { max-width: 1140px; margin-inline: auto; padding: var(--gutter); }
.site-footer__menu-wrap { padding: 40px; }
.site-footer__credit { margin: 0; padding: 0 var(--gutter) 10px; font-size: 13px; text-align: center; color: var(--color-text); }
.site-footer__credit a { color: var(--color-teal); }

/* === Component: error-page (404) === */
.error-page { padding: 60px 20px 80px; text-align: center; }
.error-page__title { font-size: 59px; font-weight: 600; margin-bottom: 20px; }
.error-page__text { font-size: 18px; line-height: 34px; margin-bottom: 30px; }
.error-page__links { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; justify-content: center; }
@media (max-width: 1024px) {
  .error-page__title { font-size: 35px; }
}

/* ============ 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) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}