/*
 * site.css: the only stylesheet for chipsni.co.uk.
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing, breakpoints (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 (Elementor defaults on the original; media queries can't use custom properties):
 *   mobile  <= 767px    tablet 768px-1024px    desktop >= 1025px
 *
 * Values come from the original Elementor CSS (post-8.css kit, post-14.css home page) and
 * computed styles measured on the live site at 375/768/1024/1440.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours */
  --color-text: #000000;          /* headings and body copy */
  --color-bg: #ffffff;
  --color-grey: #a1a1a1;          /* buttons, gradients (Elementor accent) */
  --color-grey-light: #dedede;    /* "Download app" header button */
  --color-button-text: #ffffff;
  --color-header-bg: rgb(255 255 255 / 0.92);

  /* Typography */
  --font-display: "Odor Mean Chey", "Noto Sans TC", Georgia, serif;   /* section headings */
  --font-body: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --text-display: 64px;           /* big headings (CHIPS, About us, FIND US...) at every width, as original */
  --text-display-md: 48px;        /* "What we do", feature titles */
  --text-lead: 24px;              /* hero/about/feature copy (features drop to 16px at <=1024) */
  --text-small-heading: 24px;     /* contact column headings */
  --text-base: 16px;

  /* Layout */
  --container: 1280px;            /* Elementor boxed width */
  --container-narrow: 1063px;     /* "What we do" heading row */
  --gutter: 30px;                 /* section side padding */
  --radius-pill: 21px;
  --radius-small: 3px;
  --radius-map: 75px;

  /* Header: logo width follows the original's percentage column widths so the header height
     (and the hero's top offset) can be computed. Logo ratio 1024x716. */
  --logo-w: calc((0.21847 * min(var(--container), 100vw - 2 * var(--gutter)) - 20px) * 0.42998);
  --header-h: calc(var(--logo-w) * 0.69922 + 20px);
  --header-top: 25px;

  /* Motion */
  --duration: 300ms;
  --ease: ease;
}
@media (max-width: 1024px) {
  :root { --logo-w: calc((0.33 * (100vw - 2 * var(--gutter)) - 20px) * 0.42998); }
}
@media (max-width: 767px) {
  :root {
    --logo-w: calc((100vw - 2 * var(--gutter) - 20px) * 0.42998);
    /* stacked: logo row + empty (former menu) row + button row */
    --header-h: calc(var(--logo-w) * 0.69922 + 100px);
  }
}

/* ============ 2. Fonts ============ */
/* Self-hosted from Google Fonts (SIL Open Font Licence). Odor Mean Chey has one weight (400; the
   original asked for 500 and the browser used 400). Noto Sans TC is a variable font split by
   Google into unicode-range files; only the files holding the Latin characters are kept. */
