/* ==========================================================================
   THE GAROE GROUP — main.css
   Session 2: Layout utilities · Header · Footer · Base typography
   All values reference custom properties defined in style.css.
   Nothing is hard-coded.
   ========================================================================== */


/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

@media ( max-width: 768px ) {
	.container {
		padding-inline: var(--space-4);
	}
}


/* ==========================================================================
   BASE TYPOGRAPHY CLASSES
   ========================================================================== */

.h1 {
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-weight: var(--weight-medium);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-white);
}

.h2 {
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	font-weight: var(--weight-medium);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-white);
}

.h3 {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: var(--weight-regular);
	line-height: var(--leading-snug);
	color: var(--color-white);
}

.h4 {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--weight-regular);
	line-height: var(--leading-snug);
	color: var(--color-white);
}

.lead {
	font-family: var(--font-body);
	font-size: var(--text-md);
	font-weight: var(--weight-regular);
	line-height: var(--leading-relaxed);
	color: var(--color-paper-text);
}

.label {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-muted);
}


/* ==========================================================================
   SKIP TO CONTENT
   ========================================================================== */

.skip-to-content {
	position: absolute;
	top: var(--space-4);
	left: var(--space-4);
	z-index: var(--z-toast);
	padding: var(--space-2) var(--space-4);
	background: var(--color-gold);
	color: var(--color-carbon);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--radius-sm);
	transform: translateY( calc( -100% - var(--space-8) ) );
	transition: transform var(--transition-fast);
}

.skip-to-content:focus {
	transform: translateY(0);
}


/* ==========================================================================
   SITE HEADER
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-nav);
	height: var(--space-16);
	background-color: var(--color-carbon);
	border-bottom: var(--border-thin);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

/* Wordmark */

.site-wordmark {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	color: var(--color-white);
	letter-spacing: var(--tracking-wide);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.site-wordmark span {
	color: var(--color-gold);
}

.site-wordmark:hover {
	color: var(--color-white);
}

/* Primary nav */

.primary-nav {
	display: flex;
	align-items: center;
}

.primary-nav .nav-list {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Legacy Programme / Academy Programme — brighter and slightly larger than
   the original --color-muted / --text-sm treatment, per Dylan's request.
   14px is hardcoded rather than tokenised: it sits between --text-sm (12px)
   and --text-base (15px) on the existing scale, and was the happy medium
   landed on after testing both neighbouring tokens against the header-cta
   pills. A third nav link is planned — this size was checked against three
   items, not just two, so it should hold up once that's added. */
.primary-nav .nav-list li a {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: var(--weight-medium);
	color: var(--color-white);
	text-decoration: none;
	letter-spacing: 0.01em;
	transition: color var(--transition-fast);
}

.primary-nav .nav-list li a:hover {
	color: var(--color-gold);
}

/* Enquire CTA — filled gold pill. Add the class 'nav-cta' to the menu item in
   WP admin → Appearance → Menus → (item) → CSS Classes. ('menu-item-contact'
   is also honoured for backwards compatibility.) */

.primary-nav .nav-list li.nav-cta a,
.primary-nav .nav-list li.menu-item-contact a {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-carbon);
	background-color: var(--color-gold);
	padding: var(--space-2) var(--space-5);
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-fast);
}

.primary-nav .nav-list li.nav-cta a:hover,
.primary-nav .nav-list li.menu-item-contact a:hover {
	background-color: var(--color-gold-light);
	color: var(--color-carbon);
}

/* Right-hand header group: nav + CTA group + hamburger */

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

/* Find Your Academy + Enquire Now — grouped together so they can share a
   tight gap independent of .header-actions's wider 32px gap (which still
   applies between the nav and this group as a whole). Requires the
   .header-cta-group wrapper div in header.php around both <a> tags. */
.header-cta-group {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Enquire CTA — hardcoded filled gold pill in header.php */

.header-cta {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-carbon);
	background-color: var(--color-gold);
	padding: var(--space-2) var(--space-5);
	border-radius: var(--radius-sm);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--transition-fast);
}

.header-cta:hover {
	background-color: var(--color-gold-light);
	color: var(--color-carbon);
}

/* Find Your Academy — hardcoded outline/ghost pill in header.php, sits next
   to Enquire Now. Every property .header-cta sets is explicitly overridden
   here so declaration order never matters and nothing falls through to the
   gold-fill default by accident. Quieter than Enquire Now so Enquire Now
   still reads as the primary CTA. */

.header-cta-academy {
	background-color: transparent;
	color: var(--color-gold);
	border: 1px solid rgba(200, 169, 110, 0.4);
}

.header-cta-academy:hover {
	background-color: rgba(200, 169, 110, 0.06);
	border-color: var(--color-gold);
	color: var(--color-gold-light);
}

