/*
 * Cielo de Margaritas — Global layer v0.7
 */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
	overflow-x: hidden;
}

body {
	max-width: 100%;
	overflow-x: hidden;
}

.cielo-site,
.cielo-site * {
	box-sizing: border-box;
}

.cielo-site {
	background: var(--cielo-bg);
	color: var(--cielo-text);
	font-family: var(--cielo-font-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

.cielo-site :where(h1, h2, h3, h4) {
	color: var(--cielo-ink);
	font-family: var(--cielo-font-display);
	font-weight: 500;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.cielo-site :where(p, li) {
	font-size: var(--cielo-fs-body);
	line-height: 1.72;
}

.cielo-site :where(a, button, input, textarea, select) {
	-webkit-tap-highlight-color: transparent;
}

.cielo-site :where(a, button, input, textarea, select):focus-visible {
	outline: 3px solid color-mix(in srgb, var(--cielo-focus) 72%, white);
	outline-offset: 4px;
}

.cielo-shell {
	width: min(100% - (var(--cielo-gutter) * 2), var(--cielo-shell));
	margin-inline: auto;
}

.cielo-reading {
	width: min(100%, var(--cielo-reading));
}

/* Remove generic Kadence chrome on Home */
.cielo-home #masthead,
.cielo-home .site-header,
.cielo-home #colophon,
.cielo-home .site-footer,
.cielo-home .entry-hero,
.cielo-home .entry-header,
.cielo-home .page-header {
	display: none !important;
}

.cielo-home .site,
.cielo-home #wrapper {
	min-height: 0 !important;
}

.cielo-home .site-main,
.cielo-home .content-area,
.cielo-home .content-container,
.cielo-home .site-container,
.cielo-home .entry-content,
.cielo-home article {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cielo-home .content-container {
	display: block !important;
}

.cielo-home .entry-content-wrap {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.cielo-home .entry-content > * {
	max-width: none;
}

.cielo-home .entry-content > .alignfull,
.cielo-home .entry-content > .alignwide {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}

/* Header */
.cielo-site-header {
	position: fixed;
	z-index: 9100;
	top: .9rem;
	left: 0;
	right: 0;
	padding-inline: var(--cielo-gutter);
	pointer-events: none;
}

.admin-bar .cielo-site-header {
	top: calc(.9rem + 46px);
}

.cielo-site-header::before {
	content: "";
	position: absolute;
	inset: -.2rem var(--cielo-gutter) auto;
	height: 5.1rem;
	border-radius: 2rem;
	background:
		radial-gradient(circle at 16% 48%, rgba(230,164,196,.16), transparent 34%),
		radial-gradient(circle at 84% 36%, rgba(180,212,182,.14), transparent 32%);
	filter: blur(18px);
	opacity: .72;
	pointer-events: none;
}

.cielo-site-header__shell {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 4.4rem;
	padding: .72rem .95rem;
	border: 1px solid rgba(255,255,255,.34);
	border-radius: 1.9rem;
	background: linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,.26));
	box-shadow: 0 1rem 2.6rem rgba(47,45,74,.10), inset 0 1px 0 rgba(255,255,255,.62);
	backdrop-filter: blur(18px) saturate(1.08);
	-webkit-backdrop-filter: blur(18px) saturate(1.08);
	pointer-events: auto;
	transition:
		background var(--cielo-motion-fast) var(--cielo-ease),
		transform var(--cielo-motion-fast) var(--cielo-ease),
		box-shadow var(--cielo-motion-fast) var(--cielo-ease),
		min-height var(--cielo-motion-fast) var(--cielo-ease),
		padding var(--cielo-motion-fast) var(--cielo-ease);
}

.cielo-site-header__brand {
	position: relative;
	z-index: 3;
	display: block;
	width: 11.8rem;
	height: 3rem;
	flex: 0 0 auto;
}

.cielo-site-header__brand img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
	transition:
		opacity var(--cielo-motion-fast) var(--cielo-ease),
		transform var(--cielo-motion-fast) var(--cielo-ease),
		filter var(--cielo-motion-fast) var(--cielo-ease);
}

.cielo-site-header__wordmark {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.cielo-site-header__isologo {
	opacity: 0;
	width: 2.9rem !important;
	height: 2.9rem !important;
	transform: translateY(4px) scale(.88);
	filter: drop-shadow(0 .4rem 1rem rgba(47,45,74,.08));
}

.cielo-site-header.is-scrolled .cielo-site-header__shell,
.cielo-site-header.is-nav-open .cielo-site-header__shell {
	background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.42));
	box-shadow: 0 1rem 2.8rem rgba(47,45,74,.14), inset 0 1px 0 rgba(255,255,255,.74);
}

