/**
 * Branch Creative — components.css
 *
 * Reusable UI components: buttons, forms, cards, badges, alerts, etc.
 * All values reference variables.css — never hard-code colors or spacing here.
 *
 * @package Branch_Creative
 */

/* ════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════════════════ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-wider);
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--radius-base);
	transition: var(--transition-colors), var(--transition-shadow), var(--transition-transform);
	-webkit-user-select: none;
	user-select: none;
}

/* Prevent a:visited from overriding button colors. Deliberately no `color`
   declaration here — each .btn--* variant already sets its own text color
   and must win in the visited state too. A color rule on .btn:visited would
   have higher specificity (class + pseudo-class) than .btn--primary (class
   only) and silently override it, making visited buttons render dark-on-dark. */
.btn:visited {
	text-decoration: none;
}

.btn:focus-visible {
	outline: 2px solid var(--color-border-focus);
	outline-offset: 3px;
}

/* Subtle hover lift — kept small and quick so it reads as responsive
   rather than "bouncy." Colors are still handled per-variant below;
   this only adds the shared motion + a soft, brand-appropriate shadow. */
.btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn:active {
	transform: translateY(0);
	box-shadow: none;
	transition-duration: var(--transition-fast);
}

/* Primary */
.btn--primary,
.wp-block-button__link {
	background-color: var(--color-btn-primary-bg);
	color: var(--color-btn-primary-text);
	border-color: var(--color-btn-primary-bg);
}

.btn--primary:hover,
.wp-block-button__link:hover {
	background-color: var(--color-btn-primary-hover-bg);
	border-color: var(--color-btn-primary-hover-bg);
	color: var(--color-btn-primary-text);
	text-decoration: none;
}

/* Secondary / Outline */
.btn--outline {
	background-color: var(--color-btn-secondary-bg);
	color: var(--color-btn-secondary-text);
	border-color: var(--color-btn-secondary-border);
}

.btn--outline:hover {
	background-color: var(--color-primary);
	color: #ffffff;
	border-color: var(--color-primary);
	text-decoration: none;
}

/* Accent */
.btn--accent {
	background-color: var(--color-btn-accent-bg);
	color: var(--color-btn-accent-text);
	border-color: var(--color-btn-accent-bg);
}

.btn--accent:hover {
	background-color: var(--color-btn-accent-hover-bg);
	border-color: var(--color-btn-accent-hover-bg);
	color: var(--color-btn-accent-text);
	text-decoration: none;
}

/* Ghost */
.btn--ghost {
	background-color: var(--color-btn-ghost-bg);
	color: var(--color-btn-ghost-text);
	border-color: transparent;
}

.btn--ghost:hover {
	background-color: var(--color-btn-ghost-hover-bg);
	text-decoration: none;
}

/* White variants — for use on dark/coloured backgrounds */
.btn--ghost-white,
.btn--ghost-white:visited {
	background-color: transparent;
	color: #ffffff;
	border-color: rgba(255,255,255,0.6);
}

.btn--ghost-white:hover {
	background-color: rgba(255,255,255,0.15);
	border-color: #ffffff;
	color: #ffffff;
	text-decoration: none;
}

.btn--outline-white,
.btn--outline-white:visited {
	background-color: transparent;
	color: #ffffff;
	border-color: rgba(255,255,255,0.4);
}

.btn--outline-white:hover {
	background-color: transparent;
	border-color: #ffffff;
	color: #ffffff;
	text-decoration: none;
}

/* Sizes */
.btn--sm { padding: var(--space-2) var(--space-4); font-size: 11px; }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--font-size-sm); letter-spacing: var(--letter-spacing-wide); }

/* Full-width */
.btn--full { width: 100%; }

/* Disabled state */
.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   FORMS
   ════════════════════════════════════════════════════════════════════════════ */

.form-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
}

label,
.form-label {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-label);
}

