/*!
 * All-In-One-Coach — core tokens, shared components, motion primitives.
 * Logical properties throughout, so RTL is a direction flip, not a rewrite.
 */

:root {
	/* The shell every section's content sits in. Header, footer and each
	   widget resolve their width and side gutter from these two, so the copy
	   in one section lines up with the copy in the next. */
	--aioc-shell-max: 1560px;
	--aioc-shell-gut: 80px;

	--aioc-cream: #ede3d8;
	--aioc-ink: #171313;
	--aioc-maroon: #5e110f;
	--aioc-clay: #8a4b36;
	--aioc-sand: #e8c9a0;
	--aioc-muted: #6b5b52;

	--aioc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--aioc-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--aioc-dur: 0.6s;
}

/* ------------------------------------------------------- Designer scrollbar */

/* The classes are printed server-side so both can be filtered off in PHP. */

html.aioc-smooth {
	scroll-behavior: smooth;
}

html.aioc-scrollbar {
	/* Reserving the gutter stops the page jumping when a dialog locks scroll. */
	scrollbar-gutter: stable;
	/* Firefox + modern standards track. */
	scrollbar-width: thin;
	scrollbar-color: var(--aioc-maroon) rgba(94, 17, 15, 0.07);
}

html.aioc-scrollbar::-webkit-scrollbar {
	width: 11px;
	height: 11px;
}

html.aioc-scrollbar::-webkit-scrollbar-track {
	background-color: rgba(94, 17, 15, 0.07);
}

html.aioc-scrollbar::-webkit-scrollbar-thumb {
	border: 3px solid transparent;
	border-radius: 999px;
	background-color: var(--aioc-maroon);
	background-clip: content-box;
	transition: background-color 0.3s linear;
}

html.aioc-scrollbar::-webkit-scrollbar-thumb:hover,
html.aioc-scrollbar::-webkit-scrollbar-thumb:active {
	border-width: 2px;
	background-color: var(--aioc-clay);
}

html.aioc-scrollbar::-webkit-scrollbar-corner {
	background: transparent;
}

/* Inner scrollers (mobile menu, overflow panels) get the same treatment. */
.aioc-scrollbar .aioc-header__panel::-webkit-scrollbar {
	width: 6px;
}

.aioc-scrollbar .aioc-header__panel::-webkit-scrollbar-thumb {
	border: 0;
	border-radius: 999px;
	background-color: rgba(94, 17, 15, 0.35);
}

/* Scroll is locked by a class, never by inline styles, so nothing else on the
   page can be left with a stray overflow value. */
html.aioc-scroll-locked {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	html.aioc-smooth {
		scroll-behavior: auto;
	}
}

/* ---------------------------------------------------------------- Utilities */

.aioc-hero,
.aioc-header,
.aioc-coaching,
.aioc-about,
.aioc-process,
.aioc-reviews,
.aioc-booking,
.aioc-footer,
.aioc-hero *,
.aioc-header *,
.aioc-coaching *,
.aioc-about *,
.aioc-process *,
.aioc-reviews *,
.aioc-booking *,
.aioc-footer * {
	box-sizing: border-box;
}

.aioc-header .screen-reader-text,
.aioc-hero .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* A line mask: the inner span slides up from behind the mask edge. */
.aioc-line {
	display: block;
	overflow: hidden;
	padding-block-end: 0.06em;
	margin-block-end: -0.06em;
}

.aioc-line__inner {
	display: block;
	transform-origin: 0 100%;
	will-change: transform;
}

.aioc-split-word {
	display: inline-block;
	white-space: pre;
}

.aioc-split-char {
	display: inline-block;
	will-change: transform, opacity;
}

/* -------------------------------------------- Pre-animation state (JS only) */

.aioc-js .aioc-anim [data-aioc-el] {
	opacity: 0;
}

.aioc-js .aioc-anim [data-aioc-el] .aioc-line__inner {
	transform: translate3d(0, 110%, 0);
}

.aioc-js .aioc-anim.aioc-revealed [data-aioc-el] {
	opacity: 1;
}

/* Once the module has taken over, GSAP owns the inline styles. If GSAP never
   arrived, these rules are what puts the content back on screen. */
