/*
 * ITG Brands — Imperial-style Nav + Footer
 * Source values extracted directly from Imperial Brands clientlibs CSS/JS.
 *
 * Colour palette (Imperial, adapted for ITG):
 *   Primary orange : #ff7321
 *   Dark brown/text: #453628
 *   Tan background : #f7f5f3
 *   Divider        : #dad6d4
 *   White          : #ffffff
 */

/* ============================================================
   RESET / SCOPE
   ============================================================ */
#desktop-nav,
#desktop-nav *,
#mobile-nav,
#mobile-nav *,
#itg-mobile-bar,
#itg-mobile-bar *,
.itg-footer,
.itg-footer * {
    box-sizing: border-box;
}

/* ============================================================
   DESKTOP NAV — base (pill shape, floating)
   Mirrors: header #desktop-nav { ... }
   ============================================================ */
#desktop-nav {
    background: #ffffff;
    width: calc(100% - 40px);
    max-width: 1280px;
    margin: 0 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 13px 25px;

    /* pill */
    border-radius: 60px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);

    /* position */
    position: fixed;
    top: -130px;          /* hidden on load; JS adds .is-visible */
    left: 50%;
    transform: translate(calc(-50% - 20px), 0);
    z-index: 10000;

    transition: top 0.4s ease, border-radius 0.4s ease;
}

/* Visible on load — JS adds this class */
#desktop-nav.is-visible {
    top: 24px;
    transition: top 0.4s ease, border-radius 0.4s ease;
}

/* Scrolled state: snaps to top, keeps bottom radius */
#desktop-nav.scrolling:not(.open) {
    top: 0 !important;
    border-radius: 0 0 28px 28px;
    transition: top 0.2s ease, border-radius 0.2s ease !important;
}

/* Mega menu open: top flat, bottom radius */
#desktop-nav.open {
    border-radius: 28px 28px 0 0;
    transition: border-radius 0.4s ease;
}

/* ============================================================
   NAV INNER LAYOUT
   ============================================================ */
.itg-nav-inner {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0;
}

/* Logo */
.itg-nav-logo {
    flex: 0 0 auto;
    margin-right: auto;
}

.itg-nav-logo img {
    width: 130px;
    height: auto;
    display: block;
}

/* Main nav panel */
.itg-mainnavpanel {
    flex: 0 0 auto;
    margin-right: 24px;
}

/* Nav list */
.itg-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    justify-content: flex-end;
}

.itg-nav-item {
    position: relative;
    margin-right: 20px;
}

.itg-nav-item:last-child {
    margin-right: 0;
}

.itg-nav-link {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #ff7321;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
    white-space: nowrap;
}

.itg-nav-link:hover {
    border-bottom-color: #ac9b8d;
    color: #ff7321;
}

.itg-nav-item--active .itg-nav-link {
    border-bottom-color: #ff7321;
}

/* Contact CTA button */
.itg-nav-cta {
    flex: 0 0 auto;
}

.itg-nav-contact-btn {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #ff7321;
    padding: 8px 18px;
    border: 1px solid #ff7321;
    border-radius: 35px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
}

.itg-nav-contact-btn:hover {
    background-color: #ff7321;
    color: #ffffff;
}

/* ============================================================
   MEGA MENU PANELS
   Mirrors: header #desktop-nav > .mainnavpanel > ... > .submenupanel
   ============================================================ */
.itg-submenupanel {
    position: fixed;
    background-color: #f7f5f3;
    max-width: 1280px;
    width: 100%;
    /* top is set relative to nav height (73px from Imperial) */
    top: 73px;
    left: 0;
    padding: 16px 52px 30px;
    border-radius: 0 0 28px 28px;
    z-index: 9999;
}

.itg-submenu-inner {
    display: flex;
    gap: 0;
}

/* Each column: 25% width like Imperial */
.itg-submenu-col {
    width: 25%;
}

/* Col 1: description */
.itg-submenu-col--desc {
    padding-right: 50px;
}

