@media (min-width: 801px) {
    .hero {
        height: calc(100vh - 376px) !important; /* above-the-fold spacing = 376px */
        background-position: center calc(50% - 188px + 40px) !important; /* half of above-the-fold spacing = 188, half of navbar height = 40 */
    }
}

@media (min-width: 980px) {
    .navbar {
        text-align: center !important; /* for centering the countdown when rendered */
    }
    
    .countdown {
        display: inline-block !important; /* only display when viewport is wide enough  */
    }
}

/* default/small sizes: for event highlights, stack sections and layout child content vertically */
.highlights > div {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* disables the SplashThat UI edit tool shortcut menu because it interfered with flex containers  */
.highlights .edit-tools, .speaker-full .edit-tools  {
    display: none; 
}

.speaker-right .edit-tools {
    display: block;
}

/* medium sizes: for event highlights, stack sections and layout child content horizontally */
@media (min-width: 600px) and (max-width: 1320px){
    .highlights > div {
        flex-direction: row;
         width: 100%;
         align-items: center;
    }
    .highlights > div > div:first-child {
        width: 33.33% !important; 
        min-width: 200px;
    }
    
    .highlights > div > div:nth-child(2) {
        padding: 24px !important; 
    }
    
}

/* large sizes: for event highlights, flow sections in 3-cols and layout child content vertically */
@media (min-width: 1321px) {
    .highlights > div {
        display: flex;
        flex-direction: column;
        width: 33.33% !important;
    }
}

/* for no overlapping border styles */ 
.featured-speakers > div:first-child, .registration-fees > div:first-child {
   border-left: solid 1px rgb(67, 62, 56);
}

@media (min-width: 801px) {
    .speaker-full {
        display: flex !important;
    }
}

.speaker-right {
    height: 100%;
    display: flex !important;
    flex-direction: column;
}

/* ---------------------------------------------- */
/* 🔧 FIX: Remove black gap between speaker section and next section */
/* ---------------------------------------------- */
.speaker-full {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    background-color: #2b1034; /* match Patrick's section background */
}

.featured-speakers {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background-color: #133423; /* match next section background */
}

/* Optional: smooth out any 1px rendering gap on mobile */
@media (max-width: 800px) {
    .featured-speakers {
        margin-top: -1px;
    }
}