/*
 * site.css: the only stylesheet for karsbergsfishandchips.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        band / row / column / flow (mirrors the original Elementor grid)
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         page-specific rules: "=== Page: <path> ==="
 *   7. Utilities     responsive hide helpers, visually-hidden
 *
 * Breakpoints (Elementor defaults on the original; media queries can't use custom properties):
 *   mobile  <= 767px    tablet 768px-1024px    desktop >= 1025px
 *
 * Sizes are in px on purpose: the original was set in px and this keeps the match exact.
 * Editing: change tokens to restyle the site; add modifier classes instead of changing a
 * component for one page.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (from the original's Elementor settings / computed styles) */
  --color-bg: #e6e6e6;            /* every section background */
  --color-top-bar: #b7b7b7;       /* desktop top bar */
  --color-rule: #6e6b6b;          /* hero bottom border, opening-times top border */
  --color-heading-soft: #545556;  /* opening-times headings */
  --color-ink: #232324;           /* opening-times text, pill buttons */
  --color-black: #000000;         /* section headings and body copy */
  --color-white: #ffffff;
  --color-footer-heading: #6e6b6b;
  --color-footer-link: #716f6f;
  --color-footer-text: #7a7a7a;

  /* Typography */
  --font-display: "Josefin Sans", sans-serif;
  --font-sans: "Roboto", sans-serif;

  /* Elementor rhythm */
  --pad: 10px;                    /* column padding */
  --widget-gap: 20px;             /* space between stacked widgets */
  --boxed: 1140px;                /* boxed rows (opening times) */
}

/* ============ 2. Fonts ============ */
/* Google Fonts (SIL OFL), self-hosted variable woff2, latin subset. */
@font-face { font-family: "Josefin Sans"; src: url("/assets/fonts/josefin-sans-latin-variable.woff2") format("woff2"); font-weight: 200 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-latin-variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

/* ============ 3. Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: normal; color: var(--color-black); background: var(--color-bg); }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3 { margin: 0; padding: 0; line-height: 1; }
p { margin: 1em 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; }
ul { list-style: none; margin: 0; padding: 0; }

/* ============ 4. Layout ============ */
/* A band is a full-width grey section; __inner carries the 10px column padding. */
.band { background: var(--color-bg); }
.band__inner { padding: var(--pad); }

/* Rows of equal columns (Elementor inner sections). Columns stack on mobile. */
.row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.row--boxed { max-width: var(--boxed); margin-inline: auto; }
.col { min-width: 0; padding: var(--pad); }
@media (max-width: 767px) {
  .row { display: block; }
}

/* Stacked widgets: 20px between them. Rows are not widgets and get no gap. */
.flow > :where(:not(:last-child):not(.row)) { margin-bottom: 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-white); }
.skip-link:focus { left: 16px; }

/* === Component: icon-sprite (inline SVG symbols in the header partial) === */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* === Component: top-bar (desktop-only grey bar: social icons + four links; hidden <= 1024px as the original) === */
.top-bar { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-top-bar); padding: 1px; }
.top-bar__col--social { padding: 0 var(--pad) 0 calc(var(--pad) + 75px); }
.top-bar__col--nav { padding: 0 calc(var(--pad) + 75px) 0 var(--pad); }
@media (max-width: 1024px) {
  .top-bar { display: none; }
}

/* === Component: social-icons (not links on the original) === */
.social-icons { display: flex; flex-wrap: wrap; gap: 0 100px; }
.social-icons__icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; color: var(--color-black); }
.social-icons__icon svg { width: 25px; height: 25px; fill: currentColor; }

/* === Component: top-nav (button group in the top bar; wraps into two rows like the original) === */
.top-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 100px; }
.top-nav__link { display: block; padding: 18px 18px 10px; font-family: var(--font-display); font-size: 15px; font-weight: 500; line-height: 1; color: var(--color-black); text-decoration: none; }

/* === Component: figure (centred image; width modifiers mirror the original's % widths) === */
.figure img { margin-inline: auto; }
.figure--w34 img { width: 34%; }
.figure--w45 img { width: 45%; }
.figure--w48 img { width: 48%; }
.figure--w60 img { width: 60%; }
.figure--w80 img { width: 80%; }
@media (max-width: 1024px) {
  .figure--t69 img { width: 69%; }
  .figure--t70 img { width: 70%; }
  .figure--t85 img { width: 85%; }
  .figure--t92 img { width: 92%; }
}
@media (max-width: 767px) {
  .figure--m61 img { width: 61%; }
}

