/*
Theme Name: Eleva
Template: twentytwentyfive
Description: Èleva Iced Tea — child theme of Twenty Twenty-Five.
Version: 1.4.1
Requires at least: 6.8
Requires PHP: 8.1
Text Domain: eleva
*/

/* ---------- header ---------- */
.eleva-header { border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent); }
.eleva-header .wp-block-navigation a { text-decoration: none; }
.eleva-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent-1); }

/* ---------- hero ---------- */
.eleva-hero { margin: 0; }
.eleva-hero img { display: block; width: 100%; height: auto; }

/* ---------- marquee band ---------- */
/* the text is repeated in the content; the track slides by half its width for a seamless loop */
.eleva-marquee { overflow: hidden; }
.eleva-marquee p { width: max-content; white-space: nowrap; margin: 0; animation: eleva-scroll 60s linear infinite; }
@keyframes eleva-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.eleva-marquee:hover p, .eleva-marquee:active p { animation-play-state: paused; }
/* always one scrolling line (a wrapped block of slogans looked broken on phones);
   with "reduce motion" on it just scrolls much more gently */
@media (prefers-reduced-motion: reduce) {
  .eleva-marquee p { animation-duration: 150s; }
}

/* full-width sections on landing pages sit flush against each other */
.home .wp-block-post-content > *,
.page-template-page-landing .wp-block-post-content > * { margin-block: 0; }
body .wp-site-blocks > footer { margin-block-start: 0; }

/* ---------- tea sections ---------- */
.eleva-eyebrow { font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--accent-1); margin-bottom: .25rem; }
.eleva-tea__title { font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.02; text-transform: uppercase; margin-top: 0; }
.eleva-tea__title span { color: var(--wp--preset--color--accent-1); }
.eleva-tea__lede { font-family: var(--wp--preset--font-family--caveat); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; }
.eleva-tea .wp-block-columns { gap: clamp(1.5rem, 5vw, 4rem); }
@media (min-width: 782px) {
  .eleva-tea--flip .wp-block-columns { flex-direction: row-reverse; }
}

/* ---------- ingredients / world ---------- */
.eleva-script { font-family: var(--wp--preset--font-family--caveat); font-weight: 700; color: var(--wp--preset--color--accent-1); font-size: 1.25em; }
.eleva-icons img { max-width: 600px; width: 100%; margin-inline: auto; display: block; }
.eleva-tea__icons img { margin-inline: 0; }

/* ---------- footer ---------- */
.eleva-footer a { color: inherit; }
.eleva-footer a:hover { color: var(--wp--preset--color--accent-3); }
.eleva-footer .eleva-footer__logo img { max-width: 150px; }

/* ---------- WooCommerce ---------- */
.woocommerce-price-suffix { font-size: .8em; opacity: .7; }
.wc-block-components-product-image img, .woocommerce-product-gallery img { background: var(--wp--preset--color--base-2); }

/* ---------- tea panels: parallax decor, floating can, entrance, up/down nav (assets/js/teas.js) ---------- */
.eleva-tea { position: relative; overflow: hidden; isolation: isolate; }
.eleva-stack > * { margin-block: 0 !important; }
@media (min-width: 782px) {
	.eleva-tea { min-height: 100vh; display: grid; align-content: center; }
}
.eleva-tea > :not(.eleva-decor) { position: relative; z-index: 2; }
.eleva-decor { position: absolute; inset: 0; pointer-events: none; }
.eleva-decor__layer {
	position: absolute; z-index: 1;
	transform: translate3d(0, var(--py, 0px), 0) rotate(calc(var(--rot, 0deg) + var(--pr, 0deg)));
	will-change: transform;
}
.eleva-decor__layer.is-far { opacity: .7; }
.eleva-decor__img { display: block; width: 100%; height: auto; animation: eleva-bob var(--dur, 6s) ease-in-out var(--delay, 0s) infinite alternate; }
@keyframes eleva-bob { from { transform: translateY(-9px) rotate(-5deg); } to { transform: translateY(9px) rotate(5deg); } }

.eleva-tea__can { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; animation: eleva-can 7s ease-in-out infinite alternate; }
.eleva-tea__can::before {
	content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(34vw, 460px); aspect-ratio: 1;
	transform: translate(-50%, -50%); border-radius: 50%;
	background: radial-gradient(circle, rgb(255 255 255 / .85) 0%, rgb(255 255 255 / .35) 45%, transparent 70%);
}
.eleva-tea__can img {
	display: block; width: auto; max-width: 100%; max-height: 74vh; margin-inline: auto;
	transform: translateY(var(--can-py, 0px));
	filter: drop-shadow(0 28px 36px rgb(58 46 40 / .22));
}
/* original fruit artwork behind the can (added by teas.js), moves the other way while scrolling */
.eleva-tea__can .eleva-tea__bg {
	position: absolute; z-index: -1; left: 0; top: 0; height: auto; max-width: none; max-height: none; margin: 0;
	transform: translateY(var(--bg-py, 0px)); filter: none;
}
@keyframes eleva-can { from { transform: translateY(-10px); } to { transform: translateY(10px); } }

