/* =============== MEGAMENU (nivel 1 + interioare) =============== */

/* Panoul megamenu – centrat sub header, fără “gol” */

.header-logo .primary-menu-header nav > ul > li > .sub-menu {
  position: absolute !important;

  top: calc(100% - 1px) !important;

  left: 50% !important;

  transform: translateX(-50%) !important;

  width: min(1400px, calc(100vw - 2.5rem)) !important;

  max-width: 1400px !important;

  background: #fff;

  border-radius: 0 0 18px 18px;

  border-top: 3px solid var(--color-primary); /* default – se suprascrie per categorie */

  box-shadow: 0 20px 40px rgba(6, 59, 103, 0.08);

  padding: 3rem 6rem 3rem !important;

  min-height: 500px !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  z-index: 1000;

  column-count: 1;
  column-gap: 3.5rem;
  column-fill: balance;
}

/* Afișare */

.header-logo .primary-menu-header nav > ul > li:hover > .sub-menu,
.header-logo .primary-menu-header nav > ul > li:focus-within > .sub-menu,
.header-logo .primary-menu-header nav > ul > li > .sub-menu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Linkuri din panou (nivel 2) */

.header-logo .primary-menu-header nav > ul > li > .sub-menu > li {
  list-style: none;
  break-inside: avoid;
  margin: 0 0 0.35rem;
  position: relative;
  z-index: 1;

  width: 100%;

  float: left;
}

.header-logo .primary-menu-header nav > ul > li > .sub-menu > li ul {
  width: 100%;

  float: left;
}

.header-logo .primary-menu-header nav > ul > li > .sub-menu > li > a {
  display: block;
  position: relative;
  padding: 0.35rem 0 0.35rem 2rem;

  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--color-text);
  text-decoration: none;

  transition: color 0.1s ease, transform 0.1s ease;

  width: auto;

  float: left;
}

.header-logo .primary-menu-header nav > ul > li > .sub-menu > li > a::before {
  content: "keyboard_arrow_right";
  font-family: "Material Symbols Outlined";

  font-size: 1.6rem;
  color: rgb(0 119 255 / 76%);
  position: absolute;
  left: 0;
  top: 0.45rem;
  line-height: 1;
}

.header-logo .primary-menu-header nav > ul > li > .sub-menu > li > a:hover {
  color: var(--color-primary);
  transform: translateX(2px);
}

/* Sub-submeniuri (afișate ca listă internă) */

.header-logo .primary-menu-header nav > ul > li > .sub-menu > li > .sub-menu {
  position: static !important;
  display: block !important;
  opacity: 1 !important;

  transform: none !important;
  pointer-events: auto !important;

  background: none !important;
  box-shadow: none !important;
  border: 0 !important;

  margin: 8px 0 12px 22px !important;
  padding: 0 !important;
  list-style: none;
}

.header-logo
  .primary-menu-header
  nav
  > ul
  > li
  > .sub-menu
  > li.menu-item-has-children
  > a::after {
  content: none !important;
}

.header-logo
  .primary-menu-header
  nav
  > ul
  > li
  > .sub-menu
  > li
  > .sub-menu
  > li
  > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-size: 1.3rem;
  color: var(--color-text, #063b67);
  text-decoration: none;

  transition: color 0.12s ease, transform 0.12s ease, background 0.12s ease;
}

.header-logo
  .primary-menu-header
  nav
  > ul
  > li
  > .sub-menu
  > li
  > .sub-menu
  > li
  > a::before {
  content: "chevron_right";
  font-family: "Material Symbols Outlined";
  font-size: 16px;
  color: var(--color-secondary);
}

.header-logo
  .primary-menu-header
  nav
  > ul
  > li
  > .sub-menu
  > li
  > .sub-menu
  > li
  > a:hover {
  color: var(--color-primary);
  transform: translateX(2px);
  background: rgba(0, 119, 255, 0.04);
  border-radius: 6px;
}

/* Icon decorativ mare (fundal) – per categorie */

.header-logo .primary-menu-header nav > ul > li > .sub-menu::before {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: 0.25rem;

  font-family: "Material Symbols Outlined";
  font-size: 40rem;
  line-height: 1;

  opacity: 0.1;
  font-weight: 200;
  pointer-events: none;
  z-index: 0;
}

/* 2 → Despre spital */

.header-logo .primary-menu-header nav > ul > li:nth-child(2) > .sub-menu {
  border-top-color: var(--tone-despre) !important;
}

.header-logo
  .primary-menu-header
  nav
  > ul
  > li:nth-child(2)
  > .sub-menu::before {
  content: "home_work";
  color: var(--tone-despre);
}

/* 3 → Management */

.header-logo .primary-menu-header nav > ul > li:nth-child(3) > .sub-menu {
  border-top-color: var(--tone-management) !important;
}

.header-logo
  .primary-menu-header
  nav
  > ul
  > li:nth-child(3)
  > .sub-menu::before {
  content: "folder_managed";
  color: var(--tone-management);
}

/* 4 → Pagina Pacientului / Informații pacienți */

.header-logo .primary-menu-header nav > ul > li:nth-child(4) > .sub-menu {
  border-top-color: var(--tone-informatii) !important;
}

.header-logo
  .primary-menu-header
  nav
  > ul
  > li:nth-child(4)
  > .sub-menu::before {
  content: "medical_information";
  color: var(--tone-informatii);
}

/* 5 → Activitatea medicală */

.header-logo .primary-menu-header nav > ul > li:nth-child(5) > .sub-menu {
  border-top-color: var(--tone-activitate) !important;
}

