/**
 * Mode A Demo header/footer chrome (PLAN.md §4, §14).
 *
 * Scoped by nesting under body.demo-{ID} — the same scope the token-override
 * <style> block uses (class-mode-a-render.php print_token_overrides()) — so
 * this file only ever affects a Demo page, never bleeds into an ordinary
 * Boilerplate Master page, and automatically inherits whatever radius,
 * shadow, and font token values that page's own token overrides set, via
 * normal CSS custom-property cascade. No JS or PHP wiring needed for that
 * part.
 *
 * Header/footer custom properties (--bydn-header-* and --bydn-footer-*) are
 * set inline per-page by class-mode-a-template.php — independent per-instance
 * colors/padding/gaps, not part of the shared token system.
 */

/* ==========================================================================
   Header — shared base
   ========================================================================== */

body[class*="demo-"] .bydn-demo-header {
	background-color: var( --bydn-header-bg, var( --color-bg-dark ) );
	color: var( --bydn-header-text, var( --color-text-inverse ) );
	font-family: var( --font-body );
	padding: 0;
	position: relative;
	z-index: 100;
	/* Unconditional, not just on --sticky — gives the Demo Shadow preset a
	   guaranteed-visible surface regardless of layout/content state. Moved
	   from --shadow-sm to --shadow-md — the smallest tier read as "no
	   change" even when the underlying value was genuinely different. */
	box-shadow: var( --shadow-md );
}

body[class*="demo-"] .bydn-demo-header--sticky {
	position: sticky;
	top: 0;
	box-shadow: var( --shadow-lg ); /* Stronger while pinned; still responds to the preset. */
}

body[class*="demo-"] .bydn-demo-header__inner {
	max-width: var( --max-width );
	margin: 0 auto;
	padding: var( --bydn-header-padding-y, var( --space-4 ) ) var( --wrapper-padding );
	display: flex;
	align-items: center;
	gap: var( --bydn-header-nav-gap, var( --space-6 ) );
}

body[class*="demo-"] .bydn-demo-header__logo {
	color: inherit;
	text-decoration: none;
	font-family: var( --font-heading );
	font-weight: var( --weight-semi, 600 );
	display: inline-flex;
	align-items: center;
}

body[class*="demo-"] .bydn-demo-header__logo-img {
	/* max-width and width/height come from the inline style attribute
	   (class-mode-a-template.php, driven by the Logo Size field) — no fixed
	   height here so aspect ratio is always preserved. */
	display: block;
}

