/*
 Theme Name:   EV Map Child
 Theme URI:    https://autosrodando.com.co
 Description:  Tema hijo para EV Charging Map Colombia. Basado en Twenty Twenty-Four.
 Author:       Autosrodando
 Template:     twentytwentyfour
 Version:      2.1.0
 Text Domain:  ev-map-child
*/

/* ══════════════════════════════════════════════════════
   1. PÁGINA DEL MAPA — Full width completo
   Aplica SOLO a la página /mapa-carga-ev/
   ══════════════════════════════════════════════════════ */

/* Ocultar header y footer en la página del mapa */
.page-id-mapa-carga-ev .wp-block-template-part,
.page-id-mapa-carga-ev header,
.page-id-mapa-carga-ev footer,
.page-id-mapa-carga-ev .site-header,
.page-id-mapa-carga-ev .site-footer,
.page-id-mapa-carga-ev .wp-block-post-title {
  display: none !important;
}

/* Eliminar todos los márgenes y padding del body en la página del mapa */
.page-id-mapa-carga-ev,
.page-id-mapa-carga-ev body {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Eliminar el max-width del contenedor principal de WordPress */
.page-id-mapa-carga-ev .wp-site-blocks,
.page-id-mapa-carga-ev .wp-site-blocks > *,
.page-id-mapa-carga-ev main,
.page-id-mapa-carga-ev .wp-block-group,
.page-id-mapa-carga-ev .wp-block-post-content,
.page-id-mapa-carga-ev .entry-content,
.page-id-mapa-carga-ev .entry-content > *,
.page-id-mapa-carga-ev article,
.page-id-mapa-carga-ev .post-content,
.page-id-mapa-carga-ev .page-content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* El título H1 "Mapa de Carga EV" — ocultarlo ya que el mapa tiene su propio header */
.page-id-mapa-carga-ev h1.wp-block-post-title,
.page-id-mapa-carga-ev .entry-header,
.page-id-mapa-carga-ev .page-header {
  display: none !important;
}

/* Forzar el mapa a ocupar TODO el viewport */
.page-id-mapa-carga-ev #ev-map-root {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9000 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Quitar admin bar padding cuando hay barra de admin de WP */
.page-id-mapa-carga-ev.admin-bar #ev-map-root {
  top: 32px !important;
  height: calc(100vh - 32px) !important;
  height: calc(100dvh - 32px) !important;
}
@media screen and (max-width: 782px) {
  .page-id-mapa-carga-ev.admin-bar #ev-map-root {
    top: 46px !important;
    height: calc(100vh - 46px) !important;
  }
}

/* ══════════════════════════════════════════════════════
   ALTERNATIVA: si el tema usa slug en lugar de ID
   .page-template usa el nombre de plantilla
   ══════════════════════════════════════════════════════ */
body[class*="page-id-"] .wp-block-post-content:has(#ev-map-root),
body[class*="page-id-"] article:has(#ev-map-root) {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Cualquier página que tenga el mapa EV — por si cambia el ID */
body:has(#ev-map-root) .wp-site-blocks,
body:has(#ev-map-root) main,
body:has(#ev-map-root) .wp-block-post-content,
body:has(#ev-map-root) .entry-content,
body:has(#ev-map-root) article {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body:has(#ev-map-root) header,
body:has(#ev-map-root) footer,
body:has(#ev-map-root) .site-header,
body:has(#ev-map-root) .site-footer,
body:has(#ev-map-root) .wp-block-template-part[class*="header"],
body:has(#ev-map-root) .wp-block-template-part[class*="footer"] {
  display: none !important;
}

body:has(#ev-map-root) {
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(#ev-map-root) #ev-map-root {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9000 !important;
}

/* ══════════════════════════════════════════════════════
   2. RESTO DEL SITIO — Estilos globales
   ══════════════════════════════════════════════════════ */
a { color: #3dba6f; }
a:hover { color: #35a862; }