.required-mark {
	color: var(--color-error);
	margin-left: 2px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea,
select,
.form-control {
	display: block;
	width: 100%;
	height: var(--input-height);
	padding: var(--input-padding-y) var(--input-padding-x);
	font-family: var(--font-family-base);
	font-size: var(--input-font-size);
	color: var(--color-input-text);
	background-color: var(--color-input-bg);
	border: var(--input-border-width) solid var(--color-input-border);
	border-radius: var(--input-border-radius);
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
	appearance: none;
}

textarea {
	height: auto;
	min-height: 120px;
	resize: vertical;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
	outline: none;
	border-color: var(--color-input-border-focus);
	box-shadow: 0 0 0 3px rgba(34, 35, 31, 0.1);
}

input::placeholder,
textarea::placeholder {
	color: var(--color-input-placeholder);
}

/* Select arrow */
select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-3) center;
	padding-right: var(--space-10);
}

/* Checkbox & Radio */
.form-check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	cursor: pointer;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 1px;
	accent-color: var(--color-primary);
	cursor: pointer;
}

/* Error state */
.form-group--error label   { color: var(--color-error); }
.form-group--error input,
.form-group--error textarea { border-color: var(--color-error); }
.form-help,
.form-error {
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}
.form-error { color: var(--color-error); }

/* Search form */
.search-form {
	display: flex;
	gap: var(--space-2);
}

.search-form input[type="search"] {
	flex: 1;
}

/* WordPress comment form */
#commentform input,
#commentform textarea {
	width: 100%;
}

/* ════════════════════════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════════════════════════ */

.card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-base);
	transition: var(--shadow-base), transform var(--transition-base);
}

.card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

.card__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.card__body {
	padding: var(--space-6);
}

.card__label {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-wider);
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--space-2);
}

.card__title {
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-3);
}

.card__title a {
	color: var(--color-heading);
	text-decoration: none;
}

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

.card__excerpt {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	line-height: var(--line-height-relaxed);
}

.card__footer {
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid var(--color-border);
}

/* Post card variant */
.post-card {
	composes: card;
}

.post-card {
	display: flex;
	flex-direction: column;
}

.post-card__image-link {
	display: block;
	overflow: hidden;
	height: 220px;
	flex-shrink: 0;
}

.post-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform var(--transition-slow);
}

.post-card__image-link:hover .post-card__image { transform: scale(1.03); }

.post-card__body {
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.post-card__excerpt { flex: 1; }

.post-card__title {
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-2);
}

.post-card__title a { color: var(--color-heading); text-decoration: none; }
.post-card__title a:hover { color: var(--color-primary); }

.post-card__date {
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	display: block;
	margin-bottom: var(--space-3);
}

.post-card__excerpt {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
}

.post-card__category {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	margin-bottom: var(--space-2);
}

.post-card__category a {
	color: var(--color-primary);
	text-decoration: none;
}

.post-card__category a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════════════
   WORK ARCHIVE
   ════════════════════════════════════════════════════════════════════════════
   An editorial, staggered portfolio spread — see archive-branch_work.php for
   how projects are grouped into rows of two and alternated large/small.
   ════════════════════════════════════════════════════════════════════════════ */

/* Intro
--------------------------------------------- */
.work-archive__header {
	padding: var(--space-20) 0 var(--space-12);
	text-align: center;
}

.work-archive__header .branch-eyebrow {
	display: flex;
	justify-content: center;
	/* .branch-eyebrow is a <p>, and the theme's global `p { max-width: 70ch }`
	   rule caps its width — switching it to a block-level flex box here means
	   it no longer inherits centering from the parent's `text-align: center`
	   (that only centers inline content), so it needs its own auto margins to
	   actually sit in the middle of the header rather than flush left. */
	margin-left: auto;
	margin-right: auto;
}

.work-archive__title {
	/* Substantial without being the full display-lg hero size this page
	   doesn't need — see brief: "feel substantial without becoming enormous." */
	font-size: var(--font-size-display-md);
	margin-bottom: var(--space-4);
}

.work-archive__subtitle {
	font-size: var(--font-size-lg);
	color: var(--color-text-muted);
	max-width: 50ch;
	margin: 0 auto;
}