/* Slide-in feel when navigating to Find Your Academy: a plain <a> link for
   crawlability/SEO, with a CSS transition so the destination still feels
   layered rather than a flat page jump. Pure CSS, no JS — degrades to an
   instant jump if View Transitions aren't supported, or if the visitor has
   reduced motion enabled. */

@media (prefers-reduced-motion: no-preference) {
	@supports (view-transition-name: none) {
		::view-transition-old(root) {
			animation: garoe-finder-fade-out 0.18s ease forwards;
		}
		::view-transition-new(root) {
			animation: garoe-finder-slide-in 0.32s cubic-bezier(.2, .7, .2, 1) forwards;
		}
	}
}

@keyframes garoe-finder-fade-out {
	to { opacity: 0; }
}

@keyframes garoe-finder-slide-in {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

/* Hamburger toggle */

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--space-1);
	flex-shrink: 0;
}

.nav-toggle span {
	display: block;
	width: 22px;
	height: 1.5px;
	background-color: var(--color-muted);
	border-radius: 1px;
	transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* The header is sticky and stays in normal flow, so the main content needs
   no top offset — it begins directly beneath the header. */


/* ==========================================================================
   MOBILE NAV
   ========================================================================== */

.mobile-nav {
	position: fixed;
	top: var(--space-16);
	left: 0;
	right: 0;
	z-index: var(--z-overlay);
	background-color: var(--color-carbon);
	border-bottom: var(--border-thin);
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--transition-slow);
}

.mobile-nav.is-open {
	max-height: 400px;
}

.mobile-nav .container {
	padding-block: var(--space-4);
}

.mobile-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.mobile-nav-list li {
	border-bottom: var(--border-thin);
}

.mobile-nav-list li:last-child {
	border-bottom: none;
}

.mobile-nav-list li a {
	display: block;
	padding: var(--space-3) 0;
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: var(--weight-regular);
	color: var(--color-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.mobile-nav-list li a:hover {
	color: var(--color-white);
}

.mobile-nav-list li.nav-cta,
.mobile-nav-list li.menu-item-contact {
	border-bottom: none;
	padding-top: var(--space-3);
	padding-bottom: var(--space-1);
}

.mobile-nav-list li.nav-cta a,
.mobile-nav-list li.menu-item-contact a {
	display: inline-block;
	padding: var(--space-2) var(--space-5);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-carbon);
	background-color: var(--color-gold);
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-fast);
}

.mobile-nav-list li.nav-cta a:hover,
.mobile-nav-list li.menu-item-contact a:hover {
	background-color: var(--color-gold-light);
	color: var(--color-carbon);
}


/* ==========================================================================
   RESPONSIVE — show/hide nav elements
   ========================================================================== */

@media ( max-width: 900px ) {
	.primary-nav {
		display: none;
	}

	.nav-toggle {
		display: flex;
	}
}

@media ( min-width: 901px ) {
	.mobile-nav {
		display: none;
	}
}


/* ==========================================================================
   SITE FOOTER
   ========================================================================== */

.site-footer {
	background-color: var(--color-carbon-2);
	border-top: var(--border-thin);
}

.site-footer .container {
	padding-top: var(--space-12);
}

/* Three-column grid */

.footer-cols {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--space-10);
	padding-bottom: var(--space-10);
	border-bottom: var(--border-thin);
}

@media ( max-width: 768px ) {
	.footer-cols {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

/* Brand column */

.footer-wordmark {
	display: inline-block;
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-white);
	letter-spacing: var(--tracking-wide);
	text-decoration: none;
	margin-bottom: var(--space-3);
}

.footer-wordmark span {
	color: var(--color-gold);
}

.footer-wordmark:hover {
	color: var(--color-white);
}

.footer-descriptor {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-style: italic;
	color: var(--color-muted);
	line-height: var(--leading-relaxed);
	margin: 0;
}

/* Footer menu columns */

.footer-menu-label {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-gold);
	margin: 0 0 var(--space-4) 0;
}

.footer-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.footer-nav-list li a {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.footer-nav-list li a:hover {
	color: var(--color-paper-text);
}

/* Copyright bar */

.footer-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-4);
	gap: var(--space-4);
}

@media ( max-width: 480px ) {
	.footer-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}
}

.footer-copyright,
.footer-credit {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-charcoal);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	margin: 0;
}

