/*
Theme Name:   SGEG Community
Theme URI:    https://community.savinggraceeducation.co.za/
Description:  Saving Grace Education Community — a classic WordPress theme built for bbPress. Carries the official Saving Grace brand identity (Blue #26358C, Cyan #26BBC1, Red #E31A51, Yellow #F9BE00) with self-hosted Poppins and Inter typography. Mobile first, because parents reach this community from their phones. Standalone classic theme: bbPress renders through the classic template hierarchy and cannot render under a block theme.
Author:       Saving Grace Education Group
Author URI:   https://savinggraceeducation.co.za/
Version:      2.16.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sgeg-community-theme
Tags:         education, community, forum, two-columns, right-sidebar, custom-menu, custom-logo, translation-ready

Learn. Connect. Get Support.
*/

/* ===========================================================================
   1. Design tokens
   Sourced from the Saving Grace Education Brand Guide (Base X Studio).
   =========================================================================== */

:root {
	--sgeg-blue: #26358C;
	--sgeg-navy: #293587;
	--sgeg-ink: #10122E;
	--sgeg-body: #4B4F72;
	--sgeg-cyan: #26BBC1;
	--sgeg-teal: #49989E;
	--sgeg-teal-tint: #E1F1F3;
	--sgeg-red: #E31A51;
	--sgeg-red-deep: #D03554;
	--sgeg-yellow: #F9BE00;
	--sgeg-surface: #F2F2F2;
	--sgeg-hairline: #EEEEF2;
	--sgeg-white: #FFFFFF;

	--sgeg-radius: 12px;
	--sgeg-radius-sm: 8px;
	--sgeg-radius-pill: 100px;

	--sgeg-shadow: 0 1px 2px rgba(16,18,46,.04), 0 4px 16px rgba(16,18,46,.06);
	--sgeg-shadow-raised: 0 2px 4px rgba(16,18,46,.06), 0 12px 32px rgba(16,18,46,.10);

	--sgeg-font-heading: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sgeg-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sgeg-font-serif: "Noto Serif", Georgia, "Times New Roman", serif;

	--sgeg-content: 1200px;
	--sgeg-narrow: 760px;
	--sgeg-header-h: 68px;
}

/* ===========================================================================
   2. Reset and base
   =========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--sgeg-white);
	color: var(--sgeg-body);
	font-family: var(--sgeg-font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	font-family: var(--sgeg-font-heading);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--sgeg-ink);
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 700; }
h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }

h6 {
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--sgeg-teal);
}

p { margin: 0 0 1.1em; }

a {
	color: var(--sgeg-blue);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover,
a:focus-visible { color: var(--sgeg-red-deep); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--sgeg-yellow);
	outline-offset: 2px;
	border-radius: 3px;
}

img, svg, video { max-width: 100%; height: auto; }

hr {
	border: 0;
	border-top: 1px solid var(--sgeg-hairline);
	margin: 2.5rem 0;
}

blockquote {
	margin: 1.5rem 0;
	padding: .25rem 0 .25rem 1.25rem;
	border-left: 3px solid var(--sgeg-cyan);
	font-family: var(--sgeg-font-serif);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--sgeg-ink);
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .9em;
	background: var(--sgeg-surface);
	border-radius: 6px;
}

code { padding: .15em .4em; }

pre {
	padding: 1rem;
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

th, td {
	padding: .6rem .75rem;
	border-bottom: 1px solid var(--sgeg-hairline);
	text-align: left;
}

th {
	font-family: var(--sgeg-font-heading);
	font-weight: 600;
	color: var(--sgeg-ink);
}

.sgeg-table-wrap { overflow-x: auto; }

/* ===========================================================================
   3. Layout
   =========================================================================== */

.sgeg-wrap {
	width: 100%;
	max-width: var(--sgeg-content);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.sgeg-main { padding-block: 2rem 4rem; }

.sgeg-layout { display: block; }

@media (min-width: 1000px) {
	.sgeg-layout.has-sidebar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 2.5rem;
		align-items: start;
	}
}

