/* =====================================================================
 * eMaids — Booking header (booking form + thank you)
 * ---------------------------------------------------------------------
 * ARCHIVO NUEVO. Súbelo completo a:
 *   /wp-content/themes/emaids/css/booking-header.css
 *
 * Markup: inc/booking-header.php
 *
 * Solo se encola en las plantillas del booking y solo en las franquicias del
 * piloto (ver emaids_booking_header_slugs()), así que todo lo de aquí puede ser
 * agresivo sin riesgo para el resto del sitio. Aun así, todo va bajo
 * `body.emaids-bh-on` para que sea obvio en el inspector de dónde sale cada
 * regla y para que nada aplique si el PHP no llegó a activarse.
 *
 * BREAKPOINT 1024px, no los 820px del menú del sitio: en el booking ya no hay
 * menú (lo quitamos), así que el corte relevante es el del propio booking —
 * 1024px es donde entra el widget móvil (booking-mobile-nyc.css) y la vista
 * móvil del thank-you. Así el header compacto y el widget móvil aparecen
 * exactamente a la vez.
 *
 * TIPOGRAFÍA: el tema corre sobre Genesis con root font-size 62.5% (1rem≈10px),
 * de modo que aquí TODO va en px. Un rem "normal" saldría un 37% más pequeño.
 * ===================================================================== */


/* ---------------------------------------------------------------------
 * 1. Retirada del header global
 * ------------------------------------------------------------------- */

/*
 * Estos tres bloques ya están desenganchados en PHP (inc/booking-header.php).
 * Se ocultan también por CSS como red de seguridad: si un plugin los reengancha
 * o se sube el CSS antes que el PHP, no se cuela media cabecera vieja.
 */
body.emaids-bh-on .before-header-row,
body.emaids-bh-on .hello-bars-wrap,
body.emaids-bh-on .emaids-mh {
    display: none !important;
}

/*
 * .site-header queda vacío (se quitó genesis_do_header), pero style.css le da
 * min-height:95px, así que hay que colapsarlo o deja una franja blanca. Aquí sí
 * es seguro el display:none —al contrario que en mobile-header.css, donde había
 * que conservarlo porque el menú vivía dentro—: en el booking no hay menú.
 */
body.emaids-bh-on .site-header {
    display: none !important;
}

/*
 * El contenedor fijo se queda (de él dependen las medidas en runtime del widget
 * móvil y del thank-you), pero el mockup pide blanco sólido, no el
 * rgba(255,255,255,.90) de style.css: con el formulario pasando por debajo, el
 * 90% se ve sucio.
 */
body.emaids-bh-on .before-header-wrap {
    background: #fff;
}


/* ---------------------------------------------------------------------
 * 2. El header nuevo — escritorio (>1024px)
 * ------------------------------------------------------------------- */

.emaids-bh {
    background: #fff;
}

/* Full-bleed con gutters cortos, como el mockup: logo pegado a la izquierda y
   tarjeta pegada a la derecha, sin el max-width del sitio. */
.emaids-bh__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    /* border-box explícito: los 110px del mockup son la altura TOTAL de la
       barra, padding incluido. Genesis ya pone box-sizing:border-box global,
       pero declararlo aquí evita que la altura del header dependa de eso. */
    box-sizing: border-box;
    min-height: 110px;
    padding: 10px 30px;
}

.emaids-bh__logo {
    display: block;
    line-height: 0;
    text-decoration: none !important;
}

.emaids-bh__logo img {
    display: block;
    width: auto;
    height: auto;
    max-height: 56px;
    /* El logo de la franquicia puede venir en cualquier tamaño desde ACF; el
       max-width evita que un archivo grande empuje la tarjeta fuera. */
    max-width: 260px;
}

.emaids-bh__logo-text {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: #0b1220;
}

/* Tarjeta de soporte. Es un <a href="tel:">, de ahí los !important en color y
   text-decoration: style.css estiliza los enlaces de forma bastante amplia. */
.emaids-bh__support {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 14px 26px 14px 22px;
    border-radius: 10px;
    background: #fff;
    /* Sombra + hairline en una sola declaración (el borde del mockup es casi
       imperceptible, un box-shadow de 0 blur lo reproduce sin sumar 1px al
       tamaño de la caja). */
    box-shadow: 0 1px 4px rgba(16, 24, 40, .10), 0 0 0 1px rgba(16, 24, 40, .05);
    color: inherit !important;
    text-decoration: none !important;
    transition: box-shadow .18s ease;
}