.work-archive__empty {
	text-align: center;
	color: var(--color-text-muted);
	padding: var(--space-16) 0;
}

/* Projects — staggered rows
--------------------------------------------- */
.work-archive__projects {
	/* Deliberately not a full `.branch-block` — that section padding stacked
	   on top of the intro header's own bottom padding left a slab of empty
	   cream between the subtitle and the first row. A smaller top gap here
	   is enough; the dark CTA band below brings its own generous padding. */
	padding-top: clamp(1rem, 2vw, 1.75rem);
	/* Explicit desktop target (~80-100px) rather than a straight reduction —
	   the "too much empty cream" feeling was mostly the CTA band's own
	   oversized padding stacking on top of this; see the CTA rules below. */
	padding-bottom: clamp(1.5rem, 6vw, 5.5rem);
}

/* minmax(0, ...) on every track below (not plain fr units) is load-bearing,
   not decorative: a bare `1fr` track's automatic minimum width is its
   content's own min-content size, and a grid item containing an <img>
   contributes that image's intrinsic size to that calculation — so without
   the minmax(0, ...) floor, a large source photo can force the track (and
   the whole row) wider than the viewport instead of shrinking to fit,
   which is exactly what was breaking this layout on narrow phones. */
.work-archive__row {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 2.5vw, 2rem);
	align-items: start;
}

.work-archive__row--reverse {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
}

.work-archive__row--solo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 68%;
}

.work-archive__row + .work-archive__row {
	margin-top: clamp(2.25rem, 5vw, 4.75rem);
}

/* Each project is one big link — image, category, title, summary, and the
   "View Case Study" cue all live inside a single <a> rather than repeating
   the same href three times, so the whole card is one clickable, readable
   unit for pointer, keyboard, and screen-reader users alike. */
.work-archive__project {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.work-archive__project-media {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	background-color: var(--color-stone);
	margin-bottom: var(--space-6);
}

/* Featured (large) projects run wide and landscape; minor projects run
   narrower and portrait — the two ratios side by side are what give the
   staggered rows their magazine-spread asymmetry instead of two identical
   rectangles at different sizes. */
.work-archive__project--featured .work-archive__project-media {
	aspect-ratio: 4 / 3;
}

.work-archive__project--minor .work-archive__project-media {
	aspect-ratio: 3 / 4;
}

.work-archive__row--solo .work-archive__project-media {
	aspect-ratio: 16 / 9;
}

.work-archive__project-image,
.work-archive__project-image-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.work-archive__project:hover .work-archive__project-image {
	transform: scale(1.035);
}

.work-archive__project-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Compound selector (not just the class alone) so this reliably beats
   .branch-eyebrow's own margin-bottom — blocks.css loads after
   components.css, so a same-specificity single-class rule here would
   otherwise lose the cascade to it. */
.branch-eyebrow.work-archive__project-category {
	margin-bottom: var(--space-3);
}

.work-archive__project-title {
	display: block;
	font-family: var(--font-family-heading);
	line-height: var(--line-height-tight);
	color: var(--color-heading);
	margin-bottom: var(--space-2);
}

.work-archive__project--featured .work-archive__project-title {
	font-size: var(--font-size-display-sm);
}

.work-archive__project--minor .work-archive__project-title {
	font-size: var(--font-size-3xl);
}

.work-archive__project-summary {
	display: block;
	max-width: 100%;
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.work-archive__project-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-wider);
	text-transform: uppercase;
	color: var(--color-ink);
	border-bottom: 1px solid transparent;
	transition: var(--transition-colors), border-color var(--transition-base);
}

.work-archive__project:hover .work-archive__project-link {
	color: var(--color-olive);
	border-bottom-color: currentColor;
}

.work-archive__project-link span[aria-hidden] {
	display: inline-block;
	transition: transform var(--transition-base);
}

.work-archive__project:hover .work-archive__project-link span[aria-hidden] {
	transform: translateX(3px);
}

