/* ==========================================================================
   Tema Oașa — temă caldă pentru site-ul public
   --------------------------------------------------------------------------
   Se încarcă DOAR când în Administrare > Setări Grafice este selectat
   șablonul „Temă caldă (Oașa)". Fișierul este emis de output_theme_css()
   din includes/theme-colors.php, imediat după CSS-ul de culori generat.

   PALETA nu se află aici. Culorile vin din variabilele pe care le emite deja
   generate_theme_css() (--primary-color, --secondary-color, --background-color,
   --text-color, --header-bg-end), alimentate de presetul „cald" din
   get_theme_colors(). Astfel culorile rămân vizibile și în selectoarele din
   panoul de administrare, iar acest fișier conține doar tipografie, așezare
   în pagină și ornament.

   IMAGINEA de fundal a hero-ului și opacitatea vălului NU sunt aici: ele
   rămân editabile din administrare și sunt emise inline de PHP.

   IMPORTANT — DOMENIU DE APLICARE
   Fișierul se încarcă pe TOATE paginile publice (este inclus din chrome-ul
   comun). Regulile scrise pentru cardurile de pe prima pagină sunt de aceea
   restrânse la `body.page-index`. Fără restrângere ele ar strica:
     - public/rezervare.php   — are 6 elemente .col-md-4 în formular
     - public/donatii.php     — are 5 titluri .card-title
   Clasa `page-<nume-fișier>` este pusă pe <body> de public/includes/header.php.
   ========================================================================== */

:root {
  /* Nuanțe auxiliare, fără corespondent în paleta administrabilă. */
  --oasa-auriu: var(--secondary-color, #B8893B);
  --oasa-auriu-inchis: #9A7030;
  --oasa-crem-2: #F1E9D8;
  --oasa-muted: #6B6258;
  --oasa-contur: #E8DFCC;
  --oasa-text-clar: #F3E6C8;
}

/* --------------------------------------------------------------------------
   1. TIPOGRAFIE
   -------------------------------------------------------------------------- */

body {
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5,
.card-title {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: .01em;
}

.text-muted {
  color: var(--oasa-muted) !important;
}

/* --------------------------------------------------------------------------
   2. NAVBAR
   Culoarea de fond vine din --header-bg-end (administrabilă).
   -------------------------------------------------------------------------- */

nav.navbar {
  border-bottom: 2px solid var(--oasa-auriu);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
}

/* Filtrul logo-ului NU se afla aici: este o setare administrabila
   (Setari Grafice > Configurare Logo > Filtru logo) si este emisa de
   output_theme_css(). Logo-ul incarcat acum este monocrom negru
   (RGB 35,31,32, verificat pixel cu pixel), deci pe navbarul verde-inchis
   al acestei teme are nevoie de varianta deschisa — aceasta este si
   alegerea automata pentru sablonul „cald". */

/* --------------------------------------------------------------------------
   3. HERO — prezent pe toate paginile publice, deci stilizat moderat aici.
   Dimensiunile mari sunt rezervate paginii principale (secțiunea 6).
   -------------------------------------------------------------------------- */

/* Prefixul `body` este obligatoriu: public/includes/header.php emite un bloc
   <style> inline IMEDIAT DUPA acest fisier, cu `.hero { padding: 60px 0 40px }`
   si `.card { border: none }`. La specificitate egala castiga ultimul declarat,
   deci fara prefix regulile de mai jos nu ar avea niciun efect. */
body .hero {
  background-size: cover;
  background-position: center;
  padding: 64px 0 56px;
}

.hero h1 {
  color: #fff;
  font-weight: 600;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}

.hero .lead {
  color: var(--oasa-text-clar);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
  opacity: 1;
}

.hero .btn {
  background: var(--oasa-auriu);
  border: none;
  color: #fff;
  padding: .8rem 1.8rem;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  font-weight: 600;
}

.hero .btn:hover,
.hero .btn:focus {
  background: var(--oasa-auriu-inchis);
  color: #fff;
}

/* --------------------------------------------------------------------------
   4. CARDURI — îmbunătățiri de așezare, valabile pe tot site-ul.
   Nu schimbă culori; doar contur, rotunjire și umbră.
   -------------------------------------------------------------------------- */

body .card {
  background: #fff;
  border: 1px solid var(--oasa-contur);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(60, 45, 20, .07);
}

/* --------------------------------------------------------------------------
   5. FOOTER
   Culorile vin din footer_bg_color / footer_text_color (administrabile).
   -------------------------------------------------------------------------- */

footer {
  border-top: 3px solid var(--oasa-auriu);
}

footer h5 {
  color: var(--oasa-text-clar) !important;
}

/* Exceptie necesara: regula globala .text-muted (sectiunea 1) foloseste o
   nuanta inchisa, ilizibila pe fundalul inchis al footerului — contrast 2,3:1.
   In footer textul secundar mosteneste culoarea administrabila a footerului. */
footer .text-muted,
footer p {
  color: var(--oasa-text-clar) !important;
  opacity: .85;
}

/* --------------------------------------------------------------------------
   5b. ALERTE
   generate_theme_css() suprascrie doar FUNDALUL alertelor cu culorile paletei,
   nu si culoarea textului, care ramane cea implicita din Bootstrap. Pe paleta
   inchisa a acestei teme contrastul scade sub pragul de lizibilitate, deci
   textul si linkurile din alerte se fixeaza pe alb.
   -------------------------------------------------------------------------- */

body .alert-success,
body .alert-danger,
body .alert-info,
body .alert-primary {
  color: #fff !important;
  border-color: rgba(0, 0, 0, .12) !important;
}

body .alert-success .alert-link,
body .alert-danger .alert-link,
body .alert-info .alert-link,
body .alert-primary .alert-link,
body .alert-success a,
body .alert-danger a,
body .alert-info a,
body .alert-primary a {
  color: #fff !important;
  text-decoration: underline;
}

/* Avertizarea are fundal auriu deschis, deci textul ramane inchis. */
body .alert-warning {
  color: #3A3530 !important;
  border-color: rgba(0, 0, 0, .12) !important;
}

/* --------------------------------------------------------------------------
   6. DOAR PAGINA PRINCIPALĂ (body.page-index)
   Regulile de mai jos presupun structura din index.php: hero mare, trei
   carduri de acțiune cu iconiță, și pașii numerotați „Cum funcționează".
   Restrânse intenționat, ca să nu afecteze formularul de rezervare sau
   pagina de donații.
   -------------------------------------------------------------------------- */

body.page-index .hero {
  padding: 110px 0 120px;
}

body.page-index .hero h1 {
  font-size: 3.2rem;
}

body.page-index .hero .lead {
  font-size: 1.3rem;
}

/* Ornamente romboidale în jurul subtitlului. */
body.page-index .hero .lead::before,
body.page-index .hero .lead::after {
  content: "\2726";
  color: var(--oasa-auriu);
  margin: 0 .7em;
  font-size: .8em;
}

/* Cardurile de acțiune: bandă aurie sus și ridicare la hover. */
body.page-index .col-md-4 .card,
body.page-index .col-md-6 .card {
  border-top: 3px solid var(--oasa-auriu);
  transition: transform .2s ease, box-shadow .2s ease;
}

body.page-index .col-md-4 .card:hover,
body.page-index .col-md-6 .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(60, 45, 20, .13);
}

/* Corpul cardului pe coloană, ca butoanele să se alinieze la aceeași
   înălțime indiferent de lungimea textului. Aceasta este îmbunătățirea de
   așezare care nu ține de culori. */
body.page-index .col-md-4 .card-body,
body.page-index .col-md-6 .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.5rem;
}

