/*! WIO Overrides (2025-09-09)
 * - Baja H1 hero
 * - Oculta párrafo bajo H1
 * - Centra/agranda CTA
 * - Oculta 3 KPI
 * - Ajusta logo en header (responsive)
 */

/* H1 un poco más abajo */
section.hero h1, .hero h1, .hero-copy h1 { margin-top: clamp(8px, 2vh, 24px) !important; }

/* Ocultar primer párrafo tras H1 en hero (sin borrar) */
.hero-copy h1 + p, section.hero h1 + p { display:none !important; }

/* CTA centrado y un poco más grande */
.hero .button-primary, .hero .button, .hero .btn, .hero .wp-block-button .wp-block-button__link,
.hero-copy .button-primary, .hero-copy .wp-block-button .wp-block-button__link {
  display:inline-flex !important;
  justify-content:center; align-items:center;
  margin:20px auto 0 !important;
  padding:14px 26px !important;
  font-size:clamp(15px,1.9vw,17px) !important;
  border-radius:12px !important;
}
.hero .buttons, .hero .cta, .hero-copy .buttons, .hero-copy .cta, .hero .wp-block-buttons {
  text-align:center !important; display:block !important;
}

/* Ocultar KPI del hero sin borrar */
.hero-kpis, .hero .kpis, .hero .facts, .hero .badges, .hero .metrics, .hero .cards,
.hero + .facts, .hero + .metrics, section.hero + .facts, section.hero + .metrics {
  display:none !important;
}

/* Logo coherente */
.site-header .site-logo img, .site-branding img, header .site-logo img, header .custom-logo {
  height: clamp(26px, 3.2vw, 36px) !important;
  width:auto !important;
}

@media (max-width:1024px){
  .hero .button-primary, .hero .button, .hero .btn, .hero .wp-block-button .wp-block-button__link {
    padding:14px 24px !important; font-size:16px !important;
  }
}
@media (max-width:768px){
  section.hero h1, .hero h1, .hero-copy h1 { margin-top: clamp(6px, 1.8vh, 18px) !important; }
  .hero .button-primary, .hero .button, .hero .btn, .hero .wp-block-button .wp-block-button__link {
    padding:12px 22px !important; font-size:15px !important;
  }
}
@media (max-width:480px){
  .site-header .site-logo img, .site-branding img, header .site-logo img, header .custom-logo {
    height:28px !important;
  }
}


/* ===== Sticky + Blur Header (global) ===== */
body.has-fixed-header { padding-top: var(--header-h, 72px); }

/* Override default sticky header styling for dark palette */
.wio-sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* Dark translucent backdrop instead of light grey */
  background: rgba(13, 19, 33, 0.70);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.is-scrolled .wio-sticky-header {
  background: rgba(13, 19, 33, 0.85);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
}

@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .wio-sticky-header {
    background: rgba(13, 19, 33, 0.90);
  }
}

/* Admin bar offset */
body.admin-bar .wio-sticky-header { top: 32px; }
@media (max-width:782px){ body.admin-bar .wio-sticky-header { top: 46px; } }

/* Ensure menu overlays over content on mobile */
.primary-nav, .main-menu, .site-header * { position: relative; z-index: 1; }

/* === WIO: Mobile navigation === */
.nav-toggle {
  display: none;
}

#mobile-nav {
  display: none;
}

@media (max-width: 1024px) {
  /* Ocultar menú de escritorio en móvil */
  .primary-nav {
    display: none !important;
  }
  /* Mostrar botón hamburguesa */
  .nav-toggle {
    display: inline-block !important;
    background: none;
    border: none;
    font-size: 28px;
    color: #0f172a;
    cursor: pointer;
    margin-left: auto;
  }
  /* Menú móvil overlay */
  #mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 999;
    padding: 80px 24px;
    overflow-y: auto;
  }
  #mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #mobile-nav li {
    margin-bottom: 24px;
  }
  #mobile-nav a {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
  }
  body.nav-open #mobile-nav {
    display: block;
  }
  body.nav-open {
    overflow: hidden;
  }
}

/* === WIO: Hero pillbar centering === */
.pillbar {
  justify-content: center !important;
}

/* === WIO: Blog posts two columns on large screens === */
@media (min-width: 1120px) {
  .posts {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* === WIO: Dark styling for phone prefix and number inputs === */
.form .phone-field select,
.form .phone-field input[type="tel"] {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: inherit !important;
}

/* Provide dark background for options in select dropdown on dark mode */
.form .phone-field select option {
  background: #121B34 !important;
  color: inherit !important;
}

/* === Header palette refinements ===
   The default theme header was using a fixed dark overlay which
   clashed with the lighter hero gradients in light mode and felt too
   heavy in dark mode. To ensure the header blends nicely across
   schemes, we introduce custom CSS variables for light/dark header
   backgrounds and borders. These variables provide a subtle
   translucent backdrop that harmonises with surrounding content and
   works well for both colour schemes. */

/* Define header background and border colours for light & dark modes */
:root {
  --wio-header-bg-light: rgba(255, 255, 255, 0.80);
  --wio-header-bg-dark:  rgba(11, 18, 32, 0.80);
  --wio-header-border-light: rgba(0, 0, 0, 0.05);
  --wio-header-border-dark:  rgba(255, 255, 255, 0.10);
}

/* Apply refined palette to both the standard site header and the
   sticky header. We rely on the defined variables above and ensure
   backdrop-filter is preserved for a subtle glass effect. */
.site-header,
.wio-sticky-header {
  background: var(--wio-header-bg-light) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--wio-header-border-light);
}

/* In dark mode swap to darker translucent colour and adjust border */
@media (prefers-color-scheme: dark) {
  .site-header,
  .wio-sticky-header {
    background: var(--wio-header-bg-dark) !important;
    border-bottom: 1px solid var(--wio-header-border-dark);
  }
}