/* The Differential — 2026 refresh. Load AFTER style.css. */

/* Accent: Arizona Cardinal replaces the old gold site-wide */
:root { --ddx-gold: #ab0520; }
.skip-link { color: #ffffff; }

/* ---------- Fonts ---------- */
/* Mulish (OFL) variable font; Book Antiqua/Palatino come from the reader's system. */
@font-face {
	font-family: "Mulish";
	src: url("fonts/Mulish-Variable.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
}

/* Book Antiqua replaces Oswald for nav & meta labels */
.tagline, .sub-title, .entry-meta, .read-more, .read-more-link,
.site-nav, .site-topbar, .post-card__meta, .post-card__author,
.article-meta, .copyright, .site-footer__copyright {
	font-family: "Book Antiqua", "Palatino Linotype", Palatino, Georgia, serif !important;
}

.jekyll-site #main-content {
	position: relative;
	border: 2px solid #000000;
}

/* ---------- Topbar ---------- */
.site-topbar {
	background: linear-gradient(180deg, #011c48, #28211a) !important;
}
.site-topbar__inner {
	display: flex;
	height: 58px;
	gap: 25px;
	justify-content: space-between;
	align-items: center;
}
.site-topbar a, .site-nav a { text-transform: uppercase; letter-spacing: 0.2em; }
.site-topbar a { position: relative; padding: 4px 0; transition: color 160ms ease; font-size: 13px; }
.topbar-home a { font-size: 18px; }
.site-topbar a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
	background: var(--ddx-gold); transform: scaleX(0); transform-origin: left;
	transition: transform 180ms ease;
}
.site-topbar a:hover::after { transform: scaleX(1); }
.site-topbar a:focus, .site-nav a:focus, .nav-search input:focus { outline: none; }

/* Topbar structural list */
.topbar-links {
	align-self: stretch; display: flex; gap: 0;
	margin: 0; padding: 0; list-style: none;
}
.topbar-links > li { display: flex; align-items: stretch; border-left: 1px solid #2a2a2a; }
.topbar-links > li:last-child { border-right: 1px solid #2a2a2a; }
.topbar-links > li > a { display: flex; align-items: center; padding: 0 22px; }
.topbar-links > li:first-child { border-left: 0; }
.topbar-links > li:first-child > a { padding-left: 8px; }

/* Categories dropdown */
.topbar-cats { position: relative; }
.topbar-cats:hover > a, .topbar-cats:focus-within > a { color: var(--ddx-gold); }
.site-topbar .topbar-menu, .site-topbar .topbar-fly {
	display: none; position: absolute; z-index: 300; min-width: 215px;
	margin: 0; padding: 0; list-style: none; background: #e8edf3;
}
.topbar-menu { top: 100%; left: 0; border-top: 1px solid rgba(1, 28, 72, 0.15); }
.site-topbar .topbar-cats:hover > .topbar-menu,
.site-topbar .topbar-cats:focus-within > .topbar-menu { display: block; }
.topbar-menu li { position: relative; }
.topbar-menu li + li { border-top: 1px solid rgba(1, 28, 72, 0.15); }
.site-topbar .topbar-menu a {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 14px 18px 14px 15px; color: #011c48; font-size: 12px;
	white-space: nowrap; border-left: 3px solid transparent;
	transition: background 140ms ease, border-color 140ms ease;
}
.topbar-menu a::after { content: none; }
.topbar-menu li:hover > a { background: #dde4ee; border-left-color: #1e5288; color: #011c48; }
.fly-caret { font-size: 13px; letter-spacing: 0; }
.topbar-fly { left: 100%; top: -1px; border-top: 1px solid rgba(1, 28, 72, 0.15); width: max-content; }
.site-topbar .topbar-fly a { white-space: nowrap; line-height: 1.5; }
.site-topbar .topbar-menu li:hover > .topbar-fly,
.site-topbar .topbar-menu li:focus-within > .topbar-fly { display: block; }

/* Search pill */
.nav-search {
	display: flex; align-items: center; gap: 8px;
	padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px; background: rgba(255, 255, 255, 0.08);
	transition: border-color 180ms ease, background 180ms ease, width 220ms ease;
	width: 210px;
}
.nav-search:focus-within { width: 270px; border-color: var(--ddx-gold); background: rgba(255, 255, 255, 0.14); }
.nav-search input {
	flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
	color: #fff; font: 13px "Book Antiqua", "Palatino Linotype", Palatino, Georgia, serif;
	letter-spacing: 0.08em;
}
.nav-search input::placeholder { color: #8c919b; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; }

/* ---------- Branding ---------- */
.site-logo img { width: 677px; max-width: 100%; height: auto; }
.site-branding__rule {
	width: 688px; max-width: 100%; border-top: 3px solid #021c48;
	margin: 2px auto 10px;
}
.site-tagline {
	font-family: "Book Antiqua", "Palatino Linotype", Palatino, Georgia, serif !important;
	color: #011c48; font-size: 19px; font-weight: 600;
}

/* ---------- Primary nav ---------- */
.site-nav > ul { gap: 4px; align-items: stretch; }
.site-nav > ul > li { position: relative; }
.site-nav > ul > li + li::before { content: none; }
.site-nav > ul > li > a {
	position: relative; padding: 17px 14px 15px; letter-spacing: 0.11em;
	font-size: 14px; font-weight: 500;
	transition: color 160ms ease, background 160ms ease;
}
.site-nav > ul > li > a::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px;
	background: var(--ddx-gold); transform: scaleX(0); transform-origin: center;
	transition: transform 200ms ease;
}
.site-nav > ul > li > a:hover, .site-nav > ul > li:hover > a { background: #f7f6f2; }
.site-nav > ul > li > a:hover::after, .site-nav > ul > li:hover > a::after { transform: scaleX(1); }
.nav-caret { font-size: 9px; margin-left: 7px; color: #8c919b; vertical-align: 2px; }
.site-nav .sub-menu {
	background-color: #ffffff !important; min-width: 250px; padding: 6px 0;
	top: 45px; border-top: none; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}
.site-nav .sub-menu a {
	color: var(--ddx-navy) !important; padding: 11px 20px; font-size: 12px; letter-spacing: 0.12em;
	border-left: 3px solid transparent; transition: background 140ms ease, border-color 140ms ease;
}
.site-nav .sub-menu a:hover { background: #f7f6f2; border-left-color: var(--ddx-gold); color: var(--ddx-navy) !important; }

/* ---------- Hero ---------- */
.site-hero {
	display: block; height: 310px; overflow: hidden; text-align: right;
}
.site-hero__title {
	position: absolute; right: 36px; bottom: 44px; margin: 0;
	font-family: "Mulish", "Lato", Arial, sans-serif; font-size: 40px;
}
.site-hero__subtitle {
	position: absolute; right: 36px; bottom: 18px; margin: 0;
	font-family: "Mulish", "Lato", Arial, sans-serif; font-weight: 600;
	text-align: right;
}
.site-hero { position: relative; }

/* ---------- Section titles ---------- */
.section-title--left {
	display: flex; align-items: center; gap: 26px;
	background: none; text-align: left;
}
.section-title--left .section-title__text {
	padding: 0; background: none;
	font-family: "Mulish", "Lato", Arial, sans-serif; font-size: 40px;
}
.section-title--left::after { content: ""; flex: 1; border-top: 3px solid #080644; }
.section-title--right {
	display: flex; align-items: center; gap: 26px;
	background: none; text-align: right;
}
.section-title--right .section-title__text {
	padding: 0; background: none;
	font-family: "Mulish", "Lato", Arial, sans-serif; font-size: 40px;
}
.section-title--right::before { content: ""; flex: 1; border-top: 3px solid #080644; }

/* ---------- Featured carousel ---------- */
.post-feature {
	position: relative; height: 560px; margin-bottom: 48px;
	background: #011c48; overflow: hidden;
}
.feature-slide {
	position: absolute; inset: 0; display: grid; grid-template-columns: 5fr 6fr;
	opacity: 0; z-index: 1; pointer-events: none;
	transition: opacity 750ms ease; /* fade out */
}
.feature-slide.is-active {
	opacity: 1; z-index: 2; pointer-events: auto;
	transition: opacity 1400ms ease; /* fade in */
}
.feature-slide--noimg { grid-template-columns: 1fr; }
.feature-slide__image {
	display: block; height: 100%; position: relative;
	background-position: center; background-size: cover; background-repeat: no-repeat;
}
.feature-slide__image::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
	background: linear-gradient(transparent, rgba(1, 28, 72, 0.72));
}
.feature-slide__body {
	display: flex; flex-direction: column; gap: 14px;
	padding: 44px 48px 40px; color: #ffffff; overflow: hidden; box-sizing: border-box;
}
.feature-slide--noimg .feature-slide__body {
	max-width: 760px; margin: 0 auto; text-align: center; align-items: center; justify-content: center;
}
.feature-slide__category a {
	color: #ffffff; font-style: italic; font-size: 18px;
	text-transform: uppercase; text-decoration: none;
}
.feature-slide__title {
	color: #ffffff; font-family: "Book Antiqua", "Palatino Linotype", Palatino, Georgia, serif;
	font-size: 30px; line-height: 1.15; text-decoration: underline;
}
.feature-slide__title:hover, .feature-slide__title:focus { color: #ffffff; }
.feature-slide__author { color: #b9c2d4; font-size: 15px; font-family: Georgia, serif !important; }
.feature-slide__author a { color: #ffffff; text-decoration: none; }
.feature-slide__summary {
	color: #d8dde8;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.feature-slide__more {
	margin-top: auto; align-self: flex-start;
	color: var(--ddx-gold) !important; font-weight: 600; text-decoration: underline;
	padding-bottom: 7px; /* aligns with control buttons */
}
.feature-slide__more:hover, .feature-slide__more:focus { color: #ffffff !important; }

/* Dots (over the photo) */
.feature-dots { position: absolute; left: 20px; bottom: 14px; display: flex; gap: 9px; z-index: 3; }
.feature-dot {
	width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
	background: rgba(255, 255, 255, 0.35); transition: background 160ms ease;
}
.feature-dot.is-active { background: var(--ddx-gold); }

/* Arrows + pause (bottom right of the text panel) */
.feature-controls { position: absolute; right: 48px; bottom: 40px; display: flex; gap: 8px; z-index: 3; }
.feature-btn {
	width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%;
	background: transparent; color: #ffffff; font-size: 20px; line-height: 1;
	cursor: pointer; display: grid; place-items: center; padding: 0 0 3px;
	transition: border-color 140ms ease, color 140ms ease;
}
.feature-btn--pause { font-size: 9px; letter-spacing: 1px; padding: 0; }
.feature-btn--pause.is-paused { font-size: 14px; letter-spacing: 0; }
.feature-btn:hover, .feature-btn:focus { border-color: #ab0520; color: #ab0520; }

/* ---------- Mobile ---------- */
@media only screen and (max-width: 960px) {
	body.jekyll-site { position: static !important; overflow: visible !important; }
}
/* ---------- Hamburger + mobile menu ---------- */
.nav-toggle {
	display: none; width: 44px; height: 44px; margin-left: -10px;
	flex-direction: column; justify-content: center; align-items: center; gap: 5px;
	background: transparent; border: none; cursor: pointer; padding: 0;
}
.nav-toggle span {
	display: block; width: 22px; height: 2px; background: #ffffff;
	transition: transform 180ms ease, opacity 180ms ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; }

@media only screen and (max-width: 959px) {
	.nav-toggle { display: flex; }
	.site-topbar__inner {
		height: 58px; flex-direction: row; align-items: center;
		flex-wrap: nowrap; padding-block: 0;
	}
	.site-topbar .topbar-links { display: none; }
	.site-topbar .nav-search { display: none; }
	.site-nav { display: none; }

	.mobile-menu {
		display: block; background: #011c48; padding: 18px 20px 26px;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
	.mobile-menu[hidden] { display: none; }
	.nav-search--mobile { display: flex; width: 100%; margin-bottom: 14px; }
	.mobile-menu__list { margin: 0; padding: 0; list-style: none; }
	.mobile-menu__list > li + li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
	.mobile-menu__list a {
		display: block; padding: 13px 2px; color: #ffffff;
		font-family: "Book Antiqua", "Palatino Linotype", Palatino, Georgia, serif;
		font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
	}
	.mobile-menu__list a:hover, .mobile-menu__list a:focus { color: var(--ddx-gold); }
	.mobile-menu__label {
		margin: 22px 0 4px; color: #8c919b; font-size: 11px;
		letter-spacing: 0.2em; text-transform: uppercase;
	}
	.mobile-menu__list--cats ul { margin: 0; padding: 0 0 0 18px; list-style: none; }
	.mobile-menu__list--cats ul a { font-size: 13px; color: #b9c2d4; padding: 9px 2px; }
}
@media (max-width: 750px) {
	.site-hero__title { font-size: 30px; right: 20px; bottom: 40px; }
	.site-hero__subtitle { right: 20px; bottom: 16px; font-size: 13px; }
	.post-feature { height: auto; }
	.feature-slide { position: relative; inset: auto; grid-template-columns: 1fr; display: none; }
	.feature-slide.is-active { display: grid; }
	.feature-slide__image { height: 220px; }
	.feature-slide__body { padding: 24px 20px 84px; }
	.feature-dots { left: 20px; bottom: 24px; }
	.feature-controls { right: 20px; bottom: 16px; }
	.section-title--left .section-title__text { font-size: 30px; }
}