/*
 * Opuluxe Boutique - layout, spacing & alignment fixes
 * ----------------------------------------------------
 * Loaded from rhye-child/functions.php at wp_head priority 200, i.e. AFTER
 * Appearance > Customize > Additional CSS (which WordPress prints at
 * wp_head priority 101). That ordering is deliberate: a few rules below have
 * to win against rules that already live in Additional CSS.
 *
 * Contents
 *   0. Shared spacing tokens
 *   1. Global - undo the site-wide `text-align-last` override
 *   2. About pages (6 portfolio items) - identical, centred mastheads
 *   3. Lashes & Hair - content moved up, both pages identical
 *   4. Reviews slider - all 3 slides start at the same height
 *   5. Blog posts - moved down clear of the logo, side padding added
 *   6. Footer - the 3 widget columns aligned and evenly spaced
 */

/* ==========================================================================
   0. Shared spacing tokens
   Mirrors the theme's own fluid spacing scale (--distance-min/max-*), so any
   change made in the Customizer keeps flowing through to these fixes.
   ========================================================================== */

:root {
	--ob-space-xsmall: clamp(
		calc(var(--distance-min-xsmall, 30) * 1px),
		calc(var(--distance-min-xsmall, 30) * 1px + (var(--distance-max-xsmall, 50) - var(--distance-min-xsmall, 30)) * (100vw - 320px) / 1600),
		calc(var(--distance-max-xsmall, 50) * 1px)
	);
	--ob-space-small: clamp(
		calc(var(--distance-min-small, 30) * 1px),
		calc(var(--distance-min-small, 30) * 1px + (var(--distance-max-small, 80) - var(--distance-min-small, 30)) * (100vw - 320px) / 1600),
		calc(var(--distance-max-small, 80) * 1px)
	);
	--ob-space-medium: clamp(
		calc(var(--distance-min-medium, 40) * 1px),
		calc(var(--distance-min-medium, 40) * 1px + (var(--distance-max-medium, 160) - var(--distance-min-medium, 40)) * (100vw - 320px) / 1600),
		calc(var(--distance-max-medium, 160) * 1px)
	);
	--ob-space-large: clamp(
		calc(var(--distance-min-large, 100) * 1px),
		calc(var(--distance-min-large, 100) * 1px + (var(--distance-max-large, 240) - var(--distance-min-large, 100)) * (100vw - 320px) / 1600),
		calc(var(--distance-max-large, 240) * 1px)
	);

	/* Side padding used where the theme leaves content flush to the edge. */
	--ob-gutter: clamp(20px, 5vw, 60px);

	/* Fixed height for the About page title block, so every one of the six
	   hands over to the page content at exactly the same y position. Sized
	   for the longest title ("Expert Eyelash & Hair Extension Services") at
	   each breakpoint - the headings scale fluidly and wrap differently at
	   each size, hence the steps below. */
	--ob-about-header: 200px;
	--ob-about-masthead: calc(var(--ob-space-large) + var(--ob-about-header) + var(--ob-space-medium));
}

@media screen and (max-width: 1199px) {
	:root { --ob-about-header: 230px; }
}

@media screen and (max-width: 767px) {
	:root { --ob-about-header: 200px; }
}

@media screen and (max-width: 480px) {
	:root { --ob-about-header: 170px; }
}

/* ==========================================================================
   1. Global - undo the site-wide `text-align-last` override
   Additional CSS sets `text-align-last: center` on every Bootstrap column
   from 320px up. That centres the *last line* of any multi-line block inside
   a column, which is what throws the page titles and the footer out of
   alignment. Reset it only where it does visible damage.
   ========================================================================== */

.section-masthead [class*="col-"],
.section-masthead__header,
.footer [class*="col-"],
.footer__column,
.footer__column .widget,
.footer__column .widgettitle,
.footer__column .textwidget,
.header__widget {
	text-align-last: auto;
}

/* --------------------------------------------------------------------------
   Page titles: let the animated text take its heading's colour.
   Someone hand-edited the PARENT theme (rhye/css/main.css, line 105) to add
   `.split-text__line.overflow { color: #ede8da !important; }`. That paints
   every animated heading the same cream colour, so the titles on the About
   pages that sit on a light background are invisible. Restricted to page
   titles here so nothing else changes; on the dark pages the colour resolves
   to the same cream it already was.
   Worth removing that line from the parent theme too - it will come back on
   the next theme update.
   -------------------------------------------------------------------------- */

