/* ============================================================
   GLOBAL RESTORE PATCH — SAFE, ADDITIVE, NON‑DESTRUCTIVE
   ============================================================ */

/* ---------------------------------------------
   1. RESTORE BADGE SIZING (SC + PRINCE2)
   --------------------------------------------- */

.badge img {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
}

/* ---------------------------------------------
   2. RESTORE BADGE TEXT
   --------------------------------------------- */

.badge p {
    margin-top: 8px !important;
    font-size: 14px !important;
    color: #fff !important;
    text-align: center !important;
}

/* ---------------------------------------------
   3. RESTORE MENU / SEARCH / DARK ICON SIZE
   --------------------------------------------- */

.hs-icon-btn,
.hs-search-icon,
.hs-dark-icon,
.hs-hamburger {
    font-size: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
}

/* ---------------------------------------------
   4. KEEP ICONS VISIBLE WHILE SCROLLING
   --------------------------------------------- */

.hs-topbar {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    z-index: 9999 !important;
}

/* ---------------------------------------------
   5. FIX MOBILE — DISCUSS PROGRAM BUTTON WIDTH
   --------------------------------------------- */

.brand-btn,
.discuss-btn {
    max-width: 100% !important;
    width: auto !important;
    display: inline-block !important;
    white-space: normal !important;
}

/* ---------------------------------------------
   6. FIX MOBILE — SEARCH ICON OVERLAP
   --------------------------------------------- */

@media (max-width: 767px) {
    .hs-topbar {
        right: 12px !important;
    }
    .hs-logo {
        margin-top: 40px !important;
    }
}

/* ---------------------------------------------
   7. RESTORE FLOATING BAR BEHAVIOUR
   --------------------------------------------- */

.fab,
#fab {
    display: none !important;
}

body.scrolled .fab,
body.scrolled #fab {
    display: flex !important;
}

/* ---------------------------------------------
   8. REMOVE DUPLICATE FLOATING BUTTONS
   --------------------------------------------- */

.fab-booking,
#bookingFab {
    display: none !important;
}

/* ---------------------------------------------
   9. RESTORE RECENTLY VIEWED SPACING
   --------------------------------------------- */

#hsRecentlyViewed a {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 14px !important;
}

/* ---------------------------------------------
   10. RESTORE HERO BUTTONS (INDEX)
   --------------------------------------------- */

.brand-btn {
    background: #0a2540 !important;
    color: white !important;
    padding: 12px 24px !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border: 2px solid #0a2540 !important;
}

.brand-btn:hover {
    background: transparent !important;
    color: #0a66c2 !important;
    border-color: #0a66c2 !important;
}

/* ---------------------------------------------
   11. FIX MENU NOT WORKING UNTIL REFRESH
   --------------------------------------------- */

#hsMenuOverlay,
#hsMenuPanel {
    pointer-events: auto !important;
}

/* ---------------------------------------------
   12. FIX MENU PANEL WIDTH ON MOBILE
   --------------------------------------------- */

.hs-menu-panel {
    max-width: calc(100% - 20px) !important;
}

/* ---------------------------------------------
   13. FIX DARK MODE TEXT BLEED
   --------------------------------------------- */

body.dark main *:not(.card):not(.box):not(.download-box):not(.timeline-box) {
    color: #e6e6e6 !important;
}

/* ---------------------------------------------
   14. FIX INDEX BADGE GRID SPACING
   --------------------------------------------- */

.badge {
    padding: 12px !important;
    border-radius: 12px !important;
    background: #0A1F44 !important;
} 
/* ============================================================
   MOBILE BAR — GLOBAL FIX
   ============================================================ */

/* Make mobile bar appear on all pages */
.mobile-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #0A1F44;
    padding: 12px 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    z-index: 9999;
}

/* Buttons inside the bar */
.mobile-sticky-bar .sticky-btn {
    flex: 1;
    text-align: center;
    background: white;
    color: #0A1F44;
    padding: 12px 10px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* Prevent Discuss Programme from being cut off */
.mobile-sticky-bar .sticky-btn:last-child {
    white-space: normal;
}

/* Hide floating buttons when mobile bar is present */
@media (max-width: 767px) {
    .fab,
    #fab,
    .fab-booking,
    #bookingFab {
        display: none !important;
    }
}
/* ============================================================
   DEVICE LOGIC — CORRECT BEHAVIOUR FOR IPHONE / IPAD / DESKTOP
   ============================================================ */

