/* ==========================================================================
   a11y-extra.css - completări de accesibilitate (mod întunecat + contrast ridicat)
   pentru template-ul primărie.
   NU face parte din referință: style.css (copiat verbatim) acoperă doar clasele
   folosite de primaria.aiow.ro, iar petitions.css al referinței nu are deloc reguli
   de dark mode (fundaluri albe hardcodate). Fișierul acesta acoperă:
     1) componentele Bootstrap folosite de paginile portate în SaaS pe care
        referința nu le folosea (.progress, .form-check-input, .alert-danger,
        .card-header, utilitarele de bordură);
     2) pagina de petiții, ale cărei culori sunt hardcodate în petitions.css.
   Fișierele copiate din referință rămân neatinse - completările stau separat.
   ========================================================================== */

/* --- 0. Utilitar pentru cititoare de ecran (caption-uri de tabel) ---
   Bootstrap are .visually-hidden, dar folosim același nume de clasă ca tema
   hibridă, ca marcajul modulelor să fie identic în ambele teme. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* <main> primește tabindex="-1" ca ținta skip-link-ului să fie focalizabilă;
   fără regula asta browserul ar desena un contur în jurul întregii zone de conținut. */
main:focus { outline: none; }

/* --- 1. Componente Bootstrap neacoperite de style.css --- */
body.dark-mode .card-header {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--border);
    color: var(--text-primary);
}
body.dark-mode .alert-danger {
    background-color: #3A1F24;
    border-color: #5C2B33;
    color: #F1AEB5;
}
body.dark-mode .progress {
    background-color: #2A2A3A;
}
body.dark-mode .form-check-input {
    background-color: #2A2A3A;
    border-color: var(--border-dark);
}
body.dark-mode .form-check-input:checked {
    background-color: var(--primary-readable, var(--primary));
    border-color: var(--primary-readable, var(--primary));
}
body.dark-mode .form-check-label {
    color: var(--text-primary);
}
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-start,
body.dark-mode .border-end {
    border-color: var(--border) !important;
}
body.dark-mode hr {
    border-color: var(--border);
}

/* --- 2. Pagina de petiții (petitions.css are culori hardcodate) --- */
body.dark-mode .petitions-nav-btn {
    color: var(--text-secondary);
}
body.dark-mode .petitions-nav-btn:hover {
    background: #24242F;
    color: var(--text-primary);
}
body.dark-mode .petition-success-card,
body.dark-mode .petition-form-card,
body.dark-mode .petition-detail-card,
body.dark-mode .petition-track-card {
    background: var(--bg-white);
    border-color: var(--border);
    color: var(--text-primary);
}
body.dark-mode .petition-detail-header {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border);
}
body.dark-mode .petition-info-banner {
    background: #1A1A24;
    border-color: var(--border);
}
body.dark-mode .info-step-icon {
    background: #24242F;
    color: var(--primary-readable, var(--primary));
}
body.dark-mode .info-step-text,
body.dark-mode .detail-label,
body.dark-mode .timeline-label {
    color: var(--text-secondary);
}
body.dark-mode .success-details,
body.dark-mode .success-detail-row {
    background: #1A1A24;
    border-color: var(--border);
}
body.dark-mode .detail-value,
body.dark-mode .petition-subject,
body.dark-mode .registration-number {
    color: var(--text-primary);
}
body.dark-mode .petition-content-text,
body.dark-mode .petition-response {
    background: #1A1A24;
    border-color: var(--border);
    color: var(--text-primary);
}
body.dark-mode .petition-info-grid .info-item {
    background: #1A1A24;
    border-color: var(--border);
}
body.dark-mode .info-label {
    color: var(--text-muted);
}
body.dark-mode .info-value {
    color: var(--text-primary);
}
body.dark-mode .timeline-dot {
    background: #24242F;
    border-color: var(--border-dark);
    color: var(--text-secondary);
}
body.dark-mode .timeline-step.completed .timeline-dot,
body.dark-mode .timeline-step.current .timeline-dot {
    background: var(--primary);
    border-color: var(--primary-readable, var(--primary));
    color: #fff;
}
body.dark-mode .petition-legal-note {
    background: #1A1A24;
    border-color: var(--border);
    color: var(--text-secondary);
}

/* --- 3. Tabelele paginilor portate (decisions/mol/transparency) --- */
body.dark-mode .decisions-table-card,
body.dark-mode .decisions-filters-card {
    background: var(--bg-white);
}
body.dark-mode .decision-title {
    color: var(--text-primary);
}
body.dark-mode .decisions-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}
body.dark-mode .search-result-item {
    background: var(--bg-white);
}

/* ==========================================================================
   CONTRAST RIDICAT
   style.css acoperă contrastul ridicat mult mai bine decât modul întunecat
   (179 de reguli, redefinește și variabilele), dar îi lipsesc componentele
   pe care referința nu le folosea și tot ce ține de pagina de petiții.
   ========================================================================== */
.high-contrast .progress {
    background-color: #1a1a1a;
    border: 1px solid #FFFFFF;
}
.high-contrast .progress-bar {
    background-color: #FFD700;
    color: #000000;
}
.high-contrast .form-check-input {
    background-color: #000000;
    border: 2px solid #FFFFFF;
}
.high-contrast .form-check-input:checked {
    background-color: #FFD700;
    border-color: #FFFFFF;
}
.high-contrast .form-check-label {
    color: #FFFFFF;
}

/* Pagina de petiții - petitions.css are culori fixe, care ignoră contrastul. */
.high-contrast .petitions-hero-icon,
.high-contrast .info-step-icon,
.high-contrast .success-icon-wrap {
    background: #000000;
    color: #FFD700;
    border: 2px solid #FFFFFF;
}
.high-contrast .petitions-title,
.high-contrast .petition-subject,
.high-contrast .registration-number,
.high-contrast .detail-value,
.high-contrast .info-value {
    color: #FFFFFF;
}
.high-contrast .petitions-subtitle,
.high-contrast .info-step-text,
.high-contrast .detail-label,
.high-contrast .info-label,
.high-contrast .timeline-label {
    color: #E0E0E0;
}
.high-contrast .petitions-nav-btn {
    color: #FFFFFF;
    border: 1px solid #555555;
}
.high-contrast .petitions-nav-btn.active {
    background: #FFD700;
    color: #000000;
    border-color: #FFFFFF;
}
.high-contrast .petition-success-card,
.high-contrast .petition-form-card,
.high-contrast .petition-detail-card,
.high-contrast .petition-track-card,
.high-contrast .petition-info-banner,
.high-contrast .success-details,
.high-contrast .success-detail-row,
.high-contrast .petition-content-text,
.high-contrast .petition-response,
.high-contrast .petition-info-grid .info-item,
.high-contrast .petition-legal-note {
    background: #1a1a1a;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
}
.high-contrast .petition-detail-header {
    background: #000000;
    border-bottom: 1px solid #FFFFFF;
}
.high-contrast .timeline-dot {
    background: #000000;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
}
.high-contrast .timeline-step.completed .timeline-dot,
.high-contrast .timeline-step.current .timeline-dot {
    background: #FFD700;
    border-color: #FFFFFF;
    color: #000000;
}
.high-contrast .tracking-code {
    color: #FFD700;
}

/* ---------------------------------------------------------------------------
   Ierarhia titlurilor (WCAG 1.3.1)

   Marcajul copiat din referință folosea nivelurile de titlu ca stil, nu ca
   structură: numele instituției din antet era h1 (al doilea h1 al paginii,
   după titlul propriu-zis), titlurile din subsol erau h5 direct după h2, iar
   cardurile de secțiune din Monitorul Oficial Local erau h3 direct sub h1.
   Pentru un cititor de ecran asta înseamnă niveluri sărite și două titluri
   principale pe aceeași pagină.

   Marcajul a fost corectat (p.h5 în antet, h2.h5 în subsol, h2 la cardurile
   MOL); aici doar refacem ASPECTUL identic pentru noile tag-uri, fiindcă
   style.css e copie verbatim a referinței și nu se modifică.
   --------------------------------------------------------------------------- */
.mol-section-info h2 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.15rem;
    line-height: 1.3;
}

/* Titlurile coloanelor din subsol: regula de aspect din style.css e legată de tagul
   h5 (.footer-column h5), nu de clasă, deci trecerea la h2.h5 pierdea majusculele,
   spațierea și linia de accent. Reprodusă identic pentru noul tag. */
.footer-column h2.h5 {
    color: var(--text-inverse);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--accent);
    display: inline-block;
}

/* Numele instituției din antet în modul contrast ridicat: regula era
   .high-contrast .site-title h1, iar tagul e acum p. */
.high-contrast .site-title p.h5 {
    color: #FFFFFF;
}

/* Media din conținutul editorial nu are voie să lățească pagina.
   Bootstrap 5 pune pe `img` doar `vertical-align:middle`, nu și `max-width`
   (aia e clasa `.img-fluid`, pe care conținutul importat sau scris în WYSIWYG
   n-o are). O fotografie de anunț scanată la 1978px împingea tot layoutul în
   afara ecranului pe telefon - scroll orizontal pe pagină, nu pe imagine.
   Tabelele și blocurile preformatate primesc scroll propriu: strânse, ar
   deveni ilizibile, iar lățimea lor trebuie să rămână a lor. */
.content-main img,
.content-main video,
.content-main iframe,
.content-main embed,
.content-main object {
    max-width: 100%;
    height: auto;
}

.content-main iframe {
    width: 100%;
}

/* Tabelele ocupă toată lățimea coloanei de conținut.
   
   Regula dinainte era `display: block; width: max-content; overflow-x: auto`, gândită ca
   tabelele late importate din WordPress să se poată derula lateral pe telefon. Efectul
   secundar: ORICE tabel se strângea la lățimea conținutului, deci două tabele alăturate
   ieșeau de lățimi diferite, iar registrele cu trei coloane scurte ocupau un sfert de
   pagină. Textul din celule se rupe la nevoie (`.content-main` are overflow-wrap), iar
   acolo unde chiar trebuie derulare, marcajul temei o dă din container
   (`.table-responsive`, `.doc-table-card`). */
.content-main table {
    display: table;
    width: 100%;
    max-width: 100%;
    table-layout: auto;
}

.content-main pre {
    overflow-x: auto;
}

/* URL-uri lungi lipite în text (frecvente în anunțuri) rup altfel containerul. */
.content-main {
    overflow-wrap: break-word;
}

/* Tabelul de documente: sub 640px se stivuiește. `.content-main table` (mai sus) dă
   scroll orizontal, ceea ce pentru trei coloane e răspunsul greșit - dar are aceeași
   specificitate (0,1,1) ca `.doc-list` simplu, deci trebuie bătută cu `.content-main
   table.doc-list` (0,2,1), la fel ca pe desktop mai jos. */
.content-main table.doc-list {
    display: table;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

@media (max-width: 640px) {
    .content-main table.doc-list,
    .content-main .doc-list tbody,
    .content-main .doc-list tr,
    .content-main .doc-list td { display: block; width: 100%; }
    .content-main .doc-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .content-main .doc-list tr { padding: .5rem 0; }
    .content-main .doc-list td { border: 0; padding: .15rem 0; }
    .content-main .doc-list td:nth-child(2), .content-main .doc-list td:nth-child(3) { display: inline-block; width: auto; margin-right: .9rem; }
}

/* Pagini de tip „conducere": fotografiile oamenilor vin din surse diferite, cu
   raporturi și rezoluții diferite (pe Odoreu: 1000x1500, 640x691, 1337x1289 -
   plus una care era chiar miniatura de 150x150). Lăsate în voia lor, se afișează
   inegale, una mare și una mică pe același rând. Cadrul comun le egalizează, iar
   `object-fit: cover` păstrează chipul centrat în loc să deformeze imaginea.

   Regula e legată de `.person-card`, NU de imaginile din conținut în general:
   printre acelea sunt documente scanate A4 (anunțuri de concurs, comunicate) care
   trebuie să rămână la mărimea lor ca să fie citibile. */
.content-main .person-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border, #DEE2E6);
    border-radius: .75rem;
    overflow: hidden;
    background: var(--bg-white, #fff);
}

.content-main .person-card img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    /* Pozele oficiale sunt încadrate larg, cu spațiu deasupra capului; tăiate din
       centru, oamenii ies decapitați la marginea de jos a cadrului. */
    object-position: center 20%;
    border-radius: 0;
    background: #f1f3f5;
}

.content-main .person-body {
    padding: .9rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1 1 auto;
}

/* Funcția e ce caută omul („cine e primarul?"), deci ea e ancora cardului; numele
   vine sub ea, mai liniștit. Invers - numele mare, funcția ca subtitlu - pagina
   răspunde la o întrebare pe care nimeni n-o pune. */