.sgeg-narrow { max-width: var(--sgeg-narrow); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--sgeg-blue);
	color: #fff;
	padding: .75rem 1.25rem;
	border-radius: 0 0 var(--sgeg-radius-sm) 0;
	font-family: var(--sgeg-font-heading);
	font-weight: 600;
}

.skip-link:focus {
	left: 0;
	color: #fff;
}

/* ===========================================================================
   4. Buttons
   =========================================================================== */

.sgeg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .85rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--sgeg-radius-sm);
	background: var(--sgeg-blue);
	color: var(--sgeg-white);
	font-family: var(--sgeg-font-heading);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.sgeg-btn:hover,
.sgeg-btn:focus-visible {
	background: var(--sgeg-navy);
	color: var(--sgeg-white);
}

.sgeg-btn--accent { background: var(--sgeg-red); }
.sgeg-btn--accent:hover,
.sgeg-btn--accent:focus-visible { background: var(--sgeg-red-deep); color: #fff; }

.sgeg-btn--ghost {
	background: transparent;
	border-color: var(--sgeg-blue);
	color: var(--sgeg-blue);
}

.sgeg-btn--ghost:hover,
.sgeg-btn--ghost:focus-visible {
	background: var(--sgeg-blue);
	color: var(--sgeg-white);
}

.sgeg-btn--light {
	background: rgba(255,255,255,.14);
	border-color: rgba(255,255,255,.5);
	color: #fff;
}

.sgeg-btn--light:hover,
.sgeg-btn--light:focus-visible {
	background: #fff;
	color: var(--sgeg-blue);
	border-color: #fff;
}

.sgeg-btn--sm { padding: .55rem 1rem; font-size: .85rem; }

/* ===========================================================================
   5. Site header
   =========================================================================== */

.sgeg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--sgeg-white);
	border-bottom: 1px solid var(--sgeg-hairline);
}

.admin-bar .sgeg-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .sgeg-header { top: 46px; }
}

.sgeg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--sgeg-header-h);
}

.sgeg-brand {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	text-decoration: none;
	flex: 0 0 auto;
}

.sgeg-brand__mark {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 9px;
	background: var(--sgeg-blue);
	color: #fff;
	font-family: var(--sgeg-font-heading);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .02em;
	flex: 0 0 auto;
}

.sgeg-brand__text { display: flex; flex-direction: column; line-height: 1.1; }

.sgeg-brand__name {
	font-family: var(--sgeg-font-heading);
	font-weight: 700;
	font-size: 1rem;
	color: var(--sgeg-ink);
	letter-spacing: -.01em;
}

.sgeg-brand__sub {
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sgeg-teal);
}

/* The official SGEG lockup. Sized by height so the mark, wordmark and
   strapline stay in their designed proportions; it steps down on small
   screens where the strapline stops being legible anyway. */
.sgeg-brand img {
	height: auto;
	max-height: 40px;
	width: auto;
}

@media (min-width: 700px) {
	.sgeg-brand img { max-height: 52px; }
}

@media (min-width: 1024px) {
	.sgeg-brand img { max-height: 56px; }
}

.sgeg-brand--lockup { gap: 0; }

.sgeg-footer__logo {
	max-width: 260px;
	height: auto;
	margin-bottom: 1rem;
}

/* Navigation */

.sgeg-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: transparent;
	border: 1px solid var(--sgeg-hairline);
	border-radius: var(--sgeg-radius-sm);
	padding: .5rem .8rem;
	font-family: var(--sgeg-font-heading);
	font-size: .85rem;
	font-weight: 600;
	color: var(--sgeg-ink);
	cursor: pointer;
}

.sgeg-nav-toggle__bars {
	position: relative;
	width: 17px; height: 2px;
	background: var(--sgeg-ink);
	display: block;
}

.sgeg-nav-toggle__bars::before,
.sgeg-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 17px; height: 2px;
	background: var(--sgeg-ink);
}

