/* Tema: Rustic — paleta: Lemn și verde */
:root {
  --f-pagina: #f8f6f0;
  --f-alt: #eae5d8;
  --f-card: #fffdf8;
  --t-text: #232016;
  --t-slab: #5c5544;
  --accent: #4a5d23;
  --accent-inchis: #384819;
  --pe-accent: #ffffff;
  --margine: #c0b498;
}

/*
 * Structura comuna a tuturor site-urilor de restaurant.
 *
 * Aici stau doar asezarea si comportamentul: culorile vin din paleta, iar
 * infatisarea (tipografie, ritm, chenare) din fisierul temei, incarcat dupa
 * acesta.
 *
 * Scris pentru telefon in primul rand. Majoritatea oamenilor deschid meniul
 * unui restaurant de pe telefon, in local, pe o conexiune proasta. Regulile
 * pentru ecrane late se adauga peste, nu invers.
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /*
   * Ancora de sectiune nu trebuie sa ajunga sub antetul lipit.
   * Valoarea exacta o calculeaza scriptul paginii de meniu, care stie cat
   * ocupa antetul si banda de categorii in tema si pe latimea curenta;
   * cea de aici e o aproximare rezonabila pentru cazul fara JavaScript.
   */
  /* 8rem e o aproximare a antetului lipit in cele cinci teme; valoarea exacta
     o pune scriptul. 5rem, cat era inainte, e mai mic decat antetul si lasa
     titlul catre care sari ascuns sub el. */
  scroll-padding-top: var(--decalaj-ancora, 8rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--f-pagina);
  color: var(--t-text);
  font-size: 17px;
  line-height: 1.6;
  /* Niciun site nu deruleaza orizontal. Daca o face, e un defect. */
  overflow-x: hidden;
  /* Bara fixa de pe telefon nu trebuie sa acopere ultimul rand din subsol. */
  padding-bottom: env(safe-area-inset-bottom);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); }
a:hover { color: var(--accent-inchis); }

:where(a, button, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Legatura de sarire, vizibila doar la navigarea cu tastatura. */
.sari {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--accent);
  color: var(--pe-accent);
  text-decoration: none;
}
.sari:focus { left: 0; color: var(--pe-accent); }

/* ---------- Container ---------- */

.invelis {
  width: 100%;
  max-width: var(--latime, 68rem);
  margin: 0 auto;
  padding-inline: 1rem;
}

@media (min-width: 48rem) {
  .invelis { padding-inline: 2rem; }
}

/* ---------- Antet ---------- */

.antet {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--f-pagina);
  /* Fara backdrop-filter: ar transforma antetul in containing block pentru
     position:fixed, iar bara de actiuni de jos s-ar raporta la el, nu la ecran. */
  border-bottom: 1px solid var(--margine);
}

.antet__sus {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-block: .7rem;
  min-width: 0;
}

.marca {
  display: block;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  /* Numele lung se rupe, nu impinge pagina. */
  overflow-wrap: anywhere;
}

.marca__nume {
  display: block;
  font-family: var(--font-titlu);
  font-weight: var(--greutate-titlu, 700);
  font-size: 1.15rem;
  line-height: 1.15;
  letter-spacing: var(--spatiere-marca, 0);
}

.marca__tip {
  display: block;
  font-size: .72rem;
  color: var(--t-slab);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: .15rem;
}

.antet__spatiu { flex: 1 1 auto; }

/* Comutatorul de limba */
.limbi { display: flex; gap: .25rem; flex-shrink: 0; }

.limbi__optiune {
  display: inline-block;
  padding: .25rem .45rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--t-slab);
  border: 1px solid var(--margine);
  border-radius: 4px;
}

.limbi__optiune[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--pe-accent);
}

/*
 * Navigarea: pastile care deruleaza pe orizontala.
 *
 * Aleasa in locul unui meniu hamburger pentru ca sectiunile sunt putine si
 * toate vizibile dintr-o privire. Un hamburger ar cere JavaScript, o suprapunere
 * si o capcana de focalizare — trei lucruri care se strica — pentru a ascunde
 * sase legaturi.
 */
.nav {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .6rem;
  /* Pastilele ajung pana la marginea ecranului cand se deruleaza. */
  margin-inline: -1rem;
  padding-inline: 1rem;
}

