/*
 * IDEM section UI
 * ---------------
 * Shared local section navigation for RU/INT IDEM pages and Single IDEM,
 * plus the demo photo-gallery spacing.
 *
 * INT atomic layouts already expose the semantic `.wwts-idem-subnav` class.
 * RU page layouts are older classic Elementor structures, so the same shell is
 * also detected by the canonical Masterclass child link. This keeps DB-owned
 * layouts editable while one tracked component owns the public behaviour.
 *
 * Important: ordinary Pages render inside the shared Theme Builder
 * `single-page` Base Content Page shell. Keep the selector limited to the
 * embedded `wp-page` document and the real `single-post` IDEM template so a
 * descendant IDEM menu can never turn the Base Content Page `.wwts-section`
 * itself into the sticky navigation surface.
 */

.elementor:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > .elementor-element:where(
    .wwts-idem-subnav,
    :has(.wwts-idem-subnav),
    :has(.elementor-nav-menu--main a[href*="/idem/masterclass/"])
) {
    --wwts-idem-subnav-admin-bar-height: 0px;
    position: sticky !important;
    top: calc(
        var(--wwts-visible-header-height, var(--wwts-fixed-header-height, 72px))
        + var(--wwts-header-admin-offset, var(--wwts-idem-subnav-admin-bar-height))
    );
    /* Match the Header V2 transform; hidden Header leaves no reserved gap. */
    transition: top 320ms cubic-bezier(.2, .7, .2, 1);
    z-index: 900;
    box-sizing: border-box;
    width: 100%;
    /* The section background spans its parent; wwts-inner owns the content cap. */
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-block: 10px;
    overflow: visible !important;
    /* Section background is owned by Elementor (local styles/global classes). */
    border-bottom: 1px solid rgba(74, 56, 44, 0.10);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
    .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > .elementor-element:where(
        .wwts-idem-subnav,
        :has(.wwts-idem-subnav),
        :has(.elementor-nav-menu--main a[href*="/idem/masterclass/"])
    ) {
        transition: none;
    }
}

body.admin-bar .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > .elementor-element:where(
    .wwts-idem-subnav,
    :has(.wwts-idem-subnav),
    :has(.elementor-nav-menu--main a[href*="/idem/masterclass/"])
) {
    --wwts-idem-subnav-admin-bar-height: 32px;
}

/* INT atomic IDEM layouts already carry 10px vertical padding on the inner
 * wrapper. The shared sticky shell owns that spacing now, so normalize the
 * nested wrapper and keep RU/INT geometry identical. */
.elementor:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > .elementor-element:has(.wwts-idem-subnav) .wwts-idem-subnav {
    padding-block: 0 !important;
}

/*
 * One visual contract for the local menu.
 *
 * RU page containers used `overflow:auto`, which clipped the Archive submenu,
 * and the classic widget inherited a different horizontal alignment from the
 * accepted INT atomic composition. Normalize both without changing the menu
 * records themselves.
 */
.elementor:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > .elementor-element:where(
    .wwts-idem-subnav,
    :has(.wwts-idem-subnav),
    :has(.elementor-nav-menu--main a[href*="/idem/masterclass/"])
) .elementor-nav-menu--main {
    width: 100%;
    overflow: visible !important;
}

.elementor:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > .elementor-element:where(
    .wwts-idem-subnav,
    :has(.wwts-idem-subnav),
    :has(.elementor-nav-menu--main a[href*="/idem/masterclass/"])
) .elementor-nav-menu--main > .elementor-nav-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center;
    width: 100% !important;
    min-width: 0;
    overflow: visible !important;
}

.elementor:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > .elementor-element:where(
    .wwts-idem-subnav,
    :has(.wwts-idem-subnav),
    :has(.elementor-nav-menu--main a[href*="/idem/masterclass/"])
) .elementor-nav-menu--main > .elementor-nav-menu > li {
    flex: 0 0 auto;
    overflow: visible !important;
}

.elementor:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > .elementor-element:where(
    .wwts-idem-subnav,
    :has(.wwts-idem-subnav),
    :has(.elementor-nav-menu--main a[href*="/idem/masterclass/"])
) .elementor-nav-menu--main .elementor-item {
    padding: 10px 12px !important;
    white-space: nowrap;
    font-family: Roboto, var(--wwts-font-text);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.25;
    color: #5A514C;
}

