/*
 * The few things the Grand Conference template has no class for, on the
 * seminar landing page: the wordmark in place of the theme's logo image, the
 * image band's copy, the countdown, the sign-up form and the session list.
 * Everything else is the theme's own CSS, images and colours, in this folder,
 * including its accent (#ff2d55), which this file follows.
 */

:root {
    --wb-accent: #FF2D55;
    --wb-deep: #D81B45;
}

/* ---------- the wordmark, in place of the theme's logo image ---------- */

.wb-wordmark {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    color: #222222;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

.wb-wordmark.is-light { color: #FFFFFF; }

.wb-mark {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--wb-accent);
    color: #FFFFFF;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    font-weight: 700;
}

/* The menu and the Register button on one line: the theme lays this row out
   for a logo image and a longer menu than ours. */
/* The bar's inline links, from 1000px up. Below that they are hidden by
   slide-menu.css (max-width: 999px) and the slide-out panel is the menu, so
   these two widths are one pair: move this one and that one moves with it, or
   a band opens where the bar has both no links and no way to reach them. */
@media (min-width: 1000px) {
    #logo_wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* The menu stays put: the theme's own script would otherwise fold it away. */
    #menu_wrapper,
    #nav_wrapper,
    #menu_border_wrapper { display: block !important; }

    /* The links and the button share the bar's line. */
    .nav_wrapper_inner { display: flex !important; align-items: center; gap: 26px; }
    #main_menu { display: flex !important; align-items: center; gap: 26px; }
    #main_menu > li { float: none; }
    #mobile_nav_icon { display: none !important; }

    #menu_wrapper,
    #nav_wrapper { float: none; }

    .nav_wrapper_inner {
        display: flex;
        align-items: center;
        gap: 26px;
    }

    #logo_right_button { position: static; margin: 0; }
}

#footer .wb-wordmark { margin-bottom: 14px; font-size: 20px; }

/* the social links and the newsletter box in the footer */
#footer .wb-socials { margin-top: 18px; }
#footer .wb-socials ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

#footer .wb-socials a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    font-size: 15px;
    transition: background-color 0.2s;
}

#footer .wb-socials a:hover { background: var(--wb-accent); }

.wb-subscribe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.wb-subscribe input[type="email"] {
    flex: 1 1 180px;
    min-width: 0;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
    font-family: 'Work Sans', Arial, sans-serif;
    font-size: 14px;
}

.wb-subscribe input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.5); }
.wb-subscribe input[type="email"]:focus { outline: none; border-color: var(--wb-accent); }
.wb-subscribe button.button { flex: none; border: 0; cursor: pointer; }

.wb-subscribe-note { margin: 10px 0 0; font-size: 13px; }
.wb-subscribe-note.is-ok { color: #7bd88f; }
.wb-subscribe-note.is-error { color: #ff8f8f; }

.wb-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* An anchor (#register, #speakers) lands below the bar, not behind it. */
html { scroll-padding-top: 96px; }

/* ---------- the top bar, over the hero ---------- */

.wb-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: transparent !important;
    border-bottom: 0 !important;
    transition: background-color 0.25s, box-shadow 0.25s;
}

/* The theme colours these links itself, so these say so plainly. */
.wb-bar .wb-wordmark,
.wb-bar #main_menu > li > a { color: #FFFFFF !important; }
.wb-bar #main_menu > li.current-menu-item > a { color: var(--wb-accent) !important; }

/* The button and the menu icon sit on the bar's own line. */
.wb-bar #logo_right_button {
    display: inline-flex !important;
    align-items: center;
    gap: 16px;
    position: static !important;
    top: auto;
    margin: 0;
}

/* The button in the bar: outlined in the accent, as the template has it. */
.wb-bar #get_ticket.button.ghost,
.wb-bar.is-solid #get_ticket.button.ghost {
    border: 2px solid var(--wb-accent);
    background: transparent;
    color: var(--wb-accent);
    font-weight: 600;
}

.wb-bar #get_ticket.button.ghost:hover,
.wb-bar.is-solid #get_ticket.button.ghost:hover {
    background: var(--wb-accent);
    color: #FFFFFF;
}