/* Editorial typography break
--------------------------------------------- */
.work-archive__statement {
	/* Targets ~80-110px of breathing room on desktop (where the 5.5vw/5rem
	   component lands at typical widths), scaling down below that on
	   smaller viewports rather than holding a fixed value. */
	margin: clamp(2.25rem, 5.5vw, 5rem) 0;
	/* Left-aligned and nudged in from the row grid above/below — on a page
	   that's otherwise centered (intro) or evenly split (rows), this small
	   offset is what keeps it from reading as just another centered block. */
	padding-left: clamp(0px, 8vw, 7.5rem);
}

.work-archive__statement p {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-display-lg);
	line-height: var(--line-height-tight);
	/* Wide enough to read as ~1-2 lines on desktop ("Good businesses
	   deserve / good creative.") instead of the old 16ch's four-line tower. */
	max-width: 32ch;
	margin: 0;
}

/* Pre-footer CTA
--------------------------------------------- */
/* Compound selector, not just the class alone: .branch-block's own
   padding-top/bottom (blocks.css) loads after this file and would
   otherwise win the cascade at equal (single-class) specificity — the
   same trap documented on .work-archive__project-category above. This
   is a deliberately compact pre-footer band (~300-350px tall via padding,
   not a fixed height) rather than a full-size section, so it needs to
   reliably override that default rather than add the "-lg" hero padding
   on top of it. */
.branch-block.work-archive__cta {
	padding-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

/* Nothing follows the button inside this section, so the shared
   .branch-section-header--center's own margin-bottom would just add
   dead space above the section's bottom padding rather than separating
   it from following content. */
.work-archive__cta .branch-section-header--center {
	margin-bottom: 0;
}

.work-archive__cta .branch-eyebrow {
	margin-bottom: var(--space-3);
}

.work-archive__cta .branch-section-title {
	margin-bottom: var(--space-3);
}

.work-archive__cta-body {
	color: rgba(244, 241, 234, 0.72);
	margin-bottom: var(--space-6);
}

@media (prefers-reduced-motion: reduce) {
	.work-archive__project-image,
	.work-archive__project-link,
	.work-archive__project-link span[aria-hidden] {
		transition: none;
	}
}

@media (max-width: 900px) {
	.work-archive__row,
	.work-archive__row--reverse {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}

	.work-archive__row--solo {
		max-width: none;
	}

	.work-archive__project--featured .work-archive__project-media,
	.work-archive__project--minor .work-archive__project-media {
		aspect-ratio: 4 / 3;
	}

	.work-archive__project--minor .work-archive__project-title {
		font-size: var(--font-size-display-sm);
	}

	.work-archive__statement {
		padding-left: 0;
	}

	.work-archive__statement p {
		max-width: none;
	}
}

@media (max-width: 640px) {
	.work-archive__projects {
		padding-top: var(--space-6);
		padding-bottom: var(--space-8);
	}

	.work-archive__row + .work-archive__row {
		margin-top: var(--space-12);
	}

	.work-archive__statement {
		margin: var(--space-12) 0;
	}

	.work-archive__cta-button {
		width: 100%;
		justify-content: center;
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════════════════════════ */

.badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	border: 1px solid currentColor;
}

.badge--primary { background: none; color: var(--color-charcoal); }
.badge--accent  { background: none; color: var(--color-olive); }
.badge--gray    { background: var(--color-stone); color: var(--color-text-muted); border-color: transparent; }

/* Category tag row — "BRAND • WEB • CONTENT" style label lists used across
   the site (services, featured work, case studies). Plain text, no chrome. */
.branch-tag-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-wider);
	text-transform: uppercase;
	color: var(--color-olive);
}

.branch-tag-row__sep { opacity: 0.5; }

/* ════════════════════════════════════════════════════════════════════════════
   ALERTS / NOTICES
   ════════════════════════════════════════════════════════════════════════════ */

.alert {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	border: 1px solid transparent;
}

.alert--success { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.alert--warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.alert--error   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.alert--info    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

/* ════════════════════════════════════════════════════════════════════════════
   NAVIGATION PAGINATION
   ════════════════════════════════════════════════════════════════════════════ */

.nav-links,
.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin: var(--space-10) 0;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
	text-decoration: none;
	transition: var(--transition-colors);
}

