/* Custom CSS for SDC Website */

/* Fix logo aspect ratio */
#logo img {
  max-width: 80px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ==========================================================================
   NOTA: blocul MEGA MENU / SUBMENU FIX a fost scos intentionat.
   Motiv: ascundea #mainmenu pe mobil si il arata doar cand header primea
   clasa .menu-open. Meniul functioneaza corect fara aceste reguli, deci
   activarea lor ar fi putut bloca navigarea pe telefon.
   Se poate reintroduce dintr-o versiune anterioara daca apar submeniuri
   vizibile permanent.
   ========================================================================== */

/* Mobile fixes */
@media only screen and (max-width: 992px) {
  /* Ensure header has solid dark background on mobile */
  header,
  header.transparent,
  header.header-mobile {
    background: #111 !important;
  }

  /* Ensure logo is visible and properly sized */
  header #logo {
    position: relative;
    z-index: 1001;
  }

  header #logo img {
    position: relative;
    z-index: 1001;
    max-height: 60px;
    width: auto;
  }

  /* Ensure menu button (hamburger) is visible and styled */
  #menu-btn {
    display: block !important;
    z-index: 1002;
    color: #fff !important;
  }

  /* Hide the join button on mobile */
  header .btn-main {
    display: none !important;
  }

  /* Style the mobile menu when open */
  header.header-mobile #mainmenu {
    background: #111 !important;
  }

  header.header-mobile #mainmenu li {
    border-color: #333 !important;
  }

  header.header-mobile #mainmenu a.menu-item {
    color: #fff !important;
  }
}

/* Smaller mobile screens */
@media only screen and (max-width: 767px) {
  header #logo img.logo-mobile {
    display: block !important;
    max-height: 50px;
  }

  header #logo img.logo-main,
  header #logo img.logo-scroll {
    display: none !important;
  }
}

/* =====================================================================
   BRAND OVERRIDES — Self-Defense Concepts (adaugat automat, NU stergeti)
   ===================================================================== */

/* ==========================================================================
   SELF-DEFENSE CONCEPTS — Brand Override Stylesheet  (custom_03_brand.css)
   Load this AFTER custom_02.css. Together with scheme-sdc.css it brings the
   template onto the official Brand Guide:
     - Montserrat (Bold = titles, SemiBold = subheads, Regular = body)
     - Foundation Red #B92C2E / Core Black #161A1C / Wisdom Gold #FFCD77
   Fonts are self-hosted (GDPR-friendly: no Google Fonts request).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MONTSERRAT @font-face  (self-hosted)
   Upload the /fonts/montserrat/ folder next to /css/ and keep these paths.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY — override the Jost variables set in custom_02.css
   Brand Guide: Bold = logo/titles/main message · SemiBold = subheadings
   Regular = body · ALL CAPS = strong short statements
   -------------------------------------------------------------------------- */
