/*
 * Vitzi Theme - custom styles.
 * Mobile menu, scroll motion animations (matching the Figma/react-motion
 * behaviour at https://dt-vitzi4.figma.site/), Contact Form 7 and core
 * WordPress element styling.
 */

/* ----------------------------------------------------------------------
 * Motion animations - replicating the react/framer-motion behaviour of
 * https://dt-vitzi4.figma.site/.
 * Initial states mirror the inline styles in index-mobile.html; elements
 * animate to their final state when they enter the viewport (JS adds
 * .vitzi-inview).
 *
 * The spring easings are real spring simulations (with overshoot) exported
 * as CSS linear() curves, matching framer-motion:
 *  --vitzi-spring-pop  ~ spring(stiffness: 260, damping: 20)  - check icons
 *  --vitzi-spring-soft ~ spring(stiffness: 170, damping: 22)  - badges/cards
 * Fades use framer-motion's easeOut-style bezier.
 * ------------------------------------------------------------------- */
:root {
	--vitzi-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--vitzi-spring-pop: linear(0.0003, 0.0985, 0.309, 0.5363, 0.7451, 0.899, 1.0039, 1.0592, 1.0805, 1.0785, 1.0639, 1.0455, 1.0272, 1.0129, 1.0026, 0.9966, 0.9938, 0.9934, 0.9942, 0.9957, 0.9972, 0.9985, 0.9995, 1.0001, 1.0004, 1.0005);
	--vitzi-spring-soft: linear(0.0002, 0.0792, 0.2426, 0.418, 0.5826, 0.7137, 0.8165, 0.8882, 0.9383, 0.9696, 0.989, 0.9994, 1.0046, 1.0063, 1.0064, 1.0055, 1.0044, 1.0033, 1.0023, 1.0015, 1.0009, 1.0006, 1.0003, 1.0001, 1, 1);
}

/* Fallback for browsers without linear() support. */
@supports not (transition-timing-function: linear(0, 1)) {
	:root {
		--vitzi-spring-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
		--vitzi-spring-soft: cubic-bezier(0.34, 1.3, 0.64, 1);
	}
}

[data-vitzi-anim] {
	opacity: 0;
	transition:
		opacity 0.6s var(--vitzi-ease-out),
		transform 0.7s var(--vitzi-ease-out);
	will-change: opacity, transform;
}

[data-vitzi-anim="fade-up-sm"] { transform: translateY(14px); }
[data-vitzi-anim="fade-up-md"] { transform: translateY(20px); }
[data-vitzi-anim="fade-up-lg"] { transform: translateY(30px); }
[data-vitzi-anim="fade-left"]  { transform: translateX(-28px); }
[data-vitzi-anim="fade-right"] { transform: translateX(28px); }

/* Spring animated elements (scale based - framer-motion spring feel). */
[data-vitzi-anim="zoom-in"] {
	transform: translateY(20px) scale(0.94);
	transition: opacity 0.5s var(--vitzi-ease-out), transform 0.84s var(--vitzi-spring-soft);
}

[data-vitzi-anim="scale-in"] {
	transform: scale(0.85);
	transition: opacity 0.4s var(--vitzi-ease-out), transform 0.84s var(--vitzi-spring-soft);
}

[data-vitzi-anim="pop"] {
	transform: scale(0);
	transition: opacity 0.25s var(--vitzi-ease-out), transform 0.74s var(--vitzi-spring-pop);
}

[data-vitzi-anim].vitzi-inview {
	opacity: 1;
	transform: none;
}

/* No-JS / reduced motion: show everything. */
.no-js [data-vitzi-anim],
[data-vitzi-anim].vitzi-no-anim {
	opacity: 1;
	transform: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-vitzi-anim] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ----------------------------------------------------------------------
 * Mobile menu (classes from index-mobile.html + open/close transitions).
 * ------------------------------------------------------------------- */
