/*
 * header.css — Decibelio
 * Tema hijo: blocksy-child
 * Depende de: variables.css (db-variables)
 * Selectores reales confirmados del HTML de Blocksy 2.1.41
 *
 * DISEÑO CONFIRMADO:
 * - Header fondo blanco
 * - Nav links: var(--color-gris-texto) #4C4C4C
 * - Botón Contacto: fondo var(--color-verde), texto var(--color-verde-oscuro)
 * - Logo: imagen PNG gestionada por Blocksy Personalizador — no tocar
 *
 * REGLAS:
 * - Sin !important nunca
 * - Sin hardcode de colores — solo var(--color-*)
 * - Sin hardcode de fuentes — solo var(--font-*)
 * - Especificidad por selectores reales encadenados
 */

/* ============================================================
   HEADER WRAPPER — fondo y sombra: NATIVOS (no en CSS)
   El fondo blanco + sombra del header (estado normal y sticky) se
   gestionan en Blocksy (fila «middle-row» → Background/Shadow),
   aplicados por WP-CLI sobre header_placements. A ancho completo via
   el selector nativo [data-sticky*="yes"] del estado sticky.
   ============================================================ */

/* ============================================================
   CONTENEDOR INTERNO — contenido a --ancho-contenedor centrado,
   pero a ANCHO COMPLETO (clave para el header sticky)
   Blocksy en "ancho completo" usa .ct-container-fluid con
   width: calc(100vw - 60px). NO acotarlo con max-width: encoge el
   elemento entero y, al hacer scroll, el fondo/sombra del header
   sticky solo cubriría ese ancho → los bloques a sangre asoman por
   los lados (visible solo en PC, donde hay laterales). Por eso lo
   dejamos a ancho completo (su fondo cubre todo el viewport) y
   centramos SOLO el contenido con padding-inline: el gutter crece
   hasta (100% - --ancho-contenedor)/2 (replica el borde del cuerpo)
   con mínimo --padding-contenedor en pantallas estrechas.
   El selector (0,2,1) gana al de Blocksy (0,1,0) sin !important.
   OJO: si el header se cambia a "en caja", el contenedor pasa a
   .ct-container (max-width 1290) y hay que reapuntar este selector.
   ============================================================ */
header.ct-header .ct-container-fluid {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding-inline: max(var(--padding-contenedor), calc((100% - var(--ancho-contenedor)) / 2));
}

/* ============================================================
   LOGO
   Imagen gestionada por el Personalizador de Blocksy.
   Altura ya configurada a 50px. No se modifica aquí.
   ============================================================ */

/* ============================================================
   NAVEGACIÓN — ENLACES
   ============================================================ */
header.ct-header nav.header-menu-1 .ct-menu-link {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-bold);
    color: var(--color-gris-texto);
    text-decoration: none;
    letter-spacing: 0.01em;
    padding: 0.35rem 0.6rem;
    position: relative;
    transition: color var(--transicion-rapida);
    text-transform: none;
}

/* Línea animada bajo el enlace en hover */
header.ct-header nav.header-menu-1 .ct-menu-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0.6rem;
    right: 0.6rem;
    height: 2px;
    background-color: var(--color-verde);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transicion-rapida);
}

header.ct-header nav.header-menu-1 .ct-menu-link:hover {
    color: var(--color-verde-oscuro);
}

header.ct-header nav.header-menu-1 .ct-menu-link:hover::after {
    transform: scaleX(1);
}

/* Enlace activo — página actual */
header.ct-header nav.header-menu-1 .current-menu-item .ct-menu-link {
    color: var(--color-verde-oscuro);
    font-weight: var(--peso-semibold);
}

header.ct-header nav.header-menu-1 .current-menu-item .ct-menu-link::after {
    transform: scaleX(1);
}

header.ct-header nav.header-menu-1 .current-page-ancestor .ct-menu-link {
    color: var(--color-verde-oscuro);
}

header.ct-header nav.header-menu-1 .current-page-ancestor .ct-menu-link::after {
    transform: scaleX(1);
}

/* ============================================================
   DROPDOWN — Submenú "Servicios"
   Items: Antenas, Videoporteros, Seguridad, Domótica, Electricidad
   ============================================================ */
header.ct-header nav.header-menu-1 ul.sub-menu {
    background-color: var(--color-blanco);
    border-top: 2px solid var(--color-verde);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 4px 4px;
    min-width: 210px;
}

header.ct-header nav.header-menu-1 ul.sub-menu .ct-menu-link {
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-normal);
    color: var(--color-gris-texto);
    padding: 0.65rem 1.1rem;
    display: block;
    border-bottom: 1px solid var(--color-gris-separador);
    letter-spacing: 0;
}

header.ct-header nav.header-menu-1 ul.sub-menu .ct-menu-link::after {
    display: none;
}

header.ct-header nav.header-menu-1 ul.sub-menu .ct-menu-link:hover {
    color: var(--color-verde-oscuro);
    background-color: var(--color-verde-suave);
}

