/* ==========================================================================
   SCPEJ Gruianu și Stancu
   Layout is applied to semantic elements; classes appear only where the tag
   alone cannot carry the meaning. No build step, no web fonts, no framework.
   Order: tokens → reset → landmarks → sections → components → preferences.
   ========================================================================== */

/* --- 1. Tokens ------------------------------------------------------------ */

:root {
  /* Surfaces & ink — warm paper against a deep institutional navy */
  --paper:    #fcfbf9;
  --surface:  #f4f2ec;
  --navy:     #101c33;
  --navy-ink: #f2ede4;
  --ink:      #101c33;
  --muted:    #4e5a70;
  --line:     #e3ded3;
  --rule:     #cbb894;

  /* Accents — brass for authority, navy-blue for interaction */
  --brass:      #8a6a3b;   /* decorative: rules, marks, borders */
  --brass-ink:  #6f5326;   /* text-safe brass, 6.8:1 on paper */
  --brass-lift: #c9a468;   /* brass on dark ground */
  --link:       #163a6e;
  --link-ink:   #ffffff;

  /* Avertizare — poartă întotdeauna și eticheta „Atenție”, niciodată doar culoarea */
  --avert-bg:   #fdf2f1;
  --avert-line: #c0392f;
  --avert-ink:  #8a2318;

  --deschis-ink: #1c6b32;   /* stare „deschis”, dublată întotdeauna de text */

  /* Fluid type — one scale, no breakpoints */
  --f-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);
  --f-sm:   clamp(0.875rem, 0.85rem + 0.10vw, 0.9375rem);
  --f-base: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem);
  --f-lede: clamp(1.125rem, 1.04rem + 0.42vw, 1.375rem);
  --f-h3:   clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
  --f-h2:   clamp(1.625rem, 1.35rem + 1.35vw, 2.5rem);
  --f-h1:   clamp(2.25rem, 1.6rem + 3.1vw, 4rem);

  /* Space */
  --s-1: 0.375rem;
  --s-2: 0.625rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2.25rem;
  --s-6: clamp(3rem, 7vw, 5.5rem);

  /* Layout */
  --gutter: clamp(1.125rem, 4vw, 2rem);
  --content-max: 68rem;
  --measure: 66ch;
  --radius: 4px;

  --serif: Georgia, "Times New Roman", ui-serif, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #0d1219;
    --surface:  #131a24;
    --navy:     #14203a;
    --navy-ink: #f2ede4;
    --ink:      #e8ecf2;
    --muted:    #98a4b8;
    --line:     #25303f;
    --rule:     #5c4d33;

    --brass:      #c9a468;
    --brass-ink:  #d3b177;
    --brass-lift: #d3b177;
    --link:       #9dbdf0;
    --link-ink:   #0d1219;

    --avert-bg:   #2a1714;
    --avert-line: #e06b5e;
    --avert-ink:  #f3b5ac;

    --deschis-ink: #5fbf7d;
  }
}

/* --- 2. Reset ------------------------------------------------------------- */

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

body, h1, h2, h3, p, ul, ol, dl, dd, figure, form, fieldset { margin: 0; padding: 0; }

ul[role="list"] { list-style: none; }

/* Widgeturile ascund elemente prin atributul `hidden`; regulile de layout de
   mai jos setează `display`, care altfel ar învinge stilul implicit al
   browserului și ar lăsa elementul vizibil. */
[hidden] { display: none !important; }

body {
  background: var(--paper);
  color: var(--ink);
  font: var(--f-base)/1.7 var(--sans);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeSpeed;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--f-h1); }
h2 { font-size: var(--f-h2); }
h3 { font-size: var(--f-h3); letter-spacing: 0; }

p { text-wrap: pretty; }

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

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

:target { scroll-margin-top: 6rem; }

:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 2px; }

/* --- 3. The shell grid ----------------------------------------------------
   Each landmark centres its own content, so the document needs no wrapper
   elements. Children sit in `content`; anything full-bleed asks for `full`.
   -------------------------------------------------------------------------- */

main > section,
footer {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] min(100% - (var(--gutter) * 2), var(--content-max)) [content-end]
    minmax(var(--gutter), 1fr) [full-end];
}

main > section > *,
footer > * { grid-column: content; }