.aioc-anim.aioc-revealed [data-aioc-el] {
	opacity: 1;
}

.aioc-anim.aioc-revealed [data-aioc-el] .aioc-line__inner {
	transform: translate3d(0, 0, 0);
}

/* ----------------------------------------------------------- Display face */

/*
 * Elementor's global typography (Site Settings → Typography) emits rules like
 * `.elementor-kit-7 h2 { font-family: … }`. That is one class plus one element,
 * which outranks the single class each widget uses for its heading — so a
 * global heading font silently replaced Coolvetica even though the webfont was
 * loading perfectly well.
 *
 * Re-asserted here with the section root in front, which outranks the kit rule
 * while staying level with Elementor's own per-widget typography control
 * (`.elementor-element-xxx .aioc-…__heading`). That one still wins, because it
 * is loaded later — so setting a font on an individual widget keeps working.
 *
 * Only font-family is restated. The sizes stay where they are, in each widget's
 * own rules and media queries, which would otherwise be outranked by this.
 */
.aioc-hero .aioc-hero__heading,
.aioc-coaching .aioc-coaching__heading,
.aioc-about .aioc-about__heading,
.aioc-process .aioc-process__heading,
.aioc-process .aioc-process__title,
.aioc-reviews .cr-heading,
.aioc-reviews .cr-title,
.aioc-booking .cb-headline,
.aioc-footer .aioc-footer__headline,
.aioc-footer .aioc-footer__name,
.aioc-header .aioc-header__logo-text,
.aioc-header .aioc-menu--panel .aioc-navlink {
	font-family: var(--aioc-font-display);
}

/* ------------------------------------------------------------------- Button */

.aioc-btn {
	--aioc-btn-bg: var(--aioc-maroon);
	--aioc-btn-fg: #f6efe7;
	--aioc-btn-bg-hover: var(--aioc-sand);
	--aioc-btn-fg-hover: var(--aioc-maroon);

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	isolation: isolate;
	padding: 22px 34px;
	border: 0;
	border-radius: 60px;
	background-color: var(--aioc-btn-bg);
	color: var(--aioc-btn-fg);
	font-family: var(--aioc-font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transform: translate3d(0, 0, 0);
	transition: color 0.45s var(--aioc-ease-inout), box-shadow 0.45s var(--aioc-ease-inout);
	will-change: transform;
}

.aioc-btn:focus-visible {
	outline: 2px solid var(--aioc-btn-bg);
	outline-offset: 3px;
}

.aioc-btn__fill {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--aioc-btn-bg-hover);
	transform: translate3d(0, 101%, 0);
	transition: transform 0.65s var(--aioc-ease-inout);
}

/* Hover is gated behind a real pointer. On a touch screen :hover latches
   after a tap, which left the button sitting in its hovered colours — sand
   fill, maroon label — until something else was tapped. :focus-visible is
   kept outside the gate so keyboard users still get the same feedback. */
@media (hover: hover) and (pointer: fine) {
	.aioc-btn:hover {
		color: var(--aioc-btn-fg-hover);
	}

	.aioc-btn:hover .aioc-btn__fill {
		transform: translate3d(0, 0, 0);
	}

	.aioc-btn:hover .aioc-btn__text {
		transform: translate3d(0, -110%, 0);
	}

	.aioc-btn:hover .aioc-btn__text--ghost {
		transform: translate3d(0, 0, 0);
	}

	.aioc-btn:hover .aioc-btn__icon {
		transform: translate3d(3px, -3px, 0);
	}

	[dir="rtl"] .aioc-btn:hover .aioc-btn__icon {
		transform: scaleX(-1) translate3d(3px, -3px, 0);
	}
}

.aioc-btn:focus-visible {
	color: var(--aioc-btn-fg-hover);
}

.aioc-btn:focus-visible .aioc-btn__fill {
	transform: translate3d(0, 0, 0);
}

.aioc-btn__label {
	position: relative;
	display: block;
	overflow: hidden;
}

.aioc-btn__text {
	display: block;
	transition: transform 0.55s var(--aioc-ease-inout);
}

.aioc-btn__text--ghost {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	transform: translate3d(0, 110%, 0);
}

.aioc-btn:focus-visible .aioc-btn__text {
	transform: translate3d(0, -110%, 0);
}