.page-numbers:hover,
.page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #ffffff;
}

/* ════════════════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════════════════ */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	height: var(--header-height);
	background-color: var(--header-bg);
	/* The nav uses its own --color-stone tone (set via --header-bg) so it
	   reads as a distinct plane from the cream page background beneath it
	   on every page, not just the ones with an alt-background section up
	   top. A soft drop shadow (no border) adds the rest of the separation. */
	box-shadow: 0 2px 16px rgba(34, 35, 31, 0.08);
	transition: height var(--transition-base);
}

/* Edge-to-edge, matching the hero block's own left/right padding formula
   (see .branch-hero__content) rather than the centered --container-max
   used by ordinary page content — otherwise on wide viewports the header
   sits noticeably narrower/more inset than the full-bleed hero below it. */
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	height: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding-left: clamp(1.5rem, 6vw, 6.5rem);
	padding-right: clamp(1.5rem, 6vw, 6.5rem);
}

/* Logo — the small "B" mark, per brand guidance */
.site-branding {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-branding a {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.custom-logo {
	max-height: var(--header-logo-max-height);
	width: auto;
}

/* Horizontal lockup (mark + wordmark side by side) — the theme-bundled
   header logo. Sized a touch taller than --header-logo-max-height since
   the wordmark's small "CREATIVE" line needs a bit more height to stay
   legible than the mark alone did. */
.site-branding__link {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.site-branding__logo {
	display: block;
	height: 38px;
	width: auto;
}

@media (max-width: 480px) {
	.site-branding__logo {
		height: 30px;
	}
}

.site-title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-normal);
	color: var(--color-heading);
	margin: 0;
}

.site-title a {
	color: inherit;
	text-decoration: none;
}

/* ── Primary Navigation ───────────────────────────────────────────────────── */

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

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

.primary-nav__menu a {
	display: inline-block;
	padding: var(--space-2) var(--space-3);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--header-text);
	text-decoration: none;
	border-radius: var(--radius-base);
	transition: var(--transition-colors);
}

.primary-nav__menu a:hover,
.primary-nav__menu .current-menu-item > a,
.primary-nav__menu .current-page-ancestor > a {
	background: none;
	color: var(--color-olive);
}

.site-header__cta {
	flex-shrink: 0;
	margin-left: var(--space-2);
}

/* Dropdown */
.primary-nav__menu .menu-item-has-children {
	position: relative;
}

.primary-nav__menu .sub-menu {
	position: absolute;
	top: calc(100% + var(--space-1));
	left: 0;
	min-width: 220px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--space-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
	z-index: var(--z-dropdown);
	list-style: none;
}

.primary-nav__menu .menu-item-has-children:hover > .sub-menu,
.primary-nav__menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-nav__menu .sub-menu a {
	display: block;
	padding: var(--space-2) var(--space-3);
	font-size: var(--font-size-sm);
	border-radius: var(--radius-base);
	white-space: nowrap;
}

/* Menu toggle button (mobile) */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: var(--space-2);
	background: none;
	border: none;
	cursor: pointer;
	border-radius: var(--radius-base);
}

.menu-toggle:focus-visible {
	outline: 2px solid var(--color-border-focus);
}

.menu-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-heading);
	border-radius: 2px;
	transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Animated X on open */
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
	opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav */
