/* =========================================================================
   JURISFRONT — DESIGN SYSTEM
   Phase 1 + 2: variables, typography, spacing, containers, buttons,
   breakpoints, and the base header/footer/mobile-nav structure.
   Vanilla CSS only — no framework, no preprocessor.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. CSS VARIABLES (design tokens)
   ------------------------------------------------------------------------- */
:root {

	/* Brand colors */
	--jf-navy: #0B1F33;
	--jf-navy-light: #142B43;
	--jf-gold: #C9A24A;
	--jf-gold-light: #D8B968;
	--jf-cream: #F7F4ED;
	--jf-white: #FFFFFF;
	--jf-text: #1D2630;
	--jf-muted: #66717C;
	--jf-border: #E5E0D6;

	/* Feedback / utility (derived, not part of the core brand palette) */
	--jf-overlay: rgba(11, 31, 51, 0.72);

	/* Typography */
	--jf-font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--jf-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Type scale */
	--jf-text-xs: 0.8125rem;   /* 13px */
	--jf-text-sm: 0.9375rem;   /* 15px */
	--jf-text-base: 1rem;      /* 16px */
	--jf-text-lg: 1.125rem;    /* 18px */
	--jf-text-xl: 1.375rem;    /* 22px */
	--jf-text-2xl: 1.75rem;    /* 28px */
	--jf-text-3xl: 2.25rem;    /* 36px */
	--jf-text-4xl: 3rem;       /* 48px */
	--jf-text-5xl: 3.75rem;    /* 60px */

	/* Spacing scale */
	--jf-space-1: 0.25rem;
	--jf-space-2: 0.5rem;
	--jf-space-3: 0.75rem;
	--jf-space-4: 1rem;
	--jf-space-5: 1.5rem;
	--jf-space-6: 2rem;
	--jf-space-7: 3rem;
	--jf-space-8: 4rem;
	--jf-space-9: 6rem;
	--jf-space-10: 8rem;

	/* Layout */
	--jf-container-max: 1200px;
	--jf-container-padding: var(--jf-space-5);
	--jf-radius-sm: 4px;
	--jf-radius-md: 8px;
	--jf-header-height: 88px;
	--jf-header-height-mobile: 64px;

	/* Motion — subtle only, per brand guidelines */
	--jf-transition-fast: 150ms ease;
	--jf-transition-base: 220ms ease;

	/* Shadow — used sparingly (cards, modal, header on scroll) */
	--jf-shadow-sm: 0 1px 2px rgba(11, 31, 51, 0.06);
	--jf-shadow-md: 0 8px 24px rgba(11, 31, 51, 0.10);
	--jf-shadow-lg: 0 20px 48px rgba(11, 31, 51, 0.18);
}

/* -------------------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background-color: var(--jf-white);
	color: var(--jf-text);
	font-family: var(--jf-font-sans);
	font-size: var(--jf-text-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

/* Site-icon / emblem images should never stretch. */
img.jf-logo-img {
	width: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

input,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
}

/* Visible, accessible focus state for keyboard navigation. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--jf-gold);
	outline-offset: 2px;
}

/* Skip link for keyboard/screen-reader users. */
.jf-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	z-index: 10000;
	background: var(--jf-navy);
	color: var(--jf-white);
	padding: var(--jf-space-3) var(--jf-space-5);
	border-radius: var(--jf-radius-sm);
}

.jf-skip-link:focus {
	left: var(--jf-space-4);
	top: var(--jf-space-4);
}

/* Screen-reader-only utility (WordPress standard name kept for compatibility). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.jf-heading {
	font-family: var(--jf-font-serif);
	font-weight: 600;
	line-height: 1.2;
	color: var(--jf-navy);
	margin: 0 0 var(--jf-space-4);
}

h1 { font-size: var(--jf-text-4xl); }
h2 { font-size: var(--jf-text-3xl); }
h3 { font-size: var(--jf-text-2xl); }
h4 { font-size: var(--jf-text-xl); }
h5 { font-size: var(--jf-text-lg); }
h6 { font-size: var(--jf-text-base); }

p {
	margin: 0 0 var(--jf-space-4);
	color: var(--jf-text);
}

.jf-eyebrow {
	font-family: var(--jf-font-sans);
	font-size: var(--jf-text-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jf-gold);
}

.jf-lede {
	font-size: var(--jf-text-lg);
	color: var(--jf-muted);
}

/* -------------------------------------------------------------------------
   4. LAYOUT / CONTAINERS
   ------------------------------------------------------------------------- */
.jf-container {
	width: 100%;
	max-width: var(--jf-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--jf-container-padding);
	padding-right: var(--jf-container-padding);
}

.jf-container--narrow {
	max-width: 860px;
}

.jf-section {
	padding-top: var(--jf-space-8);
	padding-bottom: var(--jf-space-8);
}

/* -------------------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------------------- */
.jf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--jf-space-2);
	font-family: var(--jf-font-sans);
	font-size: var(--jf-text-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: var(--jf-space-3) var(--jf-space-5);
	border-radius: var(--jf-radius-sm);
	border: 1px solid transparent;
	transition: background-color var(--jf-transition-fast), color var(--jf-transition-fast), border-color var(--jf-transition-fast), transform var(--jf-transition-fast);
	white-space: nowrap;
}

.jf-btn--primary {
	background-color: var(--jf-gold);
	color: var(--jf-navy);
	border-color: var(--jf-gold);
}

.jf-btn--primary:hover {
	background-color: var(--jf-gold-light);
	border-color: var(--jf-gold-light);
}

.jf-btn--outline {
	background-color: transparent;
	color: var(--jf-navy);
	border-color: var(--jf-navy);
}

.jf-btn--outline:hover {
	background-color: var(--jf-navy);
	color: var(--jf-white);
}

.jf-btn--outline-light {
	background-color: transparent;
	color: var(--jf-white);
	border-color: rgba(255, 255, 255, 0.4);
}

.jf-btn--outline-light:hover {
	background-color: var(--jf-white);
	color: var(--jf-navy);
}

.jf-btn--sm {
	padding: var(--jf-space-2) var(--jf-space-4);
	font-size: var(--jf-text-xs);
}

/* -------------------------------------------------------------------------
   6. CARDS (base — extended by article/category cards in later phases)
   ------------------------------------------------------------------------- */