* {
  /* body */
  --body-font: 'Montserrat', Helvetica, Arial, sans-serif !important;
  --body-font-size: 17px !important;
  --body-font-color: #3a3f42 !important;                 /* warm grey, reads well on white */
  --body-font-color-bg-dark: rgba(255, 255, 255, .82) !important;
  --body-font-weight: 400 !important;

  /* headings */
  --heading-font: 'Montserrat', Helvetica, Arial, sans-serif !important;
  --heading-font-weight: 700 !important;                 /* Bold for titles, per guide   */
  --heading-font-color: #161A1C !important;              /* Core Black                   */
  --heading-font-color-bg-dark: #ffffff !important;
  --heading-text-transform: none !important;

  /* H1 — hero / page titles: Bold, ALL CAPS, tracked out */
  --h1-font-size: 52px !important;
  --h1-font-weight: 700 !important;
  --h1-letter-spacing: 0.02em !important;
  --h1-line-height: 1.15em !important;

  /* H2 — section titles: Bold */
  --h2-font-size: 40px !important;
  --h2-font-weight: 700 !important;
  --h2-letter-spacing: 0.01em !important;
  --h2-line-height: 1.2em !important;

  /* H3/H4 — subheadings: SemiBold, per guide */
  --h3-font-size: 24px !important;
  --h3-font-weight: 600 !important;
  --h4-font-size: 19px !important;
  --h4-font-weight: 600 !important;
  --h5-font-weight: 600 !important;
  --h6-font-weight: 600 !important;

  /* main menu — SemiBold caps for a strong, grounded nav */
  --mainmenu-font: 'Montserrat', Helvetica, Arial, sans-serif !important;
  --mainmenu-font-size: 15px !important;
  --mainmenu-font-weight: 600 !important;
  --mainmenu-letter-spacing: 0.06em !important;
  --mainmenu-text-transform: uppercase !important;

  /* subheader (inner-page banners) */
  --subheader-title-font-size: 46px !important;
  --subheader-title-text-transform: uppercase !important;

  /* dark backgrounds — Core Black ladder instead of template's #101010 */
  --bg-dark-1: #161A1C !important;                       /* Core Black                   */
  --bg-dark-2: #1f2427 !important;
  --bg-dark-3: #2a3034 !important;
  --bg-dark-1-rgb: 22, 26, 28 !important;

  /* soft light backgrounds (slightly warm to match Wisdom Gold) */
  --bg-light: #FAF8F5 !important;
  --bg-color-even: #F2EFEA !important;
  --bg-color-odd: #FAF8F5 !important;

  /* gradient tint used by the template — red → gold whisper */
  --bg-gradient-1: 0deg,
      rgba(185, 44, 46, .08) 0%,
      rgba(255, 205, 119, .14) 100% !important;

  /* buttons — Montserrat SemiBold caps, slightly squarer = more "grounded" */
  --btn-font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
  --btn-font-weight: 600 !important;
  --btn-letter-spacing: 0.05em !important;
  --btn-rounded: 8px !important;
  --btn-text-transform: uppercase !important;
  --btn-color: #ffffff !important;
  --btn-hover-bg: #9a2426 !important;                    /* darker Foundation Red        */
}

/* H1 in hero sections: ALL CAPS per brand guide "strong short statements" */
section h1,
.subheader h1,
h1 {
  text-transform: uppercase !important;
  font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
}

/* --------------------------------------------------------------------------
   3. ACCENT USAGE — Wisdom Gold where the template used secondary color
   -------------------------------------------------------------------------- */

/* Icon accents, counters, small highlights → gold on dark, red on light */
.bg-dark-1 .id-color,
.bg-dark-2 .id-color,
[class*="bg-dark"] .id-color {
  color: #FFCD77 !important;
}

/* Stat counters (the 15+ ani experiență block) */
.de-number,
.timer {
  color: #B92C2E;
  font-weight: 700;
}
[class*="bg-dark"] .de-number,
[class*="bg-dark"] .timer {
  color: #FFCD77;
}

/* Links */
a {
  color: #B92C2E;
}
a:hover {
  color: #9a2426;
}
[class*="bg-dark"] a:not(.btn-main):hover {
  color: #FFCD77;
}

/* Selection color — small brand touch */
::selection {
  background: #FFCD77;
  color: #161A1C;
}

/* --------------------------------------------------------------------------
   4. HEADER & FOOTER on Core Black
   -------------------------------------------------------------------------- */
header.transparent.scroll,
header:not(.transparent),
footer {
  background: #161A1C !important;
}

/* mobile header fix (overrides the #111 in custom.css) */
@media only screen and (max-width: 992px) {
  header,
  header.transparent,
  header.header-mobile,
  header.header-mobile #mainmenu {
    background: #161A1C !important;
  }
}

/* --------------------------------------------------------------------------
   5. SMALL POLISH
   -------------------------------------------------------------------------- */

/* Card hover lift with gold edge — subtle, not flashy */
.hover-card,
.de-item,
.f-box {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hover-card:hover,
.de-item:hover,
.f-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(22, 26, 28, .14);
  border-color: rgba(255, 205, 119, .6);
}

/* Blockquotes / testimonials — gold bar, Montserrat italic */
blockquote {
  border-left: 4px solid #FFCD77;
  font-style: italic;
}


/* ===== FORTARE FINALA (independent de ordinea de incarcare) ===== */
body, p, li, span, a, input, textarea, select, button {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
}
h1, h2 { font-weight: 700 !important; }
h3, h4, h5, h6 { font-weight: 600 !important; }


/* ===== RESPONSIVE MOBIL v2 — hero, spatieri, titluri ===== */

/* Spatiere hero — header transparent sta PESTE continut, deci padding mare sus */
section.hero-section { padding-top: 140px !important; padding-bottom: 48px !important; }
.hero-top-space, .hero-bottom-space { height: 0; }