/* The dropdowns: a dark panel under the parent, with the theme's caret. */
.wb-bar #main_menu li.menu-item-has-children > a::after {
    content: "\f107";
    margin-left: 7px;
    font-family: "FontAwesome";
    font-size: 12px;
}

.wb-bar #main_menu li ul.sub-menu {
    min-width: 210px;
    padding: 8px 0;
    background: #111111;
    border-top: 2px solid var(--wb-accent);
    box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.7);
}

.wb-bar #main_menu li ul.sub-menu li { display: block; }

.wb-bar #main_menu li ul.sub-menu li > a {
    display: block;
    padding: 9px 18px;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 14px;
    white-space: nowrap;
}

.wb-bar #main_menu li ul.sub-menu li > a:hover { color: var(--wb-accent) !important; }

.wb-bar #mobile_nav_icon { color: #FFFFFF; }

/* scrolled: the white bar, pinned */
.wb-bar.is-solid {
    position: fixed;
    background: #FFFFFF !important;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08);
}

/* The theme paints these links white through its own deep selectors, so the
   solid bar's dark text is set through selectors at least as deep. */
.top_bar.wb-bar.is-solid .wb-wordmark,
.top_bar.wb-bar.is-solid #menu_wrapper #main_menu > li > a,
.top_bar.wb-bar.is-solid #menu_wrapper #nav_wrapper #main_menu > li > a,
.top_bar.wb-bar.is-solid #mobile_nav_icon { color: #222222 !important; }

.top_bar.wb-bar.is-solid #menu_wrapper #main_menu > li > a:hover,
.top_bar.wb-bar.is-solid #menu_wrapper #main_menu > li.current-menu-item > a { color: var(--wb-accent) !important; }

.wb-bar.is-solid #get_ticket.button.ghost {
    border-color: var(--wb-accent);
    color: var(--wb-accent);
}

/* ---------- the image band ---------- */

.wb-band {
    position: relative;
    padding: 190px 0 210px;
    background-color: #111111;
    background-size: cover;
    background-position: center;
    text-align: center;
}

/* Enough to hold white type, not so much that the photograph goes flat. */
.wb-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.58) 100%);
}

/* The hero fills the screen, with the title on the middle line. */
.wb-band.wb-hero-band {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 150px 0 230px;
}

.wb-band.wb-hero-band .standard_wrapper { width: min(1140px, 100% - 40px); }

/*
 * Every band is centred, so its inner is a centred column: the theme floats
 * and shrink-wraps a heading or a tagline inside a page_content_wrapper,
 * which left a line sitting at the band's left edge while the rest centred.
 */
.wb-band-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    float: none !important;
    text-align: center !important;
}

/* No width is forced, so a row that sets its own (wb-narrow) keeps it. */
.wb-band-inner > * {
    max-width: 100%;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.wb-kicker {
    display: inline-block;
    margin-bottom: 18px;
    padding: 6px 16px;
    border-radius: 2px;
    background: var(--wb-accent);
    color: #FFFFFF;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.wb-band .wb-band-title {
    max-width: 20ch;
    margin: 0 auto 14px !important;
    color: #FFFFFF !important;
    font-size: clamp(30px, 4.6vw, 52px) !important;
    line-height: 1.15;
}

.wb-band .wb-band-tagline {
    max-width: 62ch;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.8) !important;
}

.wb-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 26px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.88);
    font-size: 15px;
}

.wb-facts span { margin-right: 8px; color: var(--wb-accent); }

