/*
 * Stilurile de bază pentru atomoltenia.ro, gândite întâi pentru mobil:
 * fontul, variabilele de design, resetarea, tipografia, accesibilitatea și containerul.
 * Culorile și combinațiile de text urmează docs/IDENTITATE.md („Culori” și tabelul de contrast).
 * CSP-ul din .htaccess interzice stilurile inline: tot CSS-ul stă în fișiere.
 */

/* ---------- Font ---------- */

/* Montserrat 9.000, variabil (greutăți 100–900), subsetat pentru română: latină de bază,
   Latin-1, ăâîșț și ĂÂÎȘȚ cu virgulă, ghilimelele „ ” ‘ ’, – —, …, • și €.
   Generat din design/fonts/ cu pyftsubset; licența: OFL.txt, în același folder. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-9.000-variable-ro.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0102-0103, U+0218-021B, U+2013-2014,
    U+2018-2019, U+201D-201E, U+2022, U+2026, U+20AC;
}

/* ---------- Variabile de design ---------- */

:root {
  /* Culorile, cu numele din docs/IDENTITATE.md, „Variabile de design”. */
  --color-navy: #0B3B7A;
  --color-blue: #2073E0;
  --color-text-muted: #34557F;
  --color-text-on-navy: #BFD9FA;
  --color-bg-light: #EAF3FD;
  --color-card: #EEF5FE;
  --color-border: #D3E4FA;
  --color-white: #FFFFFF;
  --font-base: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* Dimensiunile textului: cresc fluid între lățimile de 320 px și 1280 px.
     Limitele în rem urmează zoom-ul browserului. */
  --text-sm: clamp(0.875rem, 0.854rem + 0.104vw, 0.9375rem);
  --text-base: clamp(1rem, 0.958rem + 0.208vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.042rem + 0.417vw, 1.375rem);
  --text-xl: clamp(1.25rem, 1.083rem + 0.833vw, 1.75rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  --text-3xl: clamp(1.75rem, 1.333rem + 2.083vw, 3rem);

  /* Spațierea: valori fixe pentru detalii, fluide pentru distanțele mari. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: clamp(1.5rem, 1.333rem + 0.833vw, 2rem);
  --space-xl: clamp(2rem, 1.667rem + 1.667vw, 3rem);
  --space-2xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --space-3xl: clamp(3rem, 2rem + 5vw, 6rem);

  /* Raza colțurilor. */
  --radius-sm: 0.375rem;
  --radius: 0.75rem;
  --radius-lg: 1.25rem;

  /* Lățimea maximă a conținutului și marginea laterală a containerului. */
  --content-max-width: 72rem;
  --gutter: clamp(1rem, 0.667rem + 1.667vw, 2rem);

  /* Lungimea maximă a rândului pentru textul curent: aproximativ 70 de caractere.
     În Montserrat, „ch” (lățimea cifrei 0) e mai lat decât o literă medie, de aici 53ch. */
  --measure: 53ch;

  /* Înălțimea barei de apel de pe mobil, fără zona sigură a ecranului. */
  --call-bar-height: calc(3rem + 2 * var(--space-2xs) + 1px);
}

/* ---------- Resetare ---------- */

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

html {
  color-scheme: light;
  /* Împiedică mărirea automată a textului la rotirea telefonului; zoom-ul rămâne activ. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Cuvintele lungi se despart, ca textul să nu iasă din ecran la 320 px. */
p,
li,
dd,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Ancorele nu ajung lipite de marginea de sus a ecranului. */
:target {
  scroll-margin-block-start: var(--space-l);
}

/* ---------- Text ---------- */

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-base);
  font-size: var(--text-base);
  /* 500: greutatea textului secundar de pe flyer. */
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-navy);
  background-color: var(--color-white);
}

p {
  text-wrap: pretty;
}

/* Rânduri de cel mult aproximativ 70 de caractere, ușor de citit pe ecranele late. */
p,
li {
  max-width: var(--measure);
}

