/**
 * Global Header & Navigation
 * ============================================================================
 * Styles for the site header, navigation, breadcrumbs, and header images.
 * Includes mega menu overrides and responsive navigation behavior.
 *
 * Load order: After styles.css
 * Dependencies: 00-tokens.css (design tokens)
 *
 * Sections:
 * 1. Header buttons (.btn-header variants)
 * 2. Navigation container (.nav-container)
 * 3. Header bar (.header-bar)
 * 4. Breadcrumbs
 * 5. Header images (.image-container variants)
 * 6. Mega Menu overrides
 * ============================================================================
 */

/* Header Button Base Class - DRY Pattern */
.btn-header {
    width: 168px;
    height: 40px;
    padding: 0 24px;
    border-radius: var(--radius-full);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Button element specific resets */
.btn-header {
    border: 2px solid transparent;
    background: none;
    margin: 0;
    appearance: none;
}

/* Sign In Variant - Outlined Style */
.btn-header--signin {
    background-color: transparent;
    color: var(--brand-main);
    border: none;
}

.btn-header--signin:hover {
    border: 2px solid var(--brand-main);
    color: var(--main);
}

/* Free Trial Variant - Filled Style */
.btn-header--freetrial {
    background-color: var(--brand-main);
    color: var(--white);
    border: 2px solid var(--brand-main);
}

.btn-header--freetrial:hover {
    background-color: var(--brand-main-dark);
    border-color: var(--brand-main);
    color: var(--brand-main);
}

#mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu #mega-menu-item-640 a,
#mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu #mega-menu-item-882 a {
    width: 168px;
    height: 40px;
}

.nav-container .content {
    display: flex;
    align-items: center;

    /* vertical center alignment */
    height: var(--nav-container-height);

    /* ensure compact height */
    box-sizing: border-box;
}


/* ==========================================================================
   Navigation Container
   Main navigation bar containing logo and mega menu.
   Positioned fixed below header-bar on desktop, at top on mobile.
   ========================================================================== */
.nav-container {
    /* Positioning */
    position: fixed;
    z-index: 50;
    top: var(--space-10);
    width: 100%;

    /* Dimensions */
    height: var(--nav-container-height);
    min-height: var(--nav-container-min-height);

    /* Layout */
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Appearance */
    background-image: var(--brand-gradient);
}

.breadcrumb {
    color: var(--text-secondary);
}




/* Ensure menu maintains standard layout */
.nav-container>.content {
    position: relative; /* For absolute centering of contact icon */
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--content-padding-x);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

/* Breadcrumb wrapper - full width */
.breadcrumb-fullwrap {
    width: 100%; /* Changed from 100vw - vw includes scrollbar/safe-area causing iOS overflow */
    background-color: var(--bg-1);
    top: var(--breadcrumb-top);
    position: fixed;
    left: 0;
    right: 0;
    transition: top 0.3s ease;
}

/* Breadcrumb position when header is in scrolling state
   SAP: moves up to stay attached to shrinking nav-container
   SSA: stays same (nav doesn't shrink) */
.breadcrumb-fullwrap.scrolling {
    top: var(--breadcrumb-top-scrolling);
}

/* Breadcrumb center content alignment */
.breadcrumb-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px var(--content-padding-x);
    box-sizing: border-box;
    font-size: 14px;
}

#breadcrumbs {
    margin: var(--space-0);
    color: var(--text-secondary);
}



/* Removed duplicate mega-menu margin rules - see lines 319-324 */

nav#mega-menu-wrap-staff-skills-academy-menu.mega-menu-wrap {
    clear: none;
    margin-left: auto;
}

#mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu {
    width: 1000px;
    text-align: right;
    padding: 0;
}


.nav-container .logo {
    height: var(--logo-height);
    width: var(--logo-width);
    margin: var(--logo-margin);
}

.nav-container.scrolling .logo {
    height: var(--logo-height-scrolling);
    width: var(--logo-width-scrolling);
    margin: var(--logo-margin-scrolling);
}

/* Removed duplicate mega menu positioning rules - see lines 321-329 for active rules */

/* .header-bar .content padding - CANONICAL RULE at line ~216 uses tokens */

/* page 284 reference - can be removed */