main > section {
  align-content: start;
  padding-block: var(--s-6);
  row-gap: var(--s-4);

  /* Skip layout and paint for off-screen sections until they approach. */
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

main > section:nth-of-type(odd) { background: var(--surface); }

/* --- 4. Header ------------------------------------------------------------ */

body > header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--rule);
}

body > header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--s-2) var(--gutter);
}

/* Sigla la stânga, numele și subtitlul stivuite la dreapta. Plasarea este
   explicită: cu auto-plasare, subtitlul aluneca sub siglă în loc să stea
   sub nume. */
.brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--s-3);
  margin-inline-end: auto;
  color: var(--ink);
  text-decoration: none;
}

.brand picture {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  display: block;
}

.brand b     { grid-column: 2; grid-row: 1; align-self: end; }
.brand small { grid-column: 2; grid-row: 2; align-self: start; }

/* Sigla reală, nu monograma desenată în cod. Dimensiunile sunt fixate și în
   atributele <img>, ca browserul să rezerve spațiul înainte de a o descărca
   și antetul să nu tresară la încărcare. */
.brand-mark {
  grid-row: 1 / 3;
  width: 2.75rem;
  height: auto;
  flex: none;
}
.brand b { font: 700 var(--f-h3)/1.2 var(--serif); align-self: end; }
.brand small {
  align-self: start;
  color: var(--muted);
  font-size: var(--f-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

body > header button {
  display: none;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: 600 var(--f-sm)/1 var(--sans);
  cursor: pointer;
}

/* Three-bar mark, drawn from one element */
body > header button i,
body > header button i::before,
body > header button i::after {
  display: block;
  width: 1rem;
  height: 1.5px;
  background: currentColor;
}

body > header button i { position: relative; }
body > header button i::before,
body > header button i::after { content: ""; position: absolute; inset-inline: 0; }
body > header button i::before { top: -5px; }
body > header button i::after  { top: 5px; }

body > header ul {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  list-style: none;
}

body > header ul a {
  color: var(--muted);
  font-size: var(--f-sm);
  font-weight: 500;
  text-decoration: none;
}

body > header ul a:hover,
body > header ul a:focus-visible { color: var(--ink); }

body > header ul .cta {
  padding: 0.5rem var(--s-3);
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--navy-ink);
}

/* Collapse only once JS has confirmed itself — the menu works without it. */
@media (width < 62em) {
  .js body > header button { display: inline-flex; }

  .js body > header ul {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: var(--s-2);
    border-top: 1px solid var(--line);
  }

  .js body > header button[aria-expanded="true"] + ul { display: flex; }

  .js body > header ul a {
    display: block;
    padding: var(--s-2) 0;
    font-size: var(--f-base);
  }

  .js body > header ul .cta { margin-block-start: var(--s-2); text-align: center; }
}

/* --- 5. Hero -------------------------------------------------------------- */

main > section.hero {
  background: var(--navy);
  color: var(--navy-ink);
  padding-block: clamp(3.5rem, 11vw, 8rem);
  content-visibility: visible;
}

.hero h1 { max-width: 14ch; }

.hero .lede {
  max-width: 52ch;
  color: color-mix(in srgb, var(--navy-ink) 82%, transparent);
  font-size: var(--f-lede);
  line-height: 1.55;
}

/* --- 6. Section furniture -------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-end: calc(var(--s-3) * -1);
  color: var(--brass-ink);
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Hairline rule trailing each eyebrow, drawn without an extra element */
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  max-width: 5rem;
  background: var(--rule);
}

.hero .eyebrow { color: var(--brass-lift); }

main > section > p { max-width: var(--measure); color: var(--muted); }
.hero > p { max-width: none; }

.note, .empty { font-size: var(--f-sm); }

.empty {
  padding: var(--s-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}

/* --- 7. Marked list (Atribuții) -------------------------------------------- */

#atributii > ul {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-block-start: var(--s-1);
}

#atributii li {
  padding-inline-start: var(--s-4);
  border-inline-start: 2px solid var(--rule);
  color: var(--muted);
  font-size: var(--f-sm);
}

/* --- 8. Reperele din antet -------------------------------------------------
   Fapte verificabile — competență, sediu, temei legal — sub propunerea de
   valoare. Stau în antet, deci se desenează la prima randare.
   --------------------------------------------------------------------------- */

.hero > dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--s-3) var(--s-4);
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid color-mix(in srgb, var(--navy-ink) 20%, transparent);
}

