/* Agan Grill — curated-refs-matched (greenrush.md + uber-eats-restaurant.md port) */

:root {
  --primary: #1E1916;
  --accent-red: #E2302B;
  /* Darkened operational tint of --accent-red, used only where white text sits
     directly on the fill (buttons, stat band) — the sampled brand red at
     4.48:1 falls just short of WCAG AA 4.5:1 for white text; this passes at
     ~5:1 while still reading as the same brand red. See design-direction.md's
     Design System Fidelity Gate note on this file. */
  --accent-red-fill: #CC2823;
  --accent-green: #0A7A34;
  --neutral-warm: #F1ECDE;
  --neutral-gray: #D6D6D6;
  --text-on-light: #1E1916;
  --text-on-dark: #F1ECDE;

  /* 'Heading Cyrillic' carries the Russian locale's headings — Archivo Black has
     no Cyrillic subset. Per-glyph fallback keeps Latin on Archivo Black.
     See assets/fonts/Heading-Cyrillic.css. */
  --font-heading: 'Archivo Black', 'Heading Cyrillic', 'Arial Black', sans-serif;
  --font-body: 'Montserrat', -apple-system, sans-serif;

  --sp: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;

  --container-max: 1200px;
  --radius-pill: 999px;
  --radius-card: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-on-light);
  background: var(--neutral-warm);
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 400; /* Archivo Black bakes "black" weight into 400 — see design-direction.md */
  line-height: 1.1;
  margin: 0;
}
p { margin: 0; }
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-3);
}
@media (min-width: 760px) {
  .container { padding: 0 var(--sp-4); }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  min-height: 48px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--accent-red-fill);
  color: #FFFFFF;
}
.btn-primary:hover { background: #B32320; }
.btn-outline {
  background: transparent;
  color: var(--text-on-dark);
  border-color: var(--text-on-dark);
}
.btn-outline:hover { background: rgba(241,236,222,0.1); }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--primary);
  padding: var(--sp-2) 0;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.brand img {
  width: 44px;
  height: 44px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 50%;
}
.brand span {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--text-on-dark);
  font-size: 20px;
  letter-spacing: 0.02em;
}
.main-nav {
  display: none;
  align-items: center;
  gap: var(--sp-4);
}
.main-nav a {
  color: var(--text-on-dark);
  font-weight: 600;
  font-size: 15px;
  padding: var(--sp) 0;
}
.main-nav a:hover { color: var(--accent-red); }
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.header-phone {
  display: none;
  color: var(--text-on-dark);
  font-weight: 600;
  font-size: 15px;
}
.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 2px solid var(--text-on-dark);
  border-radius: var(--radius-pill);
  color: var(--text-on-dark);
  font-size: 20px;
  cursor: pointer;
}
@media (min-width: 900px) {
  .main-nav { display: flex; }
  .header-phone { display: inline-block; }
  .hamburger { display: none; }
}

