/* ===================================
   The 5D Coach v2 — Custom Styles
   =================================== */

/* --- Smooth scrolling --- */
html {
	scroll-behavior: smooth;
}

/* --- Hero section --- */
.hero-section {
	position: relative;
	overflow: hidden;
}

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

/* --- Cards with hover lift --- */
.card-lift {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* --- Service cards --- */
/* Ensure columns containing service cards stretch to equal height */
.wp-block-columns:has(.service-card) > .wp-block-column {
	display: flex;
}

.service-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	flex: 1;
}

.service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* --- Testimonial cards --- */
.testimonial-card {
	background: var(--wp--preset--color--base-alt);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--40);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	height: 100%;
}

/* Ensure testimonial columns stretch equally */
.wp-block-columns:has(.testimonial-card) {
	align-items: stretch;
}

.wp-block-columns:has(.testimonial-card) > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.wp-block-columns:has(.testimonial-card) > .wp-block-column > .wp-block-group {
	flex: 1;
}

/* --- FAQ accordion styling --- */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--10);
	transition: background-color 0.2s ease;
}

.wp-block-details[open] {
	background: var(--wp--preset--color--base-alt);
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--primary);
	padding: var(--wp--preset--spacing--10) 0;
	list-style: none;
}

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

.wp-block-details summary::before {
	content: "+";
	display: inline-block;
	width: 1.5em;
	font-weight: 700;
	color: var(--wp--preset--color--accent-gold);
	transition: transform 0.2s ease;
}

.wp-block-details[open] summary::before {
	content: "\2212";
}

/* --- Certification badges row --- */
.cert-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	justify-content: flex-start;
}

.cert-badges img {
	max-height: 100px;
	width: auto;
	opacity: 0.85;
	transition: opacity 0.2s;
}

.cert-badges img:hover {
	opacity: 1;
}

/* --- Pill/tag styles --- */
.meta-pill {
	display: inline-block;
	padding: 0.25em 0.75em;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 500;
	background: var(--wp--preset--color--accent-beige);
	color: var(--wp--preset--color--contrast);
}

/* --- CTA section gradient overlay --- */
.cta-section {
	position: relative;
}

/* --- Header layout: logo left, nav center, button right --- */
.header-row > .wp-block-navigation {
	flex: 1;
	justify-content: center;
}

/* Ensure header-row uses flex with space-between (plugin pages) */
.header-row {
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: var(--wp--preset--spacing--30);
}

/* Nav links need breathing room */
.header-row .wp-block-navigation__container {
	gap: 2rem;
}

/* --- Navigation: hamburger at 900px --- */
/* WP default mobile breakpoint is 600px. Override to 900px. */
/* Force hamburger (overlay) between 600-900px */
@media (max-width: 900px) {
	.wp-block-navigation__responsive-container-content {
		display: none !important;
	}
	.wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	/* When menu IS open (hamburger clicked), show the overlay */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex !important;
	}
}

/* --- No wrapping on button text or nav items --- */
.wp-block-button__link {
	white-space: nowrap;
}

.wp-block-navigation-item__content {
	white-space: nowrap;
}

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
	/* Stack columns on mobile */
	.wp-block-columns {
		flex-direction: column !important;
	}

	/* Ensure touch-friendly tap targets */
	.wp-block-button__link,
	.wp-block-navigation-item__content {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* Tighter spacing on mobile */
	.hero-section .wp-block-cover {
		min-height: 60vh !important;
	}
}

@media (max-width: 480px) {
	.cert-badges img {
		max-height: 70px;
	}
}

/* --- Skip to content (accessibility) --- */
.skip-to-content {
	position: absolute;
	top: -100%;
	left: 0;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base-alt);
	padding: 0.5em 1em;
	z-index: 9999;
	transition: top 0.2s;
}

.skip-to-content:focus {
	top: 0;
}