.sgeg-nav-toggle__bars::before { top: -5px; }
.sgeg-nav-toggle__bars::after { top: 5px; }

.sgeg-nav {
	display: none;
	width: 100%;
	padding-bottom: 1rem;
}

.sgeg-nav.is-open { display: block; }

.sgeg-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sgeg-nav li { position: relative; }

.sgeg-nav a {
	display: block;
	padding: .7rem .25rem;
	font-family: var(--sgeg-font-heading);
	font-size: .95rem;
	font-weight: 500;
	color: var(--sgeg-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--sgeg-hairline);
}

.sgeg-nav a:hover,
.sgeg-nav a:focus-visible { color: var(--sgeg-blue); }

.sgeg-nav .current-menu-item > a,
.sgeg-nav .current_page_item > a { color: var(--sgeg-blue); font-weight: 600; }

.sgeg-nav .sub-menu { padding-left: 1rem; }

.sgeg-header__actions {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 0 0 auto;
}

@media (min-width: 1024px) {
	.sgeg-nav-toggle { display: none; }

	.sgeg-header__inner { flex-wrap: nowrap; }

	.sgeg-nav {
		display: block;
		width: auto;
		padding-bottom: 0;
		flex: 1 1 auto;
	}

	.sgeg-nav > ul {
		display: flex;
		align-items: center;
		gap: .35rem;
		justify-content: center;
	}

	.sgeg-nav > ul > li > a {
		border-bottom: 0;
		padding: .5rem .6rem;
		border-radius: var(--sgeg-radius-sm);
		white-space: nowrap;
	}

	.sgeg-nav > ul > li > a:hover { background: var(--sgeg-teal-tint); }

	.sgeg-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: #fff;
		border: 1px solid var(--sgeg-hairline);
		border-radius: var(--sgeg-radius);
		box-shadow: var(--sgeg-shadow-raised);
		padding: .4rem;
		display: none;
		z-index: 20;
	}

	.sgeg-nav li:hover > .sub-menu,
	.sgeg-nav li:focus-within > .sub-menu { display: block; }

	.sgeg-nav .sub-menu a { border-bottom: 0; border-radius: 6px; padding: .5rem .7rem; }
	.sgeg-nav .sub-menu a:hover { background: var(--sgeg-teal-tint); }
}

/* ===========================================================================
   6. Hero and search

   The hero reproduces the Saving Grace Community brand panel — navy ground,
   brand geometry, the three-line lockup, the yellow-over-teal stripe — but as
   live text rather than a flat image. That keeps the H1 readable to search
   engines (this community is meant to rank), lets the type reflow properly on
   a phone, and stays crisp on any display.
   =========================================================================== */

.sgeg-hero {
	position: relative;
	overflow: hidden;
	background: var(--sgeg-blue);
	color: #fff;
	padding-block: clamp(2.75rem, 2rem + 5vw, 5rem);
	padding-bottom: clamp(3.25rem, 2.5rem + 5vw, 5.5rem);
	text-align: left;
}

/* Brand geometry. Decorative only, and kept out of the assistive tree. */
.sgeg-hero__shape {
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
}

.sgeg-hero__shape--teal {
	width: clamp(150px, 19vw, 330px);
	aspect-ratio: 1;
	background: var(--sgeg-cyan);
	top: clamp(-80px, -4.5vw, -30px);
	right: clamp(-45px, -1.5vw, 20px);
}

.sgeg-hero__shape--gold {
	width: clamp(58px, 7.5vw, 132px);
	aspect-ratio: 1;
	background: var(--sgeg-yellow);
	top: clamp(28px, 3.4vw, 74px);
	right: clamp(-46px, -2.6vw, -14px);
}

.sgeg-hero__shape--pale {
	width: clamp(120px, 16vw, 240px);
	aspect-ratio: 1;
	background: rgba(255,255,255,.10);
	bottom: clamp(-90px, -5vw, -40px);
	left: clamp(-80px, -5vw, -30px);
}