/* ------------------------------
   1. MOBILE BAR — iPHONE ONLY
   ------------------------------ */

/* Show mobile bar ONLY on screens narrower than 600px */
@media (max-width: 600px) {
    .mobile-sticky-bar {
        display: flex !important;
    }
}

/* Hide mobile bar on iPad and desktop */
@media (min-width: 601px) {
    .mobile-sticky-bar {
        display: none !important;
    }
}

/* ------------------------------
   2. FLOATING BUTTONS — iPHONE
   ------------------------------ */

/* iPhone: show ONLY back-to-top FAB */
@media (max-width: 600px) {
    #fab,
    .fab {
        display: flex !important;
    }

    /* Hide calendar FAB on iPhone */
    #bookingFab,
    .fab-booking {
        display: none !important;
    }
}

/* ------------------------------
   3. FLOATING BUTTONS — iPAD + DESKTOP
   ------------------------------ */

/* iPad and desktop: show BOTH floating buttons */
@media (min-width: 601px) {
    #fab,
    .fab,
    #bookingFab,
    .fab-booking {
        display: flex !important;
    }
}
/* ============================================================
   HEADER ICON VISIBILITY + SIZE FIX
   ============================================================ */

.hs-icon-btn,
.hs-search-icon,
.hs-dark-icon,
.hs-hamburger {
    font-size: 28px !important;      /* bigger icons */
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.08) !important; /* subtle background for visibility */
    backdrop-filter: blur(6px) !important;
}

/* Make icons visible on white backgrounds */
.hs-icon-btn svg,
.hs-search-icon svg,
.hs-dark-icon svg,
.hs-hamburger svg {
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.6)) !important;
}
/* ============================================================
   IPHONE FAB LOGIC — ONLY BACK TO TOP
   ============================================================ */

/* iPhone = max-width 600px */
@media (max-width: 600px) {

    /* Hide calendar FAB */
    #bookingFab,
    .fab-booking {
        display: none !important;
    }

    /* Show back-to-top FAB */
    #fab,
    .fab {
        display: flex !important;
        bottom: 90px !important; /* sits above mobile bar */
        right: 20px !important;  /* same position calendar FAB used */
        z-index: 99999 !important;
    }
}
/* ============================================================
   MOBILE BAR BUTTON WIDTH FIX
   ============================================================ */

.mobile-sticky-bar .sticky-btn {
    flex: 1 1 auto !important;
    white-space: normal !important;
    text-align: center !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
}

/* Prevent overflow on small screens */
@media (max-width: 400px) {
    .mobile-sticky-bar {
        flex-direction: column !important;
    }
}
/* ============================================================
   1. HEADER ICONS — REMOVE WHITE BACKGROUND + IMPROVE VISIBILITY
   ============================================================ */

.hs-icon-btn,
.hs-search-icon,
.hs-dark-icon,
.hs-hamburger {
    background: rgba(0,0,0,0.25) !important; /* subtle translucent dark */
    border-radius: 50% !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.hs-icon-btn svg,
.hs-search-icon svg,
.hs-dark-icon svg,
.hs-hamburger svg {
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.7)) !important;
}


/* ============================================================
   2. IPHONE FAB LOGIC — ONLY BACK TO TOP, CORRECT POSITION
   ============================================================ */

@media (max-width: 600px) {

    /* Hide calendar FAB completely */
    #bookingFab,
    .fab-booking {
        display: none !important;
    }

    /* Show back-to-top FAB and position it correctly */
    #fab,
    .fab {
        display: flex !important;
        position: fixed !important;
        bottom: 85px !important;  /* sits above mobile bar */
        right: 20px !important;
        z-index: 999999 !important;
    }
}


/* ============================================================
   3. MOBILE BAR — FIX WIDTH, PREVENT STACKING, STOP OVERFLOW
   ============================================================ */

