/*
Theme Name: Cultiva la Mirada
Theme URI: https://cultivalamirada.com
Author: Cultiva la Mirada
Description: A warm, contemplative single-page WordPress block theme for Cultiva la Mirada — an educational consultancy and product platform dedicated to vision care and neurodevelopmental support. Built mobile-first with anchor-linked smooth scrolling, geometric decorative accents, and fade-in scroll animations.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: foco
Tags: one-column, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, block-themes, wide-blocks, translation-ready, accessibility-ready
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
*/

/* ========================================================================
   0. FOUNDATIONS
   ======================================================================== */

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--wp--custom--scroll-padding-top, 80px);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:root,
body,
.wp-site-blocks {
	overflow: visible;
}

body {
	overflow-x: hidden;
}

/* ========================================================================
   1. STICKY HEADER
   ======================================================================== */

.wp-site-blocks > header.wp-block-template-part,
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--background, #fff1dc);
}

/* Backdrop pseudo — keeps header clean so mobile nav overlay position:fixed
   still targets the viewport, not the header rectangle. */
.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	transition: background 0.4s ease;
}

body.is-scrolled .wp-site-blocks > header.wp-block-template-part::before {
	background: var(--wp--preset--color--background);
	box-shadow: 0 1px 3px rgba(45, 45, 44, 0.08);
}

/* ========================================================================
   2. LANDING-PAGE SECTIONS
   ======================================================================== */

/* Each anchor-linked full section behaves as a "screen" */
.wp-site-blocks .alignfull[id] {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Short sections (newsletter, contact, footer) don't need forced min-height */
.wp-site-blocks .alignfull[id="newsletter"],
.wp-site-blocks .alignfull[id="contacto"],
.wp-site-blocks .alignfull[id="preguntas-frecuentes"],
.wp-site-blocks .alignfull[id="footer"] {
	min-height: auto;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

/* Target highlight on anchor jump */
.wp-site-blocks .alignfull[id]:target {
	box-shadow: inset 4px 0 0 var(--wp--preset--color--accent-blue);
	transition: box-shadow 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.wp-site-blocks .alignfull[id]:target {
		box-shadow: none;
		transition: none;
	}
}

/* ========================================================================
   3. TYPOGRAPHY POLISH
   ======================================================================== */

/* Body prose — comfortable reading rhythm */
p,
.wp-block-paragraph {
	font-family: var(--wp--preset--font-family--body);
	line-height: 1.65;
}

/* Headings — geometric sans with warm weight */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	line-height: 1.2;
}

/* Display heading — editorial serif for hero contemplative tone */
h1,
.wp-block-heading.has-display-font-size {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

/* Accent font — warm humanist touch for callouts */
.has-accent-font-family,
blockquote.wp-block-quote {
	font-family: var(--wp--preset--font-family--accent);
}

/* Small caps helper */
.is-style-uppercase,
.wp-block-paragraph.is-style-uppercase {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--small);
}

/* ========================================================================
   4. LINKS
   ======================================================================== */

a {
	color: var(--wp--preset--color--teal);
	text-decoration: none;
	text-underline-offset: 0.2em;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--wp--preset--color--hover-green);
}

a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-blue);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ========================================================================
   5. BUTTONS
   ======================================================================== */

/* Solid button */
.wp-block-button .wp-block-button__link,
.wp-element-button {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 999px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--hover-green);
	color: var(--wp--preset--color--foreground);
	border: 3px solid transparent;
	cursor: pointer;
	transition: background-color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 0.3s ease;
	text-decoration: none;
	display: inline-block;
	line-height: 1.4;
}

.wp-block-button .wp-block-button__link:hover,
.wp-element-button:hover {
	background-color: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--off-white);
	transform: translateY(-1px);
}

.wp-block-button .wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(0);
}

/* Outline / ghost button */
.wp-block-button.is-style-outline .wp-block-button__link,
.ghost-button {
	background-color: transparent;
	border: 3px solid var(--wp--preset--color--off-white);
	color: var(--wp--preset--color--off-white);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.ghost-button:hover {
	background-color: var(--wp--preset--color--off-white);
	color: var(--wp--preset--color--accent-blue);
	border-color: var(--wp--preset--color--off-white);
}

/* Outline on light bg */
.has-background-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--teal);
}

.has-background-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--off-white);
}

/* ========================================================================
   6. SEPARATORS
   ======================================================================== */

.wp-block-separator,
hr {
	border: none;
	border-top: 3px solid var(--wp--preset--color--off-white);
	opacity: 1;
}

.wp-block-separator.has-separator-color,
.wp-block-separator.is-style-separator-orange {
	border-top-color: var(--wp--preset--color--separator);
}

/* ========================================================================
   7. IMAGES & MEDIA
   ======================================================================== */

