/* =========================================================
   NJ BEAUTY COURSES — BRAND FOUNDATION
   Loaded after theme + Tutor LMS CSS. Styling only.
   Sections: 1 Variables 2 Reset 3 Typography 4 Layout/Utilities
             5 Buttons 6 Forms 7 Cards/Badges/Alerts
             8 Header 9 Footer 10 Homepage 11 Responsive
   ========================================================= */

/* ---------- 1. VARIABLES ---------- */
:root {
	--nj-gold: #C6A769;
	--nj-gold-dark: #A98543;
	--nj-gold-light: #E7D5B2;
	--nj-ivory: #F8F3EC;
	--nj-cream: #FFFDF9;
	--nj-sand: #E9D8C5;
	--nj-blush: #EAD2C8;
	/* Slightly darkened "app" canvas — a shade between ivory and sand, used
	   behind panels/cards (e.g. the dashboard) so they read as distinct
	   surfaces instead of white-on-white. Not a dark theme. */
	--nj-canvas: #F1E8DA;
	--nj-espresso: #2A1B14;
	--nj-charcoal: #111111;
	--nj-muted: #6F6259;
	--nj-sage: #8E9A7B;
	--nj-border: #E8DED3;
	--nj-success: #66785F;
	--nj-warning: #B8864B;
	--nj-error: #9F3D35;

	--nj-shadow-sm: 0 6px 16px rgba(42, 27, 20, 0.06);
	--nj-shadow: 0 18px 45px rgba(42, 27, 20, 0.08);
	--nj-shadow-lg: 0 24px 60px rgba(42, 27, 20, 0.12);

	--nj-radius-sm: 12px;
	--nj-radius-md: 18px;
	--nj-radius-lg: 24px;
	--nj-radius-pill: 999px;

	--nj-max: 1180px;
	--nj-max-narrow: 760px;

	--nj-font-heading: "Playfair Display", "Cormorant Garamond", Georgia, serif;
	--nj-font-body: "Montserrat", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--nj-space-1: 8px;
	--nj-space-2: 16px;
	--nj-space-3: 24px;
	--nj-space-4: 32px;
	--nj-space-5: 48px;
	--nj-space-6: 72px;
}

/* ---------- 2. RESET / NORMALISATION ---------- */
/* Without this, any element combining width:100% with padding (our mobile
   full-width buttons, cards, etc.) renders wider than its container and
   overflows — the root cause of most "not quite clean" mobile spacing. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	background: var(--nj-cream);
	color: var(--nj-espresso);
	font-family: var(--nj-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

*:focus-visible {
	outline: 2px solid var(--nj-gold-dark);
	outline-offset: 2px;
}

::selection {
	background: var(--nj-gold-light);
	color: var(--nj-espresso);
}

/* ---------- 3. TYPOGRAPHY ---------- */
h1, h2, h3, h4,
.nj-heading,
.wp-block-post-title,
.entry-title {
	font-family: var(--nj-font-heading);
	color: var(--nj-espresso);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

h1, .nj-h1 {
	font-size: clamp(36px, 6vw, 64px);
	font-weight: 700;
}

h2, .nj-h2 {
	font-size: clamp(28px, 4vw, 42px);
}

h3, .nj-h3 {
	font-size: clamp(20px, 3vw, 26px);
}

p, li, label, input, textarea, select {
	font-family: var(--nj-font-body);
}

body p {
	color: var(--nj-espresso);
}

.nj-eyebrow {
	display: inline-block;
	font-family: var(--nj-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nj-gold-dark);
	margin: 0 0 var(--nj-space-2);
}

.nj-lede {
	font-size: 18px;
	color: var(--nj-muted);
	max-width: var(--nj-max-narrow);
	line-height: 1.65;
}

/* ---------- 4. LAYOUT / UTILITIES ---------- */
.nj-container {
	max-width: var(--nj-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--nj-space-3);
	padding-right: var(--nj-space-3);
}

.nj-section {
	padding-top: var(--nj-space-6);
	padding-bottom: var(--nj-space-6);
}

.nj-section--tight {
	padding-top: var(--nj-space-5);
	padding-bottom: var(--nj-space-5);
}

.nj-section--ivory {
	background: var(--nj-ivory);
}

.nj-section--sand {
	background: var(--nj-sand);
}

.nj-section--espresso {
	background: var(--nj-espresso);
	color: var(--nj-ivory);
}

.nj-section--espresso h1,
.nj-section--espresso h2,
.nj-section--espresso h3,
.nj-section--espresso p {
	color: var(--nj-cream);
}

.nj-grid {
	display: grid;
	gap: var(--nj-space-3);
}

.nj-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.nj-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.nj-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.nj-center {
	text-align: center;
}

.nj-divider {
	width: 64px;
	height: 3px;
	background: var(--nj-gold);
	border-radius: var(--nj-radius-pill);
	border: 0;
	margin: var(--nj-space-2) 0 var(--nj-space-3);
}

.nj-center .nj-divider {
	margin-left: auto;
	margin-right: auto;
}

/* ---------- 5. BUTTONS ---------- */
.nj-btn,
.tutor-btn,
.wp-block-button__link,
input[type="submit"].tutor-btn,
button.tutor-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--nj-font-body);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	padding: 16px 28px;
	min-height: 48px;
	border-radius: var(--nj-radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
	white-space: normal;
}

