/*
Theme Name: BORN Dance Essentials
Theme URI: https://essentials.borndanceacademy.com
Description: Child theme for Dance Essentials. Light, compact interface with steel blue used as line and accent, and a single saturated navy band. Implements design handoff 4a.
Author: BORN Dance Academy
Template: twentytwentyfive
Version: 0.7.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: born-dance-essentials
*/

/* ---------------------------------------------------------------------------
   Tokens. Mirrors the theme.json palette so plain CSS and block styles agree.
   --------------------------------------------------------------------------- */

:root {
	--bde-ink: #111827;
	--bde-graphite: #1f2937;
	--bde-slate: #4b5563;
	--bde-muted: #6b7280;
	--bde-faint: #9ca3af; /* non-text only: fails AA on white */
	--bde-faint-text: #6b7280; /* accessible substitute, 4.83:1 */
	--bde-rule: #e5e7eb;
	--bde-rule-soft: #d1d5db;
	--bde-paper: #ffffff;
	--bde-panel: #f7f8fa;
	--bde-steel: #4682b4;
	--bde-steel-deep: #3a6f99;
	--bde-steel-ink: #2f5878;
	--bde-steel-light: #8fb8da;
	--bde-mist: #dbe9f6;
	--bde-mist-pale: #eff5fb;
	--bde-navy: #16324a;
	--bde-navy-glow: #1f4463;

	--bde-radius: 8px;
	--bde-radius-lg: 14px;
	--bde-shadow-sm: 0 0 0 1px var(--bde-rule), 0 1px 3px rgba(17, 24, 39, 0.06);
	--bde-pad: 48px;
}

/* Headings take their weight from the design, never bolder than 500. */
.bde-home h1,
.bde-home h2,
.bde-home h3,
.bde-home .bde-kicker {
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0;
}

/* Focus is global, not scoped to a few containers: every interactive element
   on the site needs a visible ring, including links inside guide prose. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--bde-steel);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Visible only to screen readers. Used to announce that a link opens a new
   tab, which is otherwise a silent surprise for assistive tech users. */
.bde-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Card titles are real headings now; strip the browser's default sizing so
   the semantics change without the design changing. */
.bde-card-title,
h2.bde-kicker,
h3.bde-card-title {
	margin: 0;
	font-family: inherit;
}

::selection {
	background: rgba(70, 130, 180, 0.3);
}

/* Kicker: uppercase steel label that replaces a heavy section heading. */
.bde-kicker {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bde-steel-deep);
	line-height: 1.2;
}

/* Signature detail: rules fade to transparent at both ends. */
.bde-fade-rule {
	height: 1px;
	border: 0;
	margin: 0;
	background: linear-gradient(
		to right,
		transparent,
		var(--bde-rule) var(--bde-pad),
		var(--bde-rule) calc(100% - var(--bde-pad)),
		transparent
	);
}

/* ---------------------------------------------------------------------------
   Header and footer
   --------------------------------------------------------------------------- */

.bde-wrap {
	max-width: 1064px;
	margin: 0 auto;
	padding: 0 var(--bde-pad);
}

.bde-nav {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 17px 0;
	font-size: 14px;
	flex-wrap: wrap;
}

.bde-nav .bde-brand {
	font-weight: 500;
	font-size: 17px;
	margin-right: auto;
	color: var(--bde-ink);
	text-decoration: none;
}

.bde-nav a {
	color: var(--bde-ink);
	text-decoration: none;
}

.bde-nav a:hover {
	color: var(--bde-steel-deep);
}

.bde-footer {
	display: flex;
	align-items: baseline;
	gap: 22px;
	padding: 17px 0;
	font-size: 12.5px;
	color: var(--bde-muted);
	flex-wrap: wrap;
}

.bde-footer .bde-brand {
	font-weight: 500;
	color: var(--bde-ink);
	font-size: 14px;
	margin-right: auto;
	text-decoration: none;
}

.bde-footer a {
	color: inherit;
	text-decoration: none;
}

.bde-footer a:hover {
	color: var(--bde-steel-deep);
}

/* ---------------------------------------------------------------------------
   Buttons: outlined, never filled.
   --------------------------------------------------------------------------- */

.bde-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--bde-steel-deep);
	background: transparent;
	border: 1px solid var(--bde-steel);
	padding: 8px 14px;
	border-radius: var(--bde-radius);
}

.bde-btn:hover {
	background: rgba(70, 130, 180, 0.1);
	color: var(--bde-steel-ink);
}

.bde-btn:active {
	background: rgba(70, 130, 180, 0.18);
}

.bde-btn-sm {
	font-size: 13px;
	padding: 5px 14px;
}

