/**
 * Better — design system stylesheet.
 *
 * Colour, type family, and spacing values live in theme.json and reach this
 * file as `var(--wp--preset--*)` custom properties; this file adds the
 * component classes, layout primitives, and interaction states theme.json
 * settings can't express on their own. Zero border radius and zero shadows
 * are deliberate throughout — do not add either back in.
 */

/* -------------------------------------------------------------------- */
/* Global resets & rules                                                 */
/* -------------------------------------------------------------------- */

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	overflow-x: hidden;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

h1, h2, h3, h4, h5, h6, p, blockquote, li, dt, dd {
	text-wrap: pretty;
}

a {
	text-decoration: none;
}

/* Visible keyboard focus everywhere, including inside components that
   otherwise suppress the default outline. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--connect);
	outline-offset: 2px;
}

.better-skip-link {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 1000;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: 12px 18px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: top 0.15s ease;
}
.better-skip-link:focus {
	top: 12px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------- */
/* Type utilities                                                        */
/* -------------------------------------------------------------------- */

.better-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mute);
}

.better-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mute);
}

.better-sidebar-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sidebar-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mute-2);
}

.better-wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 30px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
}

.better-lede {
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-2);
}

.better-tagline {
	font-family: var(--wp--preset--font-family--body);
	font-style: italic;
	font-weight: 300;
	font-size: var(--wp--preset--font-size--tagline);
	line-height: 1.4;
	max-width: 34ch;
}

.better-note {
	font-family: var(--wp--preset--font-family--body);
	font-style: italic;
	font-size: 19px;
	line-height: 1.5;
}

.better-stat {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--stat-figure);
	line-height: 1;
}

.better-h-page-title {
	font-size: var(--wp--preset--font-size--page-title);
	line-height: 0.86;
	letter-spacing: -0.015em;
}

.better-h-hero-title {
	font-size: var(--wp--preset--font-size--hero-title);
	line-height: 0.84;
	letter-spacing: -0.02em;
}

.better-h-section {
	font-size: var(--wp--preset--font-size--section-heading);
	letter-spacing: 0.06em;
}

.better-h-sub {
	font-size: var(--wp--preset--font-size--sub-heading);
	letter-spacing: 0.02em;
	line-height: 1;
}

.better-h-list-row {
	font-size: var(--wp--preset--font-size--list-row-title);
	line-height: 1.05;
	letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------- */
/* Layout primitives                                                     */
/* -------------------------------------------------------------------- */

.better-shell {
	max-width: 1500px;
	margin-inline: auto;
	padding-inline: 40px;
}
@media (max-width: 640px) {
	.better-shell { padding-inline: 20px; }
}

.better-section {
	border-bottom: 1px solid var(--wp--preset--color--ink);
	padding-block: 40px;
	padding-inline: 40px;
}
@media (max-width: 640px) {
	.better-section { padding-inline: 20px; padding-block: 26px; }
}

.better-section--tight { padding-block: 22px 18px; }
.better-section--hero { padding-block: 72px 92px; }
@media (max-width: 640px) {
	.better-section--hero { padding-block: 48px 56px; }
}

.better-grid-auto {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 340px ), 1fr ) );
}

.better-hairline-top { border-top: 1px solid var(--wp--preset--color--ink); }
.better-hairline-bottom { border-bottom: 1px solid var(--wp--preset--color--ink); }

/* -------------------------------------------------------------------- */
/* Header & primary navigation                                           */
/* -------------------------------------------------------------------- */

.better-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 22px 40px;
	border-bottom: 1px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
}
@media (max-width: 640px) {
	.better-header { padding: 0 14px; height: 56px; align-items: center; }
}

.better-header__brand {
	color: var(--wp--preset--color--ink);
}

.better-nav-practices {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--nav-item);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
.better-nav-practices a[aria-current="page"] {
	border-bottom: 2px solid currentColor;
}

.better-nav-utility {
	display: flex;
	gap: 20px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mute);
}
.better-nav-utility a[aria-current="page"] {
	color: var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--preset--color--ink);
}

.better-header__mobile-actions,
.better-menu-button {
	display: none;
}

