/* ──────────────────────────────────────────────
   LIGHT THEME BASELINE
────────────────────────────────────────────── */
:root:not([data-theme="dark"]),
[data-theme="light"] {
	color-scheme: light;

	/* Brand colors (primary buttons) - darker blue for primary actions */
	--brand: #2563b5;
	--brand-hover: #1e4a8a;

	/* --brand: var(--accent-blue);
	--brand-hover: var(--accent-blue-hover); */

	/* Accent colors

	/* Secondary button colors - aligned with accent-blue */
	--secondary-blue: var(--accent-blue);
	--secondary-blue-hover: var(--accent-blue-hover);

	/* Accent colors */
	/* we want a hover, normal, soft, and background variant for all colors */

	/* Green - success/positive */
	--accent-green: #5bb59a;
	--accent-green-hover: color-mix(in srgb, var(--accent-green), black 10%);
	--accent-green-background: color-mix(in srgb, var(--accent-green) 6%, white);
	--accent-green-border: color-mix(in srgb, var(--accent-green) 25%, white);

	/* Blue - info/neutral */
	--accent-blue: #5b9bd5;
	--accent-blue-hover: color-mix(in srgb, var(--accent-blue), black 10%);
	--accent-blue-background: color-mix(in srgb, var(--accent-blue) 6%, white);
	--accent-blue-border: color-mix(in srgb, var(--accent-blue) 25%, white);

	/* Red - danger/error */
	--accent-red: #d66e6e;
	--accent-red-hover: color-mix(in srgb, var(--accent-red), black 10%);
	--accent-red-background: color-mix(in srgb, var(--accent-red) 6%, white);
	--accent-red-border: color-mix(in srgb, var(--accent-red) 25%, white);

	/* Amber/Yellow - warning/attention */
	--accent-amber: #e6b055;
	--accent-amber-hover: color-mix(in srgb, var(--accent-amber), black 10%);
	--accent-amber-background: color-mix(in srgb, var(--accent-amber) 6%, white);
	--accent-amber-border: color-mix(in srgb, var(--accent-amber) 25%, white);

	/* Hero gradient colors */
	--hero-gradient-start: #e8f2fc;
	--hero-gradient-end: #f5f9fd;

	/* Neutral palette */
	--white: #ffffff;
	--pico-background-color: var(--white);
	--pico-card-background-color: var(--white);
	--pico-form-element-background-color: var(--white);
	--pico-color: #373c44;
	--pico-h4-color: #4d535e;
	--pico-muted-color: #6b7280;
	--pico-border-color: #e5e7eb;

	/* Pico primary button (uses brand) */
	--pico-primary: var(--brand);
	--pico-primary-background: var(--brand);
	--pico-primary-border: var(--brand);
	--pico-primary-hover: var(--brand-hover);
	--pico-primary-hover-background: var(--brand-hover);
	--pico-primary-hover-border: var(--brand-hover);
	--pico-primary-inverse: var(--white);

	/* Pico secondary button (medium blue) */
	--pico-secondary: var(--secondary-blue);
	--pico-secondary-background: var(--secondary-blue);
	--pico-secondary-border: var(--secondary-blue);
	--pico-secondary-hover: var(--secondary-blue-hover);
	--pico-secondary-hover-background: var(--secondary-blue-hover);
	--pico-secondary-hover-border: var(--secondary-blue-hover);
	--pico-secondary-inverse: var(--white);

	/* Pico contrast button (danger red) */
	--pico-contrast: var(--accent-red);
	--pico-contrast-background: var(--accent-red);
	--pico-contrast-border: var(--accent-red);
	--pico-contrast-hover: var(--accent-red-hover);
	--pico-contrast-hover-background: var(--accent-red-hover);
	--pico-contrast-hover-border: var(--accent-red-hover);
	--pico-contrast-inverse: var(--white);

	/* form colors (soft red) */
	--pico-form-element-invalid-border-color: var(--accent-red);
	--pico-form-element-invalid-background-color: var(--accent-red-background);

	--pico-block-spacing-vertical: 2rem;
	/* --pico-typography-spacing-vertical: 2rem; */

	/* Typography */
	font-family: system-ui, sans-serif;
	line-height: 1.6;

	/* Layout tokens */
	--content-width: 64rem;
	--section-gap: 3rem;
	--radius: 8px;
}

