/*
 * The shared stylesheet: the default design, which is the look v2's sites share.
 *
 * Tokens first. A site changes its look by giving these new values in its own theme.css (a group of
 * sites in design/groups/<name>/theme.css), never by editing this file. Every rule below is written
 * against the tokens, so a theme that sets eight values gets a coherent site, and Bootstrap's own
 * variables are mapped onto them so its components follow too.
 */

/* Source Sans 3 (OFL, design/fonts/): the variable font, weights 200 to 900, roman and italic,
   Latin and Latin Extended as separate files so a page fetches only what it shows. */
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin-jIEMHSl.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: "Source Sans 3";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin-ext-Rg6Tzay.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Source Sans 3";
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/source-sans-3-italic-latin-4sRRF_S.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: "Source Sans 3";
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/source-sans-3-italic-latin-ext-9iS7DV4.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Colour */
    --brand: #62c8cd;                 /* the client's colour: buttons, links, the current menu entry */
    --brand-2: #3d78bc;               /* a second brand colour: badges, highlights */
    --accent: var(--brand-2);         /* the one loud colour: the live button, the live dot */
    --brand-contrast: #ffffff;        /* text on --brand */
    --brand-hover: var(--text);       /* a button darkens to the text colour under the pointer */
    --text: #111111;
    --text-soft: rgb(17 17 17 / .6);
    --surface: #ffffff;
    --surface-alt: #f2f2f2;
    --line: rgb(0 0 0 / .08);
    --header-bg: var(--surface);
    --footer-bg: var(--surface);
    --footer-text: var(--text);
    --footer-muted: #999999;
    --nav-bg: var(--brand);           /* the folded menu on small screens */
    --nav-text: var(--brand-contrast);

    /* Type */
    --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --text-size: 15px;
    --text-weight: 300;
    --heading-weight: 800;
    --menu-size: 16px;
    --menu-weight: 500;
    --menu-transform: uppercase;      /* the main menu; a site that wants sentence case says `none` */

    /* Shape */
    --radius: 10px;                   /* controls: buttons, inputs, dropdowns */
    --radius-card: 20px;              /* cards and boxes */
    --radius-pill: 25px;              /* the header's account buttons */
    --shadow: 0 0 30px rgb(0 0 0 / .1);

    /* Cards (the webinar card, v2's). The card's background image is not a token: a relative
       address inside a custom property is resolved by Chromium against the stylesheet that uses
       the variable, not the one that declares it. A site's theme.css states it as two rules
       instead, `.webinar-card { background-image: … }` and the same for :hover (design/README.md). */
    --card-color: var(--surface-alt);  /* under the image, and the card when there is none */
    --card-text: var(--text);
    --card-text-hover: var(--card-text);
    --card-title: var(--brand-2);
    --card-title-hover: var(--card-title);
    --card-credits-bg: var(--brand-2);
    --card-shadow: none;
    --card-hover-scale: 1;             /* 1.05 grows the card a little under the pointer */

    /* The event card (the prototypes'): the brand colour washed over the venue's picture, so ten
       cities read as one site; `transparent` for the picture as it is. */
    --event-cover-wash: color-mix(in srgb, var(--brand) 30%, transparent);

    /* The hero: the card grown to the measure on the webinar page, and the home page's wide card.
       Its band carries the site's image, two rules in theme.css like the card's. The text, the
       title and the circle start from the card's hover values, which is what v2 did. */
    --hero-color: var(--surface-alt);
    --hero-text: var(--card-text-hover);
    --hero-title: var(--card-title-hover);
    --hero-credits-bg: var(--text);
    --hero-speaker-color: var(--hero-text);
    --hero-speaker-weight: 800;
    --hero-button-bg: var(--text);
    --hero-button-color: #ffffff;
    --hero-tool-bg: rgb(0 0 0 / .2);    /* the pills under the countdown */
    --hero-menu-bg: var(--text);        /* their menus */
    --access-bg: var(--brand-2);        /* the sign-in notice that stands where the player will */
    --register-bg: var(--surface-alt);  /* the home page's invitation to join */
    --register-text: var(--text);
    --register-title: var(--brand);

    /* Measure */
    --measure: 1360px;                /* the content width of the header, the footer and a section */
    --gutter: 20px;
    --header-pad: 30px;               /* above and below the header's content, less once stuck */
    --header-pad-stuck: 15px;
    --header-logo: 190px;             /* the logo's width on a wide screen, once stuck, and on a phone */
    --header-logo-stuck: 120px;
    --header-logo-sm: 115px;

    /* Bootstrap reads these */
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--text-size);
    --bs-body-font-weight: var(--text-weight);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--surface);
    --bs-border-radius: var(--radius);
    --bs-border-radius-lg: var(--radius-card);
}

/* Base */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.page-main { flex: 1 0 auto; }
img { max-width: 100%; }
a { color: var(--brand); }
a:hover, a:focus-visible { color: var(--text); }
h1, h2, h3, .h1, .h2, .h3 { font-weight: var(--heading-weight); line-height: 1.15; }
h1, .h1 { font-size: 36px; margin-bottom: 25px; }
h2, .h2 { font-size: 24px; }
h3, .h3 { font-size: 24px; }
strong, b { font-weight: 700; }
@media (max-width: 767.98px) {
    h1, .h1 { font-size: 30px; }
    h3, .h3 { font-size: 18px; }
}

/* Buttons: Bootstrap's shape, the tokens' colours. .btn-brand is the one to use; .btn-primary follows for markup Bootstrap writes. */
.btn-brand, .btn-primary, .btn-ghost {
    --bs-btn-font-weight: 700;
    --bs-btn-font-size: 15px;
    --bs-btn-padding-x: 20px;
    --bs-btn-padding-y: 14px;
    --bs-btn-border-radius: var(--radius);
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1;
}
.btn-brand, .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-active-color: var(--brand-contrast);
    /* Disabled keeps the brand and fades (Bootstrap would paint it transparent): a button that waits, not one that is gone. */
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-disabled-color: var(--brand-contrast);
    --bs-btn-disabled-opacity: .45;
}
.btn-ghost {
    --bs-btn-bg: var(--surface-alt);
    --bs-btn-border-color: var(--surface-alt);
    --bs-btn-color: var(--text);
    --bs-btn-hover-bg: var(--text);
    --bs-btn-hover-border-color: var(--text);
    --bs-btn-hover-color: var(--brand-contrast);
    --bs-btn-active-bg: var(--text);
    --bs-btn-active-border-color: var(--text);
    --bs-btn-active-color: var(--brand-contrast);
}
.btn .icon { font-size: 1.2em; }

/* Icons: the sprite's symbols take the text's colour and size (parts/icons.php, $this->icon()). */
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.125em; }
.icon--play { fill: currentColor; stroke: none; }