@media (max-width: 900px) {
	.better-nav-practices,
	.better-nav-utility {
		display: none;
	}
	.better-header__mobile-actions {
		display: flex;
		gap: 4px;
	}
	.better-menu-button,
	.better-search-button {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 0;
		cursor: pointer;
		color: var(--wp--preset--color--ink);
	}
	.better-menu-button__bar {
		display: block;
		width: 20px;
		height: 1.5px;
		background: currentColor;
	}
	.better-menu-button {
		flex-direction: column;
		gap: 5px;
	}
}

/* -------------------------------------------------------------------- */
/* Mobile navigation drawer (native <dialog>)                            */
/* -------------------------------------------------------------------- */

.better-drawer {
	padding: 0;
	border: 0;
	width: min(420px, 100%);
	height: 100%;
	max-height: 100%;
	max-width: 100%;
	margin: 0 0 0 auto;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}
.better-drawer::backdrop {
	background: rgba( 23, 21, 15, 0.42 );
}
.better-drawer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 14px;
	height: 56px;
	border-bottom: 1px solid var(--wp--preset--color--ink);
}
.better-drawer__search {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 60px;
	padding: 0 18px;
	border-bottom: 1px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper-alt);
	color: var(--wp--preset--color--mute-2);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
.better-drawer__body {
	overflow-y: auto;
	height: calc( 100% - 56px );
}
.better-drawer__practices {
	border-bottom: 1px solid var(--wp--preset--color--ink);
}
.better-drawer__practice-row {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 76px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	color: var(--row-color, inherit);
	background: var(--row-tint, transparent);
}
.better-drawer__practice-index {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	opacity: 0.75;
}
.better-drawer__practice-name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 46px;
	line-height: 0.86;
	text-transform: uppercase;
}
.better-drawer__practice-tagline {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-style: italic;
	font-size: 16px;
	line-height: 1.35;
	color: var(--wp--preset--color--ink-4);
}
.better-drawer__themes {
	padding: 20px 18px 22px;
	border-bottom: 1px solid var(--wp--preset--color--ink);
}
.better-drawer__utility a {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 0 18px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 26px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.better-drawer__foot {
	padding: 26px 18px 30px;
	background: var(--wp--preset--color--paper-alt);
	border-top: 1px solid var(--wp--preset--color--ink);
}

@media (min-width: 901px) {
	.better-drawer,
	.better-menu-button,
	.better-header__mobile-actions {
		display: none;
	}
}

/* -------------------------------------------------------------------- */
/* Footer                                                                */
/* -------------------------------------------------------------------- */

.better-footer {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 40px;
	padding: 52px 40px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	line-height: 2;
	color: var(--wp--preset--color--mute);
}
.better-footer__col-title {
	display: block;
	color: var(--wp--preset--color--ink);
}
.better-footer a {
	display: block;
}
@media (max-width: 640px) {
	.better-footer {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 28px;
		padding: 36px 20px;
	}
}

/* -------------------------------------------------------------------- */
/* Badges, chips, buttons                                                */
/* -------------------------------------------------------------------- */

.better-badge {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 9px;
	color: var(--wp--preset--color--on-dark);
	background: var(--wp--preset--color--ink);
}

.better-chip {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 8px;
	border: 1px solid var(--wp--preset--color--field);
	color: var(--wp--preset--color--mute);
}

.better-chip-btn {
	cursor: pointer;
	appearance: none;
	font: inherit;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	min-height: 40px;
	padding: 0 13px;
	border: 1px solid var(--wp--preset--color--field);
	background: transparent;
	color: var(--wp--preset--color--ink);
}
.better-chip-btn[aria-pressed="true"],
.better-chip-btn:checked + label,
.better-chip-btn.is-active {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}
.better-chip-btn:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-dark-2);
}

.better-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: pointer;
	appearance: none;
	min-height: 48px;
	padding: 14px 28px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 1.5px solid var(--wp--preset--color--ink);
	background: transparent;
	color: var(--wp--preset--color--ink);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.better-btn:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}
.better-btn--solid {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}
.better-btn--solid:hover {
	background: var(--wp--preset--color--connect);
	color: var(--wp--preset--color--on-dark);
}
.better-btn--on-dark {
	border-color: var(--wp--preset--color--on-dark);
	color: var(--wp--preset--color--on-dark);
}
.better-btn--on-dark:hover {
	background: var(--wp--preset--color--on-dark);
	color: var(--wp--preset--color--ink);
}
.better-btn--underline {
	display: inline-flex;
	gap: 10px;
	border: 0;
	border-bottom: 1.5px solid currentColor;
	padding: 0 0 5px;
	background: none;
	min-height: 0;
}
.better-btn--underline:hover {
	background: none;
	color: var(--wp--preset--color--connect);
}