/* ──────────────────────────────────────────────
   NAVIGATION & FOOTER
────────────────────────────────────────────── */
nav .brand-link {
	text-decoration: none;
	color: inherit;
}

nav .brand-link:hover {
	text-decoration: underline;
}

footer {
	font-size: 0.875rem;
	text-align: center;
}

/* ──────────────────────────────────────────────
   HERO SECTION
────────────────────────────────────────────── */
.hero {
	text-align: center;
	padding: 5rem 2rem 3rem;
	margin-bottom: 4rem;
	background: linear-gradient(135deg, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 100%);
	border-radius: var(--radius);
}

.hero h1 {
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-bottom: 1.5rem;
}

.hero-line-small {
	display: block;
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: 0.5rem;
}

.hero-line-large {
	display: block;
	font-size: clamp(2.25rem, 6vw, 3.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--pico-color);
	line-height: 1.1;
}

.hero h2 {
	font-size: clamp(1.0rem, 2.1vw, 1.35rem);	
	font-weight: 500;
	color: var(--pico-color);
	line-height: 1.5;
	margin-bottom: 2.5rem;
	max-width: 42rem;
	margin-inline: auto;
}

.hero-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}

.hero-meta {
	color: var(--pico-muted-color);
	font-size: 0.9rem;
	margin: 0;
	line-height: 1.4;
}

/* responsive hero and CTA size for mobile */
@media (max-width: 640px) {
	.hero {
		padding: 3.5rem 1.5rem;
	}

	.btn-primary-large {
		font-size: 1rem;
		padding: 0.75rem 2rem;
		width: 100%;
		max-width: 320px;
	}
}

/**
  UI ELEMENTS
**/

/* smaller button */
.button--small {
	padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
}

/* Avatar / profile image */
.avatar {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--pico-border-color);
	background: var(--pico-background-color);
}

@media (max-width: 600px) {
	.avatar {
		width: 140px;
		height: 140px;
	}
}

/* Divider */
.divider {
	max-width: 5rem;
	margin: 1.5rem auto;
	border: none;
	border-top: 3px solid var(--accent-green-border);
	opacity: 1;
}

/* Video thumbnail */
.video-thumb {
	display: block;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.video-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.video-thumb:hover img {
	transform: scale(1.02);
}

.video-thumb .badge {
	position: absolute;
	bottom: 0.6rem;
	left: 0.6rem;
	background: rgba(0, 0, 0, 0.78);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.3rem 0.55rem;
	border-radius: 4px;
}

/* when we have invalid form fields, we want a color for them. Pico CSS only looks at aria-invalid, but we want to style based on the :invalid pseudo-class. */
input:invalid,
textarea:invalid {
	border-color: var(--pico-form-element-invalid-border-color);
}

/* ──────────────────────────────────────────────
   ACCORDION (Native details/summary)
────────────────────────────────────────────── */
details {
	border: 1px solid var(--pico-border-color);
	border-radius: 8px;
	background: var(--pico-card-background-color);
	margin-bottom: 0.5rem;
}

details summary {
	padding: 1rem 1.25rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

details summary::-webkit-details-marker {
	display: none;
}

details summary::after {
	content: "+";
	background-image: none;
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--pico-muted-color);
	transition: transform 0.2s ease;
}

details[open] summary::after {
	content: "−";
}

details > :not(summary) {
	padding: 0 1.25rem 1rem;
}

details p {
	margin: 0 0 0.75rem;
}

details p:last-child {
	margin-bottom: 0;
}


/* ──────────────────────────────────────────────
   LAYOUT UTILITIES
  ────────────────────────────────────────────── */

/* Spacing in the dashboard */
.spaced-out > * + * {
	margin-bottom: 5rem;
	--pico-block-spacing-vertical: 2rem;
}

.spaced-out> *:last-child {
	margin-bottom: 0rem;
}

.content-centered {
	/* margin-inline: auto; */
	text-align: center;
}

.content-centered .card {
	margin-inline: auto;
}

/* Flex grow (pushes content to bottom) */
.flex-col { display: flex; flex-direction: column; }
.flex-grow { flex-grow: 1; }


.grid-vert4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-gap: 1rem;
}