@media (max-width: 900px) {
	.menu-toggle {
		display: flex;
	}

	.primary-nav {
		position: fixed;
		inset: 0;
		top: var(--header-height);
		background: var(--color-bg);
		flex-direction: column;
		align-items: flex-start;
		padding: var(--space-6);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform var(--transition-slow);
		z-index: calc(var(--z-sticky) - 1);
	}

	.primary-nav.is-open {
		transform: translateX(0);
	}

	.primary-nav__menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}

	.primary-nav__menu li {
		width: 100%;
		border-bottom: 1px solid var(--color-border);
	}

	.primary-nav__menu a {
		display: block;
		padding: var(--space-4) 0;
		font-size: var(--font-size-lg);
		width: 100%;
	}

	.site-header__cta {
		margin: var(--space-6) 0 0;
		width: 100%;
		justify-content: center;
	}

	.primary-nav__menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		background: var(--color-gray-50);
		padding: 0 0 0 var(--space-4);
	}

	.primary-nav__menu .sub-menu a {
		font-size: var(--font-size-base);
		padding: var(--space-3) 0;
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════════════ */

.site-footer {
	background-color: var(--footer-bg);
	color: var(--footer-text);
	padding: var(--footer-padding-y) 0 0;
	/* --footer-bg and the CTA band's dark variant (--color-bg-dark) are the
	   exact same charcoal, so a page ending in a dark CTA reads as one
	   unbroken block with no seam. A light, low-opacity hairline (the same
	   cream tone already used for dark-mode text elsewhere) plus a soft
	   inset shadow gives the footer its own edge regardless of what's above it. */
	border-top: 1px solid rgba(244, 241, 234, 0.14);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
}

.site-footer a {
	color: var(--footer-link);
	text-decoration: none;
	transition: color var(--transition-base);
}

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

/* Centered, stacked layout — every section (logo, tagline, nav, social,
   location) lives in one centered column instead of side-by-side blocks. */
.site-footer__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-6);
}

.site-footer .custom-logo {
	filter: brightness(0) invert(1);  /* renders the dark "B" mark in cream on the dark footer */
}

.site-footer__logo-link {
	display: inline-block;
}

.site-footer__logo {
	display: block;
	width: auto;
	height: 40px;
	filter: brightness(0) invert(1); /* same trick as .custom-logo above — renders the dark line-art wordmark solid white */
}

/* Scoped to .site-footer so this doesn't bleed into the header's .site-title
   (used there as a plain-text fallback when no logo image exists). */
.site-footer .site-title {
	color: #ffffff;
}

.site-footer .site-title a {
	color: #ffffff;
}

.site-footer__tagline {
	font-family: var(--font-family-heading);
	font-style: italic;
	font-size: var(--font-size-lg);
	line-height: var(--line-height-relaxed);
	color: var(--color-cream);
	max-width: 32ch;
}

.site-footer__location {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-wider);
	text-transform: uppercase;
	color: var(--footer-text);
}

/* ── Navigation Row ────────────────────────────────────────────────────── */

.site-footer__nav-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-8);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__nav-list a {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-wider);
	text-transform: uppercase;
	color: #ffffff;
}

.site-footer__nav-list a:hover {
	color: var(--color-olive-light);
}

/* Same specificity trap as the .btn:visited fix above: base.css's
   `a:visited:not(.btn, .wp-block-button__link)` (0,2,1) beats these plain
   single-class link colors (0,1,1) once a link has been visited, silently
   reverting the white footer nav text to dark ink — invisible against the
   dark footer. Ties with the base rule on specificity but wins because
   components.css is enqueued after base.css. */
.site-footer a:visited {
	color: var(--footer-link);
}

.site-footer__nav-list a:visited {
	color: #ffffff;
}

/* ── Social Icons ──────────────────────────────────────────────────────── */

.site-footer__social-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--footer-border);
	color: #ffffff;
	transition: border-color var(--transition-base), background-color var(--transition-base), color var(--transition-base);
}

.site-footer__social-link:hover {
	background-color: var(--color-olive);
	border-color: var(--color-olive);
	color: #ffffff;
}

.site-footer__social-icon {
	width: 18px;
	height: 18px;
}

/* margin-top (rather than just padding on .site-footer__bottom-inner) is
   what actually creates breathing room between the last centered block
   above and this border line — padding on the bottom bar itself would only
   add space *below* the border, not above it. */
.site-footer__bottom {
	margin-top: var(--space-16);
	border-top: 1px solid var(--footer-border);
}

.site-footer__bottom-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-6) 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-4);
	font-size: var(--font-size-sm);
	text-align: center;
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 600px) {
	.site-footer__nav-list {
		gap: var(--space-4) var(--space-6);
	}
}