header .image-container {
    max-height: 320px;
    position: relative;
    /* Fix: Prevent .content overflow from blocking clicks on subsequent sections.
       The .content inside has min-height: 536px which exceeds max-height: 320px,
       causing invisible overflow that intercepts clicks on elements like FAQs. */
    overflow: hidden;
}


.image-container.homepage-image {
    max-height: none;
}

/* Header h1 and p styles moved to line 637 */

/* Removed duplicate border-bottom rule - using the highlight border below */

/* Blog inside-content styling moved to content-blog.css */

.header-bar {
    height: var(--header-bar-height);
    max-height: var(--header-bar-height);
    background-color: var(--white);
    z-index: 50;
    width: 100%;
    position: fixed;
    top: var(--space-0);
}

.header-bar .content {
    display: flex;
    justify-content: space-between;
    padding: var(--header-bar-padding-y) var(--header-bar-padding-x);
}

.header-bar.scrolling {
    position: fixed;
}

.header-bar .phone,
.header-bar .search {
    display: flex;
    align-items: center;
}

.header-bar .phone {
    text-decoration: none;
}

.header-bar .phone::before {
    content: url('../img/icon-phone.webp');
    height: 18px;
    margin-right: 6px;
    width: 18px;
}

.header-bar .search-contact-login a {
    text-decoration: none;
}

.header-bar .search-contact-login {
    display: flex;
    gap: 50px;
}

.header-bar .search-contact-login a.search::before {
    content: url('../img/icon-search.webp');
    height: 18px;
    margin-right: 6px;
    width: 18px;
}

/* Navigation Container Variant: Full-screen background mode */
.nav-container.fsb {
    position: relative;
    top: 0;
    background-color: var(--white);
    background-image: none;
}

.nav-container .logo {
    display: inline-block;
    height: var(--logo-height);
    width: var(--logo-width);
    margin: var(--logo-margin);
    text-indent: -99999px;
    transition: all 0.1s ease;
}

.nav-container.fsb .logo {
    height: 70px;
    width: 364px;
}

.nav-container.scrolling {
    position: fixed;
    top: var(--space-10);
    height: var(--nav-container-height-scrolling);
    min-height: var(--nav-container-min-height-scrolling);
    z-index: 50;
}

.nav-container.scrolling .logo {
    height: var(--logo-height-scrolling);
    width: var(--logo-width-scrolling);
    margin: var(--logo-margin-scrolling);
}

.nav-container.fsb.scrolling {
    position: relative;

    /* min-height: 168px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    top: auto;
    height: fit-content;
}

/* Navigation Contact Icon (Phone/Email) Display
   Hidden on desktop, shown on mobile/tablet when header-bar is hidden.
   Positioned to the left of hamburger menu for quick contact access.
   Using higher specificity selector to prevent overrides. */
.nav-container > .content > a.phone,
.nav-container > .content > a.email {
    display: none;
    position: absolute;
    right: 80px; /* Position to the left of hamburger menu */
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}

.nav-container > .content > a.phone img,
.nav-container > .content > a.email img {
    height: 24px;
    width: 24px;
}

/* Mega Menu Styles */
nav#mega-menu-wrap-staff-skills-academy-menu.mega-menu-wrap {
    clear: none;
    font-family: Archivo, sans-serif;
    font-size: 16px;
    display: inline-block;
    max-width: fit-content;
    margin-top: var(--space-0);
    margin-left: auto;
}

.nav-container.scrolling nav#mega-menu-wrap-staff-skills-academy-menu.mega-menu-wrap {
    margin-top: var(--space-0);
}

/* ==========================================================================
   Mega Menu Dropdown Positioning
   
   IMPORTANT: The mega menu is positioned relative to its parent container,
   NOT the viewport. This is why values are much smaller than expected.
   
   Desktop dropdown: 55px (aligns perfectly with nav bottom)
   Mobile toggle: 52px (3px less due to different box model/borders)
   
   All values are defined as CSS variables in 00-tokens.css for maintainability.
   ========================================================================== */

/* Desktop dropdown positioning - separate from mobile toggle */
#mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu[data-effect="fade"] li.mega-menu-item>ul.mega-sub-menu {
    top: var(--mega-menu-desktop-offset); /* Desktop dropdown: 55px */
}