/* Measure: the header, the footer and a section share one content width. */
.site-header__inner, .site-footer__inner, .section__inner, .archive__inner, .hero-band__inner, .single-body { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: 30px; }
.section--alt { background: var(--surface-alt); }
.section--dark { background: #000; color: #fff; }
.section-name { display: flex; align-items: center; flex-wrap: wrap; column-gap: 20px; margin-bottom: 20px; }
.section-name h2 { flex: 1; display: flex; align-items: center; margin: 0; }
.section-name h2::after { content: ""; flex: 1; height: 7px; margin-left: 20px; background: var(--surface-alt); }
/* Bootstrap's container follows the measure at the widest breakpoint, so pages built on it line up with the header. */
@media (min-width: 1400px) { .container { max-width: var(--measure); } }

/* Header */
.site-header { position: sticky; top: 0; z-index: 1020; background: var(--header-bg); transition: box-shadow .3s; }
.site-header.is-stuck { box-shadow: 0 0 10px rgb(0 0 0 / .1); }
.site-header__sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.site-header__inner { display: flex; align-items: center; gap: 30px; padding-block: var(--header-pad); transition: padding .3s; }
.site-header.is-stuck .site-header__inner { padding-block: var(--header-pad-stuck); }
.site-header__logo { display: block; flex: none; line-height: 0; }
.site-header__logo img { width: var(--header-logo); max-width: 100%; height: auto; transition: width .3s; }
.site-header.is-stuck .site-header__logo img { width: var(--header-logo-stuck); }
.site-header__name { font-size: 22px; font-weight: var(--heading-weight); line-height: 1.2; color: var(--text); }

.site-nav { margin-left: auto; }
.site-nav__body { display: flex; align-items: center; gap: 30px; }
.site-nav__menu { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.site-nav__link { display: block; padding: 0 20px; color: var(--text); text-decoration: none; font-size: var(--menu-size); font-weight: var(--menu-weight); text-transform: var(--menu-transform); letter-spacing: .5px; line-height: 1.2; }
.site-nav__link:hover, .site-nav__link:focus-visible, .site-nav__link.is-current { color: var(--brand); }
.site-nav__tools { display: flex; align-items: center; gap: 12px; }
.site-nav__actions { display: flex; gap: 10px; }
.site-nav__actions .btn { --bs-btn-padding-y: 13px; --bs-btn-padding-x: 20px; --bs-btn-font-size: 13px; --bs-btn-border-radius: var(--radius-pill); white-space: nowrap; }
.site-nav__login { display: none; } /* on a wide screen the account icon is the way in; the button shows in the folded menu */

/* A round tool: the account icon, the language switch, the search button. */
.site-tool { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #dddddd; color: var(--text); font-size: 19px; text-decoration: none; }
.site-tool:hover, .site-tool:focus-visible, .site-tool[aria-expanded="true"] { color: var(--text); box-shadow: 0 0 0 2px var(--text) inset; }
.site-lang__toggle::after { display: none; } /* Bootstrap's caret: the badge says which language it is */
.site-lang__code { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; line-height: 20px; border-radius: 50%; background: #000; color: #fff; font-size: 8px; font-weight: 600; text-align: center; }
.site-lang .dropdown-menu { --bs-dropdown-border-radius: var(--radius); --bs-dropdown-border-color: transparent; --bs-dropdown-font-size: 13px; --bs-dropdown-link-active-bg: var(--surface-alt); --bs-dropdown-link-active-color: var(--text); --bs-dropdown-link-hover-bg: var(--surface-alt); min-width: 240px; padding: 10px; box-shadow: 0 0 20px rgb(0 0 0 / .15); }
.site-lang .dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: calc(var(--radius) / 2); }
.site-lang__badge { flex: none; width: 26px; height: 26px; line-height: 26px; border-radius: 50%; background: rgb(0 0 0 / .5); color: #fff; font-size: 10px; text-align: center; }
.site-lang .dropdown-item.active .site-lang__badge, .site-lang .dropdown-item:hover .site-lang__badge { background: #000; }
.site-search { display: flex; align-items: center; gap: 8px; }
.site-search__input { width: 180px; height: 40px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); background: var(--surface-alt); font-size: 13px; }

/* The burger that opens the folded menu; hidden on a wide screen, where the menu is in the bar. */
.site-header__toggle { display: none; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 0; background: none; }
.site-header__burger { display: block; position: relative; width: 26px; height: 20px; }
.site-header__burger span { position: absolute; left: 0; width: 26px; height: 2px; border-radius: 2px; background: var(--text); }
.site-header__burger span:nth-child(1) { top: 0; }
.site-header__burger span:nth-child(2) { top: 9px; }
.site-header__burger span:nth-child(3) { top: 18px; }

@media (max-width: 991.98px) {
    .site-header__toggle { display: inline-flex; }
    .site-nav { --bs-offcanvas-width: min(100vw, 420px); --bs-offcanvas-bg: var(--nav-bg); --bs-offcanvas-color: var(--nav-text); --bs-offcanvas-padding-x: 24px; --bs-offcanvas-padding-y: 20px; margin-left: 0; }
    .site-nav .offcanvas-header { justify-content: flex-end; }
    .site-nav .btn-close { filter: var(--bs-btn-close-white-filter); }
    .site-nav__body { flex-direction: column; align-items: stretch; gap: 24px; }
    .site-nav__menu { flex-direction: column; }
    .site-nav__link { padding: 10px 0; color: var(--nav-text); font-size: 18px; font-weight: 600; letter-spacing: 1px; }
    .site-nav__link:hover, .site-nav__link:focus-visible, .site-nav__link.is-current { color: var(--nav-text); text-decoration: underline; text-underline-offset: 6px; }
    .site-nav__tools { flex-wrap: wrap; gap: 16px; }
    .site-nav__actions { flex: 1 1 100%; }
    .site-nav__actions .btn { flex: 1; --bs-btn-padding-y: 16px; }
    .site-nav__actions .btn-brand { --bs-btn-bg: var(--brand-contrast); --bs-btn-border-color: var(--brand-contrast); --bs-btn-color: var(--brand); }
    .site-nav__login { display: inline-flex; --bs-btn-bg: rgb(255 255 255 / .2); --bs-btn-border-color: transparent; --bs-btn-color: var(--nav-text); }
    .site-nav__account { display: none; } /* the Login button is in the panel instead */
    .site-nav .site-tool { background: rgb(255 255 255 / .9); }
}
@media (max-width: 767.98px) {
    .site-header__inner { gap: 16px; padding-block: 16px; }
    .site-header.is-stuck .site-header__inner { padding-block: 10px; }
    .site-header__logo img, .site-header.is-stuck .site-header__logo img { width: var(--header-logo-sm); }
}

/* Footer */
.site-footer { background: var(--footer-bg); color: var(--footer-text); font-size: 13px; padding: 40px 0 50px; margin-top: 3rem; }
.site-footer__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px 80px; list-style: none; margin: 0 0 30px; padding: 0; }
.site-footer__logos img { width: auto; height: auto; max-width: 160px; max-height: 70px; opacity: .3; filter: grayscale(1) brightness(0); transition: opacity .2s; }
.site-footer__logos a:hover img { opacity: .5; }
.site-footer__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; list-style: none; margin: 0 0 40px; padding: 0; font-size: 15px; }
.site-footer__menu a { color: var(--footer-text); text-decoration: none; font-weight: 500; }
.site-footer__menu a:hover, .site-footer__menu a:focus-visible { text-decoration: underline; }
.ce-statement { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 760px; margin: 0 auto 40px; text-align: center; color: var(--footer-muted); }
.ce-statement img { width: auto; height: auto; max-width: 330px; max-height: 90px; opacity: .3; }
.ce-statement p { margin: 0; font-size: 11px; line-height: 1.4; }
.site-footer__copy { margin: 0; text-align: center; color: var(--footer-muted); }
@media (max-width: 767.98px) {
    .site-footer { padding: 20px 0 30px; }
    .site-footer__logos { gap: 20px; }
    .site-footer__logos img { max-width: 140px; max-height: 40px; }
    .site-footer__menu { gap: 20px; }
    .ce-statement img { max-height: 60px; }
}

/* 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; }

/* Listings: two columns of cards in an archive (v2's), one on a phone. The webinar card's photo rises
   above the card, so a listing keeps some room at its top. */
.listing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding-top: 20px; }
.listing.listing--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 1024px) { .listing.listing--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .listing, .listing.listing--three { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.section-name__more { border-bottom: 1px solid currentColor; color: var(--text); font-size: 13px; text-decoration: none; }
.section-name__more:hover, .section-name__more:focus-visible { color: var(--brand); }

/* The webinar card: v2's, one anatomy for every listing. The text column sets the height; the
   first speaker's cut-out photo is pinned to the bottom right behind it and may rise above the top
   edge. A container query folds the card in a narrow column: the big photo goes, the round
   thumbnails come, the title takes the width. */
.webinar-card { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; container-type: inline-size; border-radius: var(--radius-card); background: var(--card-color) center bottom / cover no-repeat; box-shadow: var(--card-shadow); color: var(--card-text); transition: transform .3s, color .3s; }
.webinar-card:hover { z-index: 2; color: var(--card-text-hover); transform: scale(var(--card-hover-scale)); }
.webinar-card__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 25px 0 25px 25px; }
.webinar-card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.credits { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 55px; height: 55px; margin: 0; border-radius: 50%; background: var(--card-credits-bg); color: #fff; font-size: 18px; font-weight: 900; line-height: 1; }
.credits strong { font-weight: inherit; }
.credits--two-lines { flex-direction: column; font-size: 11px; font-weight: 600; }
.credits--two-lines strong { font-size: 180%; font-weight: 900; }
.webinar-card__meta { flex: 1; min-width: 0; }
.webinar-card__type { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; }
.webinar-card--upcoming .webinar-card__type, .webinar-card--live .webinar-card__type { display: inline-flex; align-items: center; color: var(--brand); font-size: 15px; }
.webinar-card--live .webinar-card__type::after { content: ""; width: 9px; height: 9px; margin-left: 10px; border-radius: 50%; background: var(--accent); animation: pulse 1s infinite ease-in-out; }
.webinar-card__date { display: block; font-size: 19px; font-weight: 900; line-height: 1.2; }
.webinar-card__extra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.webinar-card__lang { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; }
.webinar-card__title { width: 54%; margin: 0 0 15px; font-size: 24px; line-height: 1.2; }
.webinar-card__name { color: var(--card-title); font-weight: 800; text-decoration: none; }
.webinar-card:hover .webinar-card__name { color: var(--card-title-hover); }
.webinar-card .webinar-card__name:hover, .webinar-card .webinar-card__name:focus-visible { color: var(--card-text-hover); }
.webinar-card__speakers { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; margin-bottom: 10px; }
.webinar-card__thumbs { display: none; gap: 5px; }
.webinar-card__thumbs img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; object-position: top; background: #fff; }
.webinar-card__names { margin: 10px 0; font-size: 17px; font-weight: 300; line-height: 1.2; }
.webinar-card__speaker { display: block; }
.webinar-card__moderators { display: block; margin-top: 4px; font-size: 14px; }
.webinar-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: auto; }
.webinar-card__action { --bs-btn-font-size: 16px; --bs-btn-font-weight: 800; --bs-btn-padding-y: 16px; }
.webinar-card__action--live { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); }
.webinar-card__action--live::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: pulse 1s infinite ease-in-out; }
.webinar-card__details { padding: 3px 0; border-bottom: 2px solid currentColor; color: inherit; font-size: 13px; font-weight: 400; text-decoration: none; text-shadow: 1px 1px rgb(255 255 255 / .65); }
.webinar-card__details:hover, .webinar-card__details:focus-visible { color: var(--brand); }
.webinar-card__photo { position: absolute; right: 0; bottom: 0; z-index: 1; display: flex; align-items: flex-end; width: 63%; overflow: hidden; border-radius: 0 0 var(--radius-card) 0; line-height: 0; }
.webinar-card__photo img { width: 100%; height: auto; }
@container (max-width: 560px) {
    .webinar-card__photo { display: none; }
    .webinar-card__text { padding: 25px; }
    .webinar-card__title { width: 100%; }
    .webinar-card__thumbs { display: flex; }
    .webinar-card__speaker { display: inline; }
    .webinar-card__speaker + .webinar-card__speaker::before { content: ", "; }
}
@media (max-width: 575.98px) {
    .webinar-card__actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .webinar-card__details { align-self: flex-start; }
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .webinar-card { transition: none; } .webinar-card:hover { transform: none; } .webinar-card--live .webinar-card__type::after, .webinar-card__action--live::after { animation: none; } }