/* Titlul hero — regula puternica, bate orice !important pe h1 generic */
h1.hero-title { font-size: 44px; line-height: 1.12; }

@media (max-width: 768px) {
  /* Hero title mult mai mic pe telefon */
  h1.hero-title { font-size: 30px !important; line-height: 1.15 !important; }

  /* Spatiere hero pe mobil — header transparent ocupa ~120px, lasam loc clar */
  section.hero-section { padding-top: 130px !important; padding-bottom: 32px !important; }

  /* Reduce spatiul mare dintre sectiuni pe mobil (padding vertical sectiuni) */
  section { padding-top: 36px !important; padding-bottom: 36px !important; }

  /* H2 sectiuni mai mic */
  section h2 { font-size: 26px !important; line-height: 1.25 !important; }

  /* Eticheta aurie lizibila */
  section span[style*="letter-spacing"] { font-size: 13px !important; }
}

/* Cardurile cu icon + text: textul se infasoara, niciodata taiat */
.flex-fill h5, .flex-fill h6 { white-space: normal !important; overflow-wrap: anywhere; }


/* ===== TESTIMONIALE — forteaza infasurarea textului (fix taiere) ===== */
#testimoniale p,
#testimoniale summary,
#testimoniale details {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
}
#testimoniale .col-md-6 > div {
  overflow: hidden;
}

/* ===== CTA final heading mobil ===== */
@media (max-width: 768px) {
  section.bg-color h1,
  section.bg-color h2 {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
}
/* ===== PROGRAM benefit box — text infasurat pe mobil ===== */
.benefit-text {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
}

/* ===== Buton inapoi sus ===== */
#sdc-back-to-top {
  position: fixed !important;
  right: 20px !important;
  bottom: 80px !important;            /* deasupra butonului de cookie */
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #B92C2E !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  z-index: 9998 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
#sdc-back-to-top.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
}
#sdc-back-to-top:hover {
  background: #FFCD77 !important;
  color: #161A1C !important;
}
#sdc-back-to-top svg { display: block; }

/* Pe mobil: garantat vizibil, in coltul dreapta-jos */
@media (max-width: 768px) {
  #sdc-back-to-top {
    right: 16px !important;
    bottom: 76px !important;
    width: 42px !important;
    height: 42px !important;
  }
}


/* ===== Ascunde orice ALT buton de scroll (tema injecteaza unul propriu -> sageata dubla) ===== */
#back-to-top:not(#sdc-back-to-top),
#de-scroll-top, .scroll-to-top, #scroll-top, #totop, #to-top, .to-top, #scrollup, .scrollup {
  display: none !important;
  visibility: hidden !important;
}

/* ===== Linkuri legale in subfooter: spatiere + aspect vizibil de link ===== */
.subfooter .list-inline { margin-bottom: 0; }
.subfooter .list-inline-item { margin-right: 0; }
.subfooter .list-inline-item + .list-inline-item { margin-left: 22px; }
.subfooter .list-inline-item a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 205, 119, .5);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.subfooter .list-inline-item a:hover {
  color: #FFCD77 !important;
  text-decoration-color: #FFCD77;
}

/* Pe mobil linkurile legale se aseaza pe randuri, cu spatiu intre ele */
@media (max-width: 768px) {
  .subfooter .de-flex { flex-direction: column; align-items: flex-start; gap: 10px; }
  .subfooter .list-inline-item + .list-inline-item { margin-left: 14px; }
}