.sgeg-hero__shape--triangle {
	width: 0;
	height: 0;
	border-radius: 0;
	border-left: clamp(11px, 1.3vw, 20px) solid transparent;
	border-right: clamp(11px, 1.3vw, 20px) solid transparent;
	border-bottom: clamp(19px, 2.2vw, 34px) solid var(--sgeg-red);
	right: clamp(6%, 12vw, 22%);
	bottom: clamp(26%, 12vw, 32%);
}

/* The signature stripe closing the panel. */
.sgeg-hero::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 10px;
	background: linear-gradient(
		to bottom,
		var(--sgeg-yellow) 0 50%,
		var(--sgeg-cyan) 50% 100%
	);
}

.sgeg-hero > .sgeg-wrap {
	position: relative;
	z-index: 1;
}

.sgeg-hero__eyebrow {
	display: block;
	font-family: var(--sgeg-font-heading);
	font-size: clamp(.72rem, .66rem + .2vw, .85rem);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sgeg-cyan);
	margin-bottom: .85rem;
}

/* The lockup. "Community" in white, the promise in gold, exactly as the
   brand panel sets it. */
.sgeg-hero h1 {
	margin: 0;
	max-width: 20ch;
	color: #fff;
	font-size: clamp(2.4rem, 1.3rem + 4.6vw, 4.6rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.03em;
}

.sgeg-hero__promise {
	display: block;
	/* Zero the inherited paragraph margin explicitly: `p { margin-bottom: 1.1em }`
	   is relative to font-size, and at 4.6rem that leaves a five-rem hole
	   between the promise and the sentence beneath it. */
	margin: .08em 0 0;
	color: var(--sgeg-yellow);
	font-family: var(--sgeg-font-heading);
	font-size: clamp(2.4rem, 1.3rem + 4.6vw, 4.6rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.03em;
}

.sgeg-hero__promise span { display: block; }

.sgeg-hero__lead {
	max-width: 54ch;
	margin: 1.5rem 0 1.9rem;
	font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
	color: rgba(255,255,255,.9);
}

/* Search */

.sgeg-search {
	max-width: 660px;
	margin: 0 0 1.6rem;
}

.sgeg-search__form {
	display: flex;
	gap: .5rem;
	background: #fff;
	border-radius: var(--sgeg-radius);
	padding: .45rem;
	box-shadow: var(--sgeg-shadow-raised);
}

.sgeg-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: .8rem 1rem;
	font-family: var(--sgeg-font-body);
	font-size: 1rem;
	color: var(--sgeg-ink);
}

.sgeg-search__input::placeholder { color: #8b90ad; }
.sgeg-search__input:focus { outline: none; }
.sgeg-search__form:focus-within { outline: 3px solid var(--sgeg-yellow); outline-offset: 2px; }

.sgeg-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	justify-content: flex-start;
}

/* ===========================================================================
   7. Cards
   =========================================================================== */

.sgeg-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) { .sgeg-grid--2, .sgeg-grid--3, .sgeg-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) {
	.sgeg-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.sgeg-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

.sgeg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--sgeg-hairline);
	border-radius: var(--sgeg-radius);
	padding: 1.5rem 1.4rem 1.4rem;
	box-shadow: var(--sgeg-shadow);
	text-decoration: none;
	color: inherit;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;

	/* Set per card by the tone modifiers below. */
	--card-accent: var(--sgeg-blue);
	--card-tint: rgba(38,53,140,.10);
}

/* A quiet wash of the card's own colour, so the grid reads as a set of
   destinations rather than nine identical white boxes. */
.sgeg-card::before {
	content: "";
	position: absolute;
	top: -46px;
	right: -46px;
	width: 132px;
	height: 132px;
	border-radius: 50%;
	background: var(--card-tint);
	pointer-events: none;
	transition: transform .18s ease;
}

/* The colour bar along the top edge. */
.sgeg-card::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 4px;
	background: var(--card-accent);
}

