/* RPA Theme 0.2.1 (D29-26): the WP Custom Layout bridge. The header and footer looks WPCL
   2.2.4's settings can't reach, over WPCL's own classes. Loads last (handle rpa-theme-wpcl,
   wp_enqueue_scripts priority 110, dependency wpcl-styles; only when WPCL is active).
   Owner: Builder A. Budget 8 KB.
   Every rule is scoped under .wpcl-header or .wpcl-footer and names the Agent Workspace task
   (T1-T5) that retires it. Rules that needed !important (and why) are listed here.

   !important: none. Checked against wp-custom-layout.css 2.2.4 (164 uses) and its inline
   CSS: the forced properties don't overlap these rules. The footer critical CSS forces only
   colour, size and weight on headings inside [class*="wpcl-box-"] blocks (colour inherits
   the footer text, #fff, so nothing here fights it); the responsive CSS's phone panel rule
   (.wpcl-navigation.wpcl-is-open) has no !important and two classes, which three classes
   here outweigh; the forced display rules (menu toggle, CTAs) aren't touched.

   Staging's WPCL custom CSS (0.14.0's "Option 1" look, 2,765 characters, left exactly as
   found: D29-26, P0) prints after WPCL's stylesheet and before this file. Where it fights
   Option B, the rule here matches or outweighs its selector (`.wpcl-header.wpcl-header …` is
   three classes, so the brand rules name .wpcl-brand too) and says so; those parts retire
   when that custom CSS is cleared, whatever WPCL ships. */

/* Custom CSS: a 1px #e2e2e2 line under the header would split it from the crimson band. */
.wpcl-header {
	border-bottom: 0;
}

/* No task (0.2.1, staging 2026-10-20): with header_width_mode "contained" WPCL paints the
   crimson only on .wpcl-header-shell (max 1280px), so wider screens showed white bars on both
   sides of the header. The outer strip takes the shell's deep crimson so the colour runs edge
   to edge while the logo and menu stay in the 1280px column. "full" mode would stretch them. */
.wpcl-header.wpcl-width-contained {
	background-color: var(--rpa-red-deep, #7a0103);
}

/* Custom CSS: column-reverse put the tagline above the name; Option B reads name, then tagline. */
.wpcl-header .wpcl-brand-copy {
	flex-direction: column;
}

/* T1 (brand text: case, spacing, wrapping tagline). Retire when WPCL ships brand_letter_spacing
   and the tagline options. Three classes outweigh the custom CSS's uppercase name. */
.wpcl-header .wpcl-brand .wpcl-brand-name {
	font-family: var(--rpa-font-heading);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: none;
}

/* T1: the tagline uppercase and spaced, gold-soft from header_subcaption_color (7.4:1); the
   custom CSS's #8f0a0e (1.2:1 on the crimson header) and weight 700 are undone here. */
.wpcl-header .wpcl-brand .wpcl-tagline {
	margin: 4px 0 0;
	color: var(--wpcl-subcaption-color);
	font-family: var(--rpa-font-heading);
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.25;
	text-transform: uppercase;
}

/* T1 (tagline_wrap): on phones the whole tagline shows on two lines instead of
   "RICHARDSON–PLANO ALUMNI CH…" (WPCL: max-width 260px, 170px at 480, nowrap, ellipsis). */
@media (max-width: 699px) {
	.wpcl-header .wpcl-brand .wpcl-tagline {
		max-width: none;
		overflow: visible;
		white-space: normal;
		text-overflow: clip;
	}

	/* The brand shrinks before the shell wraps, so the menu button stays on its row at 320px
	   (a zero basis: a wrapping flex row moves an item down before it shrinks it). */
	.wpcl-header .wpcl-brand {
		flex: 1 1 0%;
	}
}

/* T2 (button typography): the Sign in CTA in Oswald, uppercase, spaced, 44px tall. The
   radius is the custom CSS's 4px undone (header_button_type square, Option B's 2px). */
.wpcl-header .wpcl-button {
	min-height: 44px;
	border-radius: var(--rpa-radius-btn);
	font-family: var(--rpa-font-heading);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* T4 (logo dimensions): the seal's box keeps 549:600 before the image arrives. */
.wpcl-header .wpcl-logo {
	aspect-ratio: 549 / 600;
}

/* No task (settings can't set it): focus on the crimson header is gold-soft, 3px (7.4:1 on
   #7a0103). WPCL's own button focus rule (two classes) and the custom CSS's
   `.wpcl-header :is(a,button):focus-visible` (2px currentColor) are named to outweigh them, as
   are the menu's (2px, and a transparent outline on dropdown links) and the submenu toggle's. */
.wpcl-header :focus-visible,
.wpcl-header :is(a, button):focus-visible,
.wpcl-header .wpcl-button:focus-visible,
.wpcl-header .wpcl-nav-list a:focus-visible,
.wpcl-header .wpcl-submenu-toggle:focus-visible {
	outline: 3px solid var(--rpa-gold-soft);
	outline-offset: 2px;
}

/* No task (WPCL's inline responsive CSS): the phone menu panel on dark crimson, square, with
   a faint border, so the open menu reads as part of the header (white text 16:1 on #4a0002).
   Under the 1100px menu breakpoint (§WPCL settings). */
@media (max-width: 1100px) {
	.wpcl-header .wpcl-navigation.wpcl-is-open {
		border-color: rgba(255, 255, 255, 0.12);
		border-radius: 0;
		background: var(--rpa-red-dark);
		box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
	}
}

/* T3 (footer heading typography): block headings in Oswald, uppercase, spaced, white. */
.wpcl-footer .wpcl-footer-block-heading {
	color: #fff;
	font-family: var(--rpa-font-heading);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* T3: the footer title ("Richardson–Plano Alumni Chapter") to match, at the heading size
   (WPCL makes it 1.25 times larger, three lines in a fifth of the footer). */
.wpcl-footer .wpcl-footer-title {
	font-size: var(--wpcl-footer-heading-size, 14px);
	font-family: var(--rpa-font-heading);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* No task (settings cover the colour; the size is CSS): the legal line, #8a8a8a 5.3:1 on
   #151515, under a #333 rule (the custom CSS's #cfcfcf on its p and links is matched). */
.wpcl-footer .wpcl-footer-bottom {
	border-top-color: #333;
	color: #8a8a8a;
	font-size: 13px;
}

.wpcl-footer .wpcl-footer-bottom :is(p, a) {
	color: #8a8a8a;
}

/* Custom CSS: the footer tagline was red Oswald capitals; Option B shows it as plain caption
   text (#cfcfcf from footer_subcaption_color, 11.7:1). */
.wpcl-footer .wpcl-footer-tagline {
	color: var(--wpcl-subcaption-color);
	font-family: var(--rpa-font-body);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* No task: focus on the dark footer is gold-soft too (12.2:1 on #151515); the custom CSS's
   `.wpcl-footer a:focus-visible` is named to outweigh it. */
.wpcl-footer :focus-visible,
.wpcl-footer a:focus-visible {
	outline: 3px solid var(--rpa-gold-soft);
	outline-offset: 2px;
}

/* No task (0.2.1): the chapter email wrapped mid-address ("…gmail.co / m") in the narrow
   contact column. Keep it whole on wider screens; phones may still wrap it at the @. */
@media (min-width: 600px) {
	.wpcl-footer .wpcl-footer-contact-info a[href^="mailto:"] {
		overflow-wrap: normal;
		word-break: normal;
		white-space: nowrap;
	}
}