/*
Theme Name: Hoguera - Astra Child
Theme URI: https://dogos-hoguera.com/
Description: Tema hijo de Astra para Dogos Hoguera.
Author: Dogos Hoguera
Template: astra
Version: 1.0.0
Text Domain: hoguera-astra-child
*/

/* ========================================
   HEADER HOGUERA - STICKY
   ======================================== */

#masthead,
header.site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* En la parte superior de HOME:
   transparente sobre el hero */
.home #masthead.is-top,
.home header.site-header.is-top {
    background: transparent !important;
    box-shadow: none !important;
}

/* Al bajar:
   fondo oscuro para mantener legibilidad */
#masthead.is-scrolled,
header.site-header.is-scrolled {
    background: rgba(12, 7, 3, 0.94) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.30);
}

/* En Hoguera NO ocultamos el header al bajar */
#masthead.is-hidden,
header.site-header.is-hidden {
    transform: none !important;
}

/* =========================================
   HOGUERA - MENÚ ACTIVO POR SECCIÓN
========================================= */

/* Estado normal */
#masthead .main-header-menu > .menu-item > a {
    color: #ffffff;
    transition: color 0.25s ease;
}

/* Hover */
#masthead .main-header-menu > .menu-item > a:hover {
    color: #ff7100;
}

/* Sección actualmente visible */
#masthead .main-header-menu > .menu-item > a.hoguera-active {
    color: #ff7100 !important;
}

/* =========================================
   HOGUERA - SCROLL SUAVE Y ANCLAS
========================================= */

html {
    scroll-behavior: smooth;
}

/* Compensa la altura del header fijo */
#inicio,
#embrujos,
#ubicacion {
    scroll-margin-top: calc(var(--tp-header-h-real, 90px) + 20px);
}

/* =========================================
   HOGUERA - HEADER COMPACTO AL HACER SCROLL
========================================= */

/* Transición suave */
#masthead .ast-primary-header-bar,
#masthead .custom-logo-link img {
    transition:
        min-height 0.3s ease,
        padding 0.3s ease,
        max-width 0.3s ease,
        height 0.3s ease;
}

/* Header un poco más compacto al bajar */
#masthead.is-scrolled .ast-primary-header-bar {
    min-height: 68px;
}

/* Logo ligeramente más pequeño */
#masthead.is-scrolled .custom-logo-link img {
    max-height: 48px;
    width: auto;
}

/* =========================================================
   HOGUERA — MENÚ MÓVIL / TABLET
   ========================================================= */

@media (max-width: 921px) {

    /* Panel desplegable */
    #ast-mobile-header .main-header-menu,
    #ast-mobile-header .ast-nav-menu,
    #ast-mobile-header .ast-builder-menu-mobile .main-navigation {
        background: linear-gradient(
            180deg,
            #0d0907 0%,
            #15100c 100%
        ) !important;
    }

    /* Contenedor del menú */
    #ast-mobile-header .ast-builder-menu-mobile .main-navigation {
        border: none !important;
        border-bottom: 2px solid #ff6a00 !important;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45) !important;
        padding: 12px 22px 20px !important;
    }

    /* Cada opción */
    #ast-mobile-header .main-header-menu > .menu-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
        margin: 0 !important;
    }

    /* Última opción sin separador */
    #ast-mobile-header .main-header-menu > .menu-item:last-child {
        border-bottom: none !important;
    }

    /* Letras */
    #ast-mobile-header .main-header-menu > .menu-item > .menu-link {
        color: #ffffff !important;
        background: transparent !important;

        font-size: 18px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;

        padding: 17px 8px !important;
        line-height: 1.2 !important;
    }

    /* Hover */
    #ast-mobile-header .main-header-menu > .menu-item > .menu-link:hover,
    #ast-mobile-header .main-header-menu > .menu-item > .menu-link:focus {
        color: #ff6a00 !important;
        background: transparent !important;
    }

    /* Quitamos el color "activo" que Astra impone */
    #ast-mobile-header .main-header-menu > .current-menu-item > .menu-link,
    #ast-mobile-header .main-header-menu > .current_page_item > .menu-link,
    #ast-mobile-header .main-header-menu > .current-menu-ancestor > .menu-link {
        color: #ffffff !important;
        background: transparent !important;
    }

    /* El activo REAL controlado por Hoguera */
    #ast-mobile-header .main-header-menu > .hoguera-active > .menu-link {
        color: #ff6a00 !important;
    }

    /* Botón hamburguesa / cerrar */
    #ast-mobile-header .menu-toggle {
        background: #ff6a00 !important;
        border: none !important;
        border-radius: 7px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
    }

    /* Icono hamburguesa y X */
    #ast-mobile-header .menu-toggle,
    #ast-mobile-header .menu-toggle .ast-mobile-svg {
        color: #ffffff !important;
        fill: #ffffff !important;
    }
}


