/*
 * site.css: the only stylesheet for namastegurkha.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        shared column rhythm
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         page-specific sections of the one-page home: "=== Page: / ... ==="
 *   7. Utilities     a handful of helpers
 *
 * Breakpoints (from the original Elementor build; media queries can't use custom properties):
 *   mobile  <= 767px    tablet 768px-1024px    desktop >= 1025px
 *   The menu collapses to the burger toggle at <= 1024px (Elementor "dropdown: tablet").
 *
 * Values come from the live page's computed styles (2026-10-26) and, for the header menu and
 * the OUR FOOD gallery (Elementor Pro widgets, restored under E1), from the Internet Archive
 * capture 20260414081803 and its post-6.css.
 *
 * Editing: change tokens to restyle the site; add new components as new blocks;
 * add modifier classes instead of changing a component for one page.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours */
  --color-header: #a20202;        /* header bar */
  --color-button: #a3171b;        /* Order Now button, "Download Our App" heading */
  --color-button-hover: #030303;
  --color-text: #000000;
  --color-text-muted: #7a7a7a;    /* app intro text */
  --color-bg: #ffffff;
  --color-pink: #f1c7c7;          /* FOLLOW US section, social icon glyphs */
  --color-icon-bg: #353535;       /* FOLLOW US circles */
  --color-icon-bg-hover: #4e4e4e;
  --color-footer-bg: #f0f0f0;
  --color-footer-border: #c3c3c3;
  --color-gallery-border: #e3e3e3;
  --color-accent: #6ec1e4;        /* Elementor kit primary: "Install App" heading */
  --color-dropdown-hover: #3f444b; /* Elementor Pro dropdown hover default */

  /* Typography */
  --font-display: "Darker Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-footer: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-copyright: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Spacing: Elementor default column padding and widget spacing */
  --col-pad: 10px;
  --widget-gap: 20px;

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

/* ============ 2. Fonts ============ */
/* Self-hosted Google Fonts (latin). Darker Grotesque is the variable file (300-900): the
   original asks for weight 200 on "OUR FOOD", which Google no longer serves, so browsers use
   the lightest available weight (300), exactly as on the live site. */
