/*
 * Piranhas Onsen — Elementor glue.
 *
 * Pages are native Elementor widgets inside containers that carry the theme's
 * own class names. site.css (loaded AFTER Elementor's frontend CSS, see
 * functions.php) already styles those classes; this file only handles what
 * Elementor's container model needs on top:
 *
 *  - Elementor gives every container `prop: var(--prop)` defaults. Only the
 *    VARIABLES are reset here (never hard padding/margin), so a theme class
 *    that declares its own padding still wins.
 *  - Elementor forces flex-direction:column via a per-element variable, so
 *    row layouts are declared explicitly, and their container children are
 *    sized auto (Elementor containers default to width:100% and would wrap).
 *  - Elementor reserves `::before` on containers for its background overlay;
 *    the theme's decorative pseudo-elements on containers use `::after`.
 */

/* ==========================================================================
   Containers — reset Elementor's box-model VARIABLES only
   ========================================================================== */
.e-con.po {
	--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
	--margin-top: 0px; --margin-right: 0px; --margin-bottom: 0px; --margin-left: 0px;
	--row-gap: 0px; --column-gap: 0px;
	--content-width: 100%;
	--min-height: 0px;
}
/* Theme rhythm + widths on Elementor containers. */
.e-con.po.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.e-con.po.container.narrow { max-width: var(--container-narrow); }
.e-con.po.narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.e-con.po.section { padding-block: var(--space-section); }
.e-con.po.section-sm { padding-block: clamp(2.5rem, 1.9rem + 3vw, 4.75rem); }
.e-con.po.pricing-band { padding-block: clamp(3.5rem, 2.6rem + 4vw, 6rem); }
.e-con.po.bg-cream { background: var(--cream); }
.e-con.po.bg-sage { background: var(--sage); color: var(--cream); }
.e-con.po.bg-ink { background: var(--ink); color: var(--ivory); }

/* Grids: Elementor containers are flex by default — switch the theme's grids
   back to grid; the column templates come from site.css. */
.e-con.po:is(.split, .facets, .ritual, .uniq-grid, .related-grid, .exp-grid,
	.outcome-grid, .pkg-flow, .posts, .info-grid, .stats, .ritual-stack,
	.ben-grid, .pkg-grid, .photo-grid, .contact-grid, .article-layout,
	.benefits-split, .shift-stack, .facet, .ritual-row, .offer-list, .spec-row,
	.gallery, .shift-row) { display: grid; }

/* Stacks keep their vertical rhythm. */
.e-con.po.stack > * + * { margin-top: 1.25rem; }

/* Row layouts (Elementor's per-element variable forces column). */
.e-con.po:is(.hero-actions, .hero-ctas, .actions, .price-table-ctas, .nav-ctas,
	.price-row, .hero-anchor, .pkg-specs, .social-row, .r-head, .r-total,
	.carousel-nav, .carousel-arrows, .carousel-dots, .floorplan-actions,
	.journal-head, .bb-text) {
	display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
}
/* The package booking bar is mobile-only (site.css hides it on desktop); only its direction is set here. */
.e-con.po.pkg-bookbar { flex-direction: row; }
.e-con.po:is(.hero-actions, .hero-ctas, .actions, .price-table-ctas) { gap: 1rem; }
.e-con.po.actions { margin-top: 2rem; }
/* Children of a row must not be full-width Elementor containers. */
.e-con.po:is(.hero-actions, .hero-ctas, .actions, .price-table-ctas, .price-row,
	.hero-anchor, .pkg-specs, .social-row, .r-head, .r-total, .journal-head,
	.bb-text, .pkg-bookbar, .carousel-nav) > :is(.e-con, .elementor-widget) {
	--width: auto; width: auto; flex: 0 1 auto;
}
.e-con.po.price-row > .e-con { flex: 1 1 0; }          /* three even price columns */
.e-con.po.bb-text { flex-direction: column; align-items: flex-start; flex: 1 1 auto; }
.e-con.po.pkg-bookbar { flex-wrap: nowrap; justify-content: space-between; }
/* Centred CTA rows (the hand-coded site centred these inline). */
.e-con.po.band .price-table-ctas, .e-con.po.pricing-band .price-table-ctas,
.e-con.po.cta-band .actions { justify-content: center; }

/* Offer-strip items stack icon over label. */
.e-con.po.offer-item { display: flex; flex-direction: column; }

/* Interactive showcase (desktop): slides stack absolutely — keep Elementor from
   flexing them. On phones site.css hides the showcase and shows the card grid. */
@media (min-width: 901px) {
	.e-con.po.showcase { display: block; position: relative; }
	.e-con.po.exp-grid.inside-fallback { display: none; }
}
@media (max-width: 900px) { .e-con.po.showcase { display: none; } }
.e-con.po:is(.sc-slides, .sc-slide, .sc-bg, .sc-text, .carousel) { display: block; }
.e-con.po.showcase-list { display: flex; flex-direction: column; }

/* ==========================================================================
   Image heroes: dark base, bottom-aligned content, backdrop behind content
   ========================================================================== */