.nj-btn--primary,
.tutor-btn.tutor-btn-primary,
.wp-block-button__link {
	background: var(--nj-gold);
	color: #fff;
	border-color: var(--nj-gold);
	box-shadow: 0 10px 24px rgba(198, 167, 105, 0.28);
}

.nj-btn--primary:hover,
.tutor-btn.tutor-btn-primary:hover,
.wp-block-button__link:hover {
	background: var(--nj-gold-dark);
	border-color: var(--nj-gold-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 14px 30px rgba(169, 133, 67, 0.32);
}

.nj-btn--secondary,
.tutor-btn.tutor-btn-outline-primary,
.tutor-btn.tutor-btn-secondary {
	background: transparent;
	color: var(--nj-espresso);
	border-color: var(--nj-gold);
}

.nj-btn--secondary:hover,
.tutor-btn.tutor-btn-outline-primary:hover,
.tutor-btn.tutor-btn-secondary:hover {
	background: var(--nj-ivory);
	color: var(--nj-espresso);
	border-color: var(--nj-gold-dark);
}

.nj-btn--ghost,
.tutor-btn.tutor-btn-ghost,
.tutor-btn.tutor-btn-link {
	background: transparent;
	color: var(--nj-muted);
	border-color: var(--nj-border);
	box-shadow: none;
}

.nj-btn--ghost:hover,
.tutor-btn.tutor-btn-ghost:hover {
	color: var(--nj-espresso);
	border-color: var(--nj-gold);
}

.tutor-btn.tutor-btn-block,
.nj-btn--block {
	width: 100%;
}

/* Buttons inside a dark section should stay readable */
.nj-section--espresso .nj-btn--secondary {
	color: var(--nj-cream);
	border-color: var(--nj-gold);
}

/* ---------- 6. FORMS ---------- */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.tutor-form-control {
	width: 100%;
	font-family: var(--nj-font-body);
	font-size: 16px;
	padding: 14px 16px;
	min-height: 48px;
	background: #fff;
	border: 1px solid var(--nj-border);
	border-radius: var(--nj-radius-sm);
	color: var(--nj-espresso);
	transition: border-color .18s ease, box-shadow .18s ease;
}

input:focus,
textarea:focus,
select:focus,
.tutor-form-control:focus {
	border-color: var(--nj-gold);
	box-shadow: 0 0 0 3px rgba(198, 167, 105, 0.18);
	outline: none;
}

label,
.tutor-form-group label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: var(--nj-espresso);
	margin-bottom: 6px;
}

.nj-alert,
.tutor-alert {
	border-radius: var(--nj-radius-sm);
	padding: 14px 18px;
	font-size: 14px;
	border: 1px solid var(--nj-border);
	background: var(--nj-ivory);
	color: var(--nj-espresso);
}

.nj-alert--error,
.tutor-alert.tutor-warning,
.tutor-alert.tutor-danger {
	background: #FBEEEC;
	border-color: rgba(159, 61, 53, 0.3);
	color: var(--nj-error);
}

.nj-alert--success,
.tutor-alert.tutor-success {
	background: #EEF1EA;
	border-color: rgba(102, 120, 95, 0.3);
	color: var(--nj-success);
}