.header-logo
  .primary-menu-header
  nav
  > ul
  > li:nth-child(5)
  > .sub-menu::before {
  content: "medical_services";
  color: var(--tone-activitate);
}

/* Responsive – megamenu full-width pe mobil/tabletă */

@media (max-width: 1200px) {
  .header-logo .primary-menu-header nav > ul > li > .sub-menu {
    width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 1024px) {
  .header-logo .primary-menu-header nav > ul > li > .sub-menu {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;

    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    padding: 1rem 0 1.25rem !important;
    min-height: 0 !important;
  }
}

/* ===== Efect de deschidere megamenu ===== */

/* starea inițială (ascuns) */

.header-logo .primary-menu-header nav > ul > li > .sub-menu {
  opacity: 0;

  visibility: hidden;

  transform: translate(-50%, 15px); /* deplasare în jos + centrat */

  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.25, 1, 0.3, 1),
    visibility 0s linear 0.25s; /* întârziere pt. ascundere completă */
}

/* când se activează (hover sau focus-within) */

.header-logo .primary-menu-header nav > ul > li:hover > .sub-menu,
.header-logo .primary-menu-header nav > ul > li:focus-within > .sub-menu,
.header-logo .primary-menu-header nav > ul > li > .sub-menu:hover {
  opacity: 1;

  visibility: visible;

  transform: translate(-50%, 0); /* revine la poziția normală */

  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.25, 1, 0.3, 1),
    visibility 0s linear 0s; /* fără întârziere la afișare */
}

/* ===========================================================

   MEGAMENU – reset & styling pentru TOATE nivelurile interioare

   (lipit DUPĂ CSS-ul tău actual de megamenu)

   =========================================================== */

/* 1) Reset general pentru ORICE listă din megamenu (scoate bullets & indent implicit) */

.header-logo .primary-menu-header nav > ul > li > .sub-menu ul {
  list-style: none;

  margin: 0;

  padding: 0;
}

/* 2) Previne ruperea elementelor între coloane, pentru toate <li> pe orice nivel */

.header-logo .primary-menu-header nav > ul > li > .sub-menu li {
  break-inside: avoid;
}

/* 3) Indent logic al listelor pe niveluri (nivel 3, 4, 5…) */

.header-logo .primary-menu-header nav > ul > li > .sub-menu > li > .sub-menu {
  margin: 8px 0 12px 22px !important; /* nivel 3 (ai deja asta) */
}

/* 4) Linkuri N3+ – stil unitar (ușor mai mic decât nivelul 2), cu săgeată & hover */

/* — nivel 3 (ai deja, îl mențin pentru claritate) */

.header-logo
  .primary-menu-header
  nav
  > ul
  > li
  > .sub-menu
  > li
  > .sub-menu
  > li
  > a {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 1.3rem;

  line-height: 1.35;

  color: var(--color-text, #063b67);

  text-decoration: none;

  transition: color 0.12s ease, transform 0.12s ease, background 0.12s ease;
}

.header-logo
  .primary-menu-header
  nav
  > ul
  > li
  > .sub-menu
  > li
  > .sub-menu
  > li
  > a::before {
  content: "chevron_right";

  font-family: "Material Symbols Outlined";

  font-size: 16px;

  color: var(--color-secondary, #00c2ff);

  line-height: 1;
}

.header-logo
  .primary-menu-header
  nav
  > ul
  > li
  > .sub-menu
  > li
  > .sub-menu
  > li
  > a:hover {
  color: var(--color-primary, #0077ff);

  transform: translateX(2px);

  background: rgba(0, 119, 255, 0.04);

  border-radius: 6px;
}

/* — nivel 4+ (orice sub-sub-submeniu și mai în jos) */

.header-logo
  .primary-menu-header
  nav
  > ul
  > li
  > .sub-menu
  li
  .sub-menu
  li
  .sub-menu
  li
  > a,
.header-logo
  .primary-menu-header
  nav
  > ul
  > li
  > .sub-menu
  li
  .sub-menu
  li
  .sub-menu
  li
  .sub-menu
  li
  > a {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 1.5rem; /* puțin mai mic decât nivelul 3 */

  line-height: 1.35;

  color: var(--color-text, #063b67);

  text-decoration: none;

  padding: 4px 0; /* compact */

  transition: color 0.12s ease, transform 0.12s ease, background 0.12s ease;
}

.header-logo
  .primary-menu-header
  nav
  > ul
  > li
  > .sub-menu
  li
  .sub-menu
  li
  .sub-menu
  li
  > a::before,
.header-logo
  .primary-menu-header
  nav
  > ul
  > li
  > .sub-menu
  li
  .sub-menu
  li
  .sub-menu
  li
  .sub-menu
  li
  > a::before {
  content: "chevron_right";

  font-family: "Material Symbols Outlined";

  font-size: 15px;

  color: var(--color-secondary, #00c2ff);

  line-height: 1;
}

.header-logo
  .primary-menu-header
  nav
  > ul
  > li
  > .sub-menu
  li
  .sub-menu
  li
  .sub-menu
  li
  > a:hover,
.header-logo
  .primary-menu-header
  nav
  > ul
  > li
  > .sub-menu
  li
  .sub-menu
  li
  .sub-menu
  li
  .sub-menu
  li
  > a:hover {
  color: var(--color-primary, #0077ff);

  transform: translateX(2px);

  background: rgba(0, 119, 255, 0.04);

  border-radius: 6px;
}

/* 5) Dacă un item are copii, NU vrem “+”/indicator suplimentar pe ancoră (păstrăm săgeata din ::before) */

.header-logo
  .primary-menu-header
  nav
  > ul
  > li
  > .sub-menu
  li.menu-item-has-children
  > a::after {
  content: none !important;
}