/*
Theme Name: Astra Child (CIV Dark Gold)
Theme URI: https://tudominio.com/
Description: Tema hijo de Astra con modo oscuro y acentos dorados.
Author: DYPSEO
Author URI: https://tudominio.com/
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* ====== CIV 7 THEME: Dark + Gold ====== */

/* =========================
   NAV GLOBAL (wp-block-navigation)
   ========================= */

/* Variables base */
:root{
  --civ-gold: #d4af37;
  --civ-gold-2: #f6d47a;
  --civ-text: #e8e8e8;
}

/* 1) Layout/centrado */
.wp-block-navigation{
  display:flex !important;
  justify-content:center !important;
  align-items:center;
  gap: clamp(.8rem, 2vw, 1.5rem);
  margin: 1rem auto 0;
  width: 100%;
  max-width: min(1100px, 92vw);
}

/* 2) Estilo base de enlaces */
.wp-block-navigation a,
.wp-block-navigation__submenu-container a{
  font-family: "Cinzel", serif !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  color: var(--civ-text) !important;
  text-decoration: none !important;
  position: relative;
  padding: .35rem .2rem;
  transition: color .2s ease;
}

/* 3) Subrayado dorado en hover / activo */
.wp-block-navigation a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg, transparent, var(--civ-gold-2), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}
.wp-block-navigation a:hover{ color: var(--civ-gold-2) !important; }
.wp-block-navigation .wp-block-navigation-item--current-menu-item > a::after,
.wp-block-navigation a:hover::after{
  transform: scaleX(1);
}

/* 4) Submenús (dropdown) */
.wp-block-navigation__submenu-container{
  background: rgba(13,15,18,.92) !important;
  border: 1px solid rgba(212,175,55,.35) !important;
  border-radius: 14px;
  padding: .6rem .75rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.wp-block-navigation__submenu-container a:hover{
  color: var(--civ-gold-2) !important;
}

/* 5) Menú responsive (offcanvas del bloque) */
.wp-block-navigation__responsive-container{
  background: rgba(13,15,18,.95) !important;
}
.wp-block-navigation__responsive-dialog{
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 18px;
  margin: 10px;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{
  color: var(--civ-text) !important;
}

/* 6) Variante FLOtANTE (activa por defecto) */
.wp-block-navigation{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: .25rem 0;
}

.wp-block-navigation{
  padding: .65rem 1rem !important;
  border: 1px solid rgba(212,175,55,.45) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(4px);
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.18)) !important;
  box-shadow:
    0 6px 18px rgba(212,175,55,.18),
    inset 0 0 0.5px rgba(246,212,122,.35);
}


/* 8) Por si Astra intenta pisar colores en el header */
.site-header .wp-block-navigation a{
  color: var(--civ-text) !important;
}

.site-header, .main-header-bar, .site-footer,
.site-content, .site-main, .ast-container, .content-area,
.ast-article-post, .entry-content,
.ast-separate-container .ast-article-post,
.ast-separate-container .site-content,
.ast-page-builder-template .site-content{
  background: transparent !important;
}

/* ============================================
   CIV NAV: tipografía + color definitivo
   ============================================ */

/* Fuente dorada para todo el bloque navegación */
.site-header .wp-block-navigation,
.site-header .wp-block-navigation a,
.site-header .wp-block-navigation__submenu-container a,
.wp-block-navigation,
.wp-block-navigation a,
.wp-block-navigation__submenu-container a {
  font-family: "Cinzel", serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: none !important;
  font-size: clamp(.95rem, 1.2vw, 1.05rem) !important;
  color: #f6d47a !important; /* dorado principal */
}

/* Hover y activo */
.site-header .wp-block-navigation a:hover,
.wp-block-navigation a:hover {
  color: #fff8dc !important; /* dorado más claro */
}

/* Submenús */
.site-header .wp-block-navigation__submenu-container a,
.wp-block-navigation__submenu-container a {
  font-family: "Cinzel", serif !important;
  font-weight: 600 !important;
  color: #f6d47a !important;
}

/* Icono hamburguesa */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: #f6d47a !important;
}

/* Ajuste de foco / accesibilidad */
.wp-block-navigation a:focus-visible {
  outline: 2px solid #f6d47a !important;
  outline-offset: 3px;
}

/* 1) Fondo global forzado */
html, body{
  background: url('https://4xcivhub.com/wp-content/uploads/2025/10/Fondo-Web.webp') center center / cover no-repeat fixed !important;
}
body{ margin:0; overflow-x:hidden; }

/* 2) Todo lo que suele tapar el body en Astra → transparente */
.site, .site-header, .main-header-bar, .site-footer,
.site-content, .site-main, .ast-container, .content-area,
.ast-article-post, .entry-content,
.ast-separate-container .ast-article-post,
.ast-separate-container .site-content,
.ast-page-builder-template .site-content,
.ast-plain-container .site-content{
  background: transparent !important;
  box-shadow: none !important;
}

/* 3) Si Astra metió una imagen de fondo a nivel de body (clase custom-background) */
body.custom-background{
  background: none !important; /* anula imagen del customizer */
}

/* 4) HERO global: cero fondos heredados, solo nuestro logo */
.civ-global-hero{
  background: none !important;
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}
.civ-global-hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  z-index:1;
}
.civ-global-logo{
  position: relative; z-index: 2;
  width: min(92vw, 1100px); height: auto;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.55));
  animation: civPulse 10s ease-in-out infinite;
}
@keyframes civPulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
@media (max-width:1024px){ .civ-global-logo{ animation:none; } }
@media (prefers-reduced-motion:reduce){ .civ-global-logo{ animation:none !important; } }


@media (max-width: 960px){

  /* Oculta el contenedor entero */
  nav.wp-block-navigation,
  .wp-block-navigation,
  .wp-block-navigation__responsive-container,
  .wp-block-navigation__responsive-container.is-menu-open,
  .wp-block-navigation__responsive-container-content,
  .wp-block-navigation__container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}