/* cards need to be spaced out with a gap */
.card:not(section) {
	margin-bottom: var(--card-stack-gap);
}

/* Card Rows - Flexible rows for headers or list items */
.card__row {
	display: grid;
	grid-template-columns: 1fr auto;
	/* justify-content: space-between; */
	align-items: start; /* Aligns text baselines (e.g. h3 with meta span) */
	/* gap: 1rem; */
	width: 100%;
}

.card__row > hgroup {
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
}

.card__meta {
	font-size: 0.85rem;
	color: var(--pico-muted-color);
	white-space: nowrap;
}


/* ──────────────────────────────────────────────
   CARD COMPONENT SYSTEM

	The card system has a few conceptual ideas about how it is expected to be used. 
	
	.card is the base component. It is a simple container with padding, border, and border-radius.

	A card is usually meant to group a section of related content together. 

	A card may have several sizes. The sizes determine layout, padding, margins, and fonts.
	- .card--small is for small cards that contain a single piece of information, and not any headers.
	- .card--medium is for most cards that contain a moderate amount of information, and may still have headers/overlines. It may not have other cards
	- .card--large is for larger cards that contain a lot of information and potentially any other cards.
	- .card--xl is for extra large cards that span the full width of the container. Headers are centered.

	Cards can have a few themes:
	The default theme styles the card as a simple container.
	- .card--info to use a text callout. Theese call out text even more, and group a smaller section of text. It is styled with a blue background, and a thicker left-border.
	- .card--success to use to call out positive information. It is styled with a green background, and a thicker left-border.
	- .card--warn to use to call out important information. It is styled with a yellow background, and a thicker left-border.
	- .card--danger to use to call out negative information. It is styled with a red background, and a thicker left-border.

	All parts of the card may be colored and themed with these colors:
	- red, amber, green, and blue.
	- You can style the cards with .card--bg-{color}, .card--border-{color}, .card--hard-border-{color}
	- The top or left border may be "thickened" with .card--border-top or .card--border-left.
	- When card--{color} is used, it colors both the border and the background.

	We use <hgroup> tags to specify a header. Any header class within the hgroup will be styled according to the card type (section, info, etc.)
	A hgroup may have a <p> tag before the header, indicating that is is an eyebrow. Any header class within the hgroup will be styled as a header. A hgroup may also have a <p> after a header, indicating that it is a subtitle.

	A card may have a list in it. If the list is the only child of the card, it will be styled as a flush list. 
	In a flush list, 
────────────────────────────────────────────── */
div {
	--card-stack-gap: 1.25rem;
}
/*
	Base card component with CSS custom properties for sizing
	Variables cascade naturally, so nested cards override outer card values
*/
.card {
	/* Size variables - defaults (base/medium). Customized in .card--small, .card--medium, .card--large, and .card--xl */
	--card-h2-size: 1.25rem;
	--card-h2-weight: 700;
	--card-h2-margin: 0.5rem;
	--card-h3-size: 1.1rem;
	--card-h3-weight: 700;
	--card-h3-margin: 0.4rem;
	--card-h4-size: 1rem;
	--card-h4-weight: 700;
	--card-h4-margin: 0.3rem;
	--card-p-size: 1rem;
	--card-p-line-height: 1.6;
	--card-overline-size: 0.8rem;
	--card-overline-margin: 0.4rem;
	--card-stack-gap: 1.25rem;
	--card-hgroup-margin: 0.75rem;
	--card-hgroup-eyebrow-size: 0.75rem;
	--card-hgroup-eyebrow-margin: 0.3rem;
	--card-hgroup-p-size: 0.9rem;
	--card-hgroup-p-margin: 0.25rem;
	--card-hgroup-p-weight: 400;

	/* Color variables - defaults (base). Customized in .card--info, .card--success, .card--warning, .card--error */
	--card-foreground-color: var(--pico-color);
	--card-background-color: var(--pico-card-background-color);
	--card-accent-background-color: var(--pico-card-background-color);
	--card-border-color: var(--pico-border-color);

	padding: 1.5rem;
	border: 1px solid var(--card-border-color); /* border color always applies, but background needs to be opted in */
	border-radius: var(--radius);
	box-shadow: none;
	color: var(--card-foreground-color);
}

