/* ===== Site header ===== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-line);
}
.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
	padding-block: var(--space-xs);
}
.site-brand { display: flex; align-items: center; gap: var(--space-2xs); text-decoration: none; }
.site-brand__mark {
	width: 40px; height: 40px;
	border-radius: var(--radius-s);
	background: var(--color-navy);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	flex-shrink: 0;
}
/* height (not max-height) is needed here: the SVG logo has no width/height
   HTML attributes (WordPress doesn't compute SVG intrinsic size), and inside
   this flex container, max-height alone left an undefined replaced-element
   size that computed to 0x0 in testing. An explicit height fixes it. */
.site-brand img { height: 44px; width: auto; }
.site-brand__title {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-ink);
	font-size: var(--step-0);
	line-height: 1.2;
}
.site-brand__title small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.7em; color: var(--color-muted); }

.nav-toggle {
	display: none;
	background: none;
	border: 2px solid var(--color-line);
	border-radius: var(--radius-s);
	padding: var(--space-2xs) var(--space-xs);
}
.primary-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-m);
	margin: 0; padding: 0;
	align-items: center;
}
.primary-nav a {
	color: var(--color-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--step--1);
	padding: var(--space-3xs) var(--space-2xs);
}
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--color-navy-700); }
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a { color: var(--color-navy); border-bottom: 2px solid var(--color-blue); }
.primary-nav .cta a { background: var(--color-action); color: #fff; padding: 0.5em 1.1em; border-radius: var(--radius-s); }

.primary-nav ul ul {
	display: none;
}
.primary-nav li { position: relative; }
.primary-nav li:hover > ul,
.primary-nav li:focus-within > ul {
	display: block;
	position: absolute;
	top: 100%; left: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-s);
	box-shadow: var(--shadow-card);
	padding: var(--space-2xs);
	min-width: 220px;
	z-index: 10;
}
.primary-nav ul ul li { width: 100%; }
.primary-nav ul ul a { display: block; padding: var(--space-2xs) var(--space-xs); }
.submenu-toggle { display: none; }

@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; align-items: center; gap: var(--space-2xs); }
	.primary-nav { display: none; width: 100%; }
	.primary-nav.is-open { display: block; }
	.primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.primary-nav li { border-bottom: 1px solid var(--color-line); display: flex; flex-wrap: wrap; align-items: center; }
	.primary-nav li > a { flex: 1; }
	.primary-nav ul ul { position: static; border: none; box-shadow: none; display: none; width: 100%; }
	.primary-nav li.is-expanded > ul { display: block; }
	.submenu-toggle {
		display: inline-flex;
		background: none; border: none;
		font-size: var(--step-0);
		color: var(--color-muted);
		padding: var(--space-2xs);
		cursor: pointer;
	}
	.site-header__bar { flex-wrap: wrap; }
}

/* ===== Hero band ===== */
.hero {
	background: linear-gradient(155deg, var(--color-navy-900), var(--color-navy) 60%, var(--color-navy-700));
	color: #fff;
	padding-block: var(--space-3xl) var(--space-2xl);
	position: relative;
	overflow: hidden;
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 15% 20%, rgba(50,150,255,0.35), transparent 45%),
		radial-gradient(circle at 85% 75%, rgba(50,150,255,0.25), transparent 40%);
	pointer-events: none;
}
.hero__inner { position: relative; display: grid; gap: var(--space-l); }
.hero__logo-space {
	width: 96px; height: 96px;
	border: 2px dashed rgba(255,255,255,0.5);
	border-radius: var(--radius-m);
	display: flex; align-items: center; justify-content: center;
	font-size: var(--step--1);
	text-align: center;
	color: rgba(255,255,255,0.75);
	margin-bottom: var(--space-s);
}
/* The real logo is a wide transparent wordmark, not a square icon —
   drop the placeholder's fixed box/border and size it by width instead. */