.hero dt {
  color: var(--brass-lift);
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero dd {
  margin-block-start: 0.2rem;
  font-size: var(--f-sm);
  font-weight: 600;
  line-height: 1.4;
}

/* --- 8b. Cele două drumuri -------------------------------------------------
   Prima secțiune pe hârtie. Fiecare bloc numește vizitatorul („aveți…”,
   „ați primit…”), nu biroul, și se termină cu un singur pas concret.
   --------------------------------------------------------------------------- */

#drumuri > ul {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  margin-block-start: var(--s-3);
}

#drumuri article {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  height: 100%;
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-block-start: 3px solid var(--navy);
  border-radius: var(--radius);
}

#drumuri h3 {
  color: var(--ink);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
}

#drumuri article > p:not(.cheie, .actiune) {
  color: var(--muted);
  font-size: var(--f-sm);
  line-height: 1.6;
}

/* Pașii sunt o succesiune reală, deci <ol>, nu <ul> */
#drumuri article ol {
  display: grid;
  gap: var(--s-2);
  counter-reset: pas;
  margin-block-start: var(--s-1);
  padding-block-start: var(--s-3);
  border-block-start: 1px dashed var(--line);
  color: var(--muted);
  font-size: var(--f-sm);
  line-height: 1.5;
  list-style: none;
}

#drumuri article li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2);
  align-items: start;
  counter-increment: pas;
}

#drumuri article li::before {
  content: counter(pas);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--navy-ink);
  font-family: var(--serif);
  font-size: var(--f-xs);
  font-weight: 700;
}

/* --- 9. Șablon repetabil pentru servicii ------------------------------------
   Fiecare bloc are aceeași ordine de citire — cheie, titlu, descriere, ce
   include, o singură acțiune — iar acțiunea este împinsă la baza blocului cu
   `margin-block-start: auto`, astfel încât toate acțiunile se aliniază pe
   aceeași linie indiferent de lungimea textelor. Un singur loc unde se apasă,
   în aceeași poziție în fiecare bloc.
   --------------------------------------------------------------------------- */

#servicii > ul {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  margin-block-start: var(--s-3);
  counter-reset: serviciu;
}

#servicii > ul > li { counter-increment: serviciu; }

#servicii article {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  height: 100%;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-block-start: 3px solid var(--brass);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

#servicii li:hover article { background: var(--paper); border-color: var(--brass); }

/* Cheia: punctul de valoare, cu majuscule din CSS — textul rămâne scris
   normal în JSON, ca cititoarele de ecran să nu îl silabisească literă cu literă. */
.cheie {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--brass-ink);
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Numerotarea apare doar la servicii, nu la blocurile de drumuri */
#servicii .cheie::before {
  content: counter(serviciu, decimal-leading-zero);
  padding: 0.2rem 0.42rem;
  border-radius: 3px;
  background: var(--navy);
  color: var(--navy-ink);
  font-family: var(--serif);
  letter-spacing: 0.04em;
}

#servicii h3 {
  color: var(--ink);
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
}

#servicii article > p:not(.cheie, .actiune) {
  color: var(--muted);
  font-size: var(--f-sm);
  line-height: 1.6;
}

/* Ce include serviciul — lista scanabilă, nu proză */
#servicii article ul {
  display: grid;
  gap: var(--s-1);
  padding-block-start: var(--s-3);
  border-block-start: 1px dashed var(--line);
  color: var(--muted);
  font-size: var(--f-xs);
  line-height: 1.5;
}

#servicii article li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2);
}

#servicii article li::before {
  content: "";
  width: 0.5rem;
  height: 1px;
  margin-block-start: 0.72em;
  background: var(--brass);
}

/* Acțiunea este împinsă la baza blocului, deci toate acțiunile se aliniază
   pe aceeași linie, oricât de diferite ar fi textele de deasupra. */
.actiune {
  margin-block-start: auto;
  padding-block-start: var(--s-3);
  font-size: var(--f-sm);
  font-weight: 600;
}

.actiune a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
}

.actiune a::after { content: "→"; transition: transform 0.15s ease; }
.actiune a:hover { text-decoration: underline; }
.actiune a:hover::after { transform: translateX(3px); }

/* --- 10. Card licitații ----------------------------------------------------- */

#licitatii > ul {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-block-start: var(--s-2);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

#licitatii article {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  height: 100%;
  padding: var(--s-4);
  background: var(--surface);
  border-block-start: 2px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#licitatii li:hover article {
  background: var(--paper);
  border-block-start-color: var(--brass);
}