/* assume that articles in cards are nested cards */
.card article {
	margin-bottom: 0;
}

/* Remove bottom margin from the very last elements before card bottom
   Cascades through nested containers (div, section, etc.) to reach actual content */
.card > :last-child,
.card > :last-child > :last-child,
.card > :last-child > :last-child > :last-child,
.card > :last-child > :last-child > :last-child > :last-child {
	margin-bottom: 0;
}

/* Apply size variables to elements */
.card.card {
	font-size: var(--card-p-size);
	line-height: var(--card-p-line-height);
}
.card.card h2 { font-size: var(--card-h2-size); margin-bottom: var(--card-h2-margin); font-weight: var(--card-h2-weight); }
.card.card h3 { font-size: var(--card-h3-size); margin-bottom: var(--card-h3-margin); font-weight: var(--card-h3-weight); }
.card.card h4 { font-size: var(--card-h4-size); margin-bottom: var(--card-h4-margin); font-weight: var(--card-h4-weight); }

/* Apply theme-specific foreground color */
.card :is(address, blockquote, dl, ol, p, pre, table, ul) {
	color: var(--card-foreground-color);
}

/** 
	Card Modifiers - Colors and Borders
**/

/* Defining colors for bg and semantic colors */
.card--blue,  .card--bg-blue,  .card--info    { --card-background-color: var(--accent-blue-background);}
.card--red,   .card--bg-red,   .card--danger  { --card-background-color: var(--accent-red-background); }
.card--amber, .card--bg-amber, .card--warn    { --card-background-color: var(--accent-amber-background); }
.card--green, .card--bg-green, .card--success { --card-background-color: var(--accent-green-background); }

.card--blue,  .card--border-blue,  .card--info    { --card-border-color: var(--accent-blue-border);  --card-accent-background-color: var(--accent-blue); }
.card--red,   .card--border-red,   .card--danger  { --card-border-color: var(--accent-red-border);   --card-accent-background-color: var(--accent-red); }
.card--amber, .card--border-amber, .card--warn    { --card-border-color: var(--accent-amber-border); --card-accent-background-color: var(--accent-amber); }
.card--green, .card--border-green, .card--success { --card-border-color: var(--accent-green-border); --card-accent-background-color: var(--accent-green); }

/* 'hard' border variant (for alerts, etc) */
.card--hard-border-green, .card--hard-border-success { --card-border-color: var(--accent-green); }
.card--hard-border-red, .card--hard-border-danger { --card-border-color: var(--accent-red); }
.card--hard-border-amber, .card--hard-border-warn { --card-border-color: var(--accent-amber); }
.card--hard-border-blue, .card--hard-border-info { --card-border-color: var(--brand); }

/* background application */
.card--blue,
.card--red,
.card--amber,
.card--green,
.card--bg-blue,
.card--bg-red,
.card--bg-amber,
.card--bg-green,
.card--info,
.card--warn,
.card--danger,
.card--success {
	background-color: var(--card-background-color);
}