.wp-block-image img,
.wp-block-cover__image-background {
	object-fit: cover;
}

.wp-block-image.is-style-rounded img {
	border-radius: 50%;
}

/* Half-circle mask on left side for product gallery images */
.product-half-circle-left img {
	border-radius: 50% 0 0 50% !important;
	-webkit-border-radius: 50% 0 0 50% !important;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.product-half-circle-left {
	overflow: hidden;
	border-radius: 50% 0 0 50% !important;
	-webkit-border-radius: 50% 0 0 50% !important;
}

/* Force half-circle shape on product images — server-safe (multiple specificity levels) */
.product-section .wp-block-image.product-half-circle-left,
.product-section figure.product-half-circle-left,
figure.wp-block-image.product-half-circle-left,
.wp-block-image.product-half-circle-left {
	border-radius: 50% 0 0 50% !important;
	-webkit-border-radius: 50% 0 0 50% !important;
	overflow: hidden !important;
}

.product-section .wp-block-image.product-half-circle-left img,
.product-section figure.product-half-circle-left img,
figure.wp-block-image.product-half-circle-left img,
.wp-block-image.product-half-circle-left img {
	border-radius: 50% 0 0 50% !important;
	-webkit-border-radius: 50% 0 0 50% !important;
}

/* Server-safe: target by section ID for maximum specificity */
#foco .product-half-circle-left,
#foco .product-half-circle-left img,
#20-20 .product-half-circle-left,
#20-20 .product-half-circle-left img,
[id="20-20"] .product-half-circle-left,
[id="20-20"] .product-half-circle-left img {
	border-radius: 50% 0 0 50% !important;
	-webkit-border-radius: 50% 0 0 50% !important;
}

#foco .product-half-circle-left,
#20-20 .product-half-circle-left,
[id="20-20"] .product-half-circle-left {
	overflow: hidden !important;
}

/* Circular mask */
.is-style-circle img,
.circle-mask img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Warm image treatment — slight warmth tint on hover */
.wp-block-image img {
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
	            filter 0.6s ease;
}

.wp-block-image:hover img {
	transform: scale(1.02);
}

/* Product half-circle images: contain zoom within the rounded shape */
.product-half-circle-left:hover img {
	transform: scale(1.02);
}

/* ===== SERVER-SAFE: Force half-circle + logo overlay on ANY server ===== */
/* Ultra-specific selectors that override any WordPress core/theme defaults */
body .product-section .wp-block-image.product-half-circle-left,
body .product-section figure.product-half-circle-left,
body #foco figure.product-half-circle-left,
body #20-20 figure.product-half-circle-left,
body [id="20-20"] figure.product-half-circle-left {
	border-radius: 50% 0 0 50% !important;
	-webkit-border-radius: 50% 0 0 50% !important;
	overflow: hidden !important;
	clip-path: none !important;
	-webkit-clip-path: none !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}

body .product-section .wp-block-image.product-half-circle-left img,
body .product-section figure.product-half-circle-left img,
body #foco figure.product-half-circle-left img,
body #20-20 figure.product-half-circle-left img,
body [id="20-20"] figure.product-half-circle-left img {
	border-radius: 50% 0 0 50% !important;
	-webkit-border-radius: 50% 0 0 50% !important;
	aspect-ratio: 1;
	object-fit: cover;
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
}

/* Logo overlay: force absolute positioning and rectangular shape.
   Uses percentage-based left so it stays anchored to the image area
   regardless of how wide the parent container grows on server. */
body .product-section figure.product-logo-overlay,
body .product-section .wp-block-image.product-logo-overlay,
body #foco figure.product-logo-overlay,
body #20-20 figure.product-logo-overlay,
body [id="20-20"] figure.product-logo-overlay {
	position: absolute !important;
	top: 2% !important;
	left: 2% !important;
	z-index: 10 !important;
	width: 30% !important;
	max-width: 200px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	-webkit-border-radius: 0 !important;
	overflow: visible !important;
	clip-path: none !important;
	-webkit-clip-path: none !important;
	border: none !important;
	box-shadow: none !important;
}

body .product-section figure.product-logo-overlay img,
body .product-section .wp-block-image.product-logo-overlay img,
body #foco figure.product-logo-overlay img,
body #20-20 figure.product-logo-overlay img,
body [id="20-20"] figure.product-logo-overlay img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 !important;
	object-fit: contain !important;
	border-radius: 0 !important;
	-webkit-border-radius: 0 !important;
	clip-path: none !important;
	-webkit-clip-path: none !important;
	transform: none !important;
}

/* Prevent hover zoom on logo overlay */
body .product-section figure.product-logo-overlay:hover img,
body #foco figure.product-logo-overlay:hover img,
body #20-20 figure.product-logo-overlay:hover img,
body [id="20-20"] figure.product-logo-overlay:hover img {
	transform: none !important;
}