body[class*="demo-"] .bydn-demo-header__nav ul {
	display: flex;
	gap: var( --bydn-header-nav-gap, var( --space-6 ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

body[class*="demo-"] .bydn-demo-header__nav a {
	color: var( --bydn-header-link, currentColor );
	text-decoration: none;
	font-size: var( --text-sm );
}

body[class*="demo-"] .bydn-demo-header__nav a:hover,
body[class*="demo-"] .bydn-demo-header__nav a:focus-visible {
	color: var( --bydn-header-link-hover, var( --color-accent ) );
}

body[class*="demo-"] .bydn-demo-header__cta {
	display: inline-block;
	padding: var( --space-2 ) var( --space-4 );
	border-radius: var( --radius-md );
	font-size: var( --text-sm );
	font-weight: var( --weight-semi, 600 );
	text-decoration: none;
	background-color: var( --color-accent );
	color: var( --color-text-inverse );
	box-shadow: var( --shadow-md ); /* Was --shadow-sm — too subtle on a small element to read as changed. */
}

body[class*="demo-"] .bydn-demo-header #mnavbutton {
	display: none;
}

/* ==========================================================================
	   Header — four layouts (PLAN.md §14.3)
	   Logo Left and Split share identical markup/DOM order; they differ only
   via these rules, not via anything computed in PHP. Centered Inline and
   Logo Right are deferred (see PLAN.md §14.3) — no CSS for them exists.
   ========================================================================== */

/* Logo Left: nav sits immediately after the logo; only the CTA is pushed
   to the far right. */
body[class*="demo-"] .bydn-demo-header--logo-left .bydn-demo-header__nav {
	margin-left: 0;
}
body[class*="demo-"] .bydn-demo-header--logo-left .bydn-demo-header__cta {
	margin-left: auto;
}

/* Split: nav is pushed right as a group; the CTA (rendered immediately
   after nav in the DOM) lands adjacent to it at the far right — nav and
   CTA read as one grouped cluster, distinct from Logo Left. */
body[class*="demo-"] .bydn-demo-header--split .bydn-demo-header__nav {
	margin-left: auto;
}
body[class*="demo-"] .bydn-demo-header--split .bydn-demo-header__cta {
	margin-left: 0;
}

/* Centered Stack: logo centered on its own row, nav in its own centered
   row below. CTA (if present) follows in its own centered row too. */
body[class*="demo-"] .bydn-demo-header--centered .bydn-demo-header__inner {
	flex-direction: column;
	justify-content: center;
}
body[class*="demo-"] .bydn-demo-header--centered .bydn-demo-header__nav,
body[class*="demo-"] .bydn-demo-header--centered .bydn-demo-header__cta {
	margin-left: 0;
}

/* Minimal: no CSS needed for nav positioning — the layout never renders a
   <nav> element at all (enforced server-side, PLAN.md §14.3), so only the
   logo (+ optional CTA) exist in this header's DOM. The shared __inner flex
   row already spaces them correctly with no further rule required. */

/* Centered Inline: left nav + logo + right nav form ONE "center group",
   dead-center regardless of what's on the far right. Fixed after live
   testing found the center group reading as shifted left — the original
   version placed the CTA inside the same track as the right-side nav,
   which made that track's content heavier than the left track's even
   though the grid columns themselves were equal width. Grid-track
   symmetry alone doesn't guarantee content symmetry. The fix: the actions
   region is a separate grid item in column 3, entirely outside the
   nav/logo balancing act, so its width can never pull the center group
   off-center. Column 1 is pure balancing space — no element renders there
   at all; grid-template-columns reserves the track's width regardless. */
body[class*="demo-"] .bydn-demo-header__inner--centered-inline {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto minmax( 0, 1fr );
	align-items: center;
}
body[class*="demo-"] .bydn-demo-header__inner--centered-inline .bydn-demo-header__center-group {
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: var( --bydn-header-nav-gap, var( --space-6 ) );
}
body[class*="demo-"] .bydn-demo-header__inner--centered-inline .bydn-demo-header__center-group .bydn-demo-header__nav {
	margin-left: 0; /* Positioning comes entirely from the grid column, not nav's own auto-margin. */
}
body[class*="demo-"] .bydn-demo-header__inner--centered-inline .bydn-demo-header__actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var( --space-3 ); /* Ready for more than one action button, structurally. */
}

/* ==========================================================================
   Header — Boilerplate Master mobile nav reuse
   ========================================================================== */

@media ( max-width: 900px ) {
	body[class*="demo-"] .bydn-demo-header__inner {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	body[class*="demo-"] .bydn-demo-header__logo {
		order: 1;
	}

	body[class*="demo-"] .bydn-demo-header #mnavbutton {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: var( --bydn-header-text, var( --color-text-inverse ) );
		align-self: center;
		padding: 0 0 0 var( --space-3 );
		font-size: var( --text-2xl );
		order: 2;
		transition-duration: 0.5s;
	}

	body[class*="demo-"] .bydn-demo-header .menu {
		background-color: transparent;
		border: none;
		cursor: pointer;
		display: flex;
		padding: 0;
	}

	body[class*="demo-"] .bydn-demo-header .line {
		fill: none;
		stroke: var( --bydn-header-text, var( --color-text-inverse ) );
		stroke-width: 6;
		transition:
			stroke-dasharray 600ms cubic-bezier( 0.4, 0, 0.2, 1 ),
			stroke-dashoffset 600ms cubic-bezier( 0.4, 0, 0.2, 1 );
	}

	body[class*="demo-"] .bydn-demo-header .line1 {
		stroke-dasharray: 60 207;
		stroke-width: 6;
	}

	body[class*="demo-"] .bydn-demo-header .line2 {
		stroke-dasharray: 60 60;
		stroke-width: 6;
	}

	body[class*="demo-"] .bydn-demo-header .line3 {
		stroke-dasharray: 60 207;
		stroke-width: 6;
	}

	body[class*="demo-"] .bydn-demo-header .opened .line1 {
		stroke-dasharray: 90 207;
		stroke-dashoffset: -134;
		stroke-width: 6;
	}

	body[class*="demo-"] .bydn-demo-header .opened .line2 {
		stroke-dasharray: 1 60;
		stroke-dashoffset: -30;
		stroke-width: 6;
	}

	body[class*="demo-"] .bydn-demo-header .opened .line3 {
		stroke-dasharray: 90 207;
		stroke-dashoffset: -134;
		stroke-width: 6;
	}

	body[class*="demo-"] .bydn-demo-header__nav {
		display: none;
		order: 3;
		flex: 1 0 100%;
		width: 100%;
		margin-left: 0;
	}

	body[class*="demo-"] .bydn-demo-header__nav.active {
		display: flex;
	}

	body[class*="demo-"] .bydn-demo-header__nav ul {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	body[class*="demo-"] .bydn-demo-header__nav li {
		border-top: 1px solid var( --color-bg-dark );
	}

	body[class*="demo-"] .bydn-demo-header__nav a {
		display: block;
		text-align: left;
		font-size: var( --text-md );
		padding: var( --space-3 ) var( --space-8 ) var( --space-3 ) 0;
	}

	body[class*="demo-"] .bydn-demo-header__cta,
	body[class*="demo-"] .bydn-demo-header__actions {
		order: 4;
	}

	/* Centered Inline still uses its desktop split-nav markup; the existing
	   Boilerplate JS toggles both nav halves together because it targets all
	   `header nav` elements. Its center group deliberately cancels the
	   general mobile order values so an open split menu follows DOM/focus
	   order: left nav, logo, hamburger, right nav. */
	body[class*="demo-"] .bydn-demo-header__inner--centered-inline {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var( --space-3 );
	}

	body[class*="demo-"] .bydn-demo-header__inner--centered-inline .bydn-demo-header__center-group {
		flex-direction: column;
		width: 100%;
	}

	body[class*="demo-"] .bydn-demo-header__inner--centered-inline .bydn-demo-header__center-group .bydn-demo-header__nav,
	body[class*="demo-"] .bydn-demo-header__inner--centered-inline .bydn-demo-header__center-group .bydn-demo-header__logo {
		order: 0;
	}

	body[class*="demo-"] .bydn-demo-header__inner--centered-inline .bydn-demo-header__center-group #mnavbutton {
		order: 0;
		padding-left: 0;
	}

	body[class*="demo-"] .bydn-demo-header__inner--centered-inline .bydn-demo-header__center-group .bydn-demo-header__logo {
		justify-content: center;
	}

	body[class*="demo-"] .bydn-demo-header__inner--centered-inline .bydn-demo-header__actions {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
	   Footer — shared base
	   ========================================================================== */

body[class*="demo-"] .bydn-demo-footer {
	background-color: var( --bydn-footer-bg, var( --color-bg-dark ) );
	color: var( --bydn-footer-text, var( --color-text-inverse-soft ) );
	font-family: var( --font-body );
	margin-top: 0;
	padding: 0;
	box-shadow: var( --shadow-md ); /* Was --shadow-sm — same visibility fix as the header. */
}

body[class*="demo-"] .bydn-demo-footer p,
body[class*="demo-"] .bydn-demo-footer li {
	color: inherit; /* Boilerplate rule: WYSIWYG/inverse wrappers must inherit color. */
}

body[class*="demo-"] .bydn-demo-footer__inner {
	max-width: var( --max-width );
	margin: 0 auto;
	padding: var( --bydn-footer-padding-y, var( --space-12 ) ) var( --wrapper-padding );
	display: grid;
	gap: var( --bydn-footer-gap, var( --space-6 ) );
}

body[class*="demo-"] .bydn-demo-footer__region--brand {
	font-family: var( --font-heading );
	font-weight: var( --weight-semi, 600 );
	color: var( --bydn-footer-text, var( --color-text-inverse ) );
}

body[class*="demo-"] .bydn-demo-footer__logo-img {
	display: block;
}

body[class*="demo-"] .bydn-demo-footer__nav ul {
	display: flex;
	gap: var( --space-4 );
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

body[class*="demo-"] .bydn-demo-footer__nav a,
body[class*="demo-"] .bydn-demo-footer__region--contact a {
	color: var( --bydn-footer-muted, var( --color-text-inverse-muted ) );
	text-decoration: none;
	font-size: var( --text-sm );
}

body[class*="demo-"] .bydn-demo-footer__region--contact {
	display: flex;
	gap: var( --space-4 );
	font-size: var( --text-sm );
	flex-wrap: wrap;
}

body[class*="demo-"] .bydn-demo-footer__cta {
	display: inline-block;
	padding: var( --space-2 ) var( --space-4 );
	border-radius: var( --radius-md );
	font-size: var( --text-sm );
	font-weight: var( --weight-semi, 600 );
	text-decoration: none;
	background-color: var( --color-accent );
	color: var( --color-text-inverse );
	box-shadow: var( --shadow-md ); /* Was --shadow-sm — same visibility fix as the header CTA. */
}

body[class*="demo-"] .bydn-demo-footer__region--legal {
	font-size: var( --text-xs );
	color: var( --bydn-footer-muted, var( --color-text-inverse-muted ) );
}

body[class*="demo-"] .bydn-demo-footer__region--marker {
	font-size: var( --text-xs );
	color: var( --bydn-footer-muted, var( --color-text-inverse-muted ) );
	opacity: 0.75;
	letter-spacing: 0.02em;
}

/* ==========================================================================
   Footer — four layouts (PLAN.md §14.4)
   Named grid areas: brand, nav, contact, cta, legal, marker. A region only
   exists in the DOM when it has real content (class-mode-a-template.php),
   so an absent region simply isn't placed — combined with `auto`-sized
   grid tracks throughout (no fixed pixel row/column sizes), this is what
   keeps empty regions from leaving a visible hole. Wide Bar is deferred
   (PLAN.md §14.4) — no CSS for it exists.
   ========================================================================== */

/* Centered Stack: single column, everything centered — plain flow, not
   grid-template-areas, since there's only one column to place. */
body[class*="demo-"] .bydn-demo-footer--centered-stack .bydn-demo-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
body[class*="demo-"] .bydn-demo-footer--centered-stack .bydn-demo-footer__region--contact,
body[class*="demo-"] .bydn-demo-footer--centered-stack .bydn-demo-footer__nav ul {
	justify-content: center;
}

/* Two Column: brand (+ legal/marker) left, nav/contact/cta stacked right. */
body[class*="demo-"] .bydn-demo-footer--two-column .bydn-demo-footer__inner {
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"brand   nav"
		"brand   contact"
		"brand   cta"
		"legal   legal"
		"marker  marker";
	align-items: start;
}

/* Three Column: brand / nav / contact+cta, legal+marker as a full-width
   strip beneath all three columns. */
body[class*="demo-"] .bydn-demo-footer--three-column .bydn-demo-footer__inner {
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas:
		"brand  nav  contact"
		"brand  nav  cta"
		"legal  legal  legal"
		"marker marker marker";
	align-items: start;
}

/* Brand Feature: brand full-width and prominent on its own row, nav/contact
   /cta grouped in a secondary row below, legal/marker at the very bottom. */
body[class*="demo-"] .bydn-demo-footer--brand-feature .bydn-demo-footer__inner {
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas:
		"brand   brand   brand"
		"nav     contact cta"
		"legal   legal   legal"
		"marker  marker  marker";
}
body[class*="demo-"] .bydn-demo-footer--brand-feature .bydn-demo-footer__region--brand {
	font-size: var( --text-2xl );
}

body[class*="demo-"] .bydn-demo-footer--two-column .bydn-demo-footer__region--brand,
body[class*="demo-"] .bydn-demo-footer--three-column .bydn-demo-footer__region--brand,
body[class*="demo-"] .bydn-demo-footer--brand-feature .bydn-demo-footer__region--brand {
	grid-area: brand;
}
body[class*="demo-"] .bydn-demo-footer--two-column .bydn-demo-footer__region--nav,
body[class*="demo-"] .bydn-demo-footer--three-column .bydn-demo-footer__region--nav,
body[class*="demo-"] .bydn-demo-footer--brand-feature .bydn-demo-footer__region--nav {
	grid-area: nav;
}
body[class*="demo-"] .bydn-demo-footer--two-column .bydn-demo-footer__region--contact,
body[class*="demo-"] .bydn-demo-footer--three-column .bydn-demo-footer__region--contact,
body[class*="demo-"] .bydn-demo-footer--brand-feature .bydn-demo-footer__region--contact {
	grid-area: contact;
}
body[class*="demo-"] .bydn-demo-footer--two-column .bydn-demo-footer__region--cta,
body[class*="demo-"] .bydn-demo-footer--three-column .bydn-demo-footer__region--cta,
body[class*="demo-"] .bydn-demo-footer--brand-feature .bydn-demo-footer__region--cta {
	grid-area: cta;
}
body[class*="demo-"] .bydn-demo-footer--two-column .bydn-demo-footer__region--legal,
body[class*="demo-"] .bydn-demo-footer--three-column .bydn-demo-footer__region--legal,
body[class*="demo-"] .bydn-demo-footer--brand-feature .bydn-demo-footer__region--legal {
	grid-area: legal;
}
body[class*="demo-"] .bydn-demo-footer--two-column .bydn-demo-footer__region--marker,
body[class*="demo-"] .bydn-demo-footer--three-column .bydn-demo-footer__region--marker,
body[class*="demo-"] .bydn-demo-footer--brand-feature .bydn-demo-footer__region--marker {
	grid-area: marker;
}

/* Mobile: every footer layout collapses to a single column, stacking in
   DOM order — brand, nav, contact, cta, legal, marker — which is already
   the exact order class-mode-a-template.php renders them in, so no
   per-layout reordering is needed here. */
@media ( max-width: 782px ) {
	body[class*="demo-"] .bydn-demo-footer__inner {
		grid-template-columns: 1fr;
		grid-template-areas: none;
	}
	body[class*="demo-"] .bydn-demo-footer__region--brand,
	body[class*="demo-"] .bydn-demo-footer__region--nav,
	body[class*="demo-"] .bydn-demo-footer__region--contact,
	body[class*="demo-"] .bydn-demo-footer__region--cta,
	body[class*="demo-"] .bydn-demo-footer__region--legal,
	body[class*="demo-"] .bydn-demo-footer__region--marker {
		grid-area: auto;
	}
}

/* ==========================================================================
   Content alignment utility (PLAN.md §14.5, demo_content_alignment)
   Scoped to the fallback H1 / content frame only — never touches individual
   block or Gutenberg alignment.
   ========================================================================== */

body[class*="demo-"] .page-inner.bydn-demo-content-align-center {
	text-align: center;
}
body[class*="demo-"] .page-inner.bydn-demo-content-align-right {
	text-align: right;
}
body[class*="demo-"] .page-inner.bydn-demo-content-align-center h1,
body[class*="demo-"] .page-inner.bydn-demo-content-align-right h1 {
	margin-left: auto;
}
body[class*="demo-"] .page-inner.bydn-demo-content-align-center h1 {
	margin-right: auto;
}

/* ==========================================================================
   Empty-content gap fix. WordPress/Gutenberg can leave a genuinely empty
   <p></p> in post_content (wpautop, or a paragraph block emptied but not
   deleted) — that empty paragraph still takes its own margin, showing as a
   visible blank strip in the Demo's background color before the footer.
   Same root cause and same fix pattern already documented in the theme's
   own style.css §10 "Footer bookend CTA" section — reused here, not
   reinvented. :empty only matches elements with literally zero children
   (not even whitespace text), so this can never hide a paragraph that has
   real (even short) content or a genuinely empty intentional spacer some
   other rule is deliberately using.
   ========================================================================== */
body[class*="demo-"] .page-inner > p:empty,
body[class*="demo-"] .page-inner > .wp-block-paragraph:empty,
body[class*="demo-"] .page-inner p.wp-block-paragraph:empty {
	display: none;
	margin: 0;
}