/* WordPress/Divi content - let Divi CSS handle most styling */
.wp-content {
    width: 100%;
}

.wp-content img {
    max-width: 100%;
    height: auto;
}

/* Ensure Divi sections span full width */
#page-container .et_pb_section {
    width: 100%;
}

/* Fix Divi video backgrounds in Blazor context */
.et_pb_section_video_bg video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
}

/* Loading state */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* Admin FAB - floating button to access admin on WP pages */
.hc-admin-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
}

.hc-admin-fab a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #424242;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    opacity: 0.6;
}

.hc-admin-fab a:hover {
    background: #1976d2;
    transform: scale(1.1);
    opacity: 1;
}

/* Prevent MudBlazor from interfering with Divi layout on WP pages */
#page-container * {
    box-sizing: border-box;
}

/* Divi sets h1-h6 line-height:1em globally which causes multi-line headings to overlap.
   WordPress live site relies on JS/dynamic CSS to fix this. We set sane values explicitly. */
.et_pb_text_inner h1,
.et_pb_text_inner h2,
.et_pb_text_inner h3,
.et_pb_text_inner h4 {
    line-height: 1.4em;
}

.et_pb_text_inner p {
    line-height: 1.7em;
}

/* Divi dividers with empty position (et_pb_divider_position_) are cosmetic spacers.
   Hide the border line — spacing comes from the et_pb_space height and module margin. */
.et_pb_divider_position_:before {
    display: none;
}

/*
 * Divi JS-dependent visibility overrides.
 * Divi normally hides these elements and reveals them via JS initialization.
 * In Blazor context, Divi JS may not fully initialize, so force them visible.
 */

/* et-waypoint / et_animated: Divi hides these at opacity:0 until JS triggers animations.
   On Blazor client-side navigation, Divi JS doesn't re-initialize for the new DOM,
   so animated elements stay invisible. Force them visible and skip animations. */
.et-waypoint,
.et_pb_module.et-waypoint,
.et_pb_section.et-waypoint,
.et_pb_row.et-waypoint,
.et_animated {
    opacity: 1 !important;
    animation: none !important;
}

/* et_pb_preload: Divi hides section backgrounds until ready */
.et_pb_preload .et_pb_section_video_bg,
.et_pb_preload > div,
.et_pb_preload {
    visibility: visible !important;
}

/* Divi counters and number counters - hidden until JS animates them */
.et_pb_counters .et_pb_counter_container,
.et_pb_number_counter {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure Divi builder inner content spans full width.
   Also add et_pb_gutters3 gutter behavior — WordPress has this class on the wrapper div,
   but adding it via Razor component causes .NET 10 Preview routing issues.
   The column width and module margin rules already match via body.et_pb_gutters3 ancestor. */
.et_builder_inner_content {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Force header to overlay content (Divi JS normally manages this) */
#main-header {
    z-index: 99999 !important;
}

/* Divi slider: override Divi's display:none approach with our own visibility.
   Divi CSS sets .et_pb_slide { display: none } and :first-child { display: list-item }.
   Our JS rotator toggles et-pb-active-slide, so we must force display on active slides. */
.et_pb_slider .et_pb_slides {
    overflow: hidden;
    position: relative;
}

.et_pb_slide {
    display: none !important;
}

.et_pb_slide.et-pb-active-slide {
    display: list-item !important;
    list-style: none;
    position: relative;
    opacity: 1;
    z-index: 2;
    background-size: cover;
    background-position: center;
}

/* Supreme Modules image carousel - constrain images within Swiper slides */
.dsm_image_carousel .swiper-slide img,
.dsm_image_carousel .dsm_image_carousel_item img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

/* Ensure Swiper container has proper overflow hidden */
.dsm_image_carousel .swiper-container {
    overflow: hidden;
}