.cielo-site-header.is-compact .cielo-site-header__shell {
	min-height: 4rem;
	padding: .58rem .84rem;
}

.cielo-site-header.is-compact .cielo-site-header__brand {
	width: 2.9rem;
	height: 2.9rem;
}

.cielo-site-header.is-compact .cielo-site-header__wordmark {
	opacity: 0;
	transform: translateY(-6px) scale(.95);
}

.cielo-site-header.is-compact .cielo-site-header__isologo {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.cielo-nav-toggle {
	position: relative;
	z-index: 5;
	display: grid;
	place-content: center;
	gap: 6px;
	width: 3rem;
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid rgba(95,96,163,.10);
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.68));
	color: var(--cielo-violet);
	box-shadow: 0 .55rem 1.6rem rgba(47,45,74,.10), inset 0 1px 0 rgba(255,255,255,.90);
	pointer-events: auto;
}

.cielo-nav-toggle i {
	display: block;
	width: 1.05rem;
	height: 1.5px;
	border-radius: 999px;
	background: currentColor;
	transform-origin: center;
	transition: transform var(--cielo-motion-fast) var(--cielo-ease), opacity var(--cielo-motion-fast) var(--cielo-ease);
}

.cielo-site-header.is-nav-open .cielo-nav-toggle i:first-of-type {
	transform: translateY(3.8px) rotate(45deg);
}
.cielo-site-header.is-nav-open .cielo-nav-toggle i:last-of-type {
	transform: translateY(-3.8px) rotate(-45deg);
}

.cielo-nav-scrim {
	position: fixed;
	z-index: 2;
	inset: 0;
	background: rgba(50,48,78,.18);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--cielo-motion-fast) var(--cielo-ease), visibility 0s linear var(--cielo-motion-fast);
	pointer-events: none;
}

.cielo-site-header.is-nav-open .cielo-nav-scrim {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
	pointer-events: auto;
}

.cielo-nav {
	position: fixed;
	z-index: 5;
	top: calc(.9rem + 4.85rem);
	left: var(--cielo-gutter);
	right: var(--cielo-gutter);
	display: grid;
	gap: .72rem;
	padding: 1rem;
	border: 1px solid rgba(255,255,255,.42);
	border-radius: 1.8rem;
	background: linear-gradient(180deg, rgba(252,249,243,.98), rgba(247,241,231,.96));
	box-shadow: 0 1.6rem 4rem rgba(47,45,74,.18), inset 0 1px 0 rgba(255,255,255,.84);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px) scale(.985);
	transition:
		opacity var(--cielo-motion-normal) var(--cielo-ease),
		transform var(--cielo-motion-normal) var(--cielo-ease),
		visibility 0s linear var(--cielo-motion-normal);
	pointer-events: none;
}

.admin-bar .cielo-nav {
	top: calc(.9rem + 4.85rem + 46px);
}

.cielo-site-header.is-nav-open .cielo-nav {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	transition-delay: 0s;
	pointer-events: auto;
}

.cielo-nav__eyebrow {
	margin: .1rem .2rem 0 !important;
	color: var(--cielo-violet);
	font-size: .73rem !important;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.cielo-nav__note {
	margin: .2rem .25rem 0 !important;
	color: rgba(47,45,74,.58);
	font-size: .8rem !important;
}

.cielo-nav a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3.3rem;
	padding: .85rem 1rem;
	border-radius: 1.2rem;
	text-decoration: none;
	background: rgba(255,255,255,.65);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.58);
	color: var(--cielo-ink);
	transition:
		background-color var(--cielo-motion-fast) var(--cielo-ease),
		transform var(--cielo-motion-fast) var(--cielo-ease);
}

.cielo-nav a::after {
	content: "↗";
	color: rgba(95,96,163,.62);
	font-size: .95rem;
}

.cielo-nav a span {
	font-family: var(--cielo-font-display);
	font-size: clamp(1.35rem, 7vw, 1.9rem);
	line-height: 1.05;
}

body.cielo-nav-open,
body.cielo-modal-open {
	overflow: hidden;
}

