/* ===========================
   FIX: Remove the teal line bleeding from header top bar into menu area.
   
   Root cause: main.css line ~7246 uses a ::after pseudo-element on
   .header-area.homepage1 with a HARDCODED height of 55px to create
   the full-width teal background behind the top bar (phone/address).
   But the actual .header-top-area content is only ~46px tall, so the
   remaining ~9px of teal bleeds into the white menu area below.
   
   Fix: Replace the hardcoded-height ::after with a ::before on the
   .header-top-area that:
   - Extends to full viewport width (100vw, centered)
   - Has DYNAMIC height matching .header-top-area exactly (top:0; bottom:0)
   This eliminates the bleed permanently regardless of content size.
   =========================== */

/* 1. HIDE the broken ::after pseudo-element (hardcoded 55px height) */
.homepage1-body .header-area.homepage1::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
}

/* 2. Ensure header-top-area is positioned for the ::before to reference */
.homepage1-body .header-area.homepage1 .header-top-area {
    position: relative !important;
}

/* 3. Create the full-width teal background with DYNAMIC height */
.homepage1-body .header-area.homepage1 .header-top-area::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    /* Center a 100vw-wide element to cover full viewport width */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    background: var(--ztc-bg-bg-4) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}