/* === Component: pill-button (dark rounded buttons in the hero) === */
.pill-buttons { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.pill-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 20px; background: var(--color-ink); color: var(--color-white); font-family: var(--font-sans); font-size: 34px; font-weight: 500; line-height: 1; text-decoration: none; }
@media (max-width: 1024px) {
  .pill-button { font-size: 13px; position: relative; }
  .pill-button::after { content: ""; position: absolute; inset: -4px 0; }  /* invisible: taller tap target (45px) */
}

/* === Component: section-title (big centred headings: OUR FISH, OUR CHIPS, FRYING OIL, FIND US) === */
.section-title { text-align: center; font-family: var(--font-sans); font-weight: 600; color: var(--color-black); }
.section-title--57 { font-size: 57px; }
.section-title--55 { font-size: 55px; }
.section-title--37 { font-size: 37px; }
.section-title--display { font-family: var(--font-display); font-weight: 400; font-size: 50px; }
@media (max-width: 1024px) {
  .section-title { font-size: 20px; }
}

/* === Component: copy (uppercase Josefin body copy) === */
.copy { display: flow-root; font-family: var(--font-display); font-size: 22px; font-weight: 300; text-transform: uppercase; color: var(--color-black); }
.copy--light { font-weight: 200; }
@media (max-width: 1024px) {
  .copy { font-size: 12px; }
}

/* === Component: hours (opening-times band inside the hero) === */
.hours-title { border-top: 6px solid var(--color-rule); padding: var(--pad); text-align: center; font-family: var(--font-display); font-size: 40px; font-weight: 400; text-transform: uppercase; color: var(--color-heading-soft); }
.hours__day { text-align: center; font-family: var(--font-display); font-size: 24px; font-weight: 400; text-transform: uppercase; color: var(--color-heading-soft); }
.hours__times { display: flow-root; text-align: center; font-family: var(--font-display); font-size: 16px; font-weight: 300; text-transform: uppercase; color: var(--color-ink); }
.hours__times--tall { line-height: 31px; }
@media (max-width: 1024px) {
  .hours-title { font-size: 20px; }
  .hours__day { font-size: 18px; }
  .hours__times { font-size: 12px; }
  .hours__times--tall { line-height: 0.4em; }
}
@media (max-width: 767px) {
  .hours-title { padding-block: 11px; }
}

/* === Component: app-badges (store badges, centred, in the app promo) === */
.app-badges { display: grid; gap: var(--widget-gap); justify-items: center; }

/* === Component: site-footer (the original's 4-column block under FIND US) === */
.site-footer { background: var(--color-bg); padding: 0 var(--pad) var(--pad); }
.site-footer__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-left: 100px; }
.site-footer__col { min-width: 0; padding: var(--pad); }
.footer-heading { font-family: var(--font-sans); font-size: 24px; font-weight: 600; color: var(--color-footer-heading); margin-bottom: var(--widget-gap); }
.footer-links { display: grid; gap: var(--widget-gap); justify-items: start; }
.footer-links__link { display: inline-block; font-family: var(--font-sans); font-size: 18px; font-weight: 300; line-height: 1; color: var(--color-footer-link); text-decoration: none; }
.footer-text { display: flow-root; font-family: var(--font-sans); font-size: 16px; font-weight: 400; color: var(--color-footer-text); }
.footer-badges { display: grid; gap: var(--widget-gap); }
.footer-badges a { display: block; }
.footer-badges__img { width: 50%; }
.footer-badges__img--google { width: 49%; }
.site-footer__credit { margin: 0; padding: var(--pad) 0 0; text-align: center; font-family: var(--font-sans); font-size: 12px; color: var(--color-footer-text); }
@media (max-width: 1024px) {
  .site-footer__inner { padding-left: 35px; }
  .footer-heading { font-size: 18px; }
  .footer-links__link { font-size: 12px; position: relative; }
  .footer-links__link::after { content: ""; position: absolute; inset: -13px 0; }  /* invisible: taller tap target without moving anything */
  .footer-text { font-size: 12px; }
}
@media (max-width: 767px) {
  .site-footer__inner { display: block; }
}