.nav::-webkit-scrollbar { display: none; }

.nav__legatura {
  flex: 0 0 auto;
  padding: .35rem .8rem;
  font-size: .9rem;
  text-decoration: none;
  color: var(--t-text);
  border: 1px solid var(--margine);
  border-radius: 999px;
  white-space: nowrap;
}

.nav__legatura:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (min-width: 48rem) {
  .nav { margin-inline: 0; padding-inline: 0; overflow: visible; }
}

/* ---------- Erou ---------- */

.erou { position: relative; }

.erou__interior { padding-block: 2.5rem 2rem; }

.erou__supratitlu {
  margin: 0 0 .5rem;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t-slab);
}

.erou__titlu {
  margin: 0 0 .75rem;
  font-family: var(--font-titlu);
  font-weight: var(--greutate-titlu, 700);
  /* Se micsoreaza singur pe ecrane inguste, fara praguri. */
  font-size: clamp(1.9rem, 8vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: var(--spatiere-titlu, -.01em);
}

.erou__descriere {
  margin: 0 0 1.25rem;
  max-width: 42ch;
  color: var(--t-slab);
  font-size: 1.02rem;
}

.erou__actiuni {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

/* ---------- Butoane ---------- */

.buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  /* 44px: tinta minima de atingere pe telefon. */
  min-height: 44px;
  padding: .55rem 1.15rem;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--raza-buton, 6px);
  cursor: pointer;
  background: var(--accent);
  color: var(--pe-accent);
}

.buton:hover { background: var(--accent-inchis); color: var(--pe-accent); }

.buton--contur {
  background: transparent;
  color: var(--t-text);
  border-color: var(--margine);
}

.buton--contur:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- Sectiuni ---------- */

.sectiune { padding-block: 2.75rem; }
.sectiune--alt { background: var(--f-alt); }

.sectiune__titlu {
  margin: 0 0 .35rem;
  font-family: var(--font-titlu);
  font-weight: var(--greutate-titlu, 700);
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  line-height: 1.15;
}

.sectiune__descriere {
  margin: 0 0 1.5rem;
  color: var(--t-slab);
  max-width: 52ch;
}

@media (min-width: 48rem) {
  .sectiune { padding-block: 4rem; }
}

/* ---------- Meniul zilei ---------- */

.zilei {
  border: 1px solid var(--margine);
  border-radius: var(--raza-card, 8px);
  background: var(--f-card);
  padding: 1.25rem;
}

.zilei__sus {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  margin-bottom: .75rem;
}

