/* ===================================================
   M Club Spa & Fitness — Custom Styles
   BEM naming with .mc- prefix
   =================================================== */

/* --- Skip Link (a11y) --- */
.mc-skip-link {
	position: absolute;
	top: -100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	padding: 0.75rem 1.5rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	text-decoration: none;
	border-radius: 0 0 8px 8px;
	font-weight: 600;
	transition: top 0.2s ease;
}

.mc-skip-link:focus {
	top: 0;
}

/* --- Top Bar --- */
.mc-top-bar {
	font-size: var(--wp--preset--font-size--small);
}

.mc-top-bar a {
	text-decoration: none;
}

.mc-top-bar a:hover {
	text-decoration: underline;
}

/* --- Header / Navigation --- */
.mc-header {
	position: sticky;
	top: 0;
	z-index: 999;
	transition: box-shadow 0.3s ease;
}

.mc-header.is-scrolled {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.mc-header .wp-block-navigation__responsive-container.is-menu-open {
	padding-top: var(--wp--preset--spacing--60);
}

/* --- Hero --- */
.mc-hero {
	position: relative;
}

.mc-hero .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 75, 71, 0.7) 100%);
}

.mc-hero h1 {
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* --- Facility Cards --- */
.mc-facility-card {
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mc-facility-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.mc-facility-card img {
	transition: transform 0.4s ease;
}

.mc-facility-card:hover img {
	transform: scale(1.05);
}

/* --- Spa Platinum Section --- */
.mc-spa-platinum .wp-block-cover__background {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 75, 71, 0.6) 100%);
}

/* --- CTA Section --- */
.mc-cta .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(0, 75, 71, 0.85) 0%, rgba(0, 0, 0, 0.8) 100%);
}

/* --- Membership Cards --- */
.wp-block-column .wp-block-group.has-border-color {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-column .wp-block-group.has-border-color:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* --- FAQ Details Toggle --- */
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	padding: 0.25rem 0;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wp-block-details summary::after {
	content: "+";
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	transition: transform 0.2s ease;
}

.wp-block-details[open] summary::after {
	content: "−";
}

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

/* --- Buttons — Hover States --- */
.wp-block-button__link {
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.wp-block-button__link:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

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

/* --- Footer --- */
#mc-footer a {
	text-decoration: none;
	transition: color 0.2s ease;
}

#mc-footer a:hover {
	color: var(--wp--preset--color--secondary);
}

#mc-footer .wp-block-social-links a:hover {
	opacity: 0.8;
}

/* --- Scroll animations --- */
.mc-fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* --- Back to Top --- */
.mc-back-to-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 990;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mc-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}

.mc-back-to-top:hover {
	transform: translateY(-2px);
	background: var(--wp--preset--color--primary-light);
}

.mc-back-to-top svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* --- Enquiry Form --- */
.mc-enquiry-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.mc-enquiry-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.mc-enquiry-form__field label {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.mc-enquiry-form__field input,
.mc-enquiry-form__field select,
.mc-enquiry-form__field textarea {
	padding: 0.75rem 1rem;
	border: 1px solid #c6c6c6;
	border-radius: 8px;
	font-family: inherit;
	font-size: 1rem;
	background: #fff;
	transition: border-color 0.2s ease;
}

.mc-enquiry-form__field input:focus,
.mc-enquiry-form__field select:focus,
.mc-enquiry-form__field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 2px rgba(0, 75, 71, 0.15);
}

/* --- WhatsApp Floating Button --- */
.mc-whatsapp {
	position: fixed;
	bottom: 2rem;
	left: 2rem;
	z-index: 990;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background: #25D366;
	color: #fff;
	border-radius: 100px;
	text-decoration: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mc-whatsapp:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	color: #fff;
}

.mc-whatsapp svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* --- Photo Gallery --- */
.mc-photo-gallery .wp-block-image {
	overflow: hidden;
	border-radius: 4px;
}

.mc-photo-gallery .wp-block-image img {
	transition: transform 0.4s ease;
}

.mc-photo-gallery .wp-block-image:hover img {
	transform: scale(1.08);
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.mc-fade-in {
		opacity: 1;
		transform: none;
	}
}

/* --- Print --- */
@media print {
	.mc-top-bar,
	.mc-back-to-top,
	.wp-block-navigation__responsive-container-open,
	.wp-block-social-links,
	.mc-hero .wp-block-buttons,
	.mc-cta {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		font-weight: normal;
	}
}