/* The person card: v2's. The round photo drawn darkened onto a grey circle, so a white studio
   background disappears into it, the name, "Speaker details" underlined in the brand colour. Five
   to a row in the archive, three on a tablet, two on a phone; a home section fits what it can. */
.listing.listing--speaker { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding-top: 0; }
.speaker-card { display: flex; flex-direction: column; align-items: center; padding: 0 20px 40px; text-align: center; }
.speaker-card__photo { display: inline-flex; align-items: center; justify-content: center; width: 160px; height: 160px; margin-bottom: 6px; border-radius: 50%; overflow: hidden; background: var(--surface-alt); }
.speaker-card__photo img, .speaker-profile__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(1) contrast(1.2); mix-blend-mode: darken; }
.speaker-card__name { display: block; margin: 10px 0 6px; color: var(--text); font-size: 18px; font-weight: 700; line-height: 1.1; text-decoration: none; }
.speaker-card__name:hover, .speaker-card__name:focus-visible { color: var(--brand); }
.speaker-card__link { border-bottom: 2px solid currentColor; color: var(--brand); font-size: 14px; text-decoration: none; }
.speaker-card__link:hover, .speaker-card__link:focus-visible { color: var(--text); }
@media (max-width: 1024px) { .listing.listing--speaker { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
    .listing.listing--speaker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .speaker-card { padding: 0 10px 30px; }
    .speaker-card__photo { width: 120px; height: 120px; }
}

/* The event card: the prototypes' anatomy in v2's look. The cover is the event's picture under a
   wash of the brand colour with the Event mark, Live or Online, and the credits circle; then the
   date in the brand colour, the place, the title, the people; the actions the registration terms
   and the clock decide; and, while the event is still to come, the countdown as a strip along the
   foot. Three to a row in the archive, two on a tablet, one on a phone. */
.listing.listing--event { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding-top: 0; }
.event-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-card); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); color: var(--text); }
.event-card__cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-alt); line-height: 0; }
.event-card__cover::after { content: ""; position: absolute; inset: 0; background: var(--event-cover-wash); pointer-events: none; }
.event-card__image { width: 100%; height: 100%; object-fit: cover; }
.event-card__marks { position: absolute; top: 15px; left: 15px; z-index: 1; display: flex; gap: 6px; line-height: 1; }
.event-card__mark { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: calc(var(--radius) / 2); background: #242424; color: #ffffff; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.event-card__mark--live { background: var(--brand); color: var(--brand-contrast); }
.event-card__mark--online { background: rgb(255 255 255 / .85); color: var(--text); }
.event-card--ongoing .event-card__mark--live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: pulse 1.4s ease-in-out infinite; }
.event-card .credits.event-card__credits { position: absolute; top: 12px; right: 12px; z-index: 1; width: 56px; height: 56px; background: var(--brand); color: var(--brand-contrast); font-size: 17px; }
.event-card .credits--two-lines.event-card__credits { font-size: 10px; }
.event-card__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; width: 100%; padding: 20px 20px 0; }
.event-card__date { margin: 0 0 4px; color: var(--brand); font-size: 16px; font-weight: 700; line-height: 1.3; }
.event-card__place { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--text-soft); font-size: 14px; line-height: 1.3; }
.event-card__place .icon { font-size: 16px; }
.event-card__title { margin: 0 0 12px; font-size: 22px; font-weight: 600; line-height: 1.3; }
.event-card__name { color: var(--text); text-decoration: none; }
.event-card__name:hover, .event-card__name:focus-visible { color: var(--brand); }
.event-card__speakers { width: 100%; }
.event-card__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
.event-card__thumbs:empty { display: none; }
.event-card__thumbs img { width: 50px; height: 50px; border: 1px solid rgb(0 0 0 / .12); border-radius: 50%; object-fit: cover; object-position: top; background: #ffffff; }
.event-card__names { margin: 0; font-size: 14px; line-height: 1.3; }
.event-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; width: 100%; margin-top: auto; padding: 20px; }
.event-card__action { --bs-btn-font-size: 15px; --bs-btn-padding-y: 14px; --bs-btn-padding-x: 20px; gap: 12px; }
.event-card__action .icon { font-size: 1.3em; }
.event-card__details { padding: 0 0 3px; border-bottom: 1px solid currentColor; color: var(--text); font-size: 13px; text-decoration: none; }
.event-card__details:hover, .event-card__details:focus-visible { color: var(--brand); }
.event-card__note { margin: 0; color: var(--text-soft); font-size: 13px; }
/* The disabled button's word on why (the card's, and the page's control): a tooltip the stylesheet shows under the pointer and on
   focus, so a row of cards needs no script. The span around the button takes the focus the
   disabled button cannot. */
