/*
 * trbc utilities — the handful of layout jobs that came up on every page and
 * were being solved from scratch each time in the builder's per-module CSS
 * boxes.
 *
 * Deliberately small. A utility earns its place here only after the same
 * hand-rolled rule has appeared on three or more pages; anything more specific
 * belongs to a component.
 */

/* ---------- measure ----------
 * Body copy set to the full 1080px content column runs to roughly 140
 * characters a line, about twice the comfortable maximum. Typography research
 * puts the readable range at 45–75 characters; --trbc-measure-prose is 68ch.
 * Intro paragraphs across the site are currently full-width because there was
 * nothing to reach for.
 */
.trbc-prose {
	max-width: var(--trbc-measure-prose);
	margin-inline: auto;
}

.trbc-prose p:last-child {
	margin-bottom: 0;
}

/* ---------- section rhythm ----------
 * The vertical space between sections is currently set by hand, per section,
 * per page: /engage/kids/ alone uses 0, 20, 48 and 96px block padding with no
 * relationship between them. These three classes are the whole intended scale.
 *
 * They are opt-in rather than a restyle of .et_pb_section because that
 * selector governs every page on the site, and most of those pages have their
 * own hand-set padding that would start fighting a global default.
 */
/* The repeated class is deliberate, and worth explaining.
 *
 * Divi 5's default section preset ships as
 *     .preset--module--divi-section--default.et_pb_section { padding: 0 }
 * and every section on the site carries that preset class. It is specificity
 * (0,2,0) and it is emitted after this file, so `.et_pb_section.trbc-band`
 * ties and loses. Repeating the class takes us to (0,3,0) and wins without
 * !important, which would be unoverridable by the per-section controls an
 * editor is entitled to reach for.
 *
 * THE REAL FIX IS UPSTREAM: that preset is why every page on this site sets
 * its own section padding by hand, and why /engage/kids/ ends up with 0, 20,
 * 48 and 96px on five sections. Giving the default section preset a sensible
 * block padding would give the whole site rhythm in one change and make this
 * utility unnecessary. That is a site-wide change and belongs to a deliberate
 * decision, not to a stylesheet.
 */
.et_pb_section.trbc-band.trbc-band {
	padding-block: var(--trbc-space-12);
	/* The site's Divi custom CSS forces `background-color:#f5f5f7!important` on
	   body, #main-content and .et_pb_section, so an important declaration is
	   the only way for the library to own its own ground. Scoped to sections
	   that opt into the rhythm, so nothing outside the library moves. */
	background-color: var(--trbc-ground) !important;
}

/* Alternating ground. A long page on one flat neutral reads as a single sheet
   however well the blocks inside it are spaced; giving every other section a
   slightly deeper ground gives the eye somewhere to rest and makes each
   section read as a place rather than a stretch of scroll. */
.et_pb_section.trbc-band--tint.trbc-band--tint {
	background-color: var(--trbc-band) !important;
}

.et_pb_section.trbc-band--tight.trbc-band--tight {
	padding-block: var(--trbc-space-8);
}

.et_pb_section.trbc-band--loose.trbc-band--loose {
	padding-block: var(--trbc-space-16);
}

/* A band directly after the page header adds no space above: the header has
   already closed itself with its own padding, or with its menu rail. */
.et_pb_section:has(.trbc-page-header) + .et_pb_section.trbc-band {
	padding-block-start: var(--trbc-space-8);
}

@media (max-width: 768px) {
	.et_pb_section.trbc-band.trbc-band {
		padding-block: var(--trbc-space-8);
	}

	.et_pb_section.trbc-band--loose.trbc-band--loose {
		padding-block: var(--trbc-space-10);
	}
}

/* ---------- stacked rows ----------
 * Two rows of tiles inside one section are one grid that happens to wrap, not
 * two sections. The gap between them should be the grid gutter, not the space
 * between sections.
 */
.et_pb_section.trbc-band > .et_pb_row + .et_pb_row {
	margin-top: var(--trbc-space-8);
}

