/*
Theme Name: Aandra
Theme URI: https://natasha.ddev.site
Author: Webfort
Author URI: https://webfort.co.uk
Description: Custom child theme for Aandra, the Foundation of Regenerative Leadership. Built on the CoachAva theme, rebranded to Natasha's earthy palette and restructured around the Aandra programme.
Template: coachava
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aandra
*/

/* Smooth anchor scrolling for the single-page nav (Programme / About). */
html {
	scroll-behavior: smooth;
}

/* Keep anchored sections clear of the header when jumped to. */
:where(#programme, #about, #videos) {
	scroll-margin-top: 4rem;
}

/* Justify the main body copy (client request). Centred paragraphs (CTAs, stage
   short descriptions, taglines) carry an alignment class and are left untouched.
   Hyphenation keeps the word spacing even in narrow columns (mobile especially). */
main :where(p):not([class*="has-text-align"]) {
	text-align: justify;
	hyphens: auto;
}
/* Below tablet width the columns are too narrow for justification: the word
   spacing stretches badly. Fall back to ragged-right there (781px matches the
   WP block breakpoint). */
@media (max-width: 781px) {
	main :where(p):not([class*="has-text-align"]) {
		text-align: left;
	}
}
/* Post-card excerpts sit in narrow grid columns where justification stretches
   badly; keep them ragged-right. */
main .wp-block-post-excerpt p {
	text-align: left;
	hyphens: none;
}
/* The hero name/tagline read better ragged-right than justified.
   Specificity must beat the justify rule above. */
main .aandra-hero p {
	text-align: left;
}

/* The "Build the leader → …" progression line: balance the two wrapped lines
   instead of leaving a short orphan ("wider system") on its own. */
.aandra-flow {
	text-wrap: balance;
}

/* Stage-icon images carry the #e6e1dd brand background baked in. The Programme
   section now sits on the olive background, so present them as deliberate,
   centred stone tiles above each stage column. */
.aandra-stage-icon img {
	display: block;
	margin-inline: auto;
	border-radius: 12px;
}

/* The parent theme styles the whole Details block as an uppercase, bold,
   letter-spaced label. Reset it to readable body copy, and dress each
   dropdown as a soft translucent card so the expanding boxes read as
   deliberate panels on the olive Programme band. */
.wp-block-details {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	background: rgba(230, 225, 221, 0.14);
	border-radius: 10px;
	padding: 1rem 1.15rem;
	transition: background-color 0.15s ease;
}
.wp-block-details:hover,
.wp-block-details[open] {
	background: rgba(230, 225, 221, 0.22);
}
/* Open/close affordance for the stage Details dropdowns. The summary shows a
   short snippet of the hidden copy followed by a highlighted "Read more". */
.wp-block-details summary {
	cursor: pointer;
	font-size: var(--wp--preset--font-size--medium);
	color: inherit;
}
.wp-block-details[open] > summary {
	margin-bottom: 0.5rem;
}
.aandra-readmore {
	color: inherit;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
/* Sub-stage dropdowns (3.1 / 3.2) nested under Stage 3: each is its own
   card now, so spacing alone separates them. */
.wp-block-details.aandra-substage {
	margin-top: 0.75rem;
}
.wp-block-details.aandra-substage > summary {
	font-weight: 600;
	color: inherit;
}

/* Vertical reel videos: cap the height and centre them instead of filling the
   content width edge-to-edge. */
.aandra-reel video {
	display: block;
	max-height: 80vh;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	border-radius: 8px;
}

/* The footer template part picks up the theme's default block gap as a top
   margin, which lets the stone body background show through as a stripe
   between the dark CTA band and the dark footer. Keep them flush. */
footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Placeholder newsletter form in the footer. */
.aandra-newsletter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	max-width: 30rem;
	margin-inline: auto;
}
/* Spam honeypot: visually removed but present in the submitted form. */
.aandra-newsletter .aandra-newsletter__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/* Post-submit status line under the signup form. */
.aandra-newsletter__notice {
	margin-top: 0.75rem;
	text-align: center;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--accent);
}
.aandra-newsletter input[type="email"] {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.85rem 1rem;
	border: 1px solid #5a574f;
	border-radius: 4px;
	background: transparent;
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
}
.aandra-newsletter input[type="email"]::placeholder {
	color: #b4afa6;
}
.aandra-newsletter button {
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	/* Match the "Start a conversation" core button text size. */
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.aandra-newsletter button:hover,
.aandra-newsletter button:focus {
	background: #ffffff;
	color: var(--wp--preset--color--contrast);
}

/* ---- Mobile navigation overlay ---- */
/* Center the links in the full-screen overlay and give them room to breathe.
   !important overrides the block's desktop right-justification layout style,
   scoped strictly to the open overlay so the desktop nav is untouched. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(1.5rem, 6vw, 3rem);
	justify-content: center !important;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	width: 100%;
	height: 100%;
	align-items: center !important;
	justify-content: center !important;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	width: 100%;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: clamp(1.5rem, 5vw, 2.5rem) !important;
	text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	width: 100%;
	align-items: center !important;
	justify-content: center !important;
	text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--optima);
	font-size: clamp(2rem, 8vw, 2.75rem);
	font-weight: 400;
	letter-spacing: -0.02rem;
}
/* Size and position the open/close toggles to match the header rhythm. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 0.25rem;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	position: fixed;
	top: clamp(1.25rem, 5vw, 2rem);
	right: clamp(1.5rem, 6vw, 3rem);
	z-index: 10;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 1.75rem;
	height: 1.75rem;
}