/* =====================================================================
 *  Secțiuni cu identitate proprie (grădinița „Raza de Soare”).
 *
 *  Secțiunea e un site în site: are antetul ei, meniul ei, culoarea ei,
 *  și nu arată nici bara laterală, nici antetul școlii. Ce rămâne este o
 *  singură legătură discretă înapoi — grădinița chiar este o structură a
 *  școlii, iar cine ajunge aici dintr-o căutare trebuie să poată afla.
 * ===================================================================*/

/* ---------------------------------------------------- Accentul secțiunii */

/* Paleta e a grădiniței, nu a școlii: verdele mentă și coralul de pe
   site-ul vechi (tema „kiducation”), plus galbenul soarelui din nume.
   Tonurile închise există pentru text — mentă pe alb are un contrast de
   1,3:1, adică nelizibil; le folosim pe cele închise oriunde apar litere. */
body[data-sectiune="gradinita"] {
  --sectiune:        #2bb673;   /* verde, destul de închis cât să se poată citi pe el */
  --sectiune-inchis: #1c7d4e;
  --sectiune-050:    #edfff7;
  --sectiune-100:    #c6f5df;

  --menta:           #7affc5;   /* verdele deschis, pentru fundaluri mari */
  --coral:           #ff5562;
  --coral-inchis:    #c9303c;
  --soare:           #ffc244;
  --cer:             #4ea8de;
  --mov:             #9b6bd6;
}

/* Titlurile, legăturile și butoanele din conținut preiau accentul. */
body[data-sectiune] main .prose h2,
body[data-sectiune] main .prose h3,
body[data-sectiune] main .section-title h2 {
  color: var(--sectiune-inchis);
}

body[data-sectiune] main .prose a:not(.btn):not(.featured-link):not(.doc-item) {
  color: var(--sectiune-inchis);
  text-decoration-color: var(--sectiune-100);
}

body[data-sectiune] main .btn--primary {
  background: var(--sectiune);
  border-color: var(--sectiune);
  color: #fff;
}

body[data-sectiune] main .btn--primary:hover {
  background: var(--sectiune-inchis);
  border-color: var(--sectiune-inchis);
}

/* Antetul paginilor obișnuite din secțiune (nu al paginii de start) */
body[data-sectiune] .page-head {
  background: linear-gradient(135deg, var(--sectiune-inchis), var(--sectiune));
}


/* ═══════════════════════════════════ Antetul propriu al secțiunii ══════ */

