/* ============================================================
   MENÚ PRINCIPAL
   ============================================================ */

.main-nav {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--liturgical-gradient);
  color: var(--liturgical-text-color);
  transition:
    background-color 0.6s ease,
    background-image 0.6s ease,
    color 0.6s ease;
}

.main-nav,
.menu,
.menu *,
.submenu,
.submenu * {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 1rem;
  font-weight: 500;
}

/* Botón móvil */
.menu-toggle {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.8rem;
  padding: 1rem;
  cursor: pointer;
  display: none;
}

/* Menú principal */
.menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  transition: background-color 0.6s ease, color 0.6s ease;
}

.menu-item {
  position: relative;
}

/* ============================================================
   ELEMENTOS DEL MENÚ PRINCIPAL (alineación perfecta)
   ============================================================ */

.menu-item > a,
.menu-item > button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100%;
  padding: 1rem 1.2rem;
  line-height: 1.2rem !important;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--liturgical-text-color);
  text-decoration: none;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* ============================================================
   HOVER LITÚRGICO (MENÚ PRINCIPAL)
   ============================================================ */

.main-nav .menu-item > a:hover,
.main-nav .menu-item > button:hover {
  background-color: var(--liturgical-color-soft) !important;
  color: var(--liturgical-text-color) !important;
}

/* ============================================================
   SUBMENÚS
   ============================================================ */

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: white; /* Fondo neutro */
  border: 1px solid #cce0ff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .25s ease,
    background-color 0.6s ease,
    color 0.6s ease;
  z-index: 9999;
}

.submenu-item {
  position: relative;
}

.submenu-item > .submenu {
  top: 0;
  left: 100%;
}

/* ============================================================
   ELEMENTOS DE SUBMENÚ (corregido Sostenimiento)
   ============================================================ */

.submenu a,
.submenu button {
  display: block;
  width: 100%;
  padding: .8rem 1rem;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #002b55;
  text-align: left;
  text-decoration: none;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* HOVER LITÚRGICO EN SUBMENÚS */
.submenu a:hover,
.submenu button:hover {
  background-color: var(--liturgical-color-soft) !important;
  color: var(--liturgical-text-color) !important;
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

.menu-item > a:focus,
.menu-item > button:focus,
.submenu a:focus,
.submenu button:focus {
  outline: 3px solid #d4af37;
  outline-offset: 3px;
}

/* ============================================================
   ESCRITORIO
   ============================================================ */

@media (min-width: 769px) {
  .menu-item:hover > .submenu,
  .submenu-item:hover > .submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .menu-toggle {
    display: none !important;
  }
}

/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 768px) {
  .menu {
    display: none;
    flex-direction: column;
  }

  .menu.show {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }

  .submenu {
    position: static;
    border: none;
    opacity: 0;
    visibility: hidden;
  }

  .submenu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .submenu-toggle {
    display: block;
    padding: 1rem 1.2rem;
    color: inherit;
    background: none;
    border: none;
    text-align: left;
  }

  .submenu a {
    background: #f5f8ff;
    color: #002b55;
  }
}

/* ============================================================
   MODO OSCURO
   ============================================================ */

.dark-mode .main-nav {
  background: var(--liturgical-gradient);
  color: var(--liturgical-text-color);
}

.dark-mode .submenu {
  background: #1a2a3d;
  border-color: #3a4458;
}

.dark-mode .submenu a,
.dark-mode .submenu button {
  color: #d8d5cf;
}

/* ============================================================
   MODO SILENCIO (TRIDUO) — SUBMENÚS ACCESIBLES
   ============================================================ */

body.modo-silencio .submenu {
  background: #2b2b2b !important; /* fondo oscuro sobrio */
  border-color: #444 !important;
}

body.modo-silencio .submenu a,
body.modo-silencio .submenu button {
  color: #f0f0f0 !important; /* texto claro accesible */
  background: transparent !important;
}

body.modo-silencio .submenu a:hover,
body.modo-silencio .submenu button:hover {
  background: #3a3a3a !important; /* hover accesible */
  color: #ffffff !important;
}

/* ============================================================
   MODO FIESTA MAYOR (Pascua, Navidad, Pentecostés)
   ============================================================ */

body.modo-fiesta .main-nav {
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.4);
}

body.modo-fiesta .menu-item > a:hover,
body.modo-fiesta .menu-item > button:hover {
  background-color: var(--liturgical-color-soft) !important;
  color: var(--liturgical-text-color) !important;
}

/* ============================================================
   HOVER LITÚRGICO MEJORADO PARA SUBMENÚS (MODO CLARO)
   Contraste AA/AAA garantizado
   ============================================================ */

/* ORDINARIO */
body.ordinario .submenu a:hover,
body.ordinario .submenu button:hover {
  background-color: rgba(0, 107, 60, 0.20) !important; /* verde litúrgico más visible */
  color: var(--liturgical-text-color) !important;
}

/* ADVIENTO */
body.adviento .submenu a:hover,
body.adviento .submenu button:hover {
  background-color: rgba(75, 0, 130, 0.20) !important; /* morado litúrgico más visible */
  color: var(--liturgical-text-color) !important;
}

/* CUARESMA */
body.cuaresma .submenu a:hover,
body.cuaresma .submenu button:hover {
  background-color: rgba(90, 0, 90, 0.20) !important; /* morado profundo más visible */
  color: var(--liturgical-text-color) !important;
}
/* ============================================================
   HOVER UNIFICADO — MODO OSCURO
   ============================================================ */

:root {
  --liturgical-hover-dark: rgba(255,255,255,0.08);
}

.dark-mode .submenu a:hover,
.dark-mode .submenu button:hover,
.dark-mode .menu-item > a:hover,
.dark-mode .menu-item > button:hover {
  background-color: var(--liturgical-hover-dark) !important;
  color: var(--liturgical-text-color) !important;
}

/* ============================================================
   HOVER UNIFICADO — OVERLAYS DORADOS
   ============================================================ */

body.overlay-corpus,
body.overlay-cristo-rey,
body.overlay-todos-santos {
  --liturgical-hover-gold: rgba(0,0,0,0.08);
}

body.overlay-corpus .submenu a:hover,
body.overlay-cristo-rey .submenu a:hover,
body.overlay-todos-santos .submenu a:hover,
body.overlay-corpus .menu-item > a:hover,
body.overlay-cristo-rey .menu-item > a:hover,
body.overlay-todos-santos .menu-item > a:hover {
  background-color: var(--liturgical-hover-gold) !important;
  color: var(--liturgical-text-color) !important;
}