@font-face { font-family: "Odor Mean Chey"; src: url("/assets/fonts/odor-mean-chey-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: "Noto Sans TC"; src: url("/assets/fonts/noto-sans-tc-var-123.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+20-22, U+27-2a, U+2c-3b, U+3f, U+41-5d, U+61-7b, U+7d, U+ab, U+ae, U+b2-b3, U+bb, U+bf-c2, U+c8-ca, U+cc-ce, U+d2-d4, U+d6, U+d9-db, U+e0-ef, U+f1-f4, U+f6, U+f9-fd, U+2013-2014, U+2039-203a, U+2122; }
@font-face { font-family: "Noto Sans TC"; src: url("/assets/fonts/noto-sans-tc-var-119.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+23-25, U+3d, U+2026; }
@font-face { font-family: "Noto Sans TC"; src: url("/assets/fonts/noto-sans-tc-var-120.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+26, U+40, U+5f; }
@font-face { font-family: "Noto Sans TC"; src: url("/assets/fonts/noto-sans-tc-var-122.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+2b, U+7c, U+a0, U+a9; }

/* ============ 3. Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { position: relative; margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: normal; color: var(--color-text); background: var(--color-bg); overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1; }
p { margin: 0; }
a { color: inherit; transition: color var(--duration) var(--ease), background-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; }
.section { padding-inline: var(--gutter); }

/* ============ 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: site-header ===
   Translucent white bar laid over the top of the first section (the hero on the original):
   logo left, "Download app" button right. The original had no navigation menu (the Elementor Pro
   menu widget rendered empty), so there is none here. */
.site-header { position: absolute; top: var(--header-top); left: var(--gutter); right: var(--gutter); z-index: 10; background: var(--color-header-bg); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--container); margin-inline: auto; }
.site-header__logo { display: block; padding: 10px; }
.site-header__logo img { width: var(--logo-w); }
.site-header__actions { padding: 10px; margin-right: 1.205%; } /* original column widths summed to 98.795% */
@media (max-width: 1024px) {
  .site-header__inner { max-width: none; }
  .site-header__actions { margin-right: 1%; } /* 3 x 33% columns */
}
@media (max-width: 767px) {
  .site-header__inner { flex-direction: column; align-items: stretch; }
  .site-header__actions { margin-top: 20px; margin-right: 0; text-align: right; }
}
/* Pages need this much space at the top so the header doesn't cover content. */
.header-offset { padding-top: calc(var(--header-top) + var(--header-h)); }

/* === Component: button ===
   Grey pill with a 16px icon after the text (Elementor buttons on the original; no hover change). */
.button { display: inline-flex; align-items: center; gap: 5px; padding: 12px 24px; border-radius: var(--radius-pill); background: var(--color-grey); color: var(--color-button-text); font-family: var(--font-body); font-size: 16px; font-weight: 200; line-height: 1; text-decoration: none; white-space: nowrap; }
.button__icon { width: 16px; height: 16px; flex: none; fill: currentColor; }
.button--gap-lg { gap: 12px; }
.button--light { background: var(--color-grey-light); color: var(--color-text); font-weight: 500; border-radius: var(--radius-small); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; }
.button-row > * + * { margin-left: 30px; } /* second button keeps its 30px indent when it wraps, as original */

/* === Component: display-heading ===
   Odor Mean Chey headings. Text is kept as written on the original; the case comes from CSS
   exactly as Elementor did it (--upper / --capitalize). */
.display-heading { font-family: var(--font-display); font-size: var(--text-display); font-weight: 500; line-height: 1; color: var(--color-text); }
.display-heading--md { font-size: var(--text-display-md); font-weight: 400; }
.display-heading--sm { font-size: var(--text-small-heading); }
.display-heading--upper { text-transform: uppercase; }
.display-heading--capitalize { text-transform: capitalize; }
.display-heading--center { text-align: center; }

/* === Component: lead-text === */
.lead-text { font-size: var(--text-lead); font-weight: 200; }
.lead-text { display: flow-root; } /* keep paragraph margins inside, as Elementor widgets did */
.lead-text p { margin-block: 1em; }

/* === Component: hero ===
   Light grey gradient from the right with the faded fish & chips picture (Herobackground.png,
   33% opacity). The header sits over its top. */
.hero { position: relative; min-height: 790px; padding: calc(var(--header-top) + var(--header-h)) var(--gutter) 25px; background-image: linear-gradient(280deg, #a1a1a154 0%, #ffffff 30%); }
.hero::before { content: ""; position: absolute; inset: 0; background: url("/wp-content/uploads/2022/07/Herobackground.png") 67em 124px / auto no-repeat; opacity: 0.33; pointer-events: none; }
.hero__inner { position: relative; max-width: var(--container); margin-inline: auto; }
.hero__content { width: 55.311%; padding-top: 164px; }
.hero__title { margin-bottom: 5px; }
.hero__text { margin-bottom: 12px; }
@media (max-width: 1024px) {
  .hero::before { background-position: 10.1em 273px; background-size: contain; }
  .hero__inner { max-width: none; }
  .hero__content { width: 98%; }
}
@media (max-width: 767px) {
  .hero::before { background-position: 0 0; }
  .hero__content { width: 100%; }
}

/* === Component: media-split ===
   Image column + vertically centred text column (About us). */
.media-split { margin-block: 100px; }
.media-split__inner { display: flex; max-width: var(--container); margin-inline: auto; }
.media-split__media { width: 49.686%; padding: 5px; }
.media-split__body { width: 50.314%; padding: 5px; align-self: center; }
.media-split__title { margin-top: 25px; margin-bottom: 50px; }
.media-split__text { margin-bottom: 40px; }
@media (max-width: 1024px) {
  .media-split__media img { width: 85%; }
}
@media (max-width: 767px) {
  .media-split__inner { flex-direction: column; }
  .media-split__media, .media-split__body { width: 100%; }
}

/* === Component: rule-heading ===
   Heading on a white box sitting on a full-width dashed line (Group-10.png, 1440x1, repeat-x). */
.rule-heading { background: url("/wp-content/uploads/2022/07/Group-10.png") 0 66px repeat-x; }
.rule-heading__inner { max-width: var(--container-narrow); margin-inline: auto; padding: 10px; }
.rule-heading__box { width: 30.705%; padding: 10px; background: var(--color-bg); }
@media (max-width: 1024px) {
  .rule-heading { background-position: -190px 91px; }
}
@media (max-width: 767px) {
  .rule-heading { background-position: 0 0; }
  .rule-heading__box { width: 100%; }
}

/* === Component: features ===
   Three centred columns: title, text, icon. */
.features { margin-block: 50px; }
.features__inner { display: flex; max-width: var(--container); margin-inline: auto; }
.feature { width: 33.333%; padding: 10px; text-align: center; }
.feature__title { font-family: var(--font-body); font-size: var(--text-display-md); font-weight: 400; line-height: 1; text-transform: capitalize; margin-bottom: 20px; }
.feature__text { font-size: var(--text-lead); font-weight: 300; margin-bottom: 25px; }
.feature__text { display: flow-root; }
.feature__text p { margin-block: 1em; }
.feature__icon { margin-inline: auto; }
@media (max-width: 1024px) {
  .feature__text { font-size: 16px; }
}
@media (max-width: 767px) {
  .features__inner { flex-direction: column; }
  .feature { width: 100%; }
}

/* === Component: map-band ===
   "Find us": grey gradient overlay (50%) with a rounded keyless Google map. */
.map-band { position: relative; padding: 150px var(--gutter); }
.map-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(290deg, var(--color-grey) 39%, #ffffff 84%); opacity: 0.5; pointer-events: none; }
.map-band__inner { position: relative; max-width: var(--container); margin-inline: auto; padding: 10px; }
.map-band__title { margin-bottom: 70px; }
.map-frame { border-radius: var(--radius-map); overflow: hidden; }
.map { display: block; width: 100%; height: 510px; border: 0; }

/* === Component: app-band ===
   "Download our app": diagonal grey gradient, centred heading, button and store badges. */
.app-band { display: flex; align-items: center; min-height: 600px; padding: 100px var(--gutter); background-image: linear-gradient(230deg, var(--color-grey) 0%, #ffffff 93%); }
.app-band__inner { width: 100%; padding: 10px; text-align: center; }
.app-band__title { margin-bottom: 25px; }
.app-band__badges { margin: 25px auto 0; }
@media (max-width: 767px) {
  /* "DOWNLOAD" at 64px is wider than the column on phones; the original overflowed the page by
     6px. Let the centred heading use the section's side padding instead (looks the same). */
  .app-band__title { margin-inline: -30px; }
}

/* === Component: contact-info ===
   "Get in touch": big heading, then hours / phone / address in the right-hand third
   (the left two-thirds held an Elementor Pro form that never rendered; kept empty as visitors saw it). */
.contact-info { margin-block: 70px; }
.contact-info__inner { max-width: var(--container); margin-inline: auto; padding: 10px; }
.contact-info__title { margin-bottom: 28px; }
.contact-info__grid { display: grid; grid-template-columns: 66.269% 33.693%; }
.contact-info__details { grid-column: 2; padding: 42px 10px 10px; }
.contact-info__item + .contact-info__item { margin-top: 50px; }
.contact-info__text { font-size: 16px; font-weight: 400; line-height: 1.4; }
.contact-info__text { display: flow-root; }
.contact-info__text p { margin-block: 1em; }
.contact-info__text a { color: inherit; text-decoration: none; padding-block: 11px; } /* taller tap area, no layout change (inline) */
.contact-info__text a:hover { text-decoration: underline; }
@media (max-width: 1024px) {
  .contact-info { padding-inline: var(--gutter); }
}
@media (max-width: 767px) {
  .contact-info__grid { grid-template-columns: 1fr; }
  .contact-info__details { grid-column: 1; padding-top: 62px; }
}

/* === Component: site-footer ===
   The original's theme footer was empty; this small bar only carries the credit. */
.site-footer { padding: 16px var(--gutter); font-size: 14px; font-weight: 300; text-align: center; }
.site-footer p { margin: 0; }
.site-footer a { color: inherit; }

/* === Component: page-simple (404) ===
   Used with .hero for the gradient background: heading, short text, buttons. */
.page-simple { min-height: 600px; }
.page-simple__inner { position: relative; max-width: var(--container); margin-inline: auto; padding-top: 100px; }
.page-simple__text { margin-bottom: 12px; }
.page-simple .button-row { gap: 12px 30px; }
.page-simple .button-row > * + * { margin-left: 0; }

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

/* ============ 7. Utilities ============ */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* inline SVG symbols in the header partial */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-title-hidden { display: none; } /* original hid the WordPress page title ("Home Page") with display:none */

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