@charset "UTF-8";
/*
Theme Name:  St. James Performing Arts
Theme URI:   https://threeringfocus.com/
Author:      Three Ring Focus
Author URI:  https://threeringfocus.com/
Description: Custom, lightweight, WCAG 2.1 AA-minded WordPress theme for the St. James High School Performing Arts department.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sjpa
Tags:        accessibility-ready, custom-colors, featured-images
*/

/* ==========================================================================
   TABLE OF CONTENTS
   1.  Design tokens
   2.  Reset / base
   3.  Accessibility utilities
   4.  Typography
   5.  Buttons
   6.  Layout helpers
   7.  Site header
   8.  Home hero
   9.  Interior banner + page header
   10. Content / entry styles
   11. Site footer
   12. Reduced motion / forced colors / print
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
	/* Brand palette */
	--sj-blue:        #196a99;
	--sj-blue-light:  #7eadd4;
	--sj-gray-dark:   #333333;
	--sj-gray-med:    #666666;
	--sj-white:       #ffffff;
	--sj-black:       #000000;

	/* Derived / utility */
	--sj-blue-hover:  #12506f; /* darkened brand blue, still >= 4.5:1 on white */
	--sj-rule:        rgba(51, 51, 51, 0.15);

	/* Semantic */
	--sj-text:        var(--sj-gray-dark);
	--sj-text-muted:  var(--sj-gray-med);

	/* Eyebrow kickers on light backgrounds. Medium gray, 5.74:1 on white.
	   (The hero overrides this to white on its dark background.) */
	--sj-eyebrow:     var(--sj-gray-med);
	--sj-link:        var(--sj-blue);
	--sj-focus:       var(--sj-blue);
	--sj-focus-alt:   var(--sj-white); /* focus ring on dark backgrounds */

	/* Typography */
	--sj-font-body:     roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--sj-font-display:  acumin-pro-extra-condensed, "Oswald", "Arial Narrow", sans-serif;
	--sj-font-accent:   itc-american-typewriter, "Courier New", Courier, serif;

	--sj-fs-body:  1rem;      /* 16px */
	--sj-lh-body:  1.65;

	/* Metrics */
	--sj-header-height: 40px;
	--sj-logo-width:    160px;
	--sj-accent-bar:    4px; /* footer top rule only */

	/* Full-screen nav overlay */
	--sj-nav-overlay-bg: rgba(24, 104, 149, 0.9);
	--sj-nav-z:          1000;
	--sj-wrap:          1200px;
	--sj-wrap-narrow:   820px;
	--sj-gutter:        24px;
	--sj-banner-height: 500px;

	/* Motion */
	--sj-transition: 180ms ease-in-out;
}

@media (max-width: 782px) {
	:root {
		--sj-header-height: 38px;
		--sj-logo-width:    116px;
		--sj-gutter:        18px;
		--sj-banner-height: 300px;
	}
}


/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */

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

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

body {
	margin: 0;
	background-color: var(--sj-white);
	color: var(--sj-text);
	font-family: var(--sj-font-body);
	font-size: var(--sj-fs-body);
	font-weight: 400;
	line-height: var(--sj-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

figure { margin: 0 0 1.5em; }

hr {
	border: 0;
	border-top: 1px solid var(--sj-rule);
	margin: 2.5em 0;
}

/* ==========================================================================
   3. ACCESSIBILITY UTILITIES
   ========================================================================== */

/* Visually hidden but available to assistive tech. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	white-space: nowrap;
	word-wrap: normal !important;
}

/* Skip link — visible once focused. */
.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999999;
	transform: translateY(-200%);
	display: inline-block;
	padding: 12px 20px;
	background: var(--sj-white);
	color: var(--sj-blue);
	font-family: var(--sj-font-accent);
	font-weight: 500;
	font-size: 0.9375rem;
	text-decoration: underline;
	border: 2px solid var(--sj-blue);
}

.skip-link:focus {
	transform: translateY(0);
}

/* Global focus treatment. Uses :focus-visible where supported and falls back
   to :focus so keyboard users are never left without an indicator. */
:focus {
	outline: 3px solid var(--sj-focus);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: 3px solid var(--sj-focus);
	outline-offset: 2px;
}

/* On dark surfaces the ring flips to white so it stays visible. */
.sjpa-hero :focus-visible {
	outline-color: var(--sj-focus-alt);
}

/* <main tabindex="-1"> is a programmatic skip-link target, not an interactive
   control, so it does not need a visible ring of its own. */
.sjpa-main:focus { outline: none; }


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.sjpa-h1, .sjpa-h2, .sjpa-h3 {
	font-family: var(--sj-font-display);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--sj-gray-dark);
	margin: 0 0 0.35em;
}

