/*
Theme Name:   Boson Group Child
Theme URI:    https://bosongroup.com
Description:  Child theme of GeneratePress for The Boson Group. Design tokens live in
              assets/css/tokens.css and are sourced from the Boson Group design system
              v1.0 DRAFT (15 July 2026). All brand values are UNVERIFIED pending sign-off.
Author:       Boson Group
Template:     generatepress
Version:      0.2.0
Requires PHP: 8.2
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  boson-group
*/

/* -----------------------------------------------------------------------------
 * Theme styles.
 *
 * Tokens are defined in assets/css/tokens.css and are the only place raw brand
 * values belong. Everything below consumes them by custom property — never a
 * literal hex, px size or shadow.
 * -------------------------------------------------------------------------- */

/* The site is light only. The design system has no dark palette, and with no
 * scheme declared a dark-mode browser paints its own defaults into form
 * controls and scrollbars on a white ground. */
html {
	color-scheme: light;
}

body {
	color: var( --bsn-color-text );
	font-family: var( --bsn-font-family-base );
	font-size: var( --bsn-font-size-body );
	line-height: var( --bsn-line-height-body );
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var( --bsn-color-text );
	font-family: var( --bsn-font-family-base );
	/* Sentence case is enforced in copy, never by text-transform. */
	text-transform: none;
}

h1 {
	font-size: var( --bsn-font-size-h1 );
	line-height: var( --bsn-line-height-h1 );
}

h2 {
	font-size: var( --bsn-font-size-h2 );
	line-height: var( --bsn-line-height-h2 );
}

h3 {
	font-size: var( --bsn-font-size-h3 );
	line-height: var( --bsn-line-height-h3 );
}

a {
	color: var( --bsn-color-link );
}

/* Visible focus on every interactive element. WCAG 2.2 AA, non-negotiable. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: var( --bsn-focus-ring-width ) solid var( --bsn-color-focus-ring );
	outline-offset: var( --bsn-focus-ring-offset );
}

/* WCAG 2.2 AA, 2.5.8 Target Size (Minimum). GeneratePress renders entry-meta
 * links at 18px tall with tight spacing, which the accessibility gate flags as
 * a serious violation. Padding grows the hit area without changing type size. */
.entry-meta a,
.comments-link a,
.post-navigation a,
.nav-links a {
	display: inline-block;
	min-height: var( --bsn-target-min );
	padding-block: var( --bsn-space-1 );
}

/* The same criterion requires clearance between adjacent targets, not only size. */
.entry-meta > span,
.entry-meta a + a {
	margin-right: var( --bsn-space-2 );
}

/* Long-form body copy is left-aligned and measure-limited. Never justified.
 *
 * Scoped away from the ported design pages, which set their own measure per
 * component. This rule is why `.compare-foot` on /what-changes/ measured 623px
 * inside a 1,120px container and left a white notch under the comparison
 * table: that element is a `<p>` spanning both grid columns, and a 68ch cap
 * from this older stylesheet reached it. `:where()` holds the specificity
 * exactly where it was.
 *
 * It is also the counter-example to the audit's claim that only `.bsn-enquiry*`
 * is reachable from this stylesheet on a ported page - so the 23.8 KB it called
 * dead is not safe to delete on that analysis. */
:where( body:not( .bsn-design ) ) .entry-content p {
	max-width: var( --bsn-measure-body );
	text-align: left;
}

/* Metrics use tabular figures so columns of numbers align. */
.bsn-metric,
.bsn-figure {
	font-variant-numeric: tabular-nums;
}

