/*
 * site.css: the only stylesheet for sushibistro.co.uk.
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing (custom properties)
 *   2. Fonts         @font-face for self-hosted fonts (DM Sans, Roboto)
 *   3. Base          reset and element defaults
 *   4. Layout        page variants (body classes), sections, containers
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         rare page-specific rules: "=== Page: <path> ==="
 *   7. Utilities     a handful of helpers
 *
 * Breakpoints (Elementor's, from the original site; media queries can't use custom properties):
 *   mobile  ≤ 767px    tablet 768px–1024px    desktop ≥ 1025px
 *
 * Page variants (class on <body>; they only change the header frame and hero):
 *   page-home    home page: header frame 20px all round, full-height hero
 *   page-inner   delivery fees, gallery: header frame 10px top/bottom, short hero
 *   page-legal   privacy, cookie policy: header frame 10px all round, no hero
 *
 * Editing: change tokens to restyle the site; add new components as new blocks;
 * add modifier classes (.button--lg) instead of changing a component for one page.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (from the original's computed styles) */
  --color-ink: #111111;            /* headings, buttons, header/footer background */
  --color-text: #333333;           /* body copy */
  --color-text-muted: #7a7a7a;     /* Elementor kit text colour (legal pages, small table) */
  --color-icon-text: #54595f;      /* icon-list labels (Facebook / Instagram / Whatsapp) */
  --color-bg: #ffffff;
  --color-dropdown-active: #222222;/* mobile menu active/hover row */
  --color-divider: rgb(0 0 0 / 0.23);
  --color-footer-rule: #9b9b9b;
  --color-nav-dim: rgb(255 255 255 / 0.53);   /* header nav hover/active */
  --color-footer-dim: rgb(255 255 255 / 0.49);/* footer nav hover/active */
  --color-legal-dim: #b6b6b6;      /* footer Privacy/Cookie links hover/active */
  --color-small-table: rgb(24 50 71);
  --color-phone: #343639;          /* phone mockup frame */
  --color-phone-detail: #5d5e61;   /* phone camera / speaker / home button */

  /* Typography */
  --font-body: "DM Sans", sans-serif;
  --font-legal: "Roboto", sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-eyebrow: 1.6rem;          /* "About Us", "Tasty Sushi", "Order Sushi" */
  --text-title: 3.2rem;            /* big uppercase titles (4rem at ≤1024px, as the original) */
  --text-lead: 1.3rem;
  --text-card-title: 1.4rem;
  --text-card: 1.2rem;
  --text-button: 1.2rem;
  --text-nav: 1.1rem;

  /* Spacing and shape */
  --space-section: 150px;          /* 50px at ≤1024px, 30px at ≤767px */
  --space-gutter: 50px;
  --spacer: 50px;                  /* Elementor spacer widgets */
  --container: 1140px;
  --divider-width: 2px;

  /* Header frame (set per page variant, see 4. Layout) */
  --header-pad-y: 10px;
  --header-pad-x: 0px;

  /* Motion (Elementor defaults) */
  --duration: 300ms;
  --ease: ease;
}

/* ============ 2. Fonts ============ */
/* DM Sans (variable 300–600, latin) and Roboto (variable 400–700, latin), self-hosted from Google Fonts (OFL). */
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/dmsans-var.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/dmsans-italic-500.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; 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-optical-sizing: none; font-family: var(--font-body); font-size: 1rem; 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, h4, h5, h6 { margin: 0; line-height: 1; }
p { margin: 0; }
a { color: inherit; text-decoration: none; transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease); }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
table { border-collapse: collapse; }

/* ============ 4. Layout ============ */
body.page-home { --header-pad-y: 20px; --header-pad-x: 20px; }
body.page-inner { --header-pad-y: 10px; --header-pad-x: 0px; }
body.page-legal { --header-pad-y: 10px; --header-pad-x: 10px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding: 10px; }
.container--wide { max-width: 1400px; }
.container--narrow { max-width: 1024px; }
.container--slim { max-width: 900px; }

