/*
Theme Name: Slay and Pray
Description: Block child theme of Twenty Twenty-Five for the Slay and Pray podcast with Alisha and Corinna. Playful, feminine, pop-culture. All colors, fonts, and sizes come from theme.json presets.
Author: Dez Visuals Media, LLC
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.2
Text Domain: slaypray
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Only what theme.json cannot express lives here. */

/* Full-width section backgrounds meet edge to edge (no gap between header/main/footer). */
body .wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Light, readable links on Deep Plum backgrounds (announcement bar, footer). */
.sp-on-dark,
.sp-on-dark p {
	color: var(--wp--preset--color--white);
}
.sp-on-dark a {
	color: var(--wp--preset--color--white);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.sp-on-dark a:hover {
	color: var(--wp--preset--color--amen-gold);
}

/* Announcement bar */
.sp-announce {
	background: var(--wp--preset--color--deep-plum);
	color: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.45rem 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}
.sp-announce p {
	margin: 0;
}
.sp-announce button {
	background: none;
	border: 0;
	color: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
}
.sp-announce button:hover {
	color: var(--wp--preset--color--amen-gold);
}

/* Sticky header hairline */
.sp-header {
	box-shadow: 0 1px 0 var(--wp--preset--color--line);
}

/* Mobile header: keep the logo, socials, and menu button on one row */
@media (max-width: 781px) {
	.sp-header .sp-logo,
	.sp-header .sp-logo img {
		width: 108px !important;
		max-width: 108px !important;
		height: auto !important;
	}
	/* The row holding the nav toggle and social icons */
	.sp-header .wp-block-group > .wp-block-group {
		flex-wrap: nowrap !important;
		gap: 0.5rem !important;
		align-items: center;
	}
	.sp-header .wp-block-social-links {
		order: 1;
		flex-wrap: nowrap !important;
		gap: 0.4rem !important;
		margin: 0;
	}
	.sp-header .wp-block-social-links .wp-social-link {
		margin: 0 !important;
	}
	.sp-header .wp-block-social-links .wp-social-link a {
		padding: 0.25rem;
	}
	.sp-header .wp-block-navigation {
		order: 2;
	}
}

/* Larger tap targets in the mobile nav overlay */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.875rem 1.25rem;
	font-size: 1.25rem;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 0.625rem;
}

/* Glass-style pill buttons on the hero */
.sp-glass-btn .wp-block-button__link {
	background: rgba(255, 255, 255, 0.18);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: var(--wp--preset--color--white);
}
.sp-glass-btn .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.32);
	color: var(--wp--preset--color--white);
}

/* Organic blob frame for the host photos */
.sp-blob img {
	border-radius: 50% 50% 42% 42% / 58% 58% 42% 42%;
	object-fit: cover;
}

/* Masonry gallery (behind the scenes) */
.sp-masonry {
	columns: 3 260px;
	column-gap: 1rem;
}
.sp-masonry figure {
	break-inside: avoid;
	margin: 0 0 1rem;
	border-radius: 16px;
	line-height: 0;
}
.sp-masonry img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 16px;
}

/* Episode card titles: full size on mobile, trimmed in the desktop grid */
@media (min-width: 782px) {
	.sp-card .wp-block-post-title {
		font-size: 1.5rem;
	}
}

/* Episode + platform cards */
.sp-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	overflow: hidden;
}
.sp-plat-card {
	background: var(--wp--preset--color--blush-cream);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	height: 100%;
}

/* Round gradient platform icons */
.sp-plat-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	background: var(--wp--preset--gradient--slay-pray);
	color: var(--wp--preset--color--white);
}
.sp-plat-icon svg {
	width: 26px;
	height: 26px;
}

/* Guest form card */
.sp-form-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 24px;
}

/* Fluent Forms submit button matches the theme's pill buttons */
.fluentform .ff-btn-submit,
.fluentform .ff_btn_style {
	background-color: var(--wp--preset--color--slay-pink) !important;
	border-color: var(--wp--preset--color--slay-pink) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.75rem 1.75rem;
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus,
.fluentform .ff_btn_style:hover,
.fluentform .ff_btn_style:focus {
	background-color: var(--wp--preset--color--grace-crimson) !important;
	border-color: var(--wp--preset--color--grace-crimson) !important;
	color: var(--wp--preset--color--white) !important;
}

/* Floating action buttons */
.sp-fabs {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	z-index: 90;
}
.sp-fab {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(43, 26, 40, 0.25);
}
.sp-fab svg {
	width: 22px;
	height: 22px;
}
.sp-fab-play {
	background: var(--wp--preset--gradient--slay-pray);
	color: var(--wp--preset--color--white);
}
.sp-fab-top {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--deep-plum);
	border: 1px solid var(--wp--preset--color--line);
}

/* Motion only for people who want it */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
	.sp-card,
	.sp-plat-card,
	.sp-fab {
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}
	.sp-masonry figure {
		transition: box-shadow 0.2s ease;
	}
	.sp-masonry img {
		transition: filter 0.2s ease;
	}
	.sp-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 24px rgba(43, 26, 40, 0.08);
	}
	.sp-plat-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 24px rgba(43, 26, 40, 0.1);
	}
	.sp-masonry figure:hover {
		box-shadow: 0 10px 22px rgba(43, 26, 40, 0.12);
	}
	.sp-masonry figure:hover img {
		filter: brightness(1.05);
	}
	.sp-fab:hover {
		transform: scale(1.06);
	}
}

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible {
	outline: 3px solid var(--wp--preset--color--amen-gold);
	outline-offset: 2px;
}