/* Mobile toggle positioning - needs different offset */
#mega-menu-wrap-staff-skills-academy-menu .mega-menu-toggle.mega-menu-open+#mega-menu-staff-skills-academy-menu {
    top: var(--mega-menu-mobile-toggle-offset); /* Mobile toggle: 52px */
}

/* Scrolling state positioning */
.nav-container.scrolling #mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu[data-effect="fade"] li.mega-menu-item>ul.mega-sub-menu {
    top: var(--mega-menu-desktop-scrolling-offset); /* Desktop scrolling: 55px */
}

.nav-container.scrolling #mega-menu-wrap-staff-skills-academy-menu .mega-menu-toggle.mega-menu-open+#mega-menu-staff-skills-academy-menu {
    top: var(--mega-menu-mobile-toggle-offset); /* Mobile toggle scrolling: 52px */
}

/* !important required to override Mega Menu Pro plugin defaults */
#mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu li.mega-menu-megamenu>ul.mega-sub-menu>li.mega-menu-row .mega-menu-column>ul.mega-sub-menu>li.mega-menu-item {
    padding: 0 !important;
}

/* !important required to override Mega Menu Pro plugin defaults */
#mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu>li.mega-menu-megamenu>ul.mega-sub-menu>li.mega-menu-item h4.mega-block-title,
#mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu>li.mega-menu-megamenu>ul.mega-sub-menu li.mega-menu-column>ul.mega-sub-menu>li.mega-menu-item h4.mega-block-title {
    margin-bottom: 25px !important;
    padding: var(--space-0);
}

#mega-menu-item-640 a,
#mega-menu-item-882 a {
    align-items: center;
    background-color: var(--white);
    border-radius: var(--radius-xl);
    color: var(--brand-main);
    display: flex;
    font-family: Poppins, sans-serif;
    font-weight: 400;
    height: 48px;
    justify-content: center;
    margin: 0 auto;
    min-width: 150px;
    padding: 0 34px;
    transition: 0.3s all ease;
    width: fit-content;
}

/* Breadcrumb Styles */
.breadcrumb {
    color: var(--white);
    font-size: 13px;
    height: 32px;
}

.clear-header {
    height: var(--clear-header-height);
}

.enquire-now--mobile {
	display: none;
}

/* ==========================================================================
   Mobile Responsive Adjustments
   ========================================================================== */

/* Tablet breakpoint */
@media (max-width: 768px) {
    .btn-header {
        width: 140px;
        font-size: 14px;
        padding: 0 16px;
    }

    #mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu #mega-menu-item-640 a,
    #mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu #mega-menu-item-882 a {
        width: 140px;
    }

    /* Nav/breadcrumb padding now handled by --content-padding-x variable
       which is 32px at 768px - removed redundant override */

    /* Hide header-bar on tablet and mobile for single green bar layout */
    .header-bar {
        display: none;
    }

    /* Mobile Navigation Positioning - !important overrides JS-set inline styles */
    .nav-container {
        top: 0 !important;
    }

    /* With header-bar hidden, nav-container should be at top for single green bar layout */

    /* Show contact icon centered between logo and hamburger */
    .nav-container > .content > a.phone,
    .nav-container > .content > a.email {
        display: block;
    }

    /* Adjust clear-header for tablet - uses token override from 00-tokens-brand-ssa.css */
    .clear-header {
        height: var(--clear-header-height);
    }

    /* Breadcrumb positioning - uses token override from 00-tokens-brand-ssa.css
       No need for explicit .scrolling rule here since --breadcrumb-top-scrolling
       is also overridden in the mobile token block */
    .breadcrumb-fullwrap {
        top: var(--breadcrumb-top);
    }
}