/* Image container group: position context for the logo overlay.
   The group wraps both the gallery image and the logo.
   position:relative anchors the logo's absolute positioning.
   overflow:hidden keeps the logo clipped to the image area.
   We do NOT use width:fit-content because WordPress servers
   add layout classes that expand the container unpredictably.
   Instead, the logo uses percentage-based positioning relative
   to the full container, and the half-circle image fills 100%. */
body .product-section .wp-block-column > .wp-block-group,
body #foco .wp-block-column > .wp-block-group,
body #20-20 .wp-block-column > .wp-block-group,
body [id="20-20"] .wp-block-column > .wp-block-group {
	position: relative !important;
	overflow: hidden !important;
}

/* Server-safe: target the specific group inside product sections by ID chain */
body #foco .wp-block-columns > .wp-block-column:first-child > .wp-block-group,
body #20-20 .wp-block-columns > .wp-block-column:first-child > .wp-block-group,
body [id="20-20"] .wp-block-columns > .wp-block-column:first-child > .wp-block-group {
	position: relative !important;
	overflow: hidden !important;
}

body .product-section .wp-block-column:first-child > .wp-block-group,
body #foco .wp-block-columns > .wp-block-column:first-child > .wp-block-group,
body #20-20 .wp-block-columns > .wp-block-column:first-child > .wp-block-group,
body [id="20-20"] .wp-block-columns > .wp-block-column:first-child > .wp-block-group {
	position: relative !important;
	overflow: hidden !important;
}

/* ========================================================================
   8. GEOMETRIC DECORATIVE SHAPES
   ======================================================================== */

/* Circle outline accent */
.deco-circle {
	border: 3px solid var(--wp--preset--color--separator);
	border-radius: 50%;
	pointer-events: none;
}

/* Half-circle outline — open right */
.deco-half-circle {
	border: 3px solid var(--wp--preset--color--separator);
	border-radius: 999px 0 0 999px;
	border-right: none;
	pointer-events: none;
}

/* Watermark shapes (used in hero right panel) */
.watermark-shape-1 {
	position: absolute;
	top: 15%;
	right: 0;
	width: clamp(200px, 30vw, 400px);
	height: clamp(400px, 60vw, 800px);
	border: 3px solid rgba(254, 240, 220, 0.08);
	border-radius: 999px 0 0 999px;
	border-right: none;
	z-index: 0;
	pointer-events: none;
}

.watermark-shape-2 {
	position: absolute;
	bottom: -15%;
	left: -15%;
	width: clamp(300px, 40vw, 500px);
	aspect-ratio: 1;
	border: 3px solid rgba(254, 240, 220, 0.05);
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}

/* ========================================================================
   9. HERO SECTION
   ======================================================================== */

.hero {
	display: grid;
	grid-template-columns: 1fr;
	min-height: 100vh;
	width: 100%;
}

.hero-left,
.hero-right {
	display: flex;
	position: relative;
	overflow: hidden;
}

.hero-left {
	min-height: 60vh;
	padding: 8rem 1.5rem 4rem;
	align-items: stretch;
}

.hero-right {
	background-color: var(--wp--preset--color--teal);
	min-height: 60vh;
	padding: var(--wp--preset--spacing--60) 1.5rem;
	align-items: center;
}

.hero-image-wrapper {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.image-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(45, 45, 44, 0.1) 0%,
		rgba(45, 45, 44, 0.2) 50%,
		rgba(45, 45, 44, 0.7) 100%
	);
	z-index: 1;
}

.hero-left-content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	text-align: left;
	display: flex;
	align-items: center;
	min-height: 100%;
	animation: fadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hero-title {
	font-family: var(--wp--preset--font-family--headings);
	font-size: clamp(2.75rem, 6vw, 5.5rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--off-white);
	font-weight: 600;
}

.hero-right-content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	animation: fadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards;
	opacity: 0;
}

@media (min-width: 992px) {
	.hero {
		grid-template-columns: 50vw 50vw;
	}

	.hero-left {
		padding-top: 0;
		padding-bottom: 4rem;
		padding-left: max(1.5rem, calc(50vw - 640px + 1.5rem));
		padding-right: 4rem;
		align-items: stretch;
	}

	.hero-right {
		padding-right: max(1.5rem, calc(50vw - 640px + 1.5rem));
		padding-left: 4rem;
	}

	.hero-left-content {
		margin: 0;
		margin-left: auto;
	}

	.hero-right-content {
		margin: 0;
	}
}

/* ========================================================================
   10. CAROUSEL COMPONENTS
   ======================================================================== */

.carousel-title {
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--wp--preset--color--off-white);
	margin-bottom: var(--wp--preset--spacing--40);
	line-height: 1.2;
}