a.sgeg-card:hover,
a.sgeg-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--sgeg-shadow-raised);
	border-color: var(--card-accent);
	color: inherit;
}

a.sgeg-card:hover::before { transform: scale(1.18); }

.sgeg-card > * { position: relative; z-index: 1; }

/* Icon tile */

.sgeg-card__tile {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 1rem;
	border-radius: 13px;
	background: var(--card-tint);
	color: var(--card-accent);
	flex: 0 0 auto;
}

.sgeg-card__mark {
	width: 28px;
	height: 28px;
	display: block;
}

.sgeg-card h3 {
	margin-bottom: .4rem;
	font-size: 1.1rem;
	color: var(--sgeg-ink);
}

.sgeg-card p { margin: 0; font-size: .93rem; }

.sgeg-card__label {
	font-family: var(--sgeg-font-heading);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--card-accent);
	margin-bottom: .45rem;
}

.sgeg-card__ext {
	display: inline-block;
	margin-left: .15em;
	font-size: .8em;
	color: var(--card-accent);
	vertical-align: super;
}

/* Tones. Each pairs a solid accent with a 10% tint of the same hue, so the
   wash and the tile always belong to the accent rather than approximating it. */
.sgeg-card--tone-blue   { --card-accent: var(--sgeg-blue);   --card-tint: rgba(38,53,140,.10); }
.sgeg-card--tone-navy   { --card-accent: var(--sgeg-navy);   --card-tint: rgba(41,53,135,.10); }
.sgeg-card--tone-cyan   { --card-accent: var(--sgeg-cyan);   --card-tint: rgba(38,187,193,.15); }
.sgeg-card--tone-teal   { --card-accent: var(--sgeg-teal);   --card-tint: rgba(73,152,158,.14); }
.sgeg-card--tone-red    { --card-accent: var(--sgeg-red);    --card-tint: rgba(227,26,81,.10); }

.sgeg-card--tone-yellow { --card-accent: var(--sgeg-yellow); --card-tint: rgba(249,190,0,.18); }

/* Three brand colours are too light to carry the small uppercase label on
   white: yellow #F9BE00 lands at 1.7:1, cyan #26BBC1 at 2.3:1 and teal
   #49989E at 3.4:1 — all below the 4.5:1 that 11px text needs.
   Each therefore gets a darkened same-hue variant for TEXT only. The 4px
   bar, the tile and the corner wash keep the true brand colour, because a
   large block of colour has no contrast requirement to meet. The card still
   reads as gold, cyan or teal; only the words are legible. */