.section-masthead .split-text__line.overflow {
	color: inherit !important;
}

/* ==========================================================================
   2. About pages - the 6 portfolio items linked from /about/
   Each one was built with a different masthead layout (full-height, split
   half-screen, fixed/parallax, boxed container, left / right / centre
   aligned), so no two started at the same place. Everything below folds them
   into one shared layout: centred text, same top offset, same total height.
   ========================================================================== */

/* !important is needed on the padding because two of the pages carry
   Bootstrap spacing utilities (.pt-large, .pt-md-0, .pb-medium) and those
   ship with !important of their own. */
body.single-arts_portfolio_item .section-masthead {
	display: block;
	height: auto;
	min-height: 0;
	padding-top: var(--ob-space-large) !important;
	padding-bottom: var(--ob-space-medium) !important;
	text-align: center;
}

/* One page pins its masthead on scroll (Elementor's "fixed masthead"
   option); GSAP wraps it in a .pin-spacer whose height is the masthead plus
   the pin distance, which pushed the content 135px lower than on the other
   five pages. Sizing the spacer to the masthead alone lines it back up and
   leaves the pin effect itself working.
   Cleaner long-term fix: turn "Fixed masthead" off for that page in
   Elementor > Page Settings, after which this rule is a no-op. */
body.single-arts_portfolio_item .pin-spacer {
	height: var(--ob-about-masthead) !important;
	padding-bottom: 0 !important;
}

/* Drop the full-height / fixed behaviour some of the pages use. */
body.single-arts_portfolio_item .section-masthead .section-masthead__inner {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	min-height: 0;
	margin: 0;
	padding-left: var(--gutter-horizontal);
	padding-right: var(--gutter-horizontal);
}

/* Flatten the split (half-screen) mastheads back to a single column. */
body.single-arts_portfolio_item .section-masthead__inner .row {
	display: block;
	height: auto;
	margin-left: 0;
	margin-right: 0;
}

body.single-arts_portfolio_item .section-masthead__inner [class*="col-"],
body.single-arts_portfolio_item .section-masthead__inner > .row > .col,
body.single-arts_portfolio_item .section-masthead__inner .row > .col {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	height: auto;
	padding-left: 0;
	padding-right: 0;
}

body.single-arts_portfolio_item .section-masthead__inner .container,
body.single-arts_portfolio_item .section-masthead__inner .container-fluid {
	width: 100%;
	max-width: none;
	height: auto;
	padding-left: 0;
	padding-right: 0;
}

/* .container-fluid_paddings adds 120px top and bottom; .h-100 is a Bootstrap
   utility that carries !important. Both have to go for the nested layouts to
   collapse down to the shared one. */
body.single-arts_portfolio_item .section-masthead__inner .container-fluid_paddings {
	padding-top: 0;
	padding-bottom: 0;
}

body.single-arts_portfolio_item .section-masthead__inner .h-100 {
	height: auto !important;
}

/* One page pulls its header out of flow with position:absolute, so put it
   back. The fixed height is what guarantees the page content below starts at
   the same y on all six, whether the title runs to one line or three. */
body.single-arts_portfolio_item .section-masthead__header,
body.single-arts_portfolio_item .section-masthead__header_absolute {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	min-height: var(--ob-about-header);
	margin: 0;
	transform: none;
	text-align: center;
}

body.single-arts_portfolio_item .section-masthead .entry-title,
body.single-arts_portfolio_item .section-masthead .section-masthead__heading {
	text-align: center;
}

body.single-arts_portfolio_item .section-masthead .section__headline {
	margin-left: auto;
	margin-right: auto;
}

/* The empty image half and the scroll-down cue only exist on some of the six
   pages; hiding them is what makes the set consistent. */
body.single-arts_portfolio_item .section-masthead .section-masthead__bg,
body.single-arts_portfolio_item .section-masthead .section-masthead__scroll-down {
	display: none !important; /* one page carries .d-lg-block, which is !important */
}

/* Two of the six wrap their title in a `data-arts-theme-text="light"` element
   - left over from a half-screen layout with a dark image beside it - which
   painted the title cream on a cream background. The section itself is
   correctly marked as needing dark text, so follow that. */
