/*
 * Agrarium - Elementor 3.x compatibility layer
 * ------------------------------------------------------------------
 * Elementor 3.0 removed the .elementor-inner, .elementor-row and
 * .elementor-column-wrap wrappers ("Optimized DOM Output"), and 3.6 removed
 * .elementor-section-wrap. That experiment was merged into Elementor core in
 * 3.10 and can no longer be switched off.
 *
 * theme.css was written against the old DOM. Its selectors have been rewritten
 * in place; this file covers what is left over plus the Container element
 * (Elementor 3.16+), which this theme predates entirely.
 *
 * Loaded from functions.php -> agrarium_css_js(), after theme.css and style.css.
 */

/* ------------------------------------------------------------------ *
 * 1. Column wrapper
 *    .elementor-column-wrap is gone; .elementor-widget-wrap now carries
 *    .elementor-element-populated directly.
 * ------------------------------------------------------------------ */

.elementor-column > .elementor-widget-wrap.elementor-element-populated {
    width: 100%;
}

/* ------------------------------------------------------------------ *
 * 2. Column wrapping on tablet/mobile
 *    Used to be applied to .elementor-row.
 * ------------------------------------------------------------------ */

@media (max-width: 991px) {
    .elementor-container {
        flex-wrap: wrap;
    }
}

/* ------------------------------------------------------------------ *
 * 3. Parallax
 *    agrarium-plugin adds data-parallax="scroll" to Sections and (now)
 *    Containers. Both need a positioning context for the theme's
 *    background_image_parallax() routine in js/theme.js.
 * ------------------------------------------------------------------ */

[data-parallax="scroll"] {
    position: relative;
}

/* ------------------------------------------------------------------ *
 * 4. Library templates
 *    theme.css hides the site header/footer inside Elementor library
 *    previews. Containers need the same treatment so saved templates are
 *    not previewed with a stray 120px section gap.
 * ------------------------------------------------------------------ */

.elementor_library-template-default .e-con {
    margin-top: 0;
}

/* ------------------------------------------------------------------ *
 * 5. Safety net
 *    The old agrarium-plugin JS injected fake .elementor-row / .ui-sortable
 *    wrappers into the canvas. That code is removed, but if a cached copy of
 *    the old file is still being served by a CDN or an optimisation plugin,
 *    this keeps the wrapper from collapsing the flex layout.
 * ------------------------------------------------------------------ */

.elementor-container > .elementor-row.ui-sortable {
    display: contents;
}

/* ------------------------------------------------------------------ *
 * OPTIONAL - not enabled
 * ------------------------------------------------------------------
 * theme.css sets `.elementor-section + .elementor-section { margin-top: 120px }`
 * above 768px. Containers get no such rule, so a container-based page will
 * look tighter than a section-based one. Uncomment if you want them to match:
 *
 * @media (min-width: 768px) {
 *     .e-con + .e-con { margin-top: 120px; }
 * }
 *
 * DESKTOP MENU BREAKPOINT
 * The theme originally switched to the desktop header at 1365px, so a
 * 1366x768 laptop (about 1349px of usable viewport) got the mobile burger.
 * All five header media queries in theme.css now use 1200px instead, which
 * matches the breakpoint the menu's own spacing rules already used.
 *
 * If your menu has a lot of items and wraps at 1200px, raise it: search
 * css/theme.css for "min-width: 1200px" in the five header blocks (around
 * lines 16486, 16783, 16820, 17629, 17911) and change them to 1280px.
 *
 * To go the other way and force the desktop header even lower without
 * touching theme.css, paste this into Appearance > Customize > Additional CSS:
 *
 * @media only screen and (min-width: 1024px) {
 *     .header        { display: block !important; }
 *     .mobile-header { display: none  !important; }
 * }
 */