.footer-credit a {
	color: var(--color-charcoal);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.footer-credit a:hover {
	color: var(--color-gold);
}

/* ==========================================================================
   PAGE HERO
   ========================================================================== */

.page-hero {
	background-color: var(--color-carbon-2);
	padding-top: var(--space-16);
	padding-bottom: var(--space-14);
}

.page-hero__title {
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-weight: 700;
	color: var(--color-white);
	line-height: var(--leading-tight);
	margin: 0;
	letter-spacing: -0.01em;
}

.page-hero__title::after {
	content: '';
	display: block;
	width: 2.5rem;
	height: 1px;
	background-color: var(--color-gold);
	margin-top: var(--space-5);
}

.page-hero__subtitle {
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	font-style: italic;
	color: var(--color-muted);
	margin-top: var(--space-4);
	margin-bottom: 0;
}


/* ==========================================================================
   PAGE CONTENT LAYOUT
   ========================================================================== */

.page-content {
	padding-top: var(--space-16);
	padding-bottom: var(--space-20);
}

.page-content .container {
	max-width: var(--container-narrow, 760px);
}


/* ==========================================================================
   PROSE — styles for WordPress the_content() output
   ========================================================================== */

.prose p {
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--color-paper-text);
	margin-bottom: var(--space-5);
	letter-spacing: 0.01em;
}

.prose h2 {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--color-white);
	line-height: var(--leading-tight);
	margin-top: var(--space-10);
	margin-bottom: var(--space-4);
	letter-spacing: -0.01em;
}

.prose h3 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-white);
	line-height: var(--leading-tight);
	margin-top: var(--space-8);
	margin-bottom: var(--space-3);
	letter-spacing: -0.01em;
}

.prose h4 {
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--color-white);
	margin-top: var(--space-6);
	margin-bottom: var(--space-2);
}

.prose a {
	color: var(--color-gold);
	text-decoration: none;
	transition: opacity var(--transition-fast);
}

.prose a:hover,
.prose a:focus-visible {
	opacity: 0.75;
	text-decoration: underline;
}

.prose ul,
.prose ol {
	color: var(--color-paper-text);
	padding-left: var(--space-6);
	margin-bottom: var(--space-5);
}

.prose ul {
	list-style: disc;
}

.prose ol {
	list-style: decimal;
}

.prose ul li::marker {
	color: var(--color-gold);
}

.prose ul li,
.prose ol li {
	margin-bottom: var(--space-2);
	line-height: var(--leading-normal);
	letter-spacing: 0.01em;
}

.prose blockquote {
	border-left: 1px solid var(--color-gold);
	padding-left: var(--space-6);
	margin-left: 0;
	margin-right: 0;
	margin-top: var(--space-8);
	margin-bottom: var(--space-8);
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--text-lg);
	color: var(--color-muted);
	line-height: var(--leading-normal);
}

.prose strong {
	color: var(--color-white);
	font-weight: 600;
}

.prose em {
	font-style: italic;
	color: var(--color-paper-text);
}

.prose hr {
	border: none;
	border-top: 1px solid var(--color-line-dark);
	margin-block: var(--space-8);
}

.prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	display: block;
}

/* Index fallback post list */

.index-posts {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
}

.index-post__title {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 700;
	margin: 0 0 var(--space-3);
	letter-spacing: -0.01em;
}

.index-post__title a {
	color: var(--color-white);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.index-post__title a:hover {
	color: var(--color-gold);
}

.index-post__excerpt p {
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--color-paper-text);
	margin: 0;
	letter-spacing: 0.01em;
}

.index-pagination {
	margin-top: var(--space-12);
}

.nothing-found p {
	color: var(--color-muted);
}


/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */

.reveal {
	opacity: 0;
	transform: translateY( 20px );
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}


/* ==========================================================================
   LIGHT SURFACE VARIANT
   ========================================================================== */

/*
 * Apply .surface-light to <main id="main-content"> on pages where a light
 * background is preferred (Privacy Policy, Terms of Service, etc.).
 * The header and footer remain on their dark backgrounds — only the main
 * content area flips to the paper/ink treatment.
 */

.surface-light {
	background-color: var(--color-paper);
}

.surface-light .page-hero {
	background-color: var(--color-carbon);
}

.surface-light .page-content {
	background-color: var(--color-paper);
}

.surface-light .prose p,
.surface-light .prose ul,
.surface-light .prose ol,
.surface-light .prose li,
.surface-light .prose em {
	color: var(--color-ink);
}

.surface-light .prose h2,
.surface-light .prose h3,
.surface-light .prose h4,
.surface-light .prose strong {
	color: var(--color-carbon);
}

.surface-light .prose blockquote {
	color: var(--color-ink-muted, var(--color-ink));
}

.surface-light .prose hr {
	border-top-color: var(--color-line-light, #d4d4d4);
}


/* ==========================================================================
   PAGE HERO — RESPONSIVE
   ========================================================================== */

@media ( max-width: 900px ) {

	.page-hero__title {
		font-size: var(--text-4xl);
	}

}

@media ( max-width: 600px ) {

	.page-hero {
		padding-top: var(--space-12);
		padding-bottom: var(--space-10);
	}

	.page-hero__title {
		font-size: var(--text-3xl);
	}

	.page-content {
		padding-top: var(--space-10);
		padding-bottom: var(--space-14);
	}

}