/**
 * module-states.css
 *
 * Tractament visual dels estats de mòdul: inactive i hidden.
 * L'estat s'aplica via data-module-state="inactive|hidden" sobre els elements
 * contenidor de cada punt de navegació.
 *
 * Comportament visual unificat amb data-missing="1" (fitxers .md absents):
 *   - prefix ✕ vermell  (::before)
 *   - text tatxat       (text-decoration: line-through)
 *
 * Els mòduls 'hidden' s'eliminen directament del DOM via PHP; les regles
 * d'aquí s'apliquen únicament a 'inactive'.
 */

/* ── Prefix ✕ compartit ──────────────────────────────────────────────────── */
/* S'afegeix al primer element de text visible de cada punt de navegació.    */

.nav-item[data-module-state="inactive"] .nav-trigger::before,
.mobile-nav-item[data-module-state="inactive"] summary::before,
.bottom-bar-item[data-module-state="inactive"] .bottom-bar-label::before,
.footer-link[data-module-state="inactive"]::before,
.content-nav-section[data-module-state="inactive"] .content-nav-section-link::before {
  content: "✖";
  display: inline-block; /* Evita que el text-decoration del pare travessi la ✖ */
  color: #d32f2f;
  font-weight: 900;
  margin-right: 5px;
  font-size: 0.8em;
  vertical-align: middle;
  text-decoration: none;
  transform: translateY(-2px); /* Centrat òptic amb el text */
}

/* ── Megamenu desktop ────────────────────────────────────────────────────── */

.nav-item[data-module-state="inactive"] .nav-trigger {
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ── Nav mòbil (drawer) ──────────────────────────────────────────────────── */

.mobile-nav-item[data-module-state="inactive"] summary.mobile-nav-link {
  /* Amb ::before (✖) hi ha 3 ítems flex; space-between centrava el text.
     flex-start + svg amb margin-left:auto replica l'alineació esquerra + chevron a la dreta. */
  justify-content: flex-start;
  text-align: left;
  text-decoration: line-through;
  cursor: not-allowed;
}

.mobile-nav-item[data-module-state="inactive"] summary.mobile-nav-link svg {
  margin-left: auto;
}

.mobile-nav-item[data-module-state="inactive"] .mobile-submenu {
  display: none;
}

/* ── Bottom bar ──────────────────────────────────────────────────────────── */

.bottom-bar-item[data-module-state="inactive"] {
  cursor: not-allowed;
}

.bottom-bar-item[data-module-state="inactive"] .bottom-bar-label {
  text-decoration: line-through;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer-link[data-module-state="inactive"] {
  text-decoration: line-through;
  pointer-events: none;
}

/* ── Content nav (sidebar seccions de contingut) ─────────────────────────── */

.content-nav-section[data-module-state="inactive"] .content-nav-section-link,
.content-nav-section[data-module-state="inactive"] .content-nav-toggle {
  text-decoration: line-through;
  pointer-events: none;
  cursor: default;
}

.content-nav-section[data-module-state="inactive"] .content-nav-items {
  display: none;
}

/* ── Subenllaços inactius (config/modules.php → sub[slug].state = 'inactive')
   Aplica automàticament des de partials/submodule-list.php quan un submòdul
   està marcat com a 'inactive'. Els 'hidden' no es renderitzen al DOM.
   Estètica alineada amb els mòduls de primer nivell 'inactive'. */

.megamenu-section  a[data-module-state="inactive"],
.mobile-submenu    a[data-module-state="inactive"],
.content-nav-items a[data-module-state="inactive"],
.subnav-panel-body a[data-module-state="inactive"] {
  text-decoration: line-through;
  cursor: not-allowed;
  pointer-events: none;
}

.megamenu-section  a[data-module-state="inactive"]::before,
.mobile-submenu    a[data-module-state="inactive"]::before,
.content-nav-items a[data-module-state="inactive"]::before,
.subnav-panel-body a[data-module-state="inactive"]::before {
  content: "✖";
  display: inline-block;
  color: #d32f2f;
  font-weight: 900;
  margin-right: 5px;
  font-size: 0.8em;
  vertical-align: middle;
  text-decoration: none;
  transform: translateY(-2px);
}

/* Hover coherent amb la resta d'opcions (pointer-events evita la navegació,
   però si algun contenidor el re-habilités, preservem l'estil visual). */
.megamenu-section a[data-module-state="inactive"]:hover {
  background: var(--mm-option-hover-bg);
  color: var(--ink);
}

.content-nav-items a[data-module-state="inactive"]:hover,
.mobile-submenu    a[data-module-state="inactive"]:hover,
.subnav-panel-body a[data-module-state="inactive"]:hover {
  background: var(--color-primary-solid-70);
  color: var(--card);
}