.carousel-body {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
	color: var(--wp--preset--color--off-white);
	margin-bottom: var(--wp--preset--spacing--50);
}

.carousel-controls {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--60);
}

.carousel-arrow {
	background: none;
	border: none;
	color: var(--wp--preset--color--off-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	transition: transform 0.3s ease, color 0.3s ease;
}

.carousel-arrow:hover {
	color: var(--wp--preset--color--off-white);
	transform: scale(1.1);
}

.carousel-arrow svg {
	width: 24px;
	height: 24px;
	stroke-width: 2;
}

.carousel-dots {
	display: flex;
	gap: 0.75rem;
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--off-white);
	opacity: 0.3;
	cursor: pointer;
	transition: all 0.3s ease;
}

.dot.active {
	opacity: 1;
	transform: scale(1.3);
}

/* ========================================================================
   11. NAVIGATION & FULLSCREEN MENU
   ======================================================================== */

/* Header inner layout */
.site-header .header-inner,
.site-header > .wp-block-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Horizontal logo in header */
.site-logo-horizontal {
	margin: 0;
}

.site-logo-horizontal img {
	height: auto;
	max-height: 48px;
	width: auto;
	object-fit: contain;
}

/* Logo link — no underline, no color shift */
a.site-logo-link,
a.site-logo-link:hover,
a.site-logo-link:focus {
	text-decoration: none;
	border: none;
	outline: none;
	display: inline-block;
	line-height: 0;
}

a.site-logo-link::after {
	display: none !important;
}

/* Mobile hamburger overlay styling */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--off-white);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	justify-content: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	transition: color 0.3s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--hover-green);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item--current .wp-block-navigation-item__content {
	color: var(--wp--preset--color--teal);
}

/* Hamburger icon lines */
.hamburger {
	cursor: pointer;
	z-index: 51;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0.5rem;
}

.hamburger-line {
	width: 32px;
	height: 2px;
	background-color: var(--wp--preset--color--foreground);
	transition: all 0.3s ease;
	display: block;
}

/* Active-anchor underline for landing-page nav */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-navigation a {
		position: relative;
	}

	.wp-block-navigation a::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: -4px;
		height: 2px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.3s ease;
	}

	.wp-block-navigation a.is-active::after {
		transform: scaleX(1);
	}
}

/* ========================================================================
   12. TESTIMONIALS CARDS
   ======================================================================== */

.testimonial-card {
	background-color: var(--wp--preset--color--off-white);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--50);
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 0.4s ease;
}

.testimonial-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(45, 45, 44, 0.1);
}

.testimonial-card .testimonial-separator {
	border: none;
	border-top: 2px solid var(--wp--preset--color--separator);
	margin: var(--wp--preset--spacing--30) 0;
}

.testimonial-card .testimonial-name {
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
}

.testimonial-card .testimonial-role {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-blue);
}

/* Testimonial cards full width on mobile */
@media (max-width: 599px) {
	.foco-testimonial-carousel__card {
		flex: 0 0 100% !important;
		min-width: 100% !important;
	}
}

/* Testimonial body read-more truncation */
.foco-testimonial-carousel__body-wrapper {
	position: relative;
}

.foco-testimonial-carousel__body-wrapper.is-truncated .foco-testimonial-carousel__body {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.foco-testimonial-carousel__body-wrapper.is-expanded .foco-testimonial-carousel__body {
	display: block;
	-webkit-line-clamp: unset;
}

.foco-testimonial-carousel__read-more {
	background: none;
	border: none;
	padding: 0;
	margin-top: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-blue);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: color 0.3s ease;
	display: none;
}

.foco-testimonial-carousel__body-wrapper.is-truncated .foco-testimonial-carousel__read-more {
	display: inline-block;
}

.foco-testimonial-carousel__body-wrapper.is-expanded .foco-testimonial-carousel__read-more {
	display: inline-block;
}

.foco-testimonial-carousel__read-more:hover {
	color: var(--wp--preset--color--teal);
}

.testimonial-stars {
	color: var(--wp--preset--color--gold);
	letter-spacing: 0.1em;
}

/* ========================================================================
   13. PRODUCT SECTIONS (FOCO & 20/20)
   ======================================================================== */

.product-section .wp-block-columns {
	align-items: center;
}

.product-icons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--50);
}

.product-icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	text-align: center;
	flex: 0 0 auto;
	max-width: 100px;
}

.product-icon-item .icon-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--foreground);
	line-height: 1.3;
}

/* Product logo overlay — top-left corner, percentage-based for server safety */
.product-logo-overlay {
	position: absolute !important;
	top: 2% !important;
	left: 2% !important;
	z-index: 3;
	width: 30% !important;
	max-width: 200px;
	clip-path: none !important;
	-webkit-clip-path: none !important;
	margin: 0 !important;
	border-radius: 0 !important;
	overflow: visible !important;
}