.sec-antet {
  background: #fff;
  border-bottom: 1px solid var(--sectiune-100, #fae3c8);
}

.sec-antet__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.sec-antet__nume {
  display: flex;
  align-items: center;
  gap: .95rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.sec-antet__nume strong {
  display: block;
  font-family: "Gloria Hallelujah", "Comic Sans MS", var(--font, sans-serif);
  font-size: 1.24rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sectiune-inchis, #c9762a);
  letter-spacing: -.01em;
}

.sec-antet__nume small {
  display: block;
  margin-top: .18rem;
  font-size: .79rem;
  color: var(--muted, #667085);
  line-height: 1.35;
}

.sec-antet__nume:hover strong { text-decoration: underline; }

/* Soarele din nume, desenat din degradeuri — grădinița nu are siglă. */
.sec-antet__soare {
  flex: 0 0 auto;
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff0c2, var(--soare, #ffc244) 70%);
  box-shadow: 0 0 0 5px rgba(255, 194, 68, .22), 0 0 0 10px rgba(255, 194, 68, .1);
}

/* Razele */
.sec-antet__soare::before {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(255, 194, 68, .85) 0 6deg, transparent 6deg 45deg,
      rgba(255, 194, 68, .85) 45deg 51deg, transparent 51deg 90deg,
      rgba(255, 194, 68, .85) 90deg 96deg, transparent 96deg 135deg,
      rgba(255, 194, 68, .85) 135deg 141deg, transparent 141deg 180deg,
      rgba(255, 194, 68, .85) 180deg 186deg, transparent 186deg 225deg,
      rgba(255, 194, 68, .85) 225deg 231deg, transparent 231deg 270deg,
      rgba(255, 194, 68, .85) 270deg 276deg, transparent 276deg 315deg,
      rgba(255, 194, 68, .85) 315deg 321deg, transparent 321deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
          mask: radial-gradient(circle, transparent 58%, #000 60%);
}

.sec-antet__contact {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-size: .87rem;
}

.sec-antet__contact a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--text, #333);
  text-decoration: none;
}

.sec-antet__contact a:hover { color: var(--sectiune-inchis, #c9762a); }

.sec-antet__inapoi {
  padding: .45rem .9rem;
  border: 1px solid var(--border, #e2e5ec);
  border-radius: 999px;
  color: var(--muted, #667085) !important;
  font-size: .82rem;
}

.sec-antet__inapoi:hover {
  border-color: var(--sectiune, #e8913c);
  background: var(--sectiune-050, #fdf3e7);
}

@media (max-width: 640px) {
  .sec-antet__inner { padding-top: .85rem; padding-bottom: .85rem; gap: .8rem; }
  .sec-antet__nume strong { font-size: 1.08rem; }
  .sec-antet__soare { width: 42px; height: 42px; }
  .sec-antet__contact { font-size: .82rem; gap: .9rem; }
}

/* ------------------------------------------------- Banda cu meniul ══════ */

.sectiune-bar {
  background: var(--sectiune-050, #fdf3e7);
  border-bottom: 1px solid var(--sectiune-100, #fae3c8);
}

.sectiune-bar__inner {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding-top: .55rem;
  padding-bottom: .55rem;
}

/* --- Numele instituției --- */

.sectiune-bar__nume {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
  flex: 1 1 auto;
  min-width: 0;
}

.sectiune-bar__nume strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sectiune-inchis, #c9762a);
  line-height: 1.25;
}

.sectiune-bar__nume small {
  display: block;
  font-size: .74rem;
  color: var(--muted, #667085);
  line-height: 1.3;
}

.sectiune-bar__nume:hover strong { text-decoration: underline; }

/* Soarele: un cerc cu raze, desenat din umbre — fără fișier de imagine,
   fiindcă o siglă adevărată grădinița nu are. */
.sectiune-bar__soare {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffd68a, var(--sectiune, #e8913c) 72%);
  box-shadow: 0 0 0 3px rgba(232, 145, 60, .18), 0 0 0 6px rgba(232, 145, 60, .09);
}

/* --- Meniul secțiunii --- */

.sectiune-bar__meniu {
  display: flex;
  align-items: center;
  gap: .2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.sectiune-bar__meniu a {
  display: block;
  padding: .42rem .8rem;
  border-radius: var(--radius, 10px);
  font-size: .88rem;
  font-weight: 500;
  color: var(--text, #333);
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s var(--ease, ease), color .16s var(--ease, ease);
}

.sectiune-bar__meniu a:hover {
  background: var(--sectiune-100, #fae3c8);
  color: var(--sectiune-inchis, #c9762a);
}

/* Verdele deschis dă doar 2,6:1 sub text alb — sub pragul WCAG de 4,5:1.
   Pastila activă folosește tonul închis, care trece. */
.sectiune-bar__meniu a[aria-current="page"] {
  background: var(--sectiune-inchis, #1c7d4e);
  color: #fff;
}

.sectiune-bar__meniu a:focus-visible {
  outline: 3px solid var(--sectiune-inchis, #c9762a);
  outline-offset: 2px;
}

/* --- Butonul de meniu, pe ecrane mici --- */

.sectiune-bar__toggle {
  display: none;
  flex: 0 0 auto;
  border: 1px solid var(--sectiune-100, #fae3c8);
  background: #fff;
  color: var(--sectiune-inchis, #c9762a);
  border-radius: var(--radius, 10px);
  width: 40px;
  height: 40px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

@media (max-width: 860px) {
  .sectiune-bar__toggle { display: inline-flex; }

  .sectiune-bar__meniu {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .1rem;
    padding-bottom: .5rem;
  }

  .sectiune-bar__meniu.is-open { display: flex; }

  .sectiune-bar__meniu a {
    padding: .6rem .8rem;
    white-space: normal;
  }
}

@media print {
  .sectiune-bar__meniu, .sectiune-bar__toggle { display: none !important; }
}


/* ═════════════════════════════ Pagina grădiniței, în culorile ei ══════ */

/* Titlurile mari, scrise de mână. Numai ele: un font de mână pe rânduri
   lungi de text obosește ochiul și îngreunează citirea celor cu dislexie.
   Cine cere „mai puține fonturi decorative” din bara de accesibilitate îl
   primește pe cel obișnuit (vezi regula de la sfârșitul fișierului). */
body[data-sectiune] .sec-hero h1,
body[data-sectiune] .sec-titlu {
  font-family: "Gloria Hallelujah", "Comic Sans MS", var(--font, sans-serif);
  letter-spacing: 0;
  line-height: 1.35;
}

/* --- Antetul paginii, cu cer și nori --- */

body[data-sectiune] .sec-hero {
  position: relative;
  background: linear-gradient(170deg, var(--menta) 0%, #b6ffdf 60%, var(--sectiune-050) 100%);
  color: var(--heading, #14213d);
  padding: 2rem 0 4.5rem;
  overflow: hidden;
}

body[data-sectiune] .sec-hero h1 {
  margin: .6rem 0 .3rem;
  font-size: clamp(1.7rem, 4.4vw, 2.6rem);
}

body[data-sectiune] .sec-hero__sub {
  margin: 0;
  font-size: 1rem;
}

/* Banda de noutăți iese din coloană cu marginile ei, nu cu încă un
   container — suntem deja înăuntrul unuia. */
body[data-sectiune] .sec-noutati {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}

@media (max-width: 640px) {
  body[data-sectiune] .sec-noutati { padding-left: 1rem; padding-right: 1rem; }
}

body[data-sectiune] .sec-hero h1 { color: var(--sectiune-inchis); }

body[data-sectiune] .sec-hero .breadcrumb,
body[data-sectiune] .sec-hero .breadcrumb a,
body[data-sectiune] .sec-hero__sub {
  color: #14503a;
}

body[data-sectiune] .sec-hero .breadcrumb a { text-decoration: underline; }

/* Un soare în colț, desenat, nu adus dintr-un fișier */
body[data-sectiune] .sec-hero::before {
  content: "";
  position: absolute;
  top: -34px; right: 6%;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff0c2, var(--soare) 68%);
  box-shadow: 0 0 0 16px rgba(255, 194, 68, .22), 0 0 0 34px rgba(255, 194, 68, .1);
  pointer-events: none;
}

/* Norii de la baza antetului — aceeași idee ca pe site-ul vechi:
   marginea de jos nu e o linie dreaptă, ci un șir de bulgări rotunzi.
   Desenul e un SVG repetat pe orizontală: cu degradeuri suprapuse ieșeau
   altfel la fiecare lățime de ecran, fiindcă procentele mută și centrul
   cercului, și raza lui. */
body[data-sectiune] .sec-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='34' viewBox='0 0 240 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V22c14 0 18-13 32-13s17 9 30 9 16-14 31-14 20 15 34 15 18-10 31-10 19 12 33 12 18-6 29-6v19z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 240px 34px;
  background-position: bottom center;
}

/* --- Cartonașele, fiecare cu culoarea lui --- */

body[data-sectiune] .sec-carduri {
  gap: 1.3rem;
}

body[data-sectiune] .sec-card {
  position: relative;
  border: 0;
  border-radius: 22px;
  padding: 2.4rem 1.4rem 1.5rem;
  text-align: center;
  background: #fff;
  box-shadow: 0 4px 0 var(--card-umbra, var(--sectiune)), 0 10px 26px rgba(20, 60, 45, .09);
}

body[data-sectiune] .sec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 0 var(--card-umbra, var(--sectiune)), 0 16px 34px rgba(20, 60, 45, .14);
}

/* Bulina colorată din capul cartonașului */
body[data-sectiune] .sec-card::before {
  content: "";
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--card-culoare, var(--sectiune));
  box-shadow: 0 4px 12px rgba(20, 60, 45, .2);
}

/* Culori diferite, ca să nu fie un șir de gemeni */
body[data-sectiune] .sec-card:nth-child(4n+1) { --card-culoare: var(--cer);   --card-umbra: #3c8bbd; }
body[data-sectiune] .sec-card:nth-child(4n+2) { --card-culoare: var(--coral); --card-umbra: var(--coral-inchis); }
body[data-sectiune] .sec-card:nth-child(4n+3) { --card-culoare: var(--soare); --card-umbra: #d9a02e; }
body[data-sectiune] .sec-card:nth-child(4n+4) { --card-culoare: var(--mov);   --card-umbra: #7a4fb0; }

body[data-sectiune] .sec-card__titlu {
  color: var(--heading, #14213d);
  font-size: 1.06rem;
  margin-bottom: .45rem;
}

/* --- Banda de noutăți, pe fond mentă --- */

body[data-sectiune] .sec-noutati {
  position: relative;
  margin-top: 3.5rem;
  padding: 3rem 0 2.6rem;
  background: var(--sectiune-050);
  border-radius: 28px;
}

body[data-sectiune] .sec-noutati .card {
  border-radius: 20px;
  border: 0;
  box-shadow: 0 6px 20px rgba(20, 60, 45, .1);
}

/* --- Titlurile de secțiune, cu o linie ondulată dedesubt --- */

body[data-sectiune] .sec-titlu {
  color: var(--sectiune-inchis);
  margin: 0 0 .3rem;
}

body[data-sectiune] .sec-titlu + .sec-unduire {
  display: block;
  width: 108px;
  height: 8px;
  margin-bottom: 1.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='8' viewBox='0 0 54 8'%3E%3Cpath d='M0 4c4.5-5 9-5 13.5 0S27 9 31.5 4 45-1 54 4' fill='none' stroke='%23ff5562' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
}

/* --- Butoanele, mai rotunde --- */

body[data-sectiune] main .btn {
  border-radius: 999px;
}

/* Coralul viu al temei vechi (#ff5562) dă doar 3,1:1 sub text alb — sub
   pragul de 4,5:1. Îl păstrăm pentru ce nu poartă litere (bulinele
   cartonașelor, linia ondulată), iar butoanele iau tonul închis. */
body[data-sectiune] main .btn--primary {
  background: var(--coral-inchis);
  border-color: var(--coral-inchis);
  box-shadow: 0 3px 0 #a82c36;
}

body[data-sectiune] main .btn--primary:hover {
  background: #a82c36;
  border-color: #a82c36;
}

/* --------------------------------------- Fără bara laterală a școlii */

/* Secțiunea e un site în site: conținutul ei ocupă toată lățimea, fiindcă
   bara laterală cu link-urile școlii nu se mai afișează (vezi
   app/views/partials/sidebar.php). */
body[data-sectiune] .layout {
  grid-template-columns: minmax(0, 1fr);
}

/* Soarele din subsol — grădinița nu are siglă, deci îl desenăm. */
.footer__soare {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff0c2, var(--soare, #ffc244) 70%);
  box-shadow: 0 0 0 4px rgba(255, 194, 68, .2);
}