p,
ul,
ol,
dl,
blockquote,
figure {
  margin-block: 0 var(--space-s);
}

strong,
b {
  font-weight: 700;
}

small {
  font-size: var(--text-sm);
}

hr {
  margin-block: var(--space-l);
  border: 0;
  border-block-start: 1px solid var(--color-border);
}

/* ---------- Titluri ---------- */

/* Ierarhia de greutăți de pe flyer: 800 pentru titlurile mari (ca sloganul),
   700 pentru titlurile de servicii, 600 pentru etichete. Bleumarinul are contrast
   suficient pe alb și pe toate fundalurile bleu. */
h1,
h2,
h3,
h4 {
  margin-block: 0 var(--space-xs);
  color: var(--color-navy);
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--text-2xl);
  font-weight: 800;
}

h3 {
  font-size: var(--text-xl);
  font-weight: 700;
}

h4 {
  font-size: var(--text-lg);
  font-weight: 600;
}

/* Spațiu mai mare înaintea unui titlu care urmează după text. */
:where(p, ul, ol, dl, blockquote, figure) + :where(h2, h3, h4) {
  margin-block-start: var(--space-l);
}

/* Ultimul bloc dintr-un element nu adaugă spațiu dedesubt. */
:where(h1, h2, h3, h4, p, ul, ol, dl, blockquote, figure):last-child {
  margin-block-end: 0;
}

/* ---------- Linkuri ---------- */

/* Albastrul are contrast pentru text normal doar pe alb (4,58:1). Pe fundalurile bleu,
   linkurile de text normal folosesc bleumarinul. Sublinierea deosebește linkul de text
   și fără culoare. */
a {
  color: var(--color-blue);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-navy);
  text-decoration-thickness: 0.14em;
}

/* ---------- Liste ---------- */

ul,
ol {
  padding-inline-start: 1.25em;
}

li + li {
  margin-block-start: var(--space-3xs);
}

/* Buline albastre, decorative; numerele listelor ordonate rămân în culoarea textului. */
ul > li::marker {
  color: var(--color-blue);
}

ol > li::marker {
  font-weight: 700;
}

/* ---------- Accesibilitate ---------- */

/* Focusul de la tastatură: inel albastru, cu o bandă albă între inel și element.
   Banda albă îl face vizibil și pe bleumarin, unde albastrul singur are contrast 2,39:1. */
:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--color-white);
}

/* Linkul „Sari la conținut”: ascuns deasupra ecranului, apare la focus. */
.skip-link {
  position: absolute;
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  z-index: 100;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-sm);
  background-color: var(--color-navy);
  color: var(--color-white);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.skip-link:hover {
  color: var(--color-white);
}

/* Text ascuns vizual, dar citit de cititoarele de ecran. */
.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Fără animații și tranziții pentru cine a cerut mișcare redusă în sistem. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Layout ---------- */

/* Containerul: lățimea maximă a conținutului, centrat, cu margine laterală fluidă.
   Pe telefoanele cu decupaj, în modul peisaj, conținutul nu intră sub decupaj. */
.container {
  width: min(100% - 2 * var(--gutter), var(--content-max-width));
  margin-inline: auto;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

/* Pe paginile scurte (de exemplu 404), footer-ul ajunge la marginea de jos a ferestrei. */
body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

/* Pe mobil, elementele care primesc focus nu ajung sub bara de apel.
   Spațiul de la finalul paginii, pentru bară, îl dă footer-ul (vezi „Footer”). */
html {
  scroll-padding-block-end: calc(var(--call-bar-height) + env(safe-area-inset-bottom));
}

@media (min-width: 48em) {
  html {
    scroll-padding-block-end: 0;
  }
}

.section {
  padding-block: var(--space-2xl);
}

/* Două secțiuni albe consecutive nu își adună spațiile. */
.section:not(.section--light) + .section:not(.section--light) {
  padding-block-start: 0;
}

/* Fundal bleu: textul și linkurile în bleumarin (albastrul are doar 4,08:1 aici). */
.section--light {
  background-color: var(--color-bg-light);
}

.section--light a:not(.button) {
  color: var(--color-navy);
}

.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-m);
  margin-block-end: var(--space-m);
}