#licitatii article h3 { color: var(--ink); }

#licitatii article p {
  color: var(--muted);
  font-size: var(--f-sm);
  line-height: 1.6;
}

/* Detaliile unei licitații */
#licitatii article dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-1) var(--s-3);
  align-items: baseline;
  font-size: var(--f-sm);
}

#licitatii article dt {
  color: var(--brass-ink);
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#licitatii article dd { color: var(--muted); }
#licitatii article a { font-weight: 600; }

/* --- 9. Definition lists --------------------------------------------------- */

#competenta > dl {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  max-width: var(--measure);
  padding-block: var(--s-3);
  border-block: 1px solid var(--line);
  font-size: var(--f-sm);
}

#competenta dt {
  color: var(--brass-ink);
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#competenta dd { font-weight: 500; }

/* --- 10. File list --------------------------------------------------------- */

#cereri > ul {
  display: grid;
  gap: 0;
  max-width: var(--measure);
  border-block-start: 1px solid var(--line);
}

#cereri li { border-block-end: 1px solid var(--line); }

#cereri a {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

#cereri a::before {
  content: "↓";
  color: var(--brass-ink);
  font-weight: 700;
}

#cereri a small {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: var(--f-xs);
  letter-spacing: 0.08em;
}

#cereri a:hover { color: var(--link); text-decoration: underline; }

/* --- 10b. Widgeturi ---------------------------------------------------------
   Toate trei îmbunătățesc conținut deja randat de server. Stilurile de mai jos
   descriu numai elementele adăugate de JavaScript; fără el, pagina nu are
   nimic gol sau rupt.
   --------------------------------------------------------------------------- */

/* Avertizare — culoarea nu poartă singură mesajul, eticheta „Atenție” o dublează */
.avertisment {
  padding: var(--s-3) var(--s-4);
  border-inline-start: 3px solid var(--avert-line);
  border-radius: var(--radius);
  background: var(--avert-bg);
  color: var(--avert-ink);
  font-size: var(--f-sm);
}

/* Indicatorii: cifre de titlu, nu diagramă. Valorile poartă fontul de
   interfață, nu serifa paginii — cifrele mari se citesc mai bine în sans. */
.indicatori {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: var(--s-4);
  margin-block-start: var(--s-3);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.indicatori dt {
  color: var(--brass-ink);
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.indicatori dd {
  margin-block-start: 0.2rem;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  font-weight: 600;
  line-height: 1.15;
}

.indicatori dd small {
  display: block;
  margin-block-start: 0.15rem;
  color: var(--muted);
  font-size: var(--f-xs);
  font-weight: 500;
}

/* Filtrele */
.filtre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-4);
}

.filtre button {
  min-height: 2.25rem;
  padding: 0.4rem var(--s-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font: 600 var(--f-sm)/1 var(--sans);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.filtre button:hover { color: var(--ink); border-color: var(--brass); }

.filtre button[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--navy-ink);
}

.stare-filtru,
.stare-cautare {
  margin-block-start: var(--s-2);
  color: var(--muted);
  font-size: var(--f-xs);
}

/* Timpul rămas până la licitație */
.ramas {
  display: inline-block;
  align-self: start;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brass) 18%, transparent);
  color: var(--brass-ink);
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ramas.trecut {
  background: color-mix(in srgb, var(--muted) 15%, transparent);
  color: var(--muted);
}

/* Căutarea din competență */
.cautare {
  display: grid;
  gap: var(--s-1);
  max-width: 26rem;
  margin-block-start: var(--s-4);
}

.cautare label { font-size: var(--f-sm); font-weight: 600; }

.cautare input {
  width: 100%;
  padding: 0.7rem var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: var(--f-base)/1.5 var(--sans);
}

.cautare input:focus-visible { border-color: var(--link); outline-offset: 1px; }

#competenta > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0 var(--s-5);
  margin-block-start: var(--s-3);
}

#competenta > ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-2);
  padding-block: var(--s-2);
  border-block-end: 1px solid var(--line);
  font-size: var(--f-sm);
}

#competenta > ul b { font-weight: 600; }
#competenta > ul small { color: var(--muted); font-size: var(--f-xs); }

/* Rezultatele de localitate, adăugate de widget */
#competenta .localitate {
  padding-inline-start: var(--s-3);
  border-inline-start: 2px solid var(--brass);
}