/* === Component: contact-email (replaces WordPress forms; unused on this site: the original had no form) === */
.contact-email { display: grid; gap: 16px; justify-items: start; }
.contact-email__address { font-weight: 600; word-break: break-word; }
.contact-email__phone a { color: inherit; }

/* === Component: error-page (404) === */
.error-page { padding: 80px 20px; text-align: center; }
.error-page__logo { margin-bottom: 30px; }
.error-page__logo img { width: 300px; }
.error-page__title { font-family: var(--font-sans); font-size: 57px; font-weight: 600; }
.error-page__text { font-family: var(--font-display); font-size: 22px; font-weight: 300; text-transform: uppercase; }
.error-page .pill-buttons { margin-top: 30px; }
@media (max-width: 1024px) {
  .error-page__title { font-size: 20px; }
  .error-page__text { font-size: 12px; }
}

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

/* === Page: / (home) === */
/* Hero: photos, logo, buttons, opening times. Bottom rule 25px (6px <= 1024px). */
.hero { border-bottom: 25px solid var(--color-rule); }
.hero > .band__inner { min-height: 92vh; }
.hero__logo { padding-top: 89px; }
.hero__buttons-col { position: relative; }
.hero__buttons { margin-top: -78px; }  /* the first button sits over the bottom of the logo, as on the original */
@media (max-width: 1024px) {
  .hero { border-bottom-width: 6px; }
  .hero > .band__inner { min-height: 41vh; }
  .hero__logo { padding-top: 0; }
  .hero__buttons-col { padding: 0; }
  .hero__buttons { margin-top: -44px; }
}
@media (max-width: 767px) {
  .hero__buttons { margin-top: 0; }
}

/* About: OUR FISH / OUR CHIPS / FRYING OIL. Spacers of the original become padding/margins. */
.about > .band__inner { min-height: 100vh; padding-top: 80px; }   /* 10 + 50px spacer + 20 */
.about__spacer { height: 50px; }
.about__chips-title { padding: var(--pad); }
.flow > .about__chips-title { margin-bottom: 0; }  /* a row on the original: no widget gap after it */
@media (max-width: 1024px) {
  .about > .band__inner { min-height: 86vh; }
  .about__chips-col { padding: 0; }
  .about__chips-photo { padding: 63px 5px 0; }
  .about__staff-photo { padding-top: 62px; }
}
@media (max-width: 767px) {
  .about__chips-title { padding-block: 11px; }
}

/* App promo (desktop only content; on tablet/phone only the grey spacer remains, as on the original) */
.app-promo > .band__inner { min-height: 83vh; padding-top: 154px; }  /* 10 + 124px spacer + 20 */
.app-promo__text { padding-top: 259px; }                              /* 10 + 229px spacer + 20 */
.app-promo__title { font-family: var(--font-display); font-size: 63px; font-weight: 600; line-height: 77px; letter-spacing: -1.4px; word-spacing: 1px; text-transform: uppercase; color: var(--color-black); }
.app-promo__copy { display: flow-root; text-align: justify; font-family: var(--font-display); font-size: 35px; font-weight: 200; text-transform: uppercase; }
@media (max-width: 1024px) {
  .app-promo > .band__inner { min-height: 6vh; padding-top: 40px; }   /* 10 + 10px spacer + 20 */
}

/* Find us: heading + static map image (both hidden on phones, as the original) */
.find-us > .band__inner { padding: 107px var(--pad) var(--widget-gap); }  /* 10 + 77px spacer + 20 */
@media (max-width: 1024px) {
  .find-us > .band__inner { padding-top: 40px; }
}
@media (max-width: 767px) {
  .find-us > .band__inner { padding-bottom: 0; }
}

/* ============ 7. Utilities ============ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-title { display: none; }  /* theme H1 hidden on the original (decision d5) */
@media (min-width: 1025px) { .hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .hide-tablet { display: none !important; } }
@media (max-width: 767px) { .hide-mobile { display: none !important; } }

/* === reveal (GSAP; unused here: the original had no entrance animations) === */
.reveal-ready [data-reveal] { visibility: hidden; }

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-reveal] { visibility: visible !important; }
}