.zilei__eticheta {
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

.zilei__pret {
  margin-left: auto;
  font-family: var(--font-titlu);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.zilei__lista { list-style: none; margin: 0; padding: 0; }

.zilei__element {
  padding-block: .6rem;
  border-top: 1px solid var(--margine);
}

.zilei__element:first-child { border-top: none; }
.zilei__nume { font-weight: 600; }

/* ---------- Meniu ---------- */

.categorie { margin-bottom: 2.5rem; }
.categorie:last-child { margin-bottom: 0; }

.categorie__titlu {
  margin: 0 0 .25rem;
  font-family: var(--font-titlu);
  font-size: 1.3rem;
  font-weight: var(--greutate-titlu, 700);
}

.categorie__descriere {
  margin: 0 0 1rem;
  color: var(--t-slab);
  font-size: .92rem;
}

.preparate { list-style: none; margin: 0; padding: 0; }

.preparat {
  padding-block: .9rem;
}

/*
 * Linia despartitoare dintre preparate.
 *
 * `:where()` nu adauga specificitate, deci regula cantareste cat `.preparat`
 * simplu si orice tema o poate suprascrie, fiind incarcata dupa.
 *
 * Scrisa cum era — `.preparat { border-top: ... }` plus
 * `.preparat:first-child { border-top: none }` — a doua regula avea
 * specificitate mai mare decat `.preparat` din tema si ii taia chenarul de sus
 * PRIMULUI card din fiecare categorie. In tema Vibrant, unde preparatele sunt
 * carduri cu chenar complet, cardul aparea deschis in partea de sus.
 */
.preparat:where(:not(:first-child)) {
  border-top: 1px solid var(--margine);
}

/*
 * Tot randul e o legatura catre fereastra de detaliu.
 *
 * Legatura INCONJOARA continutul, nu il inlocuieste: asa toate regulile scrise
 * de teme pentru .preparat__rand, .preparat__pret si celelalte raman valabile,
 * si nu trebuie rescrise in cinci fisiere.
 */
.preparat__legatura {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.preparat__legatura:hover { color: inherit; }
.preparat__legatura:hover .preparat__nume { color: var(--accent); }

.preparat__continut { flex: 1 1 auto; min-width: 0; }

.preparat__miniatura {
  flex: 0 0 auto;
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: var(--raza-card, 8px);
  background: var(--f-alt);
}

.preparat__miniatura svg,
.preparat__miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.preparat__rand {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  min-width: 0;
}

.preparat__nume {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

/*
 * Butonul catre meniul complet, din sectiunea de invitatie.
 *
 * Pe telefon e centrat: ramane singurul element de pe rand, iar centrat cade
 * sub degetul mare indiferent in ce mana e tinut telefonul. Pe ecran lat
 * ramane aliniat la stanga, cu restul textului.
 */
.invitatie__actiune { margin-top: 1.5rem; text-align: center; }

/* Lista de categorii, folosita ca cuprins al meniului si pe pagina principala. */
.chipuri {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.chipuri--cuprins {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-inline: -1rem;
  margin-bottom: 1rem;
  padding: .55rem 1rem;
}

.chipuri--cuprins::-webkit-scrollbar { display: none; }

/*
 * Pe telefon banda de categorii ramane lipita sub antet cat timp derulezi
 * meniul, iar categoria curenta se aduce singura in dreptul ochiului.
 *
 * Se activeaza doar cand exista JavaScript (clasa `js` pusa de script), pentru
 * ca inaltimea la care trebuie sa se opreasca depinde de antetul fiecarei teme
 * si nu poate fi scrisa fix in CSS. Fara JavaScript banda ramane exact cum era:
 * deruleaza orizontal, dar nu se lipeste — nu se strica nimic, doar lipseste o
 * inlesnire.
 */
.js .chipuri--cuprins {
  position: sticky;
  top: var(--sus-cuprins, 0px);
  z-index: 30;
  background: var(--f-pagina);
  /* Umbra in loc de chenar: chenarul ar adauga inaltime si ar misca continutul
     in momentul in care banda se lipeste. */
  box-shadow: 0 1px 0 var(--margine);
}

/* Categoria la care esti in acest moment. */
.nav__legatura[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--pe-accent);
  font-weight: 600;
}

.nav__legatura[aria-current="true"]:hover { color: var(--pe-accent); }

@media (min-width: 48rem) {
  .chipuri--cuprins {
    flex-wrap: wrap;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    margin-bottom: 2rem;
  }
  /* Pe ecran lat pastilele incap toate, deci nu are rost sa ocupe permanent
     o banda din inaltimea ferestrei. */
  .js .chipuri--cuprins { position: static; box-shadow: none; }
}

/* Linia punctata dintre nume si pret. Se intinde cat trebuie, dispare cand
   nu incape — nu impinge pretul in afara ecranului. */
.preparat__punte {
  flex: 1 1 auto;
  min-width: 1rem;
  border-bottom: 1px dotted var(--margine);
  transform: translateY(-.25rem);
}

.preparat__pret {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.preparat__descriere {
  /* Este <span> in lista si <p> in meniul zilei; il facem bloc in ambele cazuri. */
  display: block;
  margin: .2rem 0 0;
  color: var(--t-slab);
  font-size: .92rem;
  max-width: 58ch;
}

.preparat__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-top: .4rem;
}

.eticheta {
  display: inline-block;
  padding: .1rem .45rem;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--margine);
  color: var(--t-slab);
  white-space: nowrap;
}

.eticheta--accent {
  border-color: var(--accent);
  color: var(--accent);
}

.alergeni {
  margin-top: .3rem;
  font-size: .78rem;
  color: var(--t-slab);
}

.preparat--indisponibil { opacity: .55; }

.preparat--indisponibil .preparat__pret { text-decoration: line-through; }

.gramaj {
  font-size: .78rem;
  color: var(--t-slab);
  white-space: nowrap;
}

/* Nota despre alergeni, obligatorie prin Regulamentul (UE) 1169/2011. */
.nota-alergeni {
  margin-top: 2rem;
  padding: .9rem 1rem;
  border: 1px solid var(--margine);
  border-radius: var(--raza-card, 8px);
  font-size: .85rem;
  color: var(--t-slab);
  background: var(--f-card);
}

/* ---------- Fereastra de detaliu a preparatului ---------- */

/*
 * Se deschide prin :target, adica printr-o legatura obisnuita. Fara JavaScript
 * nu inseamna "mai simplu de scris", ci: functioneaza cu JavaScript oprit, se
 * poate deschide intr-o fila noua, butonul Inapoi al browserului o inchide, si
 * fiecare preparat are propria adresa, care se poate pune pe un cod QR.
 *
 * Pe telefon urca de jos, ca o foaie; pe ecran lat sta centrata.
 */
.fereastra { display: none; }

.fereastra:target {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 80;
  align-items: flex-end;
  justify-content: center;
}

.fereastra__fundal {
  position: absolute;
  inset: 0;
  display: block;
  background: rgba(0, 0, 0, .62);
}

.fereastra__cutie {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  /* dvh, nu vh: pe telefon bara browserului ar taia altfel fereastra. */
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--f-card);
  border-radius: var(--raza-card, 8px) var(--raza-card, 8px) 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.fereastra__inchide {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  font-size: 1.4rem;
  line-height: 1;
  text-decoration: none;
  /* Fundal propriu opac: butonul sta peste fotografie si trebuie sa se vada
     indiferent ce culori are aceasta. */
  background: var(--f-card);
  color: var(--t-text);
  border: 1px solid var(--margine);
}

.fereastra__inchide:hover { background: var(--accent); color: var(--pe-accent); border-color: var(--accent); }

.fereastra__imagine {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--f-alt);
}

.fereastra__imagine svg,
.fereastra__imagine img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fereastra__corp { padding: 1.25rem; }

.fereastra__titlu {
  margin: 0 0 .35rem;
  font-family: var(--font-titlu);
  font-weight: var(--greutate-titlu, 700);
  font-size: 1.4rem;
  line-height: 1.2;
}

.fereastra__pret {
  margin: 0 0 .9rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--accent);
}

.fereastra__descriere { margin: 0 0 1rem; }

.fereastra__anunt {
  margin: 0 0 .9rem;
  padding: .5rem .7rem;
  border: 1px solid var(--margine);
  border-radius: var(--raza-card, 8px);
  color: var(--t-slab);
  font-size: .9rem;
}

.fereastra__grup { margin-top: 1rem; }

.fereastra__eticheta {
  margin: 0 0 .2rem;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--t-slab);
  font-weight: 700;
}