.content-main .person-card .person-role {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--primary-readable, var(--primary, #003366));
}

.content-main .person-card .person-name {
    margin: 0;
    color: var(--text-secondary, #5A6B7D);
}

.content-main .person-card .person-link {
    margin: .7rem 0 0;
    font-size: .9rem;
}

body.dark-mode .content-main .person-card { background: #1b1f27; }

/* Al treilea nivel de meniu, randat ca grup în același dropdown (vezi layout.php).
   Indentarea e singurul lucru care spune că intrarea ține de capul de grup de
   deasupra; fără ea, „2015…2023" ar părea frați cu „Componența". */
.main-nav .dropdown-menu .dropdown-item-sub {
    padding-left: 36px;
}
@media (max-width: 991px) {
    /* pe telefon tema împinge deja toate intrările la 32px; nivelul 3 mai face un pas */
    .main-nav .dropdown-menu .dropdown-item-sub { padding-left: 52px; }
}

/* Meniul deschis pe telefon trebuie să poată fi derulat.

   Tema face `.main-nav` `position: fixed` imediat ce pagina e derulată (`nav-sticky`,
   app.js). Un element fixat nu se mișcă odată cu pagina, iar lista noastră (Servicii
   online + 9 secțiuni + nivelul 3) e mai înaltă decât ecranul: tot ce era sub margine
   rămânea de neatins - „meniul e blocat". Lista primește propriul scroll, limitat la
   înălțimea ecranului; `overscroll-behavior` ține gestul în listă, nu îl pasează paginii. */
@media (max-width: 991px) {
    .main-nav .navbar-collapse {
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* Banda de logouri a paginilor de proiect (Interreg, PNRR).

   Pe sursa WordPress logourile erau ținute în poziție cu `alignleft`/`alignright` și
   paragrafe goale. La import, `sanitizeHtml()` taie atributul `style`, iar clasele WP
   nu există la noi - de aceea logourile ajunseseră într-o listă „Documente" la sfârșit,
   ca niște atașamente. Banda de aici le pune înapoi acolo unde le cere finanțatorul:
   sus, deasupra conținutului, și jos, deasupra notei de disclaimer.

   Înălțimea, nu lățimea, e ce trebuie fixat: logourile au proporții foarte diferite
   (sigla guvernului e pătrată, sloganul Interreg e 2465x132), iar o lățime comună le-ar
   face pe unele ilizibile. */
.content-main .page-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.content-main .page-logos-bottom {
    margin: 2rem 0 .75rem;
    padding: 1rem 0 0;
    border-bottom: 0;
    border-top: 1px solid #e9ecef;
}

.content-main .page-logos img {
    height: auto;
    max-width: 100%;
    /* max-height ține banda echilibrată; imaginile late (sloganul) se opresc din
       lățime, cele înalte (siglele) din înălțime. */
    max-height: 4.5rem;
    object-fit: contain;
}

/* Sloganul Interreg e o fâșie foarte lată și joasă: limitat pe înălțime ar rămâne
   microscopic, așa că îl lăsăm să ocupe lățimea disponibilă. */
.content-main .page-logos .page-logos-wide img {
    max-height: none;
    width: min(420px, 100%);
}

/* Siglele guvernamentale stau împreună, la dreapta, ca pe site-ul finanțatorului. */
.content-main .page-logos-gov {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.content-main .page-logos-gov img {
    max-height: 3.25rem;
}

.content-main .page-logos-note {
    font-size: .875rem;
    color: #5a6472;
    text-align: center;
    margin-bottom: 0;
}

body.dark-mode .content-main .page-logos,
body.dark-mode .content-main .page-logos-bottom {
    border-color: #2f3745;
}

body.dark-mode .content-main .page-logos-note {
    color: #9aa3ae;
}

/* Logourile finanțatorilor sunt gândite pe fundal alb; pe tema întunecată rămân pe o
   bandă albă, altfel textul lor negru dispare. */
body.dark-mode .content-main .page-logos img {
    background: #fff;
    padding: .35rem;
    border-radius: .25rem;
}

@media (max-width: 575.98px) {
    .content-main .page-logos {
        justify-content: center;
        text-align: center;
    }
}

/* ===== Organigrama instituției =====

   Structura din DOM e un <ul> imbricat, adică exact ce e o organigramă: o ierarhie.
   Fără CSS (sau la cititorul de ecran) rămâne o listă imbricată corectă, cu relațiile
   de subordonare intacte; cu CSS primește liniile de legătură.

   Două tratamente, nu unul, fiindcă cele două feluri de noduri nu se desenează la fel:

   - POZIȚIILE de conducere (consiliu, primar, viceprimar, secretar) sunt puține și
     formează lanțul de comandă: arbore desenat, cu bară orizontală între frați.
   - COMPARTIMENTELE sunt multe (șase sub secretar) și sunt egale între ele: panou de
     carduri sub poziția care le conduce. Desenate tot ca arbore, bara orizontală se
     rupea vizibil de îndată ce nodurile treceau pe al doilea rând - iar la șase
     compartimente trece pe orice ecran sub ~1400px.

   Ce încearcă să spună desenul, dincolo de cine cui se subordonează: CÂT DE MARE e
   fiecare structură. Numărul de posturi e singura cifră din organigrama oficială și e
   informația care chiar folosește cetățeanului („compartimentul care îmi rezolvă
   problema are 2 oameni sau 11?"), așa că e afișat ca dată, nu ca decor. */

/* Plasa de siguranță: dacă o etichetă foarte lungă împinge totuși un rând peste
   lățimea paginii, se derulează diagrama - nu se taie conținut în afara ecranului. */
.orgchart {
    margin: 1.5rem 0 0;
    max-width: 100%;
    overflow-x: auto;
}

/* Doar list-style aici. Spațierea stă pe .org-branch/.org-units: un `.orgchart ul`
   cu margin/padding are specificitate mai mare (0,1,1 vs 0,1,0) și le-ar anula - linia
   de legătură ajungea să treacă PRIN cutia de deasupra. */
.orgchart ul { list-style: none; }

/* `.page-body ul/li` (specificitate 0,1,1) bat selectorii de clasă simpli ai diagramei
   și îi dădeau un padding-left de 24px pe fiecare nivel - de aici liniile care păreau
   întrerupte: fiecare nivel era deplasat cu 12px față de cel de deasupra. De aceea
   TOATE regulile de mai jos sunt prefixate cu `.orgchart`. */
.orgchart li { margin: 0; }

/* --- lanțul de comandă --- */

.orgchart .org-branch {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 1.75rem 0 0;
    position: relative;
}

/* Linia verticală dintre două cutii e desenată din DOUĂ elemente (ramura coboară până
   la bară, nodul urcă de la bară). La limita lor, rotunjirea la pixel lăsa o
   întrerupere de 1px - vizibilă exact între „Consiliul Local" și „Primar". Fiecare
   segment intră cu 1px în vecin, deci îmbinarea nu mai poate cădea între pixeli. */
.orgchart .org-branch::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 0;
    height: calc(1.75rem + 2px);
    border-left: 2px solid var(--border-dark, #C4CDD5);
}

/* Frații împart lățimea în mod egal, ca panoul de compartimente de sub oricare din ei
   să aibă loc să se desfășoare pe mai multe coloane. */
/* `align-items: stretch`, nu `center`: cu `center`, ramura și panoul dinăuntru se
   strâng la conținut, iar grila cu auto-fit se rezolvă la o singură coloană oricât
   spațiu ar fi disponibil. Nodul se centrează singur, din marginile automate. */
.orgchart .org-branch > li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 1.75rem .5rem 0;
    flex: 0 1 auto;
    min-width: 0;
}

/* Un singur copil = nu împarte rândul cu nimeni, deci ocupă toată lățimea. Contează
   pentru panourile de compartimente de sub el: într-un element strâns la conținut,
   grila cu auto-fit se rezolvă la o singură coloană. Nodul rămâne centrat. */
.orgchart .org-branch > li:only-child {
    flex: 1 1 100%;
    width: 100%;
}

/* bara orizontală dintre frați: fiecare desenează jumătatea lui, capetele o opresc */
.orgchart .org-branch > li::before,
.orgchart .org-branch > li::after {
    content: "";
    position: absolute;
    top: -1px;
    width: 50%;
    height: calc(1.75rem + 1px);
    border-top: 2px solid var(--border-dark, #C4CDD5);
}

.orgchart .org-branch > li::before { right: 50%; }
.orgchart .org-branch > li::after  { left: 50%; }
.orgchart .org-branch > li:first-child::before,
.orgchart .org-branch > li:last-child::after { border-top: 0; }
.orgchart .org-branch > li:only-child::before,
.orgchart .org-branch > li:only-child::after { display: none; }

/* rădăcina nu atârnă de nimic */
.orgchart > .org-branch { padding-top: 0; }
.orgchart > .org-branch > li { padding-top: 0; }
.orgchart > .org-branch::before,
.orgchart > .org-branch > li::before,
.orgchart > .org-branch > li::after { display: none; }
.orgchart > .org-branch > li > .org-node::before { display: none; }

.orgchart .org-node {
    position: relative;
    margin: 0 auto;
    /* Elementul de listă are voie să se strângă, ca rândul să încapă în pagină; cutia
       în sine, nu - altfel fratele cu panoul lat de compartimente o turtește. */
    flex-shrink: 0;
    min-width: 11rem;
    max-width: 15rem;
    padding: .7rem 1rem;
    border: 1px solid var(--border-dark, #C4CDD5);
    border-radius: .5rem;
    background: #fff;
    text-align: center;
    line-height: 1.35;
}

/* coborârea de la bară până la nod */
.orgchart .org-node::before {
    content: "";
    position: absolute;
    top: calc(-1.75rem - 1px);
    left: 50%;
    width: 0;
    height: calc(1.75rem + 2px);
    border-left: 2px solid var(--border-dark, #C4CDD5);
}

.orgchart .org-role {
    display: block;
    font-weight: 700;
    color: var(--primary-readable, var(--primary, #003366));
}

.orgchart .org-person {
    display: block;
    margin-top: .15rem;
    font-size: .9rem;
    color: var(--text-secondary, #5A6B7D);
}

/* Cine conduce e plin, cine e ales are contur gros. Ierarhia se citește din greutate,
   nu dintr-o culoare diferită pentru fiecare cutie. */
.orgchart .org-node-lead {
    background: var(--primary, #003366);
    border-color: var(--primary-readable, var(--primary, #003366));
}

.orgchart .org-node-lead .org-role { color: #fff; }
.orgchart .org-node-lead .org-person { color: rgba(255, 255, 255, .85); }

.orgchart .org-node-elected { border: 2px solid var(--primary, #003366); }

/* --- compartimentele --- */

/* Panoul stă pe toată lățimea diagramei, nu în coloana unui frate din rând: coloana
   de conținut a temei are ~795px (există sidebar), iar șase compartimente înghesuite
   în jumătate din ea ies fie tăiate, fie într-o coloană lungă cu gol lângă. Cui se
   subordonează o spune titlul panoului, nu poziția lui. */
.orgchart .org-units {
    position: relative;
    width: 100%;
    margin: 1.75rem 0 0;
    padding: .75rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .6rem;
    border: 1px solid var(--border, #DEE2E6);
    border-radius: .75rem;
    background: var(--bg-main, #F5F6FA);
}

.orgchart .org-units-caption {
    grid-column: 1 / -1;
    margin: 0 0 .1rem;
    padding: 0 .1rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-secondary, #5A6B7D);
}

.orgchart .org-units::before {
    content: "";
    position: absolute;
    top: calc(-1.75rem - 1px);
    left: 50%;
    width: 0;
    height: calc(1.75rem + 2px);
    border-left: 2px solid var(--border-dark, #C4CDD5);
}

.orgchart .org-unit {
    margin: 0;
    padding: .7rem .8rem;
    border: 1px solid var(--border, #DEE2E6);
    border-radius: .4rem;
    background: #fff;
    line-height: 1.35;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .4rem;
}

.orgchart .org-unit .org-role { font-weight: 600; }

.orgchart .org-posts {
    align-self: flex-start;
    padding: .1rem .5rem;
    border-radius: 1rem;
    background: var(--bg-main, #F5F6FA);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary, #5A6B7D);
}

/* Șase compartimente într-o coloană îngustă sub „Secretar" ar lăsa jumătate de pagină
   goală lângă ele. Peste 992px panoul primește lățime de lucru: fratele lui (Viceprimar)
   rămâne îngust, iar bara orizontală dintre ei nu se rupe, fiindcă rândul tot nu trece
   pe două linii (40rem + ~14rem < lățimea containerului). */
.orgchart-total {
    margin: 1.5rem 0 0;
    font-size: .9rem;
    color: var(--text-secondary, #5A6B7D);
}

body.dark-mode .orgchart .org-node,
body.dark-mode .orgchart .org-unit { background: #1b1f27; }
body.dark-mode .orgchart .org-units { background: #16191f; }
body.dark-mode .orgchart .org-node-lead { background: var(--primary, #4DA3E8); border-color: var(--primary, #4DA3E8); }
body.dark-mode .orgchart .org-node-lead .org-role { color: #0d1117; }
body.dark-mode .orgchart .org-node-lead .org-person { color: rgba(13, 17, 23, .8); }
body.dark-mode .orgchart .org-posts { background: #262b34; }
body.dark-mode .orgchart .org-branch::before,
body.dark-mode .orgchart .org-branch > li::before,
body.dark-mode .orgchart .org-branch > li::after,
body.dark-mode .orgchart .org-node::before,
body.dark-mode .orgchart .org-units::before { border-color: #39414e; }

/* Pe telefon, un arbore desenat orizontal cere derulare laterală - felul în care
   pagina asta eșuează pe majoritatea site-urilor de primărie. Aici se întoarce pe
   verticală, cu linia de subordonare pe marginea din stânga. */
@media (max-width: 991.98px) {
    .orgchart .org-branch {
        flex-direction: column;
        align-items: stretch;
        padding: 0 0 0 1.25rem;
    }

    .orgchart .org-branch::before { display: none; }

    .orgchart .org-branch > li {
        align-items: stretch;
        padding: 1rem 0 0 1.25rem;
    }

    .orgchart .org-branch > li::before {
        top: 0;
        left: 0;
        right: auto;
        width: 0;
        height: 100%;
        border-top: 0;
        border-left: 2px solid var(--border-dark, #C4CDD5);
    }

    .orgchart .org-branch > li:last-child::before { height: 2rem; }

    .orgchart .org-branch > li::after {
        top: 2rem;
        left: 0;
        width: 1.25rem;
        height: 0;
        border-top: 2px solid var(--border-dark, #C4CDD5);
        border-left: 0;
    }

    /* Pe desktop capetele barei orizontale se sting; aici toate elementele au nevoie
       și de linia verticală, și de cârlig, inclusiv singurul copil. O regulă de stingere
       lăsată în picioare aici tăia tocmai cârligul ultimului element („Secretar"). */
    .orgchart .org-branch > li:first-child::before,
    .orgchart .org-branch > li:last-child::after,
    .orgchart .org-branch > li:only-child::before,
    .orgchart .org-branch > li:only-child::after { display: block; }

    /* rădăcina nu atârnă de nimic nici aici */
    .orgchart > .org-branch { padding-left: 0; }
    .orgchart > .org-branch > li { padding-left: 0; }
    .orgchart > .org-branch > li::before,
    .orgchart > .org-branch > li::after { display: none; }

    .orgchart .org-node,
    .orgchart .org-units { max-width: none; text-align: left; }

    .orgchart .org-node { margin: 0; }

    .orgchart .org-node::before,
    .orgchart .org-units::before { display: none; }

    .orgchart .org-units { margin: 1rem 0 0; }
}

/* ===== Tabel de documente în corpul paginii =====

   Multe pagini ale instituției sunt, de fapt, un registru de documente: rapoarte pe ani,
   declarații, bilanțuri, legislație. Importate din WordPress, ajunseseră liste de
   link-uri cu etichete luate din numele fișierului. Componenta asta le dă aceeași formă
   ca registrul de hotărâri: an, despre ce e vorba, și un buton de descărcare cu tipul și
   mărimea fișierului - ca omul să știe ce deschide înainte să dea clic.

   Selectorii sunt prefixați cu `.content-main`: `.page-body table th` din tema de bază
   are specificitate 0,1,2 și ar bate o clasă simplă. */

.content-main .doc-table-card {
    border: 1px solid var(--border, #DEE2E6);
    border-radius: .75rem;
    overflow: hidden;
    margin: 1.25rem 0 1.75rem;
}

.content-main .doc-table-card > .doc-table-title {
    margin: 0;
    padding: .75rem 1rem;
    background: var(--bg-main, #F5F6FA);
    border-bottom: 1px solid var(--border, #DEE2E6);
    font-weight: 600;
    color: var(--primary-readable, var(--primary, #003366));
}

.content-main .doc-table {
    margin: 0;
    border-collapse: collapse;
}

.content-main .doc-table-card { overflow-x: auto; }

.content-main .doc-table th {
    padding: .7rem 1rem;
    background: var(--bg-main, #F5F6FA);
    color: var(--primary-readable, var(--primary, #003366));
    border: 0;
    border-bottom: 2px solid var(--border, #DEE2E6);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
    white-space: nowrap;
}

.content-main .doc-table td {
    padding: .7rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--border, #DEE2E6);
    vertical-align: middle;
}

.content-main .doc-table tr:last-child td { border-bottom: 0; }
.content-main .doc-table tbody tr:nth-child(even) { background: transparent; }
.content-main .doc-table tbody tr:hover { background: rgba(0, 120, 212, .03); }

/* Anul e cheia după care se caută în astfel de registre: cifre aliniate, nu text. */
.content-main .doc-table .doc-year {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    width: 1%;
}

.content-main .doc-table .doc-what { line-height: 1.35; }

.content-main .doc-table .doc-note {
    display: block;
    margin-top: .15rem;
    font-size: .85rem;
    color: var(--text-secondary, #5A6B7D);
}

.content-main .doc-table td.doc-action { width: 1%; white-space: nowrap; }

.content-main .doc-dl {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border: 1px solid var(--primary, #003366);
    border-radius: .35rem;
    color: var(--primary-readable, var(--primary, #003366));
    font-size: .88rem;
    text-decoration: none;
}

.content-main .doc-dl:hover,
.content-main .doc-dl:focus-visible {
    background: var(--primary, #003366);
    color: #fff;
}

.content-main .doc-meta {
    font-size: .78rem;
    color: var(--text-muted, #8896A6);
    font-variant-numeric: tabular-nums;
}

.content-main .doc-dl:hover .doc-meta,
.content-main .doc-dl:focus-visible .doc-meta { color: rgba(255, 255, 255, .8); }

body.dark-mode .content-main .doc-table-card { border-color: #2f3745; }
body.dark-mode .content-main .doc-table-card > .doc-table-title,
body.dark-mode .content-main .doc-table th { background: #1b1f27; border-color: #2f3745; }
body.dark-mode .content-main .doc-table td { border-color: #2f3745; }

@media (max-width: 575.98px) {
    .content-main .doc-table,
    .content-main .doc-table thead,
    .content-main .doc-table tbody,
    .content-main .doc-table tr,
    .content-main .doc-table td { display: block; }

    /* Antetul dispare, nu se micșorează: pe telefon fiecare rând devine un bloc, iar
       coloanele n-ar mai avea sub ce sta. */
    .content-main .doc-table thead { display: none; }

    .content-main .doc-table tr {
        padding: .8rem 1rem;
        border-bottom: 1px solid var(--border, #DEE2E6);
    }

    .content-main .doc-table tr:last-child { border-bottom: 0; }

    .content-main .doc-table td {
        padding: 0 0 .4rem;
        border: 0;
        width: auto;
    }

    .content-main .doc-table td:last-child { padding-bottom: 0; }
    .content-main .doc-table .doc-year { width: auto; }
}

/* Rând de fotografii în corpul unei pagini. Importul din WordPress le trimitea în lista
   „Documente", la fel ca PDF-urile: o poză a sediului ajungea un link de descărcat. */
.content-main .photo-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .75rem;
    margin: 1.25rem 0;
}

.content-main .photo-row img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: .5rem;
    background: #f1f3f5;
}

/* ===== Lightbox pentru scanurile din conținut (vezi js/lightbox.js) ===== */

.content-main img.zoomable {
    cursor: zoom-in;
    border: 1px solid var(--border, #DEE2E6);
    border-radius: .5rem;
}

.content-main img.zoomable:focus-visible {
    outline: 3px solid var(--accent, #0078D4);
    outline-offset: 2px;
}

.lb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(12, 16, 22, .92);
    flex-direction: column;
}

.lb-overlay.is-open { display: flex; }
body.lb-lock { overflow: hidden; }

.lb-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding: .6rem .8rem;
    flex: 0 0 auto;
}

.lb-zoom {
    color: #fff;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    min-width: 3.5rem;
    text-align: center;
}

.lb-btn {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: .4rem;
    background: transparent;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.lb-btn:hover { background: rgba(255, 255, 255, .12); }
.lb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Etajul derulabil: la zoom imaginea depășește ecranul, iar derularea e felul în care
   se citește un scan A4 pe telefon. */
.lb-stage {
    flex: 1 1 auto;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 .8rem 1.2rem;
    -webkit-overflow-scrolling: touch;
}

.lb-stage img {
    width: 100%;
    max-width: 1400px;
    height: auto;
    border-radius: .3rem;
    background: #fff;
    cursor: zoom-in;
}

.lb-stage.lb-zoomed { align-items: flex-start; justify-content: flex-start; }
.lb-stage.lb-zoomed img { max-width: none; cursor: zoom-out; }

@media (prefers-reduced-motion: no-preference) {
    .lb-overlay.is-open { animation: lb-fade .12s ease-out; }
    @keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* Paginile scanate ale unui document (stat de funcții, organigrame), una lângă alta. */
.content-main .scan-pages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: .75rem;
    margin: 1.25rem 0;
}

.content-main .scan-pages img { width: 100%; height: auto; }

/* Programul de audiențe: intervalul orar nu se rupe pe două rânduri. */
.content-main .audience-table td.doc-action { font-variant-numeric: tabular-nums; }

/* ===== Componența Consiliului Local ===== */

.content-main .council-table .council-person {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.content-main .council-table .council-person img,
.content-main .council-table .council-noimg {
    width: 3rem;
    height: 3.75rem;
    flex: 0 0 auto;
    object-fit: cover;
    /* Portretele oficiale au spațiu deasupra capului; tăiate din centru, oamenii ies
       decapitați la marginea de jos. */
    object-position: center 18%;
    border-radius: .35rem;
    background: #eef1f5;
}

.content-main .council-table .council-name { font-weight: 600; line-height: 1.3; }

.content-main .council-table .council-party {
    white-space: nowrap;
    font-size: .85rem;
    color: var(--text-secondary, #5A6B7D);
    width: 1%;
}

.content-main .council-table td.doc-action .doc-dl { margin: .1rem .25rem .1rem 0; }

/* Acordeon pe ani, nativ (<details>), fără JS. */
.content-main .year-box {
    margin: 1.5rem 0;
    border: 1px solid var(--border, #DEE2E6);
    border-radius: .75rem;
    overflow: hidden;
}

.content-main .year-box > summary {
    padding: .8rem 1rem;
    background: var(--bg-main, #F5F6FA);
    font-weight: 600;
    color: var(--primary-readable, var(--primary, #003366));
    cursor: pointer;
}

.content-main .year-box > summary:focus-visible {
    outline: 3px solid var(--accent, #0078D4);
    outline-offset: -3px;
}

.content-main .year-box[open] > summary { border-bottom: 1px solid var(--border, #DEE2E6); }
.content-main .year-box > .doc-table-card { margin: 1rem; border-radius: .5rem; }

body.dark-mode .content-main .year-box { border-color: #2f3745; }
body.dark-mode .content-main .year-box > summary { background: #1b1f27; border-color: #2f3745; }
body.dark-mode .content-main .council-table .council-noimg { background: #262b34; }

@media (max-width: 575.98px) {
    .content-main .council-table .council-party { width: auto; }
}

/* ===== Grila consilierilor locali =====
   Carduri, nu rânduri de tabel: fotografia e motivul pentru care instituția a făcut
   pozele, iar într-o celulă de tabel ajungea o miniatură de 3rem. */
.content-main .council-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.content-main .council-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border, #DEE2E6);
    border-radius: .75rem;
    overflow: hidden;
    background: var(--bg-white, #fff);
}

.content-main .council-card img,
.content-main .council-card .council-noimg {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    /* Portretele oficiale au spațiu deasupra capului; tăiate din centru, oamenii ies
       decapitați la marginea de jos a cadrului. */
    object-position: center 20%;
    background: #eef1f5;
}

.content-main .council-body {
    padding: .8rem .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1 1 auto;
}

.content-main .council-name {
    margin: 0;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-readable, var(--primary, #003366));
}

.content-main .council-party {
    margin: 0;
    font-size: .85rem;
    color: var(--text-secondary, #5A6B7D);
}

.content-main .council-reports {
    margin: .6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.content-main .council-reports .doc-dl { font-size: .8rem; padding: .2rem .55rem; }

body.dark-mode .content-main .council-card { background: #1b1f27; border-color: #2f3745; }
body.dark-mode .content-main .council-card .council-noimg { background: #262b34; }

/* ===== Lista de știri =====

   Clasele `.news-card`, `.news-card-body/date/title/excerpt` EXISTĂ deja în style.css,
   pentru cardul vertical al referinței (imagine sus, text jos). Le refolosim ca atare -
   prima variantă le-a redefinit aici, iar cele două seturi de reguli se băteau: padding-ul
   temei rămânea, alinierea mea rămânea, și fișa ieșea de 123px pentru două rânduri.
   Aici se adaugă DOAR ce lipsește: dispunerea pe orizontală, miniatura și bara de accent. */

.content-main .news-cards {
    display: grid;
    gap: .75rem;
    margin: 1.5rem 0;
}

.content-main .news-card-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    border-left: 4px solid var(--primary, #003366);
    color: inherit;
    text-decoration: none;
}

.content-main .news-card-row:hover,
.content-main .news-card-row:focus-visible {
    border-left-color: var(--accent, #0078D4);
    background: rgba(0, 120, 212, .03);
}

.content-main .news-card-row:focus-visible {
    outline: 3px solid var(--accent, #0078D4);
    outline-offset: 2px;
}

.content-main .news-card-thumb {
    width: 7rem;
    flex: 0 0 auto;
    align-self: stretch;
    /* 1.2 x 0.6 - acelasi raport ca in grila de carduri, ca lista si grila sa nu arate
       fotografia altfel decupata. `object-position: top`: in fotografia unui anunt, sus
       sunt antetul si capetele oamenilor. */
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: top;
    background: #eef1f5;
}

/* Coperta cardului din grila de stiri. Bootstrap nu-i da inaltime, deci fara regula asta
   randul de carduri are trei imagini de inaltimi diferite. */
.content-main .card-img-top {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: top;
    background: #eef1f5;
}

/* `.news-card-body` are deja padding din temă; aici doar îi dăm voie să se întindă. */
.content-main .news-card-row > .news-card-body { flex: 1 1 auto; min-width: 0; }
.content-main .news-card-row .news-card-title { margin-bottom: 0; }
.content-main .news-card-row .news-card-excerpt { margin-top: .3rem; }

body.dark-mode .content-main .news-card-row:hover { background: rgba(77, 163, 232, .08); }

@media (max-width: 575.98px) {
    .content-main .news-card-thumb { width: 5rem; }
}

/* ===== „Servicii online" în bara de navigație =====
   Lista modulelor active - 31 de linkuri pe Odoreu. Ca listă plată în sidebar nu era
   parcurgibilă; aici e grupată pe intenția cetățeanului, pe coloane. */
/* Deschiderea dropdown-ului e dată de `.main-nav .nav-item.show > .dropdown-menu`
   (4 clase) și de varianta cu `:hover`, ambele `display: block`. Ca grila să se aplice,
   selectorul trebuie să aibă aceeași formă plus clasa proprie. */
.services-mega,
.main-nav .nav-item.show > .dropdown-menu.services-mega,
.main-nav .nav-item:hover > .dropdown-menu.services-mega {
    display: grid;
    grid-template-columns: repeat(4, minmax(11rem, 1fr));
    gap: 0 1.5rem;
    padding: 1.1rem 1.3rem;
    min-width: min(56rem, calc(100vw - 2rem));
    border: 1px solid var(--border, #DEE2E6);
    border-radius: .6rem;
    box-shadow: 0 8px 28px rgba(0, 51, 102, .12);
}

.services-mega-title {
    margin: 0 0 .5rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--border, #DEE2E6);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--primary-readable, var(--primary, #003366));
}

.services-mega ul {
    list-style: none;
    margin: 0 0 .9rem;
    padding: 0;
}

.services-mega li { margin: 0; }

.services-mega a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .4rem;
    border-radius: .3rem;
    font-size: .88rem;
    line-height: 1.3;
    color: var(--text-primary, #2D3748);
    text-decoration: none;
}

.services-mega a:hover,
.services-mega a:focus-visible {
    background: var(--bg-main, #F5F6FA);
    color: var(--accent, #0078D4);
}

.services-mega a .bi { color: var(--primary-readable, var(--primary, #003366)); flex: 0 0 auto; }
.services-mega a:hover .bi { color: var(--accent, #0078D4); }

/* Sub 992px navbar-ul Bootstrap devine listă verticală: mega-meniul se întinde pe o
   coloană, altfel patru coloane de 11rem cer derulare laterală pe telefon. */
@media (max-width: 991.98px) {
    .services-mega,
    .main-nav .nav-item.show > .dropdown-menu.services-mega,
    .main-nav .nav-item:hover > .dropdown-menu.services-mega {
        grid-template-columns: 1fr;
        min-width: 0;
        box-shadow: none;
        border: 0;
        padding: .5rem .25rem;
    }
}

/* ===== Sidebar: anunțuri recente și data ===== */

/* Titlurile anunțurilor sunt propoziții întregi, cu majuscule; netăiate, un singur
   anunț ocupa jumătate din coloană. */
.sidebar-announcement a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

.sidebar-announcement + .sidebar-announcement {
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px solid var(--border, #DEE2E6);
}

/* `.today-day` și `.today-month` erau două <span> fără nicio regulă: ziua și luna ieșeau
   lipite, „18septembrie 2026". */
.today-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    line-height: 1.1;
}

.today-day {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--primary-readable, var(--primary, #003366));
    font-variant-numeric: tabular-nums;
}

.today-month {
    font-size: .95rem;
    color: var(--text-secondary, #5A6B7D);
    text-transform: capitalize;
}

body.dark-mode .sidebar-announcement + .sidebar-announcement { border-color: #2f3745; }
body.dark-mode .services-mega { border-color: #2f3745; }
body.dark-mode .services-mega a { color: #e4e6eb; }
body.dark-mode .services-mega a:hover { background: #20262f; }

/* ===== Compartimentele, pe pagina de contact ===== */
.content-main .dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.content-main .dept-card {
    padding: .75rem .9rem;
    border: 1px solid var(--border, #DEE2E6);
    border-left: 3px solid var(--primary, #003366);
    border-radius: .5rem;
    background: var(--bg-white, #fff);
}

.content-main .dept-name { margin: 0; font-weight: 600; line-height: 1.3; }

.content-main .dept-mail {
    margin: .2rem 0 0;
    font-size: .85rem;
    word-break: break-all;
}

body.dark-mode .content-main .dept-card { background: #1b1f27; border-color: #2f3745; border-left-color: var(--primary, #4DA3E8); }

/* ===== Sidebar stânga: navigația secțiunii + fișa de contact ===== */

.secnav-list {
    list-style: none;
    margin: 0;
    padding: .4rem 0;
}

.secnav-list li { margin: 0; }

.secnav-list a,
.secnav-list span {
    display: block;
    padding: .45rem 1rem;
    font-size: .92rem;
    line-height: 1.35;
    color: var(--text-primary, #2D3748);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.secnav-list a:hover,
.secnav-list a:focus-visible {
    background: var(--bg-main, #F5F6FA);
    color: var(--primary-readable, var(--primary, #003366));
    border-left-color: var(--border-dark, #C4CDD5);
}

/* Pagina curentă: bară plină, nu doar altă culoare de text - sidebar-ul e citit în
   diagonală, iar diferența de culoare singură se pierde. */
.secnav-list li.on > a {
    background: var(--bg-main, #F5F6FA);
    border-left-color: var(--primary-readable, var(--primary, #003366));
    color: var(--primary-readable, var(--primary, #003366));
    font-weight: 700;
}

.secnav-list .secnav-d2 a,
.secnav-list .secnav-d2 span { padding-left: 2rem; font-size: .87rem; }
.secnav-list .secnav-d3 a { padding-left: 2.9rem; font-size: .85rem; }

.contact-card .cc-line {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    margin: 0 0 .5rem;
    font-size: .88rem;
    line-height: 1.4;
}

.contact-card .cc-line .bi { color: var(--primary-readable, var(--primary, #003366)); margin-top: .1rem; }
.contact-card .cc-line a { word-break: break-word; }

.contact-card .cc-cta {
    margin: .8rem 0 0;
    padding-top: .7rem;
    border-top: 1px solid var(--border, #DEE2E6);
    font-size: .88rem;
    font-weight: 600;
}

body.dark-mode .secnav-list a,
body.dark-mode .secnav-list span { color: #e4e6eb; }
body.dark-mode .secnav-list a:hover,
body.dark-mode .secnav-list li.on > a { background: #20262f; }
body.dark-mode .contact-card .cc-cta { border-color: #2f3745; }

/* ===== MOL: subsecțiunile legale (OUG 57/2019, Anexa 1) și filtrul pe an ===== */
.mol-sub-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border, #DEE2E6);
    border-radius: .6rem;
    overflow: hidden;
}

.mol-sub-list li + li { border-top: 1px solid var(--border, #DEE2E6); }

.mol-sub-list a {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    gap: .75rem;
    align-items: center;
    padding: .6rem .9rem;
    color: var(--text-primary, #2D3748);
    text-decoration: none;
}

.mol-sub-list a:hover,
.mol-sub-list a:focus-visible { background: var(--bg-main, #F5F6FA); color: var(--primary-readable, var(--primary, #003366)); }

.mol-sub-list li.on > a {
    background: var(--bg-main, #F5F6FA);
    box-shadow: inset 4px 0 0 var(--primary, #003366);
    font-weight: 600;
}

/* Numărul legal („5.3") e cheia după care funcționarii și prefectura caută secțiunea;
   stă în coloană proprie, cifre aliniate. */
.mol-sub-code {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--primary-readable, var(--primary, #003366));
}

.mol-sub-name { line-height: 1.3; font-size: .92rem; }

.mol-sub-count {
    min-width: 2rem;
    padding: .1rem .5rem;
    border-radius: 1rem;
    background: var(--bg-main, #F5F6FA);
    border: 1px solid var(--border, #DEE2E6);
    font-size: .78rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary, #5A6B7D);
}

.mol-sub-list li.on .mol-sub-count { background: var(--primary, #003366); border-color: var(--primary-readable, var(--primary, #003366)); color: #fff; }

.mol-years, .dec-tabs { display: flex; flex-wrap: wrap; gap: .3rem; }

body.dark-mode .mol-sub-list, body.dark-mode .mol-sub-list li + li { border-color: #2f3745; }
body.dark-mode .mol-sub-list a { color: #e4e6eb; }
body.dark-mode .mol-sub-list a:hover, body.dark-mode .mol-sub-list li.on > a { background: #20262f; }
body.dark-mode .mol-sub-count { background: #262b34; border-color: #2f3745; }

@media (max-width: 575.98px) {
    .mol-sub-list a { grid-template-columns: 2.4rem 1fr auto; padding: .55rem .7rem; }
}

/* Galeriile importate din WordPress vin ca <ul><li><a><img></a></li>…: fără regula asta
   fotografiile se afișau una sub alta, cu bulină de listă în stânga fiecăreia.
   Selectorul țintește DOAR listele în care fiecare element e o imagine legată. */
.page-body ul:has(> li > a > img:only-child) {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .75rem;
}
.page-body ul:has(> li > a > img:only-child) > li { margin: 0; }
.page-body ul:has(> li > a > img:only-child) img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: .375rem;
    display: block;
}

/* Cardurile de știri fără imagine: un bloc neutru cu pictogramă, nu silueta de
   persoană din placeholder-ul temei (pe un site de primărie citea ca „portret lipsă"). */
.news-card-image.news-card-noimg a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 150px;
    background: var(--bg-main, #f3f5f8);
    color: var(--primary, #0d3b66);
    font-size: 2.5rem;
}
body.dark-mode .news-card-image.news-card-noimg a { background: #1b1f27; color: #8fb4ff; }

/* ===== Homepage (structura primăriilor cu site profesionist - vezi primarie_home()) =====
   Vocabularul rămâne al temei (.hero, .quick-links-grid, .section-title, .person-card);
   aici sunt doar noile blocuri: acțiunile din hero, tab-urile de noutăți, mesajul
   primarului, cardurile de proiect și grila pe toată lățimea. */
.page-layout.page-layout-home { display: block; }
.page-layout-home .content-main { max-width: none; }

/* Hero-ul e randat înainte de <main>, deci ocupă ecranul de la o margine la alta;
   conținutul lui stă în aceeași grilă de lățime maximă ca restul paginii. */
.hero.hero-home.hero-full { min-height: 500px; margin: 0 0 2.5rem; align-items: center; }
.hero-home .hero-inner { position: relative; z-index: 3; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 3rem 15px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 440px); gap: 2.5rem; align-items: center; }
.hero-home .hero-main { color: #fff; }
.hero-search-card { background: rgba(255,255,255,.96); border-radius: .85rem; padding: 1.5rem; box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.hero-search-card .hero-search-title { color: var(--primary-readable, var(--primary)); font-size: 1.1rem; font-weight: 700; margin-bottom: .85rem; }
.hero-search-card .btn-primary { font-weight: 600; padding-inline: 1.1rem; }
.hero-search-card .hero-search-hint { margin: .9rem 0 .35rem; font-size: .8rem; color: var(--text-secondary); }
.hero-search-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.hero-search-chips a { font-size: .8rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; background: var(--bg-main, #f3f5f8); color: var(--primary-readable, var(--primary)); text-decoration: none; }
.hero-search-chips a:hover { background: var(--primary); color: #fff; }

.hero-home .hero-kicker { color: rgba(255,255,255,.85); font-weight: 600; margin: 0 0 .35rem; }
.hero-home .hero-title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; }
.hero-home .hero-subtitle { font-size: 1.05rem; max-width: 640px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.hero-actions .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem; font-weight: 600; border-radius: .5rem; }
.hero-actions .btn-light { background: rgba(255,255,255,.96); color: var(--primary-readable, var(--primary)); border: 0; }
.hero-actions .btn-light:hover { background: #fff; color: var(--secondary); }
.hero-actions .btn-outline-light { border: 1.5px solid rgba(255,255,255,.75); color: #fff; }
.hero-actions .btn-outline-light:hover { background: rgba(255,255,255,.15); color: #fff; }
.home-forms { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .75rem; }
.home-forms a { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; background: #fff; border: 1px solid var(--border, #dde3ea); border-radius: .6rem; text-decoration: none; color: var(--text-primary); }
.home-forms a:hover { border-color: var(--primary-readable, var(--primary)); box-shadow: var(--shadow-md); }
.home-forms a i { font-size: 1.4rem; color: #b42318; flex: 0 0 auto; }
.home-forms .home-form-title { font-weight: 600; flex: 1 1 auto; }
.home-forms .home-form-meta { font-size: .75rem; color: var(--text-secondary); white-space: nowrap; }
.home-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.home-gallery a { display: block; border-radius: .6rem; overflow: hidden; background: #e9ecef; }
.home-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .25s; }
.home-gallery a:hover img { transform: scale(1.04); }


.quick-links-grid.quick-links-home { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1199px) { .quick-links-grid.quick-links-home { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) { .quick-links-grid.quick-links-home { grid-template-columns: repeat(3, 1fr); } }

.home-tabs { border-bottom: 1px solid var(--border, #dde3ea); flex-wrap: nowrap; overflow-x: auto; margin-bottom: .25rem; }
.home-tabs .nav-link { color: var(--text-secondary); font-weight: 600; border: 0; border-bottom: 3px solid transparent; white-space: nowrap; padding: .6rem 1rem; }
.home-tabs .nav-link:hover { color: var(--primary-readable, var(--primary)); }
.home-tabs .nav-link.active { color: var(--primary-readable, var(--primary)); background: transparent; border-bottom-color: var(--primary-readable, var(--primary)); }
.home-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); column-gap: 2.5rem; }
.home-list li { padding: .8rem 0; border-bottom: 1px solid var(--border, #dde3ea); }
.home-list .home-meta { display: block; font-size: .8rem; color: var(--text-secondary); margin-bottom: .15rem; }
.home-list .home-item-title { font-weight: 600; color: var(--primary-readable, var(--primary)); text-decoration: none; }
.home-list .home-item-title:hover { text-decoration: underline; }
.home-list .home-pdf { margin-left: .4rem; color: #b42318; }

.mayor-card { background: var(--primary); color: #fff; border-radius: var(--border-radius); padding: 1.75rem; height: 100%; }
/* Culoarea se scrie explicit: `blockquote` și `p` au în tema de bază fundal alb și text
   gri, care pe cardul albastru dădeau o cutie albă cu text șters (Terebești, primul site
   cu mesajul primarului completat). */
.mayor-card .mayor-kicker { font-size: .85rem; font-weight: 600; opacity: .85; margin-bottom: .75rem; color: #fff; }
.mayor-card blockquote { font-size: 1.05rem; line-height: 1.65; margin: 0 0 1.25rem; padding: 0; border: 0; background: transparent; color: #fff; }
.mayor-card .mayor-sign { display: flex; align-items: center; gap: .75rem; }
.mayor-card .mayor-sign img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.6); }
.mayor-card .mayor-sign span { opacity: .85; font-size: .9rem; }
.content-main .person-card.person-card-home { margin: 0; }
/* Pe homepage conducerea e un rezumat, nu pagina de conducere: card orizontal, portret
   mic în stânga, funcția și numele în dreapta - trei portrete pe toată lățimea
   dominau pagina. */
.content-main .person-card.person-card-home { flex-direction: row; align-items: center; }
.content-main .person-card.person-card-home img { width: 104px; height: 104px; aspect-ratio: 1 / 1; flex: 0 0 104px; object-position: center 15%; }
.content-main .person-card.person-card-home .person-body { padding: .75rem 1rem; }

.project-card { display: flex; flex-direction: column; height: 100%; padding: 1.25rem; background: #fff; border: 1px solid var(--border, #dde3ea); border-top: 4px solid var(--accent); border-radius: var(--border-radius); text-decoration: none; color: inherit; transition: box-shadow .2s; }
.project-card:hover { box-shadow: var(--shadow-md); text-decoration: none; color: inherit; }
.project-card .project-kicker { font-size: .75rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .4rem; }
.project-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--primary-readable, var(--primary)); margin-bottom: .5rem; }
.project-card p { color: var(--text-secondary); font-size: .9rem; flex-grow: 1; margin-bottom: .75rem; }
.project-card .project-more { font-weight: 600; color: var(--primary-readable, var(--primary)); font-size: .9rem; }

.home-map { min-height: 260px; height: 100%; }
.home-contact .card .home-map { border-radius: 0 0 var(--border-radius) var(--border-radius); overflow: hidden; }

@media (max-width: 991px) {
    .hero-home .hero-inner { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.25rem 15px; }
    .hero-search-card { padding: 1.1rem; }
}
@media (max-width: 575px) {
    .quick-links-grid.quick-links-home { grid-template-columns: repeat(2, 1fr); }
    .hero.hero-home.hero-full { min-height: 0; }
    .hero-home .hero-inner { padding: 1.75rem 15px; }
    .home-gallery { grid-template-columns: repeat(2, 1fr); }

    .hero-actions .btn { flex: 1 1 calc(50% - .6rem); justify-content: center; padding: .6rem .5rem; }
}

body.dark-mode .home-tabs, body.dark-mode .home-list li { border-color: #2b3240; }
body.dark-mode .home-tabs .nav-link { color: #aeb6c2; }
body.dark-mode .home-tabs .nav-link.active, body.dark-mode .home-list .home-item-title, body.dark-mode .project-card h3, body.dark-mode .project-card .project-more { color: #8fb4ff; }
body.dark-mode .home-tabs .nav-link.active { border-bottom-color: #8fb4ff; }
body.dark-mode .project-card { background: #1b1f27; border-color: #2b3240; }
body.dark-mode .mayor-card { background: #16325a; }
body.dark-mode .hero-search-card { background: rgba(27,31,39,.96); }
body.dark-mode .hero-search-card .hero-search-title { color: #8fb4ff; }
body.dark-mode .hero-search-chips a { background: #262c38; color: #8fb4ff; }
body.dark-mode .home-forms a { background: #1b1f27; border-color: #2b3240; color: #d5dae3; }

/* Tabelele de documente pe telefon: rândul devine un card, antetul dispare, fiecare
   celulă își poartă eticheta (data-label, pusă de app.js din <th>). Fără asta, patru
   coloane cu lățimi fixe într-un ecran de 390px însemnau derulare laterală și titluri
   rupte pe 15 rânduri. Se aplică DOAR tabelelor marcate .table-stack - grilele în care
   contează coloanele (calendarul de deșeuri, bugetul) rămân tabele. */
@media (max-width: 767.98px) {
    .content-main .table-stack thead { display: none; }
    .content-main .table-stack,
    .content-main .table-stack tbody,
    .content-main .table-stack tr,
    .content-main .table-stack td { display: block; width: auto !important; }
    .content-main .table-stack { width: 100% !important; border-collapse: separate; }
    /* Fiecare rând = un card compact cu margine și cap propriu: prima celulă (numărul,
       numele) e bara de titlu, restul celulelor stau dedesubt, eticheta coloanei în
       stânga valorii. Celulele goale („-") nu se afișează (data-empty din app.js). */
    .content-main .table-stack tr { margin: 0 0 .6rem; padding: 0; border: 1px solid var(--border, #dee2e6); border-radius: .5rem; background: #fff !important; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08)); overflow: hidden; }
    .content-main .table-stack tr:last-child { margin-bottom: 0; }
    .content-main .table-stack td { border: 0; border-bottom: 1px solid #edf0f4; padding: .3rem .75rem; text-align: left !important; white-space: normal !important; background: transparent !important; box-shadow: none !important; font-size: .875rem; line-height: 1.4; }
    .content-main .table-stack td:last-child { border-bottom: 0; }
    .content-main .table-stack td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 4.6rem; margin-right: .5rem; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); vertical-align: top; padding-top: .2rem; }
    .content-main .table-stack td:first-child { background: var(--primary) !important; color: #fff; font-weight: 700; padding: .4rem .75rem; border-bottom: 0; }
    .content-main .table-stack td:first-child a { color: #fff; }
    .content-main .table-stack td:first-child[data-label]::before { min-width: 0; content: attr(data-label) ":"; color: rgba(255,255,255,.8); padding-top: .1rem; }
    .content-main .table-stack td:empty, .content-main .table-stack td[data-empty] { display: none; }
    .content-main .table-stack td .btn { padding: .2rem .6rem; font-size: .8rem; }
    .content-main .table-stack td .badge { vertical-align: baseline; }
    .content-main .table-striped.table-stack > tbody > tr:nth-of-type(odd) > *,
    .content-main .table-striped.table-stack > tbody > tr:nth-of-type(odd) { background: transparent; }
    .content-main .table-hover.table-stack > tbody > tr:hover > * { background: transparent; }
    body.dark-mode .content-main .table-stack tr { background: #1b1f27 !important; border-color: #2b3240; }
    body.dark-mode .content-main .table-stack td { border-color: #2b3240; }
}

/* Capetele de dropdown și „copiază linkul" sunt <button>, nu <a> (vezi layout.php și
   news.php): un element care nu navighează nicăieri nu trebuie să fie link. Stilul e
   cel al ancorelor din referință - style.css rămâne neatins. */
.main-nav button.nav-link {
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.share-dropdown button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: 0;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}
.share-dropdown button:hover { background: var(--bg-main); }
.share-dropdown button i { width: 18px; text-align: center; font-size: 1rem; }
body.dark-mode .share-dropdown button { color: #e4e6eb; }
body.dark-mode .share-dropdown button:hover { background: rgba(255,255,255,.08); }
.high-contrast .share-dropdown button { color: #fff; }
.high-contrast .share-dropdown button:hover { background: #333; }


/* ===== Aliniere și imagini inserate din editor (clasele `ct-*`) =====

   `sanitizeHtml()` taie `style=` din conținutul salvat, deci editorul nu poate scrie
   `text-align` direct. Scrie clase, iar perechea lor e aici. Fără regulile astea,
   centrarea aleasă de funcționar s-ar pierde tăcut între editor și pagina publică. */
.content-main .page-body .ct-center,
.content-main .article-body .ct-center { text-align: center; }
.content-main .page-body .ct-right,
.content-main .article-body .ct-right { text-align: right; }

.content-main .page-body figure.ct-img,
.content-main .article-body figure.ct-img { margin: 1.25rem 0; }
.content-main .page-body figure.ct-img img,
.content-main .article-body figure.ct-img img { max-width: 100%; height: auto; border-radius: .5rem; }
.content-main .page-body figure.ct-img figcaption,
.content-main .article-body figure.ct-img figcaption {
    font-size: .875rem;
    color: var(--text-muted, #6C757D);
    padding-top: .4rem;
}
.content-main .page-body figure.ct-center,
.content-main .article-body figure.ct-center { margin-inline: auto; text-align: center; }
.content-main .page-body figure.ct-left,
.content-main .article-body figure.ct-left { float: left; margin: .25rem 1.5rem 1rem 0; max-width: 50%; }
.content-main .page-body figure.ct-right,
.content-main .article-body figure.ct-right { float: right; margin: .25rem 0 1rem 1.5rem; max-width: 50%; }
.content-main .page-body .ct-w-half,
.content-main .article-body .ct-w-half { max-width: 50%; }
.content-main .page-body .ct-w-quarter,
.content-main .article-body .ct-w-quarter { max-width: 25%; }

/* Pe telefon o imagine plutitoare la 50% lățime rămâne cu o coloană de text de câteva
   cuvinte pe rând, deci curgerea laterală se oprește. */
@media (max-width: 640px) {
    .content-main .page-body figure.ct-left,
    .content-main .page-body figure.ct-right,
    .content-main .article-body figure.ct-left,
    .content-main .article-body figure.ct-right { float: none; margin: 1.25rem auto; max-width: 100%; }
    .content-main .page-body .ct-w-half,
    .content-main .page-body .ct-w-quarter,
    .content-main .article-body .ct-w-half,
    .content-main .article-body .ct-w-quarter { max-width: 100%; }
}

/* ------------------------------------------------------------------ *
 * Contrast WCAG AA (4.5:1 pentru text normal), măsurat în browser pe
 * stilurile reale. Două valori din temă cădeau sub prag:
 *
 *  1. --text-muted #8896A6 pe alb = 3.02:1. E culoarea datelor de sub
 *     știri, a notelor și a etichetelor mici - adică exact textul mărunt,
 *     cel mai greu de citit oricum. #6A7585 dă 4.67:1 și rămâne discret.
 *     Subsolul își are propria suprascriere (fundal închis), deci nu e atins.
 *
 *  2. Culoarea instituției ca TEXT pe suprafețele deschise (#F5F6FA):
 *     la Odoreu, albastrul #097aac dădea 4.43:1 pe firimituri. Layout-ul
 *     derivă --primary-readable, întunecat exact cât e nevoie ca să atingă
 *     4.5:1 - instituția își păstrează culoarea, textul devine lizibil.
 * ------------------------------------------------------------------ */
:root { --text-muted: #656E7C; }

/* De ce #656E7C și nu #6A7585, cum era la prima măsurătoare: valoarea veche a fost aleasă
 * măsurând pe ALB (4.67:1), dar panourile de formular stau pe #F5F6FA, unde aceeași
 * culoare dă doar 4.32:1 - sub prag. Nota „Conform Legii 544/2001" de pe formularul de
 * solicitare era exact acolo. #656E7C dă 4.77:1 pe #F5F6FA și 5.15:1 pe alb.
 * Lecția: un contrast se măsoară pe suprafața pe care stă textul, nu pe cea mai deschisă
 * suprafață imaginabilă. */

/* Butoanele pline cu culoarea instituției, în MOD ÎNTUNECAT. Tema de referință schimbă
 * --primary în #4DA3E8 (albastru deschis), iar modulele își scriu butoanele cu
 * `background:var(--primary);color:#fff` - adică alb pe albastru deschis, 2.72:1.
 * Textul devine cerneală: 6.67:1. Fundalul rămâne culoarea instituției, ca peste tot. */
/* Taburile paginii de petiții. `petitions.css` le scrie cu valori fixe: fundal alb și
 * text #495057 pe cel inactiv, `var(--accent)` cu text alb pe cel activ. În mod întunecat
 * accentul devine deschis (#5CAAEE), deci albul pe el dădea 1.19:1 - eticheta activă era
 * practic invizibilă. Aici doar se corectează culorile, fișierul copiat din referință
 * rămâne neatins. */
body.dark-mode .petitions-nav-btn {
    background: #1E1E2A;
    color: #E4E6EB;          /* 13.2:1 */
    border-color: #333C4D;
}
body.dark-mode .petitions-nav-btn.active {
    color: #10161F;          /* cerneală pe accentul deschis: 7.3:1 */
}
/* Subtitlul paginii de petiții e scris fix cu #6c757d (4.34:1 pe panoul deschis). Trece
 * pe variabila corectată, ca orice alt text secundar din site. */
/* `petitions.css` se încarcă din corpul paginii, deci DUPĂ acest fișier: la specificitate
 * egală ar câștiga el. De aceea selectorul poartă `body` în față - nu din cochetărie. */
body .petitions-subtitle { color: var(--text-muted); }
body.dark-mode .petitions-subtitle { color: #B0B3B8; }   /* 7.84:1 pe cardul întunecat */

body.dark-mode .pub-form button,
body.dark-mode .ca-form button,
body.dark-mode .contact-form button,
body.dark-mode .nl-form button,
body.dark-mode .pet-lookup button,
body.dark-mode .pm-lookup button,
body.dark-mode .pr-filter button,
body.dark-mode .rq-lookup button,
body.dark-mode .srch-form button,
body.dark-mode .tr-fb button,
body.dark-mode .ub-filter button {
    color: #10161F;
}

.breadcrumb a,
.breadcrumb .breadcrumb-item a,
a.text-primary,
.decisions-header a,
.mol-sub-list a .mol-sub-code {
    color: var(--primary-readable, var(--primary));
}

/* Culoarea instituției folosită ca TEXT: peste tot unde tema o scrie cu
   `color: var(--primary)`, trece prin varianta lizibilă derivată în layout.
   Fundalurile și chenarele rămân în culoarea aleasă de instituție. */
.home-item-title,
.nav-link,
.breadcrumb-item,
.breadcrumb-item a,
.decision-title a,
.mol-sub-list a,
.qa-title,
.section-head a {
    color: var(--primary-readable, var(--primary));
}

/* Antetul cardurilor din ghidul de servicii moștenea culoarea instituției de la
   Bootstrap (`.card-header` peste `--bs-primary`): tot text pe suprafață deschisă. */
.card-header strong,
.card-header > strong {
    color: var(--primary-readable, var(--primary));
}

/* ------------------------------------------------------------------ *
 * MODUL ÎNTUNECAT - contrastul textului.
 *
 * Aici defectele dor cel mai tare: modul întunecat e ales tocmai de cine
 * nu vede bine. Măsurat cu tools/contrast-sweep.sh MODE=dark:
 *
 *  - navigația de secțiune păstra culoarea de text a modului luminos
 *    (#2D3748) pe fundal #1E1E2A: 1.37:1, adică practic invizibilă;
 *  - culoarea instituției, întunecată pentru suprafețe deschise, e prea
 *    închisă pe fundal întunecat. Layout-ul derivă --primary-on-dark,
 *    DESCHISĂ exact cât e nevoie (Odoreu: #308fb9, 4.52:1).
 * ------------------------------------------------------------------ */
body.dark-mode .secnav-list a,
body.dark-mode .secnav-list span,
body.dark-mode .breadcrumb-item,
body.dark-mode .card-header strong {
    color: #E4E6EB;
}

body.dark-mode .secnav-list li.on > a,
body.dark-mode .breadcrumb a,
body.dark-mode .breadcrumb-item a,
body.dark-mode .home-item-title,
body.dark-mode .hero-search-chips a,
body.dark-mode .mol-sub-list a,
body.dark-mode .btn-outline-primary {
    color: var(--primary-on-dark, #6EC1E4);
}

/* Regula din style.css (linia 353) colorează TOATE linkurile de conținut în modul
   întunecat cu `var(--accent)` - culoarea de accent a instituției, aleasă pentru butoane
   și insigne, nu pentru text pe fundal închis: la Odoreu dă 3.45:1, sub prag. Are șase
   `:not(...)`, deci specificitate (0,7,2): nicio regulă per-componentă n-o poate învinge,
   iar toate încercările de mai sus erau anulate tăcut de ea.
   Se rescrie cu ACELAȘI selector - aceeași specificitate, fișier încărcat mai târziu -
   folosind varianta deschisă derivată în layout. */
body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item):not(.on) {
    color: var(--primary-on-dark, var(--accent));
}

/* Texte auxiliare în modul întunecat și în contrast ridicat: măsurate cu
   tools/contrast-sweep.sh MODE=dark / MODE=contrast, pe stilurile reale. */
.gdpr-note { color: #68728a; }
body.dark-mode .content-main .person-card .person-role,
body.dark-mode .gdpr-note,
body.dark-mode .pf-q,
body.dark-mode .mol-sub-code,
body.dark-mode .mol-sub-count,
body.dark-mode .text-muted,
body.dark-mode small.text-muted {
    color: #AEB6C2;
}
body.dark-mode .btn-outline-secondary,
body.dark-mode .pf-btn {
    color: #E4E6EB;
    border-color: #4a5364;
}
/* Butonul benzii de cookie-uri are, în modul întunecat, fundal albastru DESCHIS
   (#4da3e8): acolo textul trebuie să fie închis, nu alb - altfel 2.18:1. */
body.dark-mode .ck-ok { color: #0d1b24; }
/* Titlurile din ghidul de servicii moșteneau culoarea închisă a modului luminos
   (#1a1a2e) pe fundal închis: 1.04:1, adică invizibile. */
body.dark-mode .services-item-title,
body.dark-mode .content-main .services-item-title { color: #E4E6EB; }
/* În contrast ridicat, cardul de serviciu are fundal NEGRU (`.high-contrast
   .quick-link-item{background:#1a1a1a}` din style.css). Regula de aici cerea text negru
   - rămăsese de pe vremea cardurilor deschise - deci eticheta ieșea la 1,45:1, adică
   invizibilă. Exact funcția de accesibilitate strica accesibilitatea. */
body.high-contrast .quick-link-label,
body.high-contrast .quick-link-item span {
    color: #FFFFFF;
}

/* În modul întunecat, style.css redefinește `--primary` la albastrul deschis al temei
   (#4DA3E8). Butoanele pline moștenesc fundalul acela și rămân cu text alb: 2.72:1.
   Fundalul revine la culoarea instituției în varianta lizibilă, unde albul dă 4.78:1 -
   deci butonul își păstrează și identitatea, și lizibilitatea. */
body.dark-mode .btn-primary,
body.dark-mode .btn-primary:focus {
    background: var(--primary-readable, #0978a9);
    border-color: var(--primary-readable, #0978a9);
    color: #fff;
}
/* Bara de atribuire a hărții rămâne albă și în modul întunecat: linkul din ea trebuie
   să fie închis la culoare, nu deschis. */
body.dark-mode .leaflet-control-attribution,
body.dark-mode .leaflet-control-attribution a {
    color: #20262f;
}

/* Contrast ridicat: linkurile de contact (telefon, email) rămâneau în culoarea
   instituției, 3.44:1. În modul ăsta textul trebuie să fie negru pe alb. */
body.high-contrast .contact-card a,
body.high-contrast .cc-line a,
body.high-contrast .content-main a:not(.btn) {
    color: #000;
}
/* Atribuirea hărții e desenată de Leaflet, cu stilurile lui: selectorul trebuie să fie
   mai specific decât al bibliotecii ca să câștige. */
body.dark-mode .leaflet-container .leaflet-control-attribution,
body.dark-mode .leaflet-container .leaflet-control-attribution a {
    color: #20262f !important;
}

/* Butoanele DESCHISE de peste hero („Petiții", „Contact") își păstrează fundalul alb și
   în modul întunecat, dar textul lor ia `var(--primary)` - pe care modul întunecat îl
   redefinește la albastrul deschis al temei. Rezultat: albastru deschis pe alb, 2.52:1.
   Textul trebuie să rămână în varianta ÎNCHISĂ, potrivită fundalului alb. */
body.dark-mode .btn-light,
body.dark-mode .hero-actions .btn-light,
body.dark-mode .btn-white {
    color: var(--primary-readable, #0978a9);
}

/* Banda de anunț urgent are fundal roșu fix, deci textul ei e alb în ambele moduri.
   Regula largă a modului întunecat (style.css, șase `:not(...)`, specificitate 0,7,2)
   o depășește pe cea a modulului și îi dădea albastru deschis pe roșu: 2.26:1. Aici
   `!important` e justificat - culoarea nu depinde de nimic, e alb pe roșu. */
body.dark-mode .an-urgent-bar a,
html.dark .an-urgent-bar a,
body.dark-mode .ou-bar a,
html.dark .ou-bar a {
    color: #fff !important;
}

/* Contrast ridicat: regula e simplă - text negru pe fundal deschis, peste tot. Linkurile
   din bara laterală și din carduri rămâneau în culoarea instituției (2.19:1), iar
   butoanele pline păstrau textul alb peste galbenul modului (3.23:1). */
/* ⚠️ Regula se aplică DOAR pe suprafețele deschise. Prima variantă prindea și subsolul,
   care rămâne închis la culoare în acest mod: linkurile lui deveneau negru pe închis,
   1.23:1 - adică exact defectul pe care voiam să-l repar, mutat în altă parte. */
body.high-contrast .content-main a:not(.btn):not(.nav-link):not(.dropdown-item),
body.high-contrast .sidebar-widget a,
body.high-contrast .cc-line a {
    color: #000;
}
body.high-contrast .btn-primary,
body.high-contrast .btn-primary:focus,
body.high-contrast button.btn-primary {
    background: #000;
    border-color: #000;
    color: #fff;
}


/* ------------------------------------------------------------------ *
 * Măturat pe TOATE cele 50 de rute publice ale unui site de primărie,
 * în cele trei moduri (tools/contrast-sweep.sh). Ce a ieșit, și de ce:
 *
 *  1. Cincisprezece module își scriu „pastila" de filtru activă cu
 *     `background:var(--primary);color:#fff`. În modul întunecat tema de
 *     referință schimbă --primary în albastru deschis, deci albul pe el
 *     dă 1.09:1 - anul selectat din raportul 544 era invizibil.
 *  2. `.nav-link` e exclus intenționat din regula generală de linkuri
 *     (în antet stă pe fundal colorat), dar în conținut stă pe card
 *     întunecat: 3.80:1 la filtrele de urbanism.
 *  3. Titlurile de secțiune din transparență folosesc culoarea brută a
 *     instituției pe panou deschis: 4.43:1. Varianta derivată pentru
 *     text există deja - --primary-readable.
 * ------------------------------------------------------------------ */
/* Pastila de filtru ACTIVĂ, în modul întunecat. Regula generală de mai sus are
 * specificitate (0,7,2) și învingea orice regulă per-componentă - de aceea a primit și
 * `:not(.on)`: pastilele sunt singurele linkuri care stau pe fundal PLIN cu culoarea
 * instituției, deci au nevoie de cerneală, nu de varianta deschisă.
 *
 * ⚠️ Excluderea singură n-a fost de ajuns: regula ORIGINALĂ din style.css are același
 * selector fără `:not(.on)`, deci a preluat ea pastilele și le-a colorat cu `--accent`
 * (1.09:1, la fel de rău). De aceea regula de mai jos poartă ACELEAȘI șase `:not()` -
 * ca să ajungă la (0,8,2) și să învingă originalul. Măsurat, nu presupus. */
body.dark-mode a.on:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode button.on {
    color: #10161F;
}

body.dark-mode .content-main .nav-link {
    color: var(--primary-on-dark, #6EC1E4);
}
/* ⚠️ Aici a fost o regulă `body.dark-mode .content-main .nav-link.active { color:#10161F }`,
 * scrisă presupunând că o filă activă e ÎNTOTDEAUNA plină cu culoarea instituției. Nu e:
 * pe prima pagină a Terebeștiului fila activă se marchează cu o linie dedesubt, fundalul
 * rămâne transparent, iar cerneala pe fundal întunecat a dat 1.03:1 - mai rău decât ce
 * repara. Filele pline sunt tratate mai jos, acolo unde se stabilește ȘI fundalul. */

body .transparency-section-header {
    color: var(--primary-readable, var(--primary));
}


/* ------------------------------------------------------------------ *
 * Cutiile de informație ale modulelor (fapte, note, avertismente) au
 * fundal DESCHIS scris fix în modul: `#f7f9fc`, `#fff3e0`, `#fdecec`.
 * În modul întunecat ele rămân deschise - ceea ce e o alegere, nu un
 * defect: sunt cutii „inset", iar textul din ele e scris tot fix, în
 * culori închise, deci rămâne lizibil.
 *
 * Ce NU rămânea lizibil erau LINKURILE din ele: regula generală de mod
 * întunecat le dă varianta deschisă a culorii instituției (gândită
 * pentru fundal închis), iar pe cutia deschisă ajungeau la 2.90:1 -
 * raportul anual al Legii 544 avea trei linkuri așa. Înăuntru se
 * folosește varianta pentru suprafețe deschise.
 * ------------------------------------------------------------------ */
body.dark-mode .a11y-panel a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .ar-high-i a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .ar-rel a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .auth-s-expirata a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .auth-s-nedetinuta a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .bg-head a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .cm-fact a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .cm-off a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .cs-fact a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .cs-legal a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .gal-noimg a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .iar-warn a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .inv-fact a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .jb-closed a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .jb-fact a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .jb-soon a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .mol-notice a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .ou-now a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .p-important a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .p-urgent a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .pet-resp a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .pet-stats a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .pf-kpi a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .pr-fact a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .pr-soon a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .pr-sum-i a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .rq-resp a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .s-blocat a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .s-executie a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .s-proiect a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .s-respinsa a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .sg-fact a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .st-card a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .st-noimg a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .sy-mark a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .tx-banner a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .tx-calc a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .tx-head a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .ub-exp a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .ub-privacy a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .ub-soon a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .ws-moved a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .alert-light a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .alert-secondary a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item) {
    color: var(--primary-readable, var(--primary));
}


/* Filtrele scrise ca „nav-pills" Bootstrap (urbanism). `.nav-link` e exclus din regula
 * generală de linkuri - în antet stă pe fundal colorat - dar în conținut stă pe cardul
 * întunecat, iar pastila ACTIVĂ e plină cu culoarea instituției. Măsurat: 4.03:1 pentru
 * „Toate". */
body.dark-mode .nav-pills .nav-link {
    color: var(--primary-on-dark, #6EC1E4);
}
/* Pastila activă purta albastrul implicit al lui Bootstrap (#0d6efd), nu culoarea
 * instituției - vizibil chiar și în modul luminos, unde filtrul de urbanism era albastru
 * „de framework" lângă un site turcoaz. Cu varianta derivată pentru text, albul ajunge la
 * 4.92:1 (față de 4.03:1 cât dădea cerneala pe albastrul Bootstrap). */
/* Rezerva e un albastru închis LITERAL, nu `var(--primary)`: la instituțiile fără culoare
   aleasă `--primary-readable` nu există, iar în modul întunecat `--primary` e deschis -
   cu text alb ar da 2.72:1. Așa, perechea e sigură în toate cazurile: 4.92:1 la Odoreu,
   5.8:1 pe rezervă. */
.nav-pills .nav-link.active,
body.dark-mode .nav-pills .nav-link.active {
    background-color: var(--primary-readable, #0b5ea8);
    color: #fff;
}


/* Titlurile de secțiune din transparență, în modul întunecat: varianta „readable" e
 * întunecată prin definiție (e făcută pentru panouri deschise), deci pe cardul întunecat
 * dădea 3.80:1. Aici se folosește varianta deschisă, derivată din aceeași culoare. */
body.dark-mode .transparency-section-header {
    color: var(--primary-on-dark, #6EC1E4);
}

/* Butoanele „outline" în contrast ridicat. Regula din temă acoperă `.btn-primary` și
 * `.btn-secondary`, dar nu și varianta conturată - iar pagina de declarații are 49 de
 * astfel de butoane, toate la 1.33:1. */
body.high-contrast .btn-outline-primary,
body.high-contrast .btn-outline-secondary,
body.high-contrast .btn-outline-danger {
    background: #000000;
    color: #FFD700;
    border-color: #FFD700;
}


/* ------------------------------------------------------------------ *
 * Modul întunecat, tema „primărie": textul secundar al MODULELOR.
 *
 * Modulele își scriu regulile de mod întunecat cu `html.dark` (convenția temei hibride),
 * iar tema „primărie" marchează `body.dark-mode` - cele două convenții sunt documentate
 * în CLAUDE.md. Consecința, măsurată pe site-ul cu cele mai multe module active
 * (53 de rute): etichetele mărunte rămâneau în griul de mod LUMINOS pe fundal închis,
 * între 1.82:1 și 3.88:1. Nu se vedea pe Odoreu fiindcă acolo modulele astea n-au
 * conținut - absența datelor ascundea defectul.
 * ------------------------------------------------------------------ */
body.dark-mode .al-desc, body.dark-mode .al-note,
body.dark-mode .tx-note, body.dark-mode .iar-label,
body.dark-mode .iar-tag-inline, body.dark-mode .pr-note, body.dark-mode .jb-note,
body.dark-mode .pf-note, body.dark-mode .inv-note, body.dark-mode .ar-note,
body.dark-mode .bg-note, body.dark-mode .pr-sum-l, body.dark-mode .bg-head-l,
body.dark-mode .bg-head-s, body.dark-mode .bg-bar-pct, body.dark-mode .pf-m-label,
body.dark-mode .pf-kpi-l, body.dark-mode .pf-kpi-s, body.dark-mode .ar-high-l,
body.dark-mode .tr-meta, body.dark-mode .jb-fact-l, body.dark-mode .inv-pct,
body.dark-mode .faq-vote-q {
    color: #aab4c4;
}

/* Insigna Bootstrap „Important"/„În execuție" își ia fundalul din `--bs-secondary-bg`,
   care în modul întunecat al temei rămâne deschis, iar textul e alb: 1.31:1. */
body.dark-mode .badge.bg-secondary,
body.dark-mode .badge.text-bg-secondary { background-color:#3a4353 !important; color:#e7ebf2 !important; }
body.dark-mode .badge.bg-light,
body.dark-mode .badge.text-bg-light { background-color:#2b313c !important; color:#e7ebf2 !important; }

/* Rolul din cartonașul de personal și avertismentele de termen: clase Bootstrap de
   culoare, care pe fundal închis scad sub prag. */
body.dark-mode .content-main .text-primary { color: var(--primary-on-dark, #6EC1E4) !important; }
body.dark-mode .content-main .text-danger { color: #ff8a8a !important; }

/* Blocul de dată al evenimentelor: cifra mare și luna, scrise cu culoarea instituției
   pe un fundal care în modul întunecat devine închis. */
body.dark-mode .content-main .ev-date .fs-4,
body.dark-mode .content-main .ev-date .small { color: var(--primary-on-dark, #6EC1E4); }


/* Ultimele perechi culoare/fundal din modul întunecat, fiecare stabilită ÎMPREUNĂ - un
   text corectat fără fundalul lui e jumătate de reparație, cum s-a văzut de trei ori azi. */

/* Insigna de prioritate a comunicărilor și starea investițiilor: `bg-warning`+`text-dark`
   pe un galben pe care tema îl închide în modul întunecat → 1.31:1. */
body.dark-mode .badge.bg-warning, body.dark-mode .badge.text-bg-warning {
    background-color:#d99400 !important; color:#1a1a1a !important;
}
body.dark-mode .badge.bg-danger,  body.dark-mode .badge.text-bg-danger  { background-color:#a62a2a !important; color:#fff !important; }
body.dark-mode .badge.bg-info,    body.dark-mode .badge.text-bg-info    { background-color:#1f6b85 !important; color:#fff !important; }
body.dark-mode .badge.bg-success, body.dark-mode .badge.text-bg-success { background-color:#1d6b46 !important; color:#fff !important; }

/* Cifra și luna din blocul de dată al unui eveniment (marcaj Bootstrap, fără clasă
   proprie): stau pe fundalul cardului întunecat. */
/* Blocul de dată al unui eveniment are FUNDAL plin cu culoarea instituției (în modul
   întunecat, albastrul deschis al temei), deci cifra are nevoie de cerneală, nu de
   varianta deschisă - prima încercare a coborât contrastul de la 2.72:1 la 1.35:1,
   fiindcă am presupus fundalul în loc să-l măsor. */
body.dark-mode .content-main .fs-4.fw-bold.lh-1,
body.dark-mode .content-main .fs-4.fw-bold.lh-1 + .small {
    color: #10161F;
}

/* Filtrul de categorii al întrebărilor frecvente: `btn-outline-primary` marcat `.on`. */
/* ⚠️ Rezerva NU mai e `var(--primary)`: la instituțiile care n-au ales o culoare,
   `--primary-readable` nu e definit deloc, iar în modul întunecat `--primary` e
   albastrul DESCHIS al temei - deci rezerva dădea exact opusul. Aici se cere cerneală
   pe fundalul plin, ceea ce e adevărat în ambele situații (6.67:1 pe #4DA3E8). */
/* ⚠️ Aici a fost `body.dark-mode .nav-pills .nav-link.active{color:#10161F}`, pusă când
   fundalul pastilei era albastrul deschis al temei. După ce fundalul a devenit varianta
   ÎNCHISĂ, cerneala pe el a dat 3.69:1 - o corectură rămasă în urmă față de ce repara.
   Perechea se stabilește într-un singur loc, mai sus. */
/* Butonul de filtru „activ" al întrebărilor frecvente se umple cu albastrul implicit al
   lui Bootstrap (#0d6efd): cerneala pe el dă 4.03:1, albul 4.50:1 - amândouă la limită.
   Se stabilesc ambele capete: albastru închis cu text alb, 5.8:1. */
body.dark-mode .btn-outline-primary.on,
body.dark-mode .btn-outline-primary.active {
    background-color:#0b5ea8; border-color:#0b5ea8; color:#fff;
}

/* „necompletat" din raportul 544: roșu de mod luminos pe fundal închis. */
body.dark-mode .iar-unfilled { color:#ff9c9c; }

/* Linkurile din alertele deschise (`alert-light`) - regula există deja pentru modul
   hibrid; aici e perechea pentru tema „primărie". */
/* Linkurile din cutiile DESCHISE rămase deschise în modul întunecat: rezerva e un
   albastru închis literal, din același motiv ca mai sus. #0b5ea8 dă 5.8:1 pe #fcfcfd. */
body.dark-mode .alert-light a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item),
body.dark-mode .alert-secondary a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.mol-section-card):not(.quick-link-item) {
    color: var(--primary-readable, #0b5ea8);
}


/* Pastila activă de filtru, în CONTRAST RIDICAT. Regula de mai sus îi dă fundalul
   instituției cu text alb - corect în modul normal, dar în contrast ridicat tema
   lucrează cu galben pe negru, iar albul pe fundalul deschis a dat 1.67:1. Aceleași
   valori ca la `.btn-primary` din temă, ca filtrul să arate ca restul paginii. */
body.high-contrast .nav-pills .nav-link.active,
body.high-contrast .btn-outline-primary.on,
body.high-contrast .btn-outline-primary.active {
    background-color:#FFD700 !important; border-color:#FFD700 !important; color:#000 !important;
}


/* Insignele informative din conținut (taxă, termen, temei legal) moștenesc din Bootstrap
   `white-space:nowrap`. La 412px, „Termen de eliberare: 30 de zile de la naștere" devine
   o pastilă de 502px care împinge PAGINA în lateral - măsurat cu tools/overflow-sweep.sh
   pe /stare-civila. Nowrap-ul e bun pentru insigne scurte de stare; pentru o propoziție
   nu e. Doar conținutul, ca insignele din antet și din navigație să rămână neatinse. */
.content-main .badge { white-space: normal; }

/* ===== Cardul unui articol =====
   Același în lista de știri, pe prima pagină și în bara laterală. Imaginea sus, titlul
   dedesubt, data la urmă.

   Fără chenar, fără umbră și fără nimic care se mișcă la trecerea cursorului: într-o
   pagină cu douăsprezece anunțuri, douăsprezece cutii care sar la mouse sunt zgomot.
   Singurul semn de interacțiune e sublinierea titlului - ce face orice legătură. */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 2rem 1.75rem;
    margin: 0 0 2rem;
}
.news-grid-side { grid-template-columns: 1fr; gap: 1.5rem; }

.ncard {
    margin: 0;
    /* Linie subțire de contur: delimitează cardul fără să-l transforme în cutie. Nu are
       umbră și nu se schimbă la trecerea cursorului - vezi nota de mai sus. */
    border: 1px solid var(--border, #e3e8ee);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card-bg, #fff);
}
/* Cardurile unui rând sunt la fel de înalte, iar data stă jos de tot: altfel, un titlu de
   trei rânduri lângă unul de două împinge data mai jos și rândul arată nealiniat. */
.ncard-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.ncard:focus-within {
    outline: 3px solid var(--accent, #0078D4);
    outline-offset: 3px;
}
.ncard-link:focus-visible { outline: none; }
.ncard-media {
    display: block;
    aspect-ratio: 2 / 1;          /* 1.2 × 0.6 */
    overflow: hidden;
    border-bottom: 1px solid var(--border, #e3e8ee);
    background: #f1f3f6;
}

/* ===== Cadrul unei imagini: cardul de articol și imaginea de început a unei pagini =====
   Pe site-ul unei primării, „imaginea articolului" e aproape întotdeauna o scanare A4 în
   picioare, nu o fotografie: la Odoreu, 126 din 166. Decupată pe tot cadrul, se vedea o
   fâșie din capul paginii - un dreptunghi de text tăiat la mijloc de frază; patru carduri
   alăturate arătau ca patru fragmente fără legătură.

   Deci implicit imaginea se AȘAZĂ ÎNTREAGĂ, ca o foaie pe un fundal neutru, cu o linie
   subțire de contur care o desparte de fundal. Fotografiile - recunoscute după raportul
   citit din `media` - primesc clasa `.ncard-media-photo` și umplu cadrul ca până acum.
   În ambele cazuri cadrul are aceeași mărime, deci grila rămâne simetrică. */
.ncard-media img,
.page-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* Marginile foii: o foaie albă pe fundal gri are nevoie de un contur ca să nu pară
       că plutește, iar una cu antet colorat are nevoie de umbră ca să nu pară lipită. */
    box-shadow: 0 0 0 1px rgba(22, 35, 58, .09), 0 1px 3px rgba(22, 35, 58, .08);
}
.ncard-media,
.page-featured-image { background: #eef1f5; padding: .55rem; }

/* Fotografie: umple cadrul, fără contur și fără spațiu în jur.
   DOAR în carduri. Imaginea de început a unei pagini e aleasă anume de instituție -
   harta comunei, stema, o fotografie a sediului - și se vede ÎNTREAGĂ chiar dacă e
   fotografie: o hartă tăiată pe jumătate e o pierdere, nu o încadrare. */
/* În bara laterală miniatura e de 4,5rem: un spațiu interior de mărimea celui din grilă
   ar lăsa foaia cât o unghie. Regula stă ÎNAINTEA celei de fotografie fiindcă au aceeași
   specificitate (0,2,0) și atunci decide ordinea: pusă după, ar fi readus spațiul
   interior tocmai la fotografiile care trebuie să-l piardă. */
.ncard-side .ncard-media { padding: .2rem; }

.ncard-media.ncard-media-photo { padding: 0; }
.ncard-media.ncard-media-photo img {
    object-fit: cover;
    object-position: top;         /* antetul documentului, nu mijlocul paginii */
    box-shadow: none;
}
/* Cardul fără imagine are doar pictograma lui: fără spațiu interior, fără fundal de foaie.
   Selectorul poartă și `.ncard-media` pentru specificitate (0,2,0): cu o singură clasă
   (0,1,0) pierdea față de `.ncard-side .ncard-media`, indiferent de ordinea din fișier,
   iar miniatura goală din bara laterală rămânea cu spațiu interior. */
.ncard-media.ncard-media-empty { padding: 0; }

/* Fundalul de foaie în mod întunecat. Se scrie aici DOAR pentru imaginea paginii; pentru
   carduri, culoarea se pune la regula de mod întunecat de mai jos, altfel aceasta ar fi
   învinsă de ea: au aceeași specificitate, iar cealaltă vine mai târziu în fișier. */
body.dark-mode .page-featured-image { background: #212b3a; }
body.dark-mode .ncard-media img,
body.dark-mode .page-featured-image img { box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }

/* Imaginea de început a unei pagini: același cadru ca al cardurilor, ca să fie limpede
   că e imaginea paginii, nu o poză lipită în text. Înainte era un `img-fluid` lăsat la
   lățimea coloanei: o fotografie de 600px întinsă la 740 arăta moale. */
.page-featured-image {
    margin: 0 0 1.5rem;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border: 1px solid var(--border, #e3e8ee);
    border-radius: 14px;
}
body.dark-mode .page-featured-image { border-color: #2c3849; }
.ncard-media-empty {
    display: grid;
    place-items: center;
    color: #b3bdcb;
    font-size: 1.9rem;
}
.ncard-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: .9rem 1rem 1rem;
}
.ncard-cat {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--primary-readable, #0b5ea8);
    margin-bottom: .25rem;
}
.ncard-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.38;
    letter-spacing: -.01em;
    color: var(--text-primary, #16233a);
}
.ncard-link:hover .ncard-title { text-decoration: underline; }
.ncard-date {
    display: block;
    margin-top: auto;
    padding-top: .45rem;
    font-size: .8125rem;
    color: var(--text-secondary, #6b7686);
}

/* ===== Varianta din bara laterală =====
   Același card, dar CULCAT: miniatură mică în stânga, titlul și data în dreapta. În
   picioare, la aceeași mărime ca în listă, coloana din dreapta arăta ca o continuare a
   grilei principale - două liste identice, lipite. Culcat și mai mic, se citește imediat
   ca listă secundară. */
.news-grid-side { gap: 0; }
.ncard-side { border: 0; border-radius: 0; background: none; }
.ncard-side + .ncard-side { border-top: 1px solid var(--border, #e3e8ee); }
.ncard-side .ncard-link {
    flex-direction: row;
    align-items: flex-start;
    gap: .7rem;
    padding: .7rem 0;
}
.ncard-side .ncard-media {
    flex: 0 0 auto;
    width: 4.5rem;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border, #e3e8ee);
    border-bottom: 1px solid var(--border, #e3e8ee);
    border-radius: 8px;
}
.ncard-side .ncard-body { padding: 0; min-width: 0; }
.ncard-side .ncard-title { font-size: .875rem; -webkit-line-clamp: 3; font-weight: 600; }
.ncard-side .ncard-date { font-size: .76rem; padding-top: .25rem; }
body.dark-mode .ncard-side { background: none; border-color: transparent; }
body.dark-mode .ncard-side + .ncard-side { border-top-color: #2c3849; }

body.dark-mode .ncard { border-color: #2c3849; background: #1b2432; }
body.dark-mode .ncard-media { border-bottom-color: #2c3849; }
body.dark-mode .ncard-title { color: #e9eef6; }
body.dark-mode .ncard-date { color: #9fadc0; }
/* `.ncard-media` e fundalul de foaie: aceeași nuanță ca la imaginea de început a unei
   pagini, ca să nu iasă două cenușiuri diferite pentru același fel de cadru. Cardul
   fără imagine rămâne pe fundalul mai închis al cardului. */
body.dark-mode .ncard-media { background: #212b3a; }
body.dark-mode .ncard-media-empty { background: #1e2735; }
body.dark-mode .ncard-media-empty { color: #4d5a6d; }
body.dark-mode .ncard-cat { color: #7db4e8; }

@media (max-width: 575.98px) {
    .news-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ===== Bara de informații din capul paginii =====
   Data, vremea localității, cursul valutar. Pe telefon dispar întâi cursul, apoi vremea:
   bara de sus n-are voie să împingă numele instituției pe al doilea rând. */
.info-bar {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    font-size: .8125rem;
    margin-left: auto;
    margin-right: 1rem;
}
.info-item { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
/* Telefonul și emailul nu se rup în două („0261 875 / 850"). */
.top-bar-contact > span { white-space: nowrap; }
.info-item i { opacity: .85; }
.info-note { opacity: .7; font-size: .95em; }
.info-sep { opacity: .5; }

@media (max-width: 1199.98px) { .info-fx { display: none; } }
@media (max-width: 575.98px) { .info-bar .info-item:not(.info-date) { display: none; } }

/* ===== Contul cetățeanului =====
   Antet cu inițialele și datele, două cifre, apoi cererile grupate pe tip. Pe telefon
   totul trece pe o coloană: contul se deschide cel mai des de pe telefon, după ce omul
   a primit un email că i s-a răspuns. */
.ca-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem;
    border: 1px solid var(--border, #e3e8ee);
    border-radius: 14px;
    background: var(--card-bg, #fff);
    margin-bottom: 1.5rem;
}
.ca-avatar {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    background: var(--primary, #0b5ea8);
}
.ca-head-main { flex: 1 1 14rem; min-width: 0; }
.ca-name { margin: 0; font-size: 1.25rem; font-weight: 700; }
.ca-meta { margin: .2rem 0 0; font-size: .875rem; color: var(--text-secondary, #6b7686); word-break: break-word; }
.ca-dot { opacity: .5; }
.ca-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.ca-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ca-stat {
    flex: 1 1 8rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--border, #e3e8ee);
    border-radius: 14px;
    background: var(--card-bg, #fff);
}
.ca-stat-n { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--primary-readable, #0b5ea8); }
.ca-stat-l { display: block; font-size: .8125rem; color: var(--text-secondary, #6b7686); }

.ca-block { margin-bottom: 1.75rem; }
.ca-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}
/* Culoarea proprie, nu cea moștenită de la `h2` din temă: pe fundalul paginii de cont
   aceea dă 4.43:1, adică sub pragul WCAG AA de 4.5:1 (măsurat cu contrast-sweep). */
.ca-block-head h2 { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--text-primary, #16233a); }
.ca-block-head h2 i { color: var(--primary-readable, #0b5ea8); margin-right: .35rem; }
.ca-block-new { font-size: .85rem; font-weight: 600; text-decoration: none; }
.ca-block-new:hover { text-decoration: underline; }
.ca-empty { color: var(--text-secondary, #6b7686); font-size: .9rem; margin: 0; }

.ca-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border, #e3e8ee); border-radius: 14px; overflow: hidden; }
.ca-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    padding: .8rem 1rem;
    background: var(--card-bg, #fff);
}
.ca-item + .ca-item { border-top: 1px solid var(--border, #eef1f5); }
.ca-item-main { min-width: 0; }
.ca-item-title { display: block; font-weight: 600; font-size: .95rem; }
.ca-item-meta { display: block; font-size: .8125rem; color: var(--text-secondary, #6b7686); }
.ca-status {
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: 20px;
    background: #eef2f7;
    color: #44536a;
    white-space: nowrap;
}
/* Numele sunt cele din enum-urile modulelor: petiții și solicitări în română,
   programări în engleză. Verificate în `information_schema`, nu presupuse. */
.ca-status-noua, .ca-status-pending, .ca-status-primita { background: #e7f0fb; color: #0b5ea8; }
.ca-status-in_lucru, .ca-status-prelungita, .ca-status-confirmed { background: #fdf0e0; color: #8f4700; }
.ca-status-rezolvata, .ca-status-raspuns, .ca-status-solutionata { background: #e4f4ea; color: #1b6b3a; }
.ca-status-respinsa, .ca-status-refuzata, .ca-status-cancelled { background: #fbe9e7; color: #a32820; }

/* În mod întunecat, culoarea instituției e prea deschisă ca fundal pentru text alb:
   inițialele ajungeau la 2.72:1. Fundal închis, litere deschise. */
body.dark-mode .ca-avatar { background: #24405e; color: #e8eef7; }
body.dark-mode .ca-head, body.dark-mode .ca-stat, body.dark-mode .ca-item { background: #1b2432; }
body.dark-mode .ca-head, body.dark-mode .ca-stat, body.dark-mode .ca-list { border-color: #2c3849; }
body.dark-mode .ca-item + .ca-item { border-top-color: #2c3849; }
body.dark-mode .ca-meta, body.dark-mode .ca-stat-l, body.dark-mode .ca-item-meta, body.dark-mode .ca-empty { color: #a9b6c9; }
body.dark-mode .ca-status { background: #26313f; color: #c3cedd; }

@media (max-width: 575.98px) {
    .ca-head { flex-direction: column; align-items: flex-start; }
    .ca-head-actions { width: 100%; }
    .ca-head-actions .btn { flex: 1 1 auto; }
    .ca-item { flex-direction: column; align-items: flex-start; gap: .35rem; }
}

/* Butonul de ștergere a contului, în mod întunecat: roșul implicit al Bootstrap ajunge
   la 3.64:1 pe fundal închis - sub pragul de 4.5:1. Măsurat cu contrast-sweep. */
body.dark-mode .btn-outline-danger { color: #ff8a80; border-color: #ff8a80; }
body.dark-mode .btn-outline-danger:hover,
body.dark-mode .btn-outline-danger:focus { background: #ff8a80; color: #1b2432; }

/* ===== Numele instituției din antet, ca legătură spre prima pagină =====
   Stema de alături duce acolo de la început; numele și sloganul sunt însă locul în care
   oricine încearcă să dea clic. Legătura NU se vede ca legătură: fără subliniere, fără
   culoare de link, fără nimic care se schimbă la trecerea cursorului - antetul arată
   exact ca înainte.

   Conturul la navigarea cu tastatura rămâne, și e singurul semn vizibil: fără el, cine
   nu folosește mausul n-ar mai ști pe ce element a ajuns. */
.site-title-link,
.site-title-link:hover,
.site-title-link:focus {
    color: inherit;
    text-decoration: none;
}
.site-title-link { display: block; }
/* Pe telefon, style.css-ul referinței pune `.d-flex { flex-wrap: wrap }` pe TOATE elementele
   flex. Un nume lung de instituție („Primăria Comunei Terebești") cădea astfel sub stemă, pe
   rând propriu, cu subtitlul rupt pe încă două rânduri. Rândul stemei nu se mai rupe; textul
   se împarte lângă ea și cedează loc butoanelor din dreapta. */
.site-header .site-logo { flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; }
.site-header .site-title { min-width: 0; }
.site-header .site-logo > a { flex: 0 0 auto; }   /* stema nu se micșorează ca să facă loc textului */
.site-title-link:focus-visible {
    outline: 3px solid var(--accent, #0078D4);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ===== Cardul unui articol fără fotografie: stema și numele instituției =====
   Era o pictogramă de document pe fundal gri - corectă, dar anonimă: într-un rând de
   carduri, anunțul fără fotografie arăta ca un loc gol.

   Nu e o imagine generată: sunt stema și numele, așezate din CSS. Mărimile sunt în
   procente din cadru, deci se potrivesc singure pe orice lățime, de la grila de pe
   desktop până la cardul cât ecranul de pe telefon. */
.ncard-media-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .9rem;
    background: linear-gradient(160deg, #f4f7fb 0%, #e7edf5 100%);
}
.ncard-media-brand img {
    width: auto;
    height: 46%;
    max-height: 74px;
    min-height: 28px;
    object-fit: contain;
    box-shadow: none;          /* nu e o foaie: nu primește conturul de document */
}
.ncard-brand-name {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    letter-spacing: .01em;
    color: var(--primary-readable, #0b5ea8);
}
/* În bara laterală cadrul e de 4,5rem: numele n-ar încăpea lizibil, rămâne doar stema. */
.ncard-side .ncard-media-brand { padding: .3rem; }
.ncard-side .ncard-brand-name { display: none; }
.ncard-side .ncard-media-brand img { height: 100%; max-height: none; }

body.dark-mode .ncard-media-brand { background: linear-gradient(160deg, #222c3c 0%, #1b2431 100%); }
body.dark-mode .ncard-brand-name { color: #9fc8ea; }
body.high-contrast .ncard-media-brand { background: #000; }
body.high-contrast .ncard-brand-name { color: #FFFFFF; }

/* ===== Căutarea din antet: în mijloc, cu sugestii =====
   Stătea lipită de marginea dreaptă, între numele instituției și butonul de meniu. Acum
   ocupă spațiul dintre ele și se centrează: e locul în care omul o caută. */
.site-header > .container { position: relative; }
.site-header .site-search {
    /* Centrata in ANTET, nu in spatiul ramas: cu `flex:1` iesea la mijlocul distantei
       dintre numele institutiei si marginea dreapta, adica vizibil spre stanga. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(30rem, 38%);
    /* `transform` creeaza context de stivuire, deci `z-index`-ul listei de sugestii
       ramane prins INAUNTRU si meniul principal (z-index 1000) o acoperea. Valoarea
       trebuie pusa aici, pe elementul care face contextul. */
    z-index: 1040;
}
.site-header .site-search form { width: 100%; }
/* Sub 1200px centrul antetului cade peste un nume lung de instituție („Primăria
   Comunei Terebești" era acoperit de căutare la 1024px). Acolo căutarea revine în flux
   și ia doar spațiul rămas între nume și butonul de servicii. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .site-header .site-search {
        position: relative;
        left: auto;
        transform: none;
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: 26rem;
        margin: 0 1rem;
    }
}
/* Tot sub 1200px, un meniu cu multe intrări (Odoreu: nouă) împingea butonul MOL afară
   din ecran. Spațierea mai strânsă îl ține pe un rând. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .main-nav .navbar-nav .nav-link { padding-left: 6px; padding-right: 6px; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .main-nav .navbar-nav .nav-link { padding-left: 12px; padding-right: 12px; }
}
/* Cu zece intrări în meniu (Terebești), butonul MOL ieșea din ecran sub 1400px. Acolo
   rămâne doar pictograma; eticheta e ascunsă vizual, nu scoasă, deci butonul își
   păstrează numele pentru cititoarele de ecran, iar `title` îl arată la trecerea mausului. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .btn-mol { padding-left: .7rem; padding-right: .7rem; }
    .btn-mol span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Lista de sugestii. `position:absolute` peste conținut, deci nu împinge antetul. */
.search-ac { position: relative; }
.search-ac-list {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    z-index: 1030;              /* peste antet, sub bara de cookie-uri (9998) */
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border, #dde3ee);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(16, 28, 48, .16);
    padding: .3rem;
    text-align: left;
}
.search-ac-list[hidden] { display: none; }

.search-ac-item {
    display: block;
    padding: .55rem .7rem;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}
.search-ac-item:hover,
.search-ac-item.on { background: #eef3fa; }
.search-ac-title {
    display: block;
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.3;
    color: var(--text-primary, #16233a);
}
.search-ac-type {
    display: inline-block;
    margin-top: .15rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--primary-readable, #0b5ea8);
}
.search-ac-all {
    display: block;
    padding: .5rem .7rem;
    margin-top: .2rem;
    border-top: 1px solid var(--border, #eef1f6);
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    color: var(--primary-readable, #0b5ea8);
}
.search-ac-empty {
    margin: 0;
    padding: .7rem;
    font-size: .88rem;
    color: var(--text-secondary, #5b6678);
    text-align: center;
}

body.dark-mode .search-ac-list { background: #1b2432; border-color: #2c3849; box-shadow: 0 12px 28px rgba(0,0,0,.45); }
body.dark-mode .search-ac-item:hover,
body.dark-mode .search-ac-item.on { background: #253044; }
body.dark-mode .search-ac-title { color: #e9eef6; }
body.dark-mode .search-ac-empty { color: #9fadc0; }
body.dark-mode .search-ac-type,
body.dark-mode .search-ac-all { color: #7db4e8; }
body.high-contrast .search-ac-list { background: #000; border-color: #FFD700; }
body.high-contrast .search-ac-title,
body.high-contrast .search-ac-empty { color: #FFFFFF; }
body.high-contrast .search-ac-item.on,
body.high-contrast .search-ac-item:hover { background: #333; }

@media (max-width: 767.98px) {
    .site-header .site-search { padding: 0; }
}

/* Miniatura din sugestie: aceeasi imagine reprezentativa ca in lista de articole. */
.search-ac-item.has-thumb { display: flex; gap: .6rem; align-items: flex-start; }
.search-ac-thumb {
    flex: 0 0 auto;
    width: 3.4rem;
    height: 3.4rem;
    object-fit: cover;
    object-position: top;
    border-radius: 6px;
    border: 1px solid var(--border, #e3e8ee);
    background: #eef1f5;
}
.search-ac-body { min-width: 0; }
body.dark-mode .search-ac-thumb { border-color: #2c3849; background: #212b3a; }

/* Rezultatul de cautare cu imagine reprezentativa: miniatura in stanga, textul in dreapta.
   Pe telefon trece deasupra, ca titlul sa nu ramana pe o coloana ingusta. */
.search-result-item.has-thumb { display: flex; gap: 1rem; align-items: flex-start; }
.search-result-thumb {
    flex: 0 0 auto;
    width: 7.5rem;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: top;
    border-radius: 8px;
    border: 1px solid var(--border, #e3e8ee);
    background: #eef1f5;
}
.search-result-body { min-width: 0; }
body.dark-mode .search-result-thumb { border-color: #2c3849; background: #212b3a; }
@media (max-width: 575.98px) {
    .search-result-item.has-thumb { flex-direction: column; }
    .search-result-thumb { width: 100%; }
}


/* Numele instituției din antet, în contrast ridicat: perechea se scrie EXPLICIT, și
   culoarea, și fundalul. Regulile existente le lăsau pe seama moștenirii - culoarea
   venea de la `.site-title p.h5`, fundalul de la `.site-header` - iar măsurătoarea
   ieșea uneori 1,40:1, adică nelizibil, dar nu de fiecare dată. O pereche scrisă pe
   același element nu mai depinde de ce apucă să se aplice și în ce ordine. */
body.high-contrast .site-header { background: #1a1a1a; }
body.high-contrast .site-title-link,
body.high-contrast .site-title-link p.h5,
body.high-contrast .site-title-link small { color: #FFFFFF; }

/* ===== Valul de peste fotografia hero =====
   Era in culoarea institutiei, cu 85% opacitate jos si 15% sus. Pe o nuanta deschisa -
   si pe o fotografie luminoasa, cum e cea a comunei - titlul alb ajungea la limita
   citibilitatii, iar rezultatul depindea de ce fotografie pusese institutia.

   Acum e NEGRU si mai dens, cu partea de jos aproape opaca: textul sta pe el, nu pe
   fotografie. Fotografia ramane vizibila sus, unde nu scrie nimic. */
.hero-overlay {
    background: linear-gradient(to top,
        rgba(0, 0, 0, .88) 0%,
        rgba(0, 0, 0, .72) 45%,
        rgba(0, 0, 0, .45) 100%) !important;
}
body.dark-mode .hero-overlay {
    background: linear-gradient(to top,
        rgba(0, 0, 0, .92) 0%,
        rgba(0, 0, 0, .78) 45%,
        rgba(0, 0, 0, .55) 100%) !important;
}
body.high-contrast .hero-overlay { background: rgba(0, 0, 0, .95) !important; }

/* ===== „Servicii online”, ca buton în antet =====
   Era primul element din bara de navigație, deci pe telefon se ascundea sub butonul de
   meniu - tocmai lucrul pentru care vine cetățeanul. În antet rămâne vizibil pe orice
   lățime; pe telefon îi rămâne doar pictograma, ca să nu împingă numele instituției.

   Meniul NU foloseste `.services-mega`: acela e `display:grid` neconditionat si, scos din
   bara de navigatie, ar fi ramas mereu deschis. Aici grila se aplica DOAR cand Bootstrap
   pune `.show`. */
/* `position:relative` + `z-index` fac din bloc un context de stivuire asezat PESTE bara
   de navigatie (care are z-index 1000). Fara asta, meniul care se desface din antet intra
   sub navigatie - exact ce patise si lista de sugestii a cautarii. Orice element care se
   desface din antet trebuie sa treaca peste 1000. */
.header-services {
    margin-left: auto;
    flex: 0 0 auto;
    position: relative;
    z-index: 1050;
}
.header-services-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border: 0;
    border-radius: 8px;
    background: var(--primary, #0d47a1);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.2;
}
.header-services-btn:hover,
.header-services-btn:focus { background: var(--primary-readable, #0b5ea8); color: #fff; }
.header-services-btn .bi { font-size: 1.05rem; }

.header-services-menu { display: none; }
.header-services-menu.show {
    display: grid;
    grid-template-columns: repeat(3, minmax(11rem, 1fr));
    gap: 0 1.4rem;
    padding: 1.1rem 1.3rem;
    min-width: min(46rem, calc(100vw - 1.5rem));
    max-height: 75vh;
    overflow-y: auto;
    border: 1px solid var(--border, #DEE2E6);
    border-radius: .6rem;
    box-shadow: 0 10px 30px rgba(0, 51, 102, .16);
}

@media (max-width: 991.98px) {
    .header-services-text { display: none; }         /* pe telefon rămâne pictograma */
    .header-services-btn { padding: .5rem .7rem; }
    .header-services-menu.show { grid-template-columns: 1fr; }
}
body.dark-mode .header-services-menu.show { background: #1b2432; border-color: #2c3849; }

/* ===== Încadrarea fotografiei hero =====
   `object-position` era implicit `50% 50%`, deci se vedea mijlocul fotografiei. Pe
   fotografia comunei, partea interesantă e sus - cerul și linia orizontului - iar
   ancora coboară acum la 20%: imaginea se mută în jos, se vede mai mult din partea ei
   de sus.

   Înălțimea e FIXĂ pe desktop, nu minimă: cu `min-height` cadrul creștea odată cu
   conținutul, iar decupajul se muta de la un ecran la altul. Fixă, încadrarea rămâne
   aceeași oriunde. */
.hero-image { object-position: center 20%; }

@media (min-width: 992px) {
    .hero { min-height: 460px; }
}

/* ===== Pagina de serviciu fără date publicate =====
   Era o pictogramă și o propoziție - corectă, dar o fundătură. Sub ea stă acum
   compartimentul care răspunde de serviciu, cu datele lui reale din setări. */
.service-fallback {
    max-width: 26rem;
    margin: 1.2rem auto 0;
    padding: .9rem 1.1rem;
    text-align: left;
    background: #f4f7fb;
    border: 1px solid var(--border, #e3e8ee);
    border-radius: 10px;
}
.service-fallback-title {
    margin: 0 0 .5rem;
    font-weight: 600;
    font-size: .95rem;
    color: var(--text-primary, #16233a);
}
.service-fallback ul { list-style: none; margin: 0; padding: 0; }
.service-fallback li { display: flex; gap: .5rem; align-items: baseline; font-size: .88rem; padding: .18rem 0; }
.service-fallback .bi { color: var(--primary-readable, #0b5ea8); }
body.dark-mode .service-fallback { background: #212b3a; border-color: #2c3849; }
body.dark-mode .service-fallback-title { color: #e9eef6; }
body.dark-mode .service-fallback .bi { color: #7db4e8; }

/* Persoană fără fotografie în cardul de conducere.
   Nu se pune o poză de arhivă și nu se lasă cardul mai scurt decât vecinii lui: un
   chenar neutru, de aceeași înălțime, cu o siluetă desenată din CSS. O funcție nou
   ocupată are nume înainte să aibă fotografie - asta e starea normală, nu o lipsă.
   Silueta e din pseudo-elemente, nu dintr-o iconiță: `sanitizeHtml()` scoate `<i>`
   din conținut, deci marcajul trebuie să fie doar cutia. */
.content-main .person-card .person-noimg {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #eef1f5;
    overflow: hidden;
}
.content-main .person-card .person-noimg::before,
.content-main .person-card .person-noimg::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #c7d0db;
}
.content-main .person-card .person-noimg::before {   /* capul */
    top: 30%; width: 22%; aspect-ratio: 1; border-radius: 50%;
}
.content-main .person-card .person-noimg::after {    /* umerii */
    top: 58%; width: 42%; height: 26%; border-radius: 42% 42% 0 0;
}
.content-main .person-card.person-card-home .person-noimg {
    width: 104px; height: 104px; aspect-ratio: 1 / 1; flex: 0 0 104px;
}
.content-main .person-card.person-card-home .person-noimg::before { top: 22%; width: 30%; }
.content-main .person-card.person-card-home .person-noimg::after { top: 56%; width: 56%; height: 32%; }
body.dark-mode .content-main .person-card .person-noimg { background: #232833; }
body.dark-mode .content-main .person-card .person-noimg::before,
body.dark-mode .content-main .person-card .person-noimg::after { background: #3c4553; }