/* ==========================================================================
   Design v2 — shared refinements (Eloti Designs). Loads after the kit's
   main.css and looks.css; each company's own composition is in site.css.
   ========================================================================== */

/* 1. Rhythm and type ------------------------------------------------------- */
.v2 {
	--v2-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--v2-h2: clamp(2rem, 1.2rem + 2.7vw, 3.5rem);
	--v2-lead: clamp(1.125rem, 1rem + 0.55vw, 1.4rem);
	--space-section: clamp(4.5rem, 2.6rem + 6.2vw, 8.75rem);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.v2 :is(h1, h2, h3, .sk-hero__title, .page-header__title) {
	text-wrap: balance;
}

.v2 :is(p, li, blockquote) {
	text-wrap: pretty;
}

.v2 .sk-section__title {
	font-size: var(--v2-h2);
	line-height: 1.04;
}

.v2 .sk-section__intro {
	max-width: 52ch;
	font-size: var(--v2-lead);
	line-height: 1.55;
}

.v2 .is-style-lead {
	font-size: var(--v2-lead);
	line-height: 1.5;
}

/* Labels in sentence case: quieter than shouting capitals. */
.v2 :is(.site-footer__title, .aside-card__title, .nav-panel__title) {
	letter-spacing: 0.01em;
	text-transform: none;
}

/* Drawings that reach past a band's edge never widen the page. */
.v2 .sk-section {
	overflow-x: clip;
}

/* 2. Buttons ---------------------------------------------------------------- */
.v2 :is(.button, .wp-block-button__link) {
	transition: background-color 0.25s var(--v2-ease), color 0.25s var(--v2-ease), border-color 0.25s var(--v2-ease), transform 0.25s var(--v2-ease), box-shadow 0.25s var(--v2-ease);
}

.v2 :is(.button, .wp-block-button__link):active {
	transform: translateY(1px);
}

/* An arrow that moves on hover, on the main calls to action. */
.v2 :is(.sk-hero, .sk-cta, .cta-band) .wp-block-button:not(.is-style-outline) .wp-block-button__link::after,
.v2 .cta-band .button--on-dark::after {
	content: "";
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	margin-left: 0.6em;
	vertical-align: -0.16em;
	background: currentColor;
	-webkit-mask: var(--v2-arrow) center / contain no-repeat;
	mask: var(--v2-arrow) center / contain no-repeat;
	transition: transform 0.3s var(--v2-ease);
}

.v2 :is(.sk-hero, .sk-cta, .cta-band) .wp-block-button__link:hover::after,
.v2 .cta-band .button--on-dark:hover::after {
	transform: translateX(0.3em);
}

.v2 {
	--v2-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* 3. Header ----------------------------------------------------------------- */
/* Frosted when the page scrolls under it. The frost is a layer behind the
   header, never the header itself: a blur on the header would make it the box
   the phone menu (which lives inside it) is placed in, and the menu would then
   open at the top of the page instead of on the screen. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.v2:not(.hdr-float) .site-header.is-scrolled {
		background: transparent;
	}

	.v2:not(.hdr-float) .site-header.is-scrolled::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: color-mix(in srgb, var(--c-surface) 88%, transparent);
		-webkit-backdrop-filter: saturate(1.4) blur(14px);
		backdrop-filter: saturate(1.4) blur(14px);
		pointer-events: none;
	}

	.v2:not(.hdr-float) .site-header--dark.is-scrolled::before {
		background: color-mix(in srgb, var(--c-dark) 86%, transparent);
	}
}

/* 4. Images in sections ------------------------------------------------------ */
.v2 .sk-section .wp-block-image img,
.v2 .sk-section .wp-block-gallery img {
	transition: transform 0.9s var(--v2-ease);
}

/* 5. Footer -------------------------------------------------------------------- */
.v2 .site-footer__title {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
}

.v2 .site-footer :is(.footer-links, .menu) a {
	transition: color 0.2s var(--v2-ease), padding-left 0.25s var(--v2-ease);
}

/* 6. Reduced motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.v2 *,
	.v2 *::before,
	.v2 *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}