/*
 * Header + footer refresh. Loaded from header.php right after style.css (only if this file exists).
 * Scoped to the default header/footer; the green "upcoming conference" header/footer are excluded.
 * Revert: delete this file (and restore header.php from _backups/2026-09-14_header-footer/).
 */

/* ── Desktop header ─────────────────────────────────────────────── */

.header_section.header_hide:not(.upcoming_header) {
    background: #fff;
    border-bottom: 1px solid #ece6f3;
}

.header_section.header_hide.sticky:not(.upcoming_header) {
    box-shadow: 0 6px 24px rgba(42, 27, 64, 0.08);
}

.header_section.header_hide:not(.upcoming_header) .container-fluid {
    gap: 24px;
    padding-inline: clamp(16px, 2.5vw, 40px);
}

/* !important: the theme style.css / Customizer CSS set a fixed height with object-fit: cover, which crops the logo */
.header_section.header_hide:not(.upcoming_header) .logo_img a img {
    width: clamp(200px, 17vw, 290px) !important;
    height: auto !important;
    max-width: 100%;
    object-fit: contain !important;
}

.header_section.header_hide:not(.upcoming_header) div#navbarSupportedContent {
    line-height: 1.2;
}

/* Top-level menu links: quiet text with a purple underline for hover and the current page */
.header_section.header_hide:not(.upcoming_header) .custom-navbar > li > a {
    position: relative;
    padding: 34px clamp(7px, 0.65vw, 13px);
    margin-bottom: 0;
    font-family: 'Source Sans 3', 'Tajawal', sans-serif;
    font-size: clamp(14px, 0.95vw, 16px);
    font-weight: 600;
    color: #3b2a5c;
    background: transparent;
    transition: color 0.2s ease;
}