/* Un poco más compacto en teléfonos */
@media (max-width: 544px) {

    #ast-mobile-header .ast-builder-menu-mobile .main-navigation {
        padding: 10px 18px 18px !important;
    }

    #ast-mobile-header .main-header-menu > .menu-item > .menu-link {
        font-size: 17px !important;
        padding: 16px 6px !important;
    }
}/* =========================================================
   HOGUERA — ACABADO MENÚ MÓVIL / TABLET
   ========================================================= */

@media (max-width: 921px) {

    /* Fondo general del desplegable */
    #ast-mobile-header .ast-builder-menu-mobile .main-navigation {
        background:
            linear-gradient(
                135deg,
                #090705 0%,
                #17100b 55%,
                #0b0806 100%
            ) !important;

        padding: 8px 24px 18px !important;

        border: 0 !important;
        border-bottom: 2px solid #ff6a00 !important;

        box-shadow:
            0 18px 35px rgba(0, 0, 0, 0.55) !important;
    }


    /* Cada renglón */
    #ast-mobile-header .main-header-menu > .menu-item {
        position: relative !important;

        margin: 0 !important;

        border: 0 !important;
        border-bottom:
            1px solid rgba(255, 106, 0, 0.20) !important;
    }


    #ast-mobile-header .main-header-menu > .menu-item:last-child {
        border-bottom: 0 !important;
    }


    /* Enlaces */
    #ast-mobile-header .main-header-menu > .menu-item > .menu-link {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        min-height: 56px !important;

        padding: 15px 12px 15px 18px !important;

        color: rgba(255,255,255,.90) !important;
        background: transparent !important;

        font-size: 17px !important;
        font-weight: 600 !important;

        letter-spacing: .5px !important;

        transition:
            color .20s ease,
            padding-left .20s ease,
            background .20s ease !important;
    }


    /* Pequeña marca lateral */
    #ast-mobile-header
    .main-header-menu > .menu-item > .menu-link::before {

        content: "" !important;

        position: absolute !important;

        left: 0 !important;
        top: 50% !important;

        width: 3px !important;
        height: 0 !important;

        background: #ff6a00 !important;

        transform: translateY(-50%) !important;

        transition: height .20s ease !important;
    }


    /* Hover */
    #ast-mobile-header
    .main-header-menu > .menu-item > .menu-link:hover,

    #ast-mobile-header
    .main-header-menu > .menu-item > .menu-link:focus {

        color: #ff6a00 !important;

        padding-left: 23px !important;

        background:
            rgba(255, 106, 0, 0.045) !important;
    }


    /* ACTIVO REAL controlado por nuestro JS */
    #ast-mobile-header
    .main-header-menu > .menu-item.hoguera-active > .menu-link,

    #ast-mobile-header
    .main-header-menu > .menu-item > .menu-link.hoguera-active {

        color: #ff6a00 !important;

        padding-left: 23px !important;

        background:
            linear-gradient(
                90deg,
                rgba(255,106,0,.10),
                rgba(255,106,0,0)
            ) !important;
    }


    /* Barra naranja del activo */
    #ast-mobile-header
    .main-header-menu > .menu-item.hoguera-active > .menu-link::before,

    #ast-mobile-header
    .main-header-menu > .menu-item > .menu-link.hoguera-active::before {

        height: 26px !important;
    }


    /* Neutralizamos el "activo" propio de Astra */
    #ast-mobile-header
    .main-header-menu > .current-menu-item:not(.hoguera-active) > .menu-link,

    #ast-mobile-header
    .main-header-menu > .current_page_item:not(.hoguera-active) > .menu-link {

        color: rgba(255,255,255,.90) !important;
        background: transparent !important;
    }


    /* Hamburguesa / X */
    #ast-mobile-header .menu-toggle {

        background: #ff6a00 !important;

        border: 0 !important;
        border-radius: 7px !important;

        box-shadow:
            0 5px 16px rgba(0,0,0,.32) !important;

        transition:
            transform .18s ease,
            box-shadow .18s ease !important;
    }


    #ast-mobile-header .menu-toggle:hover {

        transform: translateY(-1px) !important;

        box-shadow:
            0 7px 20px rgba(0,0,0,.42) !important;
    }

}