.section { padding: var(--space-section) var(--space-gutter); }
.spacer { height: var(--spacer); }
.spacer--20 { height: 20px; }
.spacer--60 { height: 60px; }
.spacer--90 { height: 90px; }
.spacer--100 { height: 100px; }

/* Two columns side by side on desktop, stacked at ≤1024px (About / Our Menu) */
.split { display: flex; }
.container.split { padding: 0; }
.split__col { flex: 1 1 50%; min-width: 0; padding: 10px; }
.split__col:first-child { margin-right: 10px; }
.split__col:last-child { margin-left: 10px; }

@media (max-width: 1024px) {
  :root { --space-section: 50px; --text-title: 4rem; }
  .split { flex-direction: column; }
  .split__col:first-child { margin: 0 0 60px; }
  .split__col:last-child { margin: 0; }
}
@media (max-width: 767px) {
  :root { --space-section: 30px; --space-gutter: 30px; }
}

/* ============ 5. Components ============ */

/* === Component: skip-link === */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 0.5rem 1rem; background: var(--color-bg); color: var(--color-ink); }
.skip-link:focus { left: 1rem; }

/* === Component: icon-sprite (SVG symbols used by header/footer/pages) === */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* === Component: site-header ===
 * Black sticky bar on every page. The frame around the bar (--header-pad-*) differs per page
 * variant, as on the original. The hero below slides 60px under it (see hero).
 */
.site-header { position: sticky; top: 0; z-index: 999; background: var(--color-ink); padding: var(--header-pad-y) var(--header-pad-x); }
.site-header__bar { display: flex; align-items: center; padding: 20px 50px; }
.site-header__social { flex: 0 0 7.966%; }
.site-header__menu { flex: 0 0 88.698%; display: flex; justify-content: center; }
.site-header__bar::after { content: ""; flex: 0 0 3%; }