/*
 * Reduced motion, narrowly.
 *
 * This was a blanket `*` rule setting animation and transition duration to
 * 0.01ms !important. Replaced 2026-08-20 after the audit measured what it was
 * actually doing:
 *
 * - There are zero keyframe animations on the site, so the animation half had
 *   nothing to act on.
 * - The entire motion inventory is 30 elements with 0.1-0.18s colour and border
 *   transitions. None of it conveys meaning, blocks reading, or repeats, so none
 *   of it is what this media query exists to suppress.
 * - Because `*` matches everything, it *added* a transition duration to 132
 *   elements that had none, and it killed the focus-ring transition.
 * - `scroll-behavior` is the one thing here that genuinely needs suppressing,
 *   and assets/css/design.css already handles it on its own.
 *
 * A global 0.01ms kill is a documented anti-pattern: it destroys useful state
 * feedback rather than calming motion. If continuous or large-area motion is ever
 * added, suppress that specific thing here.
 */
@media ( prefers-reduced-motion: reduce ) {

	html {
		scroll-behavior: auto;
	}
}

/* -----------------------------------------------------------------------------
 * Escalation flags and link cues.
 *
 * A flag marks a sentence that is blocked on a named approval. It must be
 * impossible to miss in staging and impossible to ship: precheck-copy.sh fails
 * on the source markers, and this styling makes any that reach a page obvious
 * to a human reviewer.
 * -------------------------------------------------------------------------- */

.bsn-flag {
	background: var( --bsn-color-warning );
	border-radius: var( --bsn-radius-control );
	color: var( --bsn-color-white );
	font-size: var( --bsn-font-size-small );
	font-weight: 700;
	padding: 0 var( --bsn-space-2 );
	white-space: nowrap;
}

.bsn-cue {
	color: var( --bsn-color-text-secondary );
}

/* -----------------------------------------------------------------------------
 * The enquiry form.
 *
 * The one function the site exists to perform. Structure before decoration.
 * -------------------------------------------------------------------------- */

.bsn-enquiry {
	border: var( --bsn-border-width ) solid var( --bsn-color-border );
	border-radius: var( --bsn-radius-card );
	display: flex;
	flex-direction: column;
	gap: var( --bsn-space-5 );
	margin-block: var( --bsn-space-7 );
	max-width: var( --bsn-measure-body );
	padding: var( --bsn-space-6 );
}

.bsn-enquiry__field {
	display: flex;
	flex-direction: column;
	gap: var( --bsn-space-2 );
	margin: 0;
}

.bsn-enquiry__field label {
	font-size: var( --bsn-font-size-label );
	font-weight: 500;
	line-height: var( --bsn-line-height-label );
}

.bsn-enquiry input[type="text"],
.bsn-enquiry input[type="email"],
.bsn-enquiry textarea {
	border: var( --bsn-border-width ) solid var( --bsn-color-border );
	border-radius: var( --bsn-radius-control );
	font-family: inherit;
	font-size: var( --bsn-font-size-body );
	line-height: var( --bsn-line-height-body );
	min-height: var( --bsn-target-min );
	padding: var( --bsn-space-3 );
	width: 100%;
}

.bsn-enquiry__field--error input[type="text"],
.bsn-enquiry__field--error input[type="email"],
.bsn-enquiry__field--error textarea {
	border-color: var( --bsn-color-error );
	border-width: 2px;
}

/* Errors are announced by the live region and shown in text. Never colour alone. */
.bsn-enquiry__error {
	color: var( --bsn-color-error );
	font-size: var( --bsn-font-size-small );
	line-height: var( --bsn-line-height-small );
}

.bsn-enquiry__errors:empty {
	display: none;
}

.bsn-enquiry__errors {
	border-left: 4px solid var( --bsn-color-error );
	padding-left: var( --bsn-space-4 );
}

/* Honeypot. Hidden from sight without display:none, which some bots detect. */
.bsn-enquiry__hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.bsn-enquiry__submit {
	background: var( --bsn-color-midnight );
	border: 0;
	border-radius: var( --bsn-radius-control );
	color: var( --bsn-color-white );
	cursor: pointer;
	font-family: inherit;
	font-size: var( --bsn-font-size-body );
	font-weight: 500;
	min-height: 44px;
	padding: var( --bsn-space-3 ) var( --bsn-space-6 );
}

.bsn-enquiry__submit:hover {
	background: var( --bsn-color-purple );
}

.bsn-enquiry__actions {
	margin: 0;
}