.itg-submenu-col--desc h4 {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 24px;
    color: #453628;
}

.itg-submenu-col--desc p {
    font-size: 12px;
    color: #453628;
    line-height: 1.6;
}

.itg-submenu-col--desc .itg-submenu-cta,
.itg-submenu-col--image .itg-submenu-cta {
    display: inline-block;
    margin-top: 40px;
    font-size: 1em;
    color: #453628;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    padding-right: 45px;
    transition: padding-right 0.4s ease;
}

.itg-submenu-col--desc .itg-submenu-cta::after,
.itg-submenu-col--image .itg-submenu-cta::after {
    content: '';
    height: 15px;
    width: 30px;
    display: inline-block;
    position: absolute;
    right: 0;
    top: calc(50% - 8px);
    /* Arrow icon — inline SVG fallback (chevron right in orange) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7321' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: right 0.4s ease;
}

.itg-submenu-col--desc .itg-submenu-cta:hover::after,
.itg-submenu-col--image .itg-submenu-cta:hover::after {
    right: -10px;
}

/* Col 2: links */
.itg-submenu-col--links {
    border-left: 1px solid rgba(172, 155, 141, 0.35);
    border-right: 1px solid rgba(172, 155, 141, 0.35);
    width: 50%; /* links col takes more space */
}

.itg-submenu-col--links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.itg-submenu-col--links li {
    margin-top: 16px;
}

.itg-submenu-col--links a {
    font-family: inherit;
    text-decoration: none;
    color: #453628;
    font-weight: 300;
    display: block;
    padding: 8px 32px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.itg-submenu-col--links a:hover {
    background-color: #ff7321;
    color: #ffffff;
}

/* Col 3: image card */
.itg-submenu-col--image {
    position: relative;
    margin: auto 0 auto auto;
    width: 25%;
}

.itg-submenu-image-card {
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    padding: 0 14px 30px;
}

.itg-submenu-image-card img {
    display: block;
    width: calc(100% + 28px);
    margin: 0 -14px 16px;
    border-radius: 0;
    height: 140px;
    object-fit: cover;
}

.itg-submenu-image-card p {
    font-weight: 700;
    font-family: inherit;
    margin: 0 0 8px;
    font-size: 13px;
    color: #453628;
}

/* ============================================================
   MOBILE BAR
   ============================================================ */
#itg-mobile-bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    background: #ffffff;
    padding: 12px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    align-items: center;
    justify-content: space-between;
}

.itg-mobile-logo img {
    width: 110px;
    height: auto;
}

/* Hamburger */
.itg-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    outline: none;
}

.itg-hamburger span {
    display: block;
    width: 28px;
    height: 2px;
    background-color: #ff7321;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger open state */
#itg-mobile-bar.menu-open .itg-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
#itg-mobile-bar.menu-open .itg-hamburger span:nth-child(2) {
    opacity: 0;
}
#itg-mobile-bar.menu-open .itg-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
#mobile-nav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 10000;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    padding: 0;
}

#mobile-nav.open {
    transform: translateX(0);
}

/* Body lock */
body.lock {
    overflow: hidden;
}

/* Drawer header */
.itg-mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #dad6d4;
}

.itg-mobile-close {
    background: none;
    border: none;
    font-size: 32px;
    color: #ff7321;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    outline: none;
}

/* Mobile menu items */
.itg-mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.itg-mobile-menu li {
    border-bottom: 1px solid #dad6d4;
    position: relative;
}

.itg-mobile-menu li a {
    display: block;
    padding: 20px;
    font-size: 1.1em;
    font-weight: 400;
    color: #ff7321;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.itg-mobile-menu li a:hover {
    background-color: #f7f5f3;
}