.hero__logo-space--image {
	width: auto;
	height: auto;
	max-width: min(420px, 70vw);
	border: none;
	display: block;
}
.hero__logo-space--image img {
	width: 100%;
	height: auto;
	display: block;
	/* The logo's navy wordmark is illegible against this navy hero —
	   render it as a white silhouette here only; the header keeps the
	   original colors, which read fine against its white background. */
	filter: brightness(0) invert(1);
}
.hero .eyebrow { color: var(--color-blue-light); }
.hero h1 { color: #fff; font-size: var(--step-5); max-width: 24ch; }
.hero__tagline { font-size: var(--step-1); color: rgba(255,255,255,0.88); max-width: 42ch; }
.hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-l);
	font-weight: 600;
}
.hero__meta-item { display: flex; align-items: center; gap: var(--space-2xs); }
.hero__meta-item .dot { color: var(--color-blue); }
.hero .btn-outline { border-color: rgba(255,255,255,0.6); color: #fff; }
.hero .btn-outline:hover { border-color: #fff; }

/* ===== Key dates strip (always-visible) ===== */
.dates-strip {
	background: var(--color-navy-700);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 90;
}
.dates-strip__inner {
	display: flex;
	gap: var(--space-l);
	overflow-x: auto;
	padding-block: var(--space-2xs);
	font-size: var(--step--1);
	font-weight: 600;
	white-space: nowrap;
}
.dates-strip strong { color: var(--color-blue-light); font-weight: 700; margin-right: var(--space-3xs); }

/* ===== Card grid ===== */
.grid {
	display: grid;
	gap: var(--space-l);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Unlike grid--2/3/4 above (auto-fit by minimum size — the column count
   varies with available width), this is a genuinely fixed column count,
   for layouts like a 6-item speaker grid that should read as 3x2
   regardless of viewport width. */
.grid--3-fixed { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 56rem) {
	.grid--3-fixed { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 32rem) {
	.grid--3-fixed { grid-template-columns: 1fr; }
}

.card {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-m);
	padding: var(--space-l);
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.card--highlight {
	background: var(--color-blue-100);
	border-color: var(--color-blue-light);
	border-left: 4px solid var(--color-navy);
}
.card--highlight h3 { color: var(--color-navy); }
.card--highlight p { font-weight: 600; margin-bottom: 0; }
.card__icon {
	width: 48px; height: 48px;
	border-radius: var(--radius-s);
	background: var(--color-blue-100);
	color: var(--color-navy);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
	margin-bottom: var(--space-s);
}
.card ul { padding-left: 1.1em; margin: var(--space-s) 0 0; }
.card li + li { margin-top: var(--space-2xs); }

/* ===== Person card (speakers / committee) ===== */
.person-card {
	text-align: center;
	/* Caps width so a row with only 1-2 items (a small committee, a lone
	   keynote) doesn't stretch the card — and its aspect-ratio photo —
	   to the full grid track width. */
	max-width: 20rem;
	margin-inline: auto;
	width: 100%;
}
.person-card__photo {
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--radius-m);
	background: var(--color-surface-alt);
	border: 1px dashed var(--color-line);
	display: flex; align-items: center; justify-content: center;
	color: var(--color-muted);
	font-size: var(--step--1);
	overflow: hidden;
	margin-bottom: var(--space-s);
}
.person-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.person-card__name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); color: var(--color-ink); }
.person-card__affiliation { color: var(--color-muted); font-size: var(--step--1); }
.person-card__badge { margin-top: var(--space-2xs); }

/* ===== Important dates table ===== */
.dates-table-wrap { overflow-x: auto; border-radius: var(--radius-m); border: 1px solid var(--color-line); }
.dates-table { min-width: 32rem; }
.dates-table caption { text-align: left; font-weight: 700; padding: var(--space-s); }
.dates-table th, .dates-table td { text-align: left; padding: var(--space-s); border-bottom: 1px solid var(--color-line); }
.dates-table thead th { background: var(--color-surface-alt); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); }
.dates-table tbody tr:last-child td { border-bottom: none; }
.dates-table td:first-child { font-weight: 700; color: var(--color-navy); white-space: nowrap; }

