/*
 * BlockStitch — the CSS theme.json cannot express.
 *
 * Everything here is either a block style variation, a small utility the
 * block patterns rely on, or print. Colours and type come from theme.json
 * presets, so changing the palette there changes it here too.
 */

:root {
	--bs-bevel-w: var(--wp--custom--bevel--width, 3px);
	--bs-ink: var(--wp--preset--color--obsidian, #1E1B16);
	--bs-paper: var(--wp--preset--color--paper, #FFFCF2);
	--bs-rule: var(--wp--preset--color--rule, #D6CFBD);
	--bs-stone: var(--wp--preset--color--stone, #554F44);
}

/* ---------------------------------------------------------------------------
 * Bevelled surfaces — the one gesture the whole theme is built on.
 * Light on the top and left, dark on the bottom and right.
 * ------------------------------------------------------------------------ */

.wp-block-group.is-style-bevel {
	background-color: var(--bs-paper);
	border: var(--bs-bevel-w) solid var(--bs-ink);
	border-radius: 0;
	box-shadow: 8px 8px 0 rgba(30, 27, 22, 0.10);
	padding: var(--wp--preset--spacing--40, 1.625rem);
}

.wp-block-group.is-style-inset {
	background-color: var(--wp--preset--color--clay, #E9E2CF);
	border-radius: 0;
	border-top: var(--bs-bevel-w) solid var(--wp--custom--bevel--dark, #B8AF99);
	border-left: var(--bs-bevel-w) solid var(--wp--custom--bevel--dark, #B8AF99);
	border-right: var(--bs-bevel-w) solid var(--wp--custom--bevel--light, #FFFFFF);
	border-bottom: var(--bs-bevel-w) solid var(--wp--custom--bevel--light, #FFFFFF);
	padding: var(--wp--preset--spacing--40, 1.625rem);
}

.wp-block-image.is-style-framed img {
	border: var(--bs-bevel-w) solid var(--bs-ink);
	border-radius: 0;
	box-shadow: 10px 10px 0 rgba(30, 27, 22, 0.12);
	display: block;
}

/* Secondary button — a raised paper key rather than a green one. */
.wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: var(--bs-paper);
	color: var(--bs-ink);
	border-top-color: var(--wp--custom--bevel--light, #FFFFFF);
	border-left-color: var(--wp--custom--bevel--light, #FFFFFF);
	border-right-color: var(--wp--custom--bevel--dark, #B8AF99);
	border-bottom-color: var(--wp--custom--bevel--dark, #B8AF99);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background-color: #F2ECDC;
}

/* Every button presses in when you push it. */
.wp-block-button__link:active {
	border-top-color: var(--wp--custom--bevel--dark, #B8AF99);
	border-left-color: var(--wp--custom--bevel--dark, #B8AF99);
	border-right-color: var(--wp--custom--bevel--light, #FFFFFF);
	border-bottom-color: var(--wp--custom--bevel--light, #FFFFFF);
}

/* ---------------------------------------------------------------------------
 * Reading
 * ------------------------------------------------------------------------ */

.wp-block-paragraph.is-style-lead,
p.is-style-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	font-weight: 500;
}

/* Square bullets, green markers. Cheap, and very on-theme. */
.wp-block-list {
	list-style: square;
}

.wp-block-list li::marker {
	color: var(--wp--preset--color--grass, #4E7A34);
}

.wp-block-list li + li {
	margin-top: 0.5rem;
}

/* Abbreviations carry their expansion — ch, sc, dc, sl st. */
abbr[title] {
	text-decoration: underline dotted #A79E8B;
	text-underline-offset: 4px;
	cursor: help;
}

/* ---------------------------------------------------------------------------
 * Small utilities the block patterns use
 * ------------------------------------------------------------------------ */

.bs-label {
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bs-stone);
}

.bs-badge {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 0.75rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--wp--preset--color--clay, #E9E2CF);
	color: var(--bs-ink);
}

.bs-badge--beginner     { background: var(--wp--preset--color--grass, #4E7A34);    color: var(--bs-paper); }
.bs-badge--intermediate { background: var(--wp--preset--color--gold, #C88B22);     color: var(--bs-ink); }
.bs-badge--advanced     { background: var(--wp--preset--color--redstone, #B03A2E); color: var(--bs-paper); }
.bs-badge--free         { background: var(--wp--preset--color--gold, #C88B22);     color: var(--bs-ink); }

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

.wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Visible focus everywhere. The gold reads against every surface here. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--gold, #C88B22);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Print — a pattern that survives being taken to an armchair
 * ------------------------------------------------------------------------ */

@media print {
	.wp-site-blocks > header,
	.wp-site-blocks > footer,
	.wp-block-navigation,
	.wp-block-buttons,
	.bs-no-print {
		display: none !important;
	}

	body {
		background: #FFFFFF !important;
		color: #000000 !important;
		font-size: 11pt;
	}

	.wp-block-group.is-style-bevel,
	.wp-block-group.is-style-inset {
		box-shadow: none !important;
		border: 2pt solid #000000 !important;
		break-inside: avoid;
	}

	a {
		color: #000000 !important;
		text-decoration: underline;
	}

	/* Spell out link targets that are not obvious in print. */
	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}
}

/* The numbered marker on the "start here" cards. Theme-owned: the pattern
 * kit plugin styles its own, so the two never fight over a class name. */
.bs-numeral {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	border-top: var(--bs-bevel-w) solid rgba(255, 255, 255, 0.4);
	border-left: var(--bs-bevel-w) solid rgba(255, 255, 255, 0.4);
	border-right: var(--bs-bevel-w) solid rgba(0, 0, 0, 0.3);
	border-bottom: var(--bs-bevel-w) solid rgba(0, 0, 0, 0.3);
}

/* Breadcrumbs — ours or the SEO plugin's, same look either way. */
.bs-breadcrumbs {
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bs-stone);
}

.bs-breadcrumbs a {
	color: var(--bs-stone);
	text-decoration: none;
}

.bs-breadcrumbs a:hover {
	color: var(--bs-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bs-breadcrumbs__sep {
	margin: 0 0.5rem;
	opacity: 0.6;
}