/* the countdown */
.wb-clock {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.wb-clock-box {
    min-width: 96px;
    padding: 16px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
}

.wb-clock-box strong {
    display: block;
    color: #FFFFFF;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.wb-clock-box span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ---------- the registration box ---------- */

/* Over the band, so the band's dark veil does not paint on top of it. */
.ppb_contact_box { position: relative; z-index: 2; }

.wb-box {
    width: 74%;
    margin: auto;
    padding: 48px;
    background: #FFFFFF;
    border: 10px solid var(--wb-accent);
}

.wb-form { margin-top: 26px; }

.wb-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.wb-form-col { flex: 1 1 240px; min-width: 0; text-align: left; }

.wb-form .input1 {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #DCE0E0;
    background: #FFFFFF;
    color: #222222;
    font-family: 'Work Sans', Arial, sans-serif;
    font-size: 15px;
}

.wb-form .input1:focus {
    outline: none;
    border-color: var(--wb-accent);
}

.wb-form textarea.input1 { min-height: 132px; resize: vertical; }

.wb-form button.button { border: 0; cursor: pointer; }

.wb-error { display: block; margin-top: 6px; color: #B3261E; font-size: 13px; }
.wb-fine { margin: 14px 0 0; color: #888888; font-size: 13px; }
.wb-closed { margin: 18px 0 0; color: #888888; }

.wb-note {
    margin: 20px 0 0;
    padding: 14px 18px;
    font-size: 15px;
    text-align: left;
}

.wb-note.is-ok { background: rgba(255, 45, 85, 0.1); color: #7a1230; }
.wb-note.is-error { background: rgba(179, 38, 30, 0.08); color: #8c1d1d; }

/* A centred section heading: the theme's .inner sets its own alignment, so
   the heading, its line and its text are centred here. */
.wb-center .ppb_title,
.wb-center .page_tagline,
.wb-center .ppb_header_content,
.wb-center .ppb_header_content p { text-align: center !important; }

.wb-center .ppb_header_content { max-width: 76ch; margin: 0 auto; }

/* ---------- hero extras, the dark About band and the split rows ---------- */

/* The accent line under the title, as big as the title itself. */
.wb-hero-highlight {
    margin: -6px 0 0;
    color: var(--wb-accent);
    font-family: 'Poppins', Arial, sans-serif;
    font-size: clamp(30px, 5vw, 62px);
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.12;
    text-transform: uppercase;
}

.wb-hero .wb-band-title {
    max-width: none;
    font-size: clamp(32px, 5.2vw, 66px) !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.12;
    text-transform: uppercase;
}

.wb-hero .wb-band-tagline { margin-top: 22px; font-size: 17px; }
.wb-hero .wb-hero-actions { margin-top: 34px; }

/*
 * The hero as one centred column, as the template's own hero reads.
 *
 * The theme floats and shrink-wraps what goes in a page_content_wrapper, so a
 * heading or a tagline sat at the left edge of the band while the accent line
 * and the button centred, leaving the block looking askew. Laying the inner
 * out as a flex column, with every child full width and unfloated, settles it
 * whatever the theme does around it.
 */
.wb-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    float: none !important;
    text-align: center !important;
}

.wb-hero > * {
    max-width: 100%;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.wb-hero-actions { margin: 30px 0 0; }
.wb-band-sm { padding: 90px 0 !important; }
.wb-narrow { width: 74%; margin: auto; }

.wb-dark { background: #000000; color: #FFFFFF; }
.wb-dark .ppb_header_content p,
.wb-dark p { color: rgba(255, 255, 255, 0.78); }
.wb-dark strong { color: #FFFFFF; }

.wb-split .one_half_bg {
    float: left;
    width: 50%;
    background-size: cover;
    background-position: center;
}

/*
 * Both halves read the same way, whichever side the picture is on. The theme
 * aligns a plain paragraph to the half's own alignment but keeps headings
 * left, which had one row's words ending in two different places.
 */
.wb-split .one_half_bg { text-align: left; }

.wb-split .one_half_bg .ppb_title,
.wb-split .one_half_bg .page_tagline,
.wb-split .one_half_bg .ppb_header_content,
.wb-split .one_half_bg .ppb_header_content p {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}
.wb-split .one_half_bg.is-wide { float: none; width: 100%; }
.wb-split .one_half_bg.is-wide .ppb_header_content { max-width: 70ch; }
.wb-split-title { color: var(--wb-accent) !important; }

/* ---------- the schedule, in day columns ---------- */

.wb-days {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.wb-day { background: #FFFFFF; border: 1px solid #DCE0E0; }

.wb-day-head {
    padding: 14px 20px;
    background: var(--wb-accent);
    color: #FFFFFF;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 600;
}

.wb-day-head small { margin-left: 8px; font-weight: 400; opacity: 0.75; }

/* the speaker's thumbnail beside a session */
.wb-sessions .session_speaker_thumb {
    float: left;
    width: 54px;
    margin-right: 14px;
}

.wb-sessions .session_speaker_thumb img {
    display: block;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
}

.wb-sessions .session_content.has_speaker_thumb { margin-left: 68px; }

/* Stands in for a face the session has none of, so every row starts alike. */
.wb-sessions .wb-session-clock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #F1F1F1;
    color: #B4B4B4;
    font-size: 19px;
}
.wb-sessions .session_content.has_speaker_thumb .session_start_time { width: 92px; }
.wb-sessions .session_content.has_speaker_thumb .session_title,
.wb-sessions .session_content.has_speaker_thumb .session_excerpt { margin-left: 102px; }
.wb-day .wb-sessions > li { margin: 0; border: 0; border-bottom: 1px solid #ECECEC; }
.wb-day .wb-sessions > li:last-child { border-bottom: 0; }

/* ---------- the speakers grid ---------- */

/* Five across when there are five; however many there are, they fill the row. */
.wb-speakers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.wb-speaker-card { position: relative; }
.wb-speaker-card .speaker_grid_link { display: block; position: relative; }
.wb-speaker-card img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }

.wb-speaker-blank {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-height: 240px;
    background: #1C1C1C;
    color: var(--wb-accent);
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 48px;
    font-weight: 700;
}

.wb-speaker-card .speaker_info_wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 20px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 70%);
}

.wb-speaker-card h4 { margin: 0; color: #FFFFFF; font-size: 17px; }
.wb-speaker-card .speaker_desc { color: var(--wb-accent); font-size: 13px; }

/* ---------- where it happens ---------- */

/* The map fills the band, so only that version loses the theme's padding. */
.wb-location { position: relative; }
.wb-location.has-map { padding: 0 !important; }
.wb-map { height: 520px; }
.wb-map iframe { display: block; width: 100%; height: 100%; border: 0; }

.wb-location-box {
    width: 360px;
    padding: 36px;
    background: #FFFFFF;
}

/* Over the map when there is one; a plain panel when there is not. */
.wb-location.has-map .wb-location-box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.5);
}

/* Without a map it is a plain section, centred like the ones around it. */
.wb-location:not(.has-map) { padding: 70px 0 !important; }

.wb-location:not(.has-map) .wb-location-box {
    width: auto;
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
    background: none;
    box-shadow: none;
    float: none;
    text-align: center;
}

.wb-location:not(.has-map) .wb-location-box .ppb_title,
.wb-location:not(.has-map) .wb-location-box .page_tagline,
.wb-location:not(.has-map) .wb-location-box .ppb_header_content,
.wb-location:not(.has-map) .wb-location-box .ppb_header_content p {
    float: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ---------- text, sessions, speaker, cards ---------- */

.wb-tint { background: #F7F7F7; }
.wb-prose { max-width: 820px; margin: 0 auto; text-align: left; }
.wb-prose p { margin: 0 0 16px; }

.wb-sessions { margin: 0; padding: 0; list-style: none; }

.wb-sessions > li {
    margin-bottom: 10px;
    padding: 22px 26px;
    border: 1px solid #DCE0E0;
    background: #FFFFFF;
}

.wb-sessions .session_start_time {
    float: left;
    width: 120px;
    color: var(--wb-deep);
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 600;
}

.wb-sessions .session_title { margin-left: 130px; }
.wb-sessions .session_title h6 { margin: 0; }
.wb-sessions .session_excerpt { margin: 6px 0 0 130px; color: #777777; }

.wb-speaker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px;
    text-align: left;
}

.wb-speaker-photo img { display: block; width: 200px; height: 200px; object-fit: cover; }
.wb-speaker-text h3 { margin: 0 0 6px; }

.wb-card {
    height: 100%;
    padding: 26px;
    border: 1px solid #DCE0E0;
    background: #FFFFFF;
}

.wb-card h6 { margin: 8px 0 0; }
.wb-card p { margin: 10px 0 0; color: #777777; }
.wb-card .session_speakers { margin-top: 14px; }

/* ---------- small screens ---------- */

@media (max-width: 991px) {
    .wb-days { grid-template-columns: 1fr; }
    .wb-speakers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wb-split .one_half_bg { float: none; width: 100%; }
    .wb-split .one_half_bg[style*="height:550px"] { height: 300px !important; }
    .wb-split .one_half_bg.textright { text-align: left; }
    .wb-location-box { position: static; transform: none; width: auto; margin: -60px auto 0; }
}

@media (max-width: 767px) {
    .wb-band { padding: 140px 0 170px; }
    .wb-narrow { width: auto; }
    .wb-speakers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wb-split .one_half_bg { padding: 34px 20px !important; }
    .wb-map { height: 320px; }
    .wb-box { width: auto; padding: 28px 20px; border-width: 6px; }
    .wb-clock-box { min-width: 0; flex: 1 1 0; padding: 12px 6px; }
    .wb-clock-box strong { font-size: 24px; }
    .wb-clock-box span { font-size: 10px; letter-spacing: 1px; }
    .wb-sessions .session_start_time { float: none; width: auto; margin-bottom: 4px; }
    .wb-sessions .session_title,
    .wb-sessions .session_excerpt { margin-left: 0; }
    .wb-speaker { justify-content: flex-start; }
}

/* ---------- the sign-up panel, as a popup ----------
   The panel keeps the framed white box the page already used; this lifts it
   over the page, veils what is behind it and gives it a way out. */

.wb-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    padding: 30px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wb-modal[hidden] { display: none; }

.wb-modal-veil { position: fixed; inset: 0; background: rgba(10, 10, 12, 0.74); }

.wb-modal-panel {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 780px;
    margin: auto;
    animation: wb-modal-in 0.24s ease-out;
}

.wb-modal-panel .wb-box {
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    margin: 0;
    text-align: center;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.wb-modal-x {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF;
    color: #111111;
    font-size: 26px;
    line-height: 40px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s, color 0.2s;
}

.wb-modal-x:hover,
.wb-modal-x:focus-visible { background: var(--wb-accent); color: #FFFFFF; }

body.wb-modal-open { overflow: hidden; }

@keyframes wb-modal-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 575px) {
    .wb-modal { padding: 16px 12px; }
    .wb-modal-x { top: -12px; right: -6px; width: 36px; height: 36px; font-size: 22px; line-height: 34px; }
}
/* ---------- the sign-up answer, as a popup (SweetAlert2) ----------
   The page's own type and accent: Poppins for the heading, Work Sans for
   the words, and the pill button the forms use. */

.swal-wb {
    padding: 34px 32px 28px;
    border-radius: 18px;
    font-family: 'Work Sans', Arial, sans-serif;
}

.swal-wb .swal2-icon { margin: 4px auto 18px; }
.swal-wb .swal2-icon.swal2-success { border-color: var(--wb-accent); color: var(--wb-accent); }
.swal-wb .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--wb-accent); }
.swal-wb .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(255, 45, 85, 0.3); }

.swal-wb-title {
    padding: 0;
    color: #111111;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
}

/*
 * Scoped to the popup for the same reason as the webinar's: SweetAlert2
 * styles this line with `div:where(.swal2-container) .swal2-html-container`,
 * which outweighs a single class, so without this the words keep the
 * plugin's own grey rather than the one set here.
 */
.swal-wb .swal-wb-text {
    margin: 12px 0 0;
    padding: 0;
    color: #4a4a4a;
    font-size: 16px;
    line-height: 1.6;
}

.swal-wb-button {
    margin-top: 22px;
    padding: 13px 30px;
    border: 0;
    border-radius: 999px;
    background: var(--wb-accent);
    color: #FFFFFF;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.swal-wb-button:hover,
.swal-wb-button:focus-visible { background: var(--wb-deep); transform: translateY(-1px); }
.swal-wb-button:focus-visible { outline: 3px solid rgba(255, 45, 85, 0.35); outline-offset: 2px; }

@media (max-width: 575px) {
    .swal-wb { padding: 26px 20px 22px; }
    .swal-wb-title { font-size: 22px; }
}

/* ---------- the footer, laid out as the group's own sites lay theirs out ----------
   The theme paints #footer black and its links white; this gives that black
   the newsletter band, the columns of seminar links and the bottom bar. */

#footer.wb-footer { padding: 0 0 0; }

.wb-foot-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 20px;
}

/* the newsletter band */
.wb-foot-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin: 60px 0 0;
    padding: 40px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
}

.wb-foot-band-text { flex: 1 1 320px; min-width: 0; }
.wb-foot-band-text h3 { margin: 0 0 10px; color: #FFFFFF; font-size: 28px; }
.wb-foot-band-text p { margin: 0; color: #CCCCCC; }
.wb-foot-band-form { flex: 1 1 320px; min-width: 0; }
.wb-foot-band-form .wb-subscribe { margin-top: 0; }

/* the four columns */
.wb-foot-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 30px;
    padding: 70px 0 30px;
}

.wb-foot-heading {
    margin: 0;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.wb-foot-heading::after {
    content: "";
    display: block;
    width: 26px;
    height: 2px;
    margin-top: 14px;
    background: var(--wb-accent);
}

#footer .wb-foot-links { margin: 22px 0 0; padding: 0; list-style: none; }
#footer .wb-foot-links li { margin: 0 0 12px; }
#footer .wb-foot-links a { color: #CCCCCC; font-size: 15px; }
#footer .wb-foot-links a::before { content: "\203A"; margin-right: 8px; color: var(--wb-accent); }
#footer .wb-foot-links a:hover { color: #FFFFFF; }
#footer .wb-foot-links a[aria-current="page"] { color: #FFFFFF; }

.wb-foot-touch { margin: 22px 0 14px; color: #CCCCCC; }
#footer .wb-foot-email { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

/* the way into the Contact Us popup */
#footer .wb-foot-contact {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    padding: 14px 26px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    color: #FFFFFF;
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 15px;
    transition: background-color 0.2s, border-color 0.2s;
}

#footer .wb-foot-contact:hover { background: var(--wb-accent); border-color: var(--wb-accent); color: #FFFFFF; }

/* the wordmark, the copyright and the accounts */
.wb-foot-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 0 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* the wordmark, what the group is, and the line at the foot, stacked */
.wb-foot-legal { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 640px; }
.wb-foot-legal p { margin: 0; color: #CCCCCC; font-size: 14px; }
.wb-foot-about { color: rgba(255, 255, 255, 0.6) !important; }

/* the pages anyone giving us their details is entitled to read */
.wb-foot-legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 0; padding: 0; list-style: none; }
#footer .wb-foot-legal-links a { color: rgba(255, 255, 255, 0.6); font-size: 13px; }
#footer .wb-foot-legal-links a:hover { color: #FFFFFF; }
.wb-foot-social { text-align: right; }
.wb-foot-social-label { margin: 0; color: rgba(255, 255, 255, 0.5); font-size: 12px; }
#footer .wb-foot-social .wb-socials { margin-top: 8px; }
#footer .wb-foot-social .wb-socials ul { justify-content: flex-end; }

@media (max-width: 991px) {
    .wb-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 50px; }
}

@media (max-width: 575px) {
    .wb-foot-band { margin-top: 40px; padding: 28px; }
    .wb-foot-band-text h3 { font-size: 24px; }
    .wb-foot-cols { grid-template-columns: 1fr; gap: 30px; }
    .wb-foot-bottom { justify-content: flex-start; }
    .wb-foot-social { text-align: left; }
    #footer .wb-foot-social .wb-socials ul { justify-content: flex-start; }
}

/* ---------- skipping the bar ----------
   The bar comes before the page, so the first thing a keyboard reaches is a
   way past it. Off screen until it is focused, as on the main site. */
.mil-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;
    padding: 12px 20px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform .2s;
}

.mil-skip-link:focus,
.mil-skip-link:focus-visible { transform: none; color: #fff; }

#main-content:focus { outline: none; }



/* ---------- the landing page, as the Grand Conference demo draws it ---------- */

/* The hero's button: the demo's blue pill. */
.wb-hero-actions a.button.wb-hero-button {
    padding: 11px 32px;
    border-color: #007BFF;
    border-radius: 999px;
    background: #007BFF;
    color: #FFFFFF;
}

.wb-hero-actions a.button.wb-hero-button:hover { border-color: var(--wb-accent); background: var(--wb-accent); }

/* The when-and-where band, at the demo's height, with its accent squares
   (the theme's .clock_bg, coloured by kirki-styles). */
.wb-clock-band { padding: 100px 0 !important; }
.wb-clock-band .wb-clock { gap: 16px; margin-top: 36px; }
.wb-clock-band .clock_bg { min-width: 150px; margin: 0; box-sizing: border-box; color: #FFFFFF; }
.wb-clock-band .clock_bg .clock_counter { font-family: Poppins, Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.wb-clock-band .clock_bg .clock_label { margin-top: 8px; }

/* The schedule's day cards: the demo's blue head over a white card that
   floats on a soft shadow. One day sits in the middle rather than in the
   left of two columns. */
.wb-days.is-single { grid-template-columns: minmax(0, 620px); justify-content: center; }
.wb-day { border: 0; box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1); }
.wb-day-head { padding: 25px; background: #007BFF; font-size: 18px; }
.wb-day-head small { font-size: 13px; }

/* A session as the demo sets it: the face, then the time over the title. */
.wb-day .wb-sessions > li { padding: 22px 25px; }
.wb-day .wb-sessions .session_content.has_speaker_thumb .session_start_time { float: none; width: auto; margin-bottom: 4px; color: #555555; font-family: inherit; font-size: 13px; font-weight: 400; }
.wb-day .wb-sessions .session_content.has_speaker_thumb .session_title,
.wb-day .wb-sessions .session_content.has_speaker_thumb .session_excerpt { margin-left: 0; }
.wb-day .wb-sessions .session_speakers { margin-top: 4px; font-size: 13px; }
.wb-day .wb-sessions .session_speakers strong { color: var(--wb-accent); }
.wb-day .wb-sessions .session_speaker_thumb,
.wb-day .wb-sessions .session_speaker_thumb img,
.wb-day .wb-sessions .wb-session-clock { width: 44px; height: 44px; }
.wb-day .wb-sessions .session_content.has_speaker_thumb { margin-left: 58px; }

/* The speakers: square tiles a fifth of the width, as the demo's five
   across; fewer than five sit in the middle rather than stretching. */
.wb-speakers { display: flex; flex-wrap: wrap; justify-content: center; }
.wb-speaker-card { flex: 0 0 20%; max-width: 20%; }

@media (max-width: 991px) {
    .wb-speaker-card { flex-basis: 33.333%; max-width: 33.333%; }
}

@media (max-width: 767px) {
    .wb-clock-band { padding: 70px 0 !important; }
    .wb-clock-band .wb-clock { gap: 10px; }
    .wb-clock-band .clock_bg { min-width: 0; flex: 1 1 40%; padding: 18px 10px 14px; }
    .wb-clock-band .clock_bg .clock_counter { font-size: 40px; }
    .wb-speaker-card { flex-basis: 50%; max-width: 50%; }
}

/* ---------- the footer's top row: the demo's three columns ---------- */

.wb-foot-top {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 60px;
    padding: 70px 0 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.wb-foot-top .wb-foot-about { margin: 10px 0 0; font-size: 15px; line-height: 1.7; }
.wb-foot-top .wb-foot-social { margin-top: 24px; text-align: left; }
#footer .wb-foot-top .wb-foot-social .wb-socials ul { justify-content: flex-start; }

.wb-foot-top-heading { margin: 0 0 18px; color: #FFFFFF; font-size: 18px; }

.wb-foot-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wb-foot-photos img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 5px; object-fit: cover; }

/* The newsletter, stacked in its column as the demo's: the heading, the
   line, then the address and the button each the column's full width. */
.wb-foot-top .wb-foot-band { display: block; margin: 0; padding: 0; border-radius: 0; background: none; }
.wb-foot-top .wb-foot-band-text h3 { margin: 0 0 18px; font-size: 18px; }
.wb-foot-top .wb-foot-band-text p { font-size: 15px; }
.wb-foot-top .wb-foot-band-form { margin-top: 20px; }
.wb-foot-top .wb-subscribe { display: block; }
.wb-foot-top .wb-subscribe input[type="email"] { box-sizing: border-box; width: 100%; margin-bottom: 10px; background: #FFFFFF; color: #222222; text-align: center; }
.wb-foot-top .wb-subscribe input[type="email"]::placeholder { color: #888888; }
.wb-foot-top .wb-subscribe button.button { width: 100%; }

.wb-foot-top + .wb-foot-cols { padding-top: 50px; }

@media (max-width: 991px) {
    .wb-foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .wb-foot-top { grid-template-columns: 1fr; padding-top: 50px; }
}