.card--border-top {
	border-top: 4px solid var(--card-border-color);
}

.card--info, .card--warn, .card--danger, .card--success,
.card--border-left {
	border-left: 4px solid var(--card-border-color);
}

.card--border-left.card--border-accented {
	border-left: 4px solid var(--card-accent-background-color);
}
.card--border-top-accented.card--border-accented {
	border-top: 4px solid var(--card-accent-background-color);
}

/** 
	Card Modifiers - Sizes (override variables)
**/
.card--small { padding: 0.75rem; }

.card--medium {
	--card-h2-size: 1.25rem;
	--card-h2-weight: 700;
	--card-h2-margin: 0.5rem;
	--card-h3-size: 1.4rem;
	--card-h3-weight: 700;
	--card-h3-margin: 0.4rem;
	--card-h4-size: 1rem;
	--card-h4-weight: 700;
	--card-h4-margin: 0.8rem;
	--card-p-size: 1rem;
	--card-p-line-height: 1.6;
	--card-overline-size: 0.8rem;
	--card-overline-margin: 0.4rem;
	--card-stack-gap: 1.25rem;
	--card-hgroup-margin: 0.75rem;
	--card-hgroup-eyebrow-size: 0.75rem;
	--card-hgroup-eyebrow-margin: 0.3rem;
	--card-hgroup-p-size: 1.05rem;
	--card-hgroup-p-margin: 0.25rem;
	--card-hgroup-p-weight: 700;

	padding: 1.25rem 1.5rem;
}

.card--large {
	--card-h2-size: 1.5rem;
	--card-h2-weight: 700;
	--card-h2-margin: 0.75rem;
	--card-h3-size: 1.65rem;
	--card-h3-weight: 700;
	--card-h3-margin: 0.6rem;
	--card-h4-weight: 700;
	--card-h4-size: 1.1rem;
	--card-h4-margin: 0.5rem;
	--card-p-size: 1rem;
	--card-p-line-height: 1.65;
	--card-overline-size: 0.85rem;
	--card-overline-margin: 0.5rem;
	--card-stack-gap: 1.5rem;
	--card-hgroup-margin: 1.25rem;
	--card-hgroup-eyebrow-size: 0.8rem;
	--card-hgroup-eyebrow-margin: 0.4rem;
	--card-hgroup-p-size: 0.95rem;
	--card-hgroup-p-margin: 0.35rem;

	padding: 1.75rem 2rem;
	max-width: 40rem;
}

.card--xl {
	--card-h2-size: 1.85rem;
	--card-h2-weight: 700;
	--card-h2-margin: 1rem;
	--card-h3-size: 1.4rem;
	--card-h3-weight: 700;
	--card-h3-margin: 0.75rem;
	--card-h4-size: 1.2rem;
	--card-h4-weight: 700;
	--card-h4-margin: 0.6rem;
	--card-p-size: 1.05rem;
	--card-p-line-height: 1.7;
	--card-overline-size: 0.9rem;
	--card-overline-margin: 0.6rem;
	--card-stack-gap: 1.75rem;
	--card-hgroup-margin: 1.5rem;
	--card-hgroup-eyebrow-size: 0.85rem;
	--card-hgroup-eyebrow-margin: 0.5rem;
	--card-hgroup-p-size: 1.15rem;
	--card-hgroup-p-margin: 0.5rem;
	--card-hgroup-p-weight: 700;

	padding: 2.5rem 3rem;
}

/* fix sizing of card-xl on mobile */
@media (max-width: 640px) {
	.card--xl {
		--card-h2-size: 1.5rem;
		--card-h3-size: 1.25rem;
		padding: 2rem 1.5rem;
	}
}

/* Card--xl layout: centered content (but have a max content width, not applied to dividers or cards) */
.card.card--xl {
	text-align: center;
}

.card.card--xl>* {
	margin-inline: auto;
}