body.page-index .col-md-4 .card-body p,
body.page-index .col-md-6 .card-body p {
  flex: 1;
}

/* Iconița în medalion rotund. */
body.page-index .col-md-4 .card-body > i,
body.page-index .col-md-6 .card-body > i {
  color: var(--oasa-auriu) !important;
  background: var(--oasa-crem-2);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem !important;
  margin-bottom: 1rem;
}

body.page-index .col-md-4 .card-body > i::before,
body.page-index .col-md-6 .card-body > i::before {
  line-height: 1;
}

/* Butoane pastilă în cardurile de acțiune — forma, comună tuturor. */
body.page-index .col-md-4 .card-body .btn,
body.page-index .col-md-6 .card-body .btn {
  background-image: none !important;
  border: none !important;
  color: #fff !important;
  border-radius: 999px;
  padding: .55rem 1.6rem;
  font-weight: 600;
}

/* Culoarea, după rolul fiecărui buton. Cele trei cereri de pe prima pagină —
   rezervare, transport, verificare — sunt acțiuni distincte, așa că primesc
   nuanțe distincte din aceeași paletă, nu trei culori străine între ele.
   Iconițele rămân aurii pentru toate trei, ca element care leagă cardurile.
   !important este necesar: generate_theme_css() emite
   `.btn-primary{background-color:... !important}`, care altfel câștigă.
   Contrastul cu textul alb a fost verificat pentru fiecare (minimum 4,5:1). */
body.page-index .col-md-4 .card-body .btn-primary,
body.page-index .col-md-6 .card-body .btn-primary {
  background: var(--primary-color) !important;
}

body.page-index .col-md-4 .card-body .btn-success,
body.page-index .col-md-6 .card-body .btn-success {
  background: var(--success-color) !important;
}

body.page-index .col-md-4 .card-body .btn-info,
body.page-index .col-md-6 .card-body .btn-info {
  background: var(--info-color) !important;
}

body.page-index .col-md-4 .card-body .btn:hover,
body.page-index .col-md-6 .card-body .btn:hover {
  background: var(--oasa-auriu) !important;
  color: #fff !important;
}

/* Titlul secțiunii „Cum funcționează", cu linie aurie dedesubt. */
body.page-index .card-title {
  text-align: center;
  font-size: 2.2rem;
}

body.page-index .card-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--oasa-auriu);
  margin: .6rem auto 0;
}

/* Cifrele pașilor 1-5. */
body.page-index .bg-primary.rounded-circle {
  background: var(--primary-color) !important;
  color: var(--oasa-text-clar) !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  border: 3px solid #fff !important;
  box-shadow: 0 0 0 2px var(--oasa-auriu) !important;
}

/* --------------------------------------------------------------------------
   7. ACCESIBILITATE
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.page-index .col-md-4 .card,
  body.page-index .col-md-6 .card {
    transition: none;
  }
  body.page-index .col-md-4 .card:hover,
  body.page-index .col-md-6 .card:hover {
    transform: none;
  }
}