.fereastra__grup p { margin: 0; font-size: .95rem; }

.fereastra:focus { outline: none; }

@media (min-width: 48rem) {
  .fereastra:target { align-items: center; padding: 2rem; }
  .fereastra__cutie { border-radius: var(--raza-card, 8px); max-height: 88dvh; }
}

/* ---------- Galerie ---------- */

.galerie {
  display: grid;
  /*
   * minmax(0, ...) obligatoriu: un element de grid are min-width:auto si ar
   * impinge coloana peste marginea ecranului.
   *
   * Pragul de 15rem inseamna o fotografie pe rand pe telefon si doua pe
   * telefoanele late — mancarea trebuie sa se vada, nu sa fie ghicita dintr-un
   * patrat de doua degete.
   */
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: .75rem;
}

.galerie > * { min-width: 0; }

.galerie__element {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--raza-card, 8px);
  background: var(--f-alt);
  /* Fara descriere suprapusa: acoperea tocmai partea de jos a fotografiei si
     cerea un degrade intunecat peste ea. Descrierea e in vederea marita si in
     textul alternativ. */
}

.galerie__element svg,
.galerie__element img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}

.galerie__element:hover img { transform: scale(1.04); }

@media (min-width: 48rem) {
  /*
   * 17rem, nu 20rem: pragul trebuie sa incapa de trei ori in cea mai ingusta
   * coloana de continut dintre teme (Elegant, 58rem). La 20rem ies doar doua
   * fotografii pe rand, de peste 470px fiecare — mai mari decat are nevoie
   * cineva ca sa decida daca ii place localul.
   */
  .galerie { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
}

/* ---------- Vederea marita a fotografiei ---------- */

/*
 * Aceeasi mecanica ca la fereastra preparatului: se deschide prin :target,
 * deci merge fara JavaScript, are adresa proprie si se inchide cu butonul
 * Inapoi. Sagetile sunt legaturi catre fotografia vecina, in cerc.
 *
 * Culorile sunt neutre, nu din paleta temei: un vizualizator de fotografii
 * trebuie sa dispara in jurul imaginii. Orice tenta de culoare ar falsifica
 * mancarea din fotografie.
 */
.lumina { display: none; }

.lumina:target {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 85;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.lumina__fundal {
  position: absolute;
  inset: 0;
  display: block;
  background: rgba(0, 0, 0, .92);
}

.lumina__cutie {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(62rem, 100%);
}

.lumina__figura { margin: 0; }

.lumina__figura svg,
.lumina__figura img {
  display: block;
  width: 100%;
  height: auto;
  /* Fotografia se vede intreaga, nu taiata: `contain`, nu `cover`. */
  max-height: 76dvh;
  object-fit: contain;
  border-radius: var(--raza-card, 8px);
  background: #000;
}

.lumina__jos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  padding-top: .7rem;
  color: #f2f2f2;
  font-size: .95rem;
}

.lumina__numar {
  margin-left: auto;
  color: #b8b8b8;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

.lumina__inchide,
.lumina__sageata {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px: tinta minima de atingere. */
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  text-decoration: none;
  color: #ffffff;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .35);
  line-height: 1;
}

.lumina__inchide:hover,
.lumina__sageata:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.lumina__inchide { top: .6rem; right: .6rem; font-size: 1.5rem; }

.lumina__sageata { top: 50%; transform: translateY(-50%); font-size: 2rem; }
.lumina__sageata--inapoi { left: .5rem; }
.lumina__sageata--inainte { right: .5rem; }

.lumina__sageata:hover { transform: translateY(-50%); }

.lumina :focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.lumina:focus { outline: none; }

@media (min-width: 48rem) {
  .lumina:target { padding: 2.5rem; }
  .lumina__sageata--inapoi { left: -1rem; }
  .lumina__sageata--inainte { right: -1rem; }
}

/* ---------- Despre ---------- */

.despre__text { max-width: 60ch; }
.despre__text p { margin: 0 0 1rem; }

/* ---------- Program ---------- */

.program { list-style: none; margin: 0; padding: 0; max-width: 26rem; }

.program__rand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: .5rem;
  border-top: 1px solid var(--margine);
}

.program__rand:first-child { border-top: none; }
.program__rand--azi { font-weight: 700; color: var(--accent); }
.program__ore { font-variant-numeric: tabular-nums; white-space: nowrap; }
.program__inchis { color: var(--t-slab); }

/* ---------- Contact ---------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 48rem) {
  .contact { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 2rem; }
}

.contact__grup > h3 {
  margin: 0 0 .4rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-slab);
  font-weight: 700;
}

.contact__grup p { margin: 0 0 .3rem; }

.contact__legaturi {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}

/* ---------- Subsol ---------- */

.subsol {
  padding-block: 2rem;
  border-top: 1px solid var(--margine);
  color: var(--t-slab);
  font-size: .85rem;
  /* Loc pentru bara fixa de pe telefon. */
  padding-bottom: calc(2rem + var(--inaltime-bara, 0px));
}

.subsol__rand {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
}

.subsol a { color: var(--t-slab); }
.subsol a:hover { color: var(--accent); }

/*
 * Bara fixa de jos, doar pe telefon.
 *
 * Cel mai frecvent lucru pe care il vrea cineva care deschide site-ul unui
 * restaurant de pe telefon este sa sune. Butonul nu trebuie cautat.
 */
.bara-mobil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  gap: .5rem;
  padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom));
  background: var(--f-pagina);
  border-top: 1px solid var(--margine);
}