/* ---------- section head ----------
 * A title, and optionally a lede, introducing the block beneath it.
 *
 * Wayfinder is a signpost design: every block gets a label. Without them the
 * page had exactly one heading below the hero ("Upcoming Events"), the
 * document outline jumped H1 straight to H3, and the intro paragraph was left
 * floating centred in a band of its own with nothing to belong to. A lede
 * attached to a heading is a section opening; the same sentence alone in an
 * empty band is an orphan, which is what it looked like.
 */
.trbc-section-title {
	margin: 0 0 var(--trbc-space-3);
	font-family: var(--trbc-face);
	font-size: var(--trbc-text-2xl);
	font-weight: var(--trbc-weight-bold);
	line-height: var(--trbc-leading-tight);
	letter-spacing: var(--trbc-tracking-tight);
	color: var(--trbc-ink);
}

.trbc-section-title h1,
.trbc-section-title h2,
.trbc-section-title h3 {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* A centred section title, for the one or two blocks that genuinely want to
   be centred — the follow row at the foot of a page. */
.trbc-section-title--center,
.trbc-section-title--center h1,
.trbc-section-title--center h2,
.trbc-section-title--center h3 {
	text-align: center;
}

.trbc-section-title--center {
	margin-bottom: var(--trbc-space-5);
}

/* The sentence under a section title. Left-aligned and on a prose measure —
   it belongs to the heading above it, not to the middle of the page. */
.trbc-section-lede,
.trbc-section-lede p {
	max-width: var(--trbc-measure-prose);
	margin: 0;
	font-family: var(--trbc-face);
	font-size: var(--trbc-text-md);
	line-height: var(--trbc-leading-normal);
	color: var(--trbc-ink-soft);
}

/* A head row sits closer to its content than the generic row rhythm allows —
   a heading 32px from the thing it names reads as detached. */
.et_pb_section.trbc-band > .et_pb_row.trbc-section-head + .et_pb_row {
	margin-top: var(--trbc-space-6);
}

/* ---------- social ----------
   Divi's social-media-follow, brought into the library: a quiet row of marks
   rather than saturated brand-coloured discs, which on a page with one blue
   button were pulling more attention than the button. */
/* Divi puts the module class on the <ul> itself, not on a wrapper — a
   descendant selector here matched nothing at all. */
ul.trbc-social,
.trbc-social.et_pb_social_media_follow {
	/* Divi's module display and alignment rules are emitted after the child
	   theme. These two declarations are the preset contract and must win. */
	display: flex !important;
	justify-content: center !important;
	gap: var(--trbc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.trbc-social li.et_pb_social_icon {
	margin: 0 !important;
	background: transparent !important;
}

/* Divi writes `background-color: #3b5998 !important` per network from the
   module's own colour setting, so only another important declaration reaches
   it. The saturated discs were pulling more attention than the page's single
   blue button; a quiet mark that colours on hover is the right weight for a
   follow row at the foot of a page. */
.trbc-social li.et_pb_social_icon a.icon {
	display: grid !important;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--trbc-radius-md);
	background: var(--trbc-surface) !important;
	background-color: var(--trbc-surface) !important;
	background-image: none !important;
	border: 1px solid var(--trbc-line);
	color: var(--trbc-ink-soft);
	transition: border-color var(--trbc-ease-quick), color var(--trbc-ease-quick),
		transform var(--trbc-ease-quick), box-shadow var(--trbc-ease-slow);
}

.trbc-social li.et_pb_social_icon a.icon::before {
	color: inherit;
	font-size: 18px;
}

.trbc-social li.et_pb_social_icon a.icon:hover {
	background: var(--trbc-brand-tint) !important;
	background-color: var(--trbc-brand-tint) !important;
	border-color: var(--trbc-brand);
	color: var(--trbc-brand);
	transform: translateY(-2px);
	box-shadow: var(--trbc-shadow-1);
}

.trbc-social li.et_pb_social_icon a.icon:focus-visible {
	outline: 2px solid var(--trbc-focus);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.trbc-social li.et_pb_social_icon a.icon {
		transition: none;
	}

	.trbc-social li.et_pb_social_icon a.icon:hover {
		transform: none;
	}
}