.bde-btn-ghost {
	border-color: transparent;
	padding-inline: 4px;
	align-self: flex-start;
	margin-top: 6px;
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.bde-hero {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 48px;
	align-items: center;
	padding: 48px 0;
}

.bde-hero-mark {
	width: 34px;
	height: 3px;
	background: var(--bde-steel);
	border-radius: 2px;
	margin-bottom: 17px;
}

.bde-hero h1 {
	font-size: 36px;
	margin: 0 0 8px;
	text-wrap: balance;
}

.bde-hero .bde-lede {
	font-size: 15px;
	line-height: 1.6;
	color: var(--bde-slate);
	margin: 0 0 17px;
	max-width: 48ch;
}

.bde-hero-credential {
	border-left: 2px solid var(--bde-steel);
	padding-left: 11px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--bde-slate);
}

.bde-hero-img {
	height: 340px;
	border-radius: 10px;
}

/* Awaiting photography. Reads as a deliberate tinted panel with the steel
   mark rather than an obvious hole in the page. */
.bde-img-slot {
	display: grid;
	place-items: center;
	background: var(--bde-mist-pale);
	border: 0;
	border-radius: 6px;
	color: var(--bde-steel-deep);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	padding: 8px;
	position: relative;
	overflow: hidden;
}

.bde-img-slot::before {
	content: "";
	position: absolute;
	top: 14px;
	left: 14px;
	width: 24px;
	height: 3px;
	border-radius: 2px;
	background: var(--bde-steel);
}

/* A real photo fills the slot edge to edge. */
.bde-photo {
	display: block;
	width: 100%;
	border-radius: 6px;
	object-fit: cover;
	background: var(--bde-mist-pale);
}

.bde-hero .bde-photo {
	height: 340px;
	border-radius: 10px;
}

.bde-card .bde-photo {
	height: 130px;
}

/* An empty slot occupies exactly the same box as a photo, so a card awaiting
   photography stays the same height as its neighbours. */
.bde-card .bde-img-slot {
	height: 130px;
}

.bde-hero-img img,
.bde-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	display: block;
}

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.bde-section-head {
	display: flex;
	align-items: baseline;
	gap: 11px;
	margin-bottom: 11px;
	flex-wrap: wrap;
}

.bde-section-head .bde-count {
	font-size: 12px;
	color: var(--bde-muted);
}

.bde-styles-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 11px;
	padding-bottom: 48px;
	margin: 0;
	list-style: none;
}

.bde-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	border-radius: var(--bde-radius);
	background: var(--bde-paper);
	box-shadow: var(--bde-shadow-sm);
}

a.bde-card {
	text-decoration: none;
	color: var(--bde-ink);
	transition: box-shadow 0.15s ease;
}

a.bde-card:hover {
	box-shadow: 0 0 0 1px var(--bde-steel-light), 0 6px 18px rgba(17, 24, 39, 0.1);
}

.bde-card-kicker {
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bde-steel-deep);
}

.bde-card-title {
	font-weight: 500;
	font-size: 17px;
	line-height: 1.2;
}

.bde-card-body {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--bde-slate);
	flex: 1;
}

.bde-card-meta {
	font-size: 12px;
	color: var(--bde-steel-deep);
}

.bde-card.bde-pending {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--bde-rule-soft);
}

.bde-card.bde-pending .bde-card-kicker,
.bde-card.bde-pending .bde-card-title {
	color: var(--bde-muted);
}

.bde-card.bde-pending .bde-card-body {
	color: var(--bde-faint-text);
}

.bde-thumb {
	width: 100%;
	height: 130px;
}

/* ---------------------------------------------------------------------------
   The band: the page's single saturated moment.
   --------------------------------------------------------------------------- */

.bde-band {
	background: linear-gradient(135deg, var(--bde-navy), var(--bde-navy-glow));
	color: #f7f8fa;
	padding: 40px 0;
	margin-bottom: 48px;
}

.bde-band-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	align-items: center;
}

/* Colours on the band are stated at component specificity (two classes) so no
   prose or theme rule can override them. Text sits on a gradient, so each
   value is checked against the *darker* end: headline 9.57:1, paragraph
   8.23:1, link 10.17:1, kicker 4.86:1. All clear AA. */
.bde-band .bde-kicker,
.bde-home .bde-band .bde-kicker {
	color: var(--bde-steel-light);
}

.bde-band h2,
.bde-home .bde-band h2 {
	font-size: 22px;
	line-height: 1.25;
	text-wrap: balance;
	margin: 0;
	color: #f7f8fa;
}

.bde-band p,
.bde-home .bde-band p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--bde-mist);
	margin: 0;
	max-width: none;
}

.bde-band a,
.bde-home .bde-band a {
	color: #ffffff;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Info pair
   --------------------------------------------------------------------------- */

.bde-info-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 11px;
	padding-bottom: 48px;
}

.bde-info-pair .bde-card {
	padding: 17px;
}

.bde-info-pair p {
	font-size: 13px;
	line-height: 1.6;
	color: var(--bde-slate);
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Page and guide bodies. Same type scale and rhythm as the home page.
   --------------------------------------------------------------------------- */

.wp-block-post-title {
	font-size: 36px;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-wrap: balance;
	margin: 0 0 8px;
}

/* Steel kicker above a page title, matching the home page section heads. */
.bde-page-kicker {
	display: block;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bde-steel-deep);
	margin-bottom: 11px;
}

