/*
 * Component insulation.
 *
 * THE PROBLEM THIS SOLVES, measured on /component-lab/:
 *
 *   .trbc-ph__title       56px  -apple-system   ← our rule won
 *   .trbc-feature__title  44px  Open Sans       ← Divi's rule won
 *   .trbc-linkcard__title 20px  Open Sans       ← Divi's rule won (we asked for 17px)
 *   .trbc-section-title   30px  -apple-system   ← our rule won
 *
 * Four headings, two typefaces, one page. Not a judgement call about which
 * face is better — simply that the library was not in control of its own type.
 *
 * Two host rules cause it:
 *
 *   h1, h2, h3, h4 { font-family: var(--et_global_heading_font) }   (0,0,1)
 *   .et_pb_column_1_6 h3, .et_pb_column_1_3 h3, … { font-size: 20px }  (0,2,0)
 *
 * The first is weak but beats INHERITANCE, so setting font-family on a
 * component's root never reaches its headings — an inherited value always
 * loses to a declaration, whatever the specificity. The second outranks a
 * single component class, and it is column-scoped, so the same component
 * silently changed size depending on which Divi column it was dropped into.
 *
 * Hence the tripled class names below: (0,3,0), enough to outrank the
 * column-scoped rules without !important, which would take the property away
 * from the per-instance controls an editor is entitled to use. It is ugly, and
 * it is deliberately confined to this one file so no component stylesheet has
 * to carry it.
 *
 * Every component heading declares family, size, weight, line-height and
 * tracking EXPLICITLY. Inheriting any of them is what let the host back in.
 */

/* ---------- shared heading reset ---------- */
.trbc-ph__title.trbc-ph__title.trbc-ph__title,
.trbc-feature__title.trbc-feature__title.trbc-feature__title,
.trbc-linkcard__title.trbc-linkcard__title.trbc-linkcard__title,
.trbc-section-title.trbc-section-title.trbc-section-title,
.trbc-section-title.trbc-section-title h1,
.trbc-section-title.trbc-section-title h2,
.trbc-section-title.trbc-section-title h3,
.trbc_card_header.trbc_card_header.trbc_card_header,
.trbc_event_compact_card_title.trbc_event_compact_card_title.trbc_event_compact_card_title,
.trbc_event_card_title.trbc_event_card_title.trbc_event_card_title,
.trbc_group_card_title.trbc_group_card_title.trbc_group_card_title,
.trbc_event_detail_title.trbc_event_detail_title.trbc_event_detail_title,
.trbc_event_detail_section_title.trbc_event_detail_section_title.trbc_event_detail_section_title,
.trbc_event_detail_upcoming_title.trbc_event_detail_upcoming_title.trbc_event_detail_upcoming_title,
.trbc-event-finder__title.trbc-event-finder__title.trbc-event-finder__title,
.trbc-event-finder__no-results-title.trbc-event-finder__no-results-title.trbc-event-finder__no-results-title,
.staff-member-name.staff-member-name.staff-member-name,
.filter-grid.filter-grid.filter-grid .top-bar h1,
.filters-content.filters-content.filters-content > h2,
.filters-content.filters-content.filters-content > h3 {
	font-family: var(--trbc-face);
	color: var(--trbc-ink);
	margin: 0;
	padding: 0;
	text-transform: none;
}

/* ---------- per-component type ----------
   Sizes restated here because the column-scoped host rules outrank the
   component files. The component file remains the place to READ what a
   heading is meant to be; this is the place that makes it stick. */

.trbc-ph__title.trbc-ph__title.trbc-ph__title {
	font-size: var(--trbc-text-hero);
	font-weight: var(--trbc-weight-bold);
	line-height: var(--trbc-leading-tight);
	letter-spacing: var(--trbc-tracking-display);
}

.trbc-feature__title.trbc-feature__title.trbc-feature__title {
	font-size: var(--trbc-text-display);
	font-weight: var(--trbc-weight-bold);
	line-height: var(--trbc-leading-tight);
	letter-spacing: var(--trbc-tracking-display);
}

.trbc-linkcard__title.trbc-linkcard__title.trbc-linkcard__title {
	font-size: var(--trbc-text-md);
	font-weight: var(--trbc-weight-semibold);
	line-height: var(--trbc-leading-snug);
	letter-spacing: var(--trbc-tracking-tight);
}

/* A section heading now outranks every item heading beneath it, which is the
   whole point of calling it a section. */
.trbc-section-title.trbc-section-title.trbc-section-title,
.trbc-section-title.trbc-section-title h1,
.trbc-section-title.trbc-section-title h2,
.trbc-section-title.trbc-section-title h3 {
	font-size: var(--trbc-text-section);
	font-weight: var(--trbc-weight-bold);
	line-height: var(--trbc-leading-tight);
	letter-spacing: var(--trbc-tracking-tight);
}

