/* ==========================================================
   Elementor inside the JCL theme (inc/elementor/)
   ----------------------------------------------------------
   Pages, the header and the footer can be built with Elementor from JCL widgets, which print the theme's own
   markup. Here Elementor's own boxes give up their spacing and layout, so a page built with Elementor looks
   exactly like the theme's template; the theme's CSS does the rest.
   ========================================================== */

/* Containers with a JCL section style ("JCL section style" in the Layout tab): no Elementor spacing or flex layout */
.e-con.jcl-sec {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --margin-top: 0px;
  --margin-bottom: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --display: block !important; /* Elementor writes --display: flex for every container */
  --content-width: 100%;
  --container-widget-width: 100%;
  display: block;
}
.e-con.jcl-sec > .e-con-inner { display: block; }

/* "Section" styles: the theme's section spacing (.blk) and page width (.wrap) */
.e-con.jcl-sec.blk { padding: 64px 0; }
.e-con.jcl-sec.blk.blk-tight { padding: 40px 0; }
.e-con.jcl-sec.blk > .e-con-inner {
  max-width: 1360px;
  width: auto;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 1100px) {
  .e-con.jcl-sec.blk > .e-con-inner { padding: 0 32px; }
}
@media (max-width: 720px) {
  .e-con.jcl-sec.blk { padding: 40px 0; }
  .e-con.jcl-sec.blk.blk-tight { padding: 28px 0; }
  .e-con.jcl-sec.blk > .e-con-inner { padding: 0 16px; }
}

/* "Full width, no spacing": heroes, bands and Library Content take the whole width as in the theme */
.e-con.jcl-sec.jcl-plain { padding: 0; }
.e-con.jcl-sec.jcl-plain > .e-con-inner { max-width: none; padding: 0; }

/* Widgets: nothing of their own around the theme's markup */
.e-con.jcl-sec > .elementor-element,
.e-con.jcl-sec > .e-con-inner > .elementor-element { width: auto; max-width: none; }

/* ---------- Header and footer (Website Settings → Header & Footer) ---------- */

/* Elementor's boxes in the header and footer draw nothing, as the theme's own wrappers don't (chrome.css): the top
   bar stays sticky to the page */
.jcl-el-chrome > .elementor,
.jcl-el-chrome .e-con.jcl-plain:not(.site-topbar):not(.site-footer),
.jcl-el-chrome .e-con.jcl-plain > .e-con-inner,
.jcl-el-chrome .elementor-widget,
.jcl-el-chrome .elementor-widget .jcl-chrome { display: contents; }
.e-con.jcl-sec.site-topbar {
  --position: sticky;
  --z-index: 60;
  --overflow: visible;
  position: sticky;
  top: 0;
  z-index: 60;
}

/* ---------- The page ---------- */

/* The page content block and Elementor's page wrapper add no spacing */
.jcl-elementor-page > .wp-block-post-content,
.jcl-elementor-page > .wp-block-post-content > .elementor { margin: 0; padding: 0; }

/* Width "Narrow (for reading)": the theme's narrow page width (.wrap-narrow) */
.e-con.jcl-sec.blk.jcl-w-narrow > .e-con-inner { max-width: 920px; }