.bara-mobil .buton { flex: 1 1 0; min-width: 0; }

@media (min-width: 48rem) {
  .bara-mobil { display: none; }
}

@media (max-width: 47.99rem) {
  body { --inaltime-bara: 4.25rem; }
}

/* Preparatele fara fotografie nu lasa gol in stanga: randul incepe cu textul. */
.preparat--fara-poza .preparat__legatura { gap: 0; }

/* Semnatura din subsol: legaturile pastreaza culoarea textului slab, ca sa nu
   concureze cu ale restaurantului, dar se subliniaza la trecerea cu mausul. */
.subsol__semnatura a { color: inherit; text-decoration: none; }
.subsol__semnatura a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Fundalul nu derulează cât timp o fereastră e deschisă ---------- */

/*
 * Fără asta, degetul care voia să deruleze fotografia mută pagina din spate,
 * iar la închidere te trezești în altă parte a meniului.
 *
 * Două căi, pentru că se completează: `:has()` merge fără JavaScript în
 * browserele actuale, iar clasa e pusă de script pentru cele mai vechi.
 * Ambele fac același lucru, deci nu contează care câștigă.
 */
html:has(.fereastra:target),
html:has(.lumina:target),
html.blocat {
  overflow: hidden;
}

/* Derularea din interiorul ferestrei nu se propagă la pagina din spate când
   ajunge la capăt — altfel ultimul deget de derulare o mută pe cea de dedesubt. */
