/*
 * Maracuya — Global CSS
 *
 * Minimal reset + utility classes.
 * Design tokens come entirely from theme.json (CSS custom properties).
 * No hardcoded colors or sizing here.
 *
 * @package Maracuya
 */

/* ─── Reset ──────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	overflow-x: hidden;
}

img,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
}

/* ─── Skip link (accessibility) ─────────────────────────────────────────── */

.skip-to-content {
	position: absolute;
	top: -100%;
	left: 1rem;
	z-index: 9999;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--md);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	transition: top 0.1s;
}

.skip-to-content:focus {
	top: 1rem;
}

/* ─── Mobile navigation ─────────────────────────────────────────────────── */

[data-nav-menu] {
	transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (max-width: 768px) {
	[data-nav-menu] {
		position: fixed;
		inset: 0 0 0 30%;
		z-index: 500;
		background: var(--wp--preset--color--base);
		padding: 5rem 2rem 2rem;
		transform: translateX(100%);
		opacity: 0;
		overflow-y: auto;
		box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
	}

	body.nav-is-open [data-nav-menu] {
		transform: translateX(0);
		opacity: 1;
	}

	body.nav-is-open::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 499;
		background: rgba(0, 0, 0, 0.4);
	}
}

/* ─── Breadcrumbs ────────────────────────────────────────────────────────── */

.maracuya-breadcrumbs {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-muted);
}

.maracuya-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.maracuya-breadcrumbs__link {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
	transition: color var(--wp--custom--transition--base);
}

.maracuya-breadcrumbs__link:hover {
	color: var(--wp--preset--color--accent);
}

.maracuya-breadcrumbs__current {
	color: var(--wp--preset--color--text-muted);
}

.maracuya-breadcrumbs__separator {
	color: var(--wp--preset--color--border);
	font-size: 0.8em;
}

/* ─── Block-level utilities (used in patterns & templates) ───────────────── */

/* Full bleed section */
.maracuya-full-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* Visually hidden (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-width: 0;
}

/* Premium hover effect. The button's resting appearance comes from the editor
   / theme settings — we do NOT override background, color, border or radius
   here. Only behaviour needed for the hover animation (positioning + clipping)
   is added, and the visual effect (expanding circle + sliding arrow) is applied
   only on :hover. */
