/* ========================================================================
   Ganjeh Kala — Elementor V3/V4 Layout Compatibility
   Elementor owns page layout. The theme provides a neutral canvas and makes
   custom widgets safe as Block/Flex/Grid items without overriding Atomic
   layout widths, gaps, tracks, alignment or positioning.
   ======================================================================== */

/* Elementor-built pages must not inherit the theme's boxed page wrapper. */
.gk-elementor-canvas {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.gk-elementor-canvas > .gk-elementor-entry,
.gk-elementor-canvas > .gk-elementor-entry > .gk-elementor-content,
.gk-elementor-canvas > .gk-elementor-content {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* Atomic V4 Flexbox/Grid/Div elements default to 100% width and do not
   inherit Elementor's legacy Site Settings > Content Width. Ganjeh Kala uses
   Theme Options Site Width as the default document content width.

   A critical V3/V4 mixed-layout case must be supported: Theme Builder can
   render a legacy Container as the document root and place the first Atomic
   Flexbox/Grid/Div inside it. Therefore the Atomic content root is not always
   a direct child of .elementor-location-*.

   Select the *top-most Atomic elements in each Elementor document*, regardless
   of whether one or more legacy wrappers sit above them. Nested Atomic elements
   are deliberately excluded, so their widths remain fully controlled by the
   Atomic editor.

   Specificity is intentionally one body class plus element type. This beats
   Elementor's base Atomic width:100% rule, while a saved local/global Atomic
   style such as `.elementor .e-xxxxxxx` remains more specific and can override
   the theme default without !important. */
body.gk-site-width-synced :where(
    .gk-elementor-content > .elementor,
    .elementor-location-single,
    .elementor-location-archive,
    .elementor[data-elementor-type="product"],
    .elementor[data-elementor-type="single-post"],
    .elementor[data-elementor-type="archive"],
    .elementor[data-elementor-type="wp-page"],
    .elementor[data-elementor-type="page"]
) :where(.e-con.e-atomic-element):not(:where(.e-con.e-atomic-element .e-con.e-atomic-element)) {
    box-sizing: border-box;
    width: var(--gk-layout-width, var(--gk-container-width, min(1200px, calc(100% - 48px))));
    max-width: 100%;
    margin-inline: auto;
}

/* Elementor V3/V4 mixed Theme Builder documents can use a legacy boxed root
   with its optimized wrapper and an Atomic child directly beneath it. Keep the
   legacy root's canonical width variable in sync as a fallback as well. This
   does not touch Atomic descendants. */
body.gk-site-width-synced :where(
    .elementor-location-single,
    .elementor-location-archive,
    .elementor[data-elementor-type="product"],
    .elementor[data-elementor-type="single-post"],
    .elementor[data-elementor-type="archive"]
) > .e-con.e-con-boxed:not(.e-atomic-element) {
    --container-max-width: var(--gk-site-width, 1200px);
    --content-width: var(--gk-site-width, 1200px);
}

/* Do not impose a width on Elementor layout primitives. Only remove the
   intrinsic min-content floor that commonly makes sliders/cards overflow when
   they are used as Flex or Grid children. */
body.gk-elementor-layout-safe .gk-elementor-canvas .elementor-element,
body.gk-elementor-layout-safe .gk-elementor-canvas .gk-elementor-widget,
.elementor-location-header .gk-elementor-widget,
.elementor-location-footer .gk-elementor-widget {
    min-width: 0;
    box-sizing: border-box;
}

/* Theme widgets remain valid Grid/Flex items in both legacy and optimized DOM. */
.gk-elementor-widget {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Media generated by theme widgets should shrink with the Grid/Flex track. */
.gk-elementor-widget img,
.gk-elementor-widget video,
.gk-elementor-widget canvas,
.gk-elementor-widget svg {
    max-width: 100%;
}

/* Elementor's editing placeholder must not reintroduce the theme page width. */
.elementor-editor-active .gk-elementor-canvas,
.elementor-editor-preview .gk-elementor-canvas {
    width: 100%;
    max-width: none;
}

/* Elementor Angie WordPress integration narrows the WordPress admin bar by
   --angie-sidebar-width while its docked sidebar is active. On RTL storefronts
   that creates a conspicuous empty strip on the right edge and can persist if
   Angie leaves its active body state behind. Keep only the admin toolbar pinned
   to the viewport; do not change --angie-sidebar-width, the Angie container, or
   the page padding, so the sidebar itself can still open and resize normally. */
@media (min-width: 769px) {
    body.admin-bar.angie-sidebar-active #wpadminbar {
        inset-inline-start: 0 !important;
        inset-inline-end: 0 !important;
        width: 100% !important;
    }
}