@font-face { font-family: "Darker Grotesque"; src: url("/assets/fonts/darker-grotesque-variable-latin.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-200-latin.woff2") format("woff2"); font-weight: 200; font-style: normal; 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-family: var(--font-display); font-size: 16px; line-height: normal; color: var(--color-text); background: var(--color-bg); }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
h1, h2, h3 { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ============ 4. Layout ============ */
/* Elementor rhythm: every column has 10px padding; widgets in a column are 20px apart. */
.col { padding: var(--col-pad); }

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

/* === Component: skip-link === */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 8px 16px; background: #fff; color: #000; }
.skip-link:focus { left: 16px; }

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

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

/* === Component: site-header (red bar: logo | menu | social icons; not sticky) === */
.site-header { position: relative; z-index: 50; background: var(--color-header); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; }
.site-header__col { padding: var(--col-pad); }
.site-header__logo { width: 19.154%; text-align: center; }
.site-header__nav { width: 56.557%; }
.site-header__social { width: 23.955%; }
@media (max-width: 1024px) {
  .site-header__logo, .site-header__social { width: 25%; }
  .site-header__nav { width: 50%; }
}
@media (max-width: 767px) {
  .site-header__logo, .site-header__nav, .site-header__social { width: 100%; }
  .site-header__social .social-icons { display: none; } /* hidden on mobile; the column keeps its padding */
}

/* === Component: nav (restored Elementor Pro nav-menu: framed pointer that fades in; burger at <= 1024px) === */
.nav-toggle { display: none; align-items: center; justify-content: center; margin: 0 auto; padding: 5.5px; border: 0; border-radius: 3px; background: #fff; color: #000; cursor: pointer; position: relative; }
.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; margin: 0; padding: 0; list-style: none; }
.site-nav a { position: relative; display: block; padding: 11px 20px; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 20px; color: #fff; text-align: center; }
.site-nav li:not(:first-child) > a { margin-inline-start: 31px; }
.site-nav li:not(:last-child) > a { margin-inline-end: 31px; }
.site-nav a::before { content: ""; position: absolute; inset: 0; border: 3px solid #fff; opacity: 0; transition: opacity var(--duration) var(--ease); pointer-events: none; }
.site-nav a:hover::before, .site-nav a:focus-visible::before, .site-nav a.is-active::before { opacity: 1; }
.site-nav a:focus-visible { outline: 0; }
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  /* Dropdown in the page flow below the toggle (Elementor without "full width"): grid rows
     0fr -> 1fr; the nav stretches its child so the list is clipped while it slides. */
  .site-nav { display: grid; grid-template-rows: 0fr; align-items: stretch; margin-top: 10px; background: #fff; visibility: hidden; transition: grid-template-rows var(--duration) var(--ease), visibility 0s var(--duration); }
  .site-nav.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--duration) var(--ease), visibility 0s; }
  .site-nav__clip { overflow: hidden; min-height: 0; }
  .site-nav.is-instant { transition: none; }
  .site-nav__list { display: block; }
  .site-nav a, .site-nav li > a { margin: 0 !important; padding: 10px 20px; color: #000; transition: none; }
  .site-nav a::before { display: none; }
  .site-nav a:hover, .site-nav a:focus-visible, .site-nav a.is-active { background: var(--color-dropdown-hover); color: #fff; }
}

/* === Component: social-icons (Elementor social icons; only Facebook had a link on the original) === */
.social-icons { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.social-icon { --icon-size: 25px; --icon-pad: 0.5em; display: inline-flex; align-items: center; justify-content: center; width: calc(1em + 2 * var(--icon-pad)); height: calc(1em + 2 * var(--icon-pad)); font-size: var(--icon-size); color: #fff; }
.social-icon svg { display: block; height: 1em; width: auto; fill: currentColor; }
.social-icons--header { gap: 5px; }
.social-icons--header .social-icon { border-radius: 10%; }
@media (max-width: 1024px) { .social-icons--header .social-icon { --icon-size: 24px; } }
.social-icons--follow { column-gap: 100px; row-gap: 0; }
.social-icons--follow .social-icon { --icon-size: 116px; --icon-pad: 0.9em; border-radius: 50%; background: var(--color-icon-bg); color: var(--color-pink); transition: transform var(--duration), background-color var(--duration), color var(--duration); }
.social-icons--follow .social-icon:hover { background: var(--color-icon-bg-hover); color: #fff; transform: rotate(4deg); }
@media (max-width: 1024px) { .social-icons--follow .social-icon { --icon-size: 27px; } }
@media (max-width: 767px) { .social-icons--follow { column-gap: 42px; row-gap: 68px; } }

/* === Component: button === */
.button { display: inline-block; font-family: var(--font-display); text-align: center; transition: all var(--duration); }
.button--hero { padding: 20px 40px; font-size: 30px; font-weight: 400; line-height: 1; color: #fff; background: var(--color-button); border-radius: 0; }
.button--hero:hover, .button--hero:focus-visible { background: var(--color-button-hover); }

/* === Component: food-gallery (restored Elementor Pro gallery: grid 3/2/1, 4:3 crops, dark overlay on hover, GLightbox) === */
.food-gallery { padding: 20px; border: 3px solid var(--color-gallery-border); }
.food-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; }
.food-gallery__item { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.food-gallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.food-gallery__item::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); opacity: 0; transition: opacity var(--duration-gallery); }
.food-gallery__item:hover::after, .food-gallery__item:focus-visible::after { opacity: 1; }
@media (max-width: 1024px) {
  .food-gallery { border-width: 0 0 4px 0; }
  .food-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 767px) { .food-gallery__grid { grid-template-columns: 1fr; } }

/* === Component: map === */
.map { display: block; width: 100%; height: 479px; border: 0; }

/* === Component: site-footer (Contact columns + copyright bar) === */
.site-footer__contact { padding: 110px var(--col-pad) 90px; background: var(--color-footer-bg); border-bottom: 2px solid var(--color-footer-border); }
.site-footer__columns { display: flex; flex-wrap: wrap; max-width: 1600px; margin: 0 auto; }
.site-footer__col { width: 25%; padding: var(--col-pad); }
.footer-heading { font-family: var(--font-footer); font-size: 24px; font-weight: 600; line-height: 1; color: #000; }
.footer-heading--accent { color: var(--color-accent); }
.footer-text { display: flow-root; margin-top: var(--widget-gap); font-family: var(--font-footer); font-size: 16px; font-weight: 400; color: #000; }
.footer-text p { margin: 1em 0; }
.footer-text--hours { line-height: 26px; }
.footer-text--touch { line-height: 34px; }
.footer-badges { display: block; margin-top: var(--widget-gap); }
.footer-badges img { width: 162px; }
.site-footer__bar { padding: var(--col-pad); background: var(--color-footer-bg); }
.site-footer__copyright { width: calc(100% / 3 - 2 * var(--col-pad)); margin: 0 auto; padding: 20px; font-family: var(--font-copyright); font-size: 18px; font-weight: 200; line-height: 1; text-align: center; color: #000; }
@media (max-width: 1024px) {
  .footer-heading { font-size: 15px; }
  .footer-text { font-size: 10px; }
  .footer-badges img { width: 146px; }
  .site-footer__copyright { font-size: 15px; }
}
@media (max-width: 767px) {
  .site-footer__col { width: 100%; }
  .site-footer__copyright { width: 100%; }
}

/* === Component: contact-email (not used: the original has no form and no email address) === */

/* === Component: glightbox (library CSS in /assets/vendor/glightbox-3.3.1/; Elementor's lightbox was a dark slideshow) === */
.glightbox-clean .gslide-description { background: transparent; }

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

/* === Page: / hero (mountain photo, logo, Order Now) === */
.hero { background: url("/wp-content/uploads/2022/05/Rectangle-22.png") center / cover no-repeat; }
.hero__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--widget-gap); min-height: 723px; padding: var(--col-pad); }
@media (max-width: 1024px) { .hero__inner { min-height: 391px; } .hero__logo { width: 42%; } }
@media (max-width: 767px) { .hero__inner { min-height: 193px; } }

/* === Page: / about us (text + plate image over a faint mountain outline) === */
.about { position: relative; padding: var(--col-pad); }
.about::before { content: ""; position: absolute; inset: 0; background: url("/wp-content/uploads/2022/05/352-3527315_transparent-mountain-outline-png-transparent-background-mountain-clipart-2.png") bottom center repeat-x; opacity: 0.5; pointer-events: none; }
.about__inner { position: relative; display: flex; flex-wrap: wrap; }
.about__spacer-col { width: 9.485%; }
.about__text-col { width: 44.051%; padding: var(--col-pad); }
.about__image-col { width: 46.13%; padding: 50px; } /* 10px column + 40px widget padding */
.about__title { padding: 40px; font-size: 55px; font-weight: 400; line-height: 1; color: #000; }
.about__text { display: flow-root; margin-top: var(--widget-gap); padding: 40px; font-size: 24px; font-weight: 400; color: #000; }
.about__text p { margin: 1em 0; }
.about__image { display: block; width: 75%; margin: 0 auto; }
@media (max-width: 1024px) {
  .about__spacer-col { display: none; }
  .about__image-col { align-self: center; padding: var(--col-pad); }
  .about__title { padding: 15px; font-size: 40px; }
  .about__text { padding: 15px; font-size: 15px; }
  .about__image { width: 100%; }
}
@media (max-width: 767px) { .about__text-col, .about__image-col { width: 100%; } }

/* === Page: / our food + download our app === */
.food__inner { padding: var(--col-pad); }
.food__title { padding: 40px; font-size: 69px; font-weight: 200; line-height: 1; text-align: center; color: #000; }
.food-gallery { margin-top: var(--widget-gap); }
.food__spacer { height: 76px; margin: var(--widget-gap) 0; }
.app { display: flex; flex-wrap: wrap; min-height: 724px; }
.app__spacer-col { width: 9.977%; }
.app__text-col { width: 43.379%; padding: 80px var(--col-pad) var(--col-pad); } /* 10px column + 50px spacer + 20px gap */
.app__image-col { width: 46.31%; padding: var(--col-pad); text-align: center; }
.app__title { font-size: 63px; font-weight: 700; line-height: 1; color: var(--color-button); }
.app__text { display: flow-root; margin-top: var(--widget-gap); font-size: 33px; font-weight: 400; color: var(--color-text-muted); }
.app__text p { margin: 1em 0; }
.app__badges { display: block; margin-top: var(--widget-gap); }
.app__badges img { display: block; width: 300px; }
.app__image { width: 55%; }
@media (max-width: 1024px) {
  .food__title { font-size: 40px; }
  .food__spacer { height: 10px; }
  .app { min-height: 471px; }
  .app__title { font-size: 40px; }
  .app__text { font-size: 20px; }
  .app__image-col { align-self: center; text-align: right; }
  .app__image { width: 100%; }
}
@media (max-width: 767px) {
  .app__spacer-col { display: none; }
  .app__text-col { width: 100%; padding-top: 45px; } /* as measured on the original at 375 */
  .app__image-col { display: none; }
}

/* === Page: / follow us (pink band with mountain silhouette) === */
.follow { display: flex; align-items: center; min-height: 73vh; background: var(--color-pink) url("/wp-content/uploads/2022/05/352-3527315_transparent-mountain-outline-png-transparent-background-mountain-clipart-3.png") bottom center repeat-x; }
.follow__inner { width: 100%; padding: var(--col-pad) var(--col-pad) calc(var(--col-pad) + 297px); } /* 20px gap + 277px spacer */
.follow__title { padding: 40px; font-size: 62px; font-weight: 600; line-height: 1; text-align: center; color: #000; }
.social-icons--follow { margin-top: var(--widget-gap); padding: 40px; }
@media (max-width: 1024px) {
  .follow { min-height: 53vh; }
  .follow__title { font-size: 40px; }
}

/* === Page: / find us (map) === */
.location { padding: var(--col-pad); }

/* === Page: /404.html === */
.not-found { padding: 120px 20px; text-align: center; }
.not-found__title { font-size: 55px; font-weight: 400; line-height: 1; }
.not-found__text { margin: 24px 0 32px; font-size: 24px; }
.not-found__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin: 0 0 32px; padding: 0; list-style: none; font-size: 24px; font-weight: 600; }
.not-found__links a { color: var(--color-button); }
.not-found__links a:hover { text-decoration: underline; }

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