.product-logo-overlay img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 0 !important;
	clip-path: none !important;
	-webkit-clip-path: none !important;
}

/* Server-safe logo overlay — target by section ID */
#foco .product-logo-overlay,
#20-20 .product-logo-overlay,
[id="20-20"] .product-logo-overlay {
	position: absolute !important;
	top: 2% !important;
	left: 2% !important;
	z-index: 3;
	width: 30% !important;
	max-width: 200px;
	clip-path: none !important;
	-webkit-clip-path: none !important;
	margin: 0 !important;
	border-radius: 0 !important;
	overflow: visible !important;
}

#foco .product-logo-overlay img,
#20-20 .product-logo-overlay img,
[id="20-20"] .product-logo-overlay img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 0 !important;
	clip-path: none !important;
	-webkit-clip-path: none !important;
}

/* Product section images default to no rounding except for .product-half-circle-left */
.product-section .product-logo-overlay,
.product-section .product-logo-overlay img,
.product-section .has-custom-border,
.product-section .has-custom-border img {
	border-radius: 0 !important;
	clip-path: none !important;
	-webkit-clip-path: none !important;
}

/* The image container group: position:relative for overlay,
   overflow:hidden so the logo stays inside the image bounds. */
.product-section .wp-block-column > .wp-block-group {
	position: relative;
	overflow: hidden !important;
}

/* Server-safe: ensure the container anchors overlay positioning */
#foco .wp-block-column > .wp-block-group,
#20-20 .wp-block-column > .wp-block-group,
[id="20-20"] .wp-block-column > .wp-block-group {
	position: relative;
	overflow: hidden !important;
}

/* Product sections separation line */
.product-separator-line {
	border: none !important;
	border-top: 3px solid #0299d6 !important;
	opacity: 1;
	margin: 0;
	background: none !important;
}

/* Product CTA buttons: match hero Conoce FOCO size */
.product-cta-button .wp-block-button__link {
	color: #fef0dc !important;
	background-color: #54b793 !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 1rem 2.5rem !important;
}

.product-cta-button .wp-block-button__link:hover {
	background-color: #2e6b84 !important;
	color: var(--wp--preset--color--off-white) !important;
}

.product-cta-button .wp-block-button__link:active {
	background-color: #54b793 !important;
	color: var(--wp--preset--color--off-white) !important;
}

/* ========================================================================
   14. TRABAJAMOS CON / CLIENTS
   ======================================================================== */

/* Trabajamos con — pictogram icons in columns */
.client-column .client-pictogram {
	display: block;
	margin: 0 auto var(--wp--preset--spacing--30);
	max-width: 80px;
	height: auto;
}

.client-logos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	justify-items: center;
}

.client-logos img {
	max-width: 140px;
	height: auto;
	filter: grayscale(50%);
	opacity: 0.75;
	transition: filter 0.4s ease, opacity 0.4s ease;
}

.client-logos img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

/* ========================================================================
   15. SOBRE MI (ABOUT)
   ======================================================================== */

/* About section CTA button hover: off-white bg + accent-blue text */
.about-cta-button .wp-block-button.is-style-outline .wp-block-button__link:hover,
.about-cta-button .wp-block-button .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--off-white);
	color: #0299d6;
	border-color: var(--wp--preset--color--off-white);
}

/* Sobre mi - Conoce mi trayectoria button: hover fef0dc bg + 2e6b84 text */
.about-trajectory-btn .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--off-white) !important;
	color: #2e6b84 !important;
	border-color: var(--wp--preset--color--off-white) !important;
}

.about-photo img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
	max-width: 320px;
	margin: 0 auto;
	display: block;
}

.certification-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

.certification-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--20);
}

.certification-item img {
	max-width: 80px;
	height: auto;
}

@media (max-width: 600px) {
	.certification-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ========================================================================
   16. BLOG CARDS
   ======================================================================== */

.wp-block-post-template .wp-block-post {
	background-color: var(--wp--preset--color--off-white);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 0.4s ease;
}

.wp-block-post-template .wp-block-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 48px rgba(45, 45, 44, 0.12);
}

.wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.blog-card-content {
	padding: var(--wp--preset--spacing--40);
}

.blog-card-content .wp-block-post-title {
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	color: #2d2d2c;
	line-height: 1.2;
}

/* Blog carousel title color override */
.foco-blog-carousel__title,
.foco-blog-carousel__title a {
	color: #2d2d2c !important;
}

.foco-blog-carousel__title a:hover {
	color: var(--wp--preset--color--accent-blue) !important;
}

/* Ensure blog carousel cards show 3 columns on desktop like testimonials */
@media (min-width: 992px) {
	.foco-blog-carousel__card {
		flex: 0 0 calc(33.3333% - var(--wp--preset--spacing--40, 1.5rem) * 2 / 3) !important;
	}
}