/* --- 10c. Contact: formular în doi pași + disponibilitate --------------------
   Pasul 1 arată trei alegeri și nimic altceva. Pasul 2 apare după alegere.
   Fără JavaScript ambele sunt vizibile, deci formularul rămâne complet.
   --------------------------------------------------------------------------- */

.pas {
  min-inline-size: 0; /* fieldset nu se micșorează implicit în grid */
  margin: 0;
  padding: 0;
  border: 0;
}

.pas legend {
  padding: 0;
  margin-block-end: var(--s-3);
  color: var(--brass-ink);
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.alegere { display: grid; gap: var(--s-2); }

/* Opțiunea este o suprafață de apăsat cât tot rândul, nu doar butonul radio */
.optiune {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.optiune:hover { border-color: var(--brass); }

.optiune input { margin-block-start: 0.28em; accent-color: var(--navy); }

.optiune label { cursor: pointer; }
.optiune label b { display: block; font-size: var(--f-base); font-weight: 600; }
.optiune label small { display: block; color: var(--muted); font-size: var(--f-sm); }

.optiune:has(input:checked) {
  background: var(--surface);
  border-color: var(--navy);
  box-shadow: inset 3px 0 0 var(--navy);
}

.optiune:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }

/* Resursa descărcabilă, oferită în locul scrierii unui mesaj */
.resursa {
  grid-column: 2;
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--f-sm);
  font-weight: 600;
}

.resursa::before { content: "↓"; color: var(--brass-ink); }
.resursa small { color: var(--muted); font-size: var(--f-xs); letter-spacing: 0.08em; }

.detalii { display: grid; gap: var(--s-3); margin-block-start: var(--s-5); }

/* Capcana anti-robot: scoasă din pagină fără `display: none`, pe care unii
   roboți îl detectează și evită câmpul. */
.capcana {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Pagini secundare: rezultat formular și text juridic -------------------- */

.rezultat, .proza {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] min(100% - (var(--gutter) * 2), 44rem) [content-end]
    minmax(var(--gutter), 1fr) [full-end];
  align-content: start;
  padding-block: var(--s-6);
  row-gap: var(--s-4);
}

.rezultat > *, .proza > * { grid-column: content; }

.rezultat h1, .proza h1 { font-size: var(--f-h2); }
.rezultat > p, .proza > p { color: var(--muted); }
.rezultat .lede { color: var(--ink); font-size: var(--f-lede); }

.erori {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  border-inline-start: 3px solid var(--avert-line);
  border-radius: var(--radius);
  background: var(--avert-bg);
  color: var(--avert-ink);
  font-size: var(--f-sm);
  list-style: none;
}

.erori li { padding-inline-start: var(--s-3); position: relative; }
.erori li::before { content: "•"; position: absolute; left: 0; }

/* Text juridic: măsură îngustă, ierarhie clară, fără decorațiuni */
.proza h2 {
  margin-block-start: var(--s-5);
  font-size: var(--f-h3);
  color: var(--ink);
}

.proza h2:first-of-type { margin-block-start: var(--s-3); }

.proza ul { display: grid; gap: var(--s-2); padding-inline-start: var(--s-4); color: var(--muted); }
.proza li { padding-inline-start: var(--s-1); }

.proza dl {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  padding-block: var(--s-3);
  border-block: 1px solid var(--line);
  font-size: var(--f-sm);
}

.proza dt { color: var(--brass-ink); font-weight: 700; }
.proza dd { color: var(--muted); }

.proza .actualizat {
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--line);
  font-size: var(--f-xs);
}

/* Indicatorul de disponibilitate — culoarea nu poartă singură mesajul,
   textul „Deschis acum / Închis acum” îl spune explicit. */
.disponibilitate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-2);
  margin-block-end: var(--s-4);
  padding-block-end: var(--s-3);
  border-block-end: 1px solid var(--line);
  line-height: 1.5;
}

.disponibilitate b {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--muted);
  font-size: var(--f-sm);
  font-weight: 700;
}

.disponibilitate b::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
}

.disponibilitate.deschis b { color: var(--deschis-ink); }

.disponibilitate small { color: var(--muted); font-size: var(--f-xs); }