.section-heading > * {
  margin: 0;
}

/* Conținutul paginilor fără secțiuni proprii. */
.page-content {
  padding-block: var(--space-2xl);
}

/* ---------- Componente ---------- */

/* Pictogramele SVG din pagini: 24 × 24, contur, culoarea textului. */
.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

/* Butoanele: cel puțin 48 px înălțime. Principal: alb pe albastru (4,58:1);
   secundar: bleumarin pe alb, cu contur. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block: var(--space-m) 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 3rem;
  padding: var(--space-xs) var(--space-m);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.button--primary {
  border-color: var(--color-blue);
  background-color: var(--color-blue);
  color: var(--color-white);
}

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

.button--secondary {
  border-color: var(--color-navy);
  background-color: var(--color-white);
  color: var(--color-navy);
}

.button--secondary:hover {
  background-color: var(--color-card);
  color: var(--color-navy);
}

/* Marca: simbolul și numele, după modelul flyerului. Pe fundal deschis, „AtoM” (900)
   bleumarin deasupra lui „Oltenia” (800) albastru; pe fundal închis, „AtoM Oltenia” alb. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-navy);
  text-decoration: none;
}

.brand-logo {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
}

.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name-top {
  font-size: var(--text-lg);
  font-weight: 900;
  color: var(--color-navy);
}

.brand-name-bottom {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-blue);
}

.brand--inverse .brand-name {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-white);
}

/* Header: marca, meniul și telefonul. Pe mobil, meniul se deschide cu <details>,
   fără JavaScript; de la 48em, linkurile apar direct în header. */
.site-header {
  position: relative;
  z-index: 40;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-white);
}

/* Un singur rând, de la 320 px: marca, meniul și butonul de telefon. */
.site-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-block: var(--space-xs);
}

.site-nav {
  margin-inline-start: auto;
}

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

.nav-list li {
  max-width: none;
  margin: 0;
}

.nav-list a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding-inline: var(--space-xs);
  border-radius: var(--radius-sm);
  color: var(--color-navy);
  font-weight: 700;
  text-decoration: none;
}

.nav-list a:hover {
  background-color: var(--color-card);
  color: var(--color-navy);
}

/* Pagina curentă: subliniată, nu doar colorată. */
.nav-list a[aria-current="page"] {
  text-decoration-line: underline;
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.35em;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-xs);
  border: 2px solid var(--color-navy);
  border-radius: var(--radius);
  color: var(--color-navy);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.nav-toggle::-webkit-details-marker {
  display: none;
}

.nav-menu[open] > .nav-toggle {
  background-color: var(--color-card);
}

/* Lista deschisă coboară sub header, pe toată lățimea. */
.nav-menu > .nav-list {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  padding: var(--space-2xs) max(var(--gutter), env(safe-area-inset-right)) var(--space-s) max(var(--gutter), env(safe-area-inset-left));
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-white);
  box-shadow: 0 0.75rem 1.5rem rgb(11 59 122 / 0.12);
}

.nav-list--wide {
  display: none;
}

/* Telefonul din header: buton albastru cu numărul, doar de la 48em. Pe ecranele înguste,
   telefonul e în bara de apel, ca acțiunile să nu se repete (docs/STRUCTURA.md, „Navigare”). */