/* --- Sticky header shadow on scroll (added via JS if needed) --- */
header.wp-block-group.is-position-sticky {
	z-index: 100;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

/* --- Smooth image loading --- */
img {
	height: auto;
	max-width: 100%;
}

/* --- Button link hover fix (prevent link hover from overriding button text) --- */
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-element-button:hover,
.wp-element-button:focus {
	color: var(--wp--preset--color--base-alt) !important;
}

/* Outline buttons: fill on hover */
.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus {
	background: var(--wp--preset--color--primary-dark) !important;
	color: var(--wp--preset--color--base-alt) !important;
}

/* --- Gold button hover: darken background slightly --- */
.has-accent-gold-background-color:hover {
	background-color: #b08e1f !important;
}

/* --- Remove gap between CTA and footer --- */
footer.wp-block-group,
.wp-block-template-part:has(> footer) {
	margin-top: 0 !important;
	border-top: none !important;
}

body.home > .wp-site-blocks {
	gap: 0 !important;
}

.wp-site-blocks > * + * {
	margin-top: 0 !important;
}

/* --- Footer link hover --- */
footer.wp-block-group a:hover,
footer.wp-block-group .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary) !important;
}

/* --- Focus styles for accessibility --- */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* --- Fix header/footer constrained layout on plugin pages ---
   block_template_part() renders after wp_head(), so container-specific
   CSS (wideSize:1200px) is not injected. Override the default 720px. */
header.wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 1200px;
}

footer.wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 1200px;
}

/* --- Blog card grid (Knowledge & Ideas) --- */
.blog-grid.is-layout-grid {
	gap: var(--wp--preset--spacing--30);
}

.blog-card {
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	border-color: var(--wp--preset--color--accent-warm);
}

.blog-card .blog-card-image img {
	aspect-ratio: 4/3;
	object-fit: cover;
	object-position: center 35%;
	width: 100%;
}

.blog-card > .wp-block-group:last-child {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.blog-card .wp-block-post-excerpt {
	flex: 1;
}

.blog-card .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--contrast-muted);
}

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

.blog-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* Ensure blog grid cards stretch equally */
.blog-grid.is-layout-grid > * {
	display: flex;
}

@media (max-width: 768px) {
	.blog-grid.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* --- Single post page --- */
.single-post-hero-media {
	margin: 0 auto var(--wp--preset--spacing--40);
	max-width: 480px;
}

.single-post-hero-media video {
	width: 100%;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.single-post-hero-media img {
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.single-post-category a {
	text-decoration: none;
}

.single-post-article .wp-block-post-title {
	line-height: 1.15;
}

.single-post-footer a {
	text-decoration: none;
}

.single-post-footer a:hover {
	color: var(--wp--preset--color--primary-dark);
}

/* --- WPForms button styling (migrated from WPCode) --- */
.wpforms-form button[type=submit] {
	background-color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
	color: #fff !important;
	transition: background 0.3s ease-in-out;
	border-radius: 6px;
}

.wpforms-form button[type=submit]:hover {
	background-color: var(--wp--preset--color--primary-dark) !important;
}

/* --- Image Style Tests --- */

/* Style 1: Rounded arc with shadow */
.img-style-arc img {
	border-radius: 80px 12px 80px 12px;
	box-shadow: 8px 8px 30px rgba(201, 162, 39, 0.45);
}

/* Style 2: Gold border accent (L-frame) */
.img-style-gold-frame {
	border-left: 4px solid var(--wp--preset--color--accent-gold);
	border-top: 4px solid var(--wp--preset--color--accent-gold);
	border-radius: 4px;
	padding: 8px 0 0 8px;
}
.img-style-gold-frame img {
	box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.12);
}

/* Style 3: Offset gold shape behind */
.img-style-offset-wrapper {
	position: relative;
	display: inline-block;
}
.img-style-offset-wrapper::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 16px;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--accent-gold);
	border-radius: 12px;
	z-index: 0;
}
.img-style-offset-wrapper img {
	position: relative;
	z-index: 1;
	border-radius: 12px;
	display: block;
}

/* Style 4: Circle crop with shadow */
.img-style-circle img {
	border-radius: 50%;
	box-shadow: 0 8px 30px rgba(33, 83, 135, 0.2);
	aspect-ratio: 1;
	object-fit: cover;
}

/* Style 5: Arch top (rounded top, flat bottom) */
.img-style-arch img {
	border-radius: 999px 999px 12px 12px;
	box-shadow: 0 6px 24px rgba(33, 83, 135, 0.18);
}