/* --- 10d. Matricea de transparență ------------------------------------------
   Date tabulare reale, deci un <table>. Pe ecran îngust rândurile se desfac
   în fișe, fiecare celulă purtându-și eticheta din atributul data-eticheta —
   fără a duplica textul în markup.
   --------------------------------------------------------------------------- */

.matrice {
  margin-block-start: var(--s-3);
  overflow-x: auto; /* tabelul derulează în cutia lui, pagina niciodată */
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.matrice table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--f-sm);
}

.matrice th[scope="col"] {
  padding: var(--s-3) var(--s-4);
  background: var(--navy);
  color: var(--navy-ink);
  font-family: var(--sans);
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: start;
  white-space: nowrap;
}

.matrice th[scope="row"] {
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--f-base);
  font-weight: 700;
  text-align: start;
}

.matrice :is(th[scope="row"], td) {
  padding: var(--s-3) var(--s-4);
  border-block-start: 1px solid var(--line);
  vertical-align: baseline;
}

.matrice td { color: var(--muted); }

.matrice tbody tr:nth-child(even) :is(th, td) { background: var(--surface); }

/* Celulă rămasă de completat — semnalată vizual, nu doar prin text */
.matrice td.gol {
  color: var(--avert-ink);
  background: var(--avert-bg) !important;
  font-style: italic;
}

@media (width < 46em) {
  /* Antetul de coloană dispare; fiecare celulă își poartă eticheta. */
  .matrice thead { display: none; }
  .matrice, .matrice table, .matrice tbody, .matrice tr { display: block; }

  .matrice tr { border-block-start: 2px solid var(--brass); }
  .matrice tr:first-child { border-block-start: 0; }

  .matrice :is(th[scope="row"], td) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.15rem;
    padding: var(--s-2) var(--s-3);
    border-block-start: 0;
  }

  .matrice th[scope="row"] {
    padding-block-start: var(--s-3);
    background: var(--surface);
  }

  .matrice td::before {
    content: attr(data-eticheta);
    color: var(--brass-ink);
    font-size: var(--f-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .matrice td:last-child { padding-block-end: var(--s-3); }
}

/* Titlu accesibil, ascuns vizual — păstrează informația pentru cititoarele
   de ecran fără să adauge text pe ecran. Nu `display: none`, care ar ascunde-o
   și de ele. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- 10e. Cererea completabilă ----------------------------------------------
   Formular în stânga, documentul în dreapta. La tipărire rămâne doar
   documentul, așa cum arată pe hârtie.
   --------------------------------------------------------------------------- */

.pagina-cerere {
  display: grid;
  gap: var(--s-5);
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--s-6) var(--gutter);
  align-items: start;
}

@media (width >= 62em) {
  .pagina-cerere {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--s-6);
  }
  /* Formularul rămâne la vedere cât timp se citește documentul lung. */
  .formular-cerere { position: sticky; top: 5.5rem; }
}

.formular-cerere { display: grid; gap: var(--s-3); align-content: start; }
.formular-cerere h1 { font-size: var(--f-h2); }
.formular-cerere > p { color: var(--muted); font-size: var(--f-sm); }

.alte-cereri ul {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-3);
  border-block: 1px solid var(--line);
  list-style: none;
}

.alte-cereri a {
  display: block;
  padding: 0.35rem 0;
  color: var(--muted);
  font-size: var(--f-sm);
  text-decoration: none;
}

.alte-cereri a:hover { color: var(--ink); }

.alte-cereri a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  padding-inline-start: var(--s-2);
  border-inline-start: 2px solid var(--brass);
}

.formular-cerere fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--s-3);
  margin-block-start: var(--s-3);
}

