/* -----------------------------------------------------------
   SJH — main stylesheet (pure PHP rebuild)
   Mobile-first, WCAG 2.1 AA. 18px base. 44px+ tap targets.
   Ported from wp-content/themes/sjh-theme/assets/css/main.css
   and extended with admin + auth styles.
   ----------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:wght@500;600;700&display=swap');

:root {
	/* Brand palette extracted from the SJH logo:
	   #82002c = burgundy (primary brand), #f4a032 = gold (accent/CTA). */
	--sjh-burgundy:     #82002c;
	--sjh-burgundy-ink: #5c001f;
	--sjh-burgundy-mid: #a01641;
	--sjh-gold:         #f4a032;
	--sjh-gold-ink:     #d08018;
	--sjh-gold-soft:    #fdebd0;

	/* Backwards-compatible aliases so older selectors keep working. */
	--sjh-navy:         var(--sjh-burgundy);
	--sjh-navy-ink:     var(--sjh-burgundy-ink);
	--sjh-red:          var(--sjh-gold);
	--sjh-red-ink:      var(--sjh-gold-ink);

	--sjh-cream:        #fdf3e0;
	--sjh-slate:        #443431;
	--sjh-slate-mid:    #7a6966;
	--sjh-white:        #ffffff;
	--sjh-gray-50:      #faf7f4;
	--sjh-gray-100:     #efe8e3;
	--sjh-gray-200:     #ddd2cb;
	--sjh-gray-400:     #9c8d86;
	--sjh-black:        #1a0f0c;
	--sjh-success:      #1a7f4b;
	--sjh-danger:       #b7332b;
	--sjh-warning:      #c97d1e;

	--sjh-font-display: 'Lora', Georgia, 'Times New Roman', serif;
	--sjh-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--sjh-radius: 6px;
	--sjh-radius-lg: 12px;

	--sjh-shadow-sm: 0 1px 2px rgba(92, 0, 31, 0.10);
	--sjh-shadow-md: 0 8px 24px rgba(92, 0, 31, 0.14);

	--sjh-container: 1200px;
	--sjh-container-narrow: 800px;
	--sjh-pad: 1.5rem;

	--sjh-focus: 3px solid var(--sjh-gold);
}

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

html {
	font-size: 18px;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--sjh-font-body);
	color: var(--sjh-black);
	background: var(--sjh-white);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--sjh-navy); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--sjh-red); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
	outline: var(--sjh-focus);
	outline-offset: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--sjh-font-display);
	color: var(--sjh-navy-ink);
	line-height: 1.2;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 4vw + 1rem, 3.5rem); }
h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem); }

p { margin: 0 0 1em; }

/* ========== Utilities ========== */
.sjh-container { max-width: var(--sjh-container); margin: 0 auto; padding: 0 var(--sjh-pad); }
.sjh-container--narrow { max-width: var(--sjh-container-narrow); }
.sjh-text-center { text-align: center; }
.sjh-muted { color: var(--sjh-slate-mid); }

.sjh-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sjh-skiplink {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--sjh-navy);
	color: var(--sjh-white);
	padding: 1rem 1.5rem;
	z-index: 9999;
}
.sjh-skiplink:focus { left: 0; }

/* ========== Buttons ========== */
.sjh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1.75rem;
	font-family: var(--sjh-font-body);
	font-weight: 600;
	font-size: 1.05rem;
	text-decoration: none;
	border-radius: var(--sjh-radius);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.sjh-btn--primary { background: var(--sjh-burgundy); color: var(--sjh-white); border-color: var(--sjh-burgundy); }