@media (min-width: 600px) and (max-width: 991px) {
	.foco-blog-carousel__card {
		flex: 0 0 calc(50% - var(--wp--preset--spacing--40, 1.5rem) / 2) !important;
	}
}

.blog-card-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.blog-card-category {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-blue);
}

/* Blog section cards — testimonial-card style */
.blog-testimonial-card {
	background-color: var(--wp--preset--color--off-white);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 0.4s ease;
}

.blog-testimonial-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(45, 45, 44, 0.1);
}

.blog-testimonial-card .blog-card-separator {
	border: none;
	border-top: 2px solid var(--wp--preset--color--separator);
	margin: var(--wp--preset--spacing--30) 0;
}

.blog-testimonial-card .wp-block-post-featured-image {
	margin: 0;
}

.blog-testimonial-card .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

/* ========================================================================
   17. FAQ ACCORDION
   ======================================================================== */

.wp-block-details {
	border-bottom: 2px solid var(--wp--preset--color--separator);
	padding: var(--wp--preset--spacing--40) 0;
}

.wp-block-details:first-of-type {
	border-top: 2px solid var(--wp--preset--color--separator);
}

.wp-block-details summary {
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--foreground);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	transition: color 0.3s ease;
	line-height: 1.3;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--wp--preset--color--foreground);
	border-bottom: 2px solid var(--wp--preset--color--foreground);
	transform: rotate(45deg);
	transition: transform 0.3s ease;
	flex-shrink: 0;
	margin-left: var(--wp--preset--spacing--30);
}

.wp-block-details[open] summary::after {
	transform: rotate(-135deg);
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--teal);
}

.wp-block-details > *:not(summary) {
	padding-top: var(--wp--preset--spacing--30);
	animation: faqOpen 0.3s ease forwards;
}

@keyframes faqOpen {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ========================================================================
   18. NEWSLETTER FORM
   ======================================================================== */

.newsletter-form input[type="text"],
.newsletter-form input[type="email"] {
	width: 100%;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 2px solid rgba(254, 240, 220, 0.3);
	border-radius: 999px;
	background: rgba(254, 240, 220, 0.1);
	color: var(--wp--preset--color--off-white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	transition: border-color 0.3s ease, background 0.3s ease;
	margin-bottom: var(--wp--preset--spacing--30);
}

.newsletter-form input[type="text"]::placeholder,
.newsletter-form input[type="email"]::placeholder {
	color: rgba(254, 240, 220, 0.5);
}

.newsletter-form input[type="text"]:focus,
.newsletter-form input[type="email"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent-blue);
	background: rgba(254, 240, 220, 0.15);
}

.newsletter-form label {
	color: var(--wp--preset--color--off-white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-bottom: var(--wp--preset--spacing--20);
	cursor: pointer;
}

.newsletter-form input[type="checkbox"] {
	accent-color: var(--wp--preset--color--hover-green);
	margin-top: 0.2em;
	flex-shrink: 0;
}

/* Eliminate gap between contact and footer — server-safe */
.wp-site-blocks .alignfull#contacto,
#contacto.wp-block-group {
	margin-bottom: 0 !important;
}

.wp-site-blocks .alignfull#contacto + footer.wp-block-template-part,
.wp-site-blocks .alignfull#contacto + .wp-block-template-part,
#contacto + footer,
#contacto ~ footer.wp-block-template-part {
	margin-top: 0 !important;
}

/* Remove any gap/margin between the last section and the footer */
.wp-site-blocks > .wp-block-group:last-of-type + footer.wp-block-template-part,
.wp-site-blocks > main + footer.wp-block-template-part,
footer.wp-block-template-part {
	margin-top: 0 !important;
}

/* ========================================================================
   19. CONTACT SECTION
   ======================================================================== */

.contact-buttons .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--off-white) !important;
	color: var(--wp--preset--color--off-white) !important;
	background-color: transparent !important;
}

.contact-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--off-white) !important;
	color: #0299d6 !important;
	border-color: var(--wp--preset--color--off-white) !important;
}

/* Contacto section — ensure buttons render correctly on any server */
#contacto .wp-block-button.is-style-outline .wp-block-button__link,
#contacto .wp-block-button .wp-block-button__link.is-style-outline,
#contacto .wp-block-button .wp-block-button__link[style] {
	border-color: #fef0dc !important;
	color: #fef0dc !important;
	background-color: transparent !important;
	border-width: 3px !important;
	border-style: solid !important;
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--body, 'Questrial', sans-serif);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: var(--wp--preset--spacing--30, 0.67rem) var(--wp--preset--spacing--50, 2.25rem) !important;
	text-decoration: none;
	display: inline-block;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.3s ease;
}