body.single-arts_portfolio_item .section-masthead[data-arts-theme-text="dark"] .entry-title,
body.single-arts_portfolio_item .section-masthead[data-arts-theme-text="dark"] .section-masthead__heading,
body.single-arts_portfolio_item .section-masthead[data-arts-theme-text="dark"] .split-text__line.overflow {
	color: var(--h1-color-dark) !important;
}

@media screen and (max-width: 991px) {
	body.single-arts_portfolio_item .section-masthead .section-masthead__inner {
		padding-left: var(--ob-gutter);
		padding-right: var(--ob-gutter);
	}
}

/* ==========================================================================
   3. Lashes & Hair
   Both pages already share a masthead; only the Elementor container padding
   differed (5% vs 0% below 1024px), which is why they did not line up. The
   dead space between the title rule and the body copy is removed here too.
   ========================================================================== */

body.page-id-2928 .section-masthead,
body.page-id-2917 .section-masthead {
	padding-top: var(--ob-space-large);
	padding-bottom: 0;
}

body.page-id-2928 .elementor > .e-con,
body.page-id-2917 .elementor > .e-con {
	--padding-top: clamp(16px, 2vw, 32px);
	--padding-bottom: var(--ob-space-small);
	--padding-left: var(--gutter-horizontal);
	--padding-right: var(--gutter-horizontal);
}

@media screen and (max-width: 991px) {
	body.page-id-2928 .elementor > .e-con,
	body.page-id-2917 .elementor > .e-con {
		--padding-left: var(--ob-gutter);
		--padding-right: var(--ob-gutter);
	}
}

/* ==========================================================================
   4. Reviews slider - the 3 review "pages"
   The three reviews are slides in one slider, and the slider resizes itself
   to whichever slide is showing. Anchor the slide content to the top and
   give the slides a common minimum height so all three read from the same
   position.
   ========================================================================== */

body.page-id-1367 .slider-fullscreen-projects__content .swiper-slide > a {
	width: 100%;
	align-items: center;
	justify-content: flex-start;
}

body.page-id-1367 .slider-fullscreen-projects__content .slider__heading,
body.page-id-1367 .slider-fullscreen-projects__content .slider__text {
	display: block;
	width: 100%;
}

@media screen and (max-width: 991px) {
	/* Swiper sizes the slider to whichever slide is showing, so a shorter
	   review used to sit higher up the page than a longer one. A shared
	   minimum height keeps all three starting in the same place.
	   Re-check this value if the review copy is ever rewritten. */
	body.page-id-1367 .slider-fullscreen-projects__content .swiper-slide {
		min-height: 340px;
	}
}

@media screen and (max-width: 767px) {
	body.page-id-1367 .slider-fullscreen-projects__content .swiper-slide {
		min-height: 410px;
	}
}

/* ==========================================================================
   5. Blog posts
   Below 1024px the single-post template ran its containers edge to edge and
   left only 14% of the (small) viewport width above the title, so the title
   collided with the logo.
   ========================================================================== */

@media screen and (max-width: 1199px) {
	body.single-post .elementor-location-single > .e-con {
		--padding-left: var(--ob-gutter);
		--padding-right: var(--ob-gutter);
	}

	body.single-post .elementor-location-single > .e-con:first-child {
		--margin-top: clamp(130px, 24vw, 220px);
	}
}

/* ==========================================================================
   6. Footer
   Additional CSS centres every .col-lg-3 but then singles the first widget
   out with `section#text-10 { text-align-last: left; width: 350px; }`, which
   left "PREMISES" hanging out of its column while the other two sat centred.
   The !important below is only needed to out-rank that ID selector.
   ========================================================================== */

.footer__area_upper .footer__column,
.footer__area_upper .footer__column .widget,
.footer__area_upper .footer__column .widgettitle,
.footer__area_upper .footer__column .textwidget,
.footer__area_upper .footer__column .textwidget p {
	text-align: center;
	text-align-last: auto;
}

.footer__area_upper .footer__column .widget {
	width: auto !important; /* overrides `section#text-10 { width: 350px }` */
	max-width: 100%;
}

.footer__area_upper .footer__column .widget:last-child {
	margin-bottom: 0;
}

/* Keep the three columns level when one of them wraps onto two lines. */
.footer__area_upper .row.justify-content-lg-between {
	align-items: flex-start;
}

@media screen and (max-width: 991px) {
	.footer__area_upper .footer__column {
		margin-bottom: var(--ob-space-xsmall);
	}

	.footer__area_upper .footer__column:last-child {
		margin-bottom: 0;
	}
}