.aioc-btn:focus-visible .aioc-btn__text--ghost {
	transform: translate3d(0, 0, 0);
}

.aioc-btn__icon {
	display: inline-flex;
	transition: transform 0.5s var(--aioc-ease-out);
}



[dir="rtl"] .aioc-btn__icon {
	transform: scaleX(-1);
}



.aioc-btn--sm {
	padding: 15px 26px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.aioc-btn--block {
	display: flex;
	width: 100%;
}

/* -------------------------------------------------- Mobile full-bleed rows */

/* Each widget sits inside an Elementor container that brings padding of its
   own, and the two stack: the copy ended up 50px+ from the screen edge instead
   of the 10px its own stylesheet asks for. On phones each section therefore
   spans the full viewport whatever an ancestor pads, and its inner wrapper
   supplies the only padding the content sees.
   The rule is on the section, not the inner row, because several sections clip
   their own overflow — a full-bleed row inside one would be cut back to the
   container's width. */
@media (max-width: 767px) {
	html.aioc-scrollbar {
		/* A reserved gutter would make 100vw wider than the page, and these
		   rules need the two to agree. Phones use overlay scrollbars anyway. */
		scrollbar-gutter: auto;
	}

	.aioc-hero,
	.aioc-coaching,
	.aioc-about,
	.aioc-process,
	.aioc-reviews,
	.aioc-booking,
	.aioc-footer {
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw);
	}
}

/* ------------------------------------------------------- Mobile buttons */

/* Phones get one button shape across every section: full width, a comfortable
   tap target, and a label that centres instead of running out of the pill.
   None of this applies above 768px, so the desktop buttons are untouched. */
@media (max-width: 767px) {
	.aioc-btn,
	.aioc-btn--sm {
		display: flex;
		width: 100%;
		min-height: 52px;
		padding: 16px 20px;
		font-size: 12px;
		letter-spacing: 0.06em;
		text-align: center;
	}

	/* The label must never be cut: an ellipsis here truncated "Book a free
	   assessment call" mid-word. A long label wraps and the pill grows. */
	.aioc-btn__label {
		min-width: 0;
		overflow: visible;
	}

	.aioc-btn__text {
		overflow: visible;
		white-space: normal;
		text-overflow: clip;
	}

	/* The roll-up duplicate only works on a single line, so on phones — where
	   there is no hover anyway — it is dropped rather than left to overlap a
	   wrapped label. */
	.aioc-btn__text--ghost {
		display: none;
	}
}

/* ----------------------------------------------------------- Swipe hint */

/* Only ever shown on a touch-sized screen, where a horizontal scroller has no
   scrollbar to advertise itself. */
.aioc-swipe {
	display: none;
}

@media (max-width: 767px) {
	.aioc-swipe {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 9px 16px;
		border: 1px solid currentColor;
		border-radius: 999px;
		color: var(--aioc-maroon);
		font-family: var(--aioc-font-body);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.14em;
		line-height: 1;
		text-transform: uppercase;
		transition: opacity 0.4s var(--aioc-ease-out);
	}

	/* Once the visitor has scrolled, the hint has done its job. */
	.aioc-swipe.is-done {
		opacity: 0;
		pointer-events: none;
	}

	.aioc-swipe__arrow {
		display: block;
		width: 26px;
		height: 9px;
		color: inherit;
		animation: aioc-swipe-nudge 1.8s var(--aioc-ease-inout) infinite;
	}

	.aioc-swipe__arrow svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	[dir="rtl"] .aioc-swipe__arrow {
		transform: scaleX(-1);
	}
}

@keyframes aioc-swipe-nudge {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
	.aioc-swipe__arrow {
		animation: none !important;
	}
}

/* ------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.aioc-js .aioc-anim [data-aioc-el],
	.aioc-anim [data-aioc-el] {
		opacity: 1 !important;
		transform: none !important;
	}

	.aioc-line__inner,
	.aioc-split-char,
	.aioc-split-word {
		transform: none !important;
	}

	.aioc-btn,
	.aioc-btn__fill,
	.aioc-btn__text,
	.aioc-btn__icon {
		transition-duration: 0.01ms !important;
	}
}