/* ==========================================================================
   NFP ENGINE — UTILITY CLASSES
   Gladding Digital Design System, layer 2.

   These replace the old database-imported GB Global Styles: same class
   names, same behaviour, but versioned in the theme and delivered by
   Composer — never imported per site again. Patterns reference these
   classes; tokens (style.css + GP Global Colors) supply the values, so
   every site renders them in its own branding.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTIONS — full-width bands with responsive vertical rhythm
   -------------------------------------------------------------------------- */

.section-xs,
.section-sm,
.section-md,
.section-lg,
.section-xl {
	max-width: 2000px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}

.section-xs { padding-top: var(--spacing-xl);  padding-bottom: var(--spacing-xl); }
.section-sm { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
.section-md { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }
.section-lg { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); }
.section-xl { padding-top: 10rem;              padding-bottom: 10rem; }

@media (max-width: 1024px) {
	.section-xs { padding-top: var(--spacing-lg);  padding-bottom: var(--spacing-lg); }
	.section-sm { padding-top: var(--spacing-xl);  padding-bottom: var(--spacing-xl); }
	.section-md { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
	.section-lg { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }
	.section-xl { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); }
}

@media (max-width: 767px) {
	.section-xs,
	.section-sm,
	.section-md,
	.section-lg,
	.section-xl {
		padding-left: var(--spacing-sm);
		padding-right: var(--spacing-sm);
	}

	.section-xs { padding-top: var(--spacing-md);  padding-bottom: var(--spacing-md); }
	.section-sm { padding-top: var(--spacing-lg);  padding-bottom: var(--spacing-lg); }
	.section-md { padding-top: var(--spacing-xl);  padding-bottom: var(--spacing-xl); }
	.section-lg { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
	.section-xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }
}

/* --------------------------------------------------------------------------
   WRAPPERS — centred max-width content containers
   -------------------------------------------------------------------------- */

.wrapper-xs,
.wrapper-sm,
.wrapper-md,
.wrapper-lg,
.wrapper-xl,
.wrapper-full {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.wrapper-xs  { max-width: 640px; }
.wrapper-sm  { max-width: 800px; }
.wrapper-md  { max-width: var(--gb-container-width); }
.wrapper-lg  { max-width: 1400px; }
.wrapper-xl  { max-width: 1600px; }

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */

.card,
.card--bordered,
.card--accent {
	padding: var(--spacing-lg);
	border-radius: var(--radius-lg);
}

.card {
	background-color: var(--base);
}

.card--bordered {
	background-color: var(--base);
	border: 1px solid var(--border-default);
}

.card--accent {
	background-color: var(--accent-tint-90);
	border: 1px solid var(--accent-alpha-20);
}

.card-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--contrast);
	margin-bottom: var(--spacing-sm);
}

.card-text {
	color: var(--contrast-2);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.btn-primary,
.btn-secondary {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px;
	padding: var(--spacing-sm) var(--spacing-lg);
	border: 2px solid transparent;
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast),
		box-shadow var(--transition-fast),
		transform var(--transition-fast);
}

.btn-primary,
.btn-primary:visited {
	background-color: var(--accent);
	color: var(--base);
}

.btn-secondary,
.btn-secondary:visited {
	background-color: transparent;
	color: var(--accent);
	border-color: var(--accent);
}

/* Use with .btn-secondary when the button sits on a dark surface. */
.btn-secondary--inverse,
.btn-secondary--inverse:visited {
	color: var(--base);
	border-color: var(--base);
}

/*
 * Defend button colours and decoration from GeneratePress's generic
 * a:focus state. Hover rules follow these so pointer feedback still wins.
 */
.btn-primary:focus {
	background-color: var(--accent);
	color: var(--base);
	text-decoration: none;
}

.btn-secondary:focus {
	background-color: transparent;
	color: var(--accent);
	border-color: var(--accent);
	text-decoration: none;
}

.btn-secondary--inverse:focus {
	color: var(--base);
	border-color: var(--base);
}

@media (hover: hover) {
	.btn-primary:hover {
		background-color: var(--accent-shade-20);
		color: var(--base);
		box-shadow: var(--shadow-md);
		text-decoration: none;
		transform: translateY(-2px);
	}

	.btn-secondary:hover {
		background-color: var(--accent);
		color: var(--base);
		box-shadow: var(--shadow-md);
		text-decoration: none;
		transform: translateY(-2px);
	}

	.btn-secondary--inverse:hover {
		background-color: var(--base);
		color: var(--contrast);
		border-color: var(--base);
	}
}

.btn-primary:active,
.btn-secondary:active {
	box-shadow: inset 0 2px 4px var(--contrast-alpha-20);
	text-decoration: none;
	transform: translateY(0);
}

.btn-primary:active {
	background-color: var(--accent-shade-20);
	color: var(--base);
}

.btn-secondary:active {
	background-color: var(--accent);
	color: var(--base);
	border-color: var(--accent);
}

.btn-secondary--inverse:active {
	background-color: var(--base);
	color: var(--contrast);
	border-color: var(--base);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible {
	outline: 3px solid var(--base);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--accent);
}

.btn-primary:disabled,
.btn-secondary:disabled {
	box-shadow: none;
	cursor: not-allowed;
	opacity: 0.55;
	transform: none;
}

/* Make the shared screen-reader utility usable for keyboard skip links. */
.sr-only:focus,
.sr-only:active {
	position: fixed;
	top: var(--spacing-sm);
	left: var(--spacing-sm);
	z-index: 10000;
	width: auto;
	height: auto;
	padding: var(--spacing-sm) var(--spacing-md);
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background-color: var(--base);
	color: var(--contrast);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
	.btn-primary,
	.btn-secondary {
		transition: none;
	}

	.btn-primary:hover,
	.btn-primary:active,
	.btn-secondary:hover,
	.btn-secondary:active {
		transform: none;
	}
}

@media (forced-colors: active) {
	.btn-primary,
	.btn-secondary {
		border-color: ButtonText;
	}

	.btn-primary:focus-visible,
	.btn-secondary:focus-visible {
		outline-color: Highlight;
		box-shadow: none;
	}
}

/* --------------------------------------------------------------------------
   SINGLE EVENTS — authored content flows between the hero and details
   Block Elements, so give it a comfortable reading column.
   -------------------------------------------------------------------------- */

.single-gd_event .site-main > article {
	max-width: 800px; /* match .wrapper-sm */
	margin-left: auto;
	margin-right: auto;
	padding: var(--spacing-xl) var(--spacing-md);
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   -------------------------------------------------------------------------- */

.tagline {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--spacing-xs);
}

.headline {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--contrast);
	margin-bottom: var(--spacing-md);
}

@media (max-width: 1024px) {
	.headline { font-size: 2rem; }
}

@media (max-width: 767px) {
	.headline { font-size: 1.75rem; }
}