/*
 * Componente. Un bloc per componentă, BEM.
 *
 * Layerul e declarat aici, în fișier, nu prin `@import … layer()` în main.css:
 * minificatorul din LiteSpeed rescrie @import-urile și pierde funcția layer(),
 * ceea ce ar anula ordinea de cascadă în producție.
 */
@layer components {
  /* ---------- utilitare de accesibilitate ---------- */
  .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: calc(var(--z-modal) + 1);
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    transform: translateY(-200%);
    transition: transform var(--duration-fast) var(--ease-out);

    &:focus-visible {
      transform: translateY(0);
    }
  }

  /* ---------- buton ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: var(--space-3) var(--space-6);
    line-height: 27px;
    border-radius: var(--radius-full);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color var(--duration-fast) var(--ease-out),
      color var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);

    &:active {
      transform: translateY(1px);
    }
  }

  .btn--primary {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
    background: transparent;
    border: 2px solid #fff;
    border-radius: 25px;
    padding: 18px 30px 18px;
    transition: all 0.3s ease-in-out;

    &:hover {
      background-color: var(--color-accent-hover);
    }
  }

  /*
   * Varianta plină, aurie. `.btn--primary` a devenit între timp butonul
   * conturat de pe fundal închis, deci formele coexistă sub nume diferite,
   * ca în tema veche (`btn-brown` vs butonul din slider).
   */
  .btn--solid {
    padding: 18px 30px;
    border-radius: 50px;
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;

    &:hover {
      background-color: var(--color-accent-hover);
    }
  }

  /*
   * Aceleași măsuri ca `.btn--solid` de pe pagina de prețuri — padding, rază,
   * font — doar că e conturat, nu plin. Culoarea rămâne cea de pe cazurile
   * clinice.
   */
  .btn--outline {
    padding: 18px 30px;
    border: 2px solid #24262d;
    border-radius: 50px;
    color: #24262d;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;

    &:hover,
    &:focus-visible {
      background-color: #24262d;
      color: var(--color-text-inverse);
    }
  }

  .btn--ghost {
    border: 1px solid var(--color-border);

    &:hover {
      border-color: var(--color-accent);
      color: var(--color-accent);
    }
  }

  /* ---------- header ---------- */
  /*
   * Trei stări, ca în tema veche:
   *   implicit            → bară închisă, text alb (paginile fără hero)
   *   .site-header--overlay → transparentă, peste slider (prima pagină)
   *   [data-scrolled]     → albă, text închis, logo inversat
   *
   * Culorile se schimbă prin două variabile locale, nu prin liste de selectori
   * per template. Tema veche avea nevoie de reguli separate pentru
   * .page-template-home, .page-template-turism, .error404 și .sticky, fiecare
   * repetând aceleași declarații.
   */
  .site-header {
    --header-bg: var(--color-header);
    --header-fg: var(--color-text-inverse);

    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background-color: var(--header-bg);
    color: var(--header-fg);
    transition:
      background-color var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out);
  }

  .site-header--overlay {
    --header-bg: transparent;

    /* Fixed, nu sticky: altfel bara ar ocupa spațiu în flux și ar împinge
       slider-ul în jos în loc să stea peste el. */
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
  }

  /*
   * La derulare se schimbă doar culorile și umbra, NU poziționarea. Trecerea
   * din `sticky` în `fixed` ar scoate bara din flux pe paginile fără hero și
   * conținutul ar sări în sus cu înălțimea header-ului.
   */
  .site-header[data-scrolled="true"] {
    --header-bg: var(--color-surface);
    --header-fg: var(--color-text);

    box-shadow: var(--shadow-sm);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-height: var(--header-h);
    /* În design bara se întinde pe toată lățimea ecranului: logo-ul e lipit de
       marginea stângă, comutatorul de limbă de cea dreaptă. Dacă rămâne limitat
       la --wrap-max, cele 11 elemente de meniu se rup pe două rânduri. */
    max-width: none;
  }

  .site-header__logo {
    flex-shrink: 0;
    line-height: 0;
  }

  .site-header__logo-img {
    width: 120px;
    height: auto;
  }

  /* Fișierul sursă e alb (magnum-white.svg). Pe fundal alb ar fi invizibil,
     deci îl inversăm — grayscale elimină eventualele nuanțe înainte de invert. */
  .site-header[data-scrolled="true"] .site-header__logo-img,
  .site-header--light .site-header__logo-img {
    filter: grayscale(1) invert(1);
  }

  /*
   * A patra stare: albă de la început (paginile portate și „Dantură Fixă”).
   *
   * Aceeași umbră ca la derulare: o bară albă peste conținut alb n-are niciun
   * contur, iar marginea de jos a antetului se pierde. Tot `--shadow-sm`, nu o
   * valoare proprie — altfel bara și-ar schimba umbra la derulare.
   */
  .site-header--light {
    --header-bg: var(--color-surface);
    --header-fg: var(--color-text);

    box-shadow: var(--shadow-sm);
  }

  .site-header__wordmark {
    font-size: var(--step-1);
    font-weight: 700;
    line-height: 1;
  }

  .site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-inline-start: auto;
  }

  /* ---------- telefon și limbă, ca elemente de meniu ---------- */
  /*
   * Ambele sunt elemente reale în meniul principal, administrate de client:
   * `phone_class` / `phone_1` / `phone_2` și elementul Polylang, care produce
   * `lang-item`. Le stilizăm aici în loc să le dublăm în header.
   */
  .site-nav__list .phone_class > a {
    padding: var(--space-3);
    border: 1px solid var(--color-accent);
    font-weight: 600;
    white-space: nowrap;
    transition:
      background-color var(--duration-fast) var(--ease-out),
      color var(--duration-fast) var(--ease-out);
  }

  .site-nav__list .phone_class > a:hover {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
  }

  /* Al doilea număr (+40) e ascuns implicit, exact ca în tema veche; apare
     doar pe pagina de turism dentar. */
  .site-nav__list .phone_2 {
    display: none;
  }

  .site-nav__list .lang-item > a {
    padding: var(--space-2) var(--space-4);
    background-color: var(--neutral-400);
    color: var(--neutral-900);
    font-weight: 600;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .site-nav__list .lang-item > a:hover {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
  }

  .site-header__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background-color: var(--neutral-800);
    z-index: 9999;
    /*
     * Împinge butonul la marginea dreaptă. E necesar pentru că sub breakpoint
     * `.site-nav` devine `position: fixed` și iese din flux — deci `margin-auto`
     * de pe el nu mai împinge nimic, iar butonul ar rămâne lipit de logo.
     */
    margin-inline-start: auto;
  }

  .site-header__toggle-bar {
    display: block;
    width: 23px;
    height: 3px;
    margin-inline: auto;
    background-color: var(--color-text-inverse);
    transition: transform var(--duration-base) var(--ease-out);
  }

  /* Cele două linii se încrucișează în „X” când meniul e deschis. */
  .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  /* ---------- navigație ---------- */
  .site-nav {
    margin-inline-start: auto;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;

    & > li > a,
    & > li > .site-nav__parent {
      /* Meniul are 11 elemente; fără nowrap, titlurile din două cuvinte
         („Aparate Dentare”) se rup și bara crește în înălțime. */
      white-space: nowrap;
    }

    & a,
    & .site-nav__parent {
      display: inline-block;
      padding-block: var(--space-2);
      color: inherit;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      transition: color var(--duration-fast) var(--ease-out);
    }

    & a:hover,
    & .site-nav__parent:hover,
    & .current-menu-item > a {
      color: var(--color-accent);
    }
  }

  /*
   * Elementele cu submeniu nu au `href` — sunt containere, nu pagini. JS le
   * convertește din `<a>` în `<button>`, pentru că un `<a>` fără href nu e
   * focusabil: dropdown-ul de desktop era inaccesibil din tastatură. Ca
   * `<button>`, regula `:focus-within` de mai jos îl deschide la Tab.
   */
  .site-nav__chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Pe desktop săgeata nu apare: designul nu o are, iar submeniul se deschide
     la hover. La fel butonul de întoarcere, care are sens doar în panou. */
  .site-nav__chevron,
  .site-nav__back-item {
    display: none;
  }

  /* Submeniu */
  .site-nav__list li {
    position: relative;
  }

  .site-nav__list .sub-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 1;
    min-width: 14rem;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--duration-fast) var(--ease-out),
      visibility var(--duration-fast);

    & a {
      display: block;
      padding: var(--space-2) var(--space-3);
      font-size: var(--step--1);
      color: var(--color-text);
      border-block-end: 1px solid var(--color-border);
    }

    & a:hover {
      background-color: var(--color-accent);
      color: var(--color-text-inverse);
    }
  }

  /*
   * Pagina deschisă, marcată în submeniu: fundal accent și text alb, ca starea
   * de hover. Fără ea, submeniul nu arăta în niciun fel unde te afli.
   *
   * Selectorul e mai specific decât `.sub-menu a:hover` ca marcajul să rămână
   * și când treci cu mouse-ul peste alt element din listă.
   */
  .site-nav__list .sub-menu .current-menu-item > a {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
  }

  /* Și părintele primește culoarea de accent, altfel bara de sus nu dă niciun
     indiciu până nu deschizi submeniul. */
  .site-nav__list .current-menu-ancestor > .site-nav__parent,
  .site-nav__list .current-menu-parent > .site-nav__parent {
    color: var(--color-accent);
  }

  /* `[data-open]` e starea pusă de JS la clic; hover și focus-within acoperă
     mouse-ul și tastatura. */
  .site-nav__list li:hover > .sub-menu,
  .site-nav__list li:focus-within > .sub-menu,
  .site-nav__list .sub-menu[data-open="true"] {
    opacity: 1;
    visibility: visible;
  }

  /* Telefonul din interiorul panoului mobil; ascuns pe desktop. */
  .site-nav__extra {
    display: none;
  }

  /* 1300px și mai jos: meniul trece în panou. */
  @media (width <= 81.25rem) {
    .site-header__toggle {
      display: flex;
    }

    .site-header__phone--desktop {
      display: none;
    }

    .site-nav {
      position: fixed;
      inset: var(--header-h) 0 0;
      z-index: var(--z-nav);
      margin: 0;
      padding: var(--space-8) var(--wrap-gutter);
      background-color: var(--color-surface);
      color: var(--color-text);
      overflow-y: auto;
      overflow-x: clip;
      /*
       * Intră dinspre dreapta. Ascunderea din calea tastaturii și a cititoarelor
       * de ecran o face atributul `inert`, pus de JS — nu `visibility: hidden`.
       * Motivul e concret: `visibility` e tranziționat, iar un `focus()` apelat
       * imediat după deschidere prinde tranziția la progres 0, când elementul e
       * încă invizibil, deci focusul cade în gol. `inert` se aplică instantaneu.
       */
      translate: 100% 0;
      transition: translate var(--duration-base) var(--ease-out);
    }

    .site-nav[data-open="true"] {
      translate: 0 0;
    }

    .site-nav__list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }

    .site-nav__list a,
    .site-nav__list .site-nav__parent {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      width: 100%;
      padding-block: var(--space-3);
      /* Butoanele au padding orizontal implicit de la browser; fără reset,
         părinții cu submeniu ar fi indentați față de linkurile simple. */
      padding-inline: 0;
      font-size: var(--step-1);
      text-align: start;
      border-block-end: 1px solid var(--color-border);
    }

    .site-nav__chevron {
      display: block;
    }

    /*
     * Submeniul ca ecran nou, peste meniul principal.
     *
     * `inset: 0` se raportează la `.site-nav`, care e `fixed` — de aceea
     * `li`-ul trebuie să renunțe la `position: relative`, pus pentru
     * dropdown-ul de desktop, altfel panoul s-ar ancora în elementul de meniu.
     *
     * Se aplică doar după ce JS a construit butoanele de întoarcere
     * (`data-nav-enhanced`). Fără JS, submeniurile rămân desfășurate sub
     * părinte și accesibile — vezi regula de mai jos.
     */
    .site-nav__list li {
      position: static;
    }

    .site-nav[data-nav-enhanced="true"] .sub-menu {
      position: absolute;
      inset: 0;
      z-index: 1;
      padding: var(--space-8) var(--wrap-gutter);
      background-color: var(--color-surface);
      box-shadow: none;
      overflow-y: auto;
      overflow-x: clip;
      /* Anulează `opacity: 0; visibility: hidden` din regula de dropdown a
         desktopului. Aici panoul e ascuns prin deplasare și `inert`, nu prin
         vizibilitate — altfel `focus()` la deschidere nu ar avea pe ce să cadă. */
      opacity: 1;
      visibility: visible;
      translate: 100% 0;
      transition: translate var(--duration-base) var(--ease-out);
    }

    .site-nav[data-nav-enhanced="true"] .sub-menu[data-open="true"] {
      translate: 0 0;
    }

    /* Fallback fără JS: desfășurat sub părinte, ca înainte. */
    .site-nav:not([data-nav-enhanced]) .sub-menu {
      position: static;
      opacity: 1;
      visibility: visible;
      box-shadow: none;
      padding-inline-start: var(--space-4);
    }

    .site-nav__back-item {
      display: block;
    }

    .site-nav__back {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      width: 100%;
      padding-block: var(--space-3);
      margin-block-end: var(--space-2);
      font-size: var(--step-1);
      font-weight: 700;
      text-align: start;
      border-block-end: 1px solid var(--color-border);
      color: var(--color-accent);
    }

    .site-nav__list .phone_class > a,
    .site-nav__list .lang-item > a {
      display: inline-flex;
      /* `width: auto` anulează lățimea completă a elementelor de meniu: astea
         două sunt casete, nu rânduri de listă. */
      width: auto;
      margin-block-start: var(--space-6);
    }

    /*
     * Redeclarăm bordurile pe toate laturile, nu doar anulăm `border-block-end`.
     * Elementele de meniu primesc o linie de separare jos, iar un
     * `border-block-end: 0` ar fi șters și latura de jos a chenarului propriu al
     * telefonului — casetă cu trei laturi.
     */
    .site-nav__list .phone_class > a {
      border: 1px solid var(--color-accent);
    }

    .site-nav__list .lang-item > a {
      border: 0;
    }
  }

  /* blochează scroll-ul paginii cât timp panoul mobil e deschis */
  body:has(.site-nav[data-open="true"]) {
    overflow: hidden;
  }

  /* ---------- comutator de limbă ---------- */
  .lang__list {
    display: flex;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lang__link {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background-color: var(--neutral-400);
    color: var(--neutral-900);
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out);

    &:hover {
      background-color: var(--color-accent);
      color: var(--color-text-inverse);
    }
  }

  /* ---------- facade video ---------- */
  .yt {
    position: relative;
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--neutral-900);
    max-height: 510px;
  }

  .yt__trigger {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    cursor: pointer;
  }

  .yt__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--duration-base) var(--ease-out);
  }

  .yt__play {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    width: 68px;
    height: 48px;

    & svg {
      width: 100%;
      height: 100%;
    }
  }

  .yt__play-bg {
    fill: #212121;
    fill-opacity: 0.8;
    transition: fill-opacity var(--duration-fast) var(--ease-out);
  }

  .yt__play-arrow {
    fill: #fff;
  }

  .yt__trigger:hover .yt__play-bg,
  .yt__trigger:focus-visible .yt__play-bg {
    fill: #f00;
    fill-opacity: 1;
  }

  .yt__trigger:hover .yt__img {
    opacity: 0.85;
  }

  /* iframe-ul injectat la clic */
  .yt iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* ---------- bifa de acord din formulare ---------- */
  /*
   * Câmpul vine din inc/forms.php, deci apare în toate formularele temei.
   * Aici doar așezarea — pătrat la stânga, text la dreapta; culorile le pune
   * fiecare pagină, că fundalul diferă.
   */
  .form_consent .wpcf7-list-item {
    margin: 0;
  }

  .form_consent label {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-align: start;
    font-weight: 400;
    cursor: pointer;
  }

  .form_consent input[type="checkbox"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
  }

  /* ---------- butoane flotante ---------- */
  /* Valori măsurate pe tema veche: cercuri de 56px, padding 16, 8px între
     ele, 10px de la marginea dreaptă. */
  .fab {
    position: fixed;
    inset-inline-end: 10px;
    z-index: var(--z-header);
    display: flex;
    flex-direction: column;
    gap: 8px;
    bottom: 30px;
    right: 15px;
  }

  .fab__item {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 16px;
    border-radius: 50%;
    color: #fff;
    transition: filter var(--duration-fast) var(--ease-out);

    & svg {
      width: 100%;
      height: 100%;
      fill: currentcolor;
    }

    &:hover {
      filter: brightness(1.08);
    }
  }

  .fab__item--phone {
    background-color: #c43c3c;
  }

  .fab__item--whatsapp {
    background-color: #25d366;
  }

  .fab__item--messenger {
    background-color: #186ae6;
  }

  /* Eticheta textului apare doar pe mobil (vezi sections.css, ≤ 640px). */
  .fab__label {
    display: none;
  }

  /* ---------- footer ---------- */
  /*
   * Valorile sunt cele din tema veche, ca designul să rămână identic:
   * fundal #333, bara de jos #1D1D1D, titlu de 24px în auriu, linkuri albe cu
   * o liniuță de 15px în față.
   */
  .site-footer {
    background-color: var(--neutral-800);
    color: var(--color-text-inverse);
  }

  .site-footer__inner {
    display: grid;
    gap: var(--space-12);
    padding-block: 70px;
    /* Două coloane egale pe desktop; sub 56rem cad una sub alta. */
    grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  }

  .site-footer__logo {
    width: 220px;
    max-width: 100%;
    height: auto;
    margin-block-end: var(--space-10);
  }

  .site-footer__desc {
    max-width: 90%;
    margin-block-end: var(--space-10);
    font-size: 16px;
    line-height: 26px;
  }

  .socials {
    display: flex;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .button_send {
    position: relative;
  }

  .button_send .wpcf7-spinner {
    position: absolute!important;
    top: 14px;
    left: 15px;
  }

  .socials__icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .site-footer__links {
    padding-inline-start: 60px;
  }

  .site-footer__heading {
    margin-block-end: var(--space-8);
    font-size: 24px;
    font-weight: 500;
    color: var(--color-accent);
  }

  .site-footer__cols {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  }

  .site-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
      position: relative;
      padding-inline-start: 30px;
      margin-block-end: var(--space-6);
    }

    /* Liniuța din fața fiecărui link. E decorativă, deci pseudo-element, nu
       caracter în conținut — un cititor de ecran nu are ce citi din ea. */
    & li::before {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 50%;
      width: 15px;
      height: 1px;
      background-color: var(--color-accent);
      translate: 0 -50%;
    }

    & a {
      color: var(--color-text-inverse);
      text-decoration: none;
      transition: color var(--duration-base) var(--ease-out);
    }

    & a:hover {
      color: var(--color-accent);
    }
  }

  .site-footer__bottom {
    background-color: var(--neutral-900);
  }

  .site-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-3);
    font-size: 13px;
  }

  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;

    & a,
    & button {
      color: var(--color-text-inverse);
      font: inherit;
      text-decoration: none;
      transition: color var(--duration-base) var(--ease-out);
    }

    & a:hover,
    & button:hover {
      color: var(--color-accent);
    }
  }

  /* Pe ecrane înguste coloana din dreapta nu mai are de ce să fie indentată,
     iar bara de jos se centrează. */
  @media (width < 56rem) {
    .site-footer__links {
      padding-inline-start: 0;
    }

    .site-footer__bottom-inner {
      justify-content: center;
      text-align: center;
    }
  }
}