/* Sub-menu toggle button (inserted by JS) */
.openSubMenu {
    display: none;
    border: 0;
    position: absolute;
    background-color: #ffffff;
    outline: 0;
    border-left: 1px solid #dad6d4;
    right: 0;
    top: 0;
    height: 62px;
    width: 60px;
    font-size: 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.openSubMenu::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-right: 2px solid #ff7321;
    border-bottom: 2px solid #ff7321;
    transform: translate(-50%, -60%) rotate(-45deg);
    transition: transform 0.3s ease;
}

.openSubMenu.active::after {
    transform: translate(-50%, -40%) rotate(45deg);
}

/* Sub-menu slide panel */
.itg-mobile-menu .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    position: fixed;
    top: 60px;
    left: 100%;
    width: 100%;
    height: calc(100vh - 60px);
    background: #ffffff;
    overflow-y: auto;
    z-index: 20;
    transition: left 0.4s ease;
}

.itg-mobile-menu .sub-menu.opened {
    left: 0;
}

/* Back button (inserted by JS) */
.submenu-back button {
    width: 100%;
    text-align: left;
    border: 0;
    padding: 20px 20px 20px 44px;
    font-family: inherit;
    font-weight: 400;
    color: #ff7321;
    background-color: #ffffff;
    border-bottom: 1px solid #dad6d4;
    font-size: 1.1em;
    cursor: pointer;
    outline: 0;
    /* Chevron left icon inline */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7321' stroke-width='2'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: 16px center;
}

/* Drawer footer */
.itg-mobile-drawer-footer {
    padding: 24px 20px;
    border-top: 1px solid #dad6d4;
}

.itg-mobile-contact-btn {
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid #ff7321;
    border-radius: 35px;
    color: #ff7321;
    font-weight: 600;
    text-decoration: none;
    font-size: 1em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.itg-mobile-contact-btn:hover {
    background-color: #ff7321;
    color: #ffffff;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media only screen and (max-width: 1099px) {
    #desktop-nav {
        display: none !important;
    }
    #itg-mobile-bar {
        display: flex;
    }
    /* Push page content down below fixed mobile bar */
    body {
        padding-top: 60px;
    }
}

@media only screen and (min-width: 1100px) {
    #itg-mobile-bar,
    #mobile-nav {
        display: none !important;
    }
}

/* ============================================================
   FOOTER — Imperial-style layout
   ============================================================ */
.itg-footer {
    margin-top: 80px;
}

/* Shared inner container */
.itg-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

/* ---- Row 1: Orange share bar ---- */
.itg-footer-sharebar {
    background: #ff7321;
    color: #ffffff;
    text-align: center;
    padding: 10px 20px;
}

.itg-footer-sharebar-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    gap: 20px;
    flex-wrap: wrap;
}

.itg-footer-sharebar p {
    margin: 0;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
}

/* "Share this page" pipe after text */
.itg-footer-sharebar p::after {
    content: '|';
    margin-left: 15px;
}

.itg-share-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 25px;
}

.itg-share-list li a {
    display: block;
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999px;
}

.itg-share-linkedin a  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z'/%3E%3C/svg%3E"); }
.itg-share-facebook a  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E"); }
.itg-share-twitter a   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.737-8.835L1.258 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); }
.itg-share-email a     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z'/%3E%3C/svg%3E"); }

/* ---- Row 2: Connect + Contact (tan bg) ---- */
.itg-footer-connect-row {
    background: #f7f5f3;
}

.itg-footer-connect-row .itg-footer-inner {
    padding-top: 40px;
    padding-bottom: 40px;
    align-items: flex-start;
}

.itg-footer-connect,
.itg-footer-contact {
    width: 50%;
}

.itg-footer-connect h3,
.itg-footer-contact h3 {
    font-size: 2.125rem;
    margin-bottom: 15px;
    color: #453628;
}

.itg-footer-connect p,
.itg-footer-contact p {
    font-size: 1.125rem;
    color: #453628;
    margin-bottom: 15px;
}

/* Social icons (follow) */
.itg-footer-socials {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.itg-social-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #453628;
    font-weight: 600;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 1em;
}