.has-premium-hover-buttons .wp-block-button__link {
	position: relative;
	overflow: hidden;
	z-index: 1;
	transition: padding 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
	            color 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.has-premium-hover-buttons .wp-block-button__link:hover {
	/* Make room on the right for the arrow as it arrives. */
	padding-right: 2.6em;
	color: var(--mcya-btn-hover-text, #ffffff) !important;
}

/* Expanding circle — only grows on hover, hidden at rest. */
.has-premium-hover-buttons .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background-color: var(--mcya-btn-hover-circle, #000000);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
	            height 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
	z-index: -1;
	pointer-events: none;
}

.has-premium-hover-buttons .wp-block-button__link:hover::before {
	width: 320%;
	height: 320%;
}

/* Sliding arrow — travels in from further out for a more pronounced arrival. */
.has-premium-hover-buttons .wp-block-button__link::after {
	content: "";
	position: absolute;
	right: 1.1em;
	top: 50%;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 8 0 L 6.59 1.41 L 12.17 7 L 0 7 L 0 9 L 12.17 9 L 6.59 14.59 L 8 16 L 16 8 Z' transform='translate(4 4)'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 8 0 L 6.59 1.41 L 12.17 7 L 0 7 L 0 9 L 12.17 9 L 6.59 14.59 L 8 16 L 16 8 Z' transform='translate(4 4)'/%3E%3C/svg%3E") no-repeat center / contain;
	transform: translateY(-50%) translateX(28px);
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
	            opacity 0.3s ease;
	z-index: 2;
	pointer-events: none;
}

.has-premium-hover-buttons .wp-block-button__link:hover::after {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* ─── Core block: image ──────────────────────────────────────────────────── */

figure.wp-block-image {
	margin: 0;
}

figure.wp-block-image figcaption {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-muted);
	text-align: center;
	margin-top: 0.5rem;
}

/* ─── Core block: separator ─────────────────────────────────────────────── */

.wp-block-separator {
	border: none;
	border-top: 1px solid var(--wp--preset--color--border);
	margin-block: var(--wp--preset--spacing--xl);
}

/* ─── Core block: navigation ─────────────────────────────────────────────── */

.wp-block-navigation :where( a:not(.wp-block-button__link) ) {
	text-decoration: none;
}

/* ─── Core block: query / post grid ─────────────────────────────────────── */

.wp-block-post-title a {
	text-decoration: none;
}

/* ─── Core block: pullquote ─────────────────────────────────────────────── */

blockquote.wp-block-pullquote {
	margin: 0;
}

/* ─── Maracuya patterns — shared card style ─────────────────────────────── */

.maracuya-card {
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	background: var(--wp--preset--color--base);
	transition: box-shadow var(--wp--custom--transition--slow),
	            transform var(--wp--custom--transition--slow);
}

.maracuya-card:hover {
	transform: translateY(-2px);
}

/* ─── Focus styles (accessibility) ──────────────────────────────────────── */

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

/* ─── Print ──────────────────────────────────────────────────────────────── */

@media print {
	[data-nav-toggle],
	[data-nav-menu],
	.maracuya-breadcrumbs { display: none; }
}

/* ─── Sticky Footer Layout ────────────────────────────────────────────────── */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > main {
	flex-grow: 1;
}

/* ─── Site Header ────────────────────────────────────────────────────────── */

/* Header height is fixed in CSS (not measured by JS) so the content offset
   below is reserved synchronously on first paint — no layout shift / FOUC.
   --mcya-header-h is the single source of truth for both the header and the
   spacer that offsets the page content under a fixed (sticky) header. */
:root {
	--mcya-header-h: 72px;
}
@media screen and (max-width: 782px) {
	:root {
		--mcya-header-h: 60px;
	}
}

/* Base header: solid background, scrolls away with the page (static).
   Behaviour is opt-in via body classes:
     .has-sticky-header       → fixed bar that hides on scroll-down, shows on scroll-up
     .has-glass-header        → translucent blurred background
     .has-transparent-header  → absolute over the hero (set via inline CSS in functions.php)
   None of these add any cost unless the matching option is enabled. */
.site-header {
	position: relative;
	z-index: 100;
}

/* Inner row: logo left, nav right, vertically centered.
   min-height (not fixed height) keeps the default at --mcya-header-h but lets
   an edited header grow if it holds taller content. The spacer below reserves
   the same default synchronously; JS corrects it only if the real header turns
   out taller (rare), so typical layouts never shift. */
.site-header .header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--lg);
	min-height: var(--mcya-header-h);
	padding-block: var(--wp--preset--spacing--xs);
	padding-inline: var(--wp--preset--spacing--md);
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

/* Logo width is driven entirely by CSS variables (no inline width on the <img>),
   so it transitions smoothly both ways. Base = --mcya-logo-w, active = the rule
   below. */
.site-header .wp-block-site-logo img,
.site-header .custom-logo-link img {
	display: block;
	width: var(--mcya-logo-w, 160px);
	height: auto;
	max-width: none;
	transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ── Sticky / hide-on-scroll ──────────────────────────────────────────────── */

body.has-sticky-header .site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	transition: transform 0.3s ease;
}

/* Hidden state (JS adds .header-hidden when scrolling down) */
body.has-sticky-header .site-header.header-hidden {
	transform: translateY(-100%);
}

/* Reserve the header's space so the fixed bar never overlaps content.
   Done purely in CSS with the same variable → no JS, no first-paint shift.
   Transparent headers are meant to overlap the hero, so they get no spacer. */
body.has-sticky-header:not(.has-transparent-header) .wp-site-blocks > main {
	padding-top: var(--mcya-header-h);
}

/* Admin bar offset for the fixed bar */
.admin-bar.has-sticky-header .site-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar.has-sticky-header .site-header {
		top: 46px;
	}
}

/* ── Glass effect ─────────────────────────────────────────────────────────── */

/* Glass only applies once the header sticks (scrolled past the hero). At the top
   a transparent header stays see-through. */
