/**
 * WebinarLanding.css — page frame and shared pieces of the public webinar landing pages
 * (partials in src/Template/webinar-landing/, root class .rd-wl on <body>).
 *
 * Theming: every colour in WebinarLanding/*.css goes through the --rd-wl-* tokens below.
 * A partner or brand theme is a modifier class that only overrides tokens, e.g.
 *   .rd-wl--pflegecampus { --rd-wl-accent: var(--rd-primary-active); … }
 * Never fork a component file per partner.
 */

.rd-wl {
    --rd-wl-accent: var(--rd-blue-600);
    --rd-wl-accent-strong: var(--rd-blue-800);
    --rd-wl-accent-soft: var(--rd-blue-50);
    --rd-wl-accent-light: var(--rd-blue-200);
    --rd-wl-dark: var(--rd-blue-950);
    --rd-wl-darkest: var(--rd-blue-1000);
    --rd-wl-accent-secondary: var(--rd-blue-700); /* Figma text-brand-secondary: eyebrows, session numbers */
    --rd-wl-accent-border: var(--rd-blue-100);

    /* Display sizes and radii of the landing design that the global scale does not have. */
    --rd-wl-fontsize-display: 44px; /* hero headline */
    --rd-wl-fontsize-figure: 56px; /* key figures */
    --rd-wl-radius-card: 20px; /* key figure and speaker cards */
    --rd-wl-radius-panel: 12px; /* course card, certificate credit box */
    --rd-wl-radius-sheet: 10px; /* drawn certificate */
    --rd-wl-fontsize-micro: 9px; /* "CME" under the points on the drawn certificate */
    --rd-wl-shadow-card: 0 12px 32px rgba(13, 26, 51, 0.1);
    --rd-wl-shadow-ticket: 0 24px 56px rgba(13, 26, 51, 0.18);
    --rd-wl-shadow-certificate: 0 24px 48px rgba(13, 26, 51, 0.25);
    --rd-wl-shadow-sheet: 0 1.6px 6.5px rgba(0, 0, 0, 0.06), 0 6.5px 19.4px rgba(0, 0, 0, 0.07);

    --rd-primary-active: var(--rd-wl-accent);
    --rd-primary-hover: var(--rd-wl-accent-strong);
    --rd-primary-pressed: var(--rd-wl-dark);

    color: var(--rd-font-dark);
    background: var(--rd-font-light);
    letter-spacing: 0;
}

.rd-wl-main,
.rd-wl-main * {
    box-sizing: border-box;
}

/* `.rd-homepage section` centres text globally; landing sections are left-aligned except where centred explicitly. */
.rd-wl .rd-wl-section {
    padding-inline: var(--rd-spacing-x-big);
    text-align: left;
}

.rd-wl-container {
    max-width: 1440px;
    margin-inline: auto;
}

/* .rd-wl sits on <body>: scope element rules to the landing content, not the site header/footer. */
.rd-wl-main h1,
.rd-wl-main h2,
.rd-wl-main h3,
.rd-wl-main h4 {
    color: inherit;
    line-height: var(--rd-lineheights-0);
    letter-spacing: 0;
    text-align: left;
}

.rd-wl-main [class*='rd-icon-']:not(.rd-primary-btn)::before {
    background-color: var(--uui-color-brand-700);
}

/* Section heading (section-heading.php) */

.rd-wl .rd-wl-section-heading {
    text-align: center;
    margin-bottom: var(--rd-spacing-lg);
}

/* Section titles (also the FAQ title): Figma H1 Bold, 28px / 1.32 / 1% */
.rd-wl .rd-wl-section-heading h2,
.rd-wl .rd-wl-faq h2 {
    font-size: var(--rd-fontsize-11);
    font-weight: var(--rd-fontweights-open-sans-0);
    letter-spacing: 0.01em; /* Figma 1% — percentage letter-spacing is not supported everywhere yet */
    text-align: center;
}

.rd-wl .rd-wl-section-heading h2 {
    margin: var(--rd-spacing-x-sm) 0 0;
}

.rd-wl-section-heading > p {
    color: var(--rd-wl-accent-secondary);
    font-weight: var(--rd-fontweights-open-sans-0);
    line-height: 1;
    margin: 0;
}

.rd-wl-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-spacing-xx-sm);
    padding: var(--rd-spacing-xxx-sm) calc(var(--rd-spacing-x-sm) + var(--rd-spacing-xxx-sm)) var(--rd-spacing-xxx-sm) var(--rd-spacing-x-sm);
    border: 1px solid var(--rd-wl-accent-border);
    border-radius: var(--rd-borderradius-pill);
    background: var(--rd-wl-accent-soft);
    color: var(--rd-wl-accent-secondary);
    font-size: var(--rd-fontsize-4);
    line-height: 20px;
    font-weight: var(--rd-fontweights-open-sans-1);
}

.rd-wl-main .rd-wl-badge::before {
    width: 12px;
    height: 12px;
    background-color: var(--rd-wl-accent-secondary);
}

/* Check list (learning contents, highlight box) */

.rd-wl-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rd-wl-checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--rd-spacing-x-sm);
    margin-bottom: var(--rd-spacing-x-sm);
}

/* The icon box is one text line high, so the check sits on the first line at any font size. */
.rd-wl-checklist li > span {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 1lh;
}

@media (max-width: 760px) {
    .rd-wl .rd-wl-section {
        padding-inline: var(--rd-spacing-md);
    }

    .rd-wl .rd-wl-section-heading {
        margin-bottom: var(--rd-spacing-xxx-big);
    }

    .rd-wl .rd-wl-section-heading h2 {
        font-size: var(--rd-fontsize-11);
    }
}