/* Buttons */
.cielo-button .wp-block-button__link,
.cielo-link-button {
	border: 0;
	border-radius: var(--cielo-radius-pill);
	font-family: var(--cielo-font-body);
	font-size: var(--cielo-fs-sm);
	font-weight: 650;
	letter-spacing: .01em;
	line-height: 1;
	padding: 1rem 1.35rem;
	text-decoration: none;
	transition:
		transform var(--cielo-motion-fast) var(--cielo-ease),
		box-shadow var(--cielo-motion-fast) var(--cielo-ease),
		background-color var(--cielo-motion-fast) var(--cielo-ease);
}
.cielo-button--primary .wp-block-button__link,
.cielo-link-button--primary {
	background: var(--cielo-pink);
	color: var(--cielo-ink);
	box-shadow: 0 .8rem 2rem rgba(95,96,163,.16);
}

/* Footer */
.cielo-site-footer {
	position: relative;
	z-index: 2;
	padding: 4.5rem var(--cielo-gutter) 2.4rem;
	background:
		radial-gradient(circle at 20% 16%, rgba(230,164,196,.16), transparent 18rem),
		linear-gradient(165deg, #5d5ea4, #45467d);
	color: rgba(255,253,249,.78);
	text-align: center;
	overflow: clip;
}

.cielo-site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 18% 26%, rgba(255,255,255,.10) 0 1px, transparent 1.5px),
		radial-gradient(circle at 75% 40%, rgba(255,255,255,.08) 0 1px, transparent 1.5px);
	background-size: 97px 97px, 131px 131px;
	opacity: .38;
	pointer-events: none;
}

.cielo-site-footer__inner {
	position: relative;
	z-index: 2;
	width: min(100%, 54rem);
	margin: auto;
}

.cielo-site-footer__wordmark {
	display: block;
	width: min(54vw, 11rem);
	height: auto;
	margin: 0 auto .95rem;
	opacity: .90;
}

.cielo-site-footer__dots {
	display: block;
	width: min(46vw, 8rem);
	height: auto;
	margin: .2rem auto 1.25rem;
	opacity: .28;
	filter: brightness(0) invert(1);
}

.cielo-site-footer__line {
	margin: 0 0 1.6rem;
	color: var(--cielo-white);
	font-family: var(--cielo-font-display);
	font-size: clamp(1.55rem, 5vw, 2.1rem) !important;
}

.cielo-site-footer nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .55rem 1.3rem;
	margin-bottom: 1.9rem;
}

.cielo-site-footer a {
	color: inherit;
	text-decoration: none;
}

.cielo-site-footer small {
	font-size: .76rem;
}

@media (hover:hover) and (pointer:fine) {
	.cielo-nav a:hover,
	.cielo-button .wp-block-button__link:hover,
	.cielo-link-button:hover {
		transform: translateY(-2px);
	}
}

@media (min-width: 48.875rem) {
	.admin-bar .cielo-site-header {
		top: calc(.9rem + 32px);
	}
	.admin-bar .cielo-nav {
		top: calc(.9rem + 4.85rem + 32px);
	}
}

@media (min-width: 64rem) {
	.cielo-site-header {
		top: 1rem;
	}
	.admin-bar .cielo-site-header {
		top: calc(1rem + 32px);
	}
	.cielo-site-header__shell {
		min-height: 4.3rem;
		padding: .58rem 1rem;
		border-radius: 1.9rem;
	}
	.cielo-site-header__brand {
		width: 10.8rem;
		height: 2.8rem;
	}
	.cielo-site-header.is-compact .cielo-site-header__brand {
		width: 2.75rem;
		height: 2.75rem;
	}
	.cielo-nav-toggle,
	.cielo-nav-scrim {
		display: none;
	}
	.cielo-nav {
		position: static;
		z-index: auto;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-left: auto;
		gap: 1.35rem;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
	}
	.cielo-nav__eyebrow,
	.cielo-nav__note {
		display: none;
	}
	.cielo-nav a {
		min-height: 0;
		padding: .45rem 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: rgba(47,45,74,.84);
	}
	.cielo-nav a::after {
		display: none;
	}
	.cielo-nav a span {
		font-family: var(--cielo-font-body);
		font-size: .9rem;
		font-weight: 600;
	}
}

/* v0.10 global refinements */
html.cielo-has-modal-open,
body.cielo-modal-open {
	overflow: hidden;
}

.cielo-site-header.is-nav-open .cielo-nav-scrim {
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