.event-card__tip, .event-control__tip { position: relative; display: inline-flex; border-radius: var(--radius); }
.event-card__tip:focus-visible, .event-control__tip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.event-card__tooltip, .event-control__tooltip { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 10; width: 220px; max-width: calc(100vw - 64px); padding: 8px 10px; border-radius: calc(var(--radius) / 2); background: var(--text); color: #ffffff; font-size: 12px; font-weight: 400; line-height: 1.4; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .15s; }
.event-card__tooltip::after, .event-control__tooltip::after { content: ""; position: absolute; top: 100%; left: 24px; border: 5px solid transparent; border-top-color: var(--text); }
.event-card__tip:hover .event-card__tooltip, .event-card__tip:focus-within .event-card__tooltip, .event-card__tip:focus .event-card__tooltip, .event-control__tip:hover .event-control__tooltip, .event-control__tip:focus-within .event-control__tooltip { visibility: visible; opacity: 1; }
/* The countdown as a strip of four boxes (parts/countdown.php, `variant` strip). */
.countdown--strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 20px; border-top: 3px solid var(--surface-alt); }
.countdown--strip .countdown__parts { display: contents; }
.countdown--strip .countdown__sep { display: none; }
.countdown--strip .countdown__part { min-width: 0; padding: 8px 2px; border-radius: calc(var(--radius) / 2); background: var(--surface-alt); }
.countdown--strip .countdown__value { font-size: 18px; font-weight: 700; letter-spacing: 0; line-height: 1.2; }
.countdown--strip .countdown__label { margin-top: 2px; color: var(--text-soft); font-size: 8px; text-transform: uppercase; opacity: 1; }
.countdown--strip .countdown__over { grid-column: 1 / -1; font-size: 16px; text-align: center; }
@media (max-width: 1024px) { .listing.listing--event { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
    .listing.listing--event { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .event-card__actions { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .event-card--ongoing .event-card__mark--live::before { animation: none; } .event-card__tooltip { transition: none; } }

/* Badges */
.badge-state { background: #495057; color: #fff; }
.badge-state--live { background: var(--accent); }
.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: the head, the filter row, the empty state, the pager */
.archive__inner { padding-top: 30px; padding-bottom: 10px; }
.archive__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 20px; }
.archive__head h1 { margin: 0; }
.archive__count { margin: 0; color: var(--text-soft); }
.archive__empty { padding: 20px 0 40px; }
.archive__empty h2 { margin-bottom: 10px; }
/* The calendar feed an archive with states offers, at the right of its head. */
.archive__feed { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--brand); font-size: 15px; font-weight: 500; text-decoration: none; }
.archive__feed:hover, .archive__feed:focus-visible { color: var(--text); }
.archive__feed .icon { font-size: 18px; }
@media (max-width: 767.98px) { .archive__feed { margin-left: 0; } }

/* The filter row: a dropdown per facet. Above the listing in the stacking order, so a photo rising
   from the first row of cards passes behind it. */
.facets { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 30px; }
.facet__toggle { display: inline-flex; align-items: center; gap: 10px; min-width: 150px; padding: 11px 15px; border: 0; border-radius: var(--radius); background: var(--surface-alt); color: var(--text); font-size: 15px; font-weight: 500; line-height: 1.3; cursor: pointer; }
.facet__toggle:hover, .facet__toggle:focus-visible { color: var(--text); outline: 0; box-shadow: 0 0 0 2px var(--text) inset; }
.facet__toggle[aria-expanded="true"] { border-radius: var(--radius) var(--radius) 0 0; box-shadow: none; }
.facet__toggle.is-active { font-weight: 700; }
.facet__badge { width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: var(--brand-contrast); font-size: 10px; font-weight: 600; line-height: 20px; text-align: center; }
.facet__caret { margin-left: auto; font-size: 14px; transition: transform .2s; }
.facet__toggle[aria-expanded="true"] .facet__caret { transform: rotate(180deg); }
.facet__menu { --bs-dropdown-border-color: transparent; --bs-dropdown-bg: var(--surface-alt); --bs-dropdown-padding-y: 15px; --bs-dropdown-padding-x: 15px; --bs-dropdown-border-radius: 0 var(--radius) var(--radius) var(--radius); --bs-dropdown-spacer: 0; min-width: 240px; box-shadow: 0 16px 30px rgb(0 0 0 / .08); }
.facet__search { display: block; width: 100%; margin-bottom: 10px; padding: 10px 15px; border: 0; border-radius: var(--radius); background: var(--surface); font-size: 14px; }
.facet__search:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; }
.facet__clear { display: inline-block; margin-bottom: 12px; border-bottom: 1px solid currentColor; color: var(--text); font-size: 12px; text-decoration: none; }
.facet__values { max-height: 300px; margin: 0; padding: 0; list-style: none; overflow: auto; }
.facet__value { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--text); font-size: 14px; text-decoration: none; }
.facet__box { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 17px; height: 17px; border-radius: 3px; background: var(--surface); color: var(--brand-contrast); font-size: 12px; }
.facet__box .icon { opacity: 0; stroke-width: 3; }
.facet__value.is-active .facet__box { background: var(--brand); }
.facet__value.is-active .facet__box .icon { opacity: 1; }
/* An exclusive facet — the switch between an archive's states — draws round boxes: one is always chosen. */
.facet__box--one { border-radius: 50%; }
.facet__value:hover .facet__label, .facet__value:focus-visible .facet__label { text-decoration: underline; }
.facet__label { flex: 1; }
.facet__count { color: var(--text-soft); font-size: 12px; }
.facet__count::before { content: "("; }
.facet__count::after { content: ")"; }
.facets__clear { margin-left: auto; border-bottom: 1px solid currentColor; color: var(--text); font-size: 13px; text-decoration: none; }
@media (max-width: 991.98px) {
    .facet, .facet__toggle, .facet__menu { width: 100%; }
    .facets__clear { margin-left: 0; }
}

