/* ============================================================================
 * HB Announcement Banner
 * ----------------------------------------------------------------------------
 * Color palette below is a restrained navy default. Adjust the four
 * --hb-banner-* custom properties to match Howarth's brand exactly.
 * ========================================================================= */

.hb-banner {
    --hb-banner-bg:        #19365f;
    --hb-banner-text:      #ffffff;
    --hb-banner-muted:     #c6d0de;
    --hb-banner-cta-bg:    #ffffff;
    --hb-banner-cta-text:  #19365f;
    --hb-banner-cta-hover: #f0f4fa;

    background: var(--hb-banner-bg);
    color: var(--hb-banner-text);
    padding: 14px 24px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 999;
    font-family: inherit;
}

.hb-banner__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
}

.hb-banner__media {
    flex-shrink: 0;
    width: 88px;
    height: 64px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba( 255, 255, 255, 0.06 );
}

.hb-banner__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hb-banner__content {
    flex: 1 1 auto;
    min-width: 0;
}

.hb-banner__content-link {
    display: block;
    color: var(--hb-banner-text) !important;
    text-decoration: none;
}

.hb-banner__content-link:hover,
.hb-banner__content-link:focus {
    color: var(--e-global-color-accent) !important;
    text-decoration: none;
}

.hb-banner__content-link:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    border-radius: 2px;
}

.hb-banner__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--hb-banner-muted);
    margin-bottom: 4px;
}

.hb-banner__headline {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 4px;
    color: inherit;
}

.hb-banner__description {
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
    color: var(--hb-banner-muted);
}

.hb-banner__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.hb-banner__cta {
    display: inline-block;
    /* background: var(--hb-banner-cta-bg); 
    color: var(--hb-banner-cta-text); 
    padding: 10px 18px;
    border-radius: 4px;
    */
    color: var(--hb-banner-text) !important;
    
    
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.hb-banner__cta:hover,
.hb-banner__cta:focus {
    /* background: var(--hb-banner-cta-hover); */
    color: var(--e-global-color-accent) !important;
    
    text-decoration: none;
}

.hb-banner__cta:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.hb-banner__dismiss {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: rgba( 255, 255, 255, 0.7 ) !important;
    font-size: 34px;
    line-height: 1;
    padding: 4px 8px;
    margin: 0;
    cursor: pointer;
    transition: color 0.15s ease;
    min-width: 0;
    height: auto;
    width: auto;
}

.hb-banner__dismiss:hover,
.hb-banner__dismiss:focus {
    background: transparent !important;
    color: var(--hb-banner-text) !important;
}

.hb-banner__dismiss:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- Mobile ---------- */
@media ( max-width: 767px ) {
    .hb-banner {
        padding: 10px 12px;
    }

    .hb-banner__inner {
        gap: 8px;
        align-items: flex-start;
    }

    .hb-banner__media,
    .hb-banner__description {
        display: none;
    }

    .hb-banner__content {
        padding-top: 2px;
    }

    .hb-banner__headline {
        font-size: 13px;
        line-height: 1.3;
        margin: 0;
    }

    .hb-banner__eyebrow {
        font-size: 10px;
        margin-bottom: 2px;
    }

    .hb-banner__actions {
        gap: 4px;
    }

    .hb-banner__cta {
        display: none;
    }

    .hb-banner__dismiss {
        font-size: 20px;
        padding: 2px 4px;
    }
}

/* ---------- Neutralize Howarth's header -100px hero overlap while banner is up
 * Howarth's nav header has margin-bottom: -100px to pull the hero up under
 * it (the "transparent header floats over hero" design pattern). Without
 * the banner, only the bottom 100px of the header overlaps the hero, which
 * is intended.
 *
 * With the banner in flow above the header, the header naturally sits
 * below the banner — but the -100px still pulls the hero up, which now
 * causes the hero to cover most of the header (only the top sliver shows).
 *
 * Neutralizing the overlap while the banner is active gives a clean
 * banner -> header -> hero stack. When the user dismisses the banner, the
 * body class is removed and the original -100px overlap is restored.
 *
 * Only applies in non-sticky-active state. Once Elementor pins the header
 * on scroll, this rule stops matching (header is fixed at viewport top and
 * the overlap design no longer applies).
 * ------------------------------------------------------------------------- */
body.has-hb-announcement-banner .navMenu.elementor-sticky:not(.elementor-sticky--active) {
    margin-bottom: 0 !important;
}

/* ---------- Suppress events Floating Bar on mobile when banner is active ----
 * Targets Elementor Pro's Floating Bars widget (.e-floating-bars wrapper).
 * ------------------------------------------------------------------------- */
@media ( max-width: 767px ) {
    body.has-hb-announcement-banner .e-floating-bars {
        display: none !important;
    }
}

/* Reduced motion */
@media ( prefers-reduced-motion: reduce ) {
    .hb-banner__cta,
    .hb-banner__dismiss {
        transition: none;
    }
}