/* Sitewide sponsorship top bar — every page except the fleadh landing page (see sponsorship-bar.php).
   Kept in its own file so the whole feature can be removed cleanly once the campaign ends:
   delete this file + assets/img/fleadh/fleadh-promo.png + sponsorship-bar.php, then drop the
   include('sponsorship-bar.php') call from header.php. */
.fl-sponsor-bar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(90deg, #c81e86 0%, #7b3591 100%);
    z-index: 10000;
}
.fl-sponsor-bar>.container{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 0;
}
.fl-sponsor-bar__badge{
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
}
.fl-sponsor-bar__text{
    flex: 1 1 auto;
    margin: 0;
    color: #fff;
    font-size: 15px;
    line-height: 1.3;
}
.fl-sponsor-bar__text strong{
    font-weight: 700;
}
.fl-sponsor-bar__cta{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #c81e86;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s ease;
}
.fl-arrow-icon{
    flex: 0 0 auto;
    display: block;
}
.fl-sponsor-bar__cta:hover{
    opacity: .8;
}
body:has(.fl-sponsor-bar) .page-topbar{
    top: var(--fl-sponsor-bar-h, 64px);
}
/* Desktop: .page-topbar is a real 76px-tall row above .page-navbar, so navbar's "not yet
   affixed" resting spot has to clear both the bar and the topbar. */
@media(min-width: 769px) {
    body:has(.fl-sponsor-bar) .page-navbar:not(.affix){
        top: calc(76px + var(--fl-sponsor-bar-h, 64px))!important;
    }
    body:has(.fl-sponsor-bar) .page-navbar.affix{
        top: var(--fl-sponsor-bar-h, 64px)!important;
    }
}
/* Mobile (<=768px): .page-topbar is display:none (style.css) — the logo + hamburger live
   inside .page-navbar itself, so there's no separate topbar height to clear. Navbar always
   sits right below the bar, in every affix state. */
@media(max-width: 768px) {
    body:has(.fl-sponsor-bar) .page-navbar{
        top: var(--fl-sponsor-bar-h, 64px)!important;
    }
}

/* Every page's first section (hero) needs extra top clearance so it doesn't sit behind the
   taller sticky header — but different page templates use different hero classes with their
   own hardcoded heights (.section-banner on the homepage is 680px, .section-banner-map on
   hosting pages is 940px, .partners-bg is 590px, and there are more we haven't all inventoried).
   Trying to override height/padding-top per hero variant is exactly what broke hosting-plans
   and partners — a value tuned for one page's hero got force-applied to every other page's
   different hero and fought its own layout. Instead, push the WHOLE page down by the bar's
   height via body padding: this reserves the space uniformly no matter what hero a given page
   uses, and needs zero per-page/per-template knowledge. The fixed topbar/navbar rules above
   are unaffected (they use explicit top values, not flow position), so this only needs to
   compensate for the bar itself, not the topbar. */
body:has(.fl-sponsor-bar){
    padding-top: var(--fl-sponsor-bar-h, 64px);
}

/* Tablet: same single-row layout as desktop, just smaller badge/type (design ref: 768px frame) */
@media(max-width:991px){
    .fl-sponsor-bar>.container{
        padding: 8px 0;
    }
    .fl-sponsor-bar__badge{
        width: 32px;
        height: 32px;
    }
    .fl-sponsor-bar__text{
        font-size: 13px;
    }
    .fl-sponsor-bar__cta{
        font-size: 12px;
        padding: 6px 10px;
    }
}
/* Mobile: badge + text share the top row, CTA wraps to its own row below at its natural
   (auto) width — not stretched full-width (design ref: 390px frame) */
@media(max-width:600px){
    .fl-sponsor-bar__badge{
        width: 32px;
        height: 32px;
    }
}

/* Welcome splash (design ref: frame 4c) — see welcome-splash.php */
body.fl-splash-lock{
    overflow: hidden;
}
.fl-splash-overlay{
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10,8,20,.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.fl-splash-overlay.is-visible{
    opacity: 1;
    pointer-events: auto;
}
.fl-splash-overlay.is-closing{
    opacity: 0;
    pointer-events: none;
}
.fl-splash-card{
    position: relative;
    display: flex;
    align-items: center;
    gap: 56px;
    width: 100%;
    max-width: 1000px;
    padding: 64px 72px;
    border-radius: 24px;
    background: linear-gradient(135deg, #1c1350 0%, #6a2f8f 55%, #c81e86 100%);
    box-shadow: 0 30px 80px rgba(0,0,0,.4);
    transform: scale(1);
    transition: transform .3s ease;
}
.fl-splash-overlay.is-closing .fl-splash-card{
    transform: scale(.96);
}
.fl-splash-close{
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.fl-splash-close:hover{
    background: rgba(255,255,255,.28);
}
.fl-splash-badge{
    flex: 0 0 auto;
    width: 280px;
}
.fl-splash-badge img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50%;
    animation: fl-badge-float 3.2s ease-in-out infinite;
}
@keyframes fl-badge-float{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
}
@media(prefers-reduced-motion: reduce){
    .fl-splash-badge img{
        animation: none;
    }
}
.fl-splash-social{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}
.fl-splash-social li{
    display: flex;
}
.fl-splash-social a{
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .85;
    transition: opacity .2s ease;
}
.fl-splash-social a:hover{
    opacity: 1;
}
.fl-splash-social svg{
    width: 19px;
    height: 19px;
}
.fl-splash-copy{
    flex: 1 1 auto;
    min-width: 0;
}
.fl-splash-eyebrow{
    margin: 0 0 12px;
    color: #7edaab;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.fl-splash-heading{
    margin: 0 0 20px;
    color: #fff;
    font-size: 40px;
    line-height: 1.25;
    font-weight: 700;
}
.fl-splash-desc{
    margin: 0 0 32px;
    color: rgba(255,255,255,.85);
    font-size: 17px;
    line-height: 1.5;
    font-weight: 300;
}
.fl-splash-actions{
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.fl-splash-cta{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ee49cb;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 16px 28px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s ease;
}
.fl-splash-cta:hover{
    opacity: .85;
}
.fl-splash-remember{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: rgba(255,255,255,.75);
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.fl-splash-remember input{
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid rgba(255,255,255,.55);
    border-radius: 5px;
    background: rgba(255,255,255,.1);
    cursor: pointer;
    position: relative;
    transition: background .2s ease, border-color .2s ease;
}
.fl-splash-remember input:hover{
    border-color: rgba(255,255,255,.85);
}
.fl-splash-remember input:checked{
    background: #ee49cb;
    border-color: #ee49cb;
}
.fl-splash-remember input:checked::after{
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@media(max-width: 900px){
    .fl-splash-card{
        flex-direction: column;
        text-align: center;
        gap: 28px;
        padding: 48px 32px;
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .fl-splash-badge{
        width: 180px;
    }
    .fl-splash-heading{
        font-size: 30px;
    }
    .fl-splash-desc{
        max-width: none;
    }
    .fl-splash-actions{
        justify-content: center;
        flex-direction: column;
    }
}