/* The 5 Realms: Sensuosity Elementor/Astra adapter (PITFALLS 3), plus min-width:auto (findings 8). */
/* === ELEMENTOR ADAPTER ===
   Pages are generated from the design HTML: all layout comes from the design CSS.
   Specificity ladder (finding #13): Elementor rules (up to ~(0,2,0), e.g. .e-con.e-flex,
   .e-con>.e-con) < this adapter (0,2,0), later in cascade) < design rules (bumped to
   (1,x,x) via :not(#_) by scripts/build-page-css.py). Do not weaken or strengthen
   either side without re-running the full preview + staging diffs. */
:is([data-elementor-type="wp-page"],[data-elementor-type="header"],[data-elementor-type="footer"]) .e-con{display:block;padding:0;gap:0;max-width:none;width:auto;height:auto;min-height:0;min-width:auto;flex-direction:row;flex-wrap:nowrap;margin:0}
/* flex-wrap:nowrap: Elementor forces wrap on mobile (<768px), which makes stretched
   flex items' cross-size indefinite and collapses aspect-ratio image blocks to 0.
   min-width:auto: Elementor sets 0, which lets flex rows squeeze items a plain div would not
   (The 5 Realms hero stats at 375px). */
:is([data-elementor-type="wp-page"],[data-elementor-type="header"],[data-elementor-type="footer"]) .elementor-widget-html,
:is([data-elementor-type="wp-page"],[data-elementor-type="header"],[data-elementor-type="footer"]) .elementor-widget-text-editor,
:is([data-elementor-type="wp-page"],[data-elementor-type="header"],[data-elementor-type="footer"]) .elementor-widget-html>.elementor-widget-container,
:is([data-elementor-type="wp-page"],[data-elementor-type="header"],[data-elementor-type="footer"]) .elementor-widget-text-editor>.elementor-widget-container{display:contents}

/* Elementor's site kit gives text widgets Roboto and a separate text colour.
   The supplied page design must inherit its own typography through the wrappers. */
:is([data-elementor-type="wp-page"],[data-elementor-type="header"],[data-elementor-type="footer"]) .elementor-widget-text-editor{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit}

/* === BUTTON RESET (Astra/Gutenberg print generic button styles AFTER our sheets) === */
:is([data-elementor-type="wp-page"],[data-elementor-type="header"],[data-elementor-type="footer"]) :where(button){background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;line-height:inherit;border-radius:0;cursor:pointer}

/* Astra scroll-to-top button: not part of the design */
#ast-scroll-top{display:none!important}

/* Astra wraps Elementor page content in .ast-container (max-width 1240), and our
   reset removes its margin:auto centering, pinning the whole page left on wide
   screens while header/footer span the viewport (finding #23). Full-bleed it:
   section widths are the design CSS's job. */
body.page-template-elementor_header_footer .ast-container{max-width:none;width:100%;padding:0;margin:0}

/* Newsletter result line, added by js/site.js under the design's signup strip. */
.nl-msg:not(#_){font-size:13px;font-weight:300;line-height:1.7;color:var(--text-sub);margin:14px auto 0;text-align:center;min-height:1.7em}

/* Phones: the design pins its four hero stats to the bottom of a 100vh hero in one row. On a short
   screen (375x667, or an iPhone with Safari's bars) they sit on the buttons, and the fourth runs off
   the right edge. On phones they follow the buttons in a 2x2 grid (findings 23, deviations 20). Two
   :not(#_) because the design's own .hero rules are already (1,1,0) and load later. */
@media(max-width:768px){
.hero:not(#_):not(#_){height:auto;min-height:100vh;flex-direction:column;justify-content:center;align-items:stretch;padding:calc(var(--nav-h) + 40px) 0 56px}
.hero-stats:not(#_):not(#_){position:relative;bottom:auto;left:auto;right:auto;margin:40px 24px 0;display:grid;grid-template-columns:1fr 1fr;gap:24px}
}

/* Phones up to 420px: the design's header (logo, "Book Now", menu button) is 42px wider than a 375px screen, so the
   menu button sat partly off the right edge (findings 24, deviations 21). Tighter spacing, same look. */
@media(max-width:420px){
.ni:not(#_):not(#_){padding:0 16px;gap:10px}
.na:not(#_):not(#_){gap:14px}
.bn:not(#_):not(#_){padding:11px 12px}
}

/* Phones: the gift voucher preview keeps the design's 1.618:1 card shape, which leaves too little height for its
   content at phone width, so the recipient's name ran into "Redeemable for any treatment" (findings 25,
   deviations 22). Up to 600px the card is as tall as its content. */
@media(max-width:600px){.voucher:not(#_):not(#_){aspect-ratio:auto;gap:22px}}