.sjh-btn--primary:hover { background: var(--sjh-burgundy-ink); border-color: var(--sjh-burgundy-ink); color: var(--sjh-white); }
.sjh-btn--accent { background: var(--sjh-gold); color: var(--sjh-burgundy-ink); border-color: var(--sjh-gold); }
.sjh-btn--accent:hover { background: var(--sjh-gold-ink); border-color: var(--sjh-gold-ink); color: var(--sjh-white); }
.sjh-btn--ghost { background: transparent; color: var(--sjh-burgundy); border-color: var(--sjh-burgundy); }
.sjh-btn--ghost:hover { background: var(--sjh-burgundy); color: var(--sjh-white); }
.sjh-btn--small { min-height: 36px; padding: 0.4rem 0.9rem; font-size: 0.9rem; }
.sjh-btn--pill { border-radius: 999px; padding: 0.6rem 1.5rem; min-height: 44px; font-size: 1rem; }
.sjh-btn--danger { background: var(--sjh-danger); color: var(--sjh-white); border-color: var(--sjh-danger); }
.sjh-btn--danger:hover { background: #8a2520; border-color: #8a2520; }

/* ========== Header / Nav ========== */
.sjh-site-header {
	background: var(--sjh-white);
	border-bottom: 1px solid var(--sjh-gray-100);
	position: sticky; top: 0; z-index: 100;
}
.sjh-site-header__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 1rem var(--sjh-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.sjh-site-header__brand { display: flex; align-items: center; }
.sjh-site-header__brand a { line-height: 0; }
.sjh-site-header__brand img { height: 54px; width: auto; max-height: 54px; }
@media (min-width: 900px) {
	.sjh-site-header__inner { padding: 1.25rem 2rem; }
	.sjh-site-header__brand img { height: 72px; max-height: 72px; }
}
.sjh-logo-fallback { text-decoration: none; color: var(--sjh-burgundy); font-family: var(--sjh-font-display); font-size: 1.25rem; font-weight: 700; }

.sjh-nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 48px; height: 48px;
	padding: 12px 10px;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.sjh-nav-toggle__bar {
	display: block; height: 3px; background: var(--sjh-burgundy);
	transition: transform 200ms ease, opacity 200ms ease;
}
.sjh-nav-toggle[aria-expanded="true"] .sjh-nav-toggle__bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.sjh-nav-toggle[aria-expanded="true"] .sjh-nav-toggle__bar:nth-child(2) { opacity: 0; }
.sjh-nav-toggle[aria-expanded="true"] .sjh-nav-toggle__bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.sjh-primary-nav {
	display: none;
	width: 100%;
	margin-top: 0.5rem;
}
.sjh-primary-nav.is-open { display: block; }
.sjh-primary-nav ul { list-style: none; margin: 0; padding: 0; }
.sjh-primary-nav .sjh-menu-item a {
	display: block;
	padding: 0.75rem 0;
	font-weight: 600;
	color: var(--sjh-burgundy-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--sjh-gray-100);
}
.sjh-primary-nav .sjh-menu-item a:hover,
.sjh-primary-nav .sjh-menu-item a[aria-current="page"] { color: var(--sjh-burgundy); }
.sjh-primary-nav__ctas { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 0; }
.sjh-primary-nav__ctas .sjh-btn { width: 100%; }

@media (min-width: 900px) {
	.sjh-nav-toggle { display: none; }
	.sjh-primary-nav {
		display: flex !important;
		width: auto;
		margin-top: 0;
		align-items: center;
		gap: 2rem;
	}
	.sjh-primary-nav ul { display: flex; gap: 2rem; }
	.sjh-primary-nav .sjh-menu-item a {
		padding: 0.5rem 0;
		border-bottom: 0;
		font-size: 1rem;
		white-space: nowrap;
	}
	.sjh-primary-nav__ctas { flex-direction: row; padding: 0; }
	.sjh-primary-nav__ctas .sjh-btn { width: auto; }
}
@media (min-width: 1100px) {
	.sjh-primary-nav ul { gap: 2.5rem; }
}

/* ----- Nav: "Training" hover dropdown ----- */
.sjh-submenu { list-style: none; margin: 0; padding: 0; }
.sjh-caret { font-size: 0.7em; opacity: 0.75; }
/* Mobile (stacked menu): children show indented under the parent. */
.sjh-submenu li a {
	display: block;
	padding: 0.6rem 0 0.6rem 1.25rem;
	font-weight: 500;
	color: var(--sjh-burgundy-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--sjh-gray-100);
}
.sjh-submenu li a:hover { color: var(--sjh-burgundy); }

@media (min-width: 900px) {
	.sjh-primary-nav .sjh-has-submenu { position: relative; }
	/* Scoped under .sjh-primary-nav so this beats `.sjh-primary-nav ul { display:flex }`
	   above — otherwise that higher-specificity rule keeps the submenu visible always. */
	.sjh-primary-nav .sjh-submenu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 230px;
		background: #fff;
		border: 1px solid var(--sjh-gray-200);
		border-radius: var(--sjh-radius);
		box-shadow: var(--sjh-shadow-md);
		padding: 0.4rem 0;
		display: none;
		z-index: 60;
	}
	.sjh-primary-nav .sjh-has-submenu:hover > .sjh-submenu,
	.sjh-primary-nav .sjh-has-submenu:focus-within > .sjh-submenu { display: block; }
	.sjh-submenu li a {
		padding: 0.55rem 1.1rem;
		font-size: 0.95rem;
		white-space: nowrap;
		border-bottom: 0;
	}
	.sjh-submenu li a:hover { background: var(--sjh-cream, #f7f3ef); color: var(--sjh-burgundy); }
}

/* ========== Hero ========== */
.sjh-hero {
	position: relative;
	background: linear-gradient(rgba(92,0,31,0.72), rgba(23,0,8,0.82)), var(--sjh-burgundy-ink);
	background-size: cover;
	background-position: center;
	color: var(--sjh-white);
	padding: 6rem 0 7rem;
	text-align: center;
}
.sjh-hero[data-bg] { background-image: linear-gradient(rgba(92,0,31,0.72), rgba(23,0,8,0.82)), var(--hero-bg, none); }
.sjh-hero__title { color: var(--sjh-white); font-family: var(--sjh-font-display); font-weight: 700; }
.sjh-hero__intro { font-size: 1.25rem; max-width: 680px; margin: 1rem auto 2rem; opacity: 0.95; }
.sjh-hero__ctas { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.sjh-hero .sjh-btn--primary { background: var(--sjh-gold); color: var(--sjh-burgundy-ink); border-color: var(--sjh-gold); }
.sjh-hero .sjh-btn--primary:hover { background: var(--sjh-gold-ink); border-color: var(--sjh-gold-ink); color: var(--sjh-white); }
.sjh-hero .sjh-btn--ghost { color: var(--sjh-white); border-color: var(--sjh-white); }
.sjh-hero .sjh-btn--ghost:hover { background: var(--sjh-white); color: var(--sjh-burgundy); }

.sjh-page-hero {
	position: relative;
	background: linear-gradient(rgba(92,0,31,0.72), rgba(23,0,8,0.82)), var(--sjh-burgundy-ink);
	background-size: cover;
	background-position: center;
	color: var(--sjh-white);
	padding: 4rem 0;
	text-align: center;
}
.sjh-page-hero[data-bg] { background-image: linear-gradient(rgba(92,0,31,0.72), rgba(23,0,8,0.82)), var(--hero-bg, none); }
.sjh-page-hero h1 { color: var(--sjh-white); margin-bottom: 0.5rem; }
.sjh-page-hero p { color: rgba(255,255,255,0.92); max-width: 680px; margin: 0 auto; font-size: 1.1rem; }

/* ========== Generic sections ========== */
.sjh-section-title { margin-bottom: 1rem; }
.sjh-section-body { font-size: 1.1rem; color: var(--sjh-slate); }
.sjh-mission, .sjh-vision { padding: 4rem 0; }
.sjh-mission { background: var(--sjh-cream); }
.sjh-vision  { background: var(--sjh-white); }

/* ========== Services grid ========== */
.sjh-services { padding: 4rem 0; background: var(--sjh-gray-50); }
.sjh-services__grid {
	list-style: none; margin: 2rem 0; padding: 0;
	display: grid; gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.sjh-services__item {
	background: var(--sjh-white);
	border: 1px solid var(--sjh-gray-100);
	border-radius: var(--sjh-radius-lg);
	padding: 1.5rem 1rem;
	display: flex; flex-direction: column; align-items: center; gap: 1rem;
	text-align: center;
	box-shadow: var(--sjh-shadow-sm);
}
.sjh-services__icon { width: 96px; height: 96px; object-fit: contain; color: var(--sjh-navy); }
.sjh-services__icon svg { width: 100%; height: 100%; }
.sjh-services__label { font-weight: 600; color: var(--sjh-navy-ink); font-size: 1.05rem; }

/* ========== Callouts ========== */
.sjh-callout { padding: 3rem 0; }
.sjh-callout--work-study { background: var(--sjh-cream); }
.sjh-callout--julies-list { background: var(--sjh-white); }
.sjh-callout__inner {
	display: grid; gap: 1.5rem;
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 768px) {
	.sjh-callout__inner { grid-template-columns: 2fr 1fr; }
	.sjh-callout__cta { text-align: right; }
}

/* ========== Testimonials ========== */
.sjh-testimonials {
	position: relative;
	padding: 4rem 0;
	background: linear-gradient(rgba(92,0,31,0.85), rgba(23,0,8,0.90)), url('/assets/images/stj-home-testimonial.jpg') center/cover no-repeat;
	color: var(--sjh-white);
}
.sjh-testimonials .sjh-section-title { color: var(--sjh-white); }
.sjh-testimonials__carousel {
	position: relative;
	max-width: 700px; margin: 2rem auto 0;
	overflow: hidden;
}
.sjh-testimonials__track {
	display: flex;
	list-style: none; padding: 0; margin: 0;
	transition: transform 400ms ease;
}
.sjh-testimonials__slide {
	flex: 0 0 100%;
	padding: 0 1rem;
}
.sjh-testimonial__quote {
	font-family: var(--sjh-font-display);
	font-size: 1.3rem;
	font-style: italic;
	margin: 0 0 1rem;
	line-height: 1.5;
}
.sjh-testimonial__attr { font-weight: 600; color: var(--sjh-cream); }
.sjh-testimonials__controls {
	display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem;
}
.sjh-testimonials__btn {
	min-width: 48px; min-height: 48px;
	background: transparent;
	color: var(--sjh-white);
	border: 2px solid var(--sjh-white);
	border-radius: 50%;
	font-size: 1.2rem; cursor: pointer;
}
.sjh-testimonials__btn:hover { background: var(--sjh-white); color: var(--sjh-burgundy); }

/* ========== Prayers ========== */
.sjh-prayers { padding: 4rem 0; background: var(--sjh-cream); }
.sjh-prayers__grid {
	display: grid; gap: 1.5rem;
	grid-template-columns: 1fr;
	margin-top: 2rem;
}
@media (min-width: 768px) { .sjh-prayers__grid { grid-template-columns: 1fr 1fr; } }
.sjh-prayer {
	background: var(--sjh-white); padding: 2rem; border-radius: var(--sjh-radius-lg);
	box-shadow: var(--sjh-shadow-sm);
}
.sjh-prayer__heading { color: var(--sjh-burgundy); font-size: 1.3rem; }
.sjh-prayer__body { font-family: var(--sjh-font-display); font-style: italic; color: var(--sjh-slate); }

/* ========== CTA pair ========== */
.sjh-cta-pair { padding: 4rem 0; }
.sjh-cta-pair__grid {
	display: grid; gap: 1.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .sjh-cta-pair__grid { grid-template-columns: 1fr 1fr; } }
.sjh-cta {
	padding: 2.5rem 2rem;
	border-radius: var(--sjh-radius-lg);
	text-align: center;
	color: var(--sjh-white);
}
.sjh-cta--request { background: var(--sjh-burgundy); }
.sjh-cta--volunteer { background: var(--sjh-burgundy-ink); }
.sjh-cta__heading { color: var(--sjh-white); }
.sjh-cta__body { color: rgba(255,255,255,0.92); margin-bottom: 1.25rem; }
.sjh-cta .sjh-btn--primary { background: var(--sjh-gold); color: var(--sjh-burgundy-ink); border-color: var(--sjh-gold); }
.sjh-cta .sjh-btn--primary:hover { background: var(--sjh-gold-ink); color: var(--sjh-white); border-color: var(--sjh-gold-ink); }

/* ========== Partners (auto-scrolling marquee) ========== */
.sjh-partners { padding: 4rem 0; background: var(--sjh-white); overflow: hidden; }
.sjh-partners__marquee {
	margin-top: 2rem;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sjh-partners__track {
	list-style: none; margin: 0; padding: 0;
	display: flex;
	gap: 3rem;
	width: max-content;
	align-items: center;
	animation: sjh-marquee 60s linear infinite;
	will-change: transform;
}
.sjh-partners__marquee:hover .sjh-partners__track { animation-play-state: paused; }
.sjh-partners__item {
	flex: 0 0 auto;
	background: var(--sjh-gray-50);
	border-radius: var(--sjh-radius);
	padding: 1rem 1.25rem;
	display: flex; align-items: center; justify-content: center;
	height: 110px; width: 180px;
}
.sjh-partners__item img {
	max-height: 80px; max-width: 100%; width: auto; object-fit: contain;
}
@keyframes sjh-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.sjh-partners__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
	.sjh-partners__marquee { mask-image: none; -webkit-mask-image: none; }
}

/* ========== Page / archive ========== */
.sjh-page { padding: 3rem 0; }
.sjh-page__header { text-align: center; margin-bottom: 2rem; }
.sjh-page__content :is(h2,h3) { margin-top: 2em; }
.sjh-page__content img { border-radius: var(--sjh-radius); }
.sjh-archive-list { list-style: none; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sjh-card { background: var(--sjh-white); border: 1px solid var(--sjh-gray-100); border-radius: var(--sjh-radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.sjh-card__media img { width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.sjh-card__body { padding: 1.25rem; }
.sjh-card__title { margin: 0 0 0.5rem; }
.sjh-card__meta { color: var(--sjh-slate-mid); font-size: 0.9rem; }

/* ========== Forms ========== */
.sjh-form { display: grid; gap: 1rem; }
.sjh-form-row { display: grid; gap: 0.35rem; }
.sjh-form-row--split { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .sjh-form-row--split { grid-template-columns: 1fr 1fr; } }
.sjh-label { font-weight: 600; color: var(--sjh-navy-ink); }
.sjh-label .sjh-req { color: var(--sjh-red); margin-left: 0.25rem; }
.sjh-input, .sjh-select, .sjh-textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--sjh-gray-200);
	border-radius: var(--sjh-radius);
	background: var(--sjh-white);
	font: inherit;
	color: var(--sjh-black);
}
.sjh-textarea { min-height: 140px; resize: vertical; }
.sjh-input:focus, .sjh-select:focus, .sjh-textarea:focus {
	outline: var(--sjh-focus); outline-offset: 2px;
	border-color: var(--sjh-navy);
}
.sjh-help { font-size: 0.9rem; color: var(--sjh-slate-mid); }
.sjh-error { color: var(--sjh-danger); font-size: 0.95rem; margin-top: 0.25rem; }

.sjh-notice { padding: 1rem 1.25rem; border-radius: var(--sjh-radius); margin: 1rem 0; }
.sjh-notice--success { background: #e4f4ec; color: #1a7f4b; border: 1px solid #bde3ce; }
.sjh-notice--error { background: #fde9e7; color: var(--sjh-danger); border: 1px solid #f2c2bd; }
.sjh-notice--info { background: var(--sjh-cream); color: var(--sjh-navy-ink); border: 1px solid #e8d9b8; }

/* ========== News ========== */
.sjh-news-index { padding: 3rem 0; }
.sjh-news-article { padding: 3rem 0; }
.sjh-news-article__meta { color: var(--sjh-slate-mid); margin-bottom: 1rem; }

/* ========== Footer ========== */
.sjh-site-footer { background: var(--sjh-burgundy-ink); color: var(--sjh-cream); padding: 3rem 0 0; }
.sjh-site-footer a { color: var(--sjh-cream); }
.sjh-site-footer a:hover { color: var(--sjh-white); }
.sjh-site-footer__inner {
	max-width: var(--sjh-container);
	margin: 0 auto;
	padding: 0 var(--sjh-pad);
	display: grid; gap: 2rem;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .sjh-site-footer__inner { grid-template-columns: 2fr 1fr 1fr; } }
.sjh-site-footer__heading { color: var(--sjh-white); font-size: 1.1rem; margin-bottom: 1rem; }
.sjh-site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.sjh-site-footer__col li { padding: 0.25rem 0; }
.sjh-phone, .sjh-address { color: var(--sjh-burgundy-ink); font-style: normal; display: block; margin: 0.5rem 0; }
.sjh-site-footer .sjh-phone, .sjh-site-footer .sjh-address { color: var(--sjh-cream); }
.sjh-socials { display: flex; gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.sjh-site-footer__legal {
	border-top: 1px solid rgba(255,255,255,0.12);
	margin-top: 2.5rem;
	padding: 1rem var(--sjh-pad);
	max-width: var(--sjh-container);
	margin-left: auto; margin-right: auto;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
	color: rgba(255,255,255,0.7);
	font-size: 0.95rem;
}

/* ========== Admin ========== */
.sjh-admin { min-height: 100vh; background: var(--sjh-gray-50); }
.sjh-admin-header {
	background: var(--sjh-burgundy-ink);
	color: var(--sjh-white);
	padding: 0.75rem var(--sjh-pad);
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem;
}
.sjh-admin-header a { color: var(--sjh-white); }
.sjh-admin-header__brand { font-family: var(--sjh-font-display); font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.sjh-admin-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; }
.sjh-admin-nav a { text-decoration: none; font-weight: 500; }
.sjh-admin-nav a.is-active { color: var(--sjh-cream); border-bottom: 2px solid var(--sjh-cream); }
.sjh-admin-body { max-width: 1200px; margin: 2rem auto; padding: 0 var(--sjh-pad); }

.sjh-table { width: 100%; border-collapse: collapse; background: var(--sjh-white); border-radius: var(--sjh-radius); overflow: hidden; box-shadow: var(--sjh-shadow-sm); }
.sjh-table th, .sjh-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--sjh-gray-100); }
.sjh-table th { background: var(--sjh-gray-50); font-weight: 600; color: var(--sjh-burgundy-ink); }
.sjh-table tr:last-child td { border-bottom: 0; }
.sjh-table .row-actions { display: flex; gap: 0.5rem; }

.sjh-card-panel { background: var(--sjh-white); border-radius: var(--sjh-radius-lg); padding: 1.5rem; box-shadow: var(--sjh-shadow-sm); margin-bottom: 1.5rem; }

.sjh-login { min-height: 100vh; display: grid; place-items: center; background: var(--sjh-cream); padding: var(--sjh-pad); }
.sjh-login__box { background: var(--sjh-white); padding: 2.5rem 2rem; border-radius: var(--sjh-radius-lg); box-shadow: var(--sjh-shadow-md); max-width: 420px; width: 100%; }
.sjh-login h1 { text-align: center; margin-bottom: 0.25rem; font-size: 1.6rem; }
.sjh-login p { text-align: center; color: var(--sjh-slate-mid); margin-bottom: 2rem; }

.sjh-pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.sjh-pill--active { background: #e4f4ec; color: #1a7f4b; }
.sjh-pill--inactive { background: var(--sjh-gray-100); color: var(--sjh-slate); }

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}