/* ---------- 7. CARDS / BADGES ---------- */
.nj-card,
.tutor-card {
	background: #fff;
	border: 1px solid var(--nj-border);
	border-radius: var(--nj-radius-lg);
	box-shadow: var(--nj-shadow-sm);
	transition: box-shadow .2s ease, transform .2s ease;
}

.nj-card:hover,
.tutor-card:hover {
	box-shadow: var(--nj-shadow);
}

.nj-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nj-gold-dark);
	background: var(--nj-gold-light);
	border-radius: var(--nj-radius-pill);
	padding: 6px 14px;
}

.nj-badge--sage {
	color: #4E5A44;
	background: rgba(142, 154, 123, 0.18);
}

/* ---------- 8. HEADER ---------- */
.wp-site-blocks > header.wp-block-template-part,
header.wp-block-template-part {
	background: var(--nj-cream);
	border-bottom: 1px solid var(--nj-border);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow .2s ease;
}

header.wp-block-template-part.nj-scrolled {
	box-shadow: 0 8px 24px rgba(42, 27, 20, 0.06);
}

header.wp-block-template-part .wp-block-site-title,
header.wp-block-template-part .wp-block-site-title a {
	font-family: var(--nj-font-heading);
	font-weight: 700;
	color: var(--nj-espresso);
	font-size: 24px;
	text-decoration: none;
}

header.wp-block-template-part .wp-block-navigation {
	font-family: var(--nj-font-body);
}

header.wp-block-template-part .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-weight: 600;
	font-size: 15px;
	color: var(--nj-espresso);
	padding: 8px 14px;
	border-radius: var(--nj-radius-pill);
	transition: background-color .18s ease, color .18s ease;
}

header.wp-block-template-part .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
header.wp-block-template-part .current-menu-item > .wp-block-navigation-item__content {
	background: var(--nj-gold-light);
	color: var(--nj-espresso);
}

header.wp-block-template-part .nj-nav-cta > .wp-block-navigation-item__content {
	background: var(--nj-gold);
	color: #fff !important;
	padding: 10px 22px;
}

header.wp-block-template-part .nj-nav-cta > .wp-block-navigation-item__content:hover {
	background: var(--nj-gold-dark);
}

/* Mobile off-canvas menu */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--nj-cream) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 18px;
	padding: 14px 0;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	color: var(--nj-espresso);
}

/* ---------- 9. FOOTER ---------- */
footer.wp-block-template-part {
	background: var(--nj-espresso);
	color: var(--nj-sand);
}

footer.wp-block-template-part a {
	color: var(--nj-sand);
	text-decoration: none;
}

footer.wp-block-template-part a:hover {
	color: var(--nj-gold);
}

footer.wp-block-template-part h2,
footer.wp-block-template-part h3,
footer.wp-block-template-part .wp-block-site-title a {
	color: #fff;
	font-family: var(--nj-font-heading);
}

footer.wp-block-template-part .wp-block-site-tagline {
	color: var(--nj-sand);
}

footer.wp-block-template-part .wp-block-navigation-item__content {
	font-size: 14px;
	font-weight: 500;
}

footer.wp-block-template-part hr,
footer.wp-block-template-part .wp-block-separator {
	border-color: rgba(248, 243, 236, 0.15);
}

/* ---------- 10. HOMEPAGE BLOCKS ---------- */
/* The custom Home page is built entirely from hand-placed sections below;
   suppress the theme's automatic page-title block so "Home" doesn't render
   above the hero. */
body.home .wp-block-post-title,
body.home main > .wp-block-group > .wp-block-post-title {
	display: none;
}

/* The block theme constrains post content to its ~645px content-width, which
   on desktop crushes the hand-built sections into a narrow centred column and
   turns the coloured section backgrounds into stranded bands. Let each section
   span the full content area (its own .nj-container caps content at 1180px),
   and drop the wrapper's side padding so the coloured backgrounds run
   edge-to-edge — the same full-bleed premium look the page has on mobile. */
body.home .entry-content.is-layout-constrained > .nj-hero,
body.home .entry-content.is-layout-constrained > .nj-section {
	max-width: none;
}

body.home .wp-block-post-content.entry-content {
	margin-top: 0 !important;
	padding-left: 0;
	padding-right: 0;
}

/* Kill the theme's stacked top spacers (main margin-top + wrapper padding-top,
   ~140px combined) so the hero sits directly under the header instead of
   floating down the page behind a big void. The hero sets its own spacing. */