.e-con.po.hero, .e-con.po.page-hero.has-bg {
	position: relative; overflow: hidden; background: var(--ink); isolation: isolate;
	flex-direction: row; align-items: flex-end;   /* theme's align:flex-end means "bottom" in a row */
}
.e-con.po.hero > .hero-inner, .e-con.po.page-hero.has-bg > .container { position: relative; z-index: 3; width: 100%; }
/* Homepage hero backdrop (.hero-bg wraps the image slot). */
.hero .hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero .hero-bg::after { z-index: 1; }
.hero .hero-bg .img-slot { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
/* Facility/package hero backdrop: the decorative group holds image slot + kanji + category. */
.e-con.po.page-hero-deco { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; }
.page-hero.has-bg .page-hero-deco > .img-slot { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; z-index: 0; }
.e-con.po.page-hero-deco::after {               /* dark wash over the photo (Elementor owns ::before) */
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(43,40,32,0.90) 0%, rgba(43,40,32,0.80) 40%, rgba(43,40,32,0.98) 100%);
}
.page-hero.has-bg .page-hero-deco .hero-kanji { z-index: 2; }
.page-hero.has-bg .page-hero-deco .hero-category { z-index: 2; }

/* Tinted hero: its radial glow lived on ::before, which Elementor reserves — move it. */
.e-con.po.page-hero.tinted::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(130% 80% at 50% -12%, color-mix(in srgb, var(--sage) 45%, transparent), transparent 58%);
}
.e-con.po.page-hero.tinted > .container { position: relative; z-index: 2; }

/* ==========================================================================
   Widgets
   ========================================================================== */
/* Elementor caps inner widgets' width and spaces them; let the theme decide. */
.e-con.po > .elementor-widget { max-width: 100%; }
.elementor-widget:where(:not(:last-child)) { margin-block-end: 0; }

/* Headings: reset Elementor's margin only. COLOUR is left to site.css, whose
   tag rules (h1..h4 + .hero/.page-hero/.bg-sage/.bg-ink overrides) already
   colour these tags correctly on light and dark sections. */
.elementor-widget-heading .elementor-heading-title { margin: 0; }
.elementor-widget-heading h4.elementor-heading-title { font-weight: 500; }
.elementor-widget-heading .elementor-heading-title a { color: inherit; text-decoration: none; }
.elementor-widget.mt-0 .elementor-heading-title { margin-top: 0; }

/* Eyebrow: the class is on the widget wrapper, so style its inner element. */
.elementor-widget.eyebrow .elementor-heading-title {
	font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 500;
	letter-spacing: 0.32em; text-transform: uppercase; color: var(--sage-700);
	display: inline-flex; align-items: center; gap: 0.8em;
}
.elementor-widget.eyebrow .elementor-heading-title::before { content: ""; width: 2.2em; height: 1px; background: currentColor; opacity: 0.5; }
.elementor-widget.eyebrow.center .elementor-heading-title::after { content: ""; width: 2.2em; height: 1px; background: currentColor; opacity: 0.5; }
.bg-sage .eyebrow .elementor-heading-title, .hero .eyebrow .elementor-heading-title,
.page-hero.has-bg .eyebrow .elementor-heading-title, .page-hero.tinted .eyebrow .elementor-heading-title,
.sc-text .eyebrow .elementor-heading-title { color: color-mix(in srgb, var(--ivory) 85%, transparent); }
.bg-ink .eyebrow .elementor-heading-title { color: color-mix(in srgb, var(--ivory) 80%, transparent); }

/* Section head (eyebrow + h2 + intro) */
.e-con.po.section-head { max-width: 60ch; }
.e-con.po.section-head.center { margin-inline: auto; text-align: center; }
.e-con.po.section-head .elementor-widget:not(:last-child) { margin-bottom: 1.2rem; }

/* Text: classes are baked onto the inner <p>, so site.css already matches. */
.elementor-widget-text-editor { color: inherit; }
.elementor-widget-text-editor p { max-width: 64ch; }

