/* ==========================================================================
   components.css — COMPONENTE REUTILIZABILE
   --------------------------------------------------------------------------
   Depinde de: tokens.css, base.css
   Index:  1. Butoane      2. Carduri       3. Etichete (badge) & tip conținut
           4. Formulare    5. Acordeon FAQ  6. Tabele de date
           7. Registru documente (meta ediție/revizie)   8. Alerte/notificări
           9. Banner cookies (CMP)  10. Timeline electoral  11. Pași
   Convenție BEM: .bloc, .bloc__element, .bloc--modificator, .is-stare
   ========================================================================== */

/* 1. BUTOANE ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 0.7rem 1.25rem; border-radius: var(--r-md); border: 2px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn svg { width: 1.1em; height: 1.1em; }
/* Primar = AUR pe text NEGRU (contrast 11.4:1). Este butonul „Devino membru”. */
.btn--primary { background: var(--ale-aur); color: var(--ws-black); border-color: var(--ale-aur); }
.btn--primary:hover { background: var(--ale-aur-300); border-color: var(--ale-aur-300); }
/* Secundar = AZUR pe alb */
.btn--secondary { background: var(--ale-azur); color: var(--ws-white); border-color: var(--ale-azur); }
.btn--secondary:hover { background: var(--ale-azur-600); border-color: var(--ale-azur-600); }
/* Contur — pe fond deschis */
.btn--outline { background: transparent; color: var(--ale-azur); border-color: var(--ale-azur); }
.btn--outline:hover { background: var(--ale-azur-100); }
/* Fantomă — pe fond navy (header, hero) */
.btn--ghost { background: transparent; color: var(--ws-white); border-color: var(--ale-argint); }
.btn--ghost:hover { background: var(--ale-navy-800); border-color: var(--ws-white); }
.btn--sm { padding: 0.4rem 0.8rem; font-size: var(--fs--1); }
.btn--lg { padding: 0.95rem 1.75rem; font-size: var(--fs-0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* 2. CARDURI ------------------------------------------------------------
   Ierarhie de raze: cardul are --r-md; panoul de secțiune are --r-lg.
   Umbra apare doar la carduri interactive (linkuri), nu decorativ. */
.card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); }
.card h3 { font-size: var(--fs-1); margin-bottom: var(--sp-2); }
.card p:last-child { margin-bottom: 0; }
.card--link { display: block; color: inherit; text-decoration: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.card--link:hover { border-color: var(--ale-azur); box-shadow: var(--shadow-md); }
.card--link h3 { color: var(--ale-azur); }
.card--dark { background: var(--bg-dark-elevated); border-color: var(--border-on-dark); color: var(--fg-on-dark); }
.card--dark p { color: var(--fg-on-dark-muted); }
.card--accent { border-top: 4px solid var(--ale-aur); }
.card__icon { width: 2.5rem; height: 2.5rem; color: var(--ale-azur); margin-bottom: var(--sp-3); }
.card--dark .card__icon { color: var(--ale-aur-300); }
.card__meta { font-size: var(--fs--1); color: var(--fg-muted); margin-bottom: var(--sp-2); }
.card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* 3. ETICHETE (badge) — tipul de conținut este INFORMAȚIE editorială
   (cerință §7.4: separăm comunicatele oficiale de noutăți). Culorile
   au semnificație fixă și sunt documentate în README. */
.badge { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.2em 0.6em; border-radius: var(--r-sm); border: 1px solid; line-height: 1.4; }
.badge--comunicat { color: var(--ws-white); background: var(--ale-azur); border-color: var(--ale-azur); }      /* poziție oficială aprobată */
.badge--informare { color: var(--ale-azur); background: var(--ale-azur-100); border-color: var(--ale-azur); }
.badge--noutate   { color: var(--fg); background: var(--bg-elevated); border-color: var(--border-strong); }
.badge--electoral { color: var(--ws-black); background: var(--ale-aur-300); border-color: var(--ale-aur); }
.badge--publicatie{ color: var(--fg); background: var(--ale-argint); border-color: var(--border-strong); }
.badge--public    { color: var(--ws-white); background: var(--success); border-color: var(--success); }        /* document marcat PUBLIC */
.badge--intern    { color: var(--ws-white); background: var(--fg-muted); border-color: var(--fg-muted); }      /* doar portal membri */

/* 4. FORMULARE ----------------------------------------------------------
   Toate câmpurile: <label> explicit, text de ajutor cu id legat prin
   aria-describedby, mesaj de eroare cu role="alert". Vezi forms.js. */
.form { max-width: 44rem; }
.form fieldset { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); margin: 0 0 var(--sp-5); background: var(--bg-elevated); }
.form legend { font-family: var(--font-display); font-weight: 600; padding: 0 var(--sp-2); }
.field { margin-bottom: var(--sp-4); }
.field label, .field .field__label { display: block; font-weight: 600; margin-bottom: var(--sp-1); }
.field .req { color: var(--danger); font-weight: 700; }
.field__help { font-size: var(--fs--1); color: var(--fg-muted); margin: 0 0 var(--sp-2); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="password"],
.field select, .field textarea {
  width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--ws-white); min-height: 2.75rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--ale-azur); }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: var(--danger); border-width: 2px; }