body.has-glass-header .site-header.is-stuck {
	background-color: var(--mcya-header-glass-bg) !important;
	-webkit-backdrop-filter: blur(var(--mcya-header-glass-blur));
	backdrop-filter: blur(var(--mcya-header-glass-blur));
}

/* Transparent header: see-through at the top (before it sticks). */
body.has-transparent-header .site-header:not(.is-stuck) {
	background-color: transparent !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* ── Active/scrolled-state compaction ─────────────────────────────────────────
   Once the header is active (scrolled past the offset), shrink the logo to
   --mcya-sticky-logo-w and hide the CTA button. The width transitions smoothly
   (transition set on the base logo rule above). */
.site-header.is-stuck .wp-block-site-logo img,
.site-header.is-stuck .custom-logo-link img,
.site-header.is-active .wp-block-site-logo img,
.site-header.is-active .custom-logo-link img {
	width: var(--mcya-sticky-logo-w, 180px);
}
.site-header.is-stuck .header-button,
.site-header.is-active .header-button {
	display: none !important;
}

/* ── Sticky-state text / link colours ─────────────────────────────────────────
   When the header sticks (often on a light background) use the dedicated sticky
   colours, overriding the transparent-header white text. */
body.has-sticky-header .site-header.is-stuck a:not(.wp-block-button__link):not(.wp-element-button),
body.has-sticky-header .site-header.is-stuck .wp-block-navigation-item__label,
body.has-sticky-header .site-header.is-stuck .wp-block-navigation-item__content {
	color: var(--mcya-sticky-header-text) !important;
}
body.has-sticky-header .site-header.is-stuck a:not(.wp-block-button__link):not(.wp-element-button):hover,
body.has-sticky-header .site-header.is-stuck .wp-block-navigation-item__label:hover,
body.has-sticky-header .site-header.is-stuck .wp-block-navigation-item__content:hover {
	color: var(--mcya-sticky-header-text-hover) !important;
}

/* ─── Site Footer ────────────────────────────────────────────────────────── */

.site-footer {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding-bottom: var(--wp--preset--spacing--xl);
}

.site-footer a {
	color: inherit;
	opacity: 1;
	text-decoration: none;
	transition: opacity var(--wp--custom--transition--base);
}

.site-footer a:hover {
	opacity: 0.8;
	color: var(--wp--preset--color--accent);
}

.site-footer .wp-block-separator {
	border-color: rgba(255, 255, 255, 0.08);
}



/* ─── Wonder Gallery (fan effect) ─────────────────────────────────────────────
   Apply the "wonder-gallery" class to a group of images. Cards sit in a row;
   on hover the active card lifts and straightens while neighbours tilt away in
   both directions, the tilt growing with distance. Tilt values are set per-card
   by assets/js/wonder-gallery.js; this file holds the look and transitions. */

.wonder-gallery {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 0;
	padding: 30px 16px 50px;
	perspective: 1400px;
}

.wonder-gallery .wp-block-image {
	flex: 0 0 auto;
	margin: 0 -26px;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
	            filter 0.35s ease;
	transform-origin: center center;
	will-change: transform;
	cursor: pointer;
	position: relative;
}

/* Resting fan: fixed widths per position, scaled so the whole composition fits
   within ~1200px. Centre largest (285px), shrinking toward the edges (156px),
   all centred on one axis and overlapping tightly. Tuned for ~7 images. */
.wonder-gallery .wp-block-image:nth-child(1),
.wonder-gallery .wp-block-image:nth-last-child(1) {
	width: 156px;
	z-index: 1;
}
.wonder-gallery .wp-block-image:nth-child(2),
.wonder-gallery .wp-block-image:nth-last-child(2) {
	width: 198px;
	z-index: 2;
}
.wonder-gallery .wp-block-image:nth-child(3),
.wonder-gallery .wp-block-image:nth-last-child(3) {
	width: 241px;
	z-index: 3;
}
.wonder-gallery .wp-block-image:nth-child(4) {
	width: 285px;
	z-index: 4;
}

.wonder-gallery .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 20px 45px -18px rgba(15, 23, 42, 0.5);
}

/* When any card is hovered, dim siblings slightly to focus the active one. */
.wonder-gallery:hover .wp-block-image {
	filter: brightness(0.92);
}