/* Standfirst under a page title. */
.bde-standfirst {
	font-size: 15px;
	line-height: 1.6;
	color: var(--bde-slate);
	max-width: 48ch;
	margin: 0 0 8px;
}

/* One reading column. The measure lives on the container, not on individual
   elements: per-element max-widths get centred by the constrained layout,
   which leaves headings flush and paragraphs indented on the same page. */
.wp-block-post-content {
	font-size: 15px;
	line-height: 1.6;
	max-width: 46rem;
	margin-inline: auto;
}

/* Guides carry cards and panels, which read better slightly wider.
   `single-guide` is WordPress's own body class for the guide post type. */
.single-guide .wp-block-post-content {
	max-width: 50rem;
}

/* Every prose rule below is excluded from `.bde-home`, because the home page
   is built from components with their own colours. Without this guard a prose
   colour wins on specificity and, for example, paints the navy band's heading
   near-black on navy. Same failure mode as a prose measure collapsing the card
   grid: a generic descendant rule silently capturing a component. */
.wp-block-post-content p:not(.bde-home *):not([class*="bdg-"]) {
	color: var(--bde-slate);
}

.wp-block-post-content h2:not(.bde-home *):not([class*="bdg-"]) {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--bde-ink);
	margin: 40px 0 11px;
	text-wrap: balance;
}

.wp-block-post-content h3:not(.bde-home *):not([class*="bdg-"]) {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--bde-ink);
	margin: 28px 0 8px;
}

/* Prose lists only. Scoped with :not() so layout lists such as the card grid
   are never captured by the reading-measure rule: a grid that inherits a 68ch
   prose width silently collapses to two thirds of its container. */
.wp-block-post-content ul:not([class*="bde-"]):not([class*="bdg-"]):not(.bde-home *),
.wp-block-post-content ol:not([class*="bde-"]):not([class*="bdg-"]):not(.bde-home *) {
	color: var(--bde-slate);
	padding-left: 1.15em;
}

/* Layout lists carry no prose constraints, whatever the cascade tries. */
.bde-styles-grid,
.bde-guide-list,
.bde-facts,
.bde-levels {
	max-width: none;
	padding-left: 0;
	list-style: none;
}

.wp-block-post-content li {
	margin-bottom: 6px;
}

.wp-block-post-content strong {
	color: var(--bde-ink);
	font-weight: 500;
}

/* Terms line under a guide title. */
.wp-block-post-terms a {
	text-decoration: none;
}

/* --- prose callouts, shared across pages --- */

.bde-note-card {
	background: var(--bde-paper);
	border-radius: var(--bde-radius);
	box-shadow: var(--bde-shadow-sm);
	padding: 17px;
	margin: 24px 0;
}

.bde-note-card p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--bde-slate);
}

.bde-note-card p + p {
	margin-top: 8px;
}

/* Pale steel strip for the "read this first" line on a page. */
.bde-callout {
	background: var(--bde-mist-pale);
	border-left: 2px solid var(--bde-steel);
	border-radius: 0 var(--bde-radius) var(--bde-radius) 0;
	padding: 11px 14px;
	margin: 24px 0;
	font-size: 13px;
	line-height: 1.65;
	color: var(--bde-slate);
}

.bde-callout p {
	margin: 0;
	color: inherit;
	max-width: none;
}

/* --- guide index --- */

.bde-guide-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 11px;
	margin: 24px 0 48px;
	padding: 0;
	list-style: none;
}

/* --- two-up facts, used on About --- */

.bde-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 11px;
	margin: 24px 0;
	padding: 0;
	list-style: none;
}

.bde-facts li {
	background: var(--bde-paper);
	border-radius: var(--bde-radius);
	box-shadow: var(--bde-shadow-sm);
	padding: 14px 17px;
}

.bde-facts .bde-fact-value {
	display: block;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--bde-ink);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.bde-facts .bde-fact-label {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--bde-muted);
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 760px) {
	:root {
		--bde-pad: 20px;
	}

	.bde-hero,
	.bde-band-grid,
	.bde-info-pair {
		grid-template-columns: 1fr;
	}

	.bde-hero {
		padding: 40px 0 32px;
		gap: 24px;
	}

	.bde-hero h1 {
		font-size: 28px;
	}

	.bde-hero-img {
		height: 220px;
	}

	.bde-styles-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	a.bde-card {
		transition: none;
	}
}

/* Photo credits. Required by CC BY, kept quiet so it does not compete. */
.bde-credits {
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--bde-muted);
	margin: 0 0 17px;
	max-width: 68ch;
}

.bde-credits a {
	color: var(--bde-muted);
	text-underline-offset: 3px;
}

.bde-credits a:hover {
	color: var(--bde-steel-deep);
}