h1, .sjpa-h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); }
h2, .sjpa-h2 { font-size: clamp(2.125rem, 4.5vw, 3.5rem); }
h3, .sjpa-h3 { font-size: clamp(1.625rem, 3vw, 2.375rem); }
h4           { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
h5           { font-size: 1.25rem; }
h6           { font-size: 1.0625rem; letter-spacing: 0.06em; }

p { margin: 0 0 1.25em; }

a {
	color: var(--sj-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var(--sj-transition);
}

a:hover,
a:focus { color: var(--sj-blue-hover); }

strong, b { font-weight: 700; }

blockquote {
	margin: 2em 0;
	padding: 0.25em 0 0.25em 1.25em;
	border-left: 4px solid var(--sj-blue-light);
	color: var(--sj-gray-med);
	font-size: 1.125rem;
}

/* Eyebrow — small typewriter kicker above a headline. */
.sjpa-eyebrow {
	display: block;
	font-family: var(--sj-font-accent);
	font-weight: 500;
	font-size: clamp(1.0625rem, 1.9vw, 1.6rem);
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 0.5em;
	color: var(--sj-eyebrow);
}


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.sjpa-btn,
.wp-block-button__link,
button,
input[type="submit"] {
	display: inline-block;
	font-family: var(--sj-font-accent);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	padding: 0.85em 1.6em;
	border-radius: 0;
	border: 2px solid var(--sj-blue);
	background-color: var(--sj-blue);
	color: var(--sj-white);
	cursor: pointer;
	transition: background-color var(--sj-transition),
	            color var(--sj-transition),
	            border-color var(--sj-transition);
}

/* Primary: blue fill -> white fill with blue text on hover/focus. */
.sjpa-btn--primary:hover,
.sjpa-btn--primary:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background-color: var(--sj-white);
	color: var(--sj-blue);
	border-color: var(--sj-blue);
}

/* Secondary: white fill with blue text -> blue fill with white text. */
.sjpa-btn--secondary {
	background-color: var(--sj-white);
	color: var(--sj-blue);
	border-color: var(--sj-white);
}

.sjpa-btn--secondary:hover,
.sjpa-btn--secondary:focus {
	background-color: var(--sj-blue);
	color: var(--sj-white);
	border-color: var(--sj-blue);
}

/* Compact variant used in the header bar. */
.sjpa-btn--sm {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	padding: 0.45em 0.95em;
	border-width: 1px;
}

/* Slightly larger CTA used inside the hero. */
.sjpa-btn--lg {
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	padding: 0.7em 1.5em;
}


/* ==========================================================================
   6. LAYOUT HELPERS
   ========================================================================== */

.sjpa-wrap {
	width: 100%;
	max-width: var(--sj-wrap);
	margin-inline: auto;
	padding-inline: var(--sj-gutter);
}

.sjpa-wrap--narrow { max-width: var(--sj-wrap-narrow); }
.sjpa-wrap--full   { max-width: none; }

.sjpa-section { padding-block: clamp(48px, 7vw, 96px); }

.sjpa-site { display: flex; flex-direction: column; min-height: 100vh; }
.sjpa-main { flex: 1 0 auto; }


/* ==========================================================================
   7. SITE HEADER
   ========================================================================== */

.sjpa-header {
	position: relative;
	z-index: 100;
	background-color: var(--sj-white);
}

.sjpa-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: var(--sj-header-height);
	padding-inline: var(--sj-gutter);
	/* Reserve room for the absolutely-positioned logo. */
	padding-left: calc(var(--sj-logo-width) + var(--sj-gutter));
}