.jf-card {
	background-color: var(--jf-white);
	border: 1px solid var(--jf-border);
	border-radius: var(--jf-radius-md);
	transition: box-shadow var(--jf-transition-base), transform var(--jf-transition-base);
}

.jf-card:hover {
	box-shadow: var(--jf-shadow-md);
}

/* -------------------------------------------------------------------------
   7. ARTICLE / PROSE STYLES
   Shared by single.php's article body. Comfortable reading width is set
   by the caller (single.php wraps this in .jf-container--narrow plus its
   own max-width); this section only governs typography inside it.
   ------------------------------------------------------------------------- */
.jf-prose {
	font-size: var(--jf-text-lg);
	line-height: 1.8;
	color: var(--jf-text);
	text-align: left;
}

.jf-prose h2,
.jf-prose h3,
.jf-prose h4 {
	margin-top: var(--jf-space-7);
	margin-bottom: var(--jf-space-4);
}

.jf-prose h2 { font-size: var(--jf-text-2xl); }
.jf-prose h3 { font-size: var(--jf-text-xl); }
.jf-prose h4 { font-size: var(--jf-text-lg); }

.jf-prose p {
	margin-bottom: var(--jf-space-5);
}

.jf-prose a {
	color: var(--jf-navy);
	text-decoration: underline;
	text-decoration-color: var(--jf-gold);
	text-underline-offset: 3px;
	transition: color var(--jf-transition-fast);
}

.jf-prose a:hover {
	color: var(--jf-gold);
}

.jf-prose blockquote {
	margin: var(--jf-space-6) 0;
	padding: var(--jf-space-4) var(--jf-space-5);
	background-color: var(--jf-cream);
	border-left: 3px solid var(--jf-gold);
	font-family: var(--jf-font-serif);
	font-size: var(--jf-text-xl);
	font-style: italic;
	color: var(--jf-navy);
}

.jf-prose blockquote p:last-child {
	margin-bottom: 0;
}

.jf-prose ul,
.jf-prose ol {
	margin: 0 0 var(--jf-space-5);
	padding-left: var(--jf-space-5);
}

.jf-prose ul { list-style: disc; }
.jf-prose ol { list-style: decimal; }

.jf-prose li {
	margin-bottom: var(--jf-space-2);
}

.jf-prose img {
	border-radius: var(--jf-radius-sm);
	margin: var(--jf-space-5) 0;
}

.jf-prose figure {
	margin: var(--jf-space-6) 0;
}

.jf-prose figcaption {
	font-size: var(--jf-text-sm);
	color: var(--jf-muted);
	text-align: center;
	margin-top: var(--jf-space-2);
}

.jf-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--jf-space-6) 0;
	font-size: var(--jf-text-base);
}

.jf-prose th,
.jf-prose td {
	text-align: left;
	padding: var(--jf-space-3) var(--jf-space-4);
	border-bottom: 1px solid var(--jf-border);
}

.jf-prose th {
	font-family: var(--jf-font-sans);
	font-weight: 600;
	color: var(--jf-navy);
	border-bottom: 2px solid var(--jf-navy);
}

.jf-prose hr {
	border: none;
	border-top: 1px solid var(--jf-border);
	margin: var(--jf-space-7) 0;
}

/* -------------------------------------------------------------------------
   8. SITE STRUCTURE
   ------------------------------------------------------------------------- */
.jf-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.jf-main {
	flex: 1 0 auto;
}

/* -------------------------------------------------------------------------
   9. HEADER
   ------------------------------------------------------------------------- */
.jf-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background-color: var(--jf-white);
	border-bottom: 1px solid var(--jf-border);
}

.jf-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jf-space-6);
	height: var(--jf-header-height);
}

.jf-brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.jf-brand-wordmark img {
	/* Final QA: modestly larger than the original 44px so the logo reads
	   with a bit more presence next to the nav — still well inside the
	   88px header (--jf-header-height), artwork/proportions untouched
	   (width: auto), mobile emblem sizing below is unaffected. */
	height: 52px;
	width: auto;
}

.jf-brand-emblem img {
	height: 40px;
	width: 40px;
	object-fit: contain;
}

/* Desktop shows the wordmark; mobile shows the emblem. Toggled via CSS,
   not JS, so there is no flash of the wrong logo. */
.jf-brand-emblem {
	display: none;
}

.jf-nav-primary {
	display: flex;
	align-items: center;
	gap: var(--jf-space-7);
	flex: 1;
	justify-content: center;
}

.jf-nav-menu {
	display: flex;
	align-items: center;
	gap: var(--jf-space-6);
}

/* Nav states — Normal: dark navy. Hover: gold. Active (current page):
   navy text with a permanent, subtle gold underline (a restrained
   treatment, not the full gold-text hover state). */
.jf-nav-menu a {
	font-size: var(--jf-text-sm);
	font-weight: 500;
	color: var(--jf-navy);
	padding: var(--jf-space-2) 0;
	position: relative;
	transition: color var(--jf-transition-fast);
}

.jf-nav-menu a:hover {
	color: var(--jf-gold);
}

.jf-nav-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	background-color: var(--jf-gold);
	transform: scaleX(0);
	transition: transform var(--jf-transition-base);
}

.jf-nav-menu a:hover::after {
	transform: scaleX(1);
}

.jf-nav-menu .current-menu-item > a {
	color: var(--jf-navy);
}

.jf-nav-menu .current-menu-item > a::after {
	transform: scaleX(1);
	opacity: 0.6;
}

.jf-header-actions {
	display: flex;
	align-items: center;
	gap: var(--jf-space-4);
	flex-shrink: 0;
}

/* Phase 6 QA: the search icon previously linked straight to an empty
   /?s= results page with no way to type a query. It now toggles a small
   inline search field anchored under the icon — same icon, same
   position, no page navigation until a real term is submitted. */
.jf-search {
	position: relative;
}

.jf-search-panel {
	position: absolute;
	top: calc(100% + var(--jf-space-2));
	right: 0;
	display: flex;
	align-items: center;
	gap: var(--jf-space-2);
	background-color: var(--jf-white);
	border: 1px solid var(--jf-border);
	border-radius: var(--jf-radius-sm);
	box-shadow: 0 8px 24px rgba(11, 31, 51, 0.12);
	padding: var(--jf-space-2);
	z-index: 501;
}

