/*
 * OrgTree — components.css
 *
 * Small, reusable UI primitives shared across pages (buttons, cards, tags).
 * Page-specific layouts belong in sections.css or a later task's own file —
 * this file only holds genuinely cross-page components. Intentionally kept
 * minimal for this scaffold task (YAGNI); later tasks add to it rather than
 * duplicating tokens.
 */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--radius);
	padding: var(--space-xs) var(--space-md);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

/* Dark ink text on the saturated VIBRANT emerald fill (not --cream/white) —
   uses --green-vibrant (base.css), a fixed token, NOT the scoped --green
   (which is deep-emerald outside dark sections and would only measure
   ~3.7:1 with ink text — short of AA). --ink-900 on --green-vibrant
   measures ~6.95:1. Mirrors the same "dark ink text on a saturated brand
   fill" pattern used by .btn--gold. */
.btn--primary {
	background-color: var(--green-vibrant);
	color: var(--ink-900);
}

.btn--primary:hover {
	background-color: var(--forest);
	color: var(--text-on-dark);
}

.btn--outline {
	background-color: transparent;
	color: var(--green); /* deep emerald on light (AA), vibrant on dark (scoped) */
	border-color: var(--green);
}

.btn--outline:hover {
	background-color: var(--green);
	color: var(--white);
}

.btn--gold {
	background-color: var(--gold);
	color: var(--forest);
}

.btn--gold:hover {
	background-color: var(--forest);
	color: var(--gold);
}

.card {
	background-color: var(--white);
	border-radius: var(--radius);
	padding: var(--space-md);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tag {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gold);
}

/* ------------------------------------------------------------------------ */
/* Icon library — orgtree_icon() in inc/template-helpers.php                */
/* ------------------------------------------------------------------------ */

.icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--green);
}

.icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.icon svg circle,
.icon svg path,
.icon svg rect {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.icon svg .icon__fill,
.icon svg .icon__dot {
	fill: currentColor;
	stroke: none;
}

.section--dark .icon {
	color: var(--gold);
}

/* Outline button on a dark section (e.g. inside .section--dark / the CTA
   band) needs light-on-dark colours instead of its default forest-on-cream
   pairing, or it disappears against the forest background. */
.section--dark .btn--outline {
	color: var(--green); /* scoped -> vibrant emerald on dark */
	border-color: var(--green);
}

.section--dark .btn--outline:hover {
	background-color: var(--green);
	color: var(--ink-900); /* ink text on the vibrant emerald fill (AA) */
}

/* `.section--dark a { color: var(--gold); }` (base.css) has higher
   specificity (class + element) than `.btn--gold { color: var(--forest); }`
   (single class) and would otherwise win, turning the gold button's text
   gold-on-gold and invisible. Re-assert dark ink text explicitly here
   (v2: ink-900, not forest — forest is now the ink-800 section background
   itself and no longer reads as "dark text" against a solid gold fill). */
.section--dark .btn--gold {
	color: var(--ink-900);
}

.section--dark .btn--gold:hover {
	color: var(--gold);
}

/* Same specificity fix for the (now primary) emerald button: `.section--dark a`
   (base.css) would otherwise force its label gold-on-emerald. Re-assert the
   dark ink text (and light text on the forest hover fill). */
.section--dark .btn--primary {
	color: var(--ink-900);
}

.section--dark .btn--primary:hover {
	color: var(--text-on-dark);
}

/* ------------------------------------------------------------------------ */
/* Site header — logo, primary nav, mobile toggle, CTA                      */
/* ------------------------------------------------------------------------ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--cream);
	border-bottom: 1px solid var(--grey-bg);
	color: var(--forest);
	transition: background-color var(--transition-base), border-color var(--transition-base);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding-block: var(--space-sm);
}

/* Logo lockup — mark + wordmark, all currentColor so header state controls it. */
.site-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	color: var(--green);
	text-decoration: none;
}

.site-logo:hover {
	color: var(--green);
	opacity: 0.85;
}

/* Real logo lockup (assets/img/logo.svg) — mark + "Org Tree" + tagline baked
   in. Full colour on the light header; a white silhouette on the dark footer
   (see `.site-footer .site-logo__img`). */
.site-logo__img {
	display: block;
	height: 3rem;
	width: auto;
}

@media (max-width: 30rem) {
	.site-logo__img {
		height: 2.6rem;
	}
}