/* Logo overhangs the bar and sits above the hero below it. */
.sjpa-header__brand {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 110;
	width: var(--sj-logo-width);
	line-height: 0;
	text-decoration: none;
}

.sjpa-header__brand img {
	width: 100%;
	height: auto;
}

/* "PERFORMING ARTS" wordmark, optically centered on the viewport rather than
   on the space left between the logo and the buttons. */
.sjpa-header__wordmark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(450px, 36vw);
	pointer-events: none;
}

.sjpa-header__wordmark img {
	width: 100%;
	height: auto;
}

/* Right-hand cluster: buttons, divider, menu trigger. */
.sjpa-header__actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Tapered vertical divider — pure CSS, no image request. */
.sjpa-header__divider {
	flex: 0 0 auto;
	width: 1px;
	height: 28px;
	margin-inline: 12px;
	background-image: linear-gradient(
		to bottom,
		transparent 0%,
		var(--sj-gray-med) 50%,
		transparent 100%
	);
}

/* --------------------------------------------------------------------------
   Hamburger trigger
   -------------------------------------------------------------------------- */

.sjpa-nav-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sj-blue);
	cursor: pointer;
}

/* The button is a bare icon, so no fill/color swap on hover — just the bars. */
.sjpa-nav-toggle:hover,
.sjpa-nav-toggle:focus { background: none; color: var(--sj-blue-hover); }

.sjpa-nav-toggle__bars {
	display: block;
	width: 26px;
	height: 18px;
	position: relative;
}

.sjpa-nav-toggle__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: currentColor;
}

.sjpa-nav-toggle__bars span:nth-child(1) { top: 0; }
.sjpa-nav-toggle__bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.sjpa-nav-toggle__bars span:nth-child(3) { bottom: 0; }


/* --------------------------------------------------------------------------
   Full-screen nav overlay
   -------------------------------------------------------------------------- */

/* Lives outside .sjpa-site so the rest of the page can be made inert while it
   is open. Closed state uses visibility rather than display so it can fade,
   and so its links stay out of the tab order and the accessibility tree. */
.sjpa-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--sj-nav-z);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--sj-header-height) + 24px) var(--sj-gutter) 40px;
	background-color: var(--sj-nav-overlay-bg);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transition: opacity 240ms ease, visibility 0s linear 240ms;
}

.sjpa-nav-open .sjpa-nav-overlay {
	opacity: 1;
	visibility: visible;
	transition: opacity 240ms ease, visibility 0s linear 0s;
}

/* Close button sits where the hamburger was, so the control reads as one
   element flipping between states. */
.sjpa-nav-close {
	position: absolute;
	top: 0;
	right: var(--sj-gutter);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: var(--sj-header-height);
	padding: 0;
	border: 0;
	background: none;
	color: var(--sj-white);
	cursor: pointer;
}

.sjpa-nav-close:hover,
.sjpa-nav-close:focus { background: none; color: var(--sj-white); }

.sjpa-nav-close svg { width: 22px; height: 22px; }

.sjpa-nav {
	width: 100%;
	max-width: 900px;
	margin-inline: auto;
}

.sjpa-nav__menu,
.sjpa-nav__submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.sjpa-nav__menu > li { margin-bottom: 0.15em; }

.sjpa-nav__menu a {
	display: inline-block;
	padding: 0.12em 0.2em;
	font-family: var(--sj-font-display);
	font-weight: 500;
	font-size: clamp(1.75rem, 4.4vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--sj-white);
	text-decoration: none;
}

.sjpa-nav__menu a:hover,
.sjpa-nav__menu a:focus { text-decoration: underline; }