#contacto .wp-block-button.is-style-outline .wp-block-button__link:hover,
#contacto .wp-block-button .wp-block-button__link:hover {
	background-color: #fef0dc !important;
	color: #0299d6 !important;
	border-color: #fef0dc !important;
	transform: translateY(-1px);
}

/* Contacto section spacing — server-safe */
#contacto {
	padding-top: 6rem !important;
	padding-bottom: 6rem !important;
}

#contacto .wp-block-columns.contact-buttons {
	gap: var(--wp--preset--spacing--40, 1.5rem);
}

/* Server-safe: Contacto buttons — force outline appearance on any server */
/* Ultra-specific: covers WordPress core outline style overrides */
body #contacto .wp-block-button .wp-block-button__link,
body #contacto .wp-block-button.is-style-outline .wp-block-button__link,
body #contacto .wp-block-button.is-style-outline > .wp-block-button__link,
body #contacto .wp-block-button .wp-block-button__link.wp-element-button,
body #contacto .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button,
body .wp-block-group#contacto .wp-block-button .wp-block-button__link,
body .wp-block-group#contacto .wp-block-button.is-style-outline .wp-block-button__link,
html body #contacto .wp-block-button .wp-block-button__link {
	border: 3px solid #fef0dc !important;
	border-radius: 999px !important;
	color: #fef0dc !important;
	background-color: transparent !important;
	background: transparent !important;
	font-family: 'Questrial', sans-serif !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	padding: 0.67rem 2.25rem !important;
	text-decoration: none !important;
	display: inline-block !important;
	line-height: 1.4 !important;
	transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease !important;
	box-shadow: none !important;
}

body #contacto .wp-block-button .wp-block-button__link:hover,
body #contacto .wp-block-button.is-style-outline .wp-block-button__link:hover,
body #contacto .wp-block-button.is-style-outline > .wp-block-button__link:hover,
body #contacto .wp-block-button .wp-block-button__link.wp-element-button:hover,
body .wp-block-group#contacto .wp-block-button .wp-block-button__link:hover,
html body #contacto .wp-block-button .wp-block-button__link:hover {
	background-color: #fef0dc !important;
	background: #fef0dc !important;
	color: #0299d6 !important;
	border-color: #fef0dc !important;
}

/* Global: any button whose hover bg is off-white/fef0dc gets accent-blue text */
.wp-block-button .wp-block-button__link:hover[style*="fef0dc"],
.has-teal-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-accent-blue-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: #0299d6 !important;
}

/* Global rule: ALL buttons that transition to off-white/fef0dc bg on hover → text #0299d6 */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.ghost-button:hover {
	color: #0299d6 !important;
}

/* ========================================================================
   20. FOOTER
   ======================================================================== */

.site-footer {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
}

.site-footer a,
.site-footer .wp-block-navigation a,
.site-footer p a,
footer.wp-block-template-part a,
footer .wp-block-navigation a {
	color: #fef0dc !important;
	text-decoration: none;
	transition: color 0.3s ease;
	font-weight: 400;
}

.site-footer a:hover,
.site-footer .wp-block-navigation a:hover,
.site-footer p a:hover,
footer.wp-block-template-part a:hover,
footer .wp-block-navigation a:hover {
	color: #54b793 !important;
}

.site-footer .wp-block-social-links .wp-social-link {
	background-color: transparent;
	transition: transform 0.3s ease;
}

.site-footer .wp-block-social-links .wp-social-link:hover {
	transform: scale(1.15);
}

/* Telex credit subtle styling */
.site-footer .telex-credit {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.7;
	font-style: italic;
	letter-spacing: 0.02em;
}

/* ========================================================================
   21. ANIMATIONS
   ======================================================================== */

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Carousel fade transition for images/slides */
.carousel-slide {
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	position: absolute;
	inset: 0;
}

.carousel-slide.is-active {
	opacity: 1;
	position: relative;
}

/* Hero scroll-fade (CSS scroll-driven animation) */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		.hero-content {
			opacity: 1;
			transform: translateY(0);
			animation: hero-fade linear both;
			animation-timeline: scroll(root);
			animation-range: 0px 60vh;
		}

		@keyframes hero-fade {
			from {
				opacity: 1;
				transform: translateY(0);
			}
			to {
				opacity: 0;
				transform: translateY(-40px);
			}
		}
	}
}

/* ========================================================================
   22. LANGUAGE SWITCHER (hidden, ready for future translation)
   ======================================================================== */