/* -------------------------------------------------------------------- */
/* Cards / article previews                                              */
/* -------------------------------------------------------------------- */

.better-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 26px 32px;
}
.better-card__media {
	height: 150px;
	background: repeating-linear-gradient( 115deg, var(--wp--preset--color--rule) 0 12px, var(--wp--preset--color--paper-alt) 12px 24px );
}
.better-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.better-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 28px;
	line-height: 1;
	text-transform: uppercase;
	margin: 0;
}
.better-card__dek {
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-4);
	margin: 0;
}

.better-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 24px;
	align-items: flex-start;
	padding: 20px 40px 22px;
	border-bottom: 1px solid var(--wp--preset--color--rule-2);
	border-left: 5px solid var(--row-color, transparent);
}
.better-row:hover {
	background: var(--wp--preset--color--paper-alt);
}
.better-row__practice {
	flex: 0 0 auto;
	width: 132px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--row-color, var(--wp--preset--color--ink));
	padding-top: 5px;
}
.better-row__body {
	flex: 1 1 320px;
	min-width: min( 100%, 260px );
}
.better-row__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp( 26px, 2.4vw, 34px );
	line-height: 1;
	text-transform: uppercase;
	margin: 0 0 7px;
}
.better-row__dek {
	font-size: 17px;
	line-height: 1.45;
	margin: 0;
	max-width: 62ch;
	color: var(--wp--preset--color--ink-4);
}
.better-row__tags {
	flex: 0 1 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 4px;
}
.better-row__aside {
	flex: 0 0 auto;
	margin-left: auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mute-2);
	text-align: right;
	line-height: 1.8;
	padding-top: 5px;
}
@media (max-width: 640px) {
	.better-row { padding: 16px 20px 18px; }
}

/* -------------------------------------------------------------------- */
/* Image placeholder (design's diagonal stripe treatment)                */
/* -------------------------------------------------------------------- */

.better-img-placeholder {
	height: 100%;
	min-height: 120px;
	width: 100%;
	background: repeating-linear-gradient( 115deg, var(--wp--preset--color--rule) 0 14px, var(--wp--preset--color--paper-alt) 14px 28px );
	display: flex;
	align-items: flex-end;
	padding: 16px;
}
.better-img-placeholder span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mute-2);
	background: var(--wp--preset--color--paper);
	padding: 5px 9px;
}

/* -------------------------------------------------------------------- */
/* Disclosure / accordion (native <details>, no JS)                      */
/* -------------------------------------------------------------------- */

.better-disclosure > summary {
	cursor: pointer;
	list-style: none;
}
.better-disclosure > summary::-webkit-details-marker {
	display: none;
}
.better-disclosure__icon {
	font-family: var(--wp--preset--font-family--display);
	font-size: 34px;
	line-height: 1;
	transition: transform 0.2s ease;
}
.better-disclosure[open] > summary .better-disclosure__icon {
	transform: rotate( 45deg );
}

.better-practice-row > summary {
	display: grid;
	grid-template-columns: 64px minmax( 0, 1fr ) minmax( 0, 1fr ) 48px;
	align-items: center;
	gap: 24px;
	padding: 30px 40px;
	border-top: 1px solid var(--wp--preset--color--ink);
}
.better-practice-row__index {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
}
.better-practice-row__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp( 52px, 7.2vw, 120px );
	line-height: 0.85;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}
.better-practice-row__tagline {
	font-family: var(--wp--preset--font-family--body);
	font-style: italic;
	font-size: 22px;
}
.better-practice-row__panel {
	display: grid;
	grid-template-columns: 64px minmax( 0, 1.1fr ) minmax( 0, 1fr );
	gap: 24px;
	padding: 0 40px 46px;
	background: var(--panel-tint, var(--wp--preset--color--paper-alt) );
}
@media (max-width: 900px) {
	.better-practice-row > summary,
	.better-practice-row__panel {
		grid-template-columns: 1fr;
		padding-inline: 20px;
	}
	.better-practice-row__panel { padding-bottom: 30px; }
}