header.ct-header nav.header-menu-1 ul.sub-menu li:last-child .ct-menu-link {
    border-bottom: none;
}

/* ============================================================
   BOTÓN CTA — "Contacto"
   Mismos colores que el CTA de categoría "Solicitar visita técnica":
   Fondo var(--color-verde) · texto var(--color-verde-oscuro)
   Hover: fondo var(--color-verde-oscuro) · texto var(--color-verde)
   ============================================================ */
header.ct-header .ct-header-cta .ct-button-ghost {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-semibold);
    letter-spacing: 0.02em;
    background-color: var(--color-verde);
    color: var(--color-verde-oscuro);
    border: 2px solid var(--color-verde);
    border-radius: var(--radio-boton);
    padding: 0.5rem 1.5rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition:
        background-color var(--transicion-rapida),
        border-color var(--transicion-rapida),
        box-shadow var(--transicion-rapida);
}

header.ct-header .ct-header-cta .ct-button-ghost:hover {
    background-color: var(--color-verde-oscuro);
    border-color: var(--color-verde-oscuro);
    color: var(--color-verde);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--color-verde-oscuro) 25%, transparent);
}

/* ============================================================
   HAMBURGUESA — MÓVIL
   ============================================================ */
header.ct-header .ct-toggle-dropdown-menu {
    color: var(--color-gris-texto);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    transition: color var(--transicion-rapida);
}

header.ct-header .ct-toggle-dropdown-menu:hover {
    color: var(--color-verde-oscuro);
}

/* ============================================================
   PANEL OFFCANVAS — MENÚ MÓVIL
   ============================================================ */
#offcanvas {
    background-color: var(--color-blanco);
}

/* Cabecera del panel (.ct-panel-actions): franja gris del footer, más alta y con
   la X centrada. Blocksy le da solo padding-top (sin bottom) → la X queda baja;
   padding-block simétrico la centra vía el align-items:center nativo. El cuerpo
   del menú sigue blanco; la X (tamaño/color) se gestiona en el Personalizador. */
#offcanvas .ct-panel-actions {
    background-color: var(--color-gris-oscuro);
    padding-block: 0.75rem;
}

#offcanvas .ct-menu-link {
    font-family: var(--font-cuerpo);
    color: var(--color-gris-texto);
    font-size: var(--texto-base);
    font-weight: var(--peso-bold);
    padding: 0.85rem 1.5rem;
    display: block;
    border-bottom: 1px solid var(--color-gris-separador);
    transition: color var(--transicion-rapida), background-color var(--transicion-rapida);
}

#offcanvas .ct-menu-link:hover {
    color: var(--color-verde-oscuro);
    background-color: var(--color-verde-suave);
}

/* Fondo blanco explícito en todos los contenedores internos del offcanvas */
#offcanvas .ct-panel-inner,
#offcanvas .ct-panel-content,
#offcanvas .ct-panel-content-inner,
#offcanvas nav.mobile-menu {
    background-color: var(--color-blanco);
}

/* Sub-menú en offcanvas — elimina el fondo oscuro de Blocksy */
#offcanvas ul.sub-menu {
    background-color: transparent;
}

#offcanvas ul.sub-menu .ct-menu-link {
    color: var(--color-gris-texto);
    font-weight: var(--peso-normal);
}

/* Flecha del submenú del offcanvas: legible y alineada al borde del CTA.
   Color: Blocksy la pinta con --theme-icon-color tenue; la igualamos al texto.
   Posición: margin-inline-start ya es auto en Blocksy (la empuja al extremo);
   su --toggle-button-margin-end (por defecto negativo, la pega al borde) lo
   igualamos al inset del panel — la misma alineación que el CTA y los enlaces. */
#offcanvas .ct-toggle-dropdown-mobile {
    --theme-icon-color: var(--color-gris-texto);
    --toggle-button-margin-end: 1.5rem;
}

/* Botón CTA "Contacto" — inyectado al final del panel offcanvas.
   Piel + hover (con sombra) heredados del CTA primario en main.css;
   aquí solo lo contextual: bloque a ancho del panel + peso/padding.
   #offcanvas eleva la especificidad para ganar al grupo común. */
.db-offcanvas-cta-wrap {
    align-self: stretch;
    padding: 1.5rem 1.5rem 1rem;
    border-top: 1px solid var(--color-gris-separador);
}

#offcanvas .db-offcanvas-cta {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: var(--peso-semibold);
    padding: 0.85rem 1.25rem;
}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (max-width: 1024px) {
    header.ct-header .ct-container {
        padding-inline: 1.25rem;
    }
}

/* ============================================================
   ACCESIBILIDAD — REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    header.ct-header nav.header-menu-1 .ct-menu-link,
    header.ct-header nav.header-menu-1 .ct-menu-link::after,
    header.ct-header .ct-header-cta .ct-button-ghost {
        transition: none;
    }
}