/* =========================================================
   FAAED DAYS 2027
   Theme: faaeddays
   Header + navegación
   ========================================================= */


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid rgba(20, 53, 82, .08);
    box-shadow: 0 4px 20px rgba(20, 53, 82, .045);
    backdrop-filter: blur(16px);

    position: sticky;
    top: 0;
    z-index: 1030;
}

.site-navbar {
    min-height: 86px;
    padding: .7rem 0;
}

.site-logo {
    display: block;
    width: auto;
    max-width: 240px;
    max-height: 60px;
    object-fit: contain;
}


/* =========================================================
   NAVEGACIÓN DESKTOP
   ========================================================= */

.site-nav-desktop {
    align-items: center;
}

.site-nav-desktop .site-menu {
    align-items: center;
    gap: 1.7rem;
    padding: 0;
}


/* Links */

.site-nav-desktop .site-menu .nav-link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: .8rem 0 .7rem;

    color: #26384b;
    background: transparent;

    border: 0;
    border-radius: 0;

    font-size: .96rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .015em;

    text-decoration: none;
    box-shadow: none;

    transition: color .22s ease;
}


/* =========================================================
   LÍNEA
   ========================================================= */

.site-nav-desktop .site-menu .nav-link::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 0;

    width: 0;
    height: 3px;

    background: var(--secondary);
    border-radius: 999px;

    transform: translateX(-50%);

    transition:
        width .25s ease,
        background-color .2s ease;
}


/* =========================================================
   ROLLOVER
   ========================================================= */

.site-nav-desktop .site-menu .nav-link:hover,
.site-nav-desktop .site-menu .nav-link:focus {
    color: var(--secondary);

    background: transparent;
    border: 0;
    box-shadow: none;

    transform: none;
}

.site-nav-desktop .site-menu .nav-link:hover::after,
.site-nav-desktop .site-menu .nav-link:focus::after {
    width: 100%;
    background: var(--secondary);
}


/* =========================================================
   SECCIÓN ACTUAL
   ========================================================= */

.site-nav-desktop .site-menu .nav-link.active,
.site-nav-desktop .site-menu .nav-link[aria-current="page"] {
    color: var(--primary);

    background: transparent;
    border: 0;

    font-weight: 700;

    box-shadow: none;
}

.site-nav-desktop .site-menu .nav-link.active::after,
.site-nav-desktop .site-menu .nav-link[aria-current="page"]::after {
    width: 100%;
    background: var(--primary);
}


/* Si hacemos rollover sobre la sección actual,
   dejamos el color de sección activa */

.site-nav-desktop .site-menu .nav-link.active:hover,
.site-nav-desktop .site-menu .nav-link[aria-current="page"]:hover {
    color: var(--primary);
}

.site-nav-desktop .site-menu .nav-link.active:hover::after,
.site-nav-desktop .site-menu .nav-link[aria-current="page"]:hover::after {
    background: var(--primary);
}


/* =========================================================
   DROPDOWNS DESKTOP
   ========================================================= */

.site-nav-desktop .dropdown-menu {
    margin-top: .5rem;
    padding: .5rem;

    background: rgba(255, 255, 255, .98);

    border: 1px solid rgba(20, 53, 82, .08);
    border-radius: 12px;

    box-shadow: 0 14px 35px rgba(20, 53, 82, .12);
}

.site-nav-desktop .dropdown-item {
    padding: .65rem .85rem;

    color: #26384b;

    border-radius: 8px;

    font-size: .94rem;
    font-weight: 500;

    transition:
        color .2s ease,
        background-color .2s ease;
}

.site-nav-desktop .dropdown-item:hover,
.site-nav-desktop .dropdown-item:focus {
    color: var(--primary);
    background: rgba(0, 130, 190, .07);
}


/* =========================================================
   HAMBURGUESA
   ========================================================= */

.site-toggler {
    padding: .5rem;

    border: 0;
    border-radius: 8px;

    box-shadow: none !important;
}

.site-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(0, 130, 190, .12) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

.site-mobile-nav {
    padding-top: .75rem;
    padding-bottom: .8rem;
}