/* The map over the events archive (parts/events-map.php): the site's own MapLibre. Its place holds
   the first venue's address until the map is drawn — and for good without scripting or a basemap. */
.events-map { margin-bottom: 30px; }
.events-map__canvas { position: relative; height: 420px; border-radius: var(--radius-card); overflow: hidden; background: var(--surface-alt); }
.events-map__fallback { display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 100%; padding: 30px; }
.events-map__place { margin: 0; font-size: 16px; font-weight: 600; }
.events-map__note { margin: 0; color: var(--text-soft); font-size: 13px; }
.map-popup { font-family: var(--font-sans); font-size: 13px; line-height: 1.4; }
.map-popup a { color: var(--brand); font-weight: 600; text-decoration: none; }
.map-popup p { margin: 4px 0 0; color: var(--text-soft); }
.maplibregl-popup-content { padding: 12px 16px; border-radius: var(--radius); box-shadow: var(--shadow); font-family: var(--font-sans); }
.maplibregl-ctrl-attrib { font-size: 10px; }
/* "Near me" (parts/events-near.php): a dropdown with the radius, the position button and the city form,
   at the right of the archive's head beside the feed link. */
.near { position: relative; z-index: 4; margin-left: auto; }
.archive__head .near + .archive__feed { margin-left: 0; }
.near__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 0; border-radius: var(--radius); background: var(--surface-alt); color: var(--text); font-size: 14px; font-weight: 500; line-height: 1.3; }
.near__toggle:hover, .near__toggle:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--text) inset; }
.near__toggle.is-active { background: var(--brand); color: var(--brand-contrast); }
.near__toggle .icon { font-size: 18px; }
.near__menu { --bs-dropdown-border-color: transparent; --bs-dropdown-bg: var(--surface-alt); --bs-dropdown-padding-y: 15px; --bs-dropdown-padding-x: 15px; --bs-dropdown-border-radius: var(--radius); --bs-dropdown-spacer: 4px; min-width: 280px; box-shadow: 0 16px 30px rgb(0 0 0 / .08); }
.near__menu.show { display: flex; flex-direction: column; gap: 10px; }
.near__field { display: flex; flex-direction: column; gap: 4px; margin: 0; color: var(--text-soft); font-size: 12px; }
.near__select, .near__input { padding: 9px 12px; border: 0; border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 14px; }
.near__select:focus-visible, .near__input:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; }
.near__locate { --bs-btn-font-size: 14px; --bs-btn-padding-y: 10px; gap: 8px; }
.near__find { --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--surface); --bs-btn-color: var(--text); --bs-btn-hover-bg: var(--text); --bs-btn-hover-border-color: var(--text); --bs-btn-hover-color: #ffffff; --bs-btn-font-size: 14px; --bs-btn-padding-y: 10px; }
.near__status { margin: 0; font-size: 12px; }
.near__reset { border-bottom: 1px solid currentColor; color: var(--text); font-size: 13px; text-decoration: none; }
/* The venue map in an event page's rail (parts/venue-map.php): a sliver until it is drawn — never
   display:none, which would keep it from ever coming into view — then its full height. */
.venue-map { height: 1px; margin-bottom: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface-alt); opacity: 0; }
.venue-map.is-ready { height: 240px; margin-bottom: 14px; opacity: 1; }
@media (max-width: 767.98px) {
    .events-map__canvas { height: 300px; }
    .near, .near__toggle { width: 100%; margin-left: 0; }
    .near__menu { width: 100%; }
}

