/* Root vars */
:root {
    --color-dark-blue: #00447d;
    --color-light-blue: #4B82B5;
    --color-white: #FFFFFF;
    --color-light-grey: #EEEFEF;

    --header-logo-height: 90px;
    --header-logo-height-scrolled: 50px;
    --banner-height: 180px;

    --transition-fast: 0.2s;
    --transition-med: 0.4s;
    --top-header-text-size-desktop: 1.9rem;
    --top-header-text-size-mobile: 1.1rem;
}

/* Utility classes */
.bg-dark-blue { background-color: var(--color-dark-blue) !important; }
.bg-light-blue { background-color: var(--color-light-blue) !important; }
.bg-light_grey { background-color: var(--color-light-grey) !important; }

.text-white { color: var(--color-white) !important; }
.text-dark-blue { color: var(--color-dark-blue) !important; }
.text-light-blue { color: var(--color-light-blue) !important; }

/* Base */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    
}

/* Header */
.top-header {
    padding: 0.75rem 1rem;
    transition: padding var(--transition-med) ease;
}

.site-logo {
    height: var(--header-logo-height);
    width: auto;
    transition: height var(--transition-med) ease;
}

.site-header.scrolled .top-header {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.site-header.scrolled .site-logo {
    height: var(--header-logo-height-scrolled);
}

/* Navigation */
.main-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.main-menu .dropdown-toggle::after {
    display: none !important;
}

.main-menu .nav-link,
.main-menu .dropdown-toggle {
    color: var(--color-white);
    padding: 0.75rem 1rem;
    font-weight: 500;
}

.main-menu .nav-link:hover,
.main-menu .dropdown-toggle:hover {
    color: #e8f4ff;
}

.main-menu .dropdown-menu {
    border-radius: 0;
    border: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Mobile menu */
.mobile-menu-toggle {
    color: var(--color-white);
    background: transparent;
    border: none;
    font-size: 1.5rem;
}

/* Mobile panel */
.mobile-menu-panel {
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    max-width: 80%;
    background-color: var(--color-dark-blue);
    color: var(--color-white);
    transform: translateX(-100%);
    opacity: 0;
    transition: transform var(--transition-med), opacity var(--transition-med);
    z-index: 1050;
    padding: 1.25rem 1rem;
}

.mobile-menu-panel.open {
    transform: translateX(0);
    opacity: 1;
}

/* Mobile overlay */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-med);
    z-index: 1040;
}

.mobile-menu-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Banner slider */
.banner-slider {
    position: relative;
    overflow: hidden;
    height: var(--banner-height);
}

.banner-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 2.5s ease-in-out;
}