.sgeg-card--tone-yellow .sgeg-card__label,
.sgeg-card--tone-yellow .sgeg-card__ext,
.sgeg-card--tone-yellow .sgeg-card__mark { color: #8A6800; }

.sgeg-card--tone-cyan .sgeg-card__label,
.sgeg-card--tone-cyan .sgeg-card__ext,
.sgeg-card--tone-cyan .sgeg-card__mark { color: #1A8185; }

.sgeg-card--tone-teal .sgeg-card__label,
.sgeg-card--tone-teal .sgeg-card__ext,
.sgeg-card--tone-teal .sgeg-card__mark { color: #3D7E83; }

.sgeg-section { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }
.sgeg-section--tint { background: var(--sgeg-surface); }

.sgeg-section__head { text-align: center; max-width: 60ch; margin: 0 auto 2rem; }

/* ===========================================================================
   8. Entries
   =========================================================================== */

.sgeg-entry { margin-bottom: 3rem; }

.sgeg-entry__meta {
	font-size: .85rem;
	color: var(--sgeg-body);
	margin-bottom: 1rem;
}

.sgeg-entry__content > *:first-child { margin-top: 0; }

.sgeg-entry__thumb {
	border-radius: var(--sgeg-radius);
	overflow: hidden;
	margin-bottom: 1.25rem;
}

.sgeg-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-top: 2rem;
}

.sgeg-pagination .page-numbers {
	display: inline-block;
	min-width: 2.4rem;
	padding: .45rem .7rem;
	text-align: center;
	border: 1px solid var(--sgeg-hairline);
	border-radius: var(--sgeg-radius-sm);
	text-decoration: none;
	font-size: .9rem;
}

.sgeg-pagination .page-numbers.current {
	background: var(--sgeg-blue);
	border-color: var(--sgeg-blue);
	color: #fff;
	font-weight: 600;
}

/* ===========================================================================
   9. Sidebar
   =========================================================================== */

.sgeg-sidebar { margin-top: 2.5rem; }

@media (min-width: 1000px) { .sgeg-sidebar { margin-top: 0; } }

.sgeg-widget {
	background: #fff;
	border: 1px solid var(--sgeg-hairline);
	border-radius: var(--sgeg-radius);
	padding: 1.25rem;
	margin-bottom: 1.25rem;
	box-shadow: var(--sgeg-shadow);
}

.sgeg-widget__title {
	font-family: var(--sgeg-font-heading);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sgeg-teal);
	margin-bottom: .9rem;
}

.sgeg-widget ul { list-style: none; margin: 0; padding: 0; }
.sgeg-widget li { padding: .35rem 0; border-bottom: 1px solid var(--sgeg-hairline); font-size: .93rem; }
.sgeg-widget li:last-child { border-bottom: 0; }

/* ===========================================================================
   10. Footer
   =========================================================================== */

.sgeg-footer {
	background: var(--sgeg-blue);
	color: rgba(255,255,255,.80);
	padding-block: 3rem 1.5rem;
	font-size: .92rem;
}

/* The stripe carries the brand device into the footer edge, matching the
   navy page headers so the page is bookended rather than just ending. */
.sgeg-footer::before {
	content: "";
	display: block;
	height: 10px;
	margin-block: -3rem 3rem;
	margin-inline: calc(50% - 50vw);
	background: linear-gradient(
		to bottom,
		var(--sgeg-yellow) 0 50%,
		var(--sgeg-cyan) 50% 100%
	);
}

.sgeg-footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.sgeg-footer a:hover, .sgeg-footer a:focus-visible { color: var(--sgeg-yellow); }

.sgeg-footer__grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	margin-bottom: 2.5rem;
}

@media (min-width: 700px) { .sgeg-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }

.sgeg-footer h2, .sgeg-footer h3 { color: #fff; }

.sgeg-footer__title {
	font-family: var(--sgeg-font-heading);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sgeg-cyan);
	margin-bottom: .9rem;
}

.sgeg-footer ul { list-style: none; margin: 0; padding: 0; }
.sgeg-footer li { padding: .28rem 0; }

.sgeg-footer__brand-name {
	font-family: var(--sgeg-font-heading);
	font-weight: 700;
	font-size: 1.15rem;
	color: #fff;
	margin-bottom: .4rem;
}

.sgeg-footer__tagline { color: var(--sgeg-yellow); font-family: var(--sgeg-font-heading); font-weight: 600; }

.sgeg-footer__bottom {
	border-top: 1px solid rgba(255,255,255,.22);
	padding-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: space-between;
	font-size: .85rem;
	color: rgba(255,255,255,.72);
}

/* ===========================================================================
   11. Notices
   =========================================================================== */

.sgeg-notice {
	border: 1px solid var(--sgeg-hairline);
	border-left: 4px solid var(--sgeg-cyan);
	background: var(--sgeg-teal-tint);
	border-radius: var(--sgeg-radius-sm);
	padding: 1rem 1.15rem;
	margin-bottom: 1.5rem;
}

.sgeg-notice--private {
	border-left-color: var(--sgeg-blue);
}

/* ===========================================================================
   12. Motion
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ===========================================================================
   13. Brand banner
   =========================================================================== */

.sgeg-banner {
	display: block;
	border-radius: var(--sgeg-radius);
	overflow: hidden;
	box-shadow: var(--sgeg-shadow-raised);
	line-height: 0;
}

.sgeg-banner img {
	width: 100%;
	height: auto;
	display: block;
}