/* Composition-only layout for the license-statistics page (post_type=program); reusable component styling lives in components.css. */

/* Eyebrow override scoped to this page only, so RE-423's cactus-green default elsewhere is untouched. */
.tbc-block--bg-midnight .tbc-eyebrow {
	color: var(--color-sky);
}

.tbc-block--bg-default .tbc-eyebrow,
.tbc-block--bg-light .tbc-eyebrow {
	color: var(--color-ocean);
}

/* pd_course_cards is only forced into --bg-midnight for divider logic; this guard keeps its own white eyebrow intact. */
.tbc-block--bg-midnight .tbc-pd-widget .tbc-eyebrow {
	color: #fff;
}

/* Keeps pd_course_cards' own sky .tbc-intro from being overridden to white by the generic --bg-midnight rule. */
.tbc-block--bg-midnight .tbc-pd-widget .tbc-intro {
	color: var(--color-sky);
}

/* Hero rules duplicated from school-comparison.css since that file is gated to RE-423's page only. */
.tbc-hero .tbc-intro {
	margin: 0 0 16px;
}

.tbc-hero__cta {
	margin-bottom: 32px;
}

.tbc-hero .tbc-stats {
	margin-top: 8px;
}

/* Same spacing tweak as school-comparison.css, duplicated for the same reason as the hero rules above. */
.tbc-feature-section .tbc-cards {
	margin-top: 24px;
}

/* Reuses .tbc-stats/.tbc-stat-tile__* verbatim from components.css — only the trailing note is new here. */
.tbc-stat-snapshot .tbc-stats {
	margin-top: 16px;
}

.tbc-stats__note {
	margin: 16px 0 0;
	color: rgba(135, 135, 135, 1);
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	text-align: left;
}

@media (max-width: 600px) {
	.tbc-stats__note {
		font-size: 10px;
	}
}

/* CSS-only grouped bar chart — heights are computed server-side as a % of the largest chart_rows value and applied inline. */
.tbc-chart-section {
	--tbc-chart-height: 220px;
}

.tbc-bar-chart {
	margin-top: 24px;
	padding-left: 20px;
	padding-right: 20px;
}

.tbc-bar-chart__legend {
	display: flex;
	gap: 20px;
	margin-bottom: 12px;
}

.tbc-bar-chart__legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--color-body-text);
	font-size: 13px;
}

.tbc-bar-chart__legend-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 2px;
}

/* series-1 is the current-year series — uses brand midnight, not the shared ocean default. */
.tbc-bar-chart__legend-item--series-1 .tbc-bar-chart__legend-swatch {
	background: var(--color-midnight);
}

.tbc-bar-chart__legend-item--series-2 .tbc-bar-chart__legend-swatch {
	background: var(--color-stone);
}

.tbc-bar-chart__rows {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	height: var(--tbc-chart-height);
	border-bottom: 1px solid var(--color-stone);
}

.tbc-bar-chart__group {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	height: 100%;
}

.tbc-bar-chart__bars {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	width: 100%;
	height: 100%;
}

.tbc-bar-chart__bar {
	flex: 1;
	height: 100%;
	display: flex;
	align-items: flex-end;
}

.tbc-bar-chart__bar-fill {
	width: 100%;
	border-radius: 4px 4px 0 0;
}

.tbc-bar-chart__bar--series-1 .tbc-bar-chart__bar-fill {
	background: var(--color-midnight);
}

.tbc-bar-chart__bar--series-2 .tbc-bar-chart__bar-fill {
	background: var(--color-stone);
}

.tbc-bar-chart__month {
	margin: 8px 0 0;
	color: var(--color-body-text);
	font-size: 12px;
	line-height: normal;
}

@media (max-width: 600px) {
	.tbc-chart-section {
		--tbc-chart-height: 160px;
	}

	.tbc-bar-chart {
		padding-left: 0;
		padding-right: 0;
	}

	.tbc-bar-chart__rows {
		gap: 8px;
		padding: 0;
	}

	.tbc-bar-chart__month {
		font-size: 9px;
	}
}

/* Padding must live on this wrapper, not .tbc-data-table itself — border-collapse: collapse silently discards padding declared on a <table> element. */
.tbc-data-table-wrap {
	padding-left: 20px;
	padding-right: 20px;
}

.tbc-data-table {
	width: 100%;
	margin-top: 24px;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 13px;
}

.tbc-data-table th,
.tbc-data-table td {
	width: 25%;
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--color-stone);
}

/* Header row fill is brand midnight, so text needs to be white for contrast. */
.tbc-data-table th {
	color: #fff;
	font-weight: 700;
	background: var(--color-midnight);
}

.tbc-data-table td {
	color: var(--color-body-text);
}

.tbc-data-table tbody tr:nth-child(even) td {
	background: rgba(209, 210, 212, 0.12);
}

@media (max-width: 600px) {
	.tbc-data-table {
		font-size: 11px;
	}

	.tbc-data-table th,
	.tbc-data-table td {
		padding: 6px 8px;
	}

	.tbc-data-table-wrap {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Scoped to .tbc-chart-section only — .tbc-footnote is shared and must not pick up padding meant for this section alone. */
.tbc-chart-section .tbc-footnote {
	padding-left: 20px;
}

@media (max-width: 600px) {
	.tbc-chart-section .tbc-footnote {
		padding-left: 0;
	}
}

/* Deliberately its own grid (1-col mobile, 3-col desktop), not a reuse of .tbc-cards which is 4-col at that breakpoint. */
.tbc-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 24px 0 32px;
}

@media (min-width: 900px) {
	.tbc-steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tbc-step {
	display: flex;
	flex-direction: column;
}

.tbc-step__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

/* RE-468 correction (kept): badge fill is brand tangerine, not midnight. */
.tbc-step__number {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--color-tangerine);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	border-radius: 50%;
}

.tbc-step__title {
	margin: 0;
	color: var(--color-midnight);
	font-size: var(--tbc-font-h3);
	font-weight: 700;
	line-height: normal;
}

.tbc-step__body {
	margin: 0;
	color: var(--color-body-text);
	font-size: 15px;
	line-height: 1.5;
}

.tbc-steps-section__cta {
	margin-top: 8px;
}

@media (max-width: 600px) {
	.tbc-step__number {
		width: 30px;
		height: 30px;
	}

	.tbc-step__body {
		font-size: 12px;
	}
}

/* Opt-in only — fires only when a row explicitly sets grid_columns to "2"; RE-423's existing rows are unaffected. */
@media (min-width: 900px) {
	.tbc-cards--2col {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Salary callout sits outside the .tbc-cards grid's own gap, so it needs its own top spacing; not a blanket rule on .tbc-card--marigold, which is also a selectable repeater card_style that must stay left-aligned. */
.tbc-feature-section .tbc-cards + .tbc-card--marigold {
	margin-top: 24px;
	text-align: center;
}

@media (max-width: 600px) {
	.tbc-feature-section .tbc-cards + .tbc-card--marigold {
		text-align: left;
	}
}

/* Scoped to this stylesheet only, so RE-423's FAQ block is unaffected; native details[open] selector, no JS needed. */
.tbc-faq__item summary.tbc-faq__question {
	color: var(--color-charcoal);
}

.tbc-faq__item[open] summary.tbc-faq__question {
	color: var(--color-midnight);
}

.tbc-faq__item[open] .tbc-faq__answer {
	background: rgba(168, 222, 238, 0.15);
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 14px;
}