.banner-slide.active {
    opacity: 1;
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ticker */
.site-ticker { overflow: hidden; white-space: nowrap; }
.ticker-item { padding: 0 1.5rem; }

/* Home content */
.home-content {
    font-size: 1rem;
    line-height: 1.7;
}

/* Image cards */
.image-card {
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.page-image {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

/* Footer */
.site-footer {
    padding: 1rem 0;
    margin-top: 3rem;
}

/* Desktop: left aligned and visible */
.top-header-text {
    font-size: var(--top-header-text-size-desktop);
    line-height: 1.4;
}
/* Responsive header text */
@media (max-width: 991.98px) {
    .top-header-text {
        text-align: center !important;
        margin-bottom: 0.75rem;
    }
    .top-header-text p {
        font-size: 1.15rem;
    }
    .top-header-text { order: -1; }
}

/* Mega menu */
.megamenu-li { position: static !important; }

.megamenu {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 600px;
    border: none;
    background: var(--color-dark-blue);
    color: #fff;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    border-radius: 0 0 10px 10px;
}
/* Scroll-in animation */
.scroll-fade-in {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
}

.scroll-fade-in.in-view {
    opacity: 1;
    transform: translateY(0);
}
/* Ticker must never wrap to 2 lines */
.site-ticker {
    white-space: nowrap !important;
    overflow: hidden;
}

.ticker-inner {
    display: inline-block;
    white-space: nowrap !important;
}
/* Remove bullets from mobile menu */
.mobile-menu-list,
.mobile-dropdown-menu {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.mobile-menu-list li,
.mobile-dropdown-menu li {
    list-style: none !important;
}
/* Mobile dropdowns hidden by default */
.mobile-dropdown-menu {
    display: none !important;
}

.mobile-dropdown-menu.open {
    display: block !important;
}
/* Remove underline from navigation links */
.main-menu a,
.mobile-menu-list a,
.mobile-dropdown-menu a {
    text-decoration: none !important;
}
/* Mobile menu link colour */
.mobile-menu-list a,
.mobile-dropdown-menu a {
    color: #ffffff !important;    /* force white */
}
/* Mobile dropdown toggle headings */
.mobile-dropdown-toggle {
    background: transparent !important;
    color: #ffffff !important;  /* white text */
    border: none !important;
    box-shadow: none !important;
}

/* Mobile dropdown toggle on tap/hover */
.mobile-dropdown-toggle:focus,
.mobile-dropdown-toggle:hover {
    background: transparent !important;
    color: #e8f4ff !important; /* slight lighter white on hover */
}
.mobile-dropdown-menu a:hover {
    background: transparent !important;
    color: #e8f4ff !important;
}
/* ===== MOBILE MENU FIXES (phase 2) ===== */

/* Make close button white */
.mobile-menu-close {
    color: #ffffff !important;
}

/* Align dropdown headings (choose preferred option) */
.mobile-dropdown-toggle {
    padding-left: 0.25rem !important; /* nice small indent */
    /* padding-left: 0 !important;  // Uncomment for no indent at all */
}

/* Larger mobile menu text */
.mobile-menu-list a,
.mobile-dropdown-toggle,
.mobile-dropdown-menu a {
    font-size: 1.1rem !important;
    line-height: 1.4;
}
/* ======================================= */
/* MOBILE MENU – FULL ENHANCED EXPERIENCE */
/* ======================================= */

/* Larger close button and always white */
.mobile-menu-close {
    color: #ffffff !important;
    font-size: 1.7rem !important;
    padding: 0.2rem 0.5rem !important;
}

/* Smooth slide-in adjustments */
.mobile-menu-panel {
    transform: translateX(-100%);
    opacity: 0;
    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}

.mobile-menu-panel.open {
    transform: translateX(0);
    opacity: 1;
}

/* Remove bullets + underline */
.mobile-menu-list,
.mobile-dropdown-menu {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.mobile-menu-list a,
.mobile-dropdown-menu a {
    text-decoration: none !important;
}

/* Font and spacing */
.mobile-menu-list a,
.mobile-dropdown-toggle,
.mobile-dropdown-menu a {
    font-size: 1.2rem !important;
    line-height: 1.5 !important;
    padding: 0.6rem 0 !important;
    display: block;
    color: #ffffff !important;
}

/* OPTIONAL: Slight spacing between top-level items */
.mobile-menu-list > li {
    margin-bottom: 0.35rem;
}

/* Dividers between groups (optional, subtle) */
.mobile-menu-list > li:not(:last-child) {
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 0.25rem;
}

/* Fix dropdown heading alignment */
.mobile-dropdown-toggle {
    padding-left: 0 !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    width: 100%;
    text-align: left;
}

/* Animate mobile dropdown opening */
.mobile-dropdown-menu {
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.mobile-dropdown-menu.open {
    display: block; /* Keeps block flow */
    max-height: 500px; /* Enough space to animate open */
}

/* Hover states */
.mobile-dropdown-toggle:hover,
.mobile-dropdown-menu a:hover {
    color: #e8f4ff !important;
}

/* Ensure tap targets are large */
.mobile-dropdown-toggle,
.mobile-menu-list a {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}
/* Desktop dropdown alignment  */
.main-menu .dropdown-menu {
    top: calc(100% + -4px) !important;   /* sits just below the menu item */
    margin-top: 0.25rem !important;
    left: 50% !important;
    padding: 0.5rem 0;
    border: none;
    border-radius: 0 0 6px 6px;
    background: var(--color-dark-blue);
    min-width: 200px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transform: translateX(-50%) !important;
    
}

.main-menu .dropdown-item {
    color: #ffffff !important;
    padding: 0.55rem 1.25rem;
    font-size: 0.95rem;
}

.main-menu .dropdown-item:hover,
.main-menu .dropdown-item:focus {
    background: rgba(255,255,255,0.12);
    color: #ffffff !important;
}

.main-menu .dropdown-menu li {
    list-style: none !important;
}
.main-menu .dropdown-menu a {
    color: #ffffff !important;
    text-decoration: none;
}
.main-menu .dropdown {
    position: relative;
}
.main-menu .dropdown-menu .dropdown-item {
    color: #ffffff !important;
    background-color: var(--color-dark-blue) !important;
    padding: 0.6rem 1.25rem;
}

.main-menu .dropdown-menu .dropdown-item:hover {
    background-color: #1e4766 !important; /* darker shade */
    color: #ffffff !important;
}
.main-menu .dropdown-menu,
.main-menu .dropdown-menu li {
    list-style: none !important;
}
.main-nav {
    background-color: var(--color-dark-blue) !important;
}
/* Kill tap highlight for nav-item (the TRUE source on iPad Safari) */
.main-nav .nav-item,
.main-nav .nav-item *,
.nav-item,
.nav-item * {
    outline: none !important;
}

/* Remove iOS active flash on the <li> */
.nav-item:active,
.nav-item:focus,
.nav-item:focus-within {
    outline: none !important;
}

/* Remove Bootstrap active background on iPad */
.nav-item.show,
.nav-item.dropdown.show,
.nav-item.dropdown:active {
}

/* Remove focus/active styles from the toggle link */
.nav-link.dropdown-toggle,
.nav-link.dropdown-toggle:active,
.nav-link.dropdown-toggle:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Kill highlight on the arrow icon */
.dropdown-arrow,
.dropdown-arrow * {
    -webkit-tap-highlight-color: transparent !important;
}