/**
 * DDLA · Mystika 0.15.3
 * Final mobile overlay and Sanctum stacking integration.
 */

@media (max-width: 1024px) {
  :root {
    --ddla-mobile-topbar-height: 54px;
    --ddla-mobile-topbar-total-height: var(--ddla-mobile-topbar-height);
    --ddla-mobile-admin-offset: 0px;
  }

  /* WordPress administration is intentionally desktop-only in this project. */
  html {
    margin-top: 0 !important;
  }

  #wpadminbar {
    display: none !important;
  }

  body,
  body.admin-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.ddla-has-mobile-nav .ddla-site,
  body.admin-bar.ddla-has-mobile-nav .ddla-site {
    padding-top: 0 !important;
  }

  /* Raise the complete Mystika navigation stacking context above plugins. */
  .ddla-site-header {
    z-index: 1000000 !important;
    pointer-events: none;
  }

  .ddla-mobile-topbar,
  body.admin-bar .ddla-mobile-topbar {
    position: fixed !important;
    inset: 0 0 auto !important;
    z-index: 1000002 !important;
    height: var(--ddla-mobile-topbar-height) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none;
  }

  .ddla-mobile-topbar__inner {
    height: var(--ddla-mobile-topbar-height) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    pointer-events: none;
  }

  .ddla-mobile-topbar__left,
  .ddla-mobile-topbar__brand,
  .ddla-mobile-topbar__right,
  .ddla-mobile-topbar__user,
  .ddla-mobile-topbar__notifications {
    pointer-events: auto;
  }

  .ddla-mobile-topbar .ddla-language-host,
  .ddla-mobile-topbar .ddla-language {
    display: none !important;
  }

  .ddla-mobile-nav {
    z-index: 1000001 !important;
    pointer-events: auto;
  }

  /* Sanctum stays inside the visible area and below Mystika navigation. */
  .ddla-sanctum__nav,
  body .ddla-sanctum__nav,
  body.ddla-sanctum .ddla-sanctum__nav {
    top: var(--ddla-mobile-topbar-height) !important;
    bottom: calc(var(--ddla-mobile-nav-height, 76px) + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    max-height: calc(
      100dvh
      - var(--ddla-mobile-topbar-height)
      - var(--ddla-mobile-nav-height, 76px)
      - env(safe-area-inset-bottom, 0px)
    ) !important;
    z-index: 20 !important;
    overscroll-behavior: contain;
  }
}

@media (max-width: 767px) {
  /* Sanctum actions must remain compact and readable on narrow screens. */
  .ddla-sanctum .ddla-button.ddla-sanctum__button {
    --ddla-button-min-width: 0px;
    --ddla-button-padding-x: 1.15rem;
    --ddla-button-padding-y: 0.75rem;
    --ddla-button-gap: 0.55rem;
    --ddla-button-icon-size: 1.15rem;
    --ddla-button-cut-local: 8px;
    justify-self: center;
    width: min(100%, 310px) !important;
    min-width: 0 !important;
    min-height: 44px;
    margin-inline: auto !important;
    padding: 1px !important;
    font-size: clamp(0.72rem, 3.3vw, 0.88rem);
    letter-spacing: 0.1em;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.38));
  }

  .ddla-sanctum .ddla-button.ddla-sanctum__button:not(:has(.ddla-button__inner)) {
    padding: 0.78rem 1.15rem !important;
    background:
      linear-gradient(rgba(4, 9, 17, 0.96), rgba(4, 9, 17, 0.96)) padding-box,
      linear-gradient(135deg, rgba(244, 223, 171, 0.9), rgba(162, 114, 17, 0.88)) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
  }

  .ddla-sanctum .ddla-button.ddla-sanctum__button .ddla-button__inner {
    width: 100%;
    min-width: 0 !important;
    min-height: 42px;
    padding: 0.72rem 1rem;
  }

  .ddla-sanctum .ddla-button.ddla-sanctum__button .ddla-button__inner::before {
    inset: 5px;
  }

  .ddla-sanctum .ddla-button.ddla-sanctum__button .ddla-button__icon,
  .ddla-sanctum .ddla-button.ddla-sanctum__button i,
  .ddla-sanctum .ddla-button.ddla-sanctum__button svg {
    flex: 0 0 auto;
    max-width: 1.15rem;
    max-height: 1.15rem;
    font-size: 1.05rem;
  }
}

/* =========================================================
   1.0 · Lectura móvil y navegación canónica de producción
   ========================================================= */
