/* =========================================================
   Elementor integration for the Last Message of Mercy design.
   Containers marked "lmm-x" carry the design's own classes
   (section, wrap, grid, …): Elementor's default container
   spacing is neutralised so the design system sets the layout.
   ========================================================= */

/* Higher specificity than Elementor's generated per-element CSS (.elementor-N .elementor-element.elementor-element-ID). */
.elementor .elementor-element.e-con.lmm-x {
  --display: block;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --width: auto;
  --position: static;
  --flex-wrap: nowrap;
  --flex-wrap-mobile: nowrap;
  --min-height: 0;
  --z-index: auto;
  --overflow: visible;
}
.elementor .elementor-element.e-con.lmm-x.e-flex { --width: auto; --flex-direction: row; --flex-grow: 0; --flex-shrink: 1; --flex-basis: auto; }
.e-con.lmm-x.e-flex.wrap,
.e-con.lmm-x.e-flex.footer-grid,
.e-con.lmm-x.e-flex.layout,
.e-con.lmm-x.e-flex.book-detail { --width: 100%; }

/* On the live site widget wrappers do not add boxes, so text, cards and
   images sit directly in the design's grids and flex rows. In the editor
   they keep their boxes so every widget can be selected and edited. */
body:not(.elementor-editor-active) .lmm-x > .elementor-element.elementor-widget,
body:not(.elementor-editor-active) .lmm-x > .elementor-element.elementor-widget > .elementor-widget-container,
body:not(.elementor-editor-active) .lmm-x > .elementor-element.elementor-widget-shortcode .elementor-shortcode {
  display: contents;
}
.elementor-editor-active .lmm-x > .elementor-element.elementor-widget { min-height: 8px; }

/* Undo Elementor's global resets where the design relies on browser defaults
   (the design rules themselves are scoped one level higher in lmm.el.css). */
.elementor a { text-decoration: underline; }
.elementor .lmm-x iframe { max-width: none; }

/* Image widget inside the design (book covers). */
.book-detail__cover .elementor-widget-image img,
.lmm-x .elementor-widget-image img { display: block; width: 100%; height: auto; }

/* Figures converted to containers keep figure spacing defined by the design. */
.e-con.lmm-figure { margin: 0; }

/* Theme Builder header: the top bar scrolls away, the main header stays pinned
   (same behaviour as the static design, where the header was a direct child of <body>). */
.elementor-location-header { position: sticky; top: -42px; z-index: 100; }
.elementor-location-header .site-header { position: relative; top: auto; }
.admin-bar .elementor-location-header { top: -10px; }
@media (max-width: 782px) { .admin-bar .elementor-location-header { top: -42px; } }

/* Contact form (Elementor Pro Form widget) inside the design's form card. */
.form-card .elementor-form .elementor-field-group > label { margin-bottom: 8px; }
.form-card .elementor-field-textual { padding: 13px 16px; min-height: 50px; }
.form-card textarea.elementor-field-textual { min-height: 170px; }
.form-card .elementor-button { box-shadow: 0 8px 22px rgba(215, 38, 61, .28); }

/* Search results */
.results-status { color: var(--muted); margin: 0 0 22px; }
.pager-links { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }
.pager-links .page-numbers { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.pager-links .current { background: var(--navy-500); color: #fff; border-color: var(--navy-500); }

/* Hello Elementor: content wrapper must not constrain full-width Elementor pages. */
.site-main.post-0, body.elementor-page .site-main { max-width: none; padding: 0; }

/* Decorative offsets never widen the page on small screens (the static design clips <main>). */
.elementor[data-elementor-type="wp-page"], .elementor[data-elementor-type="single-post"], .elementor[data-elementor-type="archive"],
.elementor[data-elementor-type="search-results"], .elementor[data-elementor-type="error-404"], .elementor-location-footer { overflow-x: clip; }

/* ---------------------------------------------------------------------------
   Sponsor stripe (footer template → "Sponsor stripe" text widget).
   Floats at the bottom of the screen; visitors can close it (remembered 30 days).
   --------------------------------------------------------------------------- */
.sponsor-bar { display: none; }
.sponsor-bar.is-visible {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  padding: 11px 56px 11px 20px; min-height: 46px;
  background: rgba(15, 27, 48, .96); color: rgba(255, 255, 255, .9);
  border-top: 2px solid var(--gold); box-shadow: 0 -8px 28px rgba(15, 27, 48, .22);
  font-family: var(--font-ui); font-size: 14px; line-height: 1.45; text-align: center;
  animation: lmm-sponsor-in .45s ease-out both;
}
.sponsor-bar p { margin: 0; }
.elementor .sponsor-bar a, .sponsor-bar a { color: var(--gold); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(212, 166, 74, .45); }
.sponsor-bar a:hover { color: #f5d48d; border-bottom-color: #f5d48d; }
.sponsor-bar__close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28);
  background: transparent; color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.sponsor-bar__close:hover, .sponsor-bar__close:focus-visible { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .55); }
/* room for the stripe is added to the (navy) footer, so no white band appears under it */
html.has-sponsor-bar .elementor-location-footer { padding-bottom: var(--sponsor-h, 46px); background: var(--navy-900); }
html.has-sponsor-bar .back-top { bottom: calc(var(--sponsor-h, 46px) + 14px); }
@keyframes lmm-sponsor-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sponsor-bar.is-visible { animation: none; } }
@media (max-width: 600px) { .sponsor-bar.is-visible { font-size: 13px; padding: 10px 52px 10px 14px; text-align: left; justify-content: flex-start; } }
@media print { .sponsor-bar { display: none !important; } }
/* In the Elementor editor the stripe shows in place so it can be edited. */
.elementor-editor-active .sponsor-bar { display: flex; position: static; animation: none; background: #0f1b30; color: #fff; padding: 11px 20px; justify-content: center; }

/* Footer template: its root-level widgets (overlays shortcode) must not add Elementor's widget spacing,
   which showed as a white strip under the footer. */
.elementor-location-footer > .elementor-element.elementor-widget { --kit-widget-spacing: 0px; margin-block-end: 0 !important; }

/* Footer bottom bar: Sitemap · Developed by … */
.footer-bottom__links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.footer-bottom__sep { opacity: .45; }

/* phones: keep the bottom line clear of the round back-to-top button */
@media (max-width: 760px) { .elementor-location-footer .footer-bottom { padding-right: 64px; } }