.mobile-panel {
  display: none;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--primary);
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  border-top: 1px solid rgba(241,236,222,0.15);
}
.mobile-panel.is-open { display: flex; }
.mobile-panel a {
  color: var(--text-on-dark);
  font-weight: 600;
  font-size: 17px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
@media (min-width: 900px) {
  .mobile-panel { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--primary);
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-bg.hero-bg-mobile { display: block; }
.hero-bg.hero-bg-desktop { display: none; }
@media (min-width: 760px) {
  .hero-bg.hero-bg-mobile { display: none; }
  .hero-bg.hero-bg-desktop { display: block; }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Solid dark floor across the bottom ~60% (where hero-content text actually
     sits, per align-items:flex-end) so text contrast never depends on what
     the underlying photo looks like at that point — only fades out near the
     very top of the frame. See design-direction.md's motion/contrast notes. */
  background: linear-gradient(0deg, rgba(30,25,22,0.96) 0%, rgba(30,25,22,0.96) 88%, rgba(30,25,22,0.55) 100%);
}
@media (min-width: 760px) {
  .hero::before {
    background: linear-gradient(90deg, rgba(30,25,22,0.94) 0%, rgba(30,25,22,0.75) 38%, rgba(30,25,22,0.15) 68%, rgba(30,25,22,0.05) 100%);
  }
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--sp-8) 0 var(--sp-6);
}
@media (min-width: 760px) {
  .hero-content { padding: var(--sp-8) 0 var(--sp-8); }
}
.hero-content .container {
  max-width: 640px;
  margin: 0;
  margin-left: 0;
}
@media (min-width: 760px) {
  .hero-content .container { padding-left: var(--sp-6); }
}
.hero-eyebrow {
  color: #FF6B5E;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.hero h1 {
  color: var(--text-on-dark);
  font-size: 40px;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
@media (min-width: 760px) {
  .hero h1 { font-size: 64px; }
}
.hero-tagline {
  color: var(--text-on-dark);
  font-size: 17px;
  font-weight: 500;
  max-width: 480px;
  margin-bottom: var(--sp-4);
}
.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
@media (min-width: 480px) {
  .hero-ctas { flex-direction: row; }
}
.hero-trust {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-on-dark);
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
}
.hero-trust .dot {
  width: 6px; height: 6px;
  background: var(--accent-red);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------- Stat band ---------- */
.stat-band {
  background: var(--accent-red-fill);
  padding: var(--sp-6) 0;
}
.stat-band .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 640px) {
  .stat-band .container { grid-template-columns: 1fr 1fr 1.4fr; align-items: center; }
}
.stat-item {
  text-align: center;
}
@media (min-width: 640px) {
  .stat-item { text-align: left; }
}
.stat-number {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 40px;
  color: #FFFFFF;
  display: block;
}
.stat-label {
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-about p {
  color: #FFFFFF;
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- Section shell ---------- */
.section {
  padding: var(--sp-8) 0;
  /* Sticky header is ~76px tall (44px logo + 2*16px padding) -- without this,
     anchor-nav jumps (#meniu/#apie/#kontaktai) land the section flush with
     the viewport top and the sticky header covers the heading. Found by
     65-verify's independent pass via a section screenshot, not by any
     automated gate. */
  scroll-margin-top: 90px;
}
.section-dark { background: var(--primary); }
.section-menu {
  /* Desktop-wide viewports (>1200px container) left the flat --neutral-warm
     body color exposed either side of the menu with nothing else on it --
     human feedback: "just a plain background on the sides." Low-opacity
     brand-color glows add depth without competing with menu content. */
  background:
    radial-gradient(circle at 12% 15%, rgba(226, 48, 43, 0.07), transparent 45%),
    radial-gradient(circle at 88% 85%, rgba(10, 122, 52, 0.09), transparent 45%),
    var(--neutral-warm);
}
.section-header {
  text-align: center;
  margin-bottom: var(--sp-6);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.section-eyebrow {
  /* #BF2521: darkened tint of --accent-red for light (--neutral-warm)
     backgrounds -- 5.08:1, clears WCAG AA. See --accent-red-fill note above;
     same underlying fix, applied to this light-bg text context. */
  color: #BF2521;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp);
}
.section-dark .section-eyebrow {
  /* #FF6B5E: lightened tint of --accent-red for dark (--primary)
     backgrounds -- 6.23:1. Same brand red, opposite direction of tint. */
  color: #FF6B5E;
}
.section-header h2 {
  font-size: 32px;
  text-transform: uppercase;
  color: var(--text-on-light);
}
.section-dark .section-header h2,
.section-dark .section-eyebrow + h2 { color: var(--text-on-dark); }
@media (min-width: 760px) {
  .section-header h2 { font-size: 42px; }
}
.section-sub {
  margin-top: var(--sp-2);
  font-size: 16px;
  color: var(--text-on-light);
  opacity: 0.75;
}
.section-dark .section-sub { color: var(--text-on-dark); opacity: 0.8; }

/* ---------- Menu ---------- */
.menu-filters {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-4);
  scrollbar-width: none;
}
.menu-filters::-webkit-scrollbar { display: none; }
.menu-filter {
  flex-shrink: 0;
  padding: var(--sp) var(--sp-3);
  border-radius: var(--radius-pill);
  border: 2px solid var(--neutral-gray);
  background: #FFFFFF;
  color: var(--text-on-light);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
}
.menu-filter.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-dark);
}
.menu-category {
  margin-bottom: var(--sp-6);
}
.menu-category-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp);
  border-bottom: 3px solid var(--accent-red);
  display: inline-block;
}
.menu-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  background: #FFFFFF;
  border-radius: var(--radius-card);
  overflow: hidden;
}
@media (min-width: 640px) {
  .menu-featured { grid-template-columns: 320px 1fr; align-items: center; }
}
.menu-featured img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.menu-featured-body { padding: var(--sp-3); }
@media (min-width: 640px) {
  .menu-featured-body { padding: var(--sp-4); }
}
.menu-featured-body h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: var(--sp);
}
.menu-featured-body p {
  font-size: 14px;
  opacity: 0.75;
  margin-bottom: var(--sp-2);
}
.menu-featured-price {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  color: var(--accent-red);
}
.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}
@media (min-width: 640px) {
  .menu-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .menu-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-2);
  background: #FFFFFF;
  border-radius: var(--radius-card);
  padding: var(--sp-3);
}
.menu-item-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--primary);
  margin-bottom: var(--sp);
}
.menu-item-desc {
  font-size: 13px;
  color: var(--text-on-light);
  opacity: 0.65;
  line-height: 1.4;
}
.menu-item-price {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 17px;
  color: var(--accent-red);
  white-space: nowrap;
  flex-shrink: 0;
}
.menu-item.is-veg .menu-item-name::after {
  content: "\f06c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
  color: var(--accent-green);
  margin-left: var(--sp);
  vertical-align: middle;
}
.menu-footnote {
  margin-top: var(--sp-4);
  text-align: center;
  font-size: 14px;
  color: var(--text-on-light);
  opacity: 0.7;
}

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
@media (min-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
.gallery-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-card);
  transition: transform 0.3s ease;
}
@media (min-width: 760px) {
  .gallery-grid a:hover img { transform: scale(1.04); }
}