body.home main.is-layout-constrained {
	margin-top: 0 !important;
}

body.home main > .wp-block-group {
	padding-top: 0 !important;
}

.nj-hero__image .nj-card {
	min-height: 320px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-top: 4px solid var(--nj-gold);
}

.nj-hero {
	padding-top: var(--nj-space-6);
	padding-bottom: var(--nj-space-6);
	background: linear-gradient(180deg, var(--nj-ivory) 0%, var(--nj-cream) 100%);
}

.nj-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--nj-space-5);
	align-items: center;
}

/* Desktop: the hero fills the screen below the site header and vertically
   centres its two columns — but must never exceed one screen (no cut-off).
   --nj-hero-top is the exact height above the hero (site header + WP admin bar
   when present), set by nj-frontend.js; the 118px fallback covers the common
   admin-bar + header case. Content is kept compact so it fits even on short
   laptop viewports. */
@media (min-width: 768px) {
	body.home .nj-hero {
		min-height: calc(100svh - var(--nj-hero-top, 118px));
		display: flex;
		align-items: center;
		padding-top: var(--nj-space-3);
		padding-bottom: var(--nj-space-3);
	}

	body.home .nj-hero > .nj-container {
		width: 100%;
	}

	/* Compact the hero copy so the section always fits within one viewport. */
	body.home .nj-hero .nj-h1 {
		font-size: clamp(30px, 3.2vw, 46px);
		line-height: 1.1;
	}

	body.home .nj-hero .nj-lede {
		font-size: 16px;
		line-height: 1.55;
	}

	body.home .nj-hero__image .nj-card {
		min-height: 0;
	}
}

.nj-hero__image img {
	border-radius: var(--nj-radius-lg);
	box-shadow: var(--nj-shadow-lg);
}

/* Site logo in the header (replaces the plain site-title text). Square NJ
   monogram, so cap the height and let width follow. */
.wp-block-site-logo img,
img.custom-logo {
	max-height: 60px !important;
	width: auto !important;
	height: auto !important;
}

/* Founder portrait in the hero, with a floating "at a glance" stat card that
   overhangs the bottom edge for a premium, layered look. */
.nj-hero__portrait {
	position: relative;
	margin: 0 auto;
	max-width: 460px;
}
.nj-hero__portrait img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--nj-radius-lg);
	box-shadow: var(--nj-shadow-lg);
}
.nj-hero__image {
	padding-bottom: 34px; /* room for the overhanging stat card */
}
.nj-hero__stats {
	position: absolute;
	left: 50%;
	bottom: -26px;
	transform: translateX(-50%);
	width: min(90%, 380px);
	margin: 0;
	padding: 16px 20px !important;
	min-height: 0 !important;
	text-align: center;
	border-top: 4px solid var(--nj-gold);
}
.nj-hero__stats .nj-eyebrow {
	margin: 0 0 8px;
}

.nj-trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nj-space-3);
	margin-top: var(--nj-space-3);
	font-size: 14px;
	color: var(--nj-muted);
	font-weight: 600;
}

.nj-trust-row span::before {
	content: "\2726";
	color: var(--nj-gold);
	margin-right: 6px;
}

.nj-feature-card {
	padding: var(--nj-space-4);
	background: #fff;
	border: 1px solid var(--nj-border);
	border-radius: var(--nj-radius-lg);
	box-shadow: var(--nj-shadow-sm);
}

.nj-feature-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--nj-gold-light);
	color: var(--nj-gold-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-bottom: var(--nj-space-2);
}

.nj-steps {
	counter-reset: nj-step;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--nj-space-3);
}

.nj-step {
	text-align: center;
	padding: var(--nj-space-3);
}

.nj-step::before {
	counter-increment: nj-step;
	content: counter(nj-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0 auto var(--nj-space-2);
	border-radius: 50%;
	background: var(--nj-gold);
	color: #fff;
	font-family: var(--nj-font-heading);
	font-weight: 700;
	font-size: 20px;
}

.nj-cta-band {
	background: var(--nj-espresso);
	color: var(--nj-cream);
	border-radius: var(--nj-radius-lg);
	padding: var(--nj-space-5) var(--nj-space-4);
	text-align: center;
}

.nj-cta-band h2 {
	color: #fff;
}

.nj-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--nj-space-2);
}