.jf-search-panel[hidden] {
	display: none;
}

.jf-search-panel input[type="search"] {
	width: 220px;
	max-width: 60vw;
	border: 1px solid var(--jf-border);
	border-radius: var(--jf-radius-sm);
	padding: var(--jf-space-2) var(--jf-space-3);
	font-family: var(--jf-font-sans);
	font-size: var(--jf-text-sm);
	color: var(--jf-text);
	background-color: var(--jf-white);
}

.jf-search-panel input[type="search"]:focus {
	outline: 2px solid var(--jf-navy);
	outline-offset: 1px;
}

.jf-search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: transparent;
	border: none;
	color: var(--jf-navy);
	flex-shrink: 0;
}

.jf-search-submit:hover {
	background-color: var(--jf-cream);
}

.jf-search-submit svg {
	width: 18px;
	height: 18px;
}

.jf-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: transparent;
	border: none;
	color: var(--jf-navy);
	transition: background-color var(--jf-transition-fast);
}

.jf-icon-btn:hover {
	background-color: var(--jf-cream);
}

.jf-icon-btn svg {
	width: 20px;
	height: 20px;
}

.jf-menu-toggle {
	display: none;
}

/* -------------------------------------------------------------------------
   10. MOBILE NAVIGATION DRAWER
   ------------------------------------------------------------------------- */
.jf-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 900;
	visibility: hidden;
}

.jf-mobile-nav__backdrop {
	position: absolute;
	inset: 0;
	background-color: var(--jf-overlay);
	opacity: 0;
	transition: opacity var(--jf-transition-base);
}

.jf-mobile-nav__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(340px, 86vw);
	background-color: var(--jf-white);
	box-shadow: var(--jf-shadow-lg);
	padding: var(--jf-space-6) var(--jf-space-5);
	transform: translateX(100%);
	transition: transform var(--jf-transition-base);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.jf-mobile-nav.is-open {
	visibility: visible;
}

.jf-mobile-nav.is-open .jf-mobile-nav__backdrop {
	opacity: 1;
}

.jf-mobile-nav.is-open .jf-mobile-nav__panel {
	transform: translateX(0);
}

.jf-mobile-nav__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--jf-space-6);
}

.jf-mobile-nav__header img {
	height: 32px;
	width: 32px;
	object-fit: contain;
}

.jf-mobile-nav__close {
	background: none;
	border: none;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--jf-navy);
}

.jf-mobile-nav__close:hover {
	background-color: var(--jf-cream);
}

.jf-mobile-nav__menu {
	display: flex;
	flex-direction: column;
	gap: var(--jf-space-1);
}

.jf-mobile-nav__menu a {
	display: block;
	padding: var(--jf-space-3) var(--jf-space-1);
	font-size: var(--jf-text-lg);
	font-family: var(--jf-font-serif);
	font-weight: 600;
	color: var(--jf-navy);
	border-bottom: 1px solid var(--jf-border);
	transition: color var(--jf-transition-fast);
}

.jf-mobile-nav__menu a:hover,
.jf-mobile-nav__menu a:focus-visible {
	color: var(--jf-gold);
}

.jf-mobile-nav__menu .current-menu-item > a {
	color: var(--jf-navy);
	border-bottom-color: var(--jf-gold);
}

.jf-mobile-nav__footer {
	margin-top: auto;
	padding-top: var(--jf-space-6);
}

.jf-mobile-nav__footer .jf-btn {
	width: 100%;
}

/* Lock page scroll while the mobile nav is open. */
body.jf-nav-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   11. FOOTER
   ------------------------------------------------------------------------- */
.jf-footer {
	background-color: var(--jf-navy);
	color: rgba(255, 255, 255, 0.78);
	flex-shrink: 0;
}

.jf-footer a {
	color: rgba(255, 255, 255, 0.78);
	transition: color var(--jf-transition-fast);
}

.jf-footer a:hover {
	color: var(--jf-gold-light);
}

.jf-footer-main {
	padding-top: var(--jf-space-7);
	padding-bottom: var(--jf-space-6);
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--jf-space-6);
}

.jf-footer-brand img {
	height: 72px;
	width: auto;
	display: block;
}

/* The supplied logo artwork sits on an opaque cream background rather
   than a transparent one. Rather than recolor or redraw the logo, we
   place it on a small matching cream "chip" so it reads cleanly
   against the navy footer — the artwork itself is untouched. */
.jf-footer-logo-chip {
	display: inline-block;
	background-color: var(--jf-cream);
	border-radius: var(--jf-radius-sm);
	padding: var(--jf-space-3) var(--jf-space-4);
	margin-bottom: var(--jf-space-4);
	line-height: 0;
}

/* Secondary phrase — the only text under the footer logo, per brand spec.
   Kept compact and quiet: small caps, gold, wide tracking. */
.jf-footer-phrase {
	font-family: var(--jf-font-sans);
	font-size: var(--jf-text-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--jf-gold-light);
	margin: 0;
}

.jf-footer-phrase span {
	color: rgba(255, 255, 255, 0.3);
	margin: 0 var(--jf-space-1);
}

.jf-footer-heading {
	font-family: var(--jf-font-sans);
	font-size: var(--jf-text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jf-gold);
	margin-bottom: var(--jf-space-4);
}

.jf-footer-links {
	display: flex;
	flex-direction: column;
	gap: var(--jf-space-3);
	font-size: var(--jf-text-sm);
}

.jf-footer-social-link {
	display: inline-flex;
	align-items: center;
	gap: var(--jf-space-2);
}

.jf-footer-social-link svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.jf-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: var(--jf-space-5);
	padding-bottom: var(--jf-space-6);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--jf-space-3);
	font-size: var(--jf-text-xs);
	color: rgba(255, 255, 255, 0.55);
}

.jf-footer-legal {
	display: flex;
	gap: var(--jf-space-4);
}

/* Phase 8.2 / 8.3: the copyright line otherwise inherits .jf-footer-bottom's
   dim rgba(255,255,255,0.55), which is too low-contrast against the navy
   (#0B1F33) background. Scoped under .jf-footer-bottom to make this rule's
   precedence explicit in the cascade (0,2,0 beats .jf-footer-bottom's
   0,1,0, so this can never be shadowed by it), and raised to a warm
   cream at a lower opacity than the footer links (.jf-footer a is 0.78),
   so the copyright stays clearly legible but visually subordinate to
   them — no layout, spacing, or font-size change. */
