/*
 * The shared stylesheet. Tokens first: a site changes its look by giving these new values in its
 * own theme.css, never by editing this file. Bootstrap's own variables are mapped onto them below.
 */
:root {
    --brand: #1c1c1c;
    --brand-contrast: #ffffff;
    --brand-hover: color-mix(in srgb, var(--brand) 85%, black);
    --text: #2e303a;
    --surface: #ffffff;
    --surface-alt: #f5f5f7;
    --footer-bg: #2e303a;
    --footer-text: #cfd2d8;
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --radius: 0.5rem;

    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--surface);
    --bs-link-color: var(--brand);
    --bs-link-hover-color: var(--brand-hover);
    --bs-border-radius: var(--radius);
}

html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.page-main { flex: 1 0 auto; }

/* Buttons take the brand without a Sass build. */
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-color: var(--brand-contrast);
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-hover-color: var(--brand-contrast);
    --bs-btn-active-bg: var(--brand-hover);
    --bs-btn-active-border-color: var(--brand-hover);
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
}

/* Header */
.site-header { background: var(--surface); border-bottom: 1px solid rgba(0, 0, 0, .08); }
.site-logo { height: 44px; width: auto; }
.site-header .nav-link { color: var(--text); font-weight: 600; }
.site-header .nav-link:hover, .site-header .nav-link:focus { color: var(--brand); }

/* Footer */
.site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 2.5rem 0; margin-top: 3rem; }
.site-footer a { color: var(--footer-text); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer__top { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: center; }
.site-footer__logos { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; margin: 0; }
.site-footer__logos img { height: 36px; width: auto; }
.site-footer__menu { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; }
.site-footer__copy { margin: 2rem 0 0; font-size: .875rem; opacity: .8; }

/* Hero */
.hero { background: var(--surface-alt); padding: 4rem 0; }
.hero h1 { font-weight: 700; }

/* FAQ */
.faq details { border-bottom: 1px solid rgba(0, 0, 0, .1); padding: .75rem 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details[open] summary { color: var(--brand); }
.faq .answer { padding: .75rem 0 .25rem; }

/* Cards */
.cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cards--people, .archive-speaker .cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.card { border: 1px solid rgba(0, 0, 0, .08); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--brand); }
.webinar-card__media { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--surface-alt); overflow: hidden; }
.webinar-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.webinar-card__badges { position: absolute; left: .75rem; top: .75rem; display: flex; gap: .375rem; }
.webinar-card__date { font-size: .875rem; color: var(--brand); font-weight: 600; margin-bottom: .25rem; }
.webinar-card__speakers { font-size: .875rem; color: rgba(0, 0, 0, .6); margin-bottom: .25rem; }
.webinar-card__credits { font-size: .8125rem; font-weight: 600; margin: 0; }
.speaker-card__link { display: block; color: inherit; text-decoration: none; }
.speaker-card__photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; background: var(--surface-alt); }
.speaker-card .card-body { display: block; padding: .75rem 1rem; }

/* Badges */
.badge-state { background: #495057; color: #fff; }
.badge-state--live { background: #d6336c; }
.badge-state--upcoming { background: var(--brand); color: var(--brand-contrast); }
.badge-state--on-demand { background: #198754; }
.badge-variant { background: #fff; color: var(--text); border: 1px solid rgba(0, 0, 0, .15); }

/* Archive */
.archive__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.archive__head h1 { margin: 0; }
.archive__layout { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 992px) { .archive__layout { grid-template-columns: 260px 1fr; } }
.facets__title { text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; color: rgba(0, 0, 0, .5); }
.facet { border-top: 1px solid rgba(0, 0, 0, .08); padding: .75rem 0; }
.facet summary { font-weight: 600; cursor: pointer; }
.facet__values { margin: .5rem 0 0; }
.facet__value a { display: flex; justify-content: space-between; gap: .5rem; padding: .25rem 0; color: var(--text); text-decoration: none; }
.facet__value a:hover .facet__label { color: var(--brand); }
.facet__value--active a { color: var(--brand); font-weight: 600; }
.facet__count { color: rgba(0, 0, 0, .45); font-size: .875rem; }
.facets__clear { display: inline-block; margin-top: 1rem; font-size: .875rem; }
.pager { margin-top: 2rem; }
.pagination .page-link { color: var(--text); }
.pagination .active .page-link { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }

/* Single */
.single__hero { background: var(--surface-alt); padding: 3rem 0 2rem; }
.single__title { font-weight: 700; margin: .5rem 0; }
.single__badges { margin: 0; }
.single__meta { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 1rem 0 0; }
.single__meta dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(0, 0, 0, .5); }
.single__meta dd { margin: 0; font-weight: 600; }
.single__layout { display: grid; gap: 2rem; grid-template-columns: 1fr; padding-top: 2rem; }
@media (min-width: 992px) { .single__layout { grid-template-columns: 1fr 340px; } }
.single__media { position: relative; aspect-ratio: 16 / 9; background: #111; border-radius: var(--radius); overflow: hidden; margin-bottom: 2rem; }
.single__poster { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: .55; }
.single__media-note { position: absolute; inset: auto 0 0 0; margin: 0; padding: 1rem 1.25rem; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); font-weight: 600; }
.prose { max-width: 70ch; }
.box { border: 1px solid rgba(0, 0, 0, .08); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; }
.box__facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .375rem 0; border-top: 1px solid rgba(0, 0, 0, .06); }
.box__facts dt { font-weight: 600; }
.box__facts dd { margin: 0; text-align: right; }
.speaker-list__item { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; }
.speaker-list__item a { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.speaker-list__photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.speaker-profile { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.speaker-profile__photo { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; object-position: top; }

/* Home */
.home-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
.home-section__head h2 { margin: 0; }