/**
 * XPDEL Navigation Styles
 * Extracted from header.php inline <style> block.
 * Load this file in every page's <head> — BEFORE style-*.css so it can be overridden.
 */

/* ── Reset: ensure no browser-default body margin creates a gap above nav ── */
html, body {
    margin: 0;
    padding: 0;
}

/* ── Nav link base size ──────────────────────────────────────────────────── */
body .MainNavigation .nav-item a {
    font-size: 15px !important;
}
html body .MainNavigation .nav-item a {
    font-size: 16px !important;
}
html body .MainNavigation .nav-item .dropdown-menu a {
    font-size: 15px !important;
    font-weight: 500;
}

/* ── Nav item spacing ────────────────────────────────────────────────────── */
.MainNavigation li {
    margin-right: 10px !important;
}
body .MainNavigation {
    padding: 10px 0;
}

/* ── Country dropdown ───────────────────────────────────────────────────── */
.countryDropdown button {
    font-weight: 600;
    font-size: 13px;
}
.countryDropdown .dropdown {
    width: auto;
}

/* ── Resources dropdown min-width ──────────────────────────────────────── */
body .nav-item.dropdown.show .dropdown-menu.Resources_menu {
    min-width: 130px !important;
}
body .nav-item.dropdown.show .dropdown-menu.Resources_menu a {
    font-size: 13px !important;
}

/* ── General dropdown min-width ─────────────────────────────────────────── */
body .nav-item.dropdown.show .dropdown-menu {
    min-width: 300px !important;
}

/* ── "More" link hover ──────────────────────────────────────────────────── */
body .more a {
    cursor: pointer !important;
}
body .more a:hover {
    color: #2e8134 !important;
}

/* ── Select color ───────────────────────────────────────────────────────── */
select {
    color: #646464 !important;
}

/* ── Responsive: mobile nav drawer ─────────────────────────────────────── */
@media only screen and (max-width: 767px) {
    .MainNavigation .navbar-nav {
        width: 100%;
        height: calc(100vh - 50px);
        overflow-x: auto;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .MainNavigation .navbar-nav {
        width: 100%;
        height: calc(100vh - 50px);
        overflow-x: auto;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .MainNavigation .navbar-nav {
        height: auto !important;
    }
}

/* ── Responsive: col resets ─────────────────────────────────────────────── */
@media only screen and (max-width: 992px) {
    .MainNavigation .col-lg-10.col-8 {
        max-width: 100%;
        flex: 0 0 100%;
    }
    .MainNavigation .col-lg-9 {
        max-width: 100%;
        flex: 0 0 100%;
    }
}

/* ── iFrame height on mobile ────────────────────────────────────────────── */
@media only screen and (max-width: 992px) {
    #myiFrame {
        height: 800px !important;
    }
}

/* ── Tablet landscape adjustments ──────────────────────────────────────── */
@media only screen and (min-width: 400px) and (max-width: 992px) and (orientation: landscape) {
    nav.MainNavigation .col-lg-9 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }
}
@media only screen and (min-width: 820px) and (max-width: 1150px) and (orientation: landscape) {
    .MainNavigation .col-lg-2,
    .MainNavigation .col-lg-9 {
        flex: 0 0 73%;
        max-width: 73%;
    }
    .MainNavigation .col-lg-9 {
        width: 75% !important;
        max-width: 75% !important;
        flex: 0 0 75% !important;
    }
    .MainNavigation .navbar-nav {
        overflow: visible !important;
    }
}

/* ── Mid-range desktop (1024–1366px) ────────────────────────────────────── */
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
    .MainNavigation li {
        margin-right: 5px !important;
    }
    body .MainNavigation .nav-item a {
        font-size: 13px !important;
    }
    .countryDropdown button {
        font-size: 12px;
    }
    h2.prcustum {
        margin-top: 10px !important;
    }
}

/* ── Large desktop (1366px+) ────────────────────────────────────────────── */
@media only screen and (min-width: 1366px) {
    .MainNavigation li {
        margin-right: 10px !important;
    }
}

/* ── Hamburger toggler position fixes ──────────────────────────────────── */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .MainNavigation .navbar-toggler {
        position: absolute;
        right: 0;
        top: -36px;
    }
}
@media only screen and (min-width: 320px) and (max-width: 992px) and (orientation: landscape) {
    .MainNavigation .navbar-toggler {
        position: absolute;
        right: -60px;
        top: -27px;
        transform: translateY(-50%);
    }
}
@media only screen and (min-width: 767px) and (max-width: 1180px) and (orientation: landscape) {
    .MainNavigation .col-lg-2,
    .MainNavigation .col-lg-9 {
        flex: 0 0 15%;
        max-width: 15%;
    }
    html body .MainNavigation .nav-item a {
        font-size: 12px !important;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1100px) and (orientation: landscape) {
    html body .MainNavigation .nav-item a {
        font-size: 12px !important;
    }
}