/* The pager: round, the current page in the brand colour, the arrows on grey. */
.pager { margin: 40px 0 20px; text-align: center; }
.pager__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pager__link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text); font-size: 15px; text-decoration: none; }
a.pager__link:hover, a.pager__link:focus-visible { background: var(--surface-alt); color: var(--text); }
.pager__link.is-current { background: var(--brand); color: var(--brand-contrast); font-weight: 600; }
.pager__link--prev, .pager__link--next { background: #eeeeee; font-size: 18px; }
.pager__link--prev { margin-right: 5px; }
.pager__link--next { margin-left: 5px; }
.pager__dots { display: inline-block; width: 24px; color: var(--text-soft); }
.pager__summary { margin: 8px 0 0; color: var(--text-soft); font-size: 12px; font-weight: 500; }

/* The person's page: v2's. The round photo with its white ring stands over the grey bio box; the
   name and credentials sit centred in the box, the biography under them at a readable width (v2 ran
   it the whole measure wide); then the webinars with this person as cards. */
.prose { max-width: 70ch; }
.speaker-profile { display: flex; flex-direction: column; align-items: center; padding-top: 10px; }
.speaker-profile__photo { position: relative; z-index: 1; width: 220px; height: 220px; margin-bottom: -90px; border: 12px solid var(--surface); border-radius: 50%; overflow: hidden; background: var(--surface-alt); }
.speaker-profile__bio { width: 100%; padding: 110px 30px 30px; border-radius: var(--radius-card); background: var(--surface-alt); }
.speaker-profile__name { margin: 0 0 20px; font-size: 30px; font-weight: 800; line-height: 1.1; text-align: center; }
.speaker-profile__credentials { display: block; margin-top: 6px; font-size: 16px; font-weight: 300; }
.speaker-profile__text { max-width: 80ch; margin: 0 auto; }
.speaker-profile__text > :last-child { margin-bottom: 0; }
.speaker-items .section-name { margin-bottom: 30px; }
.speaker-items__none { margin: 0; color: var(--text-soft); }
@media (max-width: 767.98px) {
    .speaker-profile__photo { width: 160px; height: 160px; margin-bottom: -80px; border-width: 6px; }
    .speaker-profile__bio { width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding: 96px 20px 20px; border-radius: 0; }
    .speaker-profile__name { font-size: 24px; }
}

/* The webinar page: v2's. The hero is the card grown to the measure — parts/cards/webinar.php as a
   hero — on a band that carries the site's image; the text column sets the height and the cut-out
   photo stands beside it at the bottom right, clipped by the band as v2 clipped it. Below: the
   details and the speakers as tabs beside the sidebar of boxes, then the other webinars of the
   same people. */
.hero-band { overflow: hidden; background: var(--hero-color) center bottom / cover no-repeat; color: var(--hero-text); }
.webinar-card.webinar-card--hero { flex-wrap: nowrap; align-items: flex-end; border-radius: 0; background: none; box-shadow: none; color: inherit; }
.webinar-card.webinar-card--hero:hover { color: inherit; transform: none; }
.webinar-card--hero .webinar-card__text { flex: 1 1 auto; width: auto; min-width: 0; padding: 50px 0 60px; margin-right: -80px; }
.webinar-card--hero .webinar-card__top { margin-bottom: 30px; }
.webinar-card--hero .credits { width: 80px; height: 80px; background: var(--hero-credits-bg); font-size: 27px; }
.webinar-card--hero .credits--two-lines { font-size: 15px; }
.webinar-card--hero .webinar-card__type, .webinar-card--hero.webinar-card--upcoming .webinar-card__type, .webinar-card--hero.webinar-card--live .webinar-card__type { font-size: 19px; }
.webinar-card--hero .webinar-card__date { font-size: 26px; }
.webinar-card--hero .webinar-card__title { width: 100%; max-width: 820px; margin: 0 0 15px; color: var(--hero-title); font-size: clamp(32px, 4vw, 56px); font-weight: 700; line-height: 1.05; }
.webinar-card--hero .webinar-card__name, .webinar-card.webinar-card--hero:hover .webinar-card__name { color: var(--hero-title); }
.webinar-card--hero .webinar-card__name:hover, .webinar-card--hero .webinar-card__name:focus-visible { color: var(--brand); }
.webinar-card--hero .webinar-card__names { font-size: 24px; font-weight: var(--hero-speaker-weight); color: var(--hero-speaker-color); }
.webinar-card--hero .webinar-card__speaker { display: inline; }
.webinar-card--hero .webinar-card__speaker + .webinar-card__speaker::before { content: ", "; }
.webinar-card--hero .webinar-card__moderators { font-size: 16px; }
.webinar-card--hero .webinar-card__thumbs img { width: 80px; height: 80px; }
.webinar-card--hero .webinar-card__photo { position: static; flex: 0 1 38%; width: auto; align-self: flex-end; border-radius: 0; }
@container (max-width: 1100px) {
    .webinar-card--hero .webinar-card__photo { display: none; }
    .webinar-card--hero .webinar-card__thumbs { display: flex; }
    .webinar-card--hero .webinar-card__text { margin-right: 0; }
}

/* What the hero offers: the countdown, the button, the calendar and time-zone pills, the sign-in notice. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin-top: 10px; }
.hero-actions__button { --bs-btn-bg: var(--hero-button-bg); --bs-btn-border-color: var(--hero-button-bg); --bs-btn-color: var(--hero-button-color); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover); --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover); --bs-btn-font-size: 19px; --bs-btn-padding-y: 19px; --bs-btn-padding-x: 30px; }
.hero-actions__button .icon { font-size: 1.4em; }
.hero-actions__note { flex: 0 1 100%; margin: 0; font-size: 18px; font-weight: 300; }
.countdown { display: flex; align-items: flex-start; }
.countdown__parts { display: flex; align-items: flex-start; }
.countdown__part { min-width: 65px; text-align: center; }
.countdown__value { display: block; font-size: 50px; font-weight: 700; line-height: .8; letter-spacing: -1px; white-space: nowrap; }
.countdown__label { display: block; margin-top: 6px; font-size: 10px; font-weight: 300; line-height: 1; opacity: .6; }
.countdown__sep { margin: 0 4px; font-size: 28px; line-height: .9; }
.countdown__over { display: none; margin: 0; font-size: 24px; font-weight: 700; }
.countdown[data-countdown-over] .countdown__parts { display: none; }
.countdown[data-countdown-over] .countdown__over { display: block; }
.hero-tools { flex: 0 1 100%; display: flex; flex-wrap: wrap; gap: 16px 38px; }
.hero-tool__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border: 0; border-radius: var(--radius-pill); background: var(--hero-tool-bg); color: inherit; font-size: 12px; font-weight: 300; line-height: 1.3; }
.hero-tool__toggle .icon { font-size: 21px; opacity: .3; }
.hero-tool__toggle:hover, .hero-tool__toggle:focus-visible, .hero-tool__toggle[aria-expanded="true"] { background: var(--hero-menu-bg); color: #ffffff; }
.hero-tool__toggle:hover .icon, .hero-tool__toggle[aria-expanded="true"] .icon { opacity: 1; }
.hero-tool__menu { --bs-dropdown-bg: var(--hero-menu-bg); --bs-dropdown-color: #ffffff; --bs-dropdown-link-color: #ffffff; --bs-dropdown-link-hover-bg: rgb(255 255 255 / .1); --bs-dropdown-link-hover-color: #ffffff; --bs-dropdown-link-active-bg: rgb(255 255 255 / .2); --bs-dropdown-border-color: transparent; --bs-dropdown-border-radius: var(--radius); --bs-dropdown-padding-y: 10px; --bs-dropdown-font-size: 13px; min-width: 240px; }
.hero-tool__menu--zones { min-width: 310px; padding-inline: 15px; }
.hero-tool__zone { display: flex; justify-content: space-between; gap: 20px; padding: 6px 0; border-bottom: 1px solid rgb(255 255 255 / .2); font-size: 13px; }
.hero-tool__zone:last-child { border-bottom: 0; }
.access { flex: 0 1 100%; max-width: 660px; padding: 30px; border-radius: var(--radius); background: var(--access-bg); box-shadow: 0 0 30px rgb(0 0 0 / .15); color: #ffffff; text-align: center; }
.access__title { margin: 0 0 8px; font-size: 15px; font-weight: 700; text-transform: uppercase; }
.access__text { margin: 0 0 20px; }
.access__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.access__actions .btn { --bs-btn-bg: var(--text); --bs-btn-border-color: var(--text); --bs-btn-color: #ffffff; --bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #000000; }

/* Below the hero: the tabs and their panes, the sidebar of boxes. */
.single-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; padding-top: 40px; }
.single-tabs { margin-bottom: 20px; }
.single-tabs .nav-tabs { --bs-nav-tabs-border-width: 0; gap: 5px; }
.single-tabs .nav-link { padding: 14px 20px; border: 0; border-radius: var(--radius); color: var(--text); font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: -.5px; }
.single-tabs .nav-link:hover, .single-tabs .nav-link:focus-visible { background: var(--surface-alt); color: var(--text); }
.single-tabs .nav-link.active { background: var(--brand); color: var(--brand-contrast); font-weight: 600; }
.single__lead { margin-bottom: 20px; font-size: 22px; font-weight: 300; line-height: 1.4; }
.single__subtitle { margin-bottom: 20px; }
.objectives { margin: 30px 0; padding: 25px; border-radius: var(--radius); background: var(--surface-alt); }
.objectives h3 { margin: 0 0 10px; font-size: 18px; font-weight: 800; }
.objectives ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 30px; margin: 0; padding: 0; list-style: none; }
.objectives li { position: relative; padding-left: 17px; line-height: 1.2; }
.objectives li::before { content: ""; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.speaker-bio { display: flex; flex-wrap: wrap; align-items: center; gap: 0 15px; padding: 20px 0; border-top: 1px solid var(--line); }
.single__subtitle + .speaker-bio { padding-top: 0; border-top: 0; }
.speaker-bio__photo { flex: none; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: var(--surface-alt); }
.speaker-bio__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(1) contrast(1.2); mix-blend-mode: darken; }
.speaker-bio__name { flex: 1; min-width: 160px; margin: 0; font-weight: 600; line-height: 1.2; }
.speaker-bio__credentials, .speaker-bio__role { display: block; font-size: 12px; font-weight: 300; opacity: .7; }
.speaker-bio__more { --bs-btn-padding-y: 10px; --bs-btn-padding-x: 20px; --bs-btn-font-size: 12px; --bs-btn-font-weight: 500; --bs-btn-border-radius: var(--radius); --bs-btn-bg: #dddddd; --bs-btn-border-color: #dddddd; --bs-btn-color: var(--text); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-hover-color: var(--brand-contrast); --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); --bs-btn-active-color: var(--brand-contrast); margin-left: auto; }
.speaker-bio__bio { flex: 0 1 100%; padding-top: 10px; }
.box { margin-bottom: 30px; padding: 20px; border-radius: var(--radius); background: var(--surface-alt); }
.box h3 { margin: 0 0 15px; font-size: 22px; font-weight: 800; }
.box__list { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.box__list li { margin-bottom: 20px; line-height: 1.3; }
.box__list li:last-child { margin-bottom: 0; }
.box__list a { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--text); text-decoration: none; }
.box__list a:hover, .box__list a:focus-visible { color: var(--brand-2); }
.box__list .icon { flex: none; margin-top: 1px; font-size: 16px; }
.box--ce { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
.box--ce h3 { flex: 0 1 100%; }
.box__pill { margin: 0; padding: 10px 15px; border-radius: 20px; background: #dddddd; line-height: 1; }
.box__pill strong { font-weight: 600; }
.box__logos { flex: 0 1 100%; display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.box__logo { display: inline-flex; align-items: center; padding: 10px; border-radius: var(--radius); background: var(--surface); }
.box__logo img { width: auto; height: auto; max-width: 190px; max-height: 40px; opacity: .5; }
.box__note { flex: 0 1 100%; margin: 0; }
.share { margin-bottom: 30px; }
.share__list { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.share__link { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: #bbbbbb; color: #ffffff; font-size: 22px; }
.share__link:hover, .share__link:focus-visible { background: var(--brand-2); color: #ffffff; }
.icon--facebook, .icon--x, .icon--linkedin { fill: currentColor; stroke: none; }
.single__related { margin-top: 20px; }
@media (max-width: 1024px) {
    .single-body { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 767.98px) {
    .webinar-card--hero .webinar-card__text { padding: 40px 0; }
    .webinar-card--hero .credits { width: 60px; height: 60px; font-size: 22px; }
    .webinar-card--hero .webinar-card__date { font-size: 18px; }
    .countdown__part { min-width: 52px; }
    .countdown__value { font-size: 40px; }
    .hero-actions__button { width: 100%; }
    .hero-tools { flex-direction: column; gap: 10px; }
    .hero-tool, .hero-tool__toggle { width: 100%; justify-content: center; }
    .access { padding: 20px; }
    .access__actions { flex-direction: column; }
    .objectives ul { grid-template-columns: 1fr; }
    .speaker-bio__more { flex: 0 1 100%; margin: 15px 0 0; }
}

/* The event page: the prototypes' anatomy in v2's look. The head stands at the top of the main
   column — the tags, the title, the date in the venue's time with the zone said once, the
   registration sentence, the lead, the control and Add to calendar — then Details and Glossary as
   tabs, the programme as a timeline by the venue's day, the speakers of the event and its sessions;
   the rail holds the venue, the facts, the control again and the credits box. The two columns are
   .single-body's, three to one here. */
.single-body--event { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
@media (max-width: 1024px) { .single-body--event { grid-template-columns: minmax(0, 1fr); } }
.event-head { margin-bottom: 36px; }
.event-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.tag { display: inline-block; padding: 5px 8px; border-radius: calc(var(--radius) / 2); background: var(--surface-alt); color: var(--text); font-size: 10px; font-weight: 600; letter-spacing: .06em; line-height: 1; text-transform: uppercase; }
.tag--dark { background: #242424; color: #ffffff; }
.tag--brand { background: var(--brand); color: var(--brand-contrast); }
.tag--ongoing { background: var(--accent); color: #ffffff; }
.event-head__title { margin: 0 0 10px; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; }
.event-head__date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--brand); font-size: 16px; font-weight: 700; }
.event-head__date .icon { font-size: 20px; }
.event-head__zone { margin: 0 0 14px; color: var(--text-soft); font-size: 12px; }
.event-head__registration { margin: 0 0 16px; font-size: 13px; }
.event-head__lead { margin: 0 0 20px; font-size: 20px; font-weight: 300; line-height: 1.4; }
.event-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
/* The control: one part for the head, the rail and a programme row (parts/event-control.php). */
.event-control { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.event-control__button { --bs-btn-font-size: 18px; --bs-btn-padding-y: 16px; --bs-btn-padding-x: 28px; gap: 14px; }
.event-control__button .icon { font-size: 1.3em; }
.event-control__button--row { --bs-btn-font-size: 13px; --bs-btn-padding-y: 8px; --bs-btn-padding-x: 14px; gap: 8px; }
.event-control--rail { margin-bottom: 30px; }
.event-control--rail .event-control__button, .event-control--rail .event-control__tip { width: 100%; }
.event-control--row { margin-bottom: 12px; }
.event-control__note { margin: 0; color: var(--text-soft); font-size: 14px; }
.event-control__terms { margin: 0; font-size: 13px; }
.event-calendar__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: var(--radius-pill); background: var(--surface-alt); color: var(--text); font-size: 13px; line-height: 1.3; }
.event-calendar__toggle .icon { font-size: 20px; opacity: .5; }
.event-calendar__toggle:hover, .event-calendar__toggle:focus-visible, .event-calendar__toggle[aria-expanded="true"] { background: var(--text); color: #ffffff; }
.event-calendar__toggle:hover .icon, .event-calendar__toggle[aria-expanded="true"] .icon { opacity: 1; }
.event-calendar .dropdown-menu { --bs-dropdown-font-size: 13px; --bs-dropdown-border-color: var(--line); --bs-dropdown-border-radius: var(--radius); --bs-dropdown-link-active-bg: var(--brand); min-width: 240px; }
/* A term marked in the prose (App\Content\GlossaryMarker) links to its entry in the Glossary tab. */
.prose a.term { color: var(--brand); text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.glossary__intro { margin: 0 0 20px; color: var(--text-soft); font-size: 14px; }
.glossary { margin: 0; }
.glossary dt { margin: 0 0 4px; font-weight: 600; scroll-margin-top: 20px; }
.glossary dt.is-highlighted { color: var(--brand); }
.glossary__aliases { color: var(--text-soft); font-weight: 300; }
.glossary__aliases::before { content: "— "; }
.glossary dd { margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); line-height: 1.6; }
.glossary dd:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
/* Resources as rows in the details: the kind's icon, the title, the kind's word, the arrow. */
.event-resources { margin: 30px 0; }
.event-resources h3 { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.event-resource { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 16px 20px; border-radius: var(--radius); background: var(--surface-alt); color: var(--text); font-size: 16px; text-decoration: none; }
.event-resource:hover, .event-resource:focus-visible { color: var(--brand); }
.event-resource__type { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: calc(var(--radius) / 2); background: var(--surface); font-size: 18px; }
.event-resource__kind { display: block; color: var(--text-soft); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.event-resource__arrow { flex: none; margin-left: auto; font-size: 18px; }
/* The programme: a timeline, the people's portraits beside a line with a dot per row. */
.event-programme, .event-speakers { margin-top: 48px; }
.event-programme > h2, .event-speakers > h2 { margin: 0 0 20px; font-size: 26px; }
.programme { --portrait: 80px; margin: 0; padding: 0; list-style: none; }
.programme__row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 22px; }
.programme__portraits { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding-bottom: 24px; }
.programme__portraits img { width: var(--portrait); height: var(--portrait); border: 1px solid var(--line); border-radius: 50%; object-fit: cover; object-position: top; background: #ffffff; }
.programme__portraits--many img { width: 46px; height: 46px; }
.programme__break-icon { display: grid; place-items: center; width: var(--portrait); height: 48px; color: var(--brand); font-size: 22px; }
.programme__content { position: relative; padding: 0 0 30px 22px; border-left: 2px solid var(--line); }
.programme__content::before { content: ""; position: absolute; left: -6px; top: calc(var(--portrait) / 2); width: 10px; height: 10px; border-radius: 50%; background: #d0d0d0; transform: translateY(-50%); }
.programme__row:hover .programme__content::before { background: var(--brand); }
.programme__row:last-child .programme__content { padding-bottom: 0; border-color: transparent; }
.programme__time { margin: 0 0 2px; font-size: 14px; line-height: 1.4; }
.programme__title { margin: 0 0 3px; font-size: 21px; font-weight: 700; line-height: 1.25; }
.programme__row--break .programme__title { color: var(--text-soft); font-size: 17px; font-weight: 400; }
.programme__names { margin: 0 0 12px; font-size: 16px; line-height: 1.4; }
.programme__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 12px; }
.programme__tag { display: inline-block; padding: 4px 12px; border-radius: calc(var(--radius) / 2); background: var(--surface-alt); font-size: 12px; }
.programme__tag--credits { background: var(--brand); color: var(--brand-contrast); }
.programme__days .nav-link { padding: 10px 14px; font-size: 13px; }
.programme__day { margin: 0 0 16px; color: var(--text-soft); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.programme__section + .programme__section { margin-top: 24px; }
/* The rail: the venue, the facts, the control, the credits box. */
.event-rail__title { margin: 0 0 14px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.event-venue { margin-bottom: 28px; }
.event-venue__address { margin: 0 0 12px; font-size: 14px; font-style: normal; line-height: 1.5; }
.event-venue__links { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; font-size: 13px; }
.event-facts { margin: 0 0 24px; }
.event-facts__item { position: relative; padding: 15px 0 15px 38px; border-bottom: 1px solid var(--line); }
.event-facts__item:first-child { padding-top: 0; }
.event-facts__item .icon { position: absolute; left: 0; top: 15px; color: var(--brand); font-size: 24px; }
.event-facts__item:first-child .icon { top: 0; }
.event-facts dt { margin: 0 0 4px; font-size: 12px; font-weight: 400; line-height: 1; }
.event-facts dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
@media (max-width: 575.98px) {
    .programme { --portrait: 54px; }
    .programme__row { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; }
    .programme__portraits--many img { width: 38px; height: 38px; }
    .programme__content { padding-left: 16px; }
    .programme__title { font-size: 18px; }
    .event-head__title { font-size: 26px; }
    .event-head__actions, .event-control, .event-control__button, .event-calendar, .event-calendar__toggle { width: 100%; }
    .event-calendar__toggle { justify-content: center; }
}

/* The home page: v2's. The upcoming webinars as hero cards in Bootstrap's carousel on the band,
   the dots at the bottom left; the invitation to join; the expert articles beside the FAQ card
   (Ultradent's section, available to any site); then listings. */
.home-hero .carousel-inner { overflow: visible; }
.home-hero .webinar-card--hero .webinar-card__text { padding-bottom: 80px; }
.home-hero__dots { position: absolute; left: var(--gutter); right: auto; bottom: 30px; justify-content: flex-start; gap: 10px; margin: 0; }
.home-hero__dots button { box-sizing: border-box; width: 15px; height: 15px; margin: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / .2); opacity: 1; text-indent: -999px; overflow: hidden; }
.home-hero__dots button.active { background: var(--brand); }
.register-box { max-width: 960px; margin: 0 auto; padding: 40px 30px; border-radius: var(--radius-card); background: var(--register-bg); color: var(--register-text); text-align: center; }
.register-box__title { margin: 0 0 10px; color: var(--register-title); font-size: 34px; }
.register-box__text { max-width: 640px; margin: 0 auto 25px; font-size: 20px; line-height: 1.4; }
.register-box__button { --bs-btn-font-size: 16px; --bs-btn-padding-y: 20px; --bs-btn-padding-x: 25px; }
.resources__inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 40px 120px; padding-block: 50px; }
.resources__articles { flex: 1 1 420px; }
.resources__title { margin: 0 0 15px; color: #555555; font-size: 27px; font-weight: 700; line-height: 1.15; }
.resources__title strong { color: var(--brand); font-weight: 700; }
.resources__copy { margin: 0 0 30px; font-size: 20px; font-weight: 400; line-height: 1.5; }
.resources__list { display: grid; gap: 30px; margin: 0 0 22px; padding: 0; list-style: none; }
.resources__article { display: flex; align-items: center; gap: 20px; color: var(--text); font-size: 20px; line-height: 1.5; text-decoration: none; }
.resources__article img { flex: none; width: 90px; height: 90px; object-fit: cover; background: var(--surface-alt); }
.resources__article:hover, .resources__article:focus-visible { color: var(--brand); }
.resources__faq { flex: 0 1 390px; padding: 40px; border-radius: var(--radius-card); background: var(--surface); box-shadow: 0 0 11px rgb(0 0 0 / .15); }
.resources__faq .resources__copy { margin-bottom: 30px; }
@media (max-width: 991.98px) {
    .resources__inner { gap: 40px; padding-block: 30px; }
    .resources__articles, .resources__faq { flex: 0 1 100%; }
}
@media (max-width: 767.98px) {
    .home-hero__dots { bottom: 16px; }
    .register-box { padding: 30px 20px; }
    .register-box__title { font-size: 26px; }
    .register-box__text { font-size: 17px; }
    .resources__title { font-size: 24px; }
    .resources__copy { font-size: 17px; }
}