.fereastra__cutie,
.lumina__cutie {
  overscroll-behavior: contain;
}

/*
 * Tema: Rustic
 *
 * Chenare late, tonuri naturale, preparatele așezate în casete, ca pe o
 * tăbliță de lemn. Titluri cu picioare, text fără, ca să rămână lizibil
 * pe telefon.
 */

:root {
  --font-titlu: Georgia, "Times New Roman", "Liberation Serif", serif;
  --font-text: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --greutate-titlu: 700;
  --spatiere-titlu: 0;
  --raza-card: 2px;
  --raza-buton: 2px;
  --latime: 62rem;
}

body { font-family: var(--font-text); }

.antet {
  border-bottom: 4px solid var(--accent);
}

.marca__nume { font-size: 1.3rem; }

.marca__tip {
  font-size: .7rem;
  letter-spacing: .12em;
}

.nav__legatura {
  border-width: 2px;
  border-radius: 2px;
  font-weight: 600;
}

/* Eroul: încadrat între două linii groase. */
.erou__interior {
  padding-block: 2.5rem;
  border-bottom: 2px solid var(--margine);
}

.erou__supratitlu { letter-spacing: .2em; }

.erou__titlu { font-size: clamp(2rem, 9vw, 3.4rem); }

.erou__descriere { font-size: 1.02rem; }

.sectiune__titlu {
  display: inline-block;
  padding-bottom: .35rem;
  border-bottom: 4px solid var(--accent);
}

.categorie {
  border: 2px solid var(--margine);
  border-radius: var(--raza-card);
  background: var(--f-card);
  padding: 1.1rem 1.15rem;
  margin-bottom: 1.25rem;
}

.categorie__titlu {
  margin: -1.1rem -1.15rem .9rem;
  padding: .55rem 1.15rem;
  background: var(--f-alt);
  border-bottom: 2px solid var(--margine);
  font-size: 1.1rem;
}

.categorie__descriere { margin-top: -.5rem; }

/* Aceeasi forma ca in structura comuna: fara linie deasupra primului preparat,
   ca sa nu se dubleze cu chenarul antetului de categorie. */
.preparat:where(:not(:first-child)) { border-top: 1px dashed var(--margine); }
.preparat__punte { border-bottom-style: dashed; }
.preparat__nume { font-family: var(--font-titlu); }

.eticheta { border-width: 2px; border-radius: 2px; }

.zilei {
  border: 2px solid var(--accent);
  border-left-width: 8px;
}

.zilei__eticheta { letter-spacing: .18em; }

.program__rand { border-top: 1px dashed var(--margine); }

.galerie__element { border: 2px solid var(--margine); }

.subsol { border-top: 4px solid var(--accent); }

@media (min-width: 48rem) {
  .categorie { padding: 1.4rem 1.5rem; }
  .categorie__titlu { margin: -1.4rem -1.5rem 1.1rem; padding: .7rem 1.5rem; }
}