/*
Theme Name: BJJ Dissection
Theme URI: https://bjjdissection.org
Author: bjjdissection.org
Description: Accessible block theme for bjjdissection.org — plain-language information about cervical arterial dissection in grappling, plus an anonymized case registry. Modernist visual system: Archivo, flat ink-on-ground, 2px rules, zero radius, red reserved for alerts and the primary action.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.2
Version: 0.5.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bjjd
*/

/* ────────────────────────────────────────────────────────────────────
   Modernist layer. Structure is drawn with 2px rules; red is spent on
   alerts, the primary action, and small square marks — nothing else.
   ──────────────────────────────────────────────────────────────────── */

:root {
	--bjjd-divider: color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent);
	--bjjd-ink-72: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, transparent);
	--bjjd-ink-82: color-mix(in srgb, var(--wp--preset--color--contrast) 82%, transparent);
}

/* Underline links inside running text so color is never the only cue. */
main p a,
main li a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Header ── */
.bjjd-header {
	border-bottom: 2px solid var(--bjjd-divider);
}

.bjjd-header .wp-block-site-title a,
.bjjd-header .bjjd-brand a {
	font-weight: 800;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.bjjd-header .bjjd-brand {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	margin: 0;
}

/* The design's red ".org" in the brand. */
.bjjd-brand__tld {
	color: var(--wp--preset--color--accent);
}

.bjjd-header .wp-block-navigation a {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.bjjd-header .wp-block-navigation a:hover,
.bjjd-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--accent);
}

/* ── Text measure on the wide canvas ──
   The layout canvas is 72.5rem (the mock's 1160px container): rules,
   banners, grids, and index rows span it, while running text stays at
   a readable measure like the mock's 58–62ch caps. Classed elements
   (hero-sub, kicker, alert, loads…) manage their own width. */

/* h1.wp-block-heading: WP's constrained-layout child rule carries a
   class, so a bare element selector loses the cascade to it. */
main h1.wp-block-heading {
	max-width: 18ch;
}

main p:not([class]) {
	max-width: 62ch;
}

.bjjd-alert p:not([class]),
.bjjd-flex-between p:not([class]) {
	max-width: none;
}

/* Left-pin capped text. WP's constrained layout centers width-capped
   children with margin auto !important; this design is left-aligned
   throughout. The formula lands the element at the canvas's left edge
   when its container is wider than the canvas, and at the container's
   own left edge everywhere else (nested columns, cells, sections). */
main h1.wp-block-heading,
main p:not([class]),
main .bjjd-hero-sub,
main .bjjd-muted,
main .bjjd-article-title {
	margin-left: max(calc((100% - 72.5rem) / 2), 0px) !important;
}

/* ── Hero ── */
.bjjd-hero-sub {
	color: var(--bjjd-ink-82);
	font-size: 1.1875rem;
	line-height: 1.6;
	max-width: 58ch;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--bjjd-divider);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: transparent;
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* ── Ruled sections ── */
.bjjd-section {
	border-top: 2px solid var(--bjjd-divider);
	margin-top: 3rem;
	padding-top: 2.75rem;
}

.bjjd-flex-between {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
}