.formular-cerere legend {
  padding: 0;
  margin-block-end: var(--s-1);
  color: var(--brass-ink);
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.actiuni-cerere { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Indicația despre antetele browserului — se citește, nu se sare peste ea */
.note.atentie {
  padding: var(--s-3);
  border-inline-start: 3px solid var(--brass);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

.formular-cerere kbd {
  padding: 0.1em 0.35em;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  font-family: ui-monospace, monospace;
  font-size: 0.9em;
}

/* --- Documentul ------------------------------------------------------------ */

.document {
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--serif);
  font-size: var(--f-base);
  line-height: 1.9;
  text-align: justify;
  hyphens: auto;
}

.document > p { margin-block-end: var(--s-3); }

.doc-antet {
  margin-block-end: var(--s-5);
  font-style: normal;
  line-height: 1.6;
  text-align: end;
}

.doc-titlu {
  margin-block: var(--s-5) var(--s-4);
  font-size: var(--f-h3);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

/* Valoarea completată de solicitant; goală, rămâne un spațiu de scris de mână */
.camp { font-weight: 600; }

.camp.gol::before {
  content: "……………………";
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.05em;
}

.doc-semnatura {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-5);
  margin-block-start: var(--s-6);
  text-align: start;
}

.linie-semnatura {
  display: block;
  width: 12rem;
  margin-block-start: var(--s-5);
  border-block-end: 1px solid var(--ink);
}

/* --- Tipărire: rămâne doar documentul --------------------------------------- */

@media print {
  /* Pe pagina de cerere se tipărește actul, nu site-ul: dispar antetul,
     subsolul cu datele biroului și formularul. Datele biroului apar oricum
     în document, la „Către”. */
  body.doar-documentul > header,
  body.doar-documentul > footer,
  body.doar-documentul .formular-cerere { display: none !important; }

  /* Marginile unei pagini A4 de act. Browserul le folosește când utilizatorul
     lasă „Margini: implicite”. */
  @page { margin: 2cm 1.8cm; }

  .pagina-cerere { display: block; padding: 0; max-width: none; gap: 0; }

  .document {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #000;
    font-size: 12pt;
    line-height: 1.7;
  }

  .doc-titlu { font-size: 14pt; }
  .camp { font-weight: 700; }
  .camp.gol::before { color: #000; }
  .linie-semnatura { border-block-end-color: #000; }

  /* Un paragraf nu se rupe între pagini decât dacă nu încape deloc. */
  .document p { break-inside: avoid; }
  .doc-semnatura { break-inside: avoid; }
}

/* --- 11. Buttons ----------------------------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-3); }

/* Butoanele pornesc de la cerneala paginii, nu de la cea a antetului.
   Invers — cum era înainte — butonul secundar avea text crem și rămânea
   invizibil pe tema luminoasă (1,13:1), vizibil doar pe cea întunecată. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: 0.7rem var(--s-5);
  /* --line este o linie de despărțire, prea palidă ca margine de buton:
     dădea 1,21:1 pe hârtie, deci butonul nu avea contur vizibil. */
  border: 1px solid color-mix(in srgb, var(--ink) 50%, transparent);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: 600 var(--f-sm)/1 var(--sans);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.button:hover {
  border-color: var(--brass);
  background: color-mix(in srgb, var(--brass) 10%, transparent);
}

.button.primary {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--navy-ink);
}

.button.primary:hover {
  background: color-mix(in srgb, var(--navy) 86%, var(--brass));
  border-color: color-mix(in srgb, var(--navy) 86%, var(--brass));
}

/* În antetul bleumarin se inversează: acolo fundalul este mereu închis,
   indiferent de tema aleasă de vizitator. */
.hero .button {
  border-color: color-mix(in srgb, var(--navy-ink) 45%, transparent);
  color: var(--navy-ink);
}

.hero .button:hover {
  border-color: var(--navy-ink);
  background: color-mix(in srgb, var(--navy-ink) 14%, transparent);
}

.hero .button.primary {
  background: var(--brass-lift);
  border-color: var(--brass-lift);
  color: var(--navy);
}

.hero .button.primary:hover {
  background: color-mix(in srgb, var(--brass-lift) 82%, #fff);
  border-color: color-mix(in srgb, var(--brass-lift) 82%, #fff);
}

/* --- 12. Contact form and address ------------------------------------------ */

#contact > form {
  display: grid;
  gap: var(--s-3);
  margin-block-start: var(--s-2);
}

.field { display: grid; gap: var(--s-1); }

.field label { font-size: var(--f-sm); font-weight: 600; }
.field label small { color: var(--muted); font-weight: 400; }

.field input:not([type="checkbox"]),
.field textarea {
  width: 100%;
  padding: 0.7rem var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: var(--f-base)/1.5 var(--sans);
}

.field textarea { resize: vertical; min-height: 8rem; }

.field :is(input, textarea):focus-visible { border-color: var(--link); outline-offset: 1px; }

.consent {
  grid-template-columns: auto 1fr;
  gap: var(--s-2);
  align-items: start;
  font-size: var(--f-sm);
}

.consent input { margin-block-start: 0.3em; accent-color: var(--navy); }
.consent label { font-weight: 400; color: var(--muted); }

#contact > address {
  align-self: start;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--f-sm);
  font-style: normal;
  line-height: 1.9;
}

/* Datele de contact — perechi etichetă/valoare, deci <dl>.
   Anterior erau <b>-uri, iar selectorul `#contact address b` (specificitate
   1,0,2) învingea `.disponibilitate b` (0,1,1) și strica indicatorul de
   disponibilitate, transformându-l în text cu majuscule. */
.date-contact {
  display: grid;
  gap: var(--s-3) var(--s-5);
  margin-block-start: var(--s-4);
}

.date-contact dt {
  color: var(--brass-ink);
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.date-contact dd {
  margin-block-start: 0.2rem;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.5;
}

.date-contact a { font-weight: 600; text-decoration: none; }
.date-contact a:hover { text-decoration: underline; }

/* Formularul și adresa împart un rând, dacă există loc pentru amândouă.
   Condiția `:has(> form)` contează: cu formularul oprit din configurare,
   adresa trebuie să curgă normal, nu să rămână împinsă în dreapta. */
@media (width >= 64em) {
  #contact:has(> form) > form    { grid-row: 3; width: min(100%, 32rem); justify-self: start; }
  #contact:has(> form) > address { grid-row: 3; width: min(100%, 20rem); justify-self: end; }
}

/* --- Cardul de contact când formularul este oprit ---------------------------
   Nu mai este o coloană laterală, ci conținutul principal al secțiunii:
   ocupă toată lățimea, primește o linie de alamă în capăt și își desface
   datele pe mai multe coloane, ca să se citească dintr-o privire.
   --------------------------------------------------------------------------- */

#contact:not(:has(> form)) > address {
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-block-start: 3px solid var(--brass);
  overflow: hidden;
}

/* Banda de stare devine antetul cardului, pe fundal propriu. */
#contact:not(:has(> form)) .disponibilitate {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border-block-end: 1px solid var(--line);
}

/* Coloane CSS, nu grilă: într-o grilă fiecare <dt> și <dd> este un element
   separat, iar eticheta ar ajunge pe altă coloană decât valoarea ei. Fluxul
   pe coloane le păstrează lipite, iar `break-after` interzice ruperea între
   etichetă și valoare. Numărul de coloane se adaptează singur. */
#contact:not(:has(> form)) .date-contact {
  display: block;
  columns: 3 14rem;
  column-gap: var(--s-6);
  margin: 0;
  padding: var(--s-5) var(--s-4);
}