.header-phone {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding-inline: var(--space-s);
  border-radius: var(--radius);
  background-color: var(--color-blue);
  color: var(--color-white);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.header-phone:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

@media (min-width: 48em) {
  .site-header-inner {
    gap: var(--space-s);
  }

  .nav-menu {
    display: none;
  }

  .nav-list--wide {
    display: flex;
    gap: var(--space-3xs);
  }

  .nav-list--wide a {
    min-height: 2.75rem;
  }

  .header-phone {
    display: inline-flex;
  }
}

/* Prima secțiune a paginii principale: fundal bleu cu cercuri decorative și valul
   albastru și bleumarin de pe flyer. Culorile cercurilor: „Bleu — decorativ”
   din docs/IDENTITATE.md; textul rămâne bleumarin. */
.hero {
  background-color: var(--color-bg-light);
  background-image:
    radial-gradient(circle at 92% 10%, #D8E8FB 9rem, transparent 0),
    radial-gradient(circle at 6% 16%, var(--color-white) 2.5rem, transparent 0),
    radial-gradient(circle at 80% 78%, var(--color-white) 1.75rem, transparent 0),
    radial-gradient(circle at 14% 86%, #C3DCF9 0.625rem, transparent 0);
}

.hero-content {
  padding-block: var(--space-2xl) var(--space-l);
}

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

.hero-slogan {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.3;
}

/* Butoanele „Sună” și „WhatsApp” din prima secțiune apar doar de la 48em;
   pe ecranele înguste, aceleași acțiuni sunt în bara de apel. */
.hero-actions {
  display: none;
}

@media (min-width: 48em) {
  .hero-actions {
    display: flex;
  }
}

/* Imaginea ilustrativă: pe ecranele înguste, sub slogan (și sub acțiuni, de la 48em), pe toată
   lățimea containerului; de la 64em, în dreapta textului. Sub 64em, coloana de text ar fi prea
   îngustă pentru titlu. Colțurile, ca la cardurile de servicii. Valorile din „sizes” (index.html)
   urmează aceste lățimi: containerul, apoi jumătate din el, minus spațiul dintre coloane.
   Aceleași reguli pentru antetul cu imagine al paginilor de servicii (vezi „.page-header--image”). */
.hero-image,
.page-header-image {
  width: 100%;
  margin-block-start: var(--space-l);
  border-radius: var(--radius-lg);
}

@media (min-width: 64em) {
  /* Fără cercul alb de la 80% 78%: pe ecranele înguste e acoperit de imagine, iar aici
     ar ieși pe jumătate de sub marginea ei de jos. Celelalte cercuri rămân la fel. */
  .hero {
    background-image:
      radial-gradient(circle at 92% 10%, #D8E8FB 9rem, transparent 0),
      radial-gradient(circle at 6% 16%, var(--color-white) 2.5rem, transparent 0),
      radial-gradient(circle at 14% 86%, #C3DCF9 0.625rem, transparent 0);
  }

  .hero-content,
  .page-header--image > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xl);
  }

  .hero-image,
  .page-header-image {
    margin-block-start: 0;
  }
}

.hero-wave {
  display: block;
  width: 100%;
  height: clamp(2.5rem, 6vw, 5.5rem);
}

.wave-blue {
  fill: var(--color-blue);
}

.wave-navy {
  fill: var(--color-navy);
}

.wave-white {
  fill: var(--color-white);
}

/* Serviciile: rânduri rotunjite, cu pictograme albe în cercuri albastre, ca pe flyer.
   Tot cardul se poate apăsa; focusul se vede pe card. */
.service-grid {
  display: grid;
  gap: var(--space-s);
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .service-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  align-items: center;
  gap: var(--space-3xs) var(--space-s);
  max-width: none;
  margin: 0;
  padding: var(--space-m);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card);
}

.service-card:has(.service-title a):hover {
  border-color: var(--color-blue);
}

.service-card:has(.service-title a:focus-visible) {
  outline: 3px solid var(--color-blue);
  outline-offset: 3px;
}

.service-icon {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--color-blue);
  color: var(--color-white);
}

.service-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.service-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.25;
}

.service-title a {
  color: var(--color-navy);
  text-decoration: none;
}

