/* =====================================================================
   CUSTOM FIX & ADDITIONS
   - Corrige el header/menu movil (se cargaba con posiciones fijas en px
     que no coincidian con la altura real del header en distintos anchos)
   - Estiliza la nueva seccion de "Videos de Trabajos"
   Este archivo se carga DESPUES de style.css para poder sobreescribirlo
   sin tocar el archivo original del theme.
===================================================================== */

/* ---------------------------------------------------------------------
   1) HEADER / MENU MOVIL

   Diagnostico (revisando el style.css original del theme): el archivo
   trae TRES sistemas de menu movil superpuestos:
     a) header.menu-open (click handler original de designesia.js) -> ya
        desactivado en public/js/designesia.js.
     b) body.menu-root-open (el que usamos nosotros, con MobileMenuToggle).
     c) header.header-mobile (clase que designesia.js agrega solo via JS
        segun el ancho de pantalla, con su propio monton de reglas CSS).

   El sistema (c) es el que causaba los 2 problemas reportados:
     - header.header-mobile trae "overflow: hidden" (linea ~11783 del
       style.css original), lo que RECORTABA visualmente el menu
       desplegable (que vive dentro del header) apenas su alto superaba
       el alto del header -> por eso "se despliega pero no se ve".
     - Dos reglas distintas peleaban por la posicion del header
       (position: fixed !important en un lado, position: relative en
       otro), lo que hacia que el header no se mantuviera pegado arriba
       de forma confiable al hacer scroll.

   La solucion: forzamos explicitamente (con !important, sin depender de
   si la clase header-mobile llego a aplicarse o no) un unico
   comportamiento para el header en movil, y anulamos el "overflow:
   hidden" que recortaba el menu.
--------------------------------------------------------------------- */
@media only screen and (max-width: 992px) {

    header,
    header.header-mobile,
    header.transparent {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: visible !important;
        background: var(--bg-dark-1, #010A1A) !important;
        z-index: 1001;
    }

    /* NOTA: no agregamos padding-top global al #wrapper aqui a
       proposito: el Home tiene un hero a pantalla completa pensado
       para quedar detras del header transparente (asi es el diseño
       original). Solo el #subheader de Services/Brands/Contact
       necesita mas aire para no quedar tapado por el header fijo, y
       eso ya se resuelve en la regla de #subheader de abajo. */

    /* El subheader (titulo de pagina en Services/Brands/Contact) traia
       muy poco padding-top en movil (40px), insuficiente para el header
       fijo -> quedaba tapado. Le damos mas aire. */
    #subheader {
        padding: 90px 0 60px 0 !important;
    }

    /* Ocultamos la barra superior (telefono / email / aviso) en todo
       el rango movil para que el header tenga una altura consistente
       y no se monte con el menu. Antes solo se ocultaba por debajo de
       767px, dejando un tramo (768-992px) con overflow/desorden. */
    #topbar .xs-hide {
        display: none !important;
    }

    #topbar {
        min-height: 0;
    }

    /* fila logo + menu + boton, evita que se encimen */
    .de-flex.sm-pt10 {
        position: relative;
        flex-wrap: nowrap;
        align-items: center;
    }

    #logo {
        max-width: 55%;
    }

    #logo img {
        max-width: 100%;
        height: auto;
    }

    /* Boton hamburguesa siempre visible y por encima del menu */
    #menu-btn {
        display: block;
        position: relative;
        z-index: 1002;
    }

    /* Menu desplegable anclado al header (que ahora es position:fixed,
       asi que sigue siendo un contenedor de posicion valido para este
       hijo), ya no depende de un "top" fijo en px ni se recorta */
    ul#mainmenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        max-height: calc(100vh - 78px);
        overflow-y: auto;
        background: var(--bg-dark-1, #010A1A) !important;
        z-index: 1000;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .35);
    }

    ul#mainmenu li {
        display: none;
        width: 100%;
        margin: 0;
        float: none;
        background: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    ul#mainmenu li a.menu-item {
        display: block;
        width: 100%;
        padding: 14px 20px;
        background: transparent;
    }

    body.menu-root-open ul#mainmenu {
        display: block;
    }

    body.menu-root-open ul#mainmenu li {
        display: block;
    }

    /* evita scroll horizontal por elementos que se salen del viewport */
    body {
        overflow-x: hidden;
    }
}

/* Telefonos muy pequenos: el boton "Get a Free Quote" no debe pelear
   por espacio con el logo y el boton hamburguesa */
@media only screen and (max-width: 420px) {
    .menu_side_area .btn-main {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   2) SECCION "VIDEOS DE TRABAJOS"
--------------------------------------------------------------------- */
.work-video-card {
    background: var(--bg-dark-2, #14181f);
    border-radius: 4px;
}

.work-video-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #000;
    cursor: pointer;
}

.work-video-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}

.work-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.work-video-sound {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
    transition: background .2s ease;
}

.work-video-sound:hover {
    background: rgba(0, 0, 0, .8);
}

.work-video-caption h5 {
    margin-bottom: 2px;
}

/* ---------------------------------------------------------------------
   3) EFECTO DE BARRIDO ENTRE PAGINAS
--------------------------------------------------------------------- */
#page-wipe {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--bg-dark-1, #010A1A);
    transform: translateX(-100%);
    pointer-events: none;
}

#page-wipe::after {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 6px;
    height: 100%;
    background: var(--primary-color, #ed1d24);
}

#page-wipe.is-covering {
    transform: translateX(0%);
    transition: transform .45s cubic-bezier(.76, 0, .24, 1);
}

#page-wipe.is-revealing {
    transform: translateX(100%);
    transition: transform .45s cubic-bezier(.76, 0, .24, 1) .05s;
}