.itg-social-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.itg-social-icon--linkedin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23453628' d='M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z'/%3E%3C/svg%3E");
}

/* Contact CTA arrow button */
.itg-footer-cta-btn {
    display: inline-block;
    font-size: 1em;
    color: #453628;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    padding-right: 45px;
    cursor: pointer;
    transition: padding-right 0.4s ease;
}

.itg-footer-cta-btn::after {
    content: '';
    height: 15px;
    width: 30px;
    display: inline-block;
    position: absolute;
    right: 0;
    top: calc(50% - 8px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7321' stroke-width='2'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: right 0.4s ease;
}

.itg-footer-cta-btn:hover::after {
    right: -10px;
}

/* ---- Row 3: Main info columns (white bg) ---- */
.itg-footer-main-row {
    background: #ffffff;
}

.itg-footer-main-row .itg-footer-inner {
    padding-top: 40px;
    padding-bottom: 40px;
    flex-wrap: nowrap;
    gap: 60px;
}

.itg-footer-col {
    flex: 1;
}

.itg-footer-col--brand img {
    width: 140px;
    height: auto;
    display: block;
    margin-bottom: 16px;
}

.itg-footer-col--brand p,
.itg-footer-col--brand a {
    font-size: 0.875rem;
    color: #453628;
    line-height: 1.7;
    text-decoration: none;
    display: block;
}

.itg-footer-col--brand a:hover {
    color: #ff7321;
}

.itg-footer-col--links h3,
.itg-footer-col--legal h3 {
    font-weight: 600;
    font-size: 1.125rem;
    color: #ff7321;
    margin-bottom: 20px;
    line-height: 1.5;
}

.itg-footer-col--links ul,
.itg-footer-col--legal ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.itg-footer-col--links li,
.itg-footer-col--legal li {
    padding-bottom: 5px;
    margin-bottom: 5px;
    position: relative;
}

.itg-footer-col--links a,
.itg-footer-col--legal a {
    text-decoration: none;
    color: #453628;
    font-size: 0.875rem;
    line-height: 1.7;
    display: inline-block;
    position: relative;
}

/* Underline hover animation */
.itg-footer-col--links a::after,
.itg-footer-col--legal a::after {
    content: '';
    height: 2px;
    display: block;
    bottom: -2px;
    width: 0;
    position: relative;
    background-color: #ff7321;
    transition: width 0.4s ease;
}

.itg-footer-col--links li:hover a::after,
.itg-footer-col--legal li:hover a::after {
    width: 100%;
}

/* ---- Bottom bar ---- */
.itg-footer-subbar {
    background: #ffffff;
    border-top: 1px solid #dad6d4;
}

.itg-footer-subbar .itg-footer-inner {
    padding-top: 16px;
    padding-bottom: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.itg-footer-legal-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
    flex-wrap: wrap;
}

.itg-footer-legal-links a {
    font-size: 0.75rem;
    color: #453628;
    text-decoration: none;
    transition: color 0.2s ease;
}

.itg-footer-legal-links a:hover {
    color: #ff7321;
}

.itg-footer-privacy-choices a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #453628;
    text-decoration: none;
    cursor: pointer;
}

.itg-footer-privacy-choices img {
    height: 14px;
    width: auto;
}

.itg-footer-copyright {
    font-size: 0.75rem;
    color: #453628;
    margin: 0;
}

/* ============================================================
   FOOTER RESPONSIVE
   ============================================================ */
