/*
Theme Name: Joanne Piano Portfolio
Author: WordPress Telex
Description: A refined, musically-inspired portfolio theme for Joanne Fernandes, piano teacher. Ivory Keys and Silence aesthetic with deep amaranthine accents, Cormorant Garamond display type, and serene neutrals.
Version: 0.1.2
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: telex-joanne-piano
Tags: block-theme, full-site-editing, portfolio, education
*/

/* === Base refinements === */
html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* === Navigation link underline animation === */
.site-header-nav .wp-block-navigation a {
	position: relative;
	padding-bottom: 4px;
}

.site-header-nav .wp-block-navigation a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 1px;
	background-color: #9B1B5A;
	transition: width 0.3s ease;
}

.site-header-nav .wp-block-navigation a:hover::after {
	width: 100%;
}

/* === Separator flourish sizing === */
.wp-block-separator.is-style-wide {
	max-width: 120px;
}

/* === Equal-height card layouts === */
.equal-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
	flex-grow: 0;
}

.equal-cards > .wp-block-column > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.equal-cards .cta-bottom {
	margin-top: auto;
	justify-content: center;
}

/* === Footer margin reset === */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* === Testimonial card styling === */
.testimonial-card {
	position: relative;
}

.testimonial-card::before {
	content: '\201C';
	font-family: 'Cormorant Garamond', 'Georgia', serif;
	font-size: 5rem;
	color: #9B1B5A;
	opacity: 0.15;
	position: absolute;
	top: -0.5rem;
	left: 1rem;
	line-height: 1;
	pointer-events: none;
}

/* === Floating contact tab === */
.floating-contact-tab {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background-color: #9B1B5A;
	z-index: 999;
	width: 44px;
	height: 160px;
	border-radius: 6px 0 0 6px;
	transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1);
	display: flex;
	align-items: center;
	overflow: hidden;
	box-shadow: -4px 0 15px rgba(0, 0, 0, 0.15);
}

.floating-contact-tab:hover {
	width: 210px;
}

.floating-contact-inner {
	display: flex;
	align-items: center;
	width: 210px;
	height: 100%;
	position: absolute;
	right: 0;
}

.floating-contact-vert {
	width: 44px;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.floating-text-vert {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: #FFFFF0;
	font-family: 'Jost', 'Helvetica Neue', sans-serif;
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.floating-contact-expanded {
	position: absolute;
	left: 24px;
	right: 16px;
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	white-space: nowrap;
	transition: opacity 0.4s ease 0.1s;
}

.floating-contact-link {
	display: flex;
	align-items: center;
	gap: 0.4em;
	text-decoration: none;
	color: #FFFFF0;
	font-family: 'Jost', 'Helvetica Neue', sans-serif;
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.floating-note {
	font-size: 15px;
	line-height: 1;
	color: #FFFFF0;
}

.floating-social-icons {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.floating-social-icons a {
	color: #FFFFF0;
	opacity: 0.85;
	display: flex;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.floating-social-icons a:hover {
	opacity: 1;
	transform: scale(1.15);
}

.floating-contact-tab:hover .floating-contact-vert {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.floating-contact-tab:hover .floating-contact-expanded {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.floating-contact-tab,
	.floating-contact-vert,
	.floating-contact-expanded,
	.floating-social-icons a {
		transition: none;
	}
}

/* === Scroll fade-in animation === */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-in-section {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-section.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* === Header transparency on hero pages === */
.transparent-header .wp-block-site-title a {
	color: #FFFFF0;
}

.transparent-header .wp-block-navigation a {
	color: #FFFFF0;
}

.transparent-header .wp-block-navigation__responsive-container-open {
	color: #FFFFF0;
}

/* === Section divider flourish === */
.section-divider {
	max-width: 120px;
	margin-left: auto;
	margin-right: auto;
}

/* === About image accent border === */
.accent-border-left {
	border-left: 3px solid #9B1B5A;
	padding-left: 1.5rem;
}

/* === Cover overlay grain texture === */
.hero-cover::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 1;
}

.hero-cover .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* === How To columns hover === */
.how-to-columns > .wp-block-column {
	transition: transform 0.3s ease;
	will-change: transform;
}

.how-to-columns > .wp-block-column:hover {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.how-to-columns > .wp-block-column {
		transition: none;
	}

	.how-to-columns > .wp-block-column:hover {
		transform: none;
	}
}

/* === Responsive adjustments === */
@media (max-width: 768px) {
	.floating-contact-tab {
		display: none;
	}

	.testimonial-card::before {
		font-size: 3.5rem;
	}
}