#contact:not(:has(> form)) .date-contact dt {
  break-after: avoid;
  break-inside: avoid;
}

#contact:not(:has(> form)) .date-contact dd {
  break-inside: avoid;
  margin-block: 0.2rem var(--s-4);
}

#contact:not(:has(> form)) .date-contact dd:last-child { margin-block-end: 0; }

/* Numărul de telefon este acțiunea principală: se vede ca atare. */
#contact:not(:has(> form)) .date-contact .principal a {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* --- 13. Footer ------------------------------------------------------------ */

footer {
  padding-block: var(--s-6) var(--s-5);
  row-gap: var(--s-5);
  background: var(--navy);
  color: var(--navy-ink);
}

footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  list-style: none;
  padding-block-end: var(--s-4);
  border-block-end: 1px solid color-mix(in srgb, var(--navy-ink) 18%, transparent);
}

footer a { color: inherit; }

footer nav a {
  font-size: var(--f-sm);
  text-decoration: none;
  opacity: 0.78;
}

footer nav a:hover, footer nav a:focus-visible { opacity: 1; text-decoration: underline; }

footer > dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--s-4);
  font-size: var(--f-sm);
}

footer dt {
  margin-block-end: var(--s-1);
  color: var(--brass-lift);
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

footer dd { line-height: 1.55; opacity: 0.9; }

footer > p { color: color-mix(in srgb, var(--navy-ink) 70%, transparent); }

/* --- 14. Skip link ---------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--s-3);
  top: -5rem;
  z-index: 20;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--navy-ink);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus { top: var(--s-2); }

/* --- 15. User preferences ---------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root { --muted: var(--ink); --line: var(--ink); --rule: var(--ink); }
}

@media print {
  body > header, .skip-link, #contact > form, .actions { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main > section { content-visibility: visible; padding-block: 1rem; background: none !important; }
  main > section.hero, footer { background: none; color: #000; }
  #servicii > ul { border-color: #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}