.better-sidebar-disclosure {
	position: sticky;
	top: 32px;
}
@media (max-width: 1000px) {
	.better-sidebar-disclosure { position: static; }
}

/* -------------------------------------------------------------------- */
/* Forms                                                                 */
/* -------------------------------------------------------------------- */

.better-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.better-field__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mute-2);
}
.better-field input[type="text"],
.better-field input[type="email"],
.better-field input[type="url"],
.better-field input[type="search"] {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--field);
	padding: 8px 0;
	font-size: 19px;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--ink);
}
.better-field textarea {
	background: var(--wp--preset--color--paper-alt);
	border: 1px solid var(--wp--preset--color--rule-2);
	padding: 14px 16px;
	font-size: 19px;
	font-family: var(--wp--preset--font-family--body);
	line-height: 1.6;
	resize: vertical;
	color: var(--wp--preset--color--ink);
}
.better-field input:focus,
.better-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--connect);
}
::placeholder {
	color: var(--wp--preset--color--mute-3);
}

/* Honeypot: hidden from sighted and pointer users, but not display:none
   (screen readers should still skip it via aria-hidden, not layout). */
.better-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------------------- */
/* Legal template                                                        */
/* -------------------------------------------------------------------- */

.better-legal-toc {
	counter-reset: better-toc;
}
.better-legal-section {
	counter-increment: better-toc;
	padding: 34px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.better-legal-section__number::before {
	content: counter( better-toc, decimal-leading-zero );
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--explore);
}
.better-legal-note {
	border-left: 2px solid var(--wp--preset--color--explore);
	background: var(--wp--preset--color--paper-warm);
	padding: 18px 22px;
	margin-top: 6px;
}

/* -------------------------------------------------------------------- */
/* Map archetype (theme pages)                                           */
/* -------------------------------------------------------------------- */

.better-map-wrap {
	display: grid;
	grid-template-columns: 400px minmax( 0, 1fr );
	border-top: 1px solid var(--wp--preset--color--ink);
}
.better-map-list {
	border-right: 1px solid var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
}
.better-map-scroller {
	max-height: 612px;
	overflow-y: auto;
}
.better-place-row {
	width: 100%;
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--rule-2);
	padding: 18px 24px 20px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.better-place-row:hover {
	background: var(--wp--preset--color--paper-alt);
}
.better-place-row[aria-current="true"] {
	background: var(--wp--preset--color--explore-tint);
	box-shadow: inset 4px 0 0 var(--wp--preset--color--explore);
}
.better-map-canvas {
	position: relative;
}
#better-map {
	height: 660px;
	width: 100%;
	background: var(--wp--preset--color--stripe, #E4DFD2);
}
.leaflet-container {
	background: #E4DFD2;
	font-family: var(--wp--preset--font-family--mono);
}
.better-pin {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 500;
	color: var(--wp--preset--color--on-dark);
	background: var(--wp--preset--color--explore);
	border: 1.5px solid var(--wp--preset--color--on-dark);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba( 23, 21, 15, 0.4 );
}
.better-pin.is-selected {
	background: var(--wp--preset--color--ink);
	box-shadow: 0 0 0 5px rgba( 23, 21, 15, 0.18 ), 0 1px 4px rgba( 23, 21, 15, 0.4 );
}
.better-place-detail {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 500;
	width: min( 390px, calc( 100% - 40px ) );
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--ink);
}
.better-stars {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--explore);
}
.better-stars .is-off {
	color: var(--wp--preset--color--field);
}

.better-map-view-toggle {
	display: none;
}
@media (max-width: 1000px) {
	.better-map-wrap { grid-template-columns: minmax( 0, 1fr ); }
	#better-map { height: 340px; }
	.better-map-scroller { max-height: 420px; }
	.better-map-view-toggle {
		display: grid;
		grid-template-columns: 1fr 1fr;
		border-top: 1px solid var(--wp--preset--color--ink);
		border-bottom: 1px solid var(--wp--preset--color--ink);
	}
	.better-map-view-toggle button {
		cursor: pointer;
		appearance: none;
		border: 0;
		height: 48px;
		background: transparent;
		font-family: var(--wp--preset--font-family--mono);
		font-size: 11.5px;
		letter-spacing: 0.13em;
		text-transform: uppercase;
	}
	.better-map-view-toggle button:first-child { border-right: 1px solid var(--wp--preset--color--ink); }
	.better-map-view-toggle button[aria-pressed="true"] {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--paper);
	}
	[data-map-view="map"] .better-map-list,
	[data-map-view="list"] .better-map-canvas {
		display: none;
	}
}

