/* ==========================================================================
   XOCOVA PEP Talks — main stylesheet
   Order mirrors the page: tokens, fonts, base, header, hero, day selector,
   sessions, notes, ISI, footer, utilities.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
	/* Color */
	--xpt-color-primary: #10069f;      /* deep brand blue */
	--xpt-color-secondary: #007dba;    /* mid blue — links, eyebrows */
	--xpt-color-teal: #6eceb2;
	--xpt-color-teal-bright: #00e8c5;  /* hero bracket flourishes */
	--xpt-color-mint: #eaf6f3;         /* alternating day band */
	--xpt-color-gold: #ffd700;         /* hero eyebrow */
	--xpt-color-card: #f4f7fa;         /* session detail card */
	--xpt-color-rule: #dce4ec;         /* hairline separators */
	--xpt-color-text: #1a1a1a;
	--xpt-color-text-muted: #555555;
	--xpt-color-white: #ffffff;

	/* Footer gradient stops */
	--xpt-color-grad-1: #2bace2;
	--xpt-color-grad-2: #0f7dd1;
	--xpt-color-grad-3: #0a5bbe;

	/* Type */
	--xpt-font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--xpt-font-body: 'Red Hat Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Fluid type scale */
	--xpt-text-xs: 0.8125rem;                              /* 13px — legal, eyebrows */
	--xpt-text-sm: 0.875rem;                               /* 14px — meta */
	--xpt-text-base: 0.9375rem;                            /* 15px — body/ISI */
	--xpt-text-md: clamp(1rem, 0.93rem + 0.35cqi, 1.1875rem);   /* 16–19px — lede */
	--xpt-text-lg: clamp(1.125rem, 1.02rem + 0.5cqi, 1.375rem); /* 18–22px — session titles */
	--xpt-text-xl: clamp(1.25rem, 1.1rem + 0.75cqi, 1.625rem);  /* 20–26px — day/ISI headings */
	--xpt-text-2xl: clamp(1.375rem, 1.15rem + 1.15cqi, 1.875rem); /* 22–30px — hero H1 */

	/* Spacing */
	--xpt-space-2xs: 0.375rem;
	--xpt-space-xs: 0.625rem;
	--xpt-space-sm: 0.875rem;
	--xpt-space-md: 1.5rem;
	--xpt-space-lg: 2.5rem;
	--xpt-space-xl: clamp(2.5rem, 1.75rem + 3cqi, 4.5rem);  /* section padding */
	--xpt-gutter: clamp(1.25rem, 0.5rem + 3.5cqi, 3rem);    /* page side gutter */

	/* Layout */
	--xpt-container: 67.5rem; /* 1080px content column */
	--xpt-header-logo-h: clamp(4rem, 3.25rem + 3cqi, 6.25rem); /* tallest header logo */
	--xpt-header-h: calc(var(--xpt-header-logo-h) + var(--xpt-space-md)); /* sticky header height: logo + halved padding both sides */
	--xpt-day-selector-w: 17.5rem; /* pill and its dropdown share this width */
	--xpt-day-selector-w-mobile: 21.875rem; /* 350px cap when the pill goes full width */
	--xpt-session-accent-w: 3.5rem; /* teal segment leading the divider between sessions */
	--xpt-notice-min-h: clamp(16rem, 10rem + 20cqi, 26rem); /* "stay tuned" band standing in for the session list */

	/* Radius */
	--xpt-radius-sm: 9px;
	--xpt-radius-md: 12px;
	--xpt-radius-lg: 14px;
	--xpt-radius-pill: 999px;

	/* Effects */
	--xpt-shadow-menu: 0 12px 32px rgba(16, 6, 159, 0.16);
	--xpt-shadow-sticky: 0 6px 16px rgba(16, 6, 159, 0.08); /* under pinned sticky bars */

	/* Borders */
	--xpt-border-brand: 2px solid var(--xpt-color-primary);
}

/* --------------------------------------------------------------------------
   2. @font-face — self-hosted variable fonts
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/geist-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/geist-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Red Hat Display';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/red-hat-display-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Red Hat Display';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/red-hat-display-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

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

body {
	margin: 0;
	font-family: var(--xpt-font-body);
	font-size: var(--xpt-text-base);
	line-height: 1.65;
	color: var(--xpt-color-text);
	background: var(--xpt-color-white);
	/* Page-level container: full-bleed sections respond to this. */
	container-type: inline-size;
	container-name: page;
}