.jf-footer-bottom .jf-footer-copyright {
	color: rgba( 247, 244, 237, 0.72 );
}

.jf-footer-attribution {
	text-align: center;
	padding-bottom: var(--jf-space-5);
	font-size: var(--jf-text-xs);
	color: rgba(255, 255, 255, 0.4);
}

/* -------------------------------------------------------------------------
   13. HOMEPAGE — HERO
   ------------------------------------------------------------------------- */
.jf-hero {
	padding-top: var(--jf-space-9);
	padding-bottom: var(--jf-space-9);
}

.jf-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
	gap: var(--jf-space-8);
	align-items: center;
}

.jf-hero-content {
	max-width: 46ch;
}

.jf-hero-title {
	font-size: var(--jf-text-5xl);
	margin: var(--jf-space-3) 0 var(--jf-space-1);
}

.jf-hero-subtitle {
	font-family: var(--jf-font-serif);
	font-weight: 500;
	font-style: italic;
	font-size: var(--jf-text-xl);
	color: var(--jf-gold);
	margin: 0 0 var(--jf-space-5);
}

.jf-hero-lede {
	font-size: var(--jf-text-lg);
	color: var(--jf-muted);
	margin-bottom: var(--jf-space-6);
}

.jf-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jf-space-4);
}

.jf-hero-media {
	line-height: 0;
}

.jf-hero-media img {
	width: 100%;
	height: auto;
	border-radius: var(--jf-radius-md);
}

/* -------------------------------------------------------------------------
   14. HOMEPAGE — CATEGORY STRIP
   An editorial navigation strip, not a set of cards: no background
   block, no shadow, no heavy border-radius — just restrained icons,
   labels, and thin vertical separators.
   ------------------------------------------------------------------------- */
.jf-categories {
	padding: var(--jf-space-7) 0;
	border-top: 1px solid var(--jf-border);
	border-bottom: 1px solid var(--jf-border);
}

.jf-cat-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.jf-cat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--jf-space-3);
	padding: var(--jf-space-4) var(--jf-space-5);
	border-left: 1px solid var(--jf-border);
	transition: background-color var(--jf-transition-fast);
}

.jf-cat-item:first-child {
	border-left: none;
}

.jf-cat-item:hover {
	background-color: var(--jf-cream);
}

.jf-cat-item__icon {
	display: inline-flex;
	width: 40px;
	height: 40px;
	color: var(--jf-navy);
	transition: color var(--jf-transition-fast);
}

.jf-cat-item:hover .jf-cat-item__icon {
	color: var(--jf-gold);
}

.jf-cat-item__label {
	font-size: var(--jf-text-sm);
	font-weight: 500;
	color: var(--jf-navy);
}

/* -------------------------------------------------------------------------
   15. HOMEPAGE — LATEST BLOGS
   ------------------------------------------------------------------------- */
.jf-section-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--jf-space-4);
	margin-bottom: var(--jf-space-6);
}

.jf-section-heading h2 {
	margin: 0;
}

.jf-view-all {
	font-size: var(--jf-text-sm);
	font-weight: 600;
	color: var(--jf-navy);
	white-space: nowrap;
	transition: color var(--jf-transition-fast);
}

.jf-view-all:hover {
	color: var(--jf-gold);
}

.jf-article-list {
	display: flex;
	flex-direction: column;
}

.jf-article-row {
	display: grid;
	grid-template-columns: 200px 1fr auto;
	align-items: center;
	gap: var(--jf-space-6);
	padding: var(--jf-space-5) 0;
	border-bottom: 1px solid var(--jf-border);
	transition: opacity var(--jf-transition-fast);
}

.jf-article-list .jf-article-row:first-child {
	border-top: 1px solid var(--jf-border);
}

.jf-article-row:hover {
	opacity: 0.82;
}

.jf-article-row__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--jf-radius-sm);
	background-color: var(--jf-cream);
}

.jf-article-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jf-article-row__media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.jf-article-row__body {
	display: block;
	min-width: 0;
}

.jf-article-row__category {
	display: block;
	margin-bottom: var(--jf-space-2);
}

.jf-article-row__title {
	display: block;
	font-family: var(--jf-font-serif);
	font-weight: 600;
	font-size: var(--jf-text-xl);
	color: var(--jf-navy);
	line-height: 1.3;
	margin-bottom: var(--jf-space-2);
	/* Stage 14A: guards only against an unusually long, unbroken title
	   (no spaces) causing horizontal overflow — normal titles wrap at
	   word boundaries exactly as before; typography/spacing unchanged. */
	overflow-wrap: anywhere;
}

.jf-article-row__excerpt {
	display: block;
	font-size: var(--jf-text-sm);
	color: var(--jf-muted);
	margin-bottom: var(--jf-space-2);
	max-width: 60ch;
}

.jf-article-row__meta {
	display: block;
}

.jf-article-row .jf-article-meta {
	font-size: var(--jf-text-xs);
	color: var(--jf-muted);
	margin: 0;
}

.jf-article-row__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--jf-gold);
	flex-shrink: 0;
}

.jf-article-row__arrow svg {
	width: 22px;
	height: 22px;
}

.jf-empty-state {
	text-align: center;
	padding: var(--jf-space-8) var(--jf-space-4);
	border: 1px dashed var(--jf-border);
	border-radius: var(--jf-radius-md);
	color: var(--jf-muted);
}

.jf-empty-state p {
	margin: 0;
	font-size: var(--jf-text-lg);
}

/* -------------------------------------------------------------------------
   16. HOMEPAGE — EDITORIAL STATEMENT
   ------------------------------------------------------------------------- */
.jf-editorial-statement {
	background-color: var(--jf-cream);
	padding: var(--jf-space-8) 0;
}

.jf-editorial-statement .jf-container {
	border-left: 2px solid var(--jf-gold);
	padding-left: var(--jf-space-6);
	text-align: left;
}

.jf-editorial-statement__text {
	font-family: var(--jf-font-serif);
	font-size: var(--jf-text-2xl);
	font-weight: 500;
	line-height: 1.4;
	color: var(--jf-navy);
	margin: 0 0 var(--jf-space-3);
}

.jf-editorial-statement__attribution {
	font-size: var(--jf-text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--jf-muted);
	margin: 0;
}