.sjpa-nav__menu .current-menu-item > a,
.sjpa-nav__menu .current_page_item > a,
.sjpa-nav__menu a[aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Parent items pair a real link with a separate disclosure button, so the
   parent page stays reachable and the submenu is independently operable. */
.sjpa-nav__item-parent > a { margin-right: 0.1em; }

.sjpa-nav__toggle-sub {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9em;
	height: 1.9em;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background: none;
	color: var(--sj-white);
	font-size: 0.9rem;
	vertical-align: middle;
	cursor: pointer;
	transition: background-color var(--sj-transition), transform var(--sj-transition);
}

.sjpa-nav__toggle-sub:hover,
.sjpa-nav__toggle-sub:focus {
	background-color: rgba(255, 255, 255, 0.18);
	color: var(--sj-white);
	border-color: var(--sj-white);
}

.sjpa-nav__toggle-sub svg {
	width: 0.8em;
	height: 0.8em;
	transition: transform var(--sj-transition);
}

.sjpa-nav__toggle-sub[aria-expanded="true"] svg { transform: rotate(180deg); }

.sjpa-nav__submenu {
	display: none;
	margin: 0.35em 0 0.9em;
}

.sjpa-nav__item-parent.is-open > .sjpa-nav__submenu { display: block; }

/* Submenu links are distinguished by size, not by dimming: at 92% opacity the
   text fell to 4.44:1 over the worst-case backdrop, just under AA. */
.sjpa-nav__submenu a {
	font-size: clamp(1.0625rem, 2vw, 1.375rem);
	font-weight: 500;
	letter-spacing: 0.05em;
}

/* Lock background scrolling while the overlay is open. */
.sjpa-nav-open { overflow: hidden; }

/* Without JavaScript the overlay cannot be opened, so it falls back to a
   static block below the header and the trigger is hidden. */
.no-js .sjpa-nav-toggle,
.no-js .sjpa-nav-close { display: none; }

.no-js .sjpa-nav-overlay {
	position: static;
	opacity: 1;
	visibility: visible;
	padding-block: 28px;
	background-color: var(--sj-blue);
	backdrop-filter: none;
}

.no-js .sjpa-nav__submenu { display: block; }

@media (max-width: 782px) {
	.sjpa-header__inner { min-height: 52px; }
}

/* Below this width the centered wordmark would collide with the buttons, so
   it drops out — the department name still reaches assistive tech via the
   logo alt text and the document title. */
@media (max-width: 860px) {
	.sjpa-header__wordmark { display: none; }
}

@media (max-width: 480px) {
	.sjpa-header__divider { margin-inline: 7px; }
	.sjpa-btn--sm { font-size: 0.6875rem; padding: 0.4em 0.65em; letter-spacing: 0.06em; }
}


/* ==========================================================================
   8. HOME HERO
   ========================================================================== */

.sjpa-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(420px, 62vh, 700px);
	padding: clamp(72px, 10vw, 120px) var(--sj-gutter);
	background-color: var(--sj-black);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--sj-white);
	text-align: center;
	overflow: hidden;
}

/* Scrim only renders when a background image is present, so the black
   default stays pure black. */
.sjpa-hero--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.55);
	pointer-events: none;
}

.sjpa-hero__content {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin-inline: auto;
}

.sjpa-hero__eyebrow { color: var(--sj-white); }

.sjpa-hero__title {
	color: var(--sj-white);
	margin: 0 0 0.45em;
	/* Sized against the reference comp: ~93px at a 1280px viewport. */
	font-size: clamp(2.75rem, 7.4vw, 6rem);
	line-height: 0.9;
	letter-spacing: 0.005em;
}

.sjpa-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 0.5em;
}


/* --------------------------------------------------------------------------
   Featured production — poster left, copy right
   -------------------------------------------------------------------------- */

.sjpa-featured__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 4vw, 48px);
	align-items: start;
}

/* Poster column is capped rather than proportional, so the artwork never
   balloons on very wide screens. Ratio matches the comp at ~1280px. */
@media (min-width: 783px) {
	.sjpa-featured__grid {
		grid-template-columns: minmax(200px, 285px) minmax(0, 1fr);
		gap: clamp(40px, 6vw, 88px);
	}
}

.sjpa-featured__grid--no-media { grid-template-columns: minmax(0, 1fr); }

.sjpa-featured__media img {
	width: 100%;
	height: auto;
	box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.45);
}

/* On small screens the poster sits above the copy, centred and capped so it
   does not dominate the viewport. */
@media (max-width: 782px) {
	.sjpa-featured__media {
		max-width: 240px;
		margin-inline: auto;
	}
}