/* entrance: can slides in from its side, text rises (only once JS is running) */
.eleva-tea .wp-block-column { transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.eleva-tea .wp-block-column + .wp-block-column { transition-delay: .15s; }
.eleva-js .eleva-tea:not(.is-in) .wp-block-column { opacity: 0; transform: translateY(48px); }
.eleva-js .eleva-tea:not(.is-in) .wp-block-column:first-child { transform: translateX(-70px); }
.eleva-js .eleva-tea--flip:not(.is-in) .wp-block-column:first-child { transform: translateX(70px); }

/* up/down navigation (desktop) */
.eleva-teanav {
	position: fixed; z-index: 50; right: clamp(.75rem, 2vw, 1.75rem); top: 50%;
	display: flex; flex-direction: column; align-items: center; gap: .6rem;
	opacity: 0; pointer-events: none; transform: translate(16px, -50%); transition: opacity .3s, transform .3s;
}
.eleva-teanav.is-visible { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
.eleva-teanav__arrow {
	width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); box-shadow: 0 4px 16px rgb(0 0 0 / .12);
}
.eleva-teanav__arrow svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.eleva-teanav__arrow:hover:not(:disabled) { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); }
.eleva-teanav__arrow:disabled { opacity: .35; cursor: default; }
.eleva-teanav__dot {
	width: .7rem; height: .7rem; padding: 0; border-radius: 999px; cursor: pointer;
	border: 2px solid var(--wp--preset--color--contrast); background: transparent; opacity: .45; transition: height .25s, background .25s, opacity .25s;
}
.eleva-teanav__dot[aria-current="true"] { height: 1.6rem; background: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); opacity: 1; }

@media (max-width: 781px) {
	.eleva-teanav { display: none; }
	.eleva-tea__can img { max-height: 52vh; }
	.eleva-tea__can::before { width: 70vw; }
	.eleva-decor__layer { z-index: 1 !important; }
	.eleva-decor__layer { scale: 1.7; }
	.eleva-decor { bottom: auto; height: 62%; } /* phones: can sits on top, text below — keep the decor around the can */
}
@media (prefers-reduced-motion: reduce) {
	.eleva-decor__img, .eleva-tea__can { animation: none; }
	.eleva-tea .wp-block-column { transition: none; }
}

/* shop closed notice (see ELEVA_SHOP_OPEN in functions.php) */
.eleva-shop-closed { padding: 1rem 1.25rem; border-left: 4px solid var(--wp--preset--color--accent-1); background: var(--wp--preset--color--base-2); }

/* ---------- mobile menu overlay: big, centred links on the brand peach ---------- */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--accent-3) !important;
	color: var(--wp--preset--color--contrast) !important;
	padding: var(--wp--preset--spacing--50) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center !important;
	justify-content: center;
	height: 100%;
	padding-top: 0 !important;
}
/* let the dialog wrappers fill the overlay so the links can sit in the vertical middle */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { height: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center !important;
	justify-content: center !important;
	gap: 1.75rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { justify-content: center; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(2.25rem, 10vw, 3rem) !important;
	font-weight: 800;
	letter-spacing: .06em;
	padding: .25rem .5rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent-1);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-1);
	outline-offset: 6px;
	border-radius: 4px;
}
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg { width: 32px; height: 32px; }

/* no focus ring after a mouse click / tap (the parent theme outlines on :focus);
   keyboard users still get a clear ring via :focus-visible */
:where(.wp-site-blocks, .wp-block-navigation__responsive-container) :focus:not(:focus-visible) { outline: none !important; }
:where(.wp-site-blocks, .wp-block-navigation__responsive-container) :focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 3px; }

/* slogan band separator: a small tea leaf drawn with a CSS mask (inherits the text colour) */
.eleva-sep {
	display: inline-block; width: .95em; height: .95em; margin: 0 1.6em; vertical-align: -.12em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 2.5C11 2.5 4.5 8 4.5 15.2c0 1.6.4 3.1 1.1 4.4L3 22.2 4.3 23.5l2.6-2.6c1.3.7 2.8 1.1 4.4 1.1 7.2 0 12.2-6.6 10.2-19.5zM8.4 18.9l7.9-9.8-9.1 8.6c.3.4.7.8 1.2 1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 2.5C11 2.5 4.5 8 4.5 15.2c0 1.6.4 3.1 1.1 4.4L3 22.2 4.3 23.5l2.6-2.6c1.3.7 2.8 1.1 4.4 1.1 7.2 0 12.2-6.6 10.2-19.5zM8.4 18.9l7.9-9.8-9.1 8.6c.3.4.7.8 1.2 1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}