/* Mobile breakpoint */
@media (max-width: 480px) {
    .btn-header {
        width: 100px;
        font-size: 13px;
        padding: 0 12px;
        height: 36px;
    }

    #mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu #mega-menu-item-640 a,
    #mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu #mega-menu-item-882 a {
        width: 100px;
        height: 36px;
    }

    /* Header elements use tighter mobile padding (12px) than content (16px) for logo/hamburger space */
    .nav-container>.content,
    .breadcrumb-inner,
    .header-bar .content {
        padding: 0 var(--space-3);
    }

    /* Additional mobile-specific header bar rules */
    .content.header-bar {
        display: none;
        padding: 16px 24px;
    }

    .content.header-bar a.search span {
        display: none;
    }

    .content.header-bar a.support {
        display: none;
    }

    .header-bar .search-contact-login a {
        margin-left: 30px;
    }

    .nav-container.scrolling a.logo {
        background-size: 161px;
        height: 80px;
        width: 142px;
    }

    /* Mobile Mega Menu Positioning */
    #mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu[data-effect="fade"] li.mega-menu-item>ul.mega-sub-menu {
        /* top: var(--mega-menu-mobile-offset); /* Mobile dropdown: 74px */
    }
    
    #mega-menu-wrap-staff-skills-academy-menu .mega-menu-toggle.mega-menu-open+#mega-menu-staff-skills-academy-menu {
        /* top: var(--mega-menu-mobile-offset); /* Mobile toggle: 74px */
    }

    .nav-container.scrolling #mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu[data-effect="fade"] li.mega-menu-item>ul.mega-sub-menu,
    .nav-container.scrolling #mega-menu-wrap-staff-skills-academy-menu .mega-menu-toggle.mega-menu-open+#mega-menu-staff-skills-academy-menu {
        /* top: var(--mega-menu-mobile-scrolling-offset); /* Mobile scrolling: 56px */
    }

    nav#mega-menu-wrap-staff-skills-academy-menu.mega-menu-wrap {
        margin-top: var(--space-0);
    }

    /* Override for mobile toggle when not scrolling */
    .nav-container:not(.scrolling) #mega-menu-wrap-staff-skills-academy-menu .mega-menu-toggle.mega-menu-open+#mega-menu-staff-skills-academy-menu {
        /* top: 111px; /* Specific mobile toggle position when not scrolling */
    }

    /* Mobile clear-header already set in tablet breakpoint above (65px) */
}

/* ==========================================================================
   Mega Menu Styles from styles.css
   ========================================================================== */

/* FSB menu */
#mega-menu-fsb-menu {
    list-style-type: none;
    display: flex;
    flex-direction: row-reverse;
}

#mega-menu-fsb-menu li {
    display: inline-block;
}

/* !important required to override Mega Menu Pro plugin defaults */
#mega-menu-fsb-menu li a {
    color: var(--brand-main) !important;
    text-decoration: none;
    padding: 0 10px;
}

/* Desktop Breakpoint Mega Menu Styles */
@media (min-width: 1280px) {
    #mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu #mega-menu-item-27 a,
    #mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu #mega-menu-item-640 a,
    #mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu #mega-menu-item-882 a {
        align-items: center;
        background-color: var(--brand-highlight);
        border-radius: var(--radius-xl);
        color: var(--brand-main);
        display: flex;
        font-family: Poppins, sans-serif;
        font-weight: 600;
        height: 48px;
        justify-content: center;
        margin: 0 0 0 24px;
        min-width: 150px;
        padding: 0 34px;
        transition: 0.3s all ease;
        width: fit-content;
    }

    #mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu #mega-menu-item-640 a,
    #mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu #mega-menu-item-882 a {
        background-color: var(--white);
    }
}

/* Tablet Breakpoint Mega Menu Styles */
@media (max-width: 1280px) {
    #mega-menu-item-882 a {
        align-items: center;
        background-color: var(--white);
        border-radius: var(--radius-xl);
        color: var(--brand-main);
        display: flex;
        font-family: Poppins, sans-serif;
        font-weight: 400;
        height: 48px;
        justify-content: center;
        margin: 0 auto;
        min-width: 150px;
        padding: 0 34px;
        transition: 0.3s all ease;
        width: fit-content;
    }

    /* Removed conflicting tablet breakpoint dropdown positioning - using base rules from lines 318-321 */

    /* Removed conflicting tablet breakpoint dropdown positioning - using base rules from lines 313-316 */

    #mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu>li#mega-menu-item-882>a.mega-menu-link {
        align-items: center;
        background-color: var(--white);
        border-radius: var(--radius-xl);
        color: var(--brand-main);
        display: flex;
        font-family: Poppins, sans-serif;
        font-weight: 600;
        height: 48px;
        justify-content: center;
        margin: 10px 0 20px 10px;
        min-width: 150px;
        padding: 0 34px;
        transition: 0.3s all ease;
        width: fit-content;
    }
}/* ==========================================================================
   Navigation Styles (moved from styles.css)
   ========================================================================== */