.mobile-sticky-bar {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 12px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mobile-sticky-bar .sticky-btn {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    white-space: normal !important;
    text-align: center !important;
    padding: 12px 10px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word !important;
}

/* Prevent overflow on very small screens */
@media (max-width: 360px) {
    .mobile-sticky-bar .sticky-btn {
        font-size: 14px !important;
        padding: 10px 8px !important;
    }
}
/* MOBILE BAR SHOULD ONLY APPEAR ON IPHONE */
@media (max-width: 480px) {
    .mobile-sticky-bar {
        display: flex !important;
    }
}

@media (min-width: 481px) {
    .mobile-sticky-bar {
        display: none !important;
    }
}
/* IPHONE — ONLY SHOW BACK TO TOP FAB */
@media (max-width: 480px) {

    /* Force-hide calendar FAB */
    a#bookingFab,
    .fab-booking {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Force-show back-to-top FAB and position correctly */
    a#fab,
    .fab {
        display: flex !important;
        position: fixed !important;
        bottom: 85px !important; /* above mobile bar */
        right: 20px !important;
        z-index: 999999 !important;
    }
}
/* MOBILE BAR BUTTON FIX */
.mobile-sticky-bar {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 12px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mobile-sticky-bar .sticky-btn {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    white-space: normal !important;
    text-align: center !important;
    overflow-wrap: break-word !important;
    padding: 12px 10px !important;
}
/* HEADER ICON VISIBILITY FIX */
.hs-icon-btn,
.hs-search-icon,
.hs-dark-icon,
.hs-hamburger {
    background: transparent !important;
}

.hs-icon-btn svg,
.hs-search-icon svg,
.hs-dark-icon svg,
.hs-hamburger svg {
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.9)) 
            drop-shadow(0 0 2px rgba(0,0,0,0.8)) !important;
}
/* ============================================================
   1. MOBILE BAR — iPHONE ONLY (FORCE OVERRIDE)
   ============================================================ */

/* iPhone only */
@media (max-width: 480px) {
    .mobile-sticky-bar {
        display: flex !important;
    }
}

/* Hide mobile bar on iPad + desktop */
@media (min-width: 481px) {
    .mobile-sticky-bar {
        display: none !important;
    }
}
/* ============================================================
   2. FAB LOGIC — REMOVE CALENDAR FAB + POSITION BACK TO TOP
   ============================================================ */

/* iPhone only */
@media (max-width: 480px) {

    /* Force-hide calendar FAB */
    #bookingFab,
    .fab-booking {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Force-show back-to-top FAB in correct position */
    #fab,
    .fab {
        display: flex !important;
        position: fixed !important;
        bottom: 90px !important; /* sits above mobile bar */
        right: 20px !important;  /* same place calendar FAB was */
        z-index: 999999 !important;
    }
}
/* ============================================================
   3. HEADER ICON VISIBILITY — DARKER + CLEAR AGAINST HEADER
   ============================================================ */

.hs-icon-btn,
.hs-search-icon,
.hs-dark-icon,
.hs-hamburger {
    background: rgba(0,0,0,0.35) !important; /* darker translucent */
    border-radius: 50% !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* Make icons visible on dark header + light content */
.hs-icon-btn svg,
.hs-search-icon svg,
.hs-dark-icon svg,
.hs-hamburger svg {
    filter:
        drop-shadow(0 0 3px rgba(255,255,255,0.9))
        drop-shadow(0 0 2px rgba(0,0,0,0.9)) !important;
}
/* ============================================================
   FORCE BACK-TO-TOP FAB POSITION ON iPHONE
   ============================================================ */

@media (max-width: 480px) {

    /* Target the FAB with maximum specificity */
    body .fab,
    body #fab {
        position: fixed !important;
        bottom: 90px !important;   /* sits above mobile bar */
        right: 20px !important;    /* same position calendar FAB used */
        left: auto !important;
        top: auto !important;
        z-index: 999999 !important;
    }
}
/* ============================================================
   FINAL FAB FIX — APPLY INDEX BEHAVIOUR TO ALL PAGES
   ============================================================ */

@media (max-width: 480px) {

    /* Back-to-top FAB (only one on iPhone) */
    .fab:not(.fab-booking) {
        position: fixed !important;
        bottom: 90px !important;   /* same position as calendar FAB */
        right: 20px !important;
        left: auto !important;
        top: auto !important;
        z-index: 10000 !important;
    }
}