.vitzi-menu-overlay {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.vitzi-menu-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.vitzi-mobile-menu {
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	visibility: hidden;
}

.vitzi-mobile-menu.is-open {
	transform: none;
	visibility: visible;
}

body.vitzi-menu-locked {
	overflow: hidden;
}

/* Staggered slide-in for mobile menu links. */
.vitzi-mobile-menu nav a {
	opacity: 0;
	transform: translateX(24px);
	transition:
		opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.vitzi-mobile-menu.is-open nav a {
	opacity: 1;
	transform: none;
}

.vitzi-mobile-menu.is-open nav a:nth-child(1) { transition-delay: 0.08s; }
.vitzi-mobile-menu.is-open nav a:nth-child(2) { transition-delay: 0.14s; }
.vitzi-mobile-menu.is-open nav a:nth-child(3) { transition-delay: 0.2s; }
.vitzi-mobile-menu.is-open nav a:nth-child(4) { transition-delay: 0.26s; }
.vitzi-mobile-menu.is-open nav a:nth-child(5) { transition-delay: 0.32s; }

/* ----------------------------------------------------------------------
 * Contact Form 7 styling to match the design.
 * ------------------------------------------------------------------- */
.vitzi-contact-form .wpcf7-form label {
	display: block;
	margin-bottom: 1rem;
	font-size: 14px;
	color: var(--vitzi-ink, #1d1a16);
}

.vitzi-contact-form .wpcf7-form input[type="text"],
.vitzi-contact-form .wpcf7-form input[type="email"],
.vitzi-contact-form .wpcf7-form input[type="tel"],
.vitzi-contact-form .wpcf7-form input[type="url"],
.vitzi-contact-form .wpcf7-form textarea {
	display: block;
	width: 100%;
	margin-top: 0.375rem;
	padding: 0.75rem 1.25rem;
	border: 1px solid var(--vitzi-stone, #e7e0d6);
	border-radius: 1rem;
	background: #fff;
	font-size: 15px;
	color: var(--vitzi-ink, #1d1a16);
	outline: none;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.vitzi-contact-form .wpcf7-form input:focus,
.vitzi-contact-form .wpcf7-form textarea:focus {
	border-color: var(--vitzi-amber, #f4a71c);
	box-shadow: 0 0 0 3px rgba(244, 167, 28, 0.2);
}

.vitzi-contact-form .wpcf7-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	border: 0;
	border-radius: 9999px;
	background: var(--vitzi-amber, #f4a71c);
	color: #fff;
	font-size: 15px;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.vitzi-contact-form .wpcf7-form input[type="submit"]:hover {
	transform: scale(1.03);
}

.vitzi-contact-form .wpcf7-not-valid-tip {
	margin-top: 0.25rem;
	font-size: 13px;
	color: #dc2626;
}

.vitzi-contact-form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1.25rem;
	border: 1px solid var(--vitzi-amber, #f4a71c) !important;
	border-radius: 1rem;
	font-size: 14px;
	color: var(--vitzi-ink, #1d1a16);
}

/* ----------------------------------------------------------------------
 * WordPress core element styling (pagination, entry content, alignments).
 * ------------------------------------------------------------------- */
.vitzi-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.vitzi-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.75rem;
	border: 1px solid var(--vitzi-stone, #e7e0d6);
	border-radius: 9999px;
	background: #fff;
	font-size: 14px;
	color: var(--vitzi-ink, #1d1a16);
	text-decoration: none;
	transition: background 0.3s ease, color 0.3s ease;
}

.vitzi-pagination .page-numbers.current,
.vitzi-pagination .page-numbers:hover {
	background: var(--vitzi-amber, #f4a71c);
	border-color: var(--vitzi-amber, #f4a71c);
	color: #fff;
}

.vitzi-entry-content h2 { font-size: 2rem; color: var(--vitzi-ink, #1d1a16); }
.vitzi-entry-content h3 { font-size: 1.5rem; color: var(--vitzi-ink, #1d1a16); }
.vitzi-entry-content a { color: var(--vitzi-amber-dark, #e8891a); text-decoration: underline; }
.vitzi-entry-content ul { list-style: disc; padding-left: 1.5rem; }
.vitzi-entry-content ol { list-style: decimal; padding-left: 1.5rem; }
.vitzi-entry-content img { max-width: 100%; height: auto; border-radius: 1.5rem; }
.vitzi-entry-content blockquote {
	border-left: 4px solid var(--vitzi-amber, #f4a71c);
	padding-left: 1.25rem;
	font-style: italic;
}

.alignleft { float: left; margin: 0.5rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 1rem auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--vitzi-muted, #6b6459); text-align: center; }
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}