/* -------------------------------------------------------------------------
   17. HOMEPAGE — STAY INFORMED (INLINE NEWSLETTER)
   ------------------------------------------------------------------------- */
.jf-newsletter-inline {
	padding: var(--jf-space-8) 0 var(--jf-space-9);
	text-align: center;
	/* So the "Subscribe" buttons' #stay-informed jump/scroll lands below
	   the sticky header instead of tucking the heading underneath it. */
	scroll-margin-top: var(--jf-header-height);
}

.jf-newsletter-inline .jf-container {
	text-align: center;
}

.jf-newsletter-inline h2 {
	margin-bottom: var(--jf-space-2);
}

.jf-newsletter-inline .jf-lede {
	margin-bottom: var(--jf-space-6);
}

/*
 * MailerLite embedded form (.ml-embedded[data-form="zveoP7"], injected
 * by the MailerLite Universal script into front-page.php's wrapper
 * below). MailerLite renders its own form markup at runtime — its
 * field/button styling is primarily controlled in the MailerLite form
 * editor itself, not by this stylesheet — so this block only handles
 * what this theme can reliably own: the wrapper's width/centering
 * (matching the previous 460px inline form) and responsive overflow
 * protection, plus best-effort color/typography overrides for the
 * common MailerLite embedded-form elements so it reads as a native
 * JurisFront component rather than a default MailerLite widget. For
 * full visual control (e.g. exact button hover states), match these
 * same brand colors in the MailerLite form's own style settings.
 */
.jf-newsletter-inline-form-wrap {
	max-width: 460px;
	margin: 0 auto;
}

.jf-newsletter-inline-form-wrap,
.jf-newsletter-inline-form-wrap .ml-embedded {
	width: 100%;
	max-width: 100%;
	overflow-wrap: break-word;
}

/*
 * Hides MailerLite's own internal "Stay Informed" heading + description
 * paragraph inside the embedded form (form zveoP7), since the outer
 * JurisFront section above already shows that same heading/description
 * once. Verified against the live rendered DOM: MailerLite's pre-submit
 * markup is
 *   .ml-form-embedBody
 *     ├─ .ml-form-embedContent   (the duplicate <h4> + <p> — hidden below)
 *     └─ form.ml-block-form      (email input, checkbox, reCAPTCHA,
 *                                 Subscribe button — a SIBLING of
 *                                 .ml-form-embedContent, so untouched)
 * The post-submit success message lives in a separate sibling subtree,
 * .ml-form-successBody > .ml-form-successContent, which this selector
 * does not match, so it still displays normally after subscribing.
 * (Note: .ml-form-embedHeader, used in a prior version of this rule, is
 * MailerLite's optional *image* header block, not this text — it was
 * not the actual duplicate and did not fix this.)
 */
.jf-newsletter-inline-form-wrap .ml-embedded .ml-form-embedBody .ml-form-embedContent {
	display: none;
}

.jf-newsletter-inline-form-wrap input[type="email"],
.jf-newsletter-inline-form-wrap input[type="text"] {
	font-family: var(--jf-font-sans) !important;
	font-size: var(--jf-text-sm) !important;
	color: var(--jf-text) !important;
	background-color: var(--jf-white) !important;
	border: 1px solid var(--jf-border) !important;
	border-radius: var(--jf-radius-sm) !important;
}

.jf-newsletter-inline-form-wrap input[type="email"]:focus,
.jf-newsletter-inline-form-wrap input[type="text"]:focus {
	outline: 2px solid var(--jf-navy) !important;
	outline-offset: 1px;
	border-color: var(--jf-navy) !important;
}

.jf-newsletter-inline-form-wrap button,
.jf-newsletter-inline-form-wrap input[type="submit"] {
	font-family: var(--jf-font-sans) !important;
	font-weight: 600 !important;
	background-color: var(--jf-navy) !important;
	border-color: var(--jf-navy) !important;
	border-radius: var(--jf-radius-sm) !important;
	color: var(--jf-white) !important;
}

.jf-newsletter-inline-form-wrap button:hover,
.jf-newsletter-inline-form-wrap input[type="submit"]:hover {
	background-color: var(--jf-navy-light) !important;
	border-color: var(--jf-navy-light) !important;
}

.jf-newsletter-inline-form-wrap label {
	color: var(--jf-text) !important;
}

/* -------------------------------------------------------------------------
   18. PAGE HEADER (Articles / category archive / generic archive / search)
   A restrained editorial header — eyebrow, one H1, optional short lede.
   Not a "huge hero": compact vertical padding, no imagery.
   ------------------------------------------------------------------------- */
.jf-page-header {
	padding: var(--jf-space-7) 0 var(--jf-space-6);
	background-color: var(--jf-cream);
	border-bottom: 1px solid var(--jf-border);
}

.jf-page-header h1 {
	margin: var(--jf-space-2) 0 var(--jf-space-3);
}

.jf-page-header .jf-lede {
	margin: 0;
}

.jf-page-header--category {
	position: relative;
}

/* -------------------------------------------------------------------------
   19. CATEGORY FILTER TABS (Articles page)
   ------------------------------------------------------------------------- */
.jf-filter-tabs {
	padding: var(--jf-space-5) 0;
	border-bottom: 1px solid var(--jf-border);
}

.jf-filter-tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jf-space-6);
}

.jf-filter-tabs__item {
	display: inline-block;
	padding-bottom: var(--jf-space-2);
	font-size: var(--jf-text-sm);
	font-weight: 500;
	color: var(--jf-muted);
	border-bottom: 2px solid transparent;
	transition: color var(--jf-transition-fast), border-color var(--jf-transition-fast);
}

.jf-filter-tabs__item:hover {
	color: var(--jf-navy);
}

.jf-filter-tabs__item.is-active {
	color: var(--jf-navy);
	font-weight: 600;
	border-bottom-color: var(--jf-gold);
}

/* -------------------------------------------------------------------------
   20. PAGINATION
   ------------------------------------------------------------------------- */
.jf-pagination {
	margin-top: var(--jf-space-7);
	display: flex;
	justify-content: center;
}