.lang-switcher {
	display: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.lang-switcher.is-visible {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
}

.lang-switcher a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.lang-switcher a.is-active,
.lang-switcher a:hover {
	opacity: 1;
}

/* ========================================================================
   23. UTILITY CLASSES
   ======================================================================== */

/* Screen-reader only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Star rating display */
.star-rating {
	color: var(--wp--preset--color--gold);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.15em;
}

.numeric-score {
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
}

/* Pictogram icon containers */
.pictogram-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pictogram-icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: var(--wp--preset--color--teal);
	stroke-width: 1.5;
}

/* ========================================================================
   24. RESPONSIVE REFINEMENTS
   ======================================================================== */

@media (max-width: 781px) {
	/* Stack product columns */
	.product-section .wp-block-columns {
		flex-direction: column;
	}

	/* FAQ full-width */
	.faq-section .wp-block-columns {
		flex-direction: column;
	}

	/* Newsletter stack */
	.newsletter-section .wp-block-columns {
		flex-direction: column;
	}

	/* Contact buttons stack */
	.contact-buttons .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	/* About certifications 2-col on mobile */
	.certification-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Trabajamos con single column */
	.client-column {
		margin-bottom: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 480px) {
	/* Tighter product icons */
	.product-icons {
		gap: var(--wp--preset--spacing--30);
	}

	.product-icon-item {
		max-width: 80px;
	}

	/* Single-col certifications on very small screens */
	.certification-grid {
		grid-template-columns: 1fr;
	}
}

/* ========================================================================
   25. LOOP LAYOUT UTILITIES
   ======================================================================== */

/* Horizontal scrollable rail */
.wp-block-query.is-style-loop-rail .wp-block-post-template {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: var(--wp--preset--spacing--20);
}

.wp-block-query.is-style-loop-rail .wp-block-post-template > * {
	flex: 0 0 320px;
	scroll-snap-align: start;
}

/* Compact list with hairline row dividers */
.wp-block-query.is-style-loop-list .wp-block-post-template > * {
	border-bottom: 1px solid var(--wp--preset--color--separator);
	padding-block: var(--wp--preset--spacing--30);
}

.wp-block-query.is-style-loop-list .wp-block-post-template > *:last-child {
	border-bottom: 0;
}

/* Zigzag — flip columns inside every even entry */
.wp-block-query.is-style-loop-zigzag .wp-block-post-template > *:nth-child(even) .wp-block-columns {
	flex-direction: row-reverse;
}

/* Timeline — vertical line with node markers per entry */
.wp-block-query.is-style-loop-timeline .wp-block-post-template {
	position: relative;
	padding-inline-start: 2.5rem;
}

.wp-block-query.is-style-loop-timeline .wp-block-post-template::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0.5rem;
	width: 2px;
	background: currentColor;
	opacity: 0.15;
}

.wp-block-query.is-style-loop-timeline .wp-block-post-template > * {
	position: relative;
}

.wp-block-query.is-style-loop-timeline .wp-block-post-template > *::before {
	content: '';
	position: absolute;
	inset-inline-start: -2.25rem;
	inset-block-start: 0.6rem;
	width: 1rem;
	height: 1rem;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: var(--wp--preset--color--background);
}

/* Magazine — first child spans 2 columns of the grid */
.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
	grid-column: span 2;
}

@media (max-width: 600px) {
	.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
		grid-column: auto;
	}
}

/* ========================================================================
   26. SINGLE POST NAVIGATION
   ======================================================================== */

.single-post-navigation .wp-block-post-navigation-link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	max-width: 45%;
}

.single-post-navigation .wp-block-post-navigation-link .wp-block-post-navigation-link__label {
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--teal);
}

.single-post-navigation .wp-block-post-navigation-link a {
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	line-height: 1.3;
	transition: color 0.3s ease;
}

.single-post-navigation .wp-block-post-navigation-link a:hover {
	color: var(--wp--preset--color--accent-blue);
}

.single-post-navigation .post-navigation-link-previous {
	text-align: left;
}

.single-post-navigation .post-navigation-link-next {
	text-align: right;
	margin-left: auto;
}

.back-to-top-btn .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--teal) !important;
	color: var(--wp--preset--color--off-white) !important;
}

@media (max-width: 600px) {
	.single-post-navigation .wp-block-post-navigation-link {
		max-width: 100%;
	}

	.single-post-navigation > .wp-block-group {
		flex-direction: column;
		gap: var(--wp--preset--spacing--40);
	}

	.single-post-navigation .post-navigation-link-next {
		text-align: left;
		margin-left: 0;
	}
}

/* ========================================================================
   27. PRINT STYLES
   ======================================================================== */

@media print {
	.wp-site-blocks > header.wp-block-template-part,
	.site-footer,
	.carousel-controls,
	.ghost-button,
	.wp-block-button,
	.lang-switcher,
	.scroll-progress {
		display: none;
	}

	body,
	.wp-site-blocks {
		background: #fff;
		color: #000;
	}

	a {
		color: #000;
		text-decoration: underline;
	}
}