/* TELÉFONO */
@media (max-width: 544px) {

    #ast-mobile-header
    .ast-builder-menu-mobile .main-navigation {

        padding: 6px 18px 15px !important;
    }


    #ast-mobile-header
    .main-header-menu > .menu-item > .menu-link {

        min-height: 52px !important;

        font-size: 16px !important;

        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

}

/* =========================================================
   HOGUERA — ACABADO MENÚ MÓVIL / TABLET
   ========================================================= */

@media (max-width: 921px) {

    /* Fondo general del desplegable */
    #ast-mobile-header .ast-builder-menu-mobile .main-navigation {
        background:
            linear-gradient(
                135deg,
                #090705 0%,
                #17100b 55%,
                #0b0806 100%
            ) !important;

        padding: 8px 24px 18px !important;

        border: 0 !important;
        border-bottom: 2px solid #ff6a00 !important;

        box-shadow:
            0 18px 35px rgba(0, 0, 0, 0.55) !important;
    }


    /* Cada renglón */
    #ast-mobile-header .main-header-menu > .menu-item {
        position: relative !important;

        margin: 0 !important;

        border: 0 !important;
        border-bottom:
            1px solid rgba(255, 106, 0, 0.20) !important;
    }


    #ast-mobile-header .main-header-menu > .menu-item:last-child {
        border-bottom: 0 !important;
    }


    /* Enlaces */
    #ast-mobile-header .main-header-menu > .menu-item > .menu-link {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        min-height: 56px !important;

        padding: 15px 12px 15px 18px !important;

        color: rgba(255,255,255,.90) !important;
        background: transparent !important;

        font-size: 17px !important;
        font-weight: 600 !important;

        letter-spacing: .5px !important;

        transition:
            color .20s ease,
            padding-left .20s ease,
            background .20s ease !important;
    }


    /* Pequeña marca lateral */
    #ast-mobile-header
    .main-header-menu > .menu-item > .menu-link::before {

        content: "" !important;

        position: absolute !important;

        left: 0 !important;
        top: 50% !important;

        width: 3px !important;
        height: 0 !important;

        background: #ff6a00 !important;

        transform: translateY(-50%) !important;

        transition: height .20s ease !important;
    }


    /* Hover */
    #ast-mobile-header
    .main-header-menu > .menu-item > .menu-link:hover,

    #ast-mobile-header
    .main-header-menu > .menu-item > .menu-link:focus {

        color: #ff6a00 !important;

        padding-left: 23px !important;

        background:
            rgba(255, 106, 0, 0.045) !important;
    }


    /* ACTIVO REAL controlado por nuestro JS */
    #ast-mobile-header
    .main-header-menu > .menu-item.hoguera-active > .menu-link,

    #ast-mobile-header
    .main-header-menu > .menu-item > .menu-link.hoguera-active {

        color: #ff6a00 !important;

        padding-left: 23px !important;

        background:
            linear-gradient(
                90deg,
                rgba(255,106,0,.10),
                rgba(255,106,0,0)
            ) !important;
    }


    /* Barra naranja del activo */
    #ast-mobile-header
    .main-header-menu > .menu-item.hoguera-active > .menu-link::before,

    #ast-mobile-header
    .main-header-menu > .menu-item > .menu-link.hoguera-active::before {

        height: 26px !important;
    }


    /* Neutralizamos el "activo" propio de Astra */
    #ast-mobile-header
    .main-header-menu > .current-menu-item:not(.hoguera-active) > .menu-link,

    #ast-mobile-header
    .main-header-menu > .current_page_item:not(.hoguera-active) > .menu-link {

        color: rgba(255,255,255,.90) !important;
        background: transparent !important;
    }


    /* Hamburguesa / X */
    #ast-mobile-header .menu-toggle {

        background: #ff6a00 !important;

        border: 0 !important;
        border-radius: 7px !important;

        box-shadow:
            0 5px 16px rgba(0,0,0,.32) !important;

        transition:
            transform .18s ease,
            box-shadow .18s ease !important;
    }


    #ast-mobile-header .menu-toggle:hover {

        transform: translateY(-1px) !important;

        box-shadow:
            0 7px 20px rgba(0,0,0,.42) !important;
    }

}