.trbc_card_header.trbc_card_header.trbc_card_header {
	font-size: var(--trbc-text-lg);
	font-weight: var(--trbc-weight-semibold);
	line-height: var(--trbc-leading-tight);
	letter-spacing: var(--trbc-tracking-tight);
}

.trbc_event_compact_card_title.trbc_event_compact_card_title.trbc_event_compact_card_title {
	font-size: var(--trbc-text-lg);
	font-weight: var(--trbc-weight-semibold);
	line-height: var(--trbc-leading-snug);
	letter-spacing: var(--trbc-tracking-tight);
}

/* ---------- legacy modules moved onto the Wayfinder token system ---------- */
.trbc_event_card_title.trbc_event_card_title.trbc_event_card_title,
.trbc_group_card_title.trbc_group_card_title.trbc_group_card_title,
.staff-member-name.staff-member-name.staff-member-name,
.trbc_event_detail_section_title.trbc_event_detail_section_title.trbc_event_detail_section_title,
.trbc_event_detail_upcoming_title.trbc_event_detail_upcoming_title.trbc_event_detail_upcoming_title,
.trbc-event-finder__no-results-title.trbc-event-finder__no-results-title.trbc-event-finder__no-results-title {
	font-size: var(--trbc-text-lg);
	font-weight: var(--trbc-weight-semibold);
	line-height: var(--trbc-leading-tight);
	letter-spacing: var(--trbc-tracking-tight);
}

.trbc_event_detail_title.trbc_event_detail_title.trbc_event_detail_title {
	font-size: var(--trbc-text-2xl);
	font-weight: var(--trbc-weight-bold);
	line-height: var(--trbc-leading-tight);
	letter-spacing: var(--trbc-tracking-tight);
}

.trbc-event-finder__title.trbc-event-finder__title.trbc-event-finder__title,
.filter-grid.filter-grid.filter-grid .top-bar h1 {
	font-size: var(--trbc-text-section);
	font-weight: var(--trbc-weight-bold);
	line-height: var(--trbc-leading-tight);
	letter-spacing: var(--trbc-tracking-tight);
}

.filters-content.filters-content.filters-content > h2 {
	font-size: var(--trbc-text-xl);
	font-weight: var(--trbc-weight-bold);
	line-height: var(--trbc-leading-tight);
	letter-spacing: var(--trbc-tracking-tight);
}

.filters-content.filters-content.filters-content > h3 {
	font-size: var(--trbc-text-base);
	font-weight: var(--trbc-weight-semibold);
	line-height: var(--trbc-leading-snug);
	letter-spacing: var(--trbc-tracking-normal);
}

/* ---------- body copy inside components ----------
   Divi sets `body { font-family: Open Sans; line-height: 1.7 }`, which is
   inherited — so a component's own font-family on its root does reach these,
   but line-height did not, and a 12px eyebrow was rendering at line-height
   2.27 because it inherited 1.7em computed against the parent's size. */
.trbc-feature__eyebrow,
.trbc-feature__text,
.trbc-feature__link,
.trbc-linkcard__meta,
.trbc-linkcard__chev,
.trbc-ph__sub,
.trbc-ph__eyebrow,
.trbc-ph__btn,
.trbc-ph__lnk,
.trbc-ph__menu-item,
.trbc_event_compact_card,
.trbc_event_compact_card_meta,
.trbc_event_compact_card_date {
	font-family: var(--trbc-face);
}

.trbc-feature__eyebrow {
	line-height: var(--trbc-leading-tight);
}

/* ---------- prose ----------
   The intro paragraph was rendering Open Sans 16px in #666 — a grey that
   exists nowhere in the token file. Body copy set by the library should look
   like the library. */
.trbc-prose,
.trbc-prose p {
	font-family: var(--trbc-face);
	font-size: var(--trbc-text-md);
	line-height: var(--trbc-leading-normal);
	color: var(--trbc-ink-soft);
}

@media (max-width: 768px) {
	.trbc_event_detail_title.trbc_event_detail_title.trbc_event_detail_title,
	.trbc-event-finder__title.trbc-event-finder__title.trbc-event-finder__title {
		font-size: var(--trbc-text-xl);
	}
}

@media (max-width: 480px) {
	.trbc_event_detail_title.trbc_event_detail_title.trbc_event_detail_title {
		font-size: var(--trbc-text-lg);
	}

	.trbc_event_detail_section_title.trbc_event_detail_section_title.trbc_event_detail_section_title,
	.trbc_event_detail_upcoming_title.trbc_event_detail_upcoming_title.trbc_event_detail_upcoming_title {
		font-size: var(--trbc-text-md);
	}
}