/**
 * Typography classes for Elementor Advanced > CSS Classes.
 * Tag and look are independent: .hbn-h4 on an h3 looks like h4.
 *
 * Wrapper + inner: .hbn-h2 :where(.elementor-heading-title) keeps
 * specificity at (0,1,0) so Elementor per-widget rules (~0,2,0) win.
 */

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

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

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

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

.hbn-h4,
.hbn-h4 :where(.elementor-heading-title) {
	color: var(--hbn-color-navy);
	font-family: var(--hbn-font-body);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
}

.hbn-h5,
.hbn-h5 :where(.elementor-heading-title) {
	color: inherit;
	font-family: var(--hbn-font-body);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
}

.hbn-lead,
.hbn-lead .elementor-widget-container,
.hbn-lead p,
.hbn-lead :where(.elementor-heading-title) {
	color: var(--hbn-color-text);
	font-family: var(--hbn-font-body);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
}

/*
 * Hero / dark glass: muted white lead (Figma h5 on dark).
 * Must target `p` — base.css sets color/size on `p` (0,0,1), which blocks
 * inheritance from the widget wrapper alone.
 */
.hbn-lead--light {
	box-sizing: border-box;
	height: 90px;
	max-width: 100%;
	width: 700px;
}

.hbn-lead--light,
.hbn-lead--light .elementor-widget-container,
.hbn-lead--light p,
.hbn-lead--light :where(.elementor-heading-title) {
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--hbn-font-body);
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
}

.hbn-eyebrow,
.hbn-eyebrow :where(.elementor-widget-container),
.hbn-eyebrow :where(.elementor-heading-title) {
	font-family: var(--hbn-font-body);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
}

/*
 * Sand must beat kit Primary on headings
 * (`.elementor-widget-heading .elementor-heading-title` → Primary).
 * Still loses to per-widget `.elementor-XX .elementor-element-ID …` (~0,4,0).
 */
.elementor-widget-heading.hbn-eyebrow .elementor-heading-title,
.hbn-eyebrow.elementor-widget-heading .elementor-heading-title {
	color: var(--hbn-color-sand);
}

.hbn-eyebrow {
	color: var(--hbn-color-sand);
}

.hbn-small,
.hbn-small :where(.elementor-widget-container) {
	font-size: 13px;
	line-height: 1.5;
}

.hbn-text-center {
	text-align: center;
}

.hbn-text-left {
	text-align: left;
}

/* Dark: cream for h1/h3/h4. H2 stays navy (Decided); low contrast on dark is Open. */
.hbn-bg-navy .hbn-h1,
.hbn-bg-navy .hbn-h1 :where(.elementor-heading-title),
.hbn-bg-navy .hbn-h3,
.hbn-bg-navy .hbn-h3 :where(.elementor-heading-title),
.hbn-bg-navy .hbn-h4,
.hbn-bg-navy .hbn-h4 :where(.elementor-heading-title),
.hbn-bg-dark .hbn-h1,
.hbn-bg-dark .hbn-h1 :where(.elementor-heading-title),
.hbn-bg-dark .hbn-h3,
.hbn-bg-dark .hbn-h3 :where(.elementor-heading-title),
.hbn-bg-dark .hbn-h4,
.hbn-bg-dark .hbn-h4 :where(.elementor-heading-title),
.hbn-on-dark .hbn-h1,
.hbn-on-dark .hbn-h1 :where(.elementor-heading-title),
.hbn-on-dark .hbn-h3,
.hbn-on-dark .hbn-h3 :where(.elementor-heading-title),
.hbn-on-dark .hbn-h4,
.hbn-on-dark .hbn-h4 :where(.elementor-heading-title) {
	color: var(--hbn-color-cream);
}

.hbn-bg-navy .hbn-h2,
.hbn-bg-navy .hbn-h2 :where(.elementor-heading-title),
.hbn-bg-dark .hbn-h2,
.hbn-bg-dark .hbn-h2 :where(.elementor-heading-title),
.hbn-on-dark .hbn-h2,
.hbn-on-dark .hbn-h2 :where(.elementor-heading-title) {
	color: var(--hbn-color-navy);
}

@media (max-width: 767px) {
	.hbn-h1,
	.hbn-h1 :where(.elementor-heading-title),
	.hbn-h2,
	.hbn-h2 :where(.elementor-heading-title) {
		font-size: 40px;
		line-height: 1.1;
	}

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

	/* TODO: confirm .hbn-lead and .hbn-eyebrow sizes on mobile */
}