/* ===== FIX GENERAL: text in casete flex se infasoara MEREU (Contact benefit box etc.) ===== */
/* min-width:0 e cheia: fara ea, flex refuza sa stranga textul si il taie pe un rand */
section .d-flex > div {
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
section .d-flex > i { flex-shrink: 0; }


/* =====================================================================
   LIZIBILITATE — nimic sub 15px, textul de continut la 17px
   (adaugat: marire font cerere Lucian)
   ===================================================================== */

/* Footer: paragraf de prezentare + linkuri de navigare */
footer p,
footer .widget ul li a,
footer .widget a,
footer .widget div {
  font-size: 17px !important;
  line-height: 1.6 !important;
}

/* Subfooter: copyright + linkuri legale */
.subfooter,
.subfooter a,
.subfooter .de-flex-col,
.subfooter .list-inline-item a {
  font-size: 16px !important;
}

/* Breadcrumb pe paginile interioare */
.breadcrumb,
.breadcrumb a,
.breadcrumb-item,
.breadcrumb-item a {
  font-size: 16px !important;
}

/* Plasa de siguranta: orice text de continut care a ramas mic */
section p,
section li {
  font-size: 17px;
}

/* =====================================================================
   ICONITE SOCIALE (footer) — Facebook / Instagram / WhatsApp
   Monocrome pe fundal inchis, hover pe Wisdom Gold.
   Glif 20px (standard footer) intr-o caseta de 44x44px = zona de atingere
   sigura pe telefon, conform ghidurilor de accesibilitate.
   ===================================================================== */
.social-icons {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;              /* spatiere intre iconite */
}
.social-icons a {
  width: 44px !important;            /* zona de atingere minima */
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;     /* acelasi radius ca butoanele */
  background: #1f2427 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  margin: 0 !important;              /* spatierea o face gap, nu margin */
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.social-icons a i {
  font-size: 20px !important;        /* glif vizual, standard footer */
  line-height: 1 !important;
}
.social-icons a:hover,
.social-icons a:focus-visible {
  color: #FFCD77 !important;         /* Wisdom Gold, consecvent cu brandul */
  background: #2a3034 !important;
  transform: translateY(-2px);
}
.social-icons a:focus-visible {
  outline: 2px solid #FFCD77 !important;
  outline-offset: 2px !important;
}

/* Pe mobil pastram lizibilitatea, fara sa umflam etichetele */
@media (max-width: 768px) {
  footer p,
  footer .widget ul li a,
  footer .widget a,
  footer .widget div {
    font-size: 17px !important;
  }
  .subfooter,
  .subfooter a,
  .subfooter .list-inline-item a {
    font-size: 16px !important;
  }
}


/* =====================================================================
   SCARA DE TITLURI — definita explicit
   Motiv: tema seta h5 la ~20px si h6 la ~16px, iar custom.css definea
   doar grosimile. Dupa marirea textului de continut la 17px, titlurile
   h6 ajunseseră MAI MICI decat propriul paragraf.
   Scara: h3 24 / h4 21 / h5 20 / h6 19 / text 17 — descrescatoare,
   totul deasupra textului de continut.
   ===================================================================== */
* {
  --h4-font-size: 21px !important;
  --h5-font-size: 20px !important;
  --h6-font-size: 19px !important;
}

h4, .h4 { font-size: 21px !important; }
h5, .h5 { font-size: 20px !important; }
h6, .h6 { font-size: 19px !important; }

/* Pe telefon coborâm proportional, dar h6 rămâne peste textul de 17px */
@media (max-width: 768px) {
  h4, .h4 { font-size: 20px !important; }
  h5, .h5 { font-size: 19px !important; }
  h6, .h6 { font-size: 18px !important; }
}


/* =====================================================================
   HEADER LIPICIOS (sticky) — feedback Marius, 18.08.2026
   Header-ul rămâne vizibil pe tot parcursul paginii.
   Transparent cât timp ești sus, devine Core Black când derulezi.
   Clasa .sdc-scrolled este adăugată de scriptul din footer.php.
   REVERSIBIL: șterge tot acest bloc și te întorci la comportamentul vechi.
   ===================================================================== */
header,
header.transparent {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9990 !important;
  transition: background .28s ease, box-shadow .28s ease, padding .28s ease;
}

/* Sus, peste hero: rămâne transparent (aspectul actual) */
header.transparent:not(.sdc-scrolled) {
  background: transparent !important;
  box-shadow: none !important;
}

/* La derulare: fundal solid, ca textul meniului să fie mereu lizibil */
header.sdc-scrolled,
header.transparent.sdc-scrolled {
  background: #161A1C !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .38) !important;
}

/* Logo puțin mai mic la derulare — bara ocupă mai puțin loc pe verticală */
@media only screen and (min-width: 993px) {
  header.sdc-scrolled #logo img {
    max-width: 62px !important;
  }
}

/* Pe mobil fundalul este oricum solid (regula de mai sus din fișier).
   Siguranță: dacă meniul deschis ar fi mai înalt decât ecranul, se poate derula. */
@media only screen and (max-width: 992px) {
  header.header-mobile {
    max-height: 100vh !important;
    overflow-y: auto !important;
  }
}


/* =====================================================================
   BLOG — text justificat DOAR pe desktop  (feedback Marius, 18.08.2026)
   Motiv pentru limitare: pe ecran îngust justify produce "râuri" de spații
   albe între cuvinte, mai ales în română (cuvinte lungi). Sub 992px
   rămâne aliniat la stânga, care se citește mai bine.
   Se aplică doar paragrafelor și listelor — NU titlurilor sau citatelor.
   ===================================================================== */
@media only screen and (min-width: 992px) {
  .blog-content p,
  .blog-content li {
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  /* Titluri, citate și legende rămân aliniate la stânga */
  .blog-content h1, .blog-content h2, .blog-content h3,
  .blog-content h4, .blog-content h5, .blog-content h6,
  .blog-content blockquote,
  .blog-content figcaption,
  .blog-content .wp-caption-text {
    text-align: left !important;
    hyphens: manual;
  }
}


/* =====================================================================
   BANDĂ REDIRECȚIONARE 3,5%  (formular230.ro)
   Afișarea este controlată din footer.php, pe bază de dată (15 ian – 25 mai).
   ===================================================================== */
.sdc-230-band {
  background: #FFCD77;
  color: #161A1C;
  padding: 14px 0;
}
.sdc-230-band a.sdc-230-link {
  display: inline-block;
  background: #B92C2E;
  color: #fff !important;
  text-decoration: none !important;
  padding: 10px 22px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 14px;
  transition: background .2s ease, transform .2s ease;
  white-space: nowrap;
}
.sdc-230-band a.sdc-230-link:hover {
  background: #9d2426;
  transform: translateY(-2px);
}
.sdc-230-band .sdc-230-text {
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  margin: 0;
  color: #161A1C;
}
.sdc-230-band .sdc-230-sub {
  font-size: 14px;
  opacity: .8;
  margin: 4px 0 0;
  color: #161A1C;
}
@media (max-width: 767px) {
  .sdc-230-band { text-align: center; padding: 18px 0; }
  .sdc-230-band .sdc-230-text { font-size: 16px; }
  .sdc-230-band a.sdc-230-link { margin-top: 12px; white-space: normal; }
}


/* =====================================================================
   CORECTIE 19.08.2026 — HEADER care se ascundea la derulare in jos
   ---------------------------------------------------------------------
   Tema are propriul script care ascunde bara de meniu cand derulezi in
   jos si o readuce cand derulezi in sus ("auto-hide"). O face mutand
   header-ul in sus cu transform: translateY(...).
   Noi vrem ca meniul sa fie vizibil PERMANENT, deci anulam acea mutare.
   Acoperim toate variantele de clasa pe care le poate pune tema, ca sa
   functioneze indiferent de mecanism.
   REVERSIBIL: sterge acest bloc si revine comportamentul de auto-hide.
   ===================================================================== */
header,
header.transparent,
header.scroll,
header.smaller,
header.sticky,
header.hidden,
header.nav-up,
header.header-hide,
header.header-hidden {
  transform: none !important;
  -webkit-transform: none !important;
  translate: none !important;
  top: 0 !important;
  bottom: auto !important;
  margin-top: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  -webkit-animation: none !important;
}

/* Pastram tranzitia doar pe culoare si umbra — nu pe poziție,
   altfel bara ar "aluneca" vizibil la fiecare derulare. */
header,
header.transparent {
  transition: background .28s ease, box-shadow .28s ease !important;
}


/* =====================================================================
   BANNER PAGINA DESPRE — poza de echipa  (v2, 19.08.2026)
   ---------------------------------------------------------------------
   Inainte poza era pusa cu <img class="jarallax-img">, care avea doua
   probleme: pe telefon se vedea doar sacul din dreapta (poza lata,
   ecran ingust), iar pe desktop titlul "DESPRE" cadea peste fete.
   Acum poza e fundal, deci putem folosi un decupaj diferit pe telefon
   si putem controla exact ce parte a pozei se vede.

   CELE DOUA REGLAJE, daca vrei sa ajustezi:
     background-position: 50% 14%   -> al doilea numar = cat de sus se
                                       vede poza. Mai MIC = urci in poza
                                       (mai mult perete deasupra).
                                       Mai MARE = cobori (mai mult jos).
     min-height                     -> cat de inalt e banner-ul.
   ===================================================================== */
.sdc-despre-hero {
  position: relative;
  min-height: clamp(460px, 42vw, 640px);
  display: flex;
  align-items: flex-end;          /* titlul sta jos, fetele rămân deasupra */
  background-image: url("/SDC_website/images/echipa-sdc-despre-B-cinematic.webp");
  background-size: cover;
  background-position: 50% 14%;
  background-repeat: no-repeat;
  background-color: #161A1C;      /* fundal de rezerva pana se incarca poza */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
}
.sdc-despre-hero > .container {
  width: 100%;
  padding-top: clamp(120px, 14vw, 200px);
  padding-bottom: clamp(28px, 3.5vw, 56px);
}
/* Overlay-ul temei era la 80% — prea intunecat pentru o poza cu oameni.
   Il reducem doar aici, ca fetele sa se vada, dar titlul sa rămână lizibil. */
.sdc-despre-hero .sw-overlay {
  opacity: .5 !important;
}
.sdc-despre-hero h1,
.sdc-despre-hero .breadcrumb {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .75);
}

/* TELEFON si TABLETA: decupaj patrat, cu toti cei prezenti in cadru.
   Banner-ul devine aproape patrat, ca poza sa nu mai fie tăiată lateral. */
@media only screen and (max-width: 991px) {
  .sdc-despre-hero {
    min-height: clamp(400px, 100vw, 560px);
    background-image: url("/SDC_website/images/echipa-sdc-mobil-B-v2.webp");
    background-position: 50% 35%;
  }
  .sdc-despre-hero > .container {
    padding-top: clamp(180px, 58vw, 340px);
    padding-bottom: clamp(20px, 5vw, 36px);
  }
}


/* =====================================================================
   DESPRE — spatiul dintre banner si "MISIUNEA NOASTRA", pe telefon
   ---------------------------------------------------------------------
   Golul venea din trei surse care se adunau:
     1. spatiul de jos al banner-ului (sub firimiturile de navigare)
     2. marginea implicita de sub lista de firimituri (~16px)
     3. spatiul de sus al secreiunii urmatoare (48px, clasa py-5)
   Reducem punctele 2 si 3 DOAR pe telefon si tableta. Pe desktop nu se
   schimba nimic, acolo proportiile arata bine.
   REVERSIBIL: sterge acest bloc.
   ===================================================================== */
@media only screen and (max-width: 991px) {
  .sdc-despre-hero .breadcrumb {
    margin-bottom: 0 !important;
  }
  .sdc-despre-hero > .container {
    padding-bottom: clamp(14px, 3vw, 22px) !important;
  }
  /* secreiunea imediat urmatoare (MISIUNEA NOASTRA) */
  .sdc-despre-hero + section {
    padding-top: clamp(20px, 5vw, 34px) !important;
  }
}


/* =====================================================================
   DESPRE — spatiul de sub banner, PE TELEFON, reglaj mai agresiv (v2)
   ---------------------------------------------------------------------
   Prima incercare a taiat prea putin. Cauza descoperita: pe langa
   spatiile deja reduse, primul rand din secreiunea "MISIUNEA NOASTRA"
   are clasa Bootstrap "g-4", care adauga 24px de spatiu deasupra
   coloanelor din interior. Aici il anulam, doar pe primul rand si doar
   pe telefon.
   REVERSIBIL: sterge acest bloc si revine la starea din pachetul 8.
   ===================================================================== */
@media only screen and (max-width: 991px) {

  /* banner: titlul si firimiturile coboară aproape pana la margine */
  .sdc-despre-hero > .container {
    padding-bottom: 8px !important;
  }

  /* secreiunea imediat urmatoare porneste imediat */
  .sdc-despre-hero + section {
    padding-top: 10px !important;
  }

  /* anulam spatiul adaugat de "g-4" pe PRIMUL rand din acea secreiune */
  .sdc-despre-hero + section > .container > .row:first-of-type {
    margin-top: 0 !important;
    --bs-gutter-y: 0 !important;
  }
  .sdc-despre-hero + section > .container > .row:first-of-type > [class*="col-"] {
    padding-top: 0 !important;
  }
}


/* =====================================================================
   BANNER PAGINA PROGRAM — poza MINDSET / SKILLSET / HABITS  (20.08.2026)
   ---------------------------------------------------------------------
   Aceeasi constructie ca la /despre. Doua imagini, una lata pentru
   calculator, una portret pentru telefon; adresele lor sunt puse din
   page-program.php, cu functia temei.

   Pe DESKTOP imaginea are marginile laterale coborâte in Core Black,
   ca titlul "PROGRAM" sa aiba loc dedesubt fara sa cada peste textul
   auriu de pe tricouri.

   REGLAJE:
     background-position: 50% 0%   -> al doilea numar = cat de sus se
                                      vede poza. Mai mare = cobori.
     min-height                    -> inaltimea banner-ului.
   ===================================================================== */
.sdc-program-hero {
  position: relative;
  min-height: clamp(520px, 44vw, 780px);
  display: flex;
  align-items: flex-end;          /* titlul sta jos, tricourile deasupra */
  background-size: cover;
  background-position: 50% 0%;
  background-repeat: no-repeat;
  background-color: #161A1C;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
}
.sdc-program-hero > .container {
  width: 100%;
  padding-top: clamp(120px, 14vw, 200px);
  padding-bottom: clamp(28px, 3.5vw, 56px);
}
/* overlay-ul temei era la 80% — prea intunecat, stingea auriul de pe tricouri */
.sdc-program-hero .sw-overlay {
  opacity: .42 !important;
}
.sdc-program-hero h1,
.sdc-program-hero .breadcrumb {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .78);
}

