/*
Theme Name:   WCA Theme
Description:  Winnsboro Center for the Arts block theme. Child of Twenty Twenty-Five. Presentation only — site functionality lives in the WCA Core plugin.
Author:       Winnsboro Center for the Arts
Template:     twentytwentyfive
Version:      0.1.3
Requires at least: 6.7
Requires PHP: 8.0
Text Domain:  wca-theme
*/

/* =============================================
   Password-protected pages (markup from WCA Core)
   ============================================= */
.wca-password-wrapper {
	display: flex;
	justify-content: center;
	padding: var(--wp--preset--spacing--50) 0;
}

.wca-password-box {
	max-width: 32rem;
	width: 100%;
	padding: var(--wp--preset--spacing--40);
	border-top: 6px solid var(--wp--preset--color--accent-1);
	border-radius: 8px;
	background: var(--wp--preset--color--accent-5);
	text-align: center;
}

.wca-password-box h2 {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--large);
}

.wca-password-form-container input[type="password"] {
	padding: 0.5em 0.75em;
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 4px;
}

.wca-password-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4);
}

/* =============================================
   Block style: Flip card (Group block)
   Put two Groups inside: the first is the front, the second the back.
   ============================================= */
.is-style-wca-flip-card {
	perspective: 1000px;
	display: grid;
	gap: 0 !important;
}

.is-style-wca-flip-card > * {
	grid-area: 1 / 1;
	margin: 0 !important;
	backface-visibility: hidden;
	transition: transform 0.6s ease;
}

.is-style-wca-flip-card > :nth-child(2) {
	transform: rotateY(180deg);
}

.is-style-wca-flip-card:hover > :first-child,
.is-style-wca-flip-card:focus-within > :first-child {
	transform: rotateY(-180deg);
}

.is-style-wca-flip-card:hover > :nth-child(2),
.is-style-wca-flip-card:focus-within > :nth-child(2) {
	transform: rotateY(0);
}

/* =============================================
   Block style: Fade in (Group, Columns, Image, Cover)
   Uses scroll-driven animation where supported; otherwise simply visible.
   ============================================= */
@supports (animation-timeline: view()) {
	.is-style-wca-fade-in {
		animation: wca-fade-in linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 30%;
	}
}

@keyframes wca-fade-in {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-style-wca-flip-card > * {
		transition: none;
	}

	.is-style-wca-fade-in {
		animation: none;
	}
}