/* Buttons: the class sits on the widget wrapper; the <a> is .elementor-button. */
.elementor-widget-button .elementor-button {
	display: inline-flex; align-items: center; gap: 0.7em;
	font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500;
	letter-spacing: 0.16em; text-transform: uppercase;
	padding: 1.1em 2.1em; border-radius: var(--radius-pill);
	background: var(--sage-600); color: #fff; border: 0;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.elementor-widget-button .elementor-button:hover { transform: translateY(-2px); }
.elementor-widget-button.btn-wa .elementor-button { background: var(--sage-600); color: #fff; box-shadow: var(--shadow-soft); }
.elementor-widget-button.btn-wa .elementor-button:hover { background: var(--sage-700); box-shadow: var(--shadow-lift); }
.elementor-widget-button.btn-wa .elementor-button::before {
	content: ""; flex: 0 0 auto; width: 1.15em; height: 1.15em; background: currentColor;
	-webkit-mask: var(--wa-icon) center / contain no-repeat; mask: var(--wa-icon) center / contain no-repeat;
}
.elementor-widget-button.btn-outline .elementor-button { background: transparent; color: var(--ink); border: 1px solid currentColor; }
.elementor-widget-button.btn-outline .elementor-button:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.elementor-widget-button.btn-primary .elementor-button { background: var(--sage-600); color: #fff; box-shadow: var(--shadow-soft); }
.bg-sage .btn-wa .elementor-button { background: var(--cream); color: var(--sage-700); }
.bg-sage .btn-wa .elementor-button:hover { background: #fff; color: var(--sage-700); }
.bg-sage .btn-outline .elementor-button, .bg-ink .btn-outline .elementor-button,
.page-hero.has-bg .btn-outline .elementor-button, .page-hero.tinted .btn-outline .elementor-button,
.hero .btn-outline .elementor-button, .sc-text .btn-outline .elementor-button {
	color: var(--ivory); border-color: color-mix(in srgb, var(--ivory) 55%, transparent);
}
.bg-sage .btn-outline .elementor-button:hover { background: var(--cream); color: var(--sage-700); border-color: var(--cream); }
.bg-ink .btn-outline .elementor-button:hover, .page-hero.has-bg .btn-outline .elementor-button:hover,
.page-hero.tinted .btn-outline .elementor-button:hover, .hero .btn-outline .elementor-button:hover,
.sc-text .btn-outline .elementor-button:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
/* The .btn classes also land on Elementor's widget WRAPPER; strip the pill (and the
   WhatsApp icon pseudo) from the wrapper so only the inner <a> is the button. */
.elementor-widget-button.btn { background: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0; letter-spacing: normal; text-transform: none; display: block; color: inherit; }
.elementor-widget-button.btn::before, .elementor-widget-button.btn::after { content: none !important; }
.elementor-widget-button.btn:hover { transform: none; }

/* Toggle widget → the theme's FAQ / benefits accordions */
.faq .elementor-toggle-item, .benefits-acc .elementor-toggle-item { border-bottom: 1px solid color-mix(in srgb, var(--taupe) 20%, transparent); }
.faq .elementor-toggle-item:first-child, .benefits-acc .elementor-toggle-item:first-child { border-top: 1px solid color-mix(in srgb, var(--taupe) 20%, transparent); }
.faq .elementor-tab-title, .benefits-acc .elementor-tab-title {
	position: relative; margin: 0; padding: 1.4rem 2.5rem 1.4rem 0; border: 0; cursor: pointer;
	font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h4); color: var(--heading);
}
.faq .elementor-tab-title .elementor-toggle-icon, .benefits-acc .elementor-tab-title .elementor-toggle-icon {
	position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 1em; color: var(--sage-700); fill: var(--sage-700);
}
.faq .elementor-tab-content, .benefits-acc .elementor-tab-content { padding: 0 0 1.4rem; border: 0; color: var(--taupe); }
.faq .elementor-tab-content p, .benefits-acc .elementor-tab-content p { margin: 0; max-width: 60ch; }

/* Shortcode widgets (forms, journal) pass straight through. */
.elementor-widget-shortcode { width: 100%; }

/* ==========================================================================
   Mobile — mirror the theme's own breakpoints where a desktop override above
   would otherwise beat site.css (same rules, same widths as site.css).
   ========================================================================== */
/* Card rows become a swipe slider (site.js adds .is-slider) — must not stay a grid. */
@media (max-width: 760px) {
	.e-con.po:is(.related-grid, .exp-grid).is-slider { display: flex; }
	/* Package booking bar: fixed row, text grows, button hugs. */
	.e-con.po.pkg-bookbar > :is(.e-con, .elementor-widget) { --width: auto; width: auto; flex: 0 0 auto; }
	.e-con.po.pkg-bookbar > .bb-text { flex: 1 1 auto; min-width: 0; }
}
/* Centred hero at phone width: prices stack, rows centre. */
@media (max-width: 620px) {
	.e-con.po.hero-anchor { flex-direction: column; align-items: center; gap: 1.1rem; }
	.e-con.po.hero-anchor > .e-con { width: auto; }
	.e-con.po:is(.hero-actions, .hero-ctas, .actions) { justify-content: center; }
}
/* Stacked full-width CTA buttons on small phones. */
@media (max-width: 480px) {
	.e-con.po.price-table-ctas { flex-direction: column; align-items: stretch; }
	.e-con.po.price-table-ctas > .elementor-widget { width: 100%; }
	.price-table-ctas .elementor-button { width: 100%; justify-content: center; }
}

/* In the editor, tighter section rhythm makes pages easier to work on. */
.elementor-editor-active .e-con.po.section { padding-block: clamp(2rem, 1.5rem + 2vw, 4rem); }

/* Elementor EDITOR: content is rendered after the theme script runs, so never
   leave scroll-reveal elements at opacity 0 while editing. */
.elementor-editor-active .reveal, .elementor-editor-preview .reveal, body.elementor-editor-active .reveal.d1,
.elementor-editor-active .reveal.d2, .elementor-editor-active .reveal.d3, .elementor-editor-active .reveal.d4 {
	opacity: 1 !important; transform: none !important; transition: none !important;
}