.jf-pagination .page-numbers {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--jf-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.jf-pagination .page-numbers li {
	display: flex;
}

.jf-pagination a.page-numbers,
.jf-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--jf-space-3);
	border-radius: var(--jf-radius-sm);
	font-size: var(--jf-text-sm);
	font-weight: 500;
	color: var(--jf-navy);
	transition: background-color var(--jf-transition-fast), color var(--jf-transition-fast);
}

.jf-pagination a.page-numbers:hover {
	background-color: var(--jf-cream);
}

.jf-pagination span.page-numbers.current {
	background-color: var(--jf-gold);
	color: var(--jf-navy);
	font-weight: 700;
}

.jf-pagination span.page-numbers.dots {
	color: var(--jf-muted);
}

.jf-pagination .prev.page-numbers svg,
.jf-pagination .next.page-numbers svg {
	width: 18px;
	height: 18px;
}

/* -------------------------------------------------------------------------
   21. SINGLE ARTICLE — HEADER + FEATURED IMAGE
   ------------------------------------------------------------------------- */
.jf-article-header {
	padding: var(--jf-space-8) 0 var(--jf-space-6);
	text-align: left;
}

.jf-article-header__category {
	display: inline-block;
	margin-bottom: var(--jf-space-3);
}

.jf-article-header__title {
	font-size: var(--jf-text-5xl);
	margin: 0 0 var(--jf-space-4);
}

.jf-article-header__excerpt {
	font-size: var(--jf-text-xl);
	font-family: var(--jf-font-serif);
	font-style: italic;
	color: var(--jf-muted);
	margin-bottom: var(--jf-space-4);
}

.jf-article-header .jf-article-meta {
	margin: 0;
}

.jf-article-header .jf-article-meta--extended {
	margin: 0;
}

.jf-article-meta__author {
	margin: 0;
}

.jf-article-meta__affiliation {
	margin: var(--jf-space-1) 0 0;
	font-size: var(--jf-text-sm);
	color: var(--jf-muted);
	/* Stage 14A: guards only against an unusually long, unbroken
	   contributor name/institution causing horizontal overflow. */
	overflow-wrap: anywhere;
}

.jf-article-featured-image {
	margin-bottom: var(--jf-space-7);
}

.jf-article-featured-image img {
	width: 100%;
	height: auto;
	border-radius: var(--jf-radius-md);
}

.jf-article-featured-image--fallback .jf-article-featured-image__rule {
	height: 2px;
	background-color: var(--jf-gold);
	opacity: 0.6;
	margin: var(--jf-space-4) 0;
}

/* -------------------------------------------------------------------------
   22. SINGLE ARTICLE — TAGS, SHARE, PREV/NEXT
   ------------------------------------------------------------------------- */
.jf-article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jf-space-3);
	margin: var(--jf-space-7) 0 var(--jf-space-6);
	padding-top: var(--jf-space-6);
	border-top: 1px solid var(--jf-border);
}

.jf-tag {
	display: inline-block;
	padding: var(--jf-space-1) var(--jf-space-3);
	border: 1px solid var(--jf-border);
	border-radius: var(--jf-radius-sm);
	font-size: var(--jf-text-xs);
	font-weight: 500;
	color: var(--jf-muted);
	transition: border-color var(--jf-transition-fast), color var(--jf-transition-fast);
}

.jf-tag:hover {
	border-color: var(--jf-gold);
	color: var(--jf-navy);
}

.jf-article-share {
	display: flex;
	align-items: center;
	gap: var(--jf-space-3);
	margin-bottom: var(--jf-space-7);
	padding-top: var(--jf-space-6);
	border-top: 1px solid var(--jf-border);
}

.jf-article-tags + .jf-article-share {
	border-top: none;
	padding-top: 0;
}

.jf-article-share__label {
	font-size: var(--jf-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jf-muted);
	margin-right: var(--jf-space-1);
}

.jf-article-share__btn svg {
	width: 18px;
	height: 18px;
}

.jf-copy-link-feedback {
	font-size: var(--jf-text-xs);
	color: var(--jf-gold);
	font-weight: 600;
}

.jf-article-adjacent {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jf-space-5);
	margin-bottom: var(--jf-space-8);
	padding-top: var(--jf-space-6);
	border-top: 1px solid var(--jf-border);
}

.jf-article-adjacent__link {
	display: flex;
	align-items: center;
	gap: var(--jf-space-3);
	padding: var(--jf-space-4);
	border: 1px solid var(--jf-border);
	border-radius: var(--jf-radius-md);
	transition: border-color var(--jf-transition-fast), background-color var(--jf-transition-fast);
}

.jf-article-adjacent__link:hover {
	border-color: var(--jf-gold);
	background-color: var(--jf-cream);
}

.jf-article-adjacent__link--next {
	grid-column: 2;
	justify-content: flex-end;
	text-align: right;
}

.jf-article-adjacent__arrow {
	font-size: var(--jf-text-xl);
	color: var(--jf-gold);
	flex-shrink: 0;
}

.jf-article-adjacent__text {
	display: flex;
	flex-direction: column;
	gap: var(--jf-space-1);
	min-width: 0;
}

.jf-article-adjacent__label {
	font-size: var(--jf-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jf-muted);
}

.jf-article-adjacent__title {
	font-family: var(--jf-font-serif);
	font-weight: 600;
	font-size: var(--jf-text-base);
	color: var(--jf-navy);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   23. RELATED ARTICLES
   ------------------------------------------------------------------------- */
.jf-related {
	padding: var(--jf-space-7) 0 var(--jf-space-8);
	border-top: 1px solid var(--jf-border);
}

.jf-related h2 {
	margin-bottom: var(--jf-space-5);
}

.jf-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--jf-space-6);
}

.jf-related-card {
	display: block;
	transition: opacity var(--jf-transition-fast);
}

.jf-related-card:hover {
	opacity: 0.82;
}

.jf-related-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--jf-radius-sm);
	background-color: var(--jf-cream);
	margin-bottom: var(--jf-space-3);
}

.jf-related-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jf-related-card__media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.jf-related-card__title {
	display: block;
	font-family: var(--jf-font-serif);
	font-weight: 600;
	font-size: var(--jf-text-lg);
	color: var(--jf-navy);
	line-height: 1.35;
	margin: var(--jf-space-2) 0;
}

.jf-related-card__date {
	display: block;
	font-size: var(--jf-text-xs);
	color: var(--jf-muted);
}