.emaids-bh__support:hover,
.emaids-bh__support:focus-visible {
    box-shadow: 0 3px 10px rgba(16, 24, 40, .14), 0 0 0 1px rgba(16, 24, 40, .07);
}

.emaids-bh__ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* Azul del mockup (muestreado del PNG aprobado), no el #426bb3 del tema:
       el cliente aprobó este. Si más adelante quieren el azul de marca, es esta
       línea y su gemela del bloque móvil. */
    background: #1a64d6;
    color: #fff;
    font-size: 20px;
}

/* fa-phone corre de arriba-dcha a abajo-izda; el mockup lo quiere al revés.
   Ver el comentario del markup: fa-phone-alt no existe en la 5.8.2 del tema. */
.emaids-bh__ico i {
    transform: rotate(90deg);
}

.emaids-bh__txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.emaids-bh__label {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #67707d;
}

.emaids-bh__num {
    font-size: 29px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #0b1220;
    white-space: nowrap;
}

/*
 * Despeje del contenido bajo el header fijo. booking.css usa
 * `#booking-container{padding-top:15%}`, un % del ancho pensado para el header
 * viejo (dos franjas): a 1728px son ~259px y con este header quedaría un hueco
 * enorme. 180px es la distancia del mockup entre el borde superior y la tarjeta
 * del formulario. Gana por especificidad (id + clase), sin !important.
 *
 * Acotado a >1024px a propósito: por debajo el header mide 58px, no 110, así que
 * 180px dejaría un hueco absurdo en un móvil. El valor móvil va en el bloque de
 * abajo.
 */
@media only screen and (min-width: 1025px) {

    body.emaids-bh-on #booking-container {
        padding-top: 180px;
    }
}


/* ---------------------------------------------------------------------
 * 3. Móvil / tablet (<=1024px)
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {

    /* Barra compacta de una fila: logo + bloque de teléfono sin tarjeta. */
    .emaids-bh__wrap {
        min-height: 58px;
        padding: 8px 15px;
        gap: 12px;
    }

    .emaids-bh__logo img {
        max-height: 34px;
        max-width: 130px;
    }

    .emaids-bh__logo-text {
        font-size: 19px;
    }

    /* En móvil el mockup no lleva tarjeta: el bloque va plano sobre el blanco. */
    .emaids-bh__support {
        gap: 10px;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .emaids-bh__support:hover,
    .emaids-bh__support:focus-visible {
        box-shadow: none;
    }

    /* Más grande que los 30px del mockup, a petición del cliente: en el móvil
       real el círculo es el único elemento que dice "llámanos" y a 30px se
       perdía al lado del número. 38px lo deja como objetivo táctil decente sin
       empujar el número contra el logo. */
    .emaids-bh__ico {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .emaids-bh__label {
        font-size: 11px;
        letter-spacing: .03em;
    }

    .emaids-bh__num {
        font-size: 19px;
    }

    /*
     * Despeje móvil: 58px de header + 20px de aire.
     *
     * En NYC esta regla no se usa —booking-mobile-nyc.css pone
     * `#booking-container{padding:0 !important}` y el widget trae su propio
     * `padding-top:70px`, que con esta barra de 58px deja los 12px de aire sobre
     * el stepper que pide el mockup—, pero SÍ es la que va a mandar en el
     * rollout a franquicias que aún no tengan el widget móvil y sigan usando el
     * formulario clásico en el teléfono. Sin ella heredarían el 15% de
     * booking.css.
     *
     * El thank-you móvil no necesita nada: mide el header fijo en runtime
     * (--emaids-ty-headtop) y se adapta solo a esta barra más baja.
     */
    body.emaids-bh-on #booking-container {
        padding-top: 78px;
    }
}


/* Pantallas muy estrechas: el número manda, el logo cede espacio. */
@media only screen and (max-width: 360px) {

    .emaids-bh__logo img {
        max-width: 96px;
    }

    .emaids-bh__label {
        font-size: 10px;
    }

    .emaids-bh__num {
        font-size: 17px;
    }
}