.nj-check-list li {
	position: relative;
	padding-left: 30px;
	color: var(--nj-espresso);
}

.nj-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--nj-gold);
}

.nj-check-list li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 8px;
	width: 6px;
	height: 3px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

/* The homepage button groups are hand-written raw HTML (plain
   `<div class="wp-block-buttons">`), so they never get the core block's
   flex-layout gap — the buttons sit flush against each other. Give the group
   a real flex layout + gap so buttons are always cleanly separated. Inline
   `justify-content` (e.g. the centred CTA) still applies on top of this. */
body.home .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

body.home .wp-block-buttons .wp-block-button {
	margin: 0;
}

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width: 1024px) {
	.nj-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	/* Belt-and-braces guard against the odd 1-2px horizontal overflow from
	   full-bleed hero padding on the narrowest phones (320px). `clip` (not
	   `hidden`) avoids turning the viewport into a scroll container, so
	   position:sticky keeps working. */
	html {
		overflow-x: clip;
	}

	.nj-section {
		padding-top: var(--nj-space-4);
		padding-bottom: var(--nj-space-4);
	}

	.nj-hero {
		padding-top: var(--nj-space-4);
		padding-bottom: var(--nj-space-4);
	}

	.nj-hero__grid {
		grid-template-columns: 1fr;
	}

	/* Smaller logo on phones. */
	.wp-block-site-logo img,
	img.custom-logo {
		max-height: 46px !important;
	}

	/* On phones let the stat card sit just under the portrait (slight overlap)
	   rather than absolutely overhanging, so it never clips off-screen. */
	.nj-hero__image {
		padding-bottom: 0;
	}
	.nj-hero__stats {
		position: static;
		transform: none;
		width: auto;
		margin: -24px auto 0;
	}

	.nj-grid--2,
	.nj-grid--3,
	.nj-grid--4 {
		grid-template-columns: 1fr;
	}

	/* Short stat rows (e.g. "6 Modules / 27 Lessons / 6hrs Duration") read
	   far cleaner staying compact and side-by-side than stacked into three
	   tall rows. */
	.nj-grid--stat.nj-grid--3 {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px !important;
	}

	.nj-steps {
		grid-template-columns: 1fr;
	}

	.nj-check-list {
		grid-template-columns: 1fr;
	}

	.nj-btn,
	.tutor-btn,
	.wp-block-button__link {
		width: 100%;
	}

	.wp-block-buttons .wp-block-button {
		width: 100%;
	}

	/* Full-width buttons stack; column layout + the group gap (12px) keeps a
	   clean, even space between them instead of letting them touch. */
	body.home .wp-block-buttons {
		flex-direction: column;
	}

	/* --- Homepage mobile layout fixes (Sprint) --------------------------
	   (1) Tighten the gap under the header: the theme stacks main's
	   margin-top and the content wrapper's padding-top (spacing-60 =
	   min 30px each) on top of the hero's own padding, leaving a big void.
	   Collapse the theme spacing on the homepage; the hero sets its own. */
	body.home main.is-layout-constrained {
		margin-top: 0 !important;
	}

	body.home main > .wp-block-group {
		padding-top: 0 !important;
		padding-bottom: var(--nj-space-4) !important;
	}

	/* (3/4) Make sections full-bleed. The post-content wrapper carries the
	   theme's global side padding (spacing-50 = min 30px), which reads as
	   white gutters framing the coloured (ivory/sand) section backgrounds.
	   Drop that side padding on mobile so section backgrounds stretch edge
	   to edge — each .nj-container still keeps the inner content padded. */
	body.home .wp-block-post-content.entry-content {
		margin-top: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	h1, .nj-h1 {
		font-size: 36px;
	}

	/* --- Compact mobile header (~64px), warm ivory, subtle border --- */
	header.wp-block-template-part {
		background: var(--nj-ivory);
	}

	/* The theme nests three padded groups in the header (10+10+20 each side),
	   stacking to ~80px of vertical padding. Collapse the inner groups and
	   let only the outermost set the height, for a ~64px compact bar. */
	header.wp-block-template-part .wp-block-group {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	header.wp-block-template-part > .wp-block-group {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}

	header.wp-block-template-part .wp-block-site-title,
	header.wp-block-template-part .wp-block-site-title a {
		font-size: 20px;
	}

	/* --- Slim, centred mobile footer: no giant dark empty block --- */
	footer.wp-block-template-part > .wp-block-group,
	footer.wp-block-template-part > .wp-block-group > .wp-block-group {
		padding-top: var(--nj-space-4) !important;
		padding-bottom: var(--nj-space-4) !important;
		text-align: center;
	}

	footer.wp-block-template-part .wp-block-columns {
		gap: var(--nj-space-3) !important;
	}

	footer.wp-block-template-part .wp-block-spacer {
		height: var(--nj-space-2) !important;
	}

	footer.wp-block-template-part .wp-block-navigation {
		justify-content: center;
	}
}

/* ---------- 12. CONTACT PAGE + LEAD FORM ---------- */
/* The hero below carries the page heading, so hide the theme's page title. */
body.nj-contact-page .wp-block-post-title {
	display: none;
}

/* The block theme constrains content to its ~645px content-width. Let our
   full-width sections span the content area so each .nj-container's own
   max-width (1180) governs the layout — otherwise the form/aside feel cramped. */
body.nj-contact-page .entry-content.is-layout-constrained > .nj-section {
	max-width: none;
}

.nj-contact-hero {
	background: linear-gradient(180deg, var(--nj-ivory) 0%, var(--nj-cream) 100%);
	padding-bottom: var(--nj-space-4);
}

.nj-contact-grid {
	display: grid;
	grid-template-columns: 1.35fr 0.85fr;
	gap: var(--nj-space-5);
	align-items: start;
}

/* Form card */
.nj-contact-form {
	background: #fff;
	border: 1px solid var(--nj-border);
	border-radius: var(--nj-radius-lg);
	box-shadow: var(--nj-shadow);
	padding: var(--nj-space-4);
}

.nj-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--nj-space-3);
}