.field__error { display: none; color: var(--danger); font-size: var(--fs--1); font-weight: 600; margin-top: var(--sp-1); }
.field.is-invalid .field__error { display: block; }
.choice { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-3); }
.choice input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--ale-azur); }
.choice label { font-weight: 400; margin: 0; }
.form__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-5); }
.form__gdpr { font-size: var(--fs--1); color: var(--fg-muted); border-left: 3px solid var(--ale-aur); padding-left: var(--sp-3); margin-bottom: var(--sp-5); }
.honeypot { position: absolute; left: -9999px; }         /* anti-spam, nu se afișează */

/* 5. ACORDEON (FAQ) — nativ <details>/<summary>: accesibil fără JS */
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; padding: var(--sp-4) 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-1); list-style: none; display: flex; justify-content: space-between; gap: var(--sp-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--ale-azur); flex-shrink: 0; }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 0 var(--sp-5); max-width: var(--measure); color: var(--fg-muted); }

/* 6. TABELE DE DATE (transparență, registre) */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elevated); }
.table { font-size: var(--fs--1); min-width: 40rem; }
.table th, .table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table thead th { background: var(--ale-navy); color: var(--ws-white); font-weight: 600; position: sticky; top: 0; }
.table tbody tr:hover { background: var(--ale-azur-100); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table caption { text-align: left; padding: var(--sp-3) var(--sp-4); font-weight: 600; caption-side: top; }

/* 7. REGISTRU DE DOCUMENTE — meta ediție / revizie / dată / hash
   Standardul intern al RTAI (versiune, aprobare, istoric) aplicat public. */
.doc-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-3); font-size: var(--fs--1); background: var(--bg-elevated); border: 1px solid var(--border); border-left: 4px solid var(--ale-azur); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-6); }
.doc-meta dt { color: var(--fg-muted); }
.doc-meta dd { margin: 0; font-weight: 600; }
.doc-meta code { font-size: 0.75rem; word-break: break-all; }
.doc-item { display: grid; gap: var(--sp-3); grid-template-columns: 1fr auto; align-items: start; padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.doc-item h3 { font-size: var(--fs-1); margin-bottom: var(--sp-1); }
.doc-item p { margin: 0 0 var(--sp-2); color: var(--fg-muted); }
.doc-item__meta { font-size: var(--fs--1); color: var(--fg-muted); }
.doc-item__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 40em) { .doc-item { grid-template-columns: 1fr; } }

/* 8. ALERTE — mesaje de stare (nu decor) */
.alert { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); border: 1px solid; margin-bottom: var(--sp-5); max-width: var(--measure); }
.alert p:last-child { margin: 0; }
.alert--info    { background: var(--ale-azur-100); border-color: var(--ale-azur); }
.alert--warning { background: #fff7d6; border-color: var(--ale-aur); }
.alert--success { background: #e8f5e8; border-color: var(--success); }
.alert--danger  { background: #fde8e8; border-color: var(--danger); }
.alert--legal   { background: var(--bg-elevated); border-color: var(--border-strong); font-size: var(--fs--1); }

/* 9. BANNER COOKIES (CMP) — Legea 506/2004 + GDPR. Vezi cookies.js.
   Ascuns implicit; JS îl afișează doar dacă nu există consimțământ salvat. */
.cookie-banner { position: fixed; inset: auto 0 0 0; z-index: var(--z-cookie); background: var(--ale-navy); color: var(--fg-on-dark); border-top: 4px solid var(--ale-aur); padding: var(--sp-5) var(--gutter); box-shadow: var(--shadow-lg); display: none; }
.cookie-banner.is-visible { display: block; }
.cookie-banner__inner { max-width: var(--container); margin-inline: auto; display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cookie-banner h2 { font-size: var(--fs-1); margin-bottom: var(--sp-2); }
.cookie-banner p { margin: 0; color: var(--fg-on-dark-muted); font-size: var(--fs--1); max-width: var(--measure); }
.cookie-banner a { color: var(--link-on-dark); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cookie-banner__prefs { grid-column: 1 / -1; display: none; border-top: 1px solid var(--border-on-dark); padding-top: var(--sp-4); }
.cookie-banner.is-expanded .cookie-banner__prefs { display: block; }
.cookie-banner .choice label { color: var(--fg-on-dark); }
@media (max-width: 48em) { .cookie-banner__inner { grid-template-columns: 1fr; } }

/* 10. TIMELINE ELECTORAL — chiar este o secvență (R005), deci numerotarea
   și linia verticală codifică informație, nu decor. */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0.9rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--border-strong); }
.timeline li { position: relative; padding: 0 0 var(--sp-5) 3rem; }
.timeline li::before { content: attr(data-step); position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--border-strong); font-family: var(--font-display); font-weight: 700; font-size: var(--fs--1); display: grid; place-items: center; }
.timeline li.is-done::before    { background: var(--success); border-color: var(--success); color: var(--ws-white); }
.timeline li.is-current::before { background: var(--ale-aur); border-color: var(--ale-aur); color: var(--ws-black); }
.timeline h3 { font-size: var(--fs-0); margin-bottom: var(--sp-1); }
.timeline time { font-size: var(--fs--1); color: var(--fg-muted); }

/* 11. PAȘI (procedura de aderare — tot o secvență reală) */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.steps li { counter-increment: step; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ale-navy); color: var(--ale-aur-300); font-family: var(--font-display); font-weight: 700; margin-bottom: var(--sp-3); }
.steps h3 { font-size: var(--fs-1); }