/*
Theme Name: Feel Alive Fitness
Theme URI: https://feelalivefitness.ca
Author: Demi for Feel Alive Fitness
Description: Custom block theme for Feel Alive Fitness — a modern, warm home for busy moms. Cream canvas, teal brand, serif headlines, flat photo tiles.
Version: 1.0.9
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: feel-alive-fitness
*/

/* ---------- Base refinements ---------- */

html, body {
	overflow-x: clip;
}

.faf-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid rgba(0, 128, 128, 0.14);
	background-color: var(--wp--preset--color--cream);
}
/* NOTE: no backdrop-filter here — it would create a containing block that
   traps the mobile nav overlay inside the header instead of the viewport. */

.faf-kicker {
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-size: 0.78rem;
	font-weight: 700;
}

.faf-btn {
	border-radius: 6px !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-size: 0.9rem;
}

.faf-hero-img img {
	border-radius: 999px 999px 28px 28px;
}

.faf-tile {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
}
.faf-tile img {
	transition: transform 0.6s ease;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.faf-tile:hover img {
	transform: scale(1.04);
}
@media (max-width: 781px) {
	.faf-tiles {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 0.9rem !important;
	}
}
.faf-tile-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2.2rem 1.25rem 1.1rem;
	background: linear-gradient(to top, rgba(20, 40, 40, 0.72), rgba(20, 40, 40, 0));
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
	font-weight: 600;
}
.faf-tile-kicker {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.85;
	margin-bottom: 0.25rem;
}

.faf-card {
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(0, 128, 128, 0.10);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.faf-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -18px rgba(0, 102, 102, 0.35);
}

.faf-card .wp-block-post-title a {
	text-decoration: none;
}
.faf-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--teal);
}

/* Query loop pagination */
.wp-block-query-pagination a {
	color: var(--wp--preset--color--teal);
	font-weight: 600;
}

/* Fluent Forms polish inside theme */
.faf-newsletter .ff-btn-submit {
	background: var(--wp--preset--color--teal) !important;
	border-radius: 6px !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700 !important;
	color: #ffffff !important;
}

/* ---------- Footer cleanup ---------- */
footer ul {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}
footer ul li {
	margin-bottom: 0.45rem;
}
footer ul a {
	text-decoration: none;
}
footer ul a:hover {
	text-decoration: underline;
}
.faf-footer-heading {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
@media (max-width: 781px) {
	.faf-footer-links {
		flex-wrap: nowrap;
		gap: 1.25rem;
	}
	.faf-footer-links > .wp-block-column {
		flex-basis: 50% !important;
	}
}

/* ---------- Mobile polish ---------- */
@media (max-width: 781px) {
	/* Header: compact CTA so it never wraps to 3 lines; roomy hamburger */
	.faf-header .wp-block-button__link {
		font-size: 0.7rem !important;
		padding: 0.6em 0.9em !important;
		white-space: nowrap;
	}
	.wp-block-navigation__responsive-container-open {
		padding: 10px;
	}

	/* Hero: tame the type scale, keep the image a sane size */
	.faf-hero .has-hero-font-size {
		font-size: 2.1rem !important;
	}
	.faf-hero .has-large-font-size {
		font-size: 1.05rem !important;
	}
	.faf-hero-img {
		max-width: 340px;
		margin-inline: auto;
	}

	/* Section headings */
	h2.wp-block-heading {
		font-size: 1.75rem;
	}

	/* Post cards */
	.faf-card .wp-block-post-title {
		font-size: 1.2rem;
	}
	.faf-card .wp-block-post-excerpt {
		font-size: 1rem;
	}

	/* About band + newsletter copy */
	.faf-about .has-large-font-size,
	.faf-newsletter .has-large-font-size {
		font-size: 1.05rem !important;
	}

	/* Single post + page titles */
	.wp-block-post-title.has-xx-large-font-size {
		font-size: 2rem !important;
	}

	/* Footer gutters */
	footer .wp-block-columns {
		padding-inline: 0.25rem;
	}
}