/*
 * site.css: the only stylesheet for balmoralchippy.com.
 *
 * 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        sections, container, columns
 *   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-13.css home page, post-7.css kit) and
 * computed styles measured on the live site at 375/768/1024/1440
 * (design-system/orig-measure.txt, design-system/orig-probe.txt).
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours */
  --color-text: #1e1e1e;          /* headings, body copy, dark footer background */
  --color-bg: #ffffff;
  --color-red: #e6312a;           /* header bottom line, first hero divider */
  --color-red-box: #e10000;       /* "Our Menu" double border */
  --color-nav-active: #a14b4b;    /* nav hover / active (scroll-spy) */
  --color-button: #2c2829;        /* header + hero buttons */
  --color-button-dark: #1e1e1e;   /* "View full menu" button */
  --color-dropdown-text: #33373d; /* mobile/tablet menu items and toggle */
  --color-dropdown-hover: #3f444b;
  --color-footer-bg: #1e1e1e;
  --color-footer-text: #ffffff;

  /* Typography (all Google Fonts, self-hosted) */
  --font-display: "Fjalla One", "Arial Narrow", sans-serif;   /* section headings, nav */
  --font-body: "PT Sans", Arial, sans-serif;                  /* body copy, buttons */
  --font-menu: "Shippori Antique", Arial, sans-serif;         /* menu category names */
  --font-footer: "Poppins", Arial, sans-serif;                /* footer */

  /* Layout */
  --container: 1280px;            /* Elementor boxed width */
  --gutter: 30px;                 /* section side padding */
  --col-pad: 10px;                /* Elementor column padding */
  --section-gap: 120px;           /* vertical margin between content sections */
  --radius: 3px;
  --shadow-button: 0 0 10px 0 rgb(0 0 0 / 0.5);

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

/* ============ 2. Fonts ============ */
/* Self-hosted from Google Fonts (SIL Open Font Licence), latin subset only.
   Fjalla One and Shippori Antique have one weight (400); the nav asks for 600, so browsers
   synthesise bold exactly as on the original. PT Sans 500 falls back to 400 as on the original. */