/* Primary nav (desktop) — menu + CTA sit together on the right. */
.primary-navigation {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.primary-menu a {
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	color: var(--forest);
}

.primary-menu a:hover {
	color: var(--green);
}

.site-header__cta {
	flex-shrink: 0;
}

/* Mobile nav toggle — hidden on desktop, shown under the breakpoint below. */
.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	/* Icon itself is small (1.5rem/2px lines); pad the hit target out to the
	   accessible ~44px minimum rather than relying on the icon's own size. */
	min-width: 2.75rem;
	min-height: 2.75rem;
	background: transparent;
	border: 0;
	padding: var(--space-2xs);
	cursor: pointer;
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
	display: block;
	width: 1.5rem;
	height: 2px;
	background-color: currentColor;
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle__icon {
	position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle__icon::before {
	top: -6px;
}

.nav-toggle__icon::after {
	top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
	background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
	top: 0;
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
	top: 0;
	transform: rotate(-45deg);
}

@media (max-width: 30rem) {
	/* Below ~480px the wordmark + tagline + toggle + CTA no longer fit on
	   one row without wrapping ugly — drop the tagline first since it's
	   explicitly optional (see template-parts/site-logo.php). */
	.site-logo__tagline {
		display: none;
	}

	.site-header__inner {
		gap: var(--space-sm);
	}

	.site-header__cta {
		padding-inline: var(--space-sm);
		font-size: var(--text-xs);
	}
}

@media (max-width: 61.99rem) {
	/* Hamburger sits top-RIGHT: it's the last child of the header row, while the
	   whole nav (links + CTA) collapses into a full-width panel below. */
	.nav-toggle {
		display: inline-flex;
		order: 3;
	}

	/* The nav itself becomes the dropdown panel, spanning the header (it anchors
	   to .site-header, which is a positioned/sticky ancestor). Hidden until the
	   toggle adds `.is-open`. */
	.primary-navigation {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-md);
		background-color: var(--cream);
		border-bottom: 1px solid var(--grey-bg);
		padding: var(--space-lg) var(--space-md);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
	}

	.primary-navigation.is-open {
		display: flex;
	}

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.primary-menu li {
		border-bottom: 1px solid var(--grey-bg);
	}

	.primary-menu li:last-child {
		border-bottom: 0;
	}

	.primary-menu a {
		display: block;
		color: var(--forest);
		padding-block: var(--space-sm);
		font-size: var(--text-base);
	}

	/* CTA becomes a full-width button at the foot of the panel (TKC-style). */
	.site-header__cta {
		display: block;
		text-align: center;
		margin-top: var(--space-2xs);
	}
}

/* Transparent-over-dark-hero header variant. A page hooks this on via a
   `has-dark-hero` body class (see body_class filter added by the front-page
   task); the header starts transparent/overlaying the hero and switches to
   a solid background once `initHeaderScroll()` (assets/js/main.js) adds
   `.is-scrolled`. No motion is animated between states — a colour swap is
   not a "transition" that needs a reduced-motion guard beyond the global
   one already in base.css. */
body.has-dark-hero .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: transparent;
	border-bottom-color: transparent;
	color: var(--cream);
}

body.has-dark-hero .site-header .site-logo {
	color: var(--gold);
}

body.has-dark-hero .site-header .primary-menu a {
	color: var(--cream);
}

body.has-dark-hero .site-header.is-scrolled {
	background-color: var(--cream);
	border-bottom-color: var(--grey-bg);
	color: var(--forest);
}

body.has-dark-hero .site-header.is-scrolled .site-logo {
	color: var(--green);
}

body.has-dark-hero .site-header.is-scrolled .primary-menu a {
	color: var(--forest);
}

/* The mobile dropdown panel (primary-menu, <62rem — see the `.primary-menu`
   rules above) always has a solid cream background regardless of header
   state. On a has-dark-hero page, before scrolling, the header-wide
   `body.has-dark-hero .site-header .primary-menu a { color: cream; }` rule
   above has higher specificity than the plain mobile `.primary-menu a`
   colour rule and would otherwise win, making the open dropdown's links
   cream-on-cream and invisible. Force forest text whenever the mobile menu
   is actually open, independent of scroll state. */
body.has-dark-hero .site-header .primary-navigation.is-open .primary-menu a {
	color: var(--forest);
}

/* ------------------------------------------------------------------------ */
/* Site footer                                                              */
/* ------------------------------------------------------------------------ */

.site-footer {
	background-color: var(--forest);
	color: var(--cream);
}

.site-footer a {
	color: var(--cream);
}

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

.site-footer__inner {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: var(--space-xl);
	padding-block: var(--space-2xl);
}

.site-footer .site-logo {
	color: var(--gold);
}

.site-footer .site-logo:hover {
	color: var(--gold);
}

/* Dark footer: render the logo as a clean white silhouette so the dark
   wordmark/tagline stay legible. */
.site-footer .site-logo__img {
	filter: brightness(0) invert(1);
	opacity: 0.92;
	height: 3.4rem;
}

.site-footer__tagline {
	margin-top: var(--space-sm);
	max-width: 32ch;
	color: var(--grey-bg);
}

.footer-navigation ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.footer-navigation a {
	font-size: var(--text-sm);
	text-decoration: none;
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-sm);
}

.site-footer__email {
	font-weight: 600;
}

.site-footer__social svg {
	width: 1.5rem;
	height: 1.5rem;
}

.site-footer__bottom {
	border-top: 1px solid rgba(250, 247, 240, 0.15);
	padding-block: var(--space-sm);
	font-size: var(--text-xs);
	color: var(--grey-bg);
}

@media (max-width: 47.99rem) {
	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
}