.wonder-gallery .wp-block-image.is-active {
	filter: brightness(1);
	z-index: 10;
}

/* Reduced motion: no tilting, just a gentle lift. */
@media (prefers-reduced-motion: reduce) {
	.wonder-gallery .wp-block-image {
		transform: none !important;
		transition: filter 0.2s ease;
	}
}

/* Mobile: horizontal scroller centred on the middle image, with snap. */
@media (max-width: 782px) {
	.wonder-gallery {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		perspective: none;
		gap: 10px;
		padding: 20px 15vw 30px;        /* centres a 70vw image; neighbours peek in */
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	.wonder-gallery .wp-block-image {
		margin: 0;
		width: 70vw;
		transform: none !important;
		scroll-snap-align: center;
	}
	/* Hide scrollbar for a cleaner look */
	.wonder-gallery::-webkit-scrollbar { display: none; }
	.wonder-gallery { scrollbar-width: none; }
}

/* ─── Services grid cards ─────────────────────────────────────────────────────
   Whole cover links to the post (stretched title link), the popup trigger stays
   separately clickable, the background image zooms on hover within the card,
   and the trigger icon scales from its centre on hover. */

.services-grid .wp-block-post {
	position: relative;
	display: flex;
}

.services-grid .wp-block-cover {
	position: relative;
	overflow: hidden;
	flex: 1;
	width: 100%;
}

/* Background image zoom on hover, kept inside the card */
.services-grid .wp-block-cover__image-background {
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
	transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
}

.services-grid .wp-block-cover:hover .wp-block-cover__image-background {
	transform: scale(1.06) translateZ(0);
}

/* Explicit layout so the title sits at the bottom and the trigger at the top in
   BOTH Chrome and Safari. Safari does not stretch the cover inner-container to
   full height the way Chrome does, so WordPress's is-position-bottom-center
   collapses everything to the centre. We force full height + flex-end here. */
.services-grid .wp-block-cover .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	height: auto;
	/* Fixed, equal padding so the title sits the same distance from the left
	   and bottom edges on every card, regardless of width or span. Overrides
	   WordPress constrained-layout / has-global-padding spacing. */
	padding: 24px !important;
	max-width: none !important;
}

/* Neutralise the constrained inner wrapper so the title aligns to the card edge,
   not to a centred content column. */
.services-grid .wp-block-cover__inner-container > * {
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* The group that holds the trigger + title fills the inner container so the
   title can sit at the very bottom. It must stay static so the trigger's
   absolute position resolves against the cover, not the group. */
.services-grid .wp-block-cover__inner-container > .wp-block-group {
	width: 100%;
	margin-top: auto;
	position: static;
}

/* Trigger pinned to the top-right corner of the CARD (cover is the positioned
   ancestor), regardless of where the group sits. */
.services-grid .mcya-popup-block {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	margin: 0;
}

/* Whole-card click is handled in navigation.js (it navigates to the post when
   the cover is clicked, except on the trigger). Show a pointer to signal it. */
.services-grid .wp-block-cover {
	cursor: pointer;
}

.services-grid .wp-block-post-title a {
	color: inherit;
}

.services-grid .wp-block-post-title {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}

/* Icon scales from its own centre on hover */
.services-grid .mcya-popup__trigger {
	transform-origin: center center;
	transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.2s ease;
}

.services-grid .mcya-popup__trigger:hover {
	transform: scale(1.18);
}

/* ── Full-width alignment ──────────────────────────────────────────────────── */
.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow-x: clip;
}

/* ── Stretched block link (Group / Columns / Column / Cover) ───────────────── */
/* The whole block is clickable; real links & buttons inside stay usable. */
.mcya-has-stretched-link {
	position: relative;
}
.mcya-stretched-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	font-size: 0;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
}
/* Interactive children sit above the overlay so they remain clickable. */
.mcya-has-stretched-link a:not(.mcya-stretched-link),
.mcya-has-stretched-link button,
.mcya-has-stretched-link input,
.mcya-has-stretched-link select,
.mcya-has-stretched-link textarea,
.mcya-has-stretched-link label,
.mcya-has-stretched-link .wp-block-button,
.mcya-has-stretched-link [role="button"] {
	position: relative;
	z-index: 2;
}