/* Base Navigation */
nav {
    font-family: Archivo, sans-serif;
    margin-top: 6px;
    max-width: 830px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* ==========================================================================
   Header Image Container Styles (moved from styles.css)
   ========================================================================== */

header .image-container .header-fade {
    position: absolute;
    opacity: 0.85;
    background-image: linear-gradient(270deg, rgb(12 111 138 / 40%) 23%, var(--brand-main) 56%);
    height: 100%;
    width: 100%;
}

header .image-container .content {
    position: relative;
    text-align: left;
    min-height: 536px;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

header .image-container .content .text {
    padding-top: 35px;
    flex: 0 0 55%;
}

header .image-container .content .text:only-child {
    flex: 0 0 100%;
}

header .image-container .content .form-code {
    flex: 0 0 45%;
}

header .image-container .content h1 {
    color: var(--white);
    font-size: 64px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 100%;
    margin-bottom: 15px;
    max-width: 692px;
    text-align: left;
    width: 100%;
}

header .image-container .content h1 u {
    position: relative;
    text-decoration: none;
}

header .image-container .content h1 u::after {
    background: url("../img/underline.webp") 100% 100% / cover no-repeat;
    bottom: -8px;
    content: '';
    display: block;
    height: 15%;
    left: 5%;
    right: 5%;
    position: absolute;
    width: 90%;
}

header .image-container .content p {
    color: var(--white);
    font-family: Archivo, sans-serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 35px;
    margin-bottom: 20px;
    max-width: 765px;
    width: 100%;
}

header .image-container .button-container {
    display: flex;
    gap: 30px;
}

header .image-container .button {
    background-color: var(--brand-highlight);
    color: var(--black);
    margin: var(--space-0);
}

header .image-container .second-button {
    background-color: var(--white);
}

/* !important required to override Mega Menu Pro transition defaults */
#mega-menu-wrap-staff-skills-academy-menu .mega-sub-menu {
    transition: all 0.3s ease-in-out !important;
}

/* Fix: Hidden mega menu dropdowns should not intercept clicks.
   The fade effect uses visibility:hidden + opacity:0 but lacks pointer-events:none,
   causing invisible dropdowns to block clicks on content below (e.g., FAQ items). */
#mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu li.mega-menu-item > ul.mega-sub-menu {
    pointer-events: none;
}

#mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu {
    pointer-events: auto;
}

/* ==========================================================================
   Responsive Header Styles (moved from styles.css)
   ========================================================================== */

/* Tablet breakpoint (1024px) */
@media (max-width: 1024px) {
    header .image-container .content {
        padding: 32px;
    }

    header .image-container .content .text {
        max-width: 100%;
    }
}

/* Mobile breakpoint (640px) */
@media (max-width: 640px) {
    header .image-container .button-container {
        flex-direction: column;
    }

    header .image-container .button {
        width: 100%;
    }

    header .image-container .content {
        padding: 24px;
    }

}

/* Mobile breakpoint (480px) */
@media (max-width: 480px) {
    header .image-container .content {
        flex-direction: column;
    }
    
    header .image-container .content h1 {
        font-size: 3rem;
    }

    header .image-container .content p {
        font-size: 22px;
    }
    
    header .image-container.lms-image {
        max-height: 355px;
    }

    header .image-container.phub-image {
        max-height: 355px;
    }

    header .image-container.inhouse-image {
        max-height: 355px;
    }

    header .image-container.reseller-image {
        max-height: 355px;
    }

    /* header .image-container.newsletter-image {
        max-height: 360px;
    } */
    header .image-container.aboutus-image {
        max-height: 420px;
    }

    header .image-container.wellbeing-image {
        max-height: 480px;
    }

    header .image-container .content .form-code {
        margin-top: 2rem;
    }

    header .image-container .content .form-code--mobile {
        display: none;
    }

    .enquire-now--mobile {
		display: flex;
	}

    /* !important overrides base .enquire-now--mobile margin */
    .homepage-image .enquire-now--mobile {
        margin-top: 30px !important;
        font-weight: 400;
    }
}