.site-mobile-nav .site-menu {
    display: grid;
    gap: 0;

    padding: .4rem 0 0;
}

.site-mobile-nav .site-menu .nav-link {
    position: relative;

    display: block;

    padding: .85rem .25rem;

    color: #26384b;
    background: transparent;

    border: 0;
    border-bottom: 1px solid rgba(20, 53, 82, .08);
    border-radius: 0;

    font-size: .98rem;
    font-weight: 600;

    text-decoration: none;
}

.site-mobile-nav .site-menu .nav-link:hover,
.site-mobile-nav .site-menu .nav-link:focus {
    color: var(--secondary);
    background: transparent;
}

.site-mobile-nav .site-menu .nav-link.active,
.site-mobile-nav .site-menu .nav-link[aria-current="page"] {
    color: var(--primary);
    font-weight: 700;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 991.98px) {

    .site-navbar {
        min-height: 74px;
        padding: .55rem 0;
    }

    .site-logo {
        max-width: 200px;
        max-height: 52px;
    }

}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 480px) {

    .site-navbar {
        min-height: 68px;
        padding: .45rem 0;
    }

    .site-logo {
        max-width: 170px;
        max-height: 46px;
    }

}

/* =========================================================
   SECCIÓN ACTUAL - compatibilidad con distintas salidas
   ========================================================= */

.site-nav-desktop .site-menu .nav-item.active > .nav-link,
.site-nav-desktop .site-menu .active > .nav-link,
.site-nav-desktop .site-menu .current > .nav-link,
.site-nav-desktop .site-menu .current-menu-item > .nav-link,
.site-nav-desktop .site-menu .nav-link.active,
.site-nav-desktop .site-menu .nav-link[aria-current="page"] {
    color: var(--primary);
    font-weight: 700;
}

.site-nav-desktop .site-menu .nav-item.active > .nav-link::after,
.site-nav-desktop .site-menu .active > .nav-link::after,
.site-nav-desktop .site-menu .current > .nav-link::after,
.site-nav-desktop .site-menu .current-menu-item > .nav-link::after,
.site-nav-desktop .site-menu .nav-link.active::after,
.site-nav-desktop .site-menu .nav-link[aria-current="page"]::after {
    width: 100%;
    background: var(--primary);
}


/* =========================================================
   FAAED HERO - CONTENIDO FULL WIDTH
   ========================================================= */

/*
 * El Hero de MASC usa .container para su contenido.
 * Para FAAED liberamos solamente este Hero (#block-1)
 * para que la gráfica pueda usar el ancho del viewport.
 */
#block-1 .site-hero-content {
    width: 100%;
    max-width: none !important;
    padding-left: 0;
    padding-right: 0;
}


/* Eliminamos el límite pensado para títulos/texto del Hero */
#block-1 .site-hero-text {
    width: 100%;
    max-width: none !important;
    margin: 0;
}


/* Wrapper de nuestra gráfica */
#faaed-logo-source {
    width: 100%;
    max-width: none;
}


/* Gráfica */
.faaed-hero-center-logo {
    width: 100%;
    max-width: none;
}


/* Imagen centrada respecto del Hero completo */
.faaed-hero-center-logo img {
    display: block;

    width: 88vw !important;
    max-width: 1400px !important;
    height: auto !important;

    margin: 0 auto !important;

    position: static !important;
    left: auto !important;
    transform: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .faaed-hero-center-logo img {
        width: 94vw !important;
        max-width: none !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .faaed-hero-center-logo img {
        width: 96vw !important;
    }

}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 480px) {

    .faaed-hero-center-logo img {
        width: 98vw !important;
    }

}

/* =========================================================
   FAAED HERO - LINK EN GRÁFICA
   ========================================================= */

.faaed-hero-center-logo {
    position: relative;
    z-index: 10;
}

.faaed-hero-center-logo a {
    position: relative;
    z-index: 20;

    display: block;

    width: 100%;
    height: auto;

    pointer-events: auto;
    cursor: pointer;
}

.faaed-hero-center-logo a img {
    pointer-events: none;
}