/* -------------------------------------------------------------------------
   24. FORMS (Submit a Blog / Contact)
   Shared by page-submit.php and page-contact.php. No new brand colors:
   invalid-field indication uses a bolder navy border plus explicit
   "Error:" text (added by JS) rather than a red/error hue, so error
   states stay inside the approved palette while remaining accessible
   (never color alone).
   ------------------------------------------------------------------------- */
.jf-guidelines {
	margin-bottom: var(--jf-space-8);
	padding-bottom: var(--jf-space-7);
	border-bottom: 1px solid var(--jf-border);
}

.jf-guidelines h2 {
	margin-bottom: var(--jf-space-4);
}

.jf-guidelines ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--jf-space-3);
}

.jf-guidelines li {
	position: relative;
	padding-left: var(--jf-space-5);
	color: var(--jf-muted);
	font-size: var(--jf-text-base);
}

.jf-guidelines li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--jf-gold);
}

.jf-form__required-note {
	font-size: var(--jf-text-xs);
	color: var(--jf-muted);
	margin-bottom: var(--jf-space-6);
}

.jf-form__section {
	border: none;
	padding: 0;
	margin: 0 0 var(--jf-space-7);
}

.jf-form__section legend {
	font-family: var(--jf-font-sans);
	font-size: var(--jf-text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jf-gold);
	padding: 0;
	margin-bottom: var(--jf-space-5);
}

.jf-form__row {
	margin-bottom: var(--jf-space-5);
}

.jf-form__row label {
	display: block;
	font-size: var(--jf-text-sm);
	font-weight: 600;
	color: var(--jf-navy);
	margin-bottom: var(--jf-space-2);
}

.jf-form__optional {
	font-weight: 400;
	color: var(--jf-muted);
	text-transform: none;
	letter-spacing: normal;
}

.jf-form__row input[type="text"],
.jf-form__row input[type="email"],
.jf-form__row input[type="tel"],
.jf-form__row input[type="url"],
.jf-form__row input[type="file"],
.jf-form__row select,
.jf-form__row textarea {
	width: 100%;
	padding: var(--jf-space-3) var(--jf-space-4);
	border: 1px solid var(--jf-border);
	border-radius: var(--jf-radius-sm);
	font-family: var(--jf-font-sans);
	font-size: var(--jf-text-base);
	color: var(--jf-text);
	background-color: var(--jf-white);
	transition: border-color var(--jf-transition-fast);
}

.jf-form__row textarea {
	resize: vertical;
	line-height: 1.6;
}

.jf-form__row input:focus,
.jf-form__row select:focus,
.jf-form__row textarea:focus {
	border-color: var(--jf-navy);
}

.jf-form__row input[aria-invalid="true"],
.jf-form__row select[aria-invalid="true"],
.jf-form__row textarea[aria-invalid="true"] {
	border-color: var(--jf-navy);
	border-width: 2px;
}

.jf-form__error {
	display: block;
	font-size: var(--jf-text-xs);
	font-weight: 600;
	color: var(--jf-navy);
	margin-top: var(--jf-space-2);
}

.jf-form__row--checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--jf-space-3);
}

.jf-form__row--checkbox input[type="checkbox"] {
	margin-top: 4px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--jf-gold);
}

.jf-form__row--checkbox label {
	font-size: var(--jf-text-sm);
	font-weight: 400;
	color: var(--jf-text);
	margin-bottom: 0;
}

.jf-form__placeholder-message {
	margin-top: var(--jf-space-6);
	padding: var(--jf-space-5);
	background-color: var(--jf-cream);
	border-left: 3px solid var(--jf-gold);
	border-radius: var(--jf-radius-sm);
}

.jf-form__placeholder-message p {
	margin: 0;
	color: var(--jf-navy);
}

.jf-form__placeholder-message p:first-child {
	margin-bottom: var(--jf-space-2);
}

.jf-form__error-summary {
	margin-bottom: var(--jf-space-6);
	padding: var(--jf-space-5);
	background-color: var(--jf-cream);
	border-left: 3px solid var(--jf-navy);
	border-radius: var(--jf-radius-sm);
}

.jf-form__error-summary p {
	margin: 0 0 var(--jf-space-2);
	font-weight: 600;
	color: var(--jf-navy);
}

.jf-form__error-summary ul {
	margin: 0;
	padding-left: var(--jf-space-5);
}

.jf-form__error-summary li {
	font-size: var(--jf-text-sm);
	color: var(--jf-text);
}

.jf-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   25. ABOUT PAGE
   ------------------------------------------------------------------------- */
.jf-about-hero {
	padding: var(--jf-space-7) 0 var(--jf-space-5);
	text-align: left;
}

.jf-about-hero__subtitle {
	font-family: var(--jf-font-serif);
	font-weight: 500;
	font-style: italic;
	font-size: var(--jf-text-xl);
	color: var(--jf-gold);
	margin: var(--jf-space-2) 0 var(--jf-space-4);
}

.jf-about-image {
	padding-top: 0;
	padding-bottom: var(--jf-space-4);
}

.jf-about-image img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: var(--jf-radius-md);
}

.jf-about-section {
	margin-bottom: var(--jf-space-8);
}

.jf-about-section:last-child {
	margin-bottom: 0;
}

.jf-about-section h2 {
	margin-bottom: var(--jf-space-4);
}

.jf-about-section p {
	font-size: var(--jf-text-lg);
	color: var(--jf-text);
	max-width: 68ch;
}

.jf-about-categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jf-space-3);
	list-style: none;
	margin: var(--jf-space-4) 0 0;
	padding: 0;
}

.jf-about-categories a {
	display: inline-block;
	padding: var(--jf-space-2) var(--jf-space-4);
	border: 1px solid var(--jf-border);
	border-radius: var(--jf-radius-sm);
	font-size: var(--jf-text-sm);
	font-weight: 500;
	color: var(--jf-navy);
	transition: border-color var(--jf-transition-fast), background-color var(--jf-transition-fast);
}

.jf-about-categories a:hover {
	border-color: var(--jf-gold);
	background-color: var(--jf-cream);
}

/* -------------------------------------------------------------------------
   26. CONTACT PAGE
   ------------------------------------------------------------------------- */
.jf-contact-layout {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: var(--jf-space-8);
	align-items: start;
}

.jf-contact-info h2 {
	margin-bottom: var(--jf-space-5);
}