/* -------------------------------------------------------------------- */
/* Radio-driven picker + reveal panel (pure CSS, no JS)                  */
/*                                                                        */
/* Used by both the Contact reason picker and the Start Here "which have */
/* you been avoiding" picker: a row of label-chips bound to radios, each  */
/* revealing its own panel via a sibling combinator. Every consumer on a  */
/* page reuses the same five ids (picker-opt-0..4), which is safe because */
/* only one such picker ever appears per page.                           */
/* -------------------------------------------------------------------- */

/* Radios, labels, and the panels container below are all direct children
   of .better-picker (flat, not nested) so the `~` sibling combinator below
   can reach from a checked radio to .better-picker-panels. */
.better-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.better-picker-panels {
	flex-basis: 100%;
}
.better-picker input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.better-picker label {
	cursor: pointer;
}
.better-picker input:checked + label {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}
.better-picker input:focus-visible + label {
	outline: 2px solid var(--wp--preset--color--connect);
	outline-offset: 2px;
}

.better-picker-panel {
	display: none;
}
#picker-opt-0:checked ~ .better-picker-panels .better-picker-panel[data-option="0"],
#picker-opt-1:checked ~ .better-picker-panels .better-picker-panel[data-option="1"],
#picker-opt-2:checked ~ .better-picker-panels .better-picker-panel[data-option="2"],
#picker-opt-3:checked ~ .better-picker-panels .better-picker-panel[data-option="3"],
#picker-opt-4:checked ~ .better-picker-panels .better-picker-panel[data-option="4"] {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* -------------------------------------------------------------------- */
/* Filter rail / drawer (All Ideas, Practice archive, Theme review)      */
/* -------------------------------------------------------------------- */

/* All Ideas' List/Grid toggle re-lays out the same .better-row items
   rather than swapping markup — one set of rows, two presentations. */
[data-view="grid"] > [data-filter-target] {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
}
[data-view="grid"] .better-row {
	flex-direction: column;
	align-items: flex-start;
	border-left: 0;
	border-top: 4px solid var(--row-color, transparent);
	border-right: 1px solid var(--wp--preset--color--rule-2);
	gap: 10px;
}
[data-view="grid"] .better-row__practice {
	width: auto;
	padding-top: 0;
	color: var(--row-color, inherit);
}
[data-view="grid"] .better-row__aside {
	margin-left: 0;
	text-align: left;
	flex-direction: row;
	gap: 10px;
}
[data-view="grid"] .better-row__aside > div {
	display: inline;
}

.better-filter-rail {
	border-right: 1px solid var(--wp--preset--color--ink);
}
.better-filter-group {
	padding: 22px 26px 24px;
	border-bottom: 1px solid var(--wp--preset--color--rule-2);
}
[hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------- */
/* Fixed-ratio grids that need an explicit single-column breakpoint      */
/*                                                                        */
/* `minmax(0,Nfr)` tracks already shrink safely (no horizontal overflow) */
/* but stay side-by-side at any width, which cramps text instead of      */
/* stacking it the way the design's mobile spec calls for. Auto-fit      */
/* grids elsewhere (`repeat(auto-fit,minmax(min(100%,Npx),1fr))`) don't  */
/* need this — they already collapse on their own.                      */
/* -------------------------------------------------------------------- */

@media (max-width: 768px) {
	.better-collapse-md {
		grid-template-columns: 1fr !important;
	}
	.better-collapse-md .better-filter-rail {
		position: static !important;
	}
}
@media (max-width: 1024px) {
	.better-collapse-lg {
		grid-template-columns: 1fr !important;
	}
	.better-collapse-lg > :last-child:empty {
		display: none;
	}
}

/* -------------------------------------------------------------------- */
/* Responsive band padding                                               */
/* -------------------------------------------------------------------- */

@media (max-width: 640px) {
	.better-h-hero-title,
	.better-h-page-title {
		line-height: 0.9;
	}
}