.elementor:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > .elementor-element:where(
    .wwts-idem-subnav,
    :has(.wwts-idem-subnav),
    :has(.elementor-nav-menu--main a[href*="/idem/masterclass/"])
) .elementor-nav-menu--main :is(
    .current-menu-item,
    .current-menu-ancestor,
    .current_page_item,
    .current_page_ancestor
) > .elementor-item {
    color: #4A382C;
}

.elementor:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > .elementor-element:where(
    .wwts-idem-subnav,
    :has(.wwts-idem-subnav),
    :has(.elementor-nav-menu--main a[href*="/idem/masterclass/"])
) .elementor-nav-menu--main .sub-menu {
    z-index: 980 !important;
    overflow: visible !important;
}

/* WordPress/Elementor image-gallery has no useful visual gutter in the current
 * IDEM demo. Give IDEM galleries a stable responsive grid without affecting
 * galleries elsewhere on the site. */
.elementor[data-elementor-type="wp-page"]:has(.elementor-nav-menu--main a[href*="/idem/foto-e-video/"]) .elementor-widget-image-gallery .gallery {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 !important;
}

.elementor[data-elementor-type="wp-page"]:has(.elementor-nav-menu--main a[href*="/idem/foto-e-video/"]) .elementor-widget-image-gallery .gallery-item {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

.elementor[data-elementor-type="wp-page"]:has(.elementor-nav-menu--main a[href*="/idem/foto-e-video/"]) .elementor-widget-image-gallery .gallery-icon,
.elementor[data-elementor-type="wp-page"]:has(.elementor-nav-menu--main a[href*="/idem/foto-e-video/"]) .elementor-widget-image-gallery .gallery-icon a,
.elementor[data-elementor-type="wp-page"]:has(.elementor-nav-menu--main a[href*="/idem/foto-e-video/"]) .elementor-widget-image-gallery img {
    display: block;
    width: 100%;
}

/* RU currently uses individual image widgets rather than the WP gallery widget.
 * Preserve that DB-owned composition and only add the missing gutter. */
.elementor[data-elementor-type="wp-page"]:has(.elementor-nav-menu--main a[href*="/idem/foto-e-video/"]) .e-con:has(> .elementor-widget-image + .elementor-widget-image) {
    gap: 16px !important;
}

@media (max-width: 1024px) {
    .elementor[data-elementor-type="wp-page"]:has(.elementor-nav-menu--main a[href*="/idem/foto-e-video/"]) .elementor-widget-image-gallery .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 782px) {
    body.admin-bar .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > .elementor-element:where(
        .wwts-idem-subnav,
        :has(.wwts-idem-subnav),
        :has(.elementor-nav-menu--main a[href*="/idem/masterclass/"])
    ) {
        --wwts-idem-subnav-admin-bar-height: 46px;
    }
}

@media (max-width: 767px) {
    .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > .elementor-element:where(
        .wwts-idem-subnav,
        :has(.wwts-idem-subnav),
        :has(.elementor-nav-menu--main a[href*="/idem/masterclass/"])
    ) {
        padding-block: 8px;
    }

    .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > .elementor-element:where(
        .wwts-idem-subnav,
        :has(.wwts-idem-subnav),
        :has(.elementor-nav-menu--main a[href*="/idem/masterclass/"])
    ) .elementor-nav-menu--main {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > .elementor-element:where(
        .wwts-idem-subnav,
        :has(.wwts-idem-subnav),
        :has(.elementor-nav-menu--main a[href*="/idem/masterclass/"])
    ) .elementor-nav-menu--main::-webkit-scrollbar {
        display: none;
    }

    .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > .elementor-element:where(
        .wwts-idem-subnav,
        :has(.wwts-idem-subnav),
        :has(.elementor-nav-menu--main a[href*="/idem/masterclass/"])
    ) .elementor-nav-menu--main > .elementor-nav-menu {
        justify-content: flex-start !important;
        width: max-content !important;
        min-width: 100%;
    }

    .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > .elementor-element:where(
        .wwts-idem-subnav,
        :has(.wwts-idem-subnav),
        :has(.elementor-nav-menu--main a[href*="/idem/masterclass/"])
    ) .elementor-nav-menu--main > .elementor-nav-menu > li {
        flex: 0 0 auto;
    }

    .elementor[data-elementor-type="wp-page"]:has(.elementor-nav-menu--main a[href*="/idem/foto-e-video/"]) .elementor-widget-image-gallery .gallery {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .elementor[data-elementor-type="wp-page"]:has(.elementor-nav-menu--main a[href*="/idem/foto-e-video/"]) .e-con:has(> .elementor-widget-image + .elementor-widget-image) {
        gap: 14px !important;
    }
}