.jf-contact-info__row {
	display: flex;
	flex-direction: column;
	gap: var(--jf-space-1);
	margin-bottom: var(--jf-space-5);
	font-size: var(--jf-text-base);
}

.jf-contact-info__label {
	font-size: var(--jf-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jf-muted);
}

.jf-contact-info__row a {
	color: var(--jf-navy);
	text-decoration: underline;
	text-decoration-color: var(--jf-gold);
	text-underline-offset: 3px;
}

.jf-contact-info__row a:hover {
	color: var(--jf-gold);
}

.jf-contact-info__guidance {
	padding-top: var(--jf-space-4);
	border-top: 1px solid var(--jf-border);
}

.jf-contact-info__empty {
	font-size: var(--jf-text-sm);
	color: var(--jf-muted);
	font-style: italic;
}

/* -------------------------------------------------------------------------
   27. RESPONSIVE BREAKPOINTS
   Mobile-first-adjacent: base styles above already work down to small
   phones; these rules adapt the *layout* at each breakpoint rather than
   simply shrinking the desktop design.
   ------------------------------------------------------------------------- */

/* Tablet and below: collapse to the mobile header/nav pattern. */
@media (max-width: 900px) {

	:root {
		--jf-header-height: var(--jf-header-height-mobile);
	}

	.jf-brand-wordmark {
		display: none;
	}

	.jf-brand-emblem {
		display: flex;
	}

	.jf-nav-primary,
	.jf-header-actions .jf-btn {
		display: none;
	}

	.jf-menu-toggle {
		display: inline-flex;
	}

	/* Comfortable touch targets on mobile/tablet (WCAG 2.5.5 target size). */
	.jf-icon-btn {
		width: 44px;
		height: 44px;
	}

	.jf-footer-main {
		grid-template-columns: 1fr 1fr;
		row-gap: var(--jf-space-6);
	}

	.jf-footer-brand {
		grid-column: 1 / -1;
	}

	/* Homepage — hero keeps its two columns on tablet, just tighter. */
	.jf-hero {
		padding-top: var(--jf-space-7);
		padding-bottom: var(--jf-space-7);
	}

	.jf-hero-inner {
		gap: var(--jf-space-6);
	}

	.jf-hero-title {
		font-size: var(--jf-text-4xl);
	}

	/* Homepage — category strip becomes a 2×2 grid on tablet/mobile. */
	.jf-cat-strip {
		grid-template-columns: repeat(2, 1fr);
	}

	.jf-cat-item {
		border-left: none;
		border-top: 1px solid var(--jf-border);
	}

	.jf-cat-item:nth-child(odd) {
		border-right: 1px solid var(--jf-border);
	}

	.jf-cat-item:nth-child(-n+2) {
		border-top: none;
	}

	/* Homepage — latest blogs: narrower thumbnail column. */
	.jf-article-row {
		grid-template-columns: 140px 1fr auto;
		gap: var(--jf-space-4);
	}

	/* Single article — title scales down, related grid to 2 columns. */
	.jf-article-header__title {
		font-size: var(--jf-text-4xl);
	}

	.jf-related-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Contact page — stack info above form on tablet/mobile. */
	.jf-contact-layout {
		grid-template-columns: 1fr;
		gap: var(--jf-space-7);
	}
}

/* Small tablets / large phones */
@media (max-width: 640px) {

	:root {
		--jf-container-padding: var(--jf-space-4);
	}

	h1 { font-size: var(--jf-text-3xl); }
	h2 { font-size: var(--jf-text-2xl); }
	h3 { font-size: var(--jf-text-xl); }

	.jf-section {
		padding-top: var(--jf-space-6);
		padding-bottom: var(--jf-space-6);
	}

	.jf-footer-main {
		grid-template-columns: 1fr;
	}

	.jf-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Homepage — hero stacks: text first (already first in source order),
	   image second, and capped in height so it never dominates a small
	   screen. */
	.jf-hero-inner {
		grid-template-columns: 1fr;
	}

	.jf-hero-content {
		max-width: none;
	}

	.jf-hero-title {
		font-size: var(--jf-text-3xl);
	}

	.jf-hero-media {
		aspect-ratio: 4 / 3;
		overflow: hidden;
		border-radius: var(--jf-radius-md);
	}

	.jf-hero-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.jf-hero-actions .jf-btn {
		flex: 1 1 auto;
		text-align: center;
	}

	/* Homepage — latest blogs stack into vertical rows. */
	.jf-article-row {
		grid-template-columns: 1fr;
		gap: var(--jf-space-3);
	}

	.jf-article-row__media {
		aspect-ratio: 16 / 9;
	}

	.jf-article-row__arrow {
		justify-self: end;
	}

	/* Homepage — editorial statement: tighter left rule spacing. */
	.jf-editorial-statement .jf-container {
		padding-left: var(--jf-space-4);
	}

	.jf-editorial-statement__text {
		font-size: var(--jf-text-xl);
	}

	/* Articles / category / archive / search — page header + filter tabs. */
	.jf-page-header {
		padding: var(--jf-space-6) 0 var(--jf-space-5);
	}

	.jf-filter-tabs ul {
		gap: var(--jf-space-4);
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.jf-filter-tabs__item {
		white-space: nowrap;
	}

	/* Single article — comfortable mobile reading. */
	.jf-article-header {
		padding: var(--jf-space-6) 0 var(--jf-space-5);
	}

	.jf-article-header__title {
		font-size: var(--jf-text-3xl);
	}

	.jf-article-header__excerpt {
		font-size: var(--jf-text-lg);
	}

	.jf-article-adjacent {
		grid-template-columns: 1fr;
	}

	.jf-article-adjacent__link--next {
		grid-column: 1;
		justify-content: flex-start;
		text-align: left;
	}

	.jf-related-grid {
		grid-template-columns: 1fr;
	}

	/* About hero — comfortable image height on small phones. */
	.jf-about-image img {
		max-height: 280px;
	}

	.jf-about-hero__subtitle {
		font-size: var(--jf-text-lg);
	}

	/* Forms — comfortable touch targets, no oversized checkbox gap. */
	.jf-form__row input,
	.jf-form__row select,
	.jf-form__row textarea,
	.jf-btn[type="submit"] {
		font-size: 16px; /* Prevents iOS Safari from zooming in on focus. */
	}
}