.nj-field {
	margin: 0 0 var(--nj-space-3);
}

.nj-field label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--nj-espresso);
	margin-bottom: 6px;
}

.nj-req {
	color: var(--nj-gold-dark);
}

/* Honeypot — visually + spatially hidden, but not display:none (bots skip those) */
.nj-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nj-contact-form__submit {
	width: 100%;
	margin-top: var(--nj-space-1);
}

.nj-contact-form__note {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--nj-muted);
	text-align: center;
}

/* Success / error banners */
.nj-contact-alert {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 18px;
	border-radius: var(--nj-radius-md);
	margin-bottom: var(--nj-space-3);
	font-size: 14px;
	border: 1px solid var(--nj-border);
}

.nj-contact-alert strong {
	font-size: 15px;
}

.nj-contact-alert--success {
	background: #EEF1EA;
	border-color: rgba(102, 120, 95, 0.35);
	color: var(--nj-success);
}

.nj-contact-alert--error {
	background: #FBEEEC;
	border-color: rgba(159, 61, 53, 0.3);
	color: var(--nj-error);
}

/* Aside: contact details */
.nj-contact-aside {
	display: flex;
	flex-direction: column;
	gap: var(--nj-space-3);
}

.nj-contact-info {
	background: var(--nj-ivory);
	border: 1px solid var(--nj-border);
	border-radius: var(--nj-radius-lg);
	padding: var(--nj-space-4);
}

.nj-contact-info h3 {
	margin: 0 0 6px;
}

.nj-contact-info p {
	margin: 0 0 var(--nj-space-2);
	color: var(--nj-muted);
	font-size: 15px;
}

.nj-contact-info__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 0;
	border-top: 1px solid var(--nj-border);
}

.nj-contact-info__item:first-of-type {
	border-top: 0;
}

.nj-contact-info__k {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nj-gold-dark);
	margin: 0 0 2px;
}

.nj-contact-info__v {
	margin: 0;
	color: var(--nj-espresso);
	font-weight: 600;
	word-break: break-word;
}

.nj-contact-info__v a {
	color: var(--nj-espresso);
	text-decoration: none;
}

.nj-contact-info__v a:hover {
	color: var(--nj-gold-dark);
}

@media (max-width: 860px) {
	.nj-contact-grid {
		grid-template-columns: 1fr;
		gap: var(--nj-space-4);
	}
}

@media (max-width: 767px) {
	.nj-contact-form {
		padding: var(--nj-space-3);
	}

	.nj-field-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}