.sjpa-featured__title {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	margin-bottom: 0.45em;
}

.sjpa-featured__text {
	color: var(--sj-text-muted);
	line-height: 1.85;
}

.sjpa-featured__text > *:last-child { margin-bottom: 0; }

.sjpa-featured__actions { margin: 1.75em 0 0; }


/* ==========================================================================
   9. INTERIOR BANNER + PAGE HEADER
   ========================================================================== */

.sjpa-banner {
	height: var(--sj-banner-height);
	background-color: var(--sj-gray-dark);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	border-bottom: var(--sj-accent-bar) solid var(--sj-blue-light);
}

.sjpa-page-header {
	padding-block: clamp(32px, 5vw, 56px) clamp(16px, 2vw, 24px);
}

.sjpa-page-header__title { margin-bottom: 0; }

.sjpa-page-header__meta {
	font-family: var(--sj-font-accent);
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sj-gray-med);
	margin: 0.75em 0 0;
}


/* ==========================================================================
   10. CONTENT / ENTRY STYLES
   ========================================================================== */

.sjpa-entry { padding-bottom: clamp(48px, 7vw, 96px); }

.sjpa-entry > *:last-child { margin-bottom: 0; }

.sjpa-entry ul,
.sjpa-entry ol { margin: 0 0 1.25em; padding-left: 1.35em; }

.sjpa-entry li { margin-bottom: 0.4em; }

.sjpa-entry table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5em;
}

.sjpa-entry th,
.sjpa-entry td {
	border: 1px solid var(--sj-rule);
	padding: 0.6em 0.8em;
	text-align: left;
}

.sjpa-entry th {
	background-color: #f4f7fa;
	font-family: var(--sj-font-accent);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.875rem;
}

.sjpa-entry .alignleft  { float: left;  margin: 0.3em 1.5em 1em 0; }
.sjpa-entry .alignright { float: right; margin: 0.3em 0 1em 1.5em; }
.sjpa-entry .aligncenter { margin-inline: auto; }

/* Post list */
.sjpa-list { display: grid; gap: clamp(28px, 4vw, 48px); }

.sjpa-card__title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0.2em; }
.sjpa-card__title a { text-decoration: none; }
.sjpa-card__title a:hover,
.sjpa-card__title a:focus { text-decoration: underline; }

.sjpa-card__meta {
	font-family: var(--sj-font-accent);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sj-gray-med);
	margin-bottom: 0.75em;
}

/* Pagination — paginate_links( 'type' => 'list' ) outputs ul.page-numbers. */
.sjpa-pagination { padding-block: 32px; }

.sjpa-pagination ul.page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sjpa-pagination li .page-numbers {
	display: inline-block;
	min-width: 2.5em;
	padding: 0.45em 0.6em;
	text-align: center;
	text-decoration: none;
	border: 2px solid var(--sj-blue);
	color: var(--sj-blue);
	font-family: var(--sj-font-accent);
	font-weight: 500;
}

.sjpa-pagination li .page-numbers:hover,
.sjpa-pagination li .page-numbers:focus,
.sjpa-pagination li .page-numbers.current {
	background-color: var(--sj-blue);
	color: var(--sj-white);
}

/* Search form */
.sjpa-search-form { display: flex; gap: 8px; flex-wrap: wrap; }

.sjpa-search-form input[type="search"] {
	flex: 1 1 220px;
	font-family: var(--sj-font-body);
	font-size: 1rem;
	padding: 0.7em 0.85em;
	border: 2px solid var(--sj-gray-med);
	border-radius: 0;
	color: var(--sj-gray-dark);
	background: var(--sj-white);
}

.sjpa-search-form input[type="search"]:focus {
	border-color: var(--sj-blue);
}


/* ==========================================================================
   11. SITE FOOTER
   ========================================================================== */

/* Footer colors are tokenized so the whole block can be re-skinned from here.
   It is light by default because logo-footer.png has a dark wordmark; a dark
   footer needs a reversed logo asset plus new values for these tokens. */