/* TELÉFONO */
@media (max-width: 544px) {

    #ast-mobile-header
    .ast-builder-menu-mobile .main-navigation {

        padding: 6px 18px 15px !important;
    }


    #ast-mobile-header
    .main-header-menu > .menu-item > .menu-link {

        min-height: 52px !important;

        font-size: 16px !important;

        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

}

/* =========================================================
   HOGUERA — BOTÓN PEDIR AHORA DEL MENÚ MÓVIL
   ========================================================= */

/* Oculto por defecto para no duplicarlo en escritorio */
.hoguera-pedir-movil {
    display: none !important;
}


@media (max-width: 921px) {

    /* Recuperamos el elemento únicamente en tablet/móvil */
    #ast-mobile-header .hoguera-pedir-movil {
        display: block !important;

        border-bottom: 0 !important;

        padding: 16px 6px 5px !important;
    }


    /* El enlace se convierte en botón */
    #ast-mobile-header
    .main-header-menu > .hoguera-pedir-movil > .menu-link {

        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 50px !important;

        padding: 13px 20px !important;

        background: #ff6a00 !important;
        color: #ffffff !important;

        border-radius: 8px !important;

        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: .5px !important;

        text-align: center !important;

        box-shadow:
            0 6px 18px rgba(0, 0, 0, .30) !important;

        transition:
            transform .18s ease,
            background .18s ease,
            box-shadow .18s ease !important;
    }


    /* No queremos la barrita del estado activo aquí */
    #ast-mobile-header
    .hoguera-pedir-movil > .menu-link::before {

        display: none !important;
    }


    /* Interacción */
    #ast-mobile-header
    .hoguera-pedir-movil > .menu-link:hover,
    #ast-mobile-header
    .hoguera-pedir-movil > .menu-link:focus {

        background: #ff7a1a !important;
        color: #ffffff !important;

        padding-left: 20px !important;

        transform: translateY(-1px) !important;

        box-shadow:
            0 8px 22px rgba(0, 0, 0, .40) !important;
    }
}

/* =========================================================
   HOGUERA — BOTÓN PEDIR AHORA DEL MENÚ MÓVIL
   ========================================================= */

/* Oculto por defecto para no duplicarlo en escritorio */
.hoguera-pedir-movil {
    display: none !important;
}


@media (max-width: 921px) {

    /* Recuperamos el elemento únicamente en tablet/móvil */
    #ast-mobile-header .hoguera-pedir-movil {
        display: block !important;

        border-bottom: 0 !important;

        padding: 16px 6px 5px !important;
    }


    /* El enlace se convierte en botón */
    #ast-mobile-header
    .main-header-menu > .hoguera-pedir-movil > .menu-link {

        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 50px !important;

        padding: 13px 20px !important;

        background: #ff6a00 !important;
        color: #ffffff !important;

        border-radius: 8px !important;

        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: .5px !important;

        text-align: center !important;

        box-shadow:
            0 6px 18px rgba(0, 0, 0, .30) !important;

        transition:
            transform .18s ease,
            background .18s ease,
            box-shadow .18s ease !important;
    }


    /* No queremos la barrita del estado activo aquí */
    #ast-mobile-header
    .hoguera-pedir-movil > .menu-link::before {

        display: none !important;
    }


    /* Interacción */
    #ast-mobile-header
    .hoguera-pedir-movil > .menu-link:hover,
    #ast-mobile-header
    .hoguera-pedir-movil > .menu-link:focus {

        background: #ff7a1a !important;
        color: #ffffff !important;

        padding-left: 20px !important;

        transform: translateY(-1px) !important;

        box-shadow:
            0 8px 22px rgba(0, 0, 0, .40) !important;
    }
}