@media (max-width: 1020px) {
  /* Los cajones del artículo son interfaces modales y deben quedar por encima
     de la cabecera y del menú inferior global de Mystika. */
  body.single-post .ddla-single-left,
  body.single-post .ddla-single-right {
    z-index: 1000010 !important;
  }

  body.single-post .ddla-single-drawer-backdrop {
    z-index: 1000008 !important;
  }

  body.single-post.ddla-single-drawer-open .ddla-site-header,
  body.single-post.ddla-single-drawer-open .ddla-mobile-nav {
    pointer-events: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1020px) {
  /* En tablet compacta los accesos siguen en flujo normal; se separan de la
     cabecera fija para que ningún control quede cubierto. */
  body.single-post .ddla-single-mobile-actions {
    margin-top: calc(var(--ddla-mobile-topbar-height, 54px) + 0.75rem) !important;
  }
}

@media (max-width: 767px) {
  body.single-post {
    --ddla-single-mobile-actions-height: 55px;
  }

  /* La barra superior es transparente pero contiene logo, campana y avatar
     interactivos. El índice y las herramientas se fijan justo debajo. */
  body.single-post .ddla-single-mobile-actions,
  body.admin-bar.single-post .ddla-single-mobile-actions {
    top: var(--ddla-mobile-topbar-height, 54px) !important;
    z-index: 1000000 !important;
  }

  body.single-post .ddla-single-reading-bar,
  body.single-post .ddla-single-reading-bar.is-floating,
  body.admin-bar.single-post .ddla-single-reading-bar,
  body.admin-bar.single-post .ddla-single-reading-bar.is-floating {
    top: calc(
      var(--ddla-mobile-topbar-height, 54px)
      + var(--ddla-single-mobile-actions-height, 55px)
    ) !important;
  }

  /* Una vez abiertos, índice y herramientas cubren por completo la navegación
     global; el botón de cierre vuelve a ser siempre pulsable. */
  body.single-post .ddla-single-left.is-open,
  body.single-post .ddla-single-right.is-open {
    z-index: 1000010 !important;
  }
}


/* =========================================================
   1.0 · Cierre accesible de los cajones del artículo
   Mantiene la versión de producción sin alterar su numeración.
   ========================================================= */
@media (max-width: 1020px) {
  /* .ddla-single-page usa isolation:isolate; sin elevar este contexto,
     sus cajones no pueden superar al avatar de la cabecera global aunque
     dispongan de un z-index mayor. Solo se eleva mientras existe un modal. */
  body.single-post.ddla-single-drawer-open .ddla-single-page {
    z-index: 1000009 !important;
  }

  /* El cajón abierto debe comportarse como la única interfaz activa. */
  body.single-post.ddla-single-drawer-open .ddla-site-header,
  body.single-post.ddla-single-drawer-open .ddla-mobile-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* La franja de título y su cierre permanecen por encima del contenido
     desplazable, incluidas imágenes, avatares y widgets de terceros. */
  body.single-post.ddla-single-drawer-open .ddla-single-drawer-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000012 !important;
    isolation: isolate;
  }

  body.single-post.ddla-single-drawer-open .ddla-single-drawer-close {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
}


/* =========================================================
   1.0 · Corrección definitiva de cajones y navegación AMEQC
   La numeración pública del tema permanece en 1.0.
   ========================================================= */
@media (max-width: 1020px) {
  body.single-post.ddla-single-drawer-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  /* Los cajones son la capa superior absoluta de la interfaz. */
  body.single-post .ddla-single-left.is-open,
  body.single-post .ddla-single-right.is-open {
    z-index: 2147483000 !important;
  }

  body.single-post .ddla-single-drawer-backdrop:not([hidden]) {
    z-index: 2147482990 !important;
  }

  /* El cierre permanece a la derecha. La cabecera y el avatar global se
     retiran mientras el cajón está abierto, por lo que esta posición queda
     libre y plenamente interactiva. La primera columna vacía conserva el
     título centrado de verdad. */
  body.single-post.ddla-single-drawer-open .ddla-single-drawer-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 2147483001 !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 0.45rem !important;
    min-height: 60px !important;
    padding: max(0.55rem, env(safe-area-inset-top, 0px)) 0.75rem 0.55rem !important;
    background: rgba(3, 8, 15, 0.995) !important;
    isolation: isolate;
  }

  body.single-post.ddla-single-drawer-open .ddla-single-drawer-topbar > span {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0;
    overflow: hidden;
    text-align: center !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.single-post.ddla-single-drawer-open .ddla-single-drawer-close,
  body.single-post.ddla-single-drawer-open .ddla-single-left .ddla-single-drawer-close {
    position: relative !important;
    inset: auto !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    z-index: 2147483002 !important;
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(216, 183, 106, 0.42) !important;
    color: var(--ddla-gold-light, #f0d99c) !important;
    background: #07101c !important;
    box-shadow: 0 0 0 1px rgba(2, 6, 12, 0.9), 0 8px 22px rgba(0, 0, 0, 0.42) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  body.single-post.ddla-single-drawer-open .ddla-single-drawer-close:hover,
  body.single-post.ddla-single-drawer-open .ddla-single-drawer-close:focus-visible {
    border-color: var(--ddla-blue-light, #9dbaff) !important;
    color: var(--ddla-blue-light, #9dbaff) !important;
  }
}