.service-title a:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Linkul acoperă tot cardul. */
.service-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.service-subtitle {
  grid-column: 2;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Varianta cu mai multe linkuri (un serviciu fără pagină proprie): titlul nu e link,
   cardul nu se apasă în întregime, iar linkurile au focusul lor. */
.service-card--links .service-icon {
  grid-row: span 3;
}

.service-links {
  grid-column: 2;
  margin: 0;
  font-size: var(--text-sm);
}

.service-links a {
  color: var(--color-navy);
}

/* Antetul paginilor interioare: fundal bleu, H1 și o introducere scurtă.
   Varianta cu imagine (.page-header--image, paginile de servicii): textul (.page-header-text)
   și imaginea (.page-header-image), după modelul primei secțiuni a paginii principale;
   așezarea și colțurile imaginii sunt în regulile comune cu „.hero-image”. */
.page-header {
  padding-block: var(--space-xl);
  background-color: var(--color-bg-light);
  background-image: radial-gradient(circle at 96% 0%, #D8E8FB 7rem, transparent 0);
}

.page-header h1 {
  margin-block-end: var(--space-2xs);
}

.page-lead {
  font-size: var(--text-lg);
  font-weight: 600;
}

/* Căile de contact (pagina Contact): carduri care se apasă în întregime.
   Telefonul e acțiunea principală: card albastru, alb pe albastru (4,58:1).
   Pe ecranele înguste, unul sub altul; de la 48em, grilă 2 × 2 cu lățimi egale
   (telefon și WhatsApp, apoi e-mail și Facebook). */
.contact-methods {
  display: grid;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .contact-methods {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  align-items: center;
  gap: 0 var(--space-s);
  max-width: none;
  margin: 0;
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card);
}

.contact-card:hover {
  border-color: var(--color-blue);
}

.contact-card:has(a:focus-visible) {
  outline: 3px solid var(--color-blue);
  outline-offset: 3px;
}

.contact-card-icon {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--color-blue);
  color: var(--color-white);
}

.contact-card-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.contact-card-title {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
}

.contact-card-link {
  color: var(--color-navy);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-card-link:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Linkul acoperă tot cardul. */
.contact-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.contact-card--primary {
  border-color: var(--color-blue);
  background-color: var(--color-blue);
}

.contact-card--primary:hover {
  border-color: var(--color-navy);
  background-color: var(--color-navy);
}

.contact-card--primary .contact-card-icon {
  background-color: var(--color-white);
  color: var(--color-blue);
}

.contact-card--primary .contact-card-title,
.contact-card--primary .contact-card-link {
  color: var(--color-white);
}

.contact-card--primary .contact-card-link {
  font-size: var(--text-2xl);
  font-weight: 800;
}

/* Îndemnul de contact de la finalul paginii. */
.contact-cta-email {
  margin-block-start: var(--space-m);
}

/* Footer: fundal bleumarin; text deschis (7,56:1), titluri și linkuri albe (10,93:1).
   Textul e mai mic decât al paginii (15 px). Linkurile se deosebesc prin culoare (alb față de
   textul bleu deschis) și se subliniază doar la hover și la focus.
   Pe mobil, spațiul de jos include înălțimea barei de apel, ca bara să nu acopere footer-ul. */
.site-footer {
  padding-block: var(--space-xl) calc(var(--space-m) + var(--call-bar-height) + env(safe-area-inset-bottom));
  background-color: var(--color-navy);
  color: var(--color-text-on-navy);
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (min-width: 48em) {
  .site-footer {
    padding-block-end: var(--space-m);
  }
}

.site-footer a {
  color: var(--color-white);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-white);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

/* Coloanele, după conținut: una pe mobil, două de la 40em, patru de la 64em,
   cu cel mai mult loc pentru datele de identificare și cel mai puțin pentru marcă. */
.site-footer-inner {
  display: grid;
  gap: var(--space-l) var(--space-xl);
}

@media (min-width: 40em) {
  .site-footer-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }
}

@media (min-width: 64em) {
  .site-footer-inner {
    grid-template-columns: minmax(0, 0.9fr) max-content max-content minmax(0, 1.5fr);
  }
}

.footer-brand .brand {
  margin-block-end: var(--space-2xs);
}

.footer-brand .brand-logo {
  width: 2.25rem;
  height: 2.25rem;
}

.site-footer .brand-name {
  font-size: 1.125rem;
}

.footer-brand p {
  margin: 0;
}

.footer-title {
  margin-block-end: var(--space-2xs);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}

.footer-list,
.footer-legal {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-list li + li {
  margin-block-start: var(--space-3xs);
}

/* Contactul: fără etichete; o pictogramă mică, decorativă, înaintea textului fiecărui link. */
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 1.75rem;
}

.footer-contact .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-text-on-navy);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-l);
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-s);
  border-block-start: 1px solid rgb(191 217 250 / 0.3);
  font-size: 0.875rem;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
}