/* TELEFON si TABLETA: decupaj portret, toti 3 din cap pana in picioare.
   Imaginea fiind mai inalta decat lata, nu se taie nimic lateral. */
@media only screen and (max-width: 991px) {
  .sdc-program-hero {
    min-height: clamp(430px, 130vw, 540px);
    background-position: 50% 10%;
  }
  .sdc-program-hero > .container {
    padding-top: clamp(180px, 58vw, 340px);
    padding-bottom: 8px !important;
  }
  /* acelasi reglaj de spatiu ca la /despre, ca sectiunea urmatoare
     sa nu porneasca prea jos */
  .sdc-program-hero .breadcrumb {
    margin-bottom: 0 !important;
  }
  .sdc-program-hero + section {
    padding-top: 12px !important;
  }
  .sdc-program-hero + section > .container > .row:first-of-type {
    margin-top: 0 !important;
    --bs-gutter-y: 0 !important;
  }
  .sdc-program-hero + section > .container > .row:first-of-type > [class*="col-"] {
    padding-top: 0 !important;
  }
}


/* =====================================================================
   MENIU PRINCIPAL — dimensiune marita pe desktop  (20.08.2026)
   ---------------------------------------------------------------------
   15px -> 16px. Motiv: pe ecrane de 13 inch meniul se citea greu langa
   titlul hero. Greutatea era deja la 600, deci singura parghie ramasa
   era dimensiunea. Am redus si spatierea intre litere de la .06em la
   .05em — literele prea rasfirate se citesc mai greu, nu mai usor, iar
   asta compenseaza latimea castigata de font.

   ATENTIE PENTRU VIITOR: acum sunt 5 pagini in meniu si incap comod.
   La 7 pagini (PROGRAME + IMPLICA-TE) bara devine ingusta si butonul
   "Alatura-te Acum" incepe sa fie impins. Cand se adauga paginile,
   fie se revine la 15px, fie se restructureaza meniul la 6 intrari cu
   submeniu pe ANTRENAMENTE.

   Regula se scrie de doua ori intentionat: o data pe variabila temei
   (asa e construita tema) si o data direct pe element, ca sa functioneze
   si daca variabila nu e citita.

   REVERSIBIL: sterge tot acest bloc si revii la 15px.
   ===================================================================== */
:root {
  --mainmenu-font-size: 16px !important;
  --mainmenu-letter-spacing: 0.05em !important;
}

/* Doar de la tableta in sus. Pe mobil meniul e in panoul lateral,
   unde dimensiunea era deja buna. */
@media only screen and (min-width: 993px) {
  header #mainmenu > li > a,
  header #mainmenu a.menu-item,
  header #mainmenu li a {
    font-size: 16px !important;
    letter-spacing: 0.05em !important;
  }
  /* submeniurile, cand vor exista, raman putin mai mici */
  header #mainmenu ul li a,
  header #mainmenu ul a.menu-item {
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
  }
}