.sjpa-footer {
	--sj-footer-bg:     var(--sj-white);
	--sj-footer-text:   var(--sj-gray-dark);
	--sj-footer-link:   var(--sj-gray-dark);
	--sj-footer-hover:  var(--sj-blue);
	--sj-footer-rule:   rgba(51, 51, 51, 0.15);

	/* Social pips. Brand blue rather than the comp's light blue: a #7eadd4 pip
	   on white is 2.38:1, under the 3:1 that WCAG 1.4.11 requires for a
	   control's visual boundary. Override here if you accept that trade. */
	--sj-social-bg:       var(--sj-blue);
	--sj-social-icon:     var(--sj-white);
	--sj-social-bg-hover: var(--sj-gray-dark);
	--sj-social-size:     34px;

	/* Set negative once the production photo strip is hooked into
	   sjpa_footer_top, so the shark fin overlaps it. */
	--sjpa-footer-logo-offset: 0px;

	background-color: var(--sj-footer-bg);
	color: var(--sj-footer-text);
	border-top: var(--sj-accent-bar) solid var(--sj-blue-light);
	padding-block: clamp(32px, 4vw, 48px) 0;
	text-align: center;
}

/* Logo lockup — fin + wordmark, centered. */
.sjpa-footer__brand {
	margin-top: var(--sjpa-footer-logo-offset);
	position: relative;
	z-index: 2;
}

.sjpa-footer__brand a {
	display: inline-block;
	line-height: 0;
}

.sjpa-footer__brand img {
	width: 100%;
	max-width: 500px;
	margin-inline: auto;
}

/* Footer nav links: Acumin Pro Extra Condensed, Medium. */
.sjpa-footer__nav { margin-top: clamp(20px, 3vw, 32px); }

.sjpa-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px clamp(10px, 1.1vw, 15px);
}

.sjpa-footer__nav a {
	display: inline-block;
	font-family: var(--sj-font-display);
	font-weight: 500;
	font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sj-footer-link);
	text-decoration: none;
}

.sjpa-footer__nav a:hover,
.sjpa-footer__nav a:focus {
	color: var(--sj-footer-hover);
	text-decoration: underline;
}

/* Social icon row. */
.sjpa-social {
	list-style: none;
	margin: clamp(20px, 3vw, 30px) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.sjpa-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sj-social-size);
	height: var(--sj-social-size);
	border-radius: 50%;
	background-color: var(--sj-social-bg);
	color: var(--sj-social-icon);
	font-size: calc(var(--sj-social-size) * 0.47);
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--sj-transition);
}

.sjpa-social a:hover,
.sjpa-social a:focus { background-color: var(--sj-social-bg-hover); }

/* Reserve the pip's box before the Font Awesome kit swaps <i> for <svg>, so
   the row does not jump on load. */
.sjpa-social i,
.sjpa-social svg { display: block; }

.sjpa-footer__contact {
	margin-top: clamp(16px, 2vw, 24px);
	font-family: var(--sj-font-body);
	font-size: 0.9375rem;
	color: var(--sj-footer-text);
}

.sjpa-footer__contact a,
.sjpa-footer__credit a {
	color: var(--sj-blue);
	text-decoration: underline;
}

.sjpa-footer__contact a:hover,
.sjpa-footer__contact a:focus,
.sjpa-footer__credit a:hover,
.sjpa-footer__credit a:focus { color: var(--sj-blue-hover); }

.sjpa-footer__bar {
	margin-top: clamp(28px, 4vw, 44px);
	padding-block: 16px;
	border-top: 1px solid var(--sj-footer-rule);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	justify-content: space-between;
	align-items: center;
	font-size: 0.8125rem;
	color: var(--sj-text-muted);
	text-align: left;
}

.sjpa-footer__bar p { margin: 0; }

@media (max-width: 600px) {
	.sjpa-footer__bar { justify-content: center; text-align: center; }
}


/* ==========================================================================
   12. REDUCED MOTION / FORCED COLORS / PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	.sjpa-btn,
	.wp-block-button__link,
	button,
	input[type="submit"] {
		border: 2px solid ButtonText;
	}
	:focus-visible { outline: 3px solid Highlight; }
}

@media print {
	.sjpa-header__actions,
	.sjpa-footer,
	.skip-link { display: none !important; }
	body { color: #000; background: #fff; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}