/*
 * Additions on top of the compiled theme styles (dist/).
 * Loaded after dist/style.style.css via functions.php.
 */

/* Homepage hero: image set in WP Admin (Homepage > Header > Background image) */
body.home .jumbo-header.has-hero-image {
    background-image: var(--hero-image);
}

/* From 1280px the visual fills the full hero height and bleeds off the top, right and bottom edges
   (the hero is widened past the 1440px container; padding keeps the text aligned with the rest of the page) */
@media screen and (min-width: 1280px) {
    body.home .jumbo-header.has-hero-image {
        max-width: none;
        padding-left: calc(max(0px, (100% - 1440px) / 2) + 64px);
        padding-right: calc(max(0px, (100% - 1440px) / 2) + 64px);
        background-size: auto 100%;
        background-position: right top;
    }
}

/* The theme shifts the image off-screen below 1200px; keep the new visual's text fully visible */
@media screen and (max-width: 1200px) {
    body.home .jumbo-header.has-hero-image {
        background-position-x: right;
    }
}

@media screen and (max-width: 992px) {
    body.home .jumbo-header.has-hero-image {
        background-image: none;
    }
}

/* Speaker profile pop-up: clickable speakers in the programme */
.speaker-profile-trigger {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.speaker-profile-trigger:focus-visible {
    outline: 2px solid var(--Event-Blue-2);
    outline-offset: 4px;
    border-radius: 4px;
}

body.home .programme .list .speaker_list .speaker-profile-trigger {
    width: 100%;
}

body.home .programme .list .speaker_list .speaker-profile-trigger:hover,
.page-programme .conf-info .speaker-profile-trigger:hover .name {
    color: var(--Event-Orange-2);
}

.page-programme .conf-info .speaker-info .name {
    transition: color .15s ease-in-out;
}

.page-programme .conf-info .speaker-info .see-profile {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--Event-Orange-2);
}

.page-programme .conf-info .speaker-info .see-profile .bi {
    margin-left: 4px;
    transition: margin .15s ease-in-out;
}

.page-programme .conf-info .speaker-profile-trigger:hover .see-profile .bi {
    margin-left: 8px;
}

/* Speaker profile pop-up: dialog */
.speaker-profile-modal .modal-content {
    border: 0;
    border-radius: 4px;
    border-top: 6px solid var(--Event-Green);
}

.speaker-profile-modal .modal-header {
    padding: 16px 16px 0;
}

.speaker-profile-modal .modal-body {
    padding: 0 24px 32px;
}

.speaker-profile-modal .speaker-profile-close {
    background: none;
    border: 0;
    padding: 4px;
    font-size: 20px;
    line-height: 1;
    color: var(--Black);
    cursor: pointer;
}

.speaker-profile-modal .speaker-profile-close:hover {
    color: var(--Event-Orange-2);
}

.speaker-profile-modal .speaker-profile-photo {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
}

.speaker-profile-modal .tags {
    gap: 8px;
}

.speaker-profile-modal .tags .tag {
    font-size: 14px;
    line-height: 150%;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 2px;
    padding: 4px 8px;
    color: var(--White);
}

.speaker-profile-modal .tags .tag.Speaker {
    background-color: var(--Event-Blue-2);
}

.speaker-profile-modal .tags .tag.Moderator {
    background-color: var(--Event-Orange-1);
}

.speaker-profile-modal .speaker-profile-sessions {
    margin-top: 24px;
}

.speaker-profile-modal .speaker-profile-sessions .sessions-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--Event-Green);
    margin-bottom: 8px;
}

.speaker-profile-modal .speaker-profile-sessions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.speaker-profile-modal .speaker-profile-sessions li {
    padding: 8px 0;
    border-bottom: 1px solid var(--Border-Custom);
}

.speaker-profile-modal .speaker-profile-sessions .time {
    font-size: 14px;
    font-weight: 700;
    color: var(--Event-Blue-2);
}

.speaker-profile-modal .speaker-profile-sessions .session-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 140%;
    color: var(--Event-Blue-1);
}

.speaker-profile-modal .name {
    font-size: 32px;
    font-weight: 800;
    line-height: 120%;
    color: var(--Event-Blue-1);
    margin-bottom: 8px;
}

.speaker-profile-modal .position,
.speaker-profile-modal .company {
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
}

.speaker-profile-modal .company {
    color: var(--Event-Green);
}

.speaker-profile-modal .description {
    margin-top: 24px;
    font-size: 16px;
    line-height: 160%;
}

@media screen and (min-width: 768px) {
    .speaker-profile-modal .modal-body {
        padding: 0 40px 40px;
    }
}

@media screen and (max-width: 767.98px) {
    .speaker-profile-modal .speaker-profile-photo {
        max-width: 160px;
    }

    .speaker-profile-modal .name {
        font-size: 26px;
    }
}

/* Media button in the header menu (WP Admin > Media Button) */
#top-header .menu-header-menu-container .menu .menu-item.menu-item-media {
    margin-left: 8px;
}

#top-header .menu-header-menu-container .menu .menu-item.menu-item-media a,
#top-header .menu-header-menu-container .menu .menu-item.menu-item-media:hover a {
    color: var(--White);
}

@media screen and (max-width: 991.98px) {
    #top-header .menu-header-menu-container .menu .menu-item.menu-item-media {
        margin-left: 0;
        margin-top: 8px;
        align-self: flex-start;
    }
}