@import url("free-diagnosis-benefits-reference-v2.css");

/*
 * Free Diagnosis hero — full-bleed hardening v2.
 *
 * This file intentionally loads AFTER free-diagnosis-page-reference.css.
 * It keeps the Elementor widget wrapper inside the normal flex/container flow
 * and performs the viewport breakout on the actual diagnosis panel instead.
 * That avoids the one-sided RTL/flex behavior caused by combining width:100vw
 * with negative physical margins on the widget wrapper itself.
 */

.elementor-widget-aliclick_contact_hero.acfd-contact-hero-template-reference {
    --acfd-contact-inner-padding-fallback: 54px;

    position: relative;
    align-self: stretch;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    inset: auto !important;
    transform: none !important;
}

.elementor-widget-aliclick_contact_hero.acfd-contact-hero-template-reference > .elementor-widget-container {
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: visible;
}

/*
 * Default/fallback behavior is viewport breakout. The :not(parent) selector is
 * deliberate so already-saved Elementor documents created before this control
 * existed still receive the corrected full-width behavior immediately.
 *
 * Crucially, the widget wrapper itself stays at normal parent width. The actual
 * hero panel receives equal logical negative margins, which is stable in both
 * RTL and LTR and does not fight Elementor flex-item sizing.
 */
.elementor-widget-aliclick_contact_hero.acfd-contact-hero-template-reference:not(.acfd-contact-width-mode-parent) .acw-contact-hero--diagnosis,
.elementor-widget-aliclick_contact_hero.acfd-contact-hero-template-reference.acfd-contact-width-mode-viewport .acw-contact-hero--diagnosis {
    box-sizing: border-box;
    width: auto !important;
    max-width: none !important;
    margin-inline-start: calc(50% - 50vw + var(--acfd-contact-edge-inset, 0px)) !important;
    margin-inline-end: calc(50% - 50vw + var(--acfd-contact-edge-inset, 0px)) !important;
}

/* Explicit parent-width mode for pages that intentionally keep the hero boxed. */
.elementor-widget-aliclick_contact_hero.acfd-contact-hero-template-reference.acfd-contact-width-mode-parent .acw-contact-hero--diagnosis {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
}

/*
 * Keep content boxed even when the background/panel is full viewport width.
 * Padding is controlled independently for desktop/tablet/mobile in Elementor.
 * The fallback variable is breakpoint-aware without overriding a user-selected
 * responsive value emitted by Elementor.
 */
.elementor-widget-aliclick_contact_hero.acfd-contact-hero-template-reference .acw-contact-hero--diagnosis .acw-contact-hero__diagnosis-inner {
    width: 100%;
    max-width: var(--acfd-contact-inner-max, 1320px) !important;
    padding-inline-start: var(--acfd-contact-inner-padding-inline, var(--acfd-contact-inner-padding-fallback)) !important;
    padding-inline-end: var(--acfd-contact-inner-padding-inline, var(--acfd-contact-inner-padding-fallback)) !important;
    margin-inline: auto;
}

/*
 * Elementor containers are normally overflow:visible, but themes/global styles
 * can change that. In the recommended escape mode, release clipping on ancestor
 * Elementor containers that actually contain this reference hero.
 */
@supports selector(.e-con:has(.elementor-widget-aliclick_contact_hero)) {
    .e-con:has(.elementor-widget-aliclick_contact_hero.acfd-contact-hero-template-reference:not(.acfd-contact-parent-escape-off)),
    .elementor-section:has(.elementor-widget-aliclick_contact_hero.acfd-contact-hero-template-reference:not(.acfd-contact-parent-escape-off)),
    .elementor-column:has(.elementor-widget-aliclick_contact_hero.acfd-contact-hero-template-reference:not(.acfd-contact-parent-escape-off)) {
        overflow: visible !important;
    }
}

/*
 * Viewport units can differ by a fraction of a pixel from the layout viewport.
 * Guard the page against a tiny horizontal scrollbar unless explicitly disabled.
 */
body:has(.elementor-widget-aliclick_contact_hero.acfd-contact-hero-template-reference:not(.acfd-contact-overflow-guard-off)) {
    overflow-x: hidden;
}

@supports (overflow: clip) {
    body:has(.elementor-widget-aliclick_contact_hero.acfd-contact-hero-template-reference:not(.acfd-contact-overflow-guard-off)) {
        overflow-x: clip;
    }
}

/* The older reference stylesheet guarded overflow unconditionally; allow opt-out. */
body:has(.elementor-widget-aliclick_contact_hero.acfd-contact-hero-template-reference.acfd-contact-overflow-guard-off) {
    overflow-x: visible !important;
}

/* Elementor editor canvas sometimes adds an extra wrapper width constraint. */
.elementor-editor-active .elementor-widget-aliclick_contact_hero.acfd-contact-hero-template-reference,
.elementor-editor-preview .elementor-widget-aliclick_contact_hero.acfd-contact-hero-template-reference {
    min-width: 0;
}

@media (max-width: 1024px) {
    .elementor-widget-aliclick_contact_hero.acfd-contact-hero-template-reference {
        --acfd-contact-inner-padding-fallback: 28px;
    }
}

@media (max-width: 767px) {
    .elementor-widget-aliclick_contact_hero.acfd-contact-hero-template-reference {
        --acfd-contact-inner-padding-fallback: 18px;
    }
}