/**
 * Base element styles: typography, links, forms, WP core alignment classes.
 */

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

body {
	background: var(--bcm-color-bg);
	color: var(--bcm-text-primary);
	font-family: var(--bcm-font-body);
	font-size: var(--bcm-fs-base);
	line-height: var(--bcm-line-height-base);
	transition: background-color var(--bcm-duration-base) var(--bcm-ease), color var(--bcm-duration-base) var(--bcm-ease);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bcm-font-heading);
	font-weight: var(--bcm-heading-weight);
	line-height: var(--bcm-line-height-tight);
	color: var(--bcm-text-primary);
	margin: 0 0 var(--bcm-space-4);
}

h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, var(--bcm-fs-3xl)); }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, var(--bcm-fs-2xl)); }
h3 { font-size: var(--bcm-fs-xl); }
h4 { font-size: var(--bcm-fs-lg); }
h5 { font-size: var(--bcm-fs-md); }
h6 { font-size: var(--bcm-fs-base); }

p {
	margin: 0 0 var(--bcm-space-4);
}

a {
	color: var(--bcm-link-color);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--bcm-color-accent-dark);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--bcm-focus-ring);
	outline-offset: 2px;
	border-radius: 4px;
}

ul, ol {
	padding-left: var(--bcm-space-5);
}

table {
	border-collapse: collapse;
	width: 100%;
}

img {
	border-radius: var(--bcm-radius-sm);
}

.bcm-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	background: var(--bcm-color-dark);
	color: #fff;
	padding: var(--bcm-space-3) var(--bcm-space-5);
	border-radius: 0 0 var(--bcm-radius-sm) 0;
}

.bcm-skip-link:focus {
	left: 0;
}

.bcm-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* WP core / Gutenberg alignment classes so post content behaves consistently. */
.alignwide {
	max-width: calc(var(--bcm-container-narrow) + 6rem);
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.alignleft {
	float: left;
	margin: 0 var(--bcm-space-5) var(--bcm-space-4) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--bcm-space-4) var(--bcm-space-5);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

::selection {
	background: var(--bcm-color-accent);
	color: var(--bcm-color-dark);
}

/* High-contrast mode support */
@media (prefers-contrast: more) {
	:root {
		--bcm-border-color: #000;
		--bcm-text-secondary: #000;
	}
}