/* ===== Program schedule detail tags ===== */
.program-detail { display: block; font-style: italic; margin-top: 0.15em; }
.program-detail--venue { color: #548DD4; }
.program-detail--track { color: #00B050; }
.program-detail--note { color: #E36C0A; }
.program-detail--speaker { font-weight: 700; font-style: normal; color: var(--color-navy); }

/* ===== Logo row (sponsors/organizers) ===== */
.logo-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-xl);
}
.logo-row__item {
	width: 140px; height: 80px;
	display: flex; align-items: center; justify-content: center;
	color: var(--color-muted);
	font-size: var(--step--1);
	text-align: center;
	padding: var(--space-2xs);
}
.logo-row__item img { max-width: 100%; max-height: 100%; }

/* ===== Gallery placeholder grid (venue photos) ===== */
.photo-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-s); }
.photo-gallery__item {
	aspect-ratio: 4/3;
	border-radius: var(--radius-m);
	background: var(--color-surface-alt);
	border: 1px dashed var(--color-line);
	display: flex; align-items: center; justify-content: center;
	color: var(--color-muted);
	font-size: var(--step--1);
	text-align: center;
	padding: var(--space-s);
	overflow: hidden;
}
.photo-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
/* Labeled diagrams (e.g. the campus map) shouldn't be cropped like photos —
   edge labels would get cut off. */
.photo-gallery__item--contain { background: var(--color-surface); border-style: solid; }
.photo-gallery__item--contain img { object-fit: contain; }

/* ===== News list ===== */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-item { display: flex; gap: var(--space-m); padding-block: var(--space-m); border-bottom: 1px solid var(--color-line); }
.news-item:last-child { border-bottom: none; }
.news-item__date { flex-shrink: 0; width: 7rem; color: var(--color-muted); font-size: var(--step--1); font-weight: 600; }
.news-item__title { margin: 0 0 var(--space-3xs); font-size: var(--step-0); font-weight: 700; }
.news-item__title a { color: var(--color-ink); text-decoration: none; }
.news-item__title a:hover { color: var(--color-navy-700); }

/* ===== Page header (non-home pages) ===== */
.page-hero {
	background: var(--color-navy);
	color: #fff;
	padding-block: var(--space-2xl) var(--space-xl);
}
.page-hero h1 { color: #fff; margin-bottom: 0; }
.breadcrumbs { font-size: var(--step--1); color: rgba(255,255,255,0.75); margin-bottom: var(--space-s); }
.breadcrumbs a { color: rgba(255,255,255,0.85); }

/* ===== Footer ===== */
.site-footer { background: var(--color-navy-900); color: rgba(255,255,255,0.85); }
.site-footer a { color: #fff; }
/* Overrides the global a:hover (navy-700), which would be nearly invisible
   against this dark footer background. */
.site-footer a:hover { color: var(--color-blue-light); }
.site-footer .container { padding-block: var(--space-2xl) var(--space-l); }
.footer-grid { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-bottom: var(--space-l); }
.footer-grid h2, .footer-grid h3 { color: #fff; font-size: var(--step-0); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li + li { margin-top: var(--space-2xs); }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: var(--space-m); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: space-between; }

/* ===== Scroll to top ===== */
.scroll-top-btn {
	position: fixed;
	right: var(--space-m);
	bottom: var(--space-m);
	z-index: 40;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: var(--color-navy);
	color: #fff;
	box-shadow: var(--shadow-card-hover);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition), background var(--transition);
}
.scroll-top-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover, .scroll-top-btn:focus-visible { background: var(--color-navy-700); }
.scroll-top-btn svg { width: 20px; height: 20px; }

/* ===== Utility ===== */
.mt-0 { margin-top: 0; }
.nowrap { white-space: nowrap; }
.heading-plain { font-family: var(--font-body); font-size: var(--step-0); font-weight: 700; }