@font-face { font-family: "Fjalla One"; src: url("/assets/fonts/fjalla-one-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: "PT Sans"; src: url("/assets/fonts/pt-sans-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: "Shippori Antique"; src: url("/assets/fonts/shippori-antique-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: "Poppins"; src: url("/assets/fonts/poppins-200-latin.woff2") format("woff2"); font-weight: 200; 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: "Poppins"; src: url("/assets/fonts/poppins-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: "Poppins"; src: url("/assets/fonts/poppins-700-latin.woff2") format("woff2"); font-weight: 700; 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; }

/* ============ 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-text); background: var(--color-bg); overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; transition: color var(--duration) var(--ease); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-nav-active); outline-offset: 2px; }

/* ============ 4. Layout ============ */
/* A content section: Elementor "boxed" section with 30px side padding and 10px column padding. */
.section { padding-inline: var(--gutter); margin-block: var(--section-gap); }
.section__inner { max-width: var(--container); margin-inline: auto; }
.col { padding: var(--col-pad); min-width: 0; }
.row { display: flex; flex-wrap: wrap; }
.row > .col { flex: 1 1 0; }
@media (max-width: 767px) {
  .row { flex-direction: column; }
  .row > .col { flex: none; width: 100%; }
}

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

/* === Component: skip-link === */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 8px 16px; background: var(--color-bg); color: var(--color-text); }
.skip-link:focus { left: 16px; }

/* === Component: button ===
   .button            dark box, white uppercase PT Sans, used in header and hero (Elementor Extras button group)
   .button--shadow    soft drop shadow (header + hero)
   .button--large     29px "View full menu" button (Elementor button, no shadow) */
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: var(--radius); background: var(--color-button); color: #fff; font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1; text-transform: uppercase; text-decoration: none; transition: all var(--duration) var(--ease); }
.button--shadow { box-shadow: var(--shadow-button); }
.button--large { background: var(--color-button-dark); font-size: 29px; }
.button::after { content: ""; position: absolute; inset: -3px 0; } /* 44px touch area without changing the look */
.button-group { display: flex; flex-wrap: wrap; gap: 13px; }

/* === Component: site-header === */
.site-header { position: relative; z-index: 100; background: var(--color-bg); border-bottom: 2px solid var(--color-red); padding: 25px var(--gutter); transition: background var(--duration), border var(--duration); }
@media (min-width: 768px) { .site-header { position: sticky; top: 0; } } /* sticky on tablet + desktop only, as the original */
.site-header__inner { max-width: var(--container); margin-inline: auto; display: flex; flex-wrap: wrap; }
.site-header__col { padding: var(--col-pad); display: flex; align-items: center; min-width: 0; }
.site-header__logo { width: 11.218%; }
.site-header__logo img { width: 100%; }
.site-header__nav { width: 60.889%; justify-content: center; }
.site-header__nav-wrap { width: 100%; }
.site-header__actions { width: 27.559%; }
.site-header__buttons { width: 95.765%; justify-content: flex-end; }
@media (max-width: 1024px) {
  .site-header__logo, .site-header__nav { width: 50%; }
  .site-header__logo { justify-content: center; }
  .site-header__logo img { width: 28%; }
  .site-header__actions { display: none; }
  .site-header__buttons .button { font-size: 14px; }
}
@media (max-width: 767px) {
  .site-header__logo, .site-header__nav, .site-header__actions { width: 100%; }
  .site-header__actions { display: flex; }
  .site-header__buttons { width: 100%; justify-content: center; gap: 12px; }
}

/* === Component: nav (desktop: centred links; <= 1024px: toggle + full-width dropdown overlay) === */
.nav-toggle { display: none; position: relative; align-items: center; justify-content: center; margin: 0 auto; padding: 5.5px; border: 0; border-radius: var(--radius); background: rgb(0 0 0 / 0.05); color: var(--color-dropdown-text); cursor: pointer; }
.nav-toggle::after { content: ""; position: absolute; inset: -6px; } /* 45px touch area */
.nav-toggle svg { display: block; width: 22px; height: 22px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open, .nav-toggle[aria-expanded="false"] .nav-toggle__close { display: none; }
.site-nav__list { display: flex; flex-wrap: wrap; justify-content: center; }
.site-nav a { display: flex; padding: 13px 20px; font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 20px; color: var(--color-text); }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.is-active { color: var(--color-nav-active); }
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  /* Absolute, so it overlays the content below (Elementor "stretch" dropdown); top stays at its
     static position: 10px under the toggle. */
  .site-nav { position: absolute; left: 0; right: 0; z-index: 9997; margin-top: 10px; background: var(--color-bg); transform-origin: top; transform: scaleY(0); max-height: 0; overflow: hidden; visibility: hidden; transition: max-height var(--duration), transform var(--duration), visibility 0s var(--duration); }
  .site-nav.is-open { transform: scaleY(1); max-height: 100vh; visibility: visible; transition: max-height var(--duration), transform var(--duration), visibility 0s; }
  .site-nav__list { display: block; }
  .site-nav a { padding: 10px 20px; font-size: 13px; color: var(--color-dropdown-text); transition: none; }
  .site-nav a.is-active { color: var(--color-dropdown-text); }
  .site-nav a:hover, .site-nav a:focus-visible { background: var(--color-dropdown-hover); color: #fff; }
}

/* === Component: page-title-hidden (the theme's H1, hidden on the original too) === */
.page-title-hidden { display: none; }

/* === Component: section-heading (Fjalla One 74px; 48px on smaller screens per section) === */
.section-heading { font-family: var(--font-display); font-size: 74px; font-weight: 400; line-height: 1; color: var(--color-text); text-align: center; }

/* === Component: hero === */
.hero { margin-block: 60px; }
.hero__inner { display: flex; }
.hero__content { width: 58.047%; display: flex; flex-direction: column; justify-content: center; }
.hero__media { width: 41.915%; }
.hero__title { font-family: var(--font-display); font-size: 108px; font-weight: 400; line-height: 1; color: var(--color-text); margin-bottom: 24px; }
.hero__media img { margin-inline: auto; }
@media (max-width: 1024px) {
  .hero__title { font-size: 56px; }
  .hero .button-group { gap: 17px; }
}
@media (max-width: 767px) {
  .hero__inner { flex-direction: column; }
  .hero__content, .hero__media { width: 100%; }
  .hero__title { font-size: 37px; }
  .hero__media { padding-top: 60px; } /* 10px column padding + 50px mobile-only spacer */
}

/* === Component: double-divider (red + black hairlines under the hero, full width) === */
.double-divider { margin-block: 60px var(--section-gap); }
.double-divider hr { margin: 0; border: 0; border-top: 1px solid var(--color-red); }
.double-divider hr + hr { border-top-color: #000; }
.double-divider span { display: block; padding-block: 15px; }

/* === Component: about === */
.about { background: url("/wp-content/uploads/2023/04/balmoral-wood-logo-e-2-PDF_page-0001-3.png") center / contain no-repeat; }
.about .section-heading { margin-bottom: 16px; }
.about__text { margin: 30px; font-family: var(--font-body); font-size: 16px; color: var(--color-text); }
.about__img { width: 100%; height: 293px; }
.about__img--cover { object-fit: cover; object-position: center; }
.about__img--fill { object-fit: fill; }
@media (max-width: 1024px) { .about__col--left .about__text { margin-bottom: 50px; } } /* 30px text margin + 20px tablet/mobile spacer */
@media (max-width: 767px) { .about .section-heading { font-size: 48px; } }

/* === Component: menu-box (red double-bordered box with three round dish images) === */
.menu-box { border: 3px double var(--color-red-box); padding: var(--col-pad); }
.menu-box .section-heading { padding-top: 50px; margin-bottom: 74px; }
.menu-box__item img { margin-inline: auto; }
.menu-box__name { font-family: var(--font-menu); font-size: 56px; font-weight: 400; line-height: 1; color: var(--color-text); text-align: center; }
.menu-box__cta { display: flex; justify-content: center; margin-top: 99px; margin-bottom: 68px; }
@media (max-width: 1024px) {
  .menu-box .section-heading { font-size: 48px; margin-bottom: 43px; }
  .menu-box__name { font-size: 32px; }
  .menu-box__cta { margin-top: 69px; }
}

/* === Component: gallery (2 columns, GLightbox slideshow; library CSS in /assets/vendor/glightbox-3.3.1/) === */
.gallery-section .section-heading { margin-bottom: 10px; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; padding: 120px; }
.gallery img { width: 100%; }
@media (max-width: 1024px) {
  .gallery-section .section-heading { font-size: 48px; margin-bottom: 78px; } /* 10px + 68px tablet/mobile spacer */
  .gallery { padding: 0; }
}
@media (max-width: 767px) { .gallery { grid-template-columns: 1fr; } }

/* === Component: app-promo ("Download our app": phone mock-ups + text + store badges) === */
.app-promo__inner { display: flex; }
.app-promo__media, .app-promo__content { width: 50%; }
.app-promo__media img { width: 81%; margin-inline: auto; }
.app-promo__content { padding: 30px; display: flex; flex-direction: column; justify-content: center; }
.app-promo__title { font-family: var(--font-display); font-size: 74px; font-weight: 400; line-height: 1; color: var(--color-text); }
.app-promo__text { margin-block: 16px; font-family: var(--font-body); font-size: 16px; color: var(--color-text); }
.app-badges { display: block; width: fit-content; }
@media (max-width: 1024px) {
  .app-promo__media { display: flex; align-items: center; }
  .app-promo__media img { width: 100%; }
  .app-promo__title { font-size: 48px; }
}
@media (max-width: 767px) {
  .app-promo__inner { flex-direction: column-reverse; }
  .app-promo__media, .app-promo__content { width: 100%; }
}

/* === Component: site-footer (dark "#contact" block with four columns, divider and credit) === */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding: 100px var(--gutter); font-family: var(--font-footer); }
.site-footer__inner { max-width: var(--container); margin-inline: auto; padding: var(--col-pad); }
.site-footer__columns { display: flex; }
.site-footer__col { padding: var(--col-pad); min-width: 0; }
.site-footer__col--company { width: 25%; }
.site-footer__col--touch { width: 23.73%; }
.site-footer__col--hours { width: 28.492%; }
.site-footer__col--app { width: 22.759%; }
.footer-heading { font-family: var(--font-footer); font-size: 24px; font-weight: 700; line-height: 1; color: var(--color-footer-text); }
.site-footer__col--company .footer-heading { margin-bottom: 20px; }
.site-footer__col--touch .footer-heading, .site-footer__col--hours .footer-heading { margin-bottom: 10px; }
.site-footer__col--app .footer-heading { margin-bottom: 22px; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.footer-links li { height: 18px; padding-top: 1px; }
.footer-links a { display: block; font-size: 16px; font-weight: 200; line-height: 1; color: var(--color-footer-text); }
.footer-text { display: flow-root; font-size: 16px; font-weight: 200; color: var(--color-footer-text); }
.footer-text p { margin-block: 1em; }
.footer-text--hours { line-height: 23px; }
.site-footer__divider { margin: 42px 0 17px; border: 0; border-top: 1.5px solid var(--color-footer-text); } /* 25px spacer + 17px divider padding */
.site-footer__copyright { font-family: var(--font-footer); font-size: 24px; font-weight: 200; line-height: 1; color: var(--color-footer-text); }
.site-footer__copyright strong { font-weight: bolder; }
@media (max-width: 1024px) {
  .footer-heading { font-size: 16px; }
  .site-footer__col--app .footer-heading { margin-bottom: 25px; }
  .footer-links a, .footer-text { font-size: 12px; }
  .site-footer__copyright { text-align: center; }
}
@media (max-width: 767px) {
  .site-footer { margin-block: 50px; } /* the original leaves a 50px white band under the footer on phones */
  .site-footer__columns { flex-direction: column; }
  .site-footer__col { width: 100% !important; }
  .site-footer__copyright { font-size: 16px; }
}

/* === Component: lightbox (GLightbox overlay, styled to the original Elementor lightbox) === */
.glightbox-container .goverlay { background: rgb(0 0 0 / 0.9); }

/* === Component: error-page (404) === */
.error-page { text-align: center; }
.error-page .section-heading { margin-bottom: 30px; }
.error-page__text { font-size: 18px; margin-bottom: 30px; }
.error-page .button-group { justify-content: center; }
@media (max-width: 767px) { .error-page .section-heading { font-size: 48px; } }

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