/* ---------- Location / Contact ---------- */
.location-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 860px) {
  .location-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}
.location-info h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  color: var(--text-on-dark);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.location-row {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  color: var(--text-on-dark);
  font-size: 15px;
  line-height: 1.5;
}
.location-row strong { display: block; font-weight: 700; margin-bottom: 2px; }
.location-row a { text-decoration: underline; text-underline-offset: 3px; }
.hours-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--sp-3);
}
.hours-table td {
  padding: var(--sp) 0;
  color: var(--text-on-dark);
  font-size: 14px;
  border-bottom: 1px solid rgba(241,236,222,0.15);
}
.hours-table td:last-child { text-align: right; font-weight: 600; }
.delivery-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.map-wrap {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--neutral-gray);
  min-height: 320px;
  display: flex;
  flex-direction: column;
}
.map-wrap iframe {
  width: 100%;
  height: 320px;
  border: 0;
  flex: 1;
}
.map-fallback {
  display: block;
  text-align: center;
  padding: var(--sp-2);
  background: var(--primary);
  color: var(--text-on-dark);
  font-weight: 600;
  font-size: 14px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: #15110E;
  padding: var(--sp-6) 0 var(--sp-4);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.footer-brand img { width: 36px; height: 36px; aspect-ratio: 1/1; border-radius: 50%; flex-shrink: 0; }
.footer-brand span {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--text-on-dark);
  font-size: 17px;
}
.footer-col p, .footer-col a {
  color: rgba(241,236,222,0.75);
  font-size: 14px;
  line-height: 1.8;
  display: block;
}
.footer-col a:hover { color: var(--accent-red); }
.footer-col h4 {
  color: var(--text-on-dark);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-2);
  font-weight: 700;
}
.footer-bottom {
  border-top: 1px solid rgba(241,236,222,0.12);
  padding-top: var(--sp-3);
  text-align: center;
  color: rgba(241,236,222,0.5);
  font-size: 13px;
}

/* ---------- Scroll reveal (cosmetic only, never opacity:0 default) ---------- */
.reveal {
  transform: translateY(16px);
  opacity: 1;
  transition: transform 0.5s ease;
}
.reveal.is-visible { transform: translateY(0); }

/* ---------- Language toggle (LT / EN / RU) ---------- */

/* Required by the `hidden`-property language mechanism in site.js: author rules
   like `.mobile-panel a { display: flex }` override the UA hidden stylesheet, and
   without this every language would render at once. */
[hidden] { display: none !important; }

/* Flag symbol definitions — referenced by <use>, never painted itself. */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp);
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp);
  padding: 6px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s ease;
}
.lang-btn:hover { opacity: 1; }
.lang-btn.is-active { opacity: 1; }

.lang-btn .flag {
  width: 28px;
  height: 14px;
  border-radius: 2px;
  /* The RU and EN flags carry white; this hairline keeps their edge readable
     against the near-black header. It is not a selection state — the active
     language is signalled by opacity alone. */
  box-shadow: inset 0 0 0 1px rgba(30, 25, 22, 0.35);
}
/* Desktop header: flags only — the accessible name lives on the button's aria-label. */
.header-actions .lang-toggle { display: none; }
.header-actions .lang-code {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Drawer: full language names, laid out as a column at the bottom of the panel. */
.lang-toggle-drawer {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(241,236,222,0.15);
}
.lang-toggle-drawer .lang-btn {
  justify-content: flex-start;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp) 0;
  font-size: 17px;
  letter-spacing: 0;
}
.lang-toggle-drawer .flag {
  width: 32px;
  height: 16px;
}

@media (min-width: 900px) {
  .header-actions .lang-toggle { display: flex; }
  /* Fixed grid tracks: LT, EN and RU nav labels have different widths, so a
     3-child space-between flex row would shunt the brand and actions sideways
     on every language switch. Only the nav's own centring moves now. */
  .site-header .container {
    display: grid;
    grid-template-columns: auto 1fr auto;
  }
  .main-nav { justify-self: center; }
}

/* ---------- Inline icons (replacing the Font Awesome CDN link) ---------- */
.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.mobile-panel a { gap: var(--sp); }
.map-fallback .icon-arrow {
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.4em;
}
.text-link { text-decoration: underline; }

/* ---------- Mobile header fit ----------
   At 375px the LT header (brand + "Užsisakyti" + hamburger) overflowed the
   viewport by ~14px and clipped the hamburger off the right edge. That burger
   is the only way into the drawer where the language toggle lives, so the
   overflow has to go. Tightens brand and CTA below the desktop breakpoint only. */
@media (max-width: 899px) {
  .brand span { font-size: 16px; }
  .header-actions .btn {
    padding: var(--sp) var(--sp-3);
    font-size: 14px;
  }
}