h1,
h2,
h3,
h4,
p {
	margin: 0;
}

h1,
h2,
h3,
h4 {
	font-family: var(--xpt-font-display);
	color: var(--xpt-color-primary);
	line-height: 1.3;
}

a {
	color: var(--xpt-color-secondary);
}

a:hover {
	color: var(--xpt-color-primary);
}

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

button {
	font: inherit;
}

/* Shared content column */
.xpt-container {
	max-width: var(--xpt-container);
	margin-inline: auto;
	padding-inline: var(--xpt-gutter);
}

/* --------------------------------------------------------------------------
   4. Site header
   -------------------------------------------------------------------------- */

.site-header {
	background: var(--xpt-color-white);
	position: sticky;
	top: 0;
	z-index: 50; /* above the day-selector menu (40) */
	transition: box-shadow 0.2s ease;
}

.site-header.is-stuck {
	box-shadow: var(--xpt-shadow-sticky);
}

/* Once the day-selector bar pins beneath the header, it owns the shadow. */
body:has(.sessions__selector.is-stuck) .site-header.is-stuck {
	box-shadow: none;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--xpt-space-md);
	padding-block: calc(var(--xpt-space-md) / 2);
}

.site-header__brand-link {
	display: inline-flex;
}

.site-header__brand {
	height: clamp(3rem, 2.5rem + 2cqi, 4.5rem);
	width: auto;
}

.site-header__series {
	height: var(--xpt-header-logo-h);
	width: auto;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero {
	background: var(--xpt-color-primary);
	padding: var(--xpt-space-xl) var(--xpt-gutter);
	overflow: hidden;
}

.hero__inner {
	max-width: var(--xpt-container);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--xpt-space-md);
}

.hero__bracket {
	flex: none;
	display: block;
	height: clamp(5.5rem, 4.25rem + 5cqi, 9rem);
}

.hero__bracket svg {
	height: 100%;
	width: auto;
	display: block;
}

.hero__content {
	text-align: center;
	max-width: 60rem;
}

.hero__eyebrow {
	font-family: var(--xpt-font-display);
	font-weight: 600;
	font-size: var(--xpt-text-md);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--xpt-color-gold);
	margin-bottom: var(--xpt-space-sm);
}

.hero__title {
	font-weight: 700;
	font-size: var(--xpt-text-2xl);
	text-transform: uppercase;
	color: var(--xpt-color-white);
	text-wrap: balance;
	margin-bottom: var(--xpt-space-md);
}

.hero__lede {
	font-size: var(--xpt-text-md);
	line-height: 1.55;
	color: var(--xpt-color-white);
	max-width: 40rem;
	margin-inline: auto;
}

@container page (max-width: 640px) {
	.hero__bracket {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   6. Day selector
   -------------------------------------------------------------------------- */

.sessions__selector {
	position: sticky;
	top: var(--xpt-header-h);
	z-index: 45; /* under the header (50), above day content */
	background: var(--xpt-color-white);
	/* Rule is only visible while pinned; transparent otherwise so nothing jumps. */
	border-top: var(--xpt-border-brand);
	border-top-color: transparent;
	margin-top: var(--xpt-space-md); /* outside the sticky box, so the stuck bar stays slim */
	padding-block: var(--xpt-space-sm);
	transition: box-shadow 0.2s ease, border-top-color 0.2s ease;
}

.sessions__selector.is-stuck {
	border-top-color: var(--xpt-color-primary);
	box-shadow: var(--xpt-shadow-sticky);
}

/* "Stay tuned" notice: stands in for the day selector and every day band, so
   it gets enough height to read as a section. Stays on white. */
.sessions__notice {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: var(--xpt-space-sm);
	min-block-size: var(--xpt-notice-min-h);
	padding-block: var(--xpt-space-xl);
	text-align: center;
}

.sessions__notice-title {
	font-weight: 700;
	font-size: var(--xpt-text-xl);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--xpt-color-primary);
	padding-top: var(--xpt-space-sm);
	border-top: 2px solid var(--xpt-color-teal);
}

.sessions__notice-text {
	max-width: 36rem;
	font-size: var(--xpt-text-md);
	line-height: 1.55;
	color: var(--xpt-color-text-muted);
	text-wrap: pretty;
}

.day-selector {
	position: relative;
	display: inline-block;
}

.day-selector__button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--xpt-space-sm);
	width: var(--xpt-day-selector-w);
	max-width: 100%;
	font-family: var(--xpt-font-display);
	font-weight: 600;
	font-size: var(--xpt-text-sm);
	color: var(--xpt-color-primary);
	background: var(--xpt-color-white);
	border: var(--xpt-border-brand);
	border-radius: var(--xpt-radius-pill);
	padding: var(--xpt-space-xs) 1.125rem;
	cursor: pointer;
	text-align: left;
	white-space: nowrap;
}

