/**
 * Tag defaults (on-brand without classes).
 *
 * Hello Elementor reset.css styles h1-h6, a, button, input at (0,0,1).
 * :where() is (0,0,0) and loses, so plain tag selectors are used here.
 * Loaded after Hello so same-specificity tags win by cascade order.
 * h6 is intentionally unstyled.
 */

body {
	background-color: var(--hbn-color-bg);
	color: var(--hbn-color-text);
	font-family: var(--hbn-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
}

/*
 * Hello Elementor theme.css sets content-box + width:100% + padding-inline:10px on
 * body:not([class*="elementor-page-"]) .site-main (and related chrome). That overflows
 * the viewport on mobile. Border-box keeps the padded shell inside 100vw.
 */
body:not([class*="elementor-page-"]) .site-main,
.page-header .entry-title,
.site-footer .footer-inner {
	box-sizing: border-box;
	max-width: 100%;
}

p {
	/* Color left unset so Elementor Text Color / inheritance win freely. */
	font-family: var(--hbn-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
}

a {
	color: var(--hbn-color-navy);
	text-decoration: none;
}

/* TODO: link hover / active / visited states (open decision) */
a:hover {
	/* PROVISIONAL */
	filter: brightness(0.92);
}

h1 {
	color: var(--hbn-color-navy); /* PROVISIONAL outside hero */
	font-family: var(--hbn-font-heading);
	font-size: 80px;
	font-weight: 500;
	line-height: 1;
}

h2 {
	color: var(--hbn-color-navy); /* always navy, no exceptions */
	font-family: var(--hbn-font-heading);
	font-size: 64px;
	font-weight: 600;
	line-height: 1.1;
}

h3 {
	color: var(--hbn-color-navy);
	font-family: var(--hbn-font-heading);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
}

h4 {
	color: var(--hbn-color-navy);
	font-family: var(--hbn-font-body);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
}

h5 {
	font-family: var(--hbn-font-body);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
}

/* Dark surfaces: cream text so headings remain readable */
.hbn-bg-navy,
.hbn-bg-dark,
.hbn-on-dark {
	color: var(--hbn-color-cream);
}

.hbn-bg-navy h1,
.hbn-bg-navy h3,
.hbn-bg-navy h4,
.hbn-bg-dark h1,
.hbn-bg-dark h3,
.hbn-bg-dark h4,
.hbn-on-dark h1,
.hbn-on-dark h3,
.hbn-on-dark h4 {
	color: var(--hbn-color-cream);
}

/* h2 stays navy always (Decided). Low contrast on dark: TODO confirm. */
.hbn-bg-navy h2,
.hbn-bg-dark h2,
.hbn-on-dark h2 {
	color: var(--hbn-color-navy);
}

.hbn-bg-navy a,
.hbn-bg-dark a,
.hbn-on-dark a {
	color: var(--hbn-color-cream);
}

.hbn-hero h1,
.hbn-h1--light {
	color: var(--hbn-color-white);
}

@media (max-width: 767px) {
	h1,
	h2 {
		font-size: 40px;
		line-height: 1.1;
	}

	h3,
	h4 {
		color: var(--hbn-color-navy);
		font-family: var(--hbn-font-body);
		font-size: 20px;
		font-weight: 700;
		line-height: 1.3;
	}
}