.footer-legal li + li {
  margin: 0;
}

.footer-bottom p {
  margin: 0;
}

/* Mențiunea despre imaginile generate cu AI (docs/IDENTITATE.md, „Imagini”): discretă,
   pe un rând propriu, sub pictograma SAL, linkurile juridice și ©. */
.footer-note {
  flex-basis: 100%;
  max-width: none;
}

/* Pictograma ANPC SAL (Ordinul ANPC 449/2022, modificat prin Ordinul 270/2026): caseta de
   250 × 50 px cerută de ordin; fișierul oficial are 201 × 50 px și se afișează fără deformare. */
.sal-badge {
  display: inline-block;
  flex: none;
  border-radius: var(--radius-sm);
}

.sal-badge img {
  width: 250px;
  height: 50px;
  object-fit: contain;
  object-position: left center;
}

/* Paginile juridice: titluri de secțiune și liste de date, la lungimea de rând a textului. */
.legal-content > section + section,
.legal-content > p + section {
  margin-block-start: var(--space-xl);
}

.data-list {
  display: grid;
  gap: var(--space-xs);
  max-width: 48rem;
  margin-block: 0 var(--space-s);
}

.data-list > div {
  display: grid;
  gap: 0 var(--space-m);
}

/* Coloana etichetelor încape „Nr. Registrul Comerțului” pe un rând. */
@media (min-width: 40em) {
  .data-list > div {
    grid-template-columns: 16rem 1fr;
  }
}

.data-list dt {
  font-weight: 700;
}

.data-list dd {
  margin: 0;
  overflow-wrap: break-word;
}

.data-list:last-child {
  margin-block-end: 0;
}

/* Bara de apel de pe mobil: fixă jos, două butoane egale, de cel puțin 48 px.
   „Sună” e acțiunea principală (alb pe albastru); „WhatsApp”, bleumarin pe alb.
   Ține cont de zona sigură a iPhone-ului; dispare de la 48em. */
.call-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xs);
  padding-block: var(--space-2xs) calc(var(--space-2xs) + env(safe-area-inset-bottom));
  padding-inline: max(var(--space-2xs), env(safe-area-inset-left)) max(var(--space-2xs), env(safe-area-inset-right));
  border-block-start: 1px solid var(--color-border);
  background-color: var(--color-white);
  box-shadow: 0 -0.25rem 1rem rgb(11 59 122 / 0.12);
}

.call-bar-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 3rem;
  border: 2px solid var(--color-navy);
  border-radius: var(--radius);
  font-weight: 800;
  text-decoration: none;
}

.call-bar-link--phone {
  border-color: var(--color-blue);
  background-color: var(--color-blue);
  color: var(--color-white);
}

.call-bar-link--phone:hover {
  color: var(--color-white);
}

.call-bar-link--whatsapp {
  background-color: var(--color-white);
  color: var(--color-navy);
}

.call-bar-link--whatsapp:hover {
  color: var(--color-navy);
}

@media (min-width: 48em) {
  .call-bar {
    display: none;
  }
}