.day-selector__button:hover {
	background: var(--xpt-color-card);
}

.day-selector__chevron {
	flex: none;
	transition: rotate 0.15s ease;
}

.day-selector.is-open .day-selector__chevron {
	rotate: 180deg;
}

.day-selector__menu {
	display: none;
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	z-index: 40;
	width: var(--xpt-day-selector-w);
	max-width: 100%;
	background: var(--xpt-color-white);
	border: var(--xpt-border-brand);
	border-radius: var(--xpt-radius-lg);
	box-shadow: var(--xpt-shadow-menu);
	padding: var(--xpt-space-2xs);
}

.day-selector.is-open .day-selector__menu {
	display: block;
}

.day-selector__item {
	display: block;
	font-family: var(--xpt-font-display);
	font-weight: 600;
	font-size: var(--xpt-text-sm);
	color: var(--xpt-color-primary);
	text-decoration: none;
	padding: var(--xpt-space-xs) var(--xpt-space-sm);
	border-radius: var(--xpt-radius-sm);
}

.day-selector__item:hover {
	background: var(--xpt-color-mint);
	color: var(--xpt-color-primary);
}

@container page (max-width: 640px) {
	.sessions__selector {
		margin-top: var(--xpt-space-xs);
		padding-block: var(--xpt-space-xs);
	}

	.day-selector {
		display: block;
		width: 100%;
		max-width: var(--xpt-day-selector-w-mobile);
	}

	.day-selector__button,
	.day-selector__menu {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   7. Sessions
   -------------------------------------------------------------------------- */

.day-group {
	/* Clear the sticky header + sticky selector bar, plus breathing room. */
	scroll-margin-top: calc(var(--xpt-header-h) + var(--xpt-space-lg) + var(--xpt-space-md) * 2);
}

/* Alternating full-bleed day bands */
.day-group:nth-child(even of .day-group) {
	background: var(--xpt-color-mint);
}

.day-group__inner {
	padding-block: var(--xpt-space-lg) 1.125rem;
}

.day-group__header {
	display: flex;
	align-items: baseline;
	gap: var(--xpt-space-sm);
	border-bottom: var(--xpt-border-brand);
	padding-bottom: var(--xpt-space-xs);
}

.day-group__weekday {
	font-family: var(--xpt-font-display);
	font-weight: 600;
	font-size: var(--xpt-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--xpt-color-secondary);
}

.day-group__date {
	font-weight: 700;
	font-size: var(--xpt-text-xl);
}

.session {
	display: flex;
	gap: var(--xpt-space-lg);
	flex-wrap: wrap;
	align-items: flex-start;
	padding-block: var(--xpt-space-lg);
}

/* Sessions on a day can share a title and differ only by speaker, so the
   divider carries a teal accent to mark where one program ends. */
.session + .session {
	border-top: 1px solid var(--xpt-color-rule);
	background-image: linear-gradient(to right, var(--xpt-color-teal) 0 var(--xpt-session-accent-w), transparent var(--xpt-session-accent-w));
	background-repeat: no-repeat;
	background-size: 100% 2px;
	background-position: top left;
}

.session__info {
	flex: 1.2;
	min-width: min(21rem, 100%);
}

.session__label {
	font-family: var(--xpt-font-display);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--xpt-color-secondary);
	margin-bottom: var(--xpt-space-2xs);
}

.session__title {
	font-weight: 700;
	font-size: var(--xpt-text-lg);
	text-wrap: pretty;
	margin-bottom: var(--xpt-space-sm);
}

.session__speakers {
	display: flex;
	flex-direction: column;
	gap: var(--xpt-space-sm);
}

.session__speaker {
	display: flex;
	align-items: center;
	gap: var(--xpt-space-sm);
}

.session__headshot {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.session__headshot-img {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.session__speaker-name {
	font-family: var(--xpt-font-display);
	font-weight: 600;
	font-size: var(--xpt-text-base);
	color: var(--xpt-color-text);
}

.session__speaker-org {
	font-size: var(--xpt-text-sm);
	color: var(--xpt-color-text-muted);
}

.session__card {
	flex: 1;
	min-width: min(21rem, 100%);
	display: flex;
	align-items: center;
	gap: var(--xpt-space-md);
	flex-wrap: wrap;
	background: var(--xpt-color-card);
	border-radius: var(--xpt-radius-md);
	padding: 1.125rem var(--xpt-space-md);
}

/* Cards sit on white inside mint bands */
.day-group:nth-child(even of .day-group) .session__card {
	background: var(--xpt-color-white);
}

.session__when {
	flex: 1;
	min-width: 11rem;
}

.session__date {
	font-family: var(--xpt-font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--xpt-color-primary);
}

.session__time {
	font-size: var(--xpt-text-sm);
	line-height: 1.2;
	color: var(--xpt-color-text);
	margin-top: 0.125rem;
}

.session__venue {
	font-size: var(--xpt-text-sm);
	color: var(--xpt-color-text-muted);
}

.session__register {
	font-family: var(--xpt-font-display);
	font-weight: 700;
	font-size: var(--xpt-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--xpt-color-white);
	background: var(--xpt-color-primary);
	text-decoration: none;
	padding: var(--xpt-space-xs) 1.625rem;
	border-radius: var(--xpt-radius-pill);
}

.session__register:hover {
	background: var(--xpt-color-secondary);
	color: var(--xpt-color-white);
}

@container page (max-width: 640px) {
	/* When the register button wraps onto its own row, keep the space above it
	   (row gap) and the card padding tight and equal on all sides. */
	.session__card {
		row-gap: var(--xpt-space-sm);
		padding: var(--xpt-space-sm);
	}
}

/* --------------------------------------------------------------------------
   8. Notes / ISI
   -------------------------------------------------------------------------- */

.attendance-note {
	padding-block: var(--xpt-space-md) var(--xpt-space-lg);
}

.attendance-note__text {
	font-size: var(--xpt-text-xs);
	line-height: 1.6;
	color: var(--xpt-color-text-muted);
}

.isi {
	background: var(--xpt-color-card);
}

.isi__inner {
	padding-block: var(--xpt-space-xl);
}

.isi__heading {
	font-weight: 700;
	font-size: var(--xpt-text-xl);
	margin-bottom: var(--xpt-space-md);
}

.isi__subheading {
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--xpt-color-secondary);
	margin-bottom: 0.5rem;
}

.isi__text {
	font-size: var(--xpt-text-base);
	margin-bottom: var(--xpt-space-md);
}

.isi__text--section {
	margin-bottom: var(--xpt-space-lg);
}

.isi__text--tight {
	margin-bottom: 0.75rem;
}

.isi__pi {
	font-family: var(--xpt-font-display);
	font-weight: 600;
	font-size: var(--xpt-text-base);
}

/* --------------------------------------------------------------------------
   9. Site footer
   -------------------------------------------------------------------------- */

.site-footer {
	background: linear-gradient(
		215deg,
		var(--xpt-color-grad-1) 0%,
		var(--xpt-color-grad-2) 45%,
		var(--xpt-color-grad-3) 100%
	);
	color: var(--xpt-color-white);
}

.site-footer__inner {
	padding-block: var(--xpt-space-lg);
}

.site-footer__logo-link {
	display: inline-block;
	margin-bottom: var(--xpt-space-md);
}

.site-footer__logo {
	height: 3rem;
	width: auto;
	display: block;
}

.site-footer__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--xpt-space-lg);
	flex-wrap: wrap;
}

.site-footer__legal {
	font-size: var(--xpt-text-xs);
	line-height: 1.8;
	max-width: 39rem;
}

.site-footer__links {
	display: flex;
	gap: var(--xpt-space-md);
	flex-wrap: wrap;
}

.site-footer__link {
	font-size: var(--xpt-text-xs);
	color: var(--xpt-color-white);
	text-decoration: none;
	white-space: nowrap;
}

.site-footer__link:hover {
	color: var(--xpt-color-white);
	text-decoration: underline;
}