/* =====================================================================
   CESP Muntenia - sistem de design
   Paleta urmeaza sigla pe care o poarta site-ul: vartelnita CESP,
   bleumarin #215181. Sursa cu autoritate pentru culori:
   _HUB\10_ORGANIZATII\11_INTERN\VERDAVA\03_documente-suport\
   identitate-vizuala\Identitate vizuala.txt
   Tenantul se stabileste din hostname, prin scriptul din <head>.
   ===================================================================== */

:root {
    /* --- paleta: bleumarin CESP --- */
    --field:      #215181;   /* marca, titluri, butoane */
    --field-mid:  #16304F;   /* profund: banda de final, subsol */
    --sol:        #2E6FA8;   /* accent: linii, buline, borduri */
    --sol-deep:   #215181;   /* etichete mono, cifre */
    --leaf:       #2E6FA8;   /* alias istoric, acelasi accent */
    --brand-soft: #E3EDF6;   /* umplere moale */
    --paper:      #F7F5EF;
    --paper-2:    #EDEAE0;
    --ink:        #16202B;
    --ink-soft:   #4B5560;
    --line:       #DCD7CA;
    --line-strong:#C3BDAC;
    --alert:      #A8412B;
    --white:      #FFFFFF;

    /* --- tipografie --- */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'Inter', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

    /* --- scala --- */
    --step-0: 1.0625rem;
    --step-1: 1.1875rem;
    --step-2: 1.5rem;
    --step-3: 2rem;
    --step-4: 2.75rem;
    --step-5: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);

    --gap: clamp(1.1rem, .8rem + 1.4vw, 2rem);
    --radius: 2px;
    --maxw: 1120px;
    --shadow: 0 1px 2px rgba(22,32,43,.06), 0 8px 30px rgba(22,32,43,.07);
}

/* --- tenant urban: aceeasi structura, alt accent cromatic --- */
html[data-tenant="urban"] {
    --field:      #9A4A28;
    --field-mid:  #6E3220;
    --sol:        #C4623B;
    --sol-deep:   #9A4A28;
    --leaf:       #C4623B;
    --brand-soft: #F6E9E2;
    --paper:      #F8F4EF;
    --paper-2:    #F1E9E1;
    --ink:        #22170F;
    --ink-soft:   #5B4A3F;
    --line:       #E2D7CB;
    --line-strong:#CBB9A9;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

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

body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gap); }
/* --- tipografie --- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; color: var(--field); letter-spacing: -.012em; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { max-width: 64ch; }
a { color: var(--field); text-underline-offset: 3px; }

.eyebrow {
    font-family: var(--font-mono); font-size: .74rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--sol-deep);
    display: inline-flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ""; width: 1.8rem; height: 2px; background: var(--sol); flex: none; }

/* --- butoane --- */
.btn {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--font-body); font-weight: 600; font-size: var(--step-0);
    padding: .82em 1.5em; border: 2px solid var(--field); border-radius: var(--radius);
    background: var(--field); color: #fff; cursor: pointer; text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--field-mid); border-color: var(--field-mid); }
.btn--sol { background: var(--field); border-color: var(--field); color: #fff; }
.btn--sol:hover { background: var(--field-mid); border-color: var(--field-mid); }
.btn--ghost { background: transparent; color: var(--field); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--field); border-color: var(--field); color: #fff; }

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

/* --- antet --- */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .8rem; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.mk { display: block; width: 50px; height: 50px; flex: none; color: var(--field); }
.mk svg { display: block; width: 100%; height: 100%; }
.mk--urban { display: none; }
html[data-tenant="urban"] .mk--rural { display: none; }
html[data-tenant="urban"] .mk--urban { display: block; }
.b1 { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.1; color: var(--field); }
.b1--urban { display: none; }
html[data-tenant="urban"] .b1--rural { display: none; }
html[data-tenant="urban"] .b1--urban { display: block; }
.brand small { display: block; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); font-weight: 400; margin-top: .15rem; }
.nav { display: flex; gap: 1.5rem; align-items: center; }
.nav a { font-size: .95rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { color: var(--field); }
.nav a.btn, .nav a.btn--sol { color: #fff; padding: .6em 1.15em; font-size: .92rem; }
.nav-toggle { display: none; }

@media (max-width: 820px) {
    .nav { position: fixed; inset: 73px 0 auto 0; flex-direction: column; align-items: flex-start; background: var(--paper); padding: 1.4rem var(--gap); border-bottom: 1px solid var(--line); transform: translateY(-130%); transition: transform .25s ease; }
    .nav[data-open="true"] { transform: translateY(0); }
    .nav-toggle { display: inline-flex; background: none; border: 0; cursor: pointer; color: var(--field); padding: .3rem; }
}

/* --- subsol --- */
.site-foot { background: var(--field-mid); color: rgba(247,245,239,.78); font-size: .88rem; }
.site-foot .wrap { padding-block: 2.6rem 1.4rem; display: grid; gap: 2rem; grid-template-columns: 1.6fr 1fr 1fr; }
.site-foot h4 { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--white); margin-bottom: .7rem; }
.site-foot a { color: rgba(247,245,239,.82); text-decoration: none; display: block; padding: .16rem 0; }
.site-foot a:hover { color: var(--white); }
.site-foot p { max-width: 40ch; line-height: 1.55; }
.foot-legal { border-top: 1px solid rgba(255,255,255,.15); margin-top: .6rem; padding-block: 1.1rem 2rem; font-family: var(--font-mono); font-size: .7rem; color: rgba(255,255,255,.58); line-height: 1.75; }
@media (max-width: 760px) { .site-foot .wrap { grid-template-columns: 1fr; } }

/* --- utilitare --- */
.section { padding-block: clamp(3rem, 2rem + 3.4vw, 5.5rem); }
.tag { display: inline-block; font-family: var(--font-mono); font-size: .68rem; padding: .25em .6em; border-radius: var(--radius); border: 1px solid currentColor; white-space: nowrap; }
.tag--activ { color: var(--sol); }
.tag--iminent { color: var(--sol-deep); }
.tag--inchis { color: var(--ink-soft); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--field); color: var(--paper); padding: .6rem 1rem; border-radius: var(--radius); }