/* ==========================================================================
   Custom header overrides (JDIOWA)
   Scoped to .rs-header-area / .offcanvas-area so the rest of the site's
   Space Grotesk / Inter usage (DESIGN.md "Industrial Synergy") is untouched.
   ========================================================================== */

/* ---- Fonts: Space Grotesk for heading-weight text, Inter for body/UI/nav ---- */
.rs-header-area,
.offcanvas-area {
    --jd-font-heading: 'Space Grotesk', sans-serif;
    --jd-font-body: 'Inter', sans-serif;
}

.main-menu li a,
.main-menu .submenu li a,
.rs-header-btn a,
.offcanvas-contact a,
.offcanvas-about p {
    font-family: var(--jd-font-body);
}

.offcanvas-title-meta {
    font-family: var(--jd-font-heading);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
   Main nav: header carries 8 top-level items, so it's tightened up
   (smaller padding/font, smaller logo) to fit comfortably from the
   theme's normal desktop breakpoint (1200px) onward. Below that,
   the hamburger + offcanvas menu takes over as usual.
--------------------------------------------------------------- */
.rs-header-eight .rs-header-inner {
    padding-inline-start: 24px;
    padding-inline-end: 24px;
    gap: 12px;
}

@media only screen and (max-width: 1199px) {
    .rs-header-eight .rs-header-inner {
        padding-inline-start: 15px;
        padding-inline-end: 15px;
    }
}

.rs-header-eight .rs-header-right {
    gap: 14px;
}

/* The theme only ever constrains this logo's size below 480px; between
   that and the nav breakpoint it's unbounded, so it's given an explicit
   height at every tier instead of relying on the theme's one-off rule. */
.rs-header-eight .rs-header-logo img {
    height: 44px;
    width: auto;
}

@media only screen and (min-width: 576px) {
    .rs-header-eight .rs-header-logo img {
        height: 52px;
    }
}

@media only screen and (min-width: 1200px) {
    .rs-header-eight .rs-header-logo img {
        height: 60px;
    }
}

@media only screen and (min-width: 1400px) {
    .rs-header-eight .rs-header-logo img {
        height: 68px;
    }
}

/* Direct-child selectors so these only touch the 8 top-level nav
   links - ".main-menu li a" would also reach into the dropdown
   submenus and squash their own type scale/padding. */
.rs-header-eight .main-menu > ul > li > a {
    padding: 28px 8px;
    font-size: 14px;
}

.rs-header-eight .rs-sticky .main-menu > ul > li > a {
    padding: 20px 8px;
}

@media only screen and (min-width: 1400px) {
    .rs-header-eight .main-menu > ul > li > a {
        padding: 34px 14px;
        font-size: 16px;
    }

    .rs-header-eight .rs-sticky .main-menu > ul > li > a {
        padding: 26px 14px;
    }
}

/* ---------------------------------------------------------------
   Dropdown submenus: the theme's default is a plain white box with
   hairline dividers. Softened to match the rest of the design
   system - rounded corners, a subtle peach hover tint, warmer
   divider color instead of a stark gray line.
--------------------------------------------------------------- */
.rs-header-eight .main-menu .submenu {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #f0e0d8;
    box-shadow: 0 16px 32px -12px rgba(38, 25, 20, 0.2);
}

.rs-header-eight .main-menu .submenu li:not(:last-child) {
    border-bottom: 1px solid #f0e0d8;
}

.rs-header-eight .main-menu .submenu li a {
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
}

.rs-header-eight .main-menu .submenu li:hover > a {
    background: rgba(162, 58, 0, 0.06);
}

.rs-header-eight .rs-header-menu {
    display: none;
}

.rs-header-eight .rs-header-hamburger {
    display: block;
}

@media only screen and (min-width: 1200px) {
    .rs-header-eight .rs-header-menu {
        display: flex;
    }

    .rs-header-eight .rs-header-hamburger {
        display: none;
    }
}

/* ---------------------------------------------------------------
   Header CTA: "Become a Member" is the one persistent, primary
   action - visible at every breakpoint next to the nav/hamburger.
   (Overrides the theme's default which hides .rs-header-btn below
   1366px - we want this one to always show.)
--------------------------------------------------------------- */
.rs-header-eight .rs-header-btn {
    display: flex !important;
    align-items: center;
}

.rs-header-eight .rs-header-btn .rs-btn {
    height: auto;
    padding: 10px 16px;
    font-size: 13px;
    border-radius: 8px;
}

@media only screen and (min-width: 1400px) {
    .rs-header-eight .rs-header-btn .rs-btn {
        padding: 13px 22px;
        font-size: 15px;
    }
}

.rs-header-eight .rs-header-hamburger {
    flex-shrink: 0;
}

@media only screen and (max-width: 575px) {
    .rs-header-eight .rs-header-inner {
        gap: 8px;
    }

    .rs-header-eight .rs-header-right {
        gap: 8px;
    }

    .rs-header-eight .rs-header-btn .rs-btn-member {
        padding: 8px 12px;
        font-size: 12px;
        white-space: nowrap;
    }

    .rs-header-eight .rs-header-btn .rs-btn-member .icon-box {
        display: none;
    }
}

@media only screen and (max-width: 360px) {
    .rs-header-eight .rs-header-logo img {
        height: 36px;
    }

    .rs-header-eight .rs-header-btn .rs-btn-member {
        padding: 6px 10px;
        font-size: 11px;
    }
}