.header_section.header_hide:not(.upcoming_header) .custom-navbar > li > a::before {
    content: "";
    position: absolute;
    left: clamp(7px, 0.65vw, 13px);
    right: clamp(7px, 0.65vw, 13px);
    bottom: 24px;
    height: 2px;
    border-radius: 2px;
    background: #5b358c;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.header_section.header_hide:not(.upcoming_header) .custom-navbar > li > a:hover,
.header_section.header_hide:not(.upcoming_header) .custom-navbar > li:hover > a,
.header_section.header_hide:not(.upcoming_header) .custom-navbar > li > a:focus-visible,
.header_section.header_hide:not(.upcoming_header) .custom-navbar > li.current-menu-item > a,
.header_section.header_hide:not(.upcoming_header) .custom-navbar > li.current-menu-ancestor > a {
    color: #5b358c;
    background: transparent;
}

.header_section.header_hide:not(.upcoming_header) .custom-navbar > li > a:hover::before,
.header_section.header_hide:not(.upcoming_header) .custom-navbar > li:hover > a::before,
.header_section.header_hide:not(.upcoming_header) .custom-navbar > li > a:focus-visible::before,
.header_section.header_hide:not(.upcoming_header) .custom-navbar > li.current-menu-item > a::before,
.header_section.header_hide:not(.upcoming_header) .custom-navbar > li.current-menu-ancestor > a::before {
    transform: scaleX(1);
}

/* The Customizer's Additional CSS underlines .menu-text on hover; with the bar above that showed two underlines */
.header_section.header_hide:not(.upcoming_header) .custom-navbar li a .menu-text,
.header_section.header_hide:not(.upcoming_header) .custom-navbar li a .menu-text:hover,
.header_section.header_hide:not(.upcoming_header) .custom-navbar li a:hover .menu-text {
    text-decoration: none;
}

.header_section.header_hide:not(.upcoming_header) .custom-navbar a:focus-visible {
    outline: 2px solid #5b358c;
    outline-offset: -6px;
    border-radius: 4px;
}

.header_section.header_hide:not(.upcoming_header) .menu-item-has-children > a::after {
    margin-left: 6px;
    font-size: 9px;
    opacity: 0.7;
}

/* Dropdowns */
.header_section.header_hide:not(.upcoming_header) .custom-navbar li ul.sub-menu {
    top: calc(100% - 14px);
    min-width: 270px;
    padding: 8px;
    border: 1px solid #ece6f3;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(42, 27, 64, 0.12);
}

.header_section.header_hide:not(.upcoming_header) .custom-navbar li ul.sub-menu li a {
    display: block;
    padding: 10px 14px;
    margin: 0;
    border-radius: 6px;
    font-family: 'Source Sans 3', 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    color: #3b2a5c;
    background: transparent;
}

.header_section.header_hide:not(.upcoming_header) .custom-navbar li ul.sub-menu li a:hover,
.header_section.header_hide:not(.upcoming_header) .custom-navbar li ul.sub-menu li.current-menu-item > a {
    color: #5b358c;
    background: #f4f0f9;
}

/* Cart item: hide the "Free" label shown while the cart is empty */
.header_section.header_hide:not(.upcoming_header) .vi-wcaio-menu-cart-text.vi-wcaio-menu-cart-empty {
    display: none;
}

/* Enquiry button */
.header_section.header_hide:not(.upcoming_header) .enquiry_details button {
    padding: 11px 22px;
    border-radius: 6px;
    font-family: 'Source Sans 3', 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.header_section.header_hide:not(.upcoming_header) .enquiry_details button:hover {
    background: #43266b;
}

.header_section.header_hide:not(.upcoming_header) .enquiry_details button:focus-visible {
    outline: 2px solid #5b358c;
    outline-offset: 3px;
}

/* ── Mobile / tablet header (below 1200px) ─────────────────────── */

.responsive_sidebar:not(.upcoming_sidebar) {
    background: #fff;
    border-bottom: 1px solid #ece6f3;
}

.responsive_sidebar:not(.upcoming_sidebar) .responsive_top_flex {
    gap: 16px;
    min-height: 72px;
    padding-block: 8px;
}

.responsive_sidebar:not(.upcoming_sidebar) .logo_img a img {
    width: clamp(180px, 50vw, 260px) !important;
    height: auto !important;
    max-width: 100%;
    margin-left: 0;
    object-fit: contain !important;
}

.hc-menu-toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #e5deee;
    border-radius: 8px;
    background: #fff;
    color: #5b358c;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.hc-menu-toggle:hover {
    background: #f4f0f9;
}

.hc-menu-toggle:focus-visible,
.hc-menu-close:focus-visible {
    outline: 2px solid #5b358c;
    outline-offset: 2px;
}

/* Slide-out menu */
.responsive_sidebar:not(.upcoming_sidebar) .sidenav {
    max-width: 100vw;
    padding-top: 16px;
    background: #2a1b40;
    box-shadow: -12px 0 40px rgba(20, 10, 35, 0.35);
}

.hc-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 16px 8px auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.hc-menu-close:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Fixed content width so text doesn't reflow while the panel slides open */
.responsive_sidebar:not(.upcoming_sidebar) .sidebar_a {
    width: 350px;
    max-width: 100vw;
    margin-top: 8px;
    padding: 0 12px 32px;
}

.responsive_sidebar:not(.upcoming_sidebar) .sidenav a {
    margin: 0;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-family: 'Source Sans 3', 'Tajawal', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
}

.responsive_sidebar:not(.upcoming_sidebar) .sidenav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.responsive_sidebar:not(.upcoming_sidebar) .submenus_res {
    padding-left: 12px;
}

.responsive_sidebar:not(.upcoming_sidebar) .submenus_res ul {
    margin: 6px 0 10px;
}

.responsive_sidebar:not(.upcoming_sidebar) .submenus_res ul li a {
    padding: 9px 12px;
    border-bottom: none;
    font-size: 15.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
}

.responsive_sidebar:not(.upcoming_sidebar) .bi-chevron-down::before,
.responsive_sidebar:not(.upcoming_sidebar) .bi-chevron-up::before {
    margin-top: 4px;
    font-size: 13px;
    opacity: 0.75;
}

/* ── Footer ─────────────────────────────────────────────────────── */

footer.footer_section:not(.upcoming_footer) {
    padding-top: clamp(56px, 7vw, 88px);
    padding-bottom: 0;
    background: #45286f;
}

footer.footer_section:not(.upcoming_footer) > .container > .row {
    row-gap: 44px;
}

footer.footer_section:not(.upcoming_footer) > .container > .row > * {
    padding-inline: 12px;
}

footer.footer_section:not(.upcoming_footer) .footer_details,
footer.footer_section:not(.upcoming_footer) .address_details {
    margin-top: 0;
}

footer.footer_section:not(.upcoming_footer) img.footer_logo {
    width: clamp(220px, 19vw, 280px);
    margin-left: 0;
}

footer.footer_section:not(.upcoming_footer) .social_media {
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
}

footer.footer_section:not(.upcoming_footer) .social_media a {
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    transition: background-color 0.2s ease;
}

footer.footer_section:not(.upcoming_footer) .social_media a:hover {
    background: rgba(255, 255, 255, 0.2);
}

footer.footer_section:not(.upcoming_footer) .social_media a:focus-visible,
footer.footer_section:not(.upcoming_footer) .footer_details ul li a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

footer.footer_section:not(.upcoming_footer) .social_media a img {
    width: 18px;
}

footer.footer_section:not(.upcoming_footer) .footer_details h4,
footer.footer_section:not(.upcoming_footer) .address_details h4 {
    margin: 0 0 20px;
    font-family: 'Libre Baskerville', 'Tajawal', serif;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}

footer.footer_section:not(.upcoming_footer) h4.footer-head-ml,
footer.footer_section:not(.upcoming_footer) ul.footer-ml-1,
footer.footer_section:not(.upcoming_footer) ul.footer-ml-2 {
    margin-left: 0;
}

footer.footer_section:not(.upcoming_footer) .footer_details ul,
footer.footer_section:not(.upcoming_footer) .address_details ul {
    margin: 0;
    padding: 0;
}

footer.footer_section:not(.upcoming_footer) .footer_details ul li {
    padding-bottom: 12px;
    line-height: 1.45;
}

footer.footer_section:not(.upcoming_footer) .footer_details ul li a {
    margin-left: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    text-underline-offset: 4px;
    transition: color 0.2s ease;
}

footer.footer_section:not(.upcoming_footer) .footer_details ul li a:hover {
    margin-left: 0;
    color: #fff;
    text-decoration: underline;
}

/* Plain link lists: the chevron before every link is removed */
footer.footer_section:not(.upcoming_footer) .footer_details ul li a .bi-chevron-right {
    display: none;
}

footer.footer_section:not(.upcoming_footer) .address_details ul li {
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 16px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
}

footer.footer_section:not(.upcoming_footer) .address_details ul li i {
    flex: none;
    width: 18px;
    margin-top: 3px;
    text-align: center;
    color: #fff;
    opacity: 0.85;
}

footer.footer_section:not(.upcoming_footer) .footer_bottom {
    margin-top: clamp(40px, 5vw, 64px);
    padding-block: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
}

footer.footer_section:not(.upcoming_footer) .footer_bottom p {
    margin: 0;
}

/* Column widths */
@media (min-width: 1200px) {
    footer.footer_section:not(.upcoming_footer) .row > .col-md-4 {
        width: 28%;
    }

    footer.footer_section:not(.upcoming_footer) .row > .col-md-3 {
        width: 24%;
    }

    footer.footer_section:not(.upcoming_footer) .row > .col-md-2 {
        width: 24%;
    }
}

@media (min-width: 601px) and (max-width: 1199.98px) {
    footer.footer_section:not(.upcoming_footer) .row > .col-md-4,
    footer.footer_section:not(.upcoming_footer) .row > .col-md-3,
    footer.footer_section:not(.upcoming_footer) .row > .col-md-2 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (max-width: 600px) {
    footer.footer_section:not(.upcoming_footer) .row > .col-md-4,
    footer.footer_section:not(.upcoming_footer) .row > .col-md-3,
    footer.footer_section:not(.upcoming_footer) .row > .col-md-2 {
        width: 100%;
    }

    /* Keep the two "Useful links" lists side by side */
    footer.footer_section:not(.upcoming_footer) .footer_details .row > .col-6 {
        width: 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header_section.header_hide:not(.upcoming_header) .custom-navbar > li > a::before {
        transition: none;
    }
}