/* Card--xl layout: centered content (but have a max content width, not applied to dividers or cards) */
@media (min-width: 640px) {
	.card--xl > :not(.card):not(.divider):not(:has(.card)) {
		max-width: 44rem;
	}
}

/* fix list display in card--xl */
.card--xl ul, .card--xl ol {
	display: inline-block;
	text-align: left;
	padding-left: 1.5rem;
	margin: 0;
}



/* Nested smaller cards reset to left-aligned */
.card--large, .card--medium, .card--small {
	text-align: left;
}

/**
 	Card hgroup - header groups with optional overline and subtitle 
 **/
.card.card hgroup {
	margin-bottom: var(--card-hgroup-margin);
}

.card.card hgroup > * {
	margin-bottom: 0;
}

/* if p tag is first within hgroup it acts as overline */
.card.card hgroup p:first-child {
	display: block;
	font-size: var(--card-hgroup-eyebrow-size);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pico-muted-color);
	margin-bottom: var(--card-hgroup-eyebrow-margin);
}

/* p within hgroup acts as subtitle */
.card.card hgroup p {
	font-size: var(--card-hgroup-p-size);
	font-weight: var(--card-hgroup-p-weight);
	color: var(--pico-muted-color);
	margin-top: var(--card-hgroup-p-margin);
}


/* pico will color the final child in an hgroup. We want to disable that when using an overline, but there is no subtitle  */
/* pico matches this selector:hgroup>:not(:first-child):last-child  */
hgroup > p + h2:not(:first-child):last-child {
    --pico-color: var(--pico-h2-color);
}
hgroup > p + h3:not(:first-child):last-child {
    --pico-color: var(--pico-h3-color);
}
hgroup > p + h4:not(:first-child):last-child {
    --pico-color: var(--pico-h4-color);
}

/* in cards: figures with captions should bottom-align and add a quote */
figure.card {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;

	& figcaption::before {
		content: "— ";
	}

	& figcaption {
		margin-top: auto;
	}
}

/* Lists in Cards */
/* When a ul is the only child of a card, make it flush */

.card > ol:only-child, 
.card > ul:only-child,
.card > :is(h1, h2, h3, h4, h5, h6, hgroup):first-child + ul:last-child,
.card > :is(h1, h2, h3, h4, h5, h6, hgroup):first-child + ol:last-child
{
	padding: 0;
	
	li:first-child {
		border-top: none;
		padding-top: 0;
	}

	li:last-child {
		padding-bottom: 0;
	}

	li {
		list-style: none;
		border-top: 1px solid var(--card-border-color);
		padding: 0.75rem 0;
	}

	li > :last-child {
		margin-bottom: 0;
	}
}

/* ──────────────────────────────────────────────
   ALERTS / TOAST NOTIFICATIONS
   (Extends Card System)
────────────────────────────────────────────── */
.toast-container {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	max-width: 400px;
	min-width: 300px;
}

.alert {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem; /* Overrides card padding */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Overrides card shadow */
	animation: slideIn 0.3s ease-out;
	margin-bottom: 0;
}


.alert__icon {
	flex-shrink: 0;
	font-size: 1.25rem;
	line-height: 1;
}

.card--success .alert__icon { color: var(--accent-green); }
.card--danger .alert__icon { color: var(--accent-red); }
.card--warn .alert__icon { color: var(--accent-amber); }
.card--info .alert__icon { color: var(--brand); }

.alert__close {
	flex-shrink: 0;
	margin-left: auto;
	align-self: baseline;
	background: none;
	border: none;
	padding: 0.25rem;
	cursor: pointer;
	color: var(--pico-muted-color);
	font-size: 0.85rem;
	white-space: nowrap;
	line-height: 1;
	opacity: 0.6;
	transition: opacity 0.15s;
}

.alert__close:hover {
	opacity: 1;
}

@keyframes slideIn {
	from { transform: translateX(100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}