@media only screen and (max-width: 1080px) {
    .itg-footer-main-row .itg-footer-inner {
        flex-direction: column;
        gap: 30px;
    }
    .itg-footer-col {
        width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    .itg-footer {
        margin-top: 30px;
    }
    .itg-footer-inner {
        padding: 0 20px;
    }
    .itg-footer-connect-row .itg-footer-inner {
        flex-direction: column;
    }
    .itg-footer-connect,
    .itg-footer-contact {
        width: 100%;
    }
    .itg-footer-connect h3,
    .itg-footer-contact h3 {
        font-size: 1.5rem;
    }
    .itg-footer-sharebar-inner {
        flex-direction: column;
        gap: 10px;
    }
    .itg-footer-sharebar p::after {
        display: none;
    }
    .itg-footer-subbar .itg-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   CESIS OVERRIDES
   Hide the original Cesis header/footer elements we're replacing
   ============================================================ */
#cesis_header .header_main,
#cesis_header .header_mobile,
#cesis_header > .header_main,
#cesis_header > .header_mobile {
    display: none !important;
}

/* Suppress Cesis footer widget areas (footer-main.php replaces them) */
#cesis_colophon .footer_main,
#cesis_colophon .footer_sub {
    display: none !important;
}

/* Remove Cesis sticky header padding interference */
body.cesis_sticky {
    padding-top: 0 !important;
}

/* ============================================================
   BUG FIX v3 PATCH
   ============================================================ */

/* Fix 1: Header container background — make transparent so slider
   shows through. #desktop-nav has its own white background (correct).
   The container elements must NOT block the slider behind them.     */
#header_container,
#cesis_header,
body #wrap_all #header_container,
body #wrap_all #header_container header {
    background: transparent !important;
    /* Allow clicks/hover to pass through to slider underneath */
    pointer-events: none;
}

/* But keep the nav pill itself fully interactive */
#desktop-nav,
#itg-mobile-bar,
#mobile-nav {
    pointer-events: auto;
}

/* Fix 2: Submenu gap — the panel must be flush against the nav with
   no gap the mouse can slip through.
   
   How it works: we add a transparent pseudo-element bridge above the
   panel that catches the mouse as it travels from the nav into the panel.
   We also pull the panel up by the nav's actual rendered height so it
   sits flush rather than floating below it.

   The nav when .is-visible: top: 24px, padding: 13px top+bottom,
   logo img ~40px tall = roughly 66px total height.
   When .scrolling: top: 0, same padding = ~42px.
   We set top dynamically via the panel's positioning.              */

/* ============================================================
   BUG FIX PATCH — v3.1
   ============================================================ */

/* ── Fix 1: Header container transparency ────────────────────
   The Cesis #cesis_header and #header_container elements were
   getting a white background from Cesis's own CSS, blocking the
   Revolution Slider behind the nav. We only want #desktop-nav
   itself to have a background — everything wrapping it must be
   transparent and non-blocking.                               */

#header_container,
#cesis_header.top-header {
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;   /* clicks/hover pass through to slider */
}

/* Restore interactivity on our actual nav elements */
#desktop-nav,
#itg-mobile-bar,
#mobile-nav {
    pointer-events: auto;
}

/* ── Fix 2: Submenu gap ──────────────────────────────────────
   The panel was positioned at top: 73px, leaving a gap between
   the bottom of the nav pill and the top of the panel. As the
   mouse crosses this gap it fires mouseleave on #desktop-nav,
   collapsing the panel.

   Solution: position the panel at top: 0, add a transparent
   padding-top equal to the nav's height. The panel element now
   covers the full area from 0 to its bottom — there is no gap
   for the mouse to slip through. The visible content sits inside
   .itg-submenu-inner which gets the background and border-radius.
                                                                */

.itg-submenupanel {
    top: 0 !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    /* Transparent bridge from top of screen to where panel content starts.
       Nav pill: top 24px + ~66px height = bottom at ~90px.             */
    padding-top: 90px !important;
}

/* Move background + padding + radius to the inner content container */
.itg-submenu-inner {
    background-color: #f7f5f3;
    border-radius: 0 0 28px 28px;
    padding: 16px 52px 30px;
    /* Keep flex layout */
    display: flex;
    gap: 0;
}

/* When scrolled: nav is at top: 0, height ~66px, so bridge is shorter */
#desktop-nav.scrolling .itg-submenupanel {
    padding-top: 66px !important;
}