/* === Component: social-icons (white brand icons, 26px) === */
.social-icons { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.social-icons__link { display: block; width: 26px; height: 26px; color: #ffffff; }
.social-icons__link svg { display: block; width: 26px; height: 26px; }
.social-icons__link:hover { opacity: 0.9; }

/* === Component: nav (header menu; burger + full-width dropdown at ≤1024px) === */
.nav-toggle { display: none; align-items: center; justify-content: center; margin-left: auto; padding: 5.5px; border: 0; border-radius: 3px; background: #ffffff; color: #000000; cursor: pointer; }
.nav-toggle svg { display: block; width: 22px; height: 22px; }
.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; }
.site-nav__list { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.site-nav__list li { margin: 0 20px; }
.site-nav a { display: block; font-size: var(--text-nav); font-weight: 400; line-height: 20px; color: #ffffff; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { color: var(--color-nav-dim); }

@media (max-width: 1024px) {
  .site-header__social { flex-basis: 35%; }
  .site-header__menu { flex-basis: 65%; justify-content: flex-end; }
  .site-header__bar::after { content: none; }
  .nav-toggle { display: inline-flex; }
  /* Dropdown: full viewport width, slides open (grid 0fr → 1fr), 10px below the burger */
  .site-nav { position: absolute; left: 0; right: 0; top: calc(var(--header-pad-y) + 63px); display: grid; grid-template-rows: 0fr; align-items: stretch; background: var(--color-ink); transition: grid-template-rows var(--duration) var(--ease), visibility 0s linear var(--duration); visibility: hidden; }
  .site-nav.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--duration) var(--ease); }
  .site-nav__list { display: block; min-height: 0; overflow: hidden; }
  .site-nav__list li { margin: 0; }
  .site-nav a { padding: 10px 20px; }
  .site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { color: #ffffff; background: var(--color-dropdown-active); }
}
@media (max-width: 767px) {
  .site-header__social { flex-basis: 50%; margin-bottom: 20px; }
  .site-header__menu { flex-basis: 50%; }
  .site-nav { top: calc(var(--header-pad-y) + 90px); }
  .site-nav a { padding: 21px 20px; }
}

/* === Component: site-footer ===
 * Black footer: menu + contact (WhatsApp/phone/email), dotted rule, legal links, copyright + credit.
 * As on the original: the footer menu is hidden on phones, the contact column is hidden on tablets.
 */
.site-footer { background: var(--color-ink); color: #ffffff; padding: 100px 0; }
.site-footer__inner { max-width: 1024px; margin-inline: auto; padding: 10px; }
.site-footer__top { display: flex; align-items: center; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px dotted var(--color-footer-rule); }
.site-footer__top > .footer-nav { flex: 0 0 73.106%; padding: 10px; }
.site-footer__contact { flex: 0 0 26.745%; padding: 10px; text-align: end; font-size: 1.2rem; font-weight: 400; line-height: 1; color: #ffffff; }
.site-footer__contact a { color: inherit; }
.site-footer__bar { display: flex; align-items: center; }
.site-footer__bar p { flex: 1 1 50%; padding: 10px; margin: 0; font-size: 1.2rem; letter-spacing: 1px; color: #ffffff; }
.site-footer__copyright { font-weight: 300; line-height: 1; }
.site-footer__credit { text-align: end; font-weight: 400; line-height: 1.3; }
.site-footer__credit a { color: #ffffff; }

.footer-nav__list { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.footer-nav__list li { margin: 0 19px; }
.footer-nav a { display: block; padding: 13px 0; font-size: 1.1rem; font-weight: 500; line-height: 20px; color: #ffffff; }
.footer-nav a:hover, .footer-nav a:focus-visible, .footer-nav a[aria-current="page"] { color: var(--color-footer-dim); }

.legal-nav { margin-bottom: 20px; }
.legal-nav__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.legal-nav a { display: block; padding: 13px 20px; font-family: var(--font-legal); font-size: 1rem; font-weight: 400; line-height: 20px; color: #ffffff; }
.legal-nav a:hover, .legal-nav a:focus-visible, .legal-nav a[aria-current="page"] { color: var(--color-legal-dim); }

@media (max-width: 1024px) {
  .site-footer { padding: 30px 20px; }
  .site-footer__top { display: block; }
  .site-footer__contact { display: none; }
  .footer-nav__list li { margin: 0 22px; }
  .footer-nav a { font-size: 1.3rem; }
}
@media (max-width: 767px) {
  .site-footer { padding: 25px 20px; }
  .site-footer__top > .footer-nav { display: none; }
  .site-footer__contact { display: block; text-align: center; font-size: 20px; }
  .site-footer__bar { display: block; }
  .site-footer__bar p { text-align: center; }
  .site-footer__copyright { line-height: 19px; }
}

/* === Component: hero (background photo + centred logo; slides 60px under the sticky header) === */
.hero { position: relative; margin-top: -60px; display: flex; align-items: center; justify-content: center; min-height: 600px; background: var(--hero-image) center / cover no-repeat; }
.hero--full { min-height: 100vh; }
.hero--short { min-height: 500px; }
.hero__inner { width: 100%; max-width: var(--container); padding: 10px; display: flex; flex-direction: column; align-items: center; }
.hero__logo { display: block; }
.hero__logo img { width: 500px; max-width: 100%; }
.hero--full .hero__logo { margin-bottom: 50px; }
@media (max-width: 767px) {
  .hero__logo img { width: 259px; }
}

/* === Component: section-title (eyebrow heading between two rules: "About Us", "Order Sushi") === */
.section-title { display: flex; align-items: center; }
.section-title::before, .section-title::after { content: ""; flex: 1; border-top: var(--divider-width) solid var(--color-divider); }
.section-title__text { margin: 0 50px; font-size: var(--text-eyebrow); font-weight: 300; line-height: 1; color: var(--color-ink); text-align: center; }
.section-title--sm .section-title__text { font-size: 1.3rem; }
@media (max-width: 767px) {
  .section-title__text { margin: 0 20px; }
}

/* === Component: page-title (big uppercase centred title) === */
.page-title { font-size: var(--text-title); font-weight: 600; line-height: 1; text-transform: uppercase; color: var(--color-ink); text-align: center; }

/* === Component: divider (2px rule; --dashed between menu cards) === */
.divider { border: 0; border-top: var(--divider-width) solid var(--color-divider); margin: 0; }
.divider--dashed { border-top-style: dashed; margin: 30px 0; }

/* === Component: lead-text (centred light paragraphs: intro, opening hours, allergen note) === */
.lead-text { font-size: var(--text-lead); font-weight: 300; line-height: 1.7; color: var(--color-text); text-align: center; }
.lead-text--note { font-size: 1.2rem; font-weight: 500; font-style: italic; }
@media (max-width: 767px) {
  .lead-text { text-align: start; font-size: 1.1rem; }
}

/* === Component: icon-list (inline icon + label links: Facebook / Instagram / Whatsapp) === */
.icon-list { line-height: 1.3; display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.icon-list li { margin: 0 8px; }
.icon-list a { display: inline-flex; align-items: center; font-size: 1.5rem; font-weight: 400; line-height: 1.3; color: var(--color-icon-text); }
.icon-list svg { width: 23px; height: 23px; color: #000000; }
.icon-list__text { padding-left: 5px; }

/* === Component: button (black 2px outline, square; fills black on hover) === */
.button { display: inline-block; padding: 20px 40px; border: 2px solid var(--color-ink); border-radius: 0; background: #ffffff; color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-button); font-weight: 400; line-height: 1; text-align: center; cursor: pointer; transition: all var(--duration) var(--ease); }
.button:hover, .button:focus-visible { background: var(--color-ink); color: #ffffff; }
.button--lg { font-size: 1.3rem; }

/* Button between two rules ("Order Online", "View Full Menu") */
.button-rule { display: flex; align-items: center; }
.button-rule::before, .button-rule::after { content: ""; flex: 1; border-top: var(--divider-width) solid var(--color-divider); }
.button-rule .button { margin: 0 50px; }
@media (max-width: 767px) {
  .button-rule .button { margin: 0 20px; }
}

/* Row of buttons ("Order Online" + "Download App"); full width stacked on phones */
.button-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 15px; }
@media (max-width: 767px) {
  .button-row { flex-direction: column; align-items: center; gap: 10px; }
}

/* === Component: menu-cards (S1–S4 sets: two columns with dashed rules) === */
.menu-cards { display: flex; }
.menu-cards__col { flex: 1 1 50%; min-width: 0; }
.menu-cards__col:first-child { margin-right: 40px; }
.menu-cards__col:last-child { margin-left: 40px; }
.menu-card__title { margin-bottom: 15px; font-size: var(--text-card-title); font-weight: 600; line-height: 1; color: var(--color-ink); }
.menu-card__title--sm { font-size: 1.3rem; }
.menu-card__text { font-size: var(--text-card); font-weight: 400; line-height: normal; color: var(--color-text); }
.menu-card__text--sm { font-size: 1.1rem; }
.menu-cards + .button-rule { margin: 50px 0; }
@media (max-width: 767px) {
  .menu-cards { flex-direction: column; }
  .menu-cards__col:first-child { margin: 0 0 30px; }
  .menu-cards__col:last-child { margin: 0; }
}

/* === Component: image-band (400px photo band; fixed background on desktop) === */
.image-band { min-height: 400px; background: var(--band-image) center / cover no-repeat; }
@media (min-width: 1025px) {
  .image-band { background-attachment: fixed; }
}

/* === Component: order-app (phone mockup + buttons; sits 20px left of centre on desktop, as the original) === */
@media (min-width: 1025px) {
  .order-app { margin-right: 40px; }
}

/* === Component: phone-mockup (app screenshot inside a phone frame; replaces Elementor Extras "devices") === */
.phone-mockup { position: relative; width: 277px; height: 574px; margin-inline: auto; }
.phone-mockup__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.phone-mockup__screen { position: absolute; left: 16px; top: 67px; width: 246px; height: 432px; overflow: hidden; display: flex; align-items: flex-end; background: #ffffff; }
.phone-mockup__screen img { width: 100%; }

/* === Component: small-table (home delivery summary, pasted-email look of the original) === */
.small-table { margin: 0 auto; font-family: var(--font-system); font-size: 14px; line-height: normal; color: var(--color-small-table); }
.small-table th { padding: 8px 8px 11px; font-weight: 700; text-align: center; }
.small-table td { padding: 7px 8px; text-align: center; }

/* === Component: fee-tables (Delivery Fees: area heading + Postcode / Minimum Order / Delivery Fee)
 * The original used browser default heading/table styles inside a light DM Sans text block; kept. */
.fee-tables { display: flow-root; font-size: var(--text-lead); font-weight: 300; line-height: 1.7em; color: var(--color-text); }
.fee-tables h2 { margin: 0.83em 0; font-size: 1.5em; font-weight: 700; line-height: inherit; }
.fee-tables p { margin: 1em 0; }
.fee-tables table { border-collapse: separate; border-spacing: 2px; }
.fee-tables th { padding: 1px; font-weight: 700; text-align: center; }
.fee-tables td { padding: 1px; text-align: start; }
@media (max-width: 767px) {
  .fee-tables { font-size: 1.1rem; }
}

/* === Component: gallery (square grid 3/2/1 columns, 10px gap; GLightbox opens a.glightbox) === */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gallery__item { position: relative; display: block; overflow: hidden; aspect-ratio: 1; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0); transition: background-color 800ms; }
.gallery__item:hover::after, .gallery__item:focus-visible::after { background: rgb(0 0 0 / 0.5); }
@media (max-width: 1023px) { .gallery { grid-template-columns: repeat(2, 1fr); } } /* original stays 3 columns at 1024px */
@media (max-width: 767px) { .gallery { grid-template-columns: 1fr; } }

/* GLightbox to match the Elementor lightbox (dark full-screen) */
.glightbox-clean .goverlay { background: rgb(0 0 0 / 0.8); }
.glightbox-clean .gslide-title { font-family: var(--font-body); }

/* === Component: map (keyless Google Map, 400px, 20px white gap before the footer) === */
.map-block { padding-bottom: 20px; }
.map { display: block; width: 100%; height: 400px; border: 0; }
.map-block .small-table { margin-bottom: 4px; }

/* === Component: legal (Privacy / Cookie policy text: Roboto, Elementor kit defaults) === */
.legal-head { margin: 30px 0; }
.legal-head--cookie { margin: 20px 0; }
.legal-title { font-family: var(--font-legal); font-size: 3rem; font-weight: 600; line-height: 1; color: #000000; text-align: center; }
.legal { font-family: var(--font-legal); font-size: 1rem; line-height: normal; color: var(--color-text-muted); overflow-wrap: break-word; }
/* The original used browser default spacing for this text: restore it under the site reset */
.legal :where(p, h3, h5, ol, ul) { margin: revert; }
.legal :where(h3, h5) { font-size: revert; line-height: normal; font-weight: 700; }
.legal a { color: #0000ee; }
.legal--cookie { color: #000000; }
/* Cookie policy: CookieYes fills .cky-audit-table-element (tables) and handles .cky-banner-element
 * ("Cookie Settings") at run time, styling the tables itself. Rules below are the page's own custom CSS. */
.legal--cookie h5 { font-size: 1.4rem; }
.legal--cookie h5.legal__h5-gap { margin-bottom: 20px; }
.legal--cookie th, .legal--cookie td { font-family: var(--font-legal) !important; font-size: 1rem !important; }
.legal .cky-banner-element { display: inline-block; font-family: var(--font-legal) !important; font-size: 1rem !important; color: inherit; border: 1px solid rgba(0, 0, 0, 0.4); padding: 0.8rem; background-color: rgba(0, 0, 0, 0.05); margin: 0.6rem; cursor: pointer; }
.legal--cookie a.cky-banner-element { color: #000000; }

/* === Component: badge (Restaurant Guru provider embed; its own CSS comes from awards.infcdn.net) === */
.badge { display: flex; justify-content: center; }

/* === Component: contact-email (not used: this site has no forms; kept for future use) === */
.contact-email { display: grid; gap: 1rem; justify-items: center; text-align: center; }
.contact-email__address { font-weight: 600; word-break: break-word; }

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

/* === Page: /delivery-fees/ === (the original's content column gains a 60px bottom margin at ≤1024px) */
@media (max-width: 1024px) {
  .fee-tables { margin-bottom: 60px; }
}

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