/* ── Kicker (small uppercase label above a title) ── */
.bjjd-kicker {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* ── Rules ── */
.bjjd-rule {
	height: 2px;
	border: 0;
	margin: 0;
	background: var(--bjjd-divider);
}

/* ── Square-marker lists (the system's red mark) ── */
.bjjd-squares {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bjjd-squares li {
	margin: 0 0 0.6rem;
	padding-left: 1.5rem;
	position: relative;
}

.bjjd-squares li::before {
	background: var(--wp--preset--color--accent);
	content: "";
	height: 10px;
	left: 0;
	position: absolute;
	top: 0.45em;
	width: 10px;
}

/* ── Red-flags emergency banner ── */
.bjjd-alert {
	border: 2px solid var(--wp--preset--color--accent);
}

.bjjd-alert__head {
	background: var(--wp--preset--color--accent);
	padding: 0.6rem 1.5rem;
}

.bjjd-alert__head h2,
.bjjd-alert__head p {
	color: #fff;
	font-size: 0.875rem;
	margin: 0;
}

.bjjd-alert__head h2 {
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bjjd-alert__body {
	padding: 1.5rem;
}

.bjjd-alert__body .bjjd-squares {
	columns: 3 16rem;
	column-gap: 2.75rem;
}

.bjjd-alert__body .bjjd-squares li {
	break-inside: avoid;
}

.bjjd-alert__act {
	border-top: 2px solid var(--wp--preset--color--alert-tint);
	margin-top: 1.35rem;
	padding-top: 1.25rem;
}

.bjjd-alert__act strong {
	color: var(--wp--preset--color--primary);
}

/* ── Medical disclaimer / quiet note ── */
.bjjd-note {
	border-top: 2px solid var(--bjjd-divider);
	padding-top: 1.5rem;
}

/* A note is an aside: its heading sits at the ruled-row title size
   (1.25rem), not at the 2.25rem section scale, so it never outweighs
   the actual page content around it. */
.bjjd-note h2 {
	font-size: 1.25rem;
	margin-top: 0;
}

.bjjd-note strong {
	color: var(--wp--preset--color--primary);
}

/* ── Start-here index (numbered ruled rows, bold Archivo links) ── */
.bjjd-start-list {
	border-top: 2px solid var(--bjjd-divider);
	counter-reset: bjjd-start;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bjjd-start-list li {
	align-items: baseline;
	border-bottom: 2px solid var(--bjjd-divider);
	color: var(--bjjd-ink-72);
	counter-increment: bjjd-start;
	display: grid;
	gap: 0.75rem clamp(1.25rem, 4vw, 4rem);
	grid-template-columns: minmax(40px, 110px) minmax(0, 340px) minmax(0, 1fr);
	margin: 0;
	padding: 1.55rem 0;
}

.bjjd-start-list li::before {
	color: var(--wp--preset--color--contrast);
	content: "0" counter(bjjd-start);
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
}

.bjjd-start-list li a {
	color: var(--wp--preset--color--contrast);
	display: inline-block;
	font-size: 1.3125rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.bjjd-start-list li a:hover {
	color: var(--wp--preset--color--accent);
}

/* ── Archive / query lists as ruled rows ── */
.bjjd-list {
	border-top: 2px solid var(--bjjd-divider);
}

/* When the filter band sits directly above the list, its bottom rule
   already draws the line — don't double it with the list's top rule. */
form.bjjd-filters + .wp-block-query .bjjd-list {
	border-top: 0;
}

.bjjd-list .wp-block-post {
	border-bottom: 2px solid var(--bjjd-divider);
	margin: 0;
	padding: 1.35rem 0;
}

.bjjd-list .wp-block-post-title {
	font-size: 1.25rem;
	margin: 0 0 0.35rem;
}

.bjjd-list .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.bjjd-list .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

.bjjd-list .wp-block-post-excerpt,
.bjjd-list .taxonomy-mechanism,
.bjjd-list .taxonomy-artery_segment,
.bjjd-list .taxonomy-outcome {
	color: var(--bjjd-ink-72);
	font-size: 0.9375rem;
}

/* ── Injury-type cards (bordered grid) ── */
.bjjd-cards {
	border: 0;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}


/* ── Labeled content rows (heading column / copy column) ── */
.wp-block-columns.bjjd-row {
	border-top: 2px solid var(--bjjd-divider);
	margin-top: 2.5rem;
	padding-top: 2.4rem;
}

.bjjd-row h2 {
	font-size: 1.5rem;
	margin: 0;
}

/* ── Pull-quote (what to say in the ED) ── */
.bjjd-quote {
	background: var(--wp--preset--color--tint);
	border-left: 4px solid var(--wp--preset--color--contrast);
	font-size: 1.1875rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.55;
	margin: 1.4rem 0;
	padding: 1.4rem 1.6rem;
}

/* ── Vertebral segment grid (V1–V4) ── */

/* Deliberately never auto-fit: 2×2 inside the text column, one row of
   four only when the wide breakout is active — a 3+1 wrap reads as
   broken, not responsive. Internal lines come from 1px gaps over the
   divider-colored grid background, so cell borders never stack against
   the outer 2px frame as doubled rules. */
.bjjd-seg-grid {
	background: var(--bjjd-divider);
	border: 2px solid var(--bjjd-divider);
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px) {

	.bjjd-seg-grid {
		grid-template-columns: 1fr;
	}
}

/* Break the table out of the 46rem text column to the wide size
   (72.5rem — the mock's 1160px container) so all four segments sit in
   one row, centered under the text column. Only at widths where that
   genuinely fits, to avoid 100vw scrollbar-math clipping. */
@media (min-width: 1360px) {

	/* 1360: the 72.5rem table plus the root side padding must genuinely
	   fit, or the breakout overflows the viewport.
	   !important: WP's constrained layout sets margin-left: auto
	   !important on children via a zero-specificity :where() rule; this
	   out-ranks it to pull the wide table left of the text column. */
	.bjjd-seg-grid.alignwide {
		grid-template-columns: repeat(4, 1fr);
		margin-left: calc((72.5rem - 100%) / -2) !important;
		width: 72.5rem;
	}
}

/* WP's flow layout adds margin-block-start to every sibling after the
   first; inside a grid that shoves cells 2+ down within their row.
   Grid gaps own the spacing here. */
.bjjd-seg-grid > .wp-block-group,
.bjjd-grid3 > .wp-block-group {
	margin-block-start: 0;
}

.bjjd-seg {
	background: var(--wp--preset--color--base);
	border: 0;
	padding: 1.4rem;
}

.bjjd-seg h3 {
	color: var(--wp--preset--color--accent);
	font-size: 1.625rem;
	margin: 0 0 0.6rem;
}

.bjjd-seg p {
	color: var(--bjjd-ink-72);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

/* ── Case-list taxonomy tags ── */
.bjjd-list .wp-block-post-terms {
	border: 1px solid var(--bjjd-divider);
	display: inline-block;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	margin: 0.35rem 0.4rem 0 0;
	padding: 0.15rem 0.55rem;
}

.bjjd-list .wp-block-post-terms a {
	color: var(--bjjd-ink-72);
	text-decoration: none;
}

/* ── Injury-type card anatomy (static cards with kickers) ── */
.bjjd-cards a {
	border: 2px solid var(--bjjd-divider);
	color: var(--wp--preset--color--contrast);
	display: block;
	padding: 1.75rem;
	text-decoration: none;
	transition: border-color 120ms linear;
}

.bjjd-cards a:hover {
	border-color: var(--wp--preset--color--accent);
}

.bjjd-cards__kicker {
	color: var(--wp--preset--color--primary);
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin-bottom: 0.75rem;
	text-transform: uppercase;
}

.bjjd-cards__title {
	display: block;
	font-size: 1.3125rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 0.6rem;
}

.bjjd-cards__desc {
	color: var(--bjjd-ink-72);
	display: block;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* ── Muted footnote text ── */
.bjjd-muted {
	color: var(--bjjd-ink-72);
	font-size: 0.9375rem;
	line-height: 1.66;
	max-width: 62ch;
}

/* ── Closing CTA band ── */
.bjjd-band {
	align-items: center;
	border-top: 2px solid var(--bjjd-divider);
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	justify-content: space-between;
	margin-top: 2.5rem;
	padding-top: 2rem;
}

.bjjd-band p {
	font-size: 1.3125rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0;
}

/* ── Editorial article loop (injury-types page) ── */
.bjjd-articles .wp-block-post {
	border-top: 2px solid var(--bjjd-divider);
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

/* The numbered kicker rendered from the post excerpt, above the title. */
.bjjd-loop-kicker p {
	color: var(--wp--preset--color--primary);
	font-size: 13px;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.bjjd-article-title {
	margin: 0.9rem 0 1.5rem;
	max-width: 24ch;
}

/* ── Three-up subsection grid ── */
.bjjd-grid3 {
	display: grid;
	gap: 2rem clamp(1.75rem, 4vw, 4rem);
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.bjjd-grid3 h3 {
	font-size: 1.1875rem;
	margin: 0 0 0.85rem;
}

.bjjd-grid3 p {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, transparent);
	font-size: 0.96875rem;
	line-height: 1.68;
}

/* ── Load-pattern rows (ruled definition list) ── */
.bjjd-loads {
	border-top: 2px solid var(--bjjd-divider);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bjjd-loads li {
	border-bottom: 2px solid var(--bjjd-divider);
	display: grid;
	gap: 0.5rem clamp(1.25rem, 4vw, 4rem);
	grid-template-columns: minmax(0, 18.75rem) minmax(0, 1fr);
	margin: 0;
	padding: 1.1rem 0;
}

.bjjd-loads li strong {
	align-items: baseline;
	display: flex;
	font-size: 1.03125rem;
	font-weight: 800;
	gap: 0.75rem;
}

.bjjd-loads li strong::before {
	background: var(--wp--preset--color--accent);
	content: "";
	flex: none;
	height: 10px;
	transform: translateY(1px);
	width: 10px;
}

.bjjd-loads__copy {
	color: var(--bjjd-ink-72);
	font-size: 0.9375rem;
	line-height: 1.66;
}

@media (max-width: 640px) {

	.bjjd-loads li {
		grid-template-columns: 1fr;
	}
}

/* ── Footer ── */
.bjjd-footer {
	border-top: 2px solid var(--bjjd-divider);
}

.bjjd-footer p {
	color: var(--bjjd-ink-72);
}

/* ── Buttons: flat, zero radius, flush-left labels (Modernist) ── */
.wp-element-button,
.wp-block-button__link {
	border-radius: 0;
	justify-content: flex-start;
	text-align: left;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
}

/* ── Screen-reader-only text (also used by the core skip link) ── */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	clip-path: none;
	color: var(--wp--preset--color--primary);
	display: block;
	font-size: 1rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Visible focus for every interactive element (WCAG 2.4.7) — the
   system's 2px accent ring, never the browser default. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

::selection {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
}