/* ============================================================
   RAEES IMPORT & EXPORT
   HEADER / NAVBAR
   File: /public_html/assets/css/layout/header.css
   ============================================================ */


/* ============================================================
   01. HEADER ROOT
   ============================================================ */

.site-header {
    position: relative;
    z-index: 1000;

    width: 100%;

    background: #ffffff;
}

.site-header *,
.site-header *::before,
.site-header *::after {
    box-sizing: border-box;
}


/* ============================================================
   02. SKIP LINK
   ============================================================ */

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 99999;

    padding: 10px 16px;

    border-radius: 8px;

    color: #ffffff !important;
    background: #171410;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    transform: translateY(-150%);
    opacity: 0;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    opacity: 1;
}


/* ============================================================
   03. TOPBAR
   ============================================================ */

.topbar,
.site-topbar {
    position: relative;

    width: 100%;
    min-height: 38px;

    color: rgba(255, 255, 255, 0.88);
    background: #171410;

    font-size: 12px;
}

.topbar .container,
.site-topbar .container {
    height: 100%;
}

.topbar-inner {
    display: flex;

    min-height: 38px;

    align-items: center;
    justify-content: space-between;

    gap: 24px;
}

.topbar-left,
.topbar-right {
    display: flex;

    align-items: center;

    gap: 20px;
}

.topbar a,
.site-topbar a {
    color: rgba(255, 255, 255, 0.86);

    text-decoration: none;

    transition: color 0.2s ease;
}

.topbar a:hover,
.site-topbar a:hover {
    color: #d3ad72;
}

.topbar i,
.site-topbar i {
    margin-right: 6px;

    color: #c79a58;
}


/* ============================================================
   04. MAIN NAVBAR
   ============================================================ */

.main-navbar {
    position: relative;

    width: 100%;
    height: auto;
    min-height: 82px;

    border-bottom: 1px solid rgba(30, 25, 19, 0.07);

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 5px 25px rgba(24, 20, 15, 0.035);
}

.main-navbar > .container {
    position: relative;
}

.navbar-inner {
    position: relative;

    display: flex;

    width: 100%;
    min-height: 82px;

    align-items: center;
    justify-content: space-between;

    gap: 28px;
}


/* ============================================================
   05. BRAND
   ============================================================ */

.main-navbar .navbar-brand {
    display: inline-flex;

    flex: 0 0 auto;

    align-items: center;

    gap: 11px;

    margin: 0;
    padding: 0;

    color: #171410;

    text-decoration: none;
}

.navbar-brand-mark {
    position: relative;

    display: grid;

    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    place-items: center;

    border: 1px solid rgba(160, 111, 46, 0.35);

    color: #171410;
    background: #fbf7f0;

    font-family: "Playfair Display", Georgia, serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 1;
}

.navbar-brand-mark::before {
    content: "";

    position: absolute;
    inset: 4px;

    border: 1px solid rgba(178, 132, 70, 0.22);

    transform: rotate(8deg);
}

.navbar-brand-content {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.navbar-brand-name {
    color: #171410;

    font-family: "Playfair Display", Georgia, serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.05;

    letter-spacing: 0.08em;
}

.navbar-brand-subtitle {
    margin-top: 4px;

    color: #8a765d;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.17em;
    text-transform: uppercase;
}


/* ============================================================
   06. NAVBAR MENU
   ============================================================ */

.navbar-menu {
    position: static;

    display: flex;

    flex: 1 1 auto;

    align-items: center;
    justify-content: center;

    min-width: 0;
}

.main-navbar .navbar-nav {
    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: center;

    gap: 4px;

    width: auto;

    margin: 0;
    padding: 0;

    list-style: none;
}

.main-navbar .nav-item {
    position: relative;

    display: flex;

    align-items: center;

    margin: 0;
    padding: 0;
}


/* ============================================================
   07. NAV LINKS
   ============================================================ */

.main-navbar .nav-link {
    position: relative;

    display: inline-flex;

    min-height: 42px;

    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 10px 10px;

    border: 0;

    color: #37312a;
    background: transparent;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.main-navbar .nav-link::after {
    content: "";

    position: absolute;

    right: 10px;
    bottom: 3px;
    left: 10px;

    height: 1px;

    background: #a87534;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.25s ease;
}

.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
    color: #98682c;
}

.main-navbar .nav-link:hover::after,
.main-navbar .nav-link.active::after {
    transform: scaleX(1);
}


/* ============================================================
   08. DROPDOWN TOGGLE
   ============================================================ */

.nav-dropdown-toggle {
    appearance: none;
    -webkit-appearance: none;
}

.nav-dropdown-toggle > i {
    margin-left: 1px;

    font-size: 9px;

    transition: transform 0.25s ease;
}

.nav-dropdown.open .nav-dropdown-toggle > i,
.nav-dropdown.is-open .nav-dropdown-toggle > i {
    transform: rotate(180deg);
}


/* ============================================================
   09. PRODUCTS DROPDOWN
   ============================================================ */

.nav-dropdown-menu {
    position: absolute;

    top: calc(100% + 14px);
    left: 50%;
    z-index: 1200;

    display: block;

    width: 330px;

    margin: 0;
    padding: 10px;

    visibility: hidden;

    border: 1px solid rgba(26, 22, 17, 0.08);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.99);

    box-shadow:
        0 24px 60px rgba(23, 19, 14, 0.14);

    opacity: 0;

    transform:
        translateX(-50%)
        translateY(8px);

    pointer-events: none;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease;
}

.nav-dropdown-menu::before {
    content: "";

    position: absolute;

    top: -15px;
    right: 0;
    left: 0;

    height: 15px;
}

.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown:focus-within > .nav-dropdown-menu,
.nav-dropdown.open > .nav-dropdown-menu,
.nav-dropdown.is-open > .nav-dropdown-menu {
    visibility: visible;

    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);

    pointer-events: auto;
}


/* ============================================================
   10. DROPDOWN LINKS
   ============================================================ */

.nav-dropdown-link {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 11px;

    border-radius: 12px;

    color: #29241e;

    text-decoration: none;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.nav-dropdown-link:hover {
    color: #8d6028;
    background: #faf5ed;

    transform: translateX(2px);
}

.dropdown-icon {
    display: grid;

    width: 42px;
    height: 42px;

    place-items: center;

    border-radius: 11px;

    color: #95672d;
    background: #f3e7d4;

    font-size: 13px;
}

.dropdown-content {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 3px;
}

.dropdown-content strong {
    color: inherit;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.dropdown-content small {
    color: #827a70;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

.dropdown-enquiry {
    margin-top: 5px;

    border-top: 1px solid rgba(26, 22, 17, 0.06);

    border-radius: 0 0 12px 12px;
}


/* ============================================================
   11. NAVBAR ACTIONS
   ============================================================ */

.navbar-actions {
    display: flex;

    flex: 0 0 auto;

    align-items: center;

    gap: 12px;
}

.navbar-enquiry-btn {
    display: inline-flex;

    min-height: 44px;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 11px 17px;

    border: 1px solid #171410;
    border-radius: 999px;

    color: #ffffff;
    background: #171410;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.navbar-enquiry-btn:hover {
    color: #ffffff;
    background: #98682c;
    border-color: #98682c;

    box-shadow:
        0 10px 25px rgba(152, 104, 44, 0.18);

    transform: translateY(-2px);
}

.navbar-enquiry-btn i {
    font-size: 10px;
}


/* ============================================================
   12. MOBILE MENU TOGGLE
   ============================================================ */

.mobile-menu-toggle {
    display: none;

    position: relative;

    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 1px solid rgba(28, 24, 19, 0.10);
    border-radius: 50%;

    background: #faf7f1;

    cursor: pointer;
}

.mobile-menu-toggle span {
    position: absolute;
    left: 50%;

    display: block;

    width: 18px;
    height: 1.5px;

    border-radius: 10px;

    background: #171410;

    transform: translateX(-50%);

    transition:
        top 0.25s ease,
        transform 0.25s ease,
        opacity 0.2s ease;
}

.mobile-menu-toggle span:nth-child(1) {
    top: 15px;
}

.mobile-menu-toggle span:nth-child(2) {
    top: 21px;
}

.mobile-menu-toggle span:nth-child(3) {
    top: 27px;
}

.mobile-menu-toggle.active span:nth-child(1),
.mobile-menu-toggle.is-active span:nth-child(1) {
    top: 21px;

    transform:
        translateX(-50%)
        rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2),
.mobile-menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3),
.mobile-menu-toggle.is-active span:nth-child(3) {
    top: 21px;

    transform:
        translateX(-50%)
        rotate(-45deg);
}


/* ============================================================
   13. MOBILE MENU FOOTER
   ============================================================ */

.mobile-menu-footer {
    display: none;
}


/* ============================================================
   14. MOBILE OVERLAY
   ============================================================ */

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 998;

    visibility: hidden;

    background: rgba(17, 14, 11, 0.48);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.mobile-menu-overlay.active,
.mobile-menu-overlay.is-active {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


/* ============================================================
   15. STICKY HEADER
   ============================================================ */

.site-header.is-sticky,
.site-header.header-sticky {
    position: sticky;
    top: 0;
}

.site-header.is-scrolled .main-navbar {
    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 10px 35px rgba(23, 19, 14, 0.08);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


/* ============================================================
   16. BODY MOBILE MENU STATE
   ============================================================ */

body.mobile-menu-open,
body.menu-open {
    overflow: hidden;
}


/* ============================================================
   17. DESKTOP 1200
   ============================================================ */

@media (max-width: 1199px) {

    .navbar-inner {
        gap: 18px;
    }

    .main-navbar .navbar-nav {
        gap: 0;
    }

    .main-navbar .nav-link {
        padding-right: 7px;
        padding-left: 7px;

        font-size: 12px;
    }

    .navbar-enquiry-btn {
        padding-right: 14px;
        padding-left: 14px;
    }

    .navbar-brand-name {
        font-size: 15px;
    }

    .navbar-brand-subtitle {
        font-size: 8px;
    }
}


/* ============================================================
   18. TABLET / MOBILE NAVIGATION
   ============================================================ */

@media (max-width: 991px) {

    .topbar,
    .site-topbar {
        display: none;
    }

    .main-navbar {
        min-height: 72px;
    }

    .navbar-inner {
        min-height: 72px;

        gap: 15px;
    }

    .navbar-brand-mark {
        flex-basis: 42px;

        width: 42px;
        height: 42px;

        font-size: 20px;
    }

    .navbar-brand-name {
        font-size: 15px;
    }

    .navbar-brand-subtitle {
        font-size: 8px;
    }


    /* --------------------------------------------------------
       Mobile drawer
       -------------------------------------------------------- */

    .navbar-menu {
        position: fixed;

        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;

        display: flex;
        flex-direction: column;

        align-items: stretch;
        justify-content: flex-start;

        width: min(86vw, 360px);
        height: 100dvh;

        padding: 88px 22px 25px;

        overflow-x: hidden;
        overflow-y: auto;

        visibility: hidden;

        background: #ffffff;

        box-shadow:
            -20px 0 55px rgba(22, 18, 14, 0.13);

        opacity: 0;

        transform: translateX(105%);

        pointer-events: none;

        transition:
            transform 0.3s ease,
            opacity 0.3s ease,
            visibility 0.3s ease;
    }

    .navbar-menu.active,
    .navbar-menu.is-open,
    .navbar-menu.open {
        visibility: visible;

        opacity: 1;

        transform: translateX(0);

        pointer-events: auto;
    }


    /* --------------------------------------------------------
       Mobile nav list
       -------------------------------------------------------- */

    .main-navbar .navbar-nav {
        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 0;

        width: 100%;
    }

    .main-navbar .nav-item {
        display: block;

        width: 100%;

        border-bottom: 1px solid rgba(27, 23, 18, 0.07);
    }

    .main-navbar .nav-link {
        display: flex;

        width: 100%;
        min-height: 53px;

        align-items: center;
        justify-content: space-between;

        padding: 15px 2px;

        color: #29241e;

        font-size: 14px;
        font-weight: 600;

        text-align: left;
    }

    .main-navbar .nav-link::after {
        display: none;
    }

    .main-navbar .nav-link.active {
        color: #98682c;
    }


    /* --------------------------------------------------------
       Mobile dropdown
       -------------------------------------------------------- */

    .nav-dropdown-menu {
        position: static;

        display: none;

        width: 100%;

        margin: 0;
        padding:
            0
            0
            12px;

        visibility: visible;

        border: 0;
        border-radius: 0;

        background: transparent;

        box-shadow: none;

        opacity: 1;

        transform: none;

        pointer-events: auto;

        transition: none;
    }

    .nav-dropdown:hover > .nav-dropdown-menu {
        display: none;
    }

    .nav-dropdown:focus-within > .nav-dropdown-menu {
        display: none;
    }

    .nav-dropdown.open > .nav-dropdown-menu,
    .nav-dropdown.is-open > .nav-dropdown-menu {
        display: block;
    }

    .nav-dropdown.open:focus-within > .nav-dropdown-menu,
    .nav-dropdown.is-open:focus-within > .nav-dropdown-menu {
        display: block;
    }

    .nav-dropdown-link {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 11px;

        padding: 9px 7px;

        border-radius: 10px;
    }

    .dropdown-icon {
        width: 38px;
        height: 38px;

        border-radius: 10px;
    }


    /* --------------------------------------------------------
       Mobile footer
       -------------------------------------------------------- */

    .mobile-menu-footer {
        display: flex;
        flex-direction: column;

        gap: 13px;

        margin-top: auto;
        padding-top: 25px;
    }

    .mobile-menu-label {
        color: #958b7f;

        font-size: 10px;
        font-weight: 700;

        letter-spacing: 0.13em;
        text-transform: uppercase;
    }

    .mobile-menu-contact {
        display: inline-flex;

        align-items: center;

        gap: 9px;

        color: #29241e;

        font-size: 14px;
        font-weight: 700;

        text-decoration: none;
    }

    .mobile-menu-contact i {
        color: #98682c;

        font-size: 12px;
    }

    .mobile-menu-enquiry {
        display: inline-flex;

        width: 100%;
        min-height: 48px;

        align-items: center;
        justify-content: center;

        gap: 8px;

        margin-top: 4px;
    }


    /* --------------------------------------------------------
       Mobile header actions
       -------------------------------------------------------- */

    .navbar-enquiry-btn {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;

        z-index: 1200;
    }

    .mobile-menu-overlay {
        z-index: 1050;
    }
}


/* ============================================================
   19. MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .main-navbar {
        min-height: 68px;
    }

    .navbar-inner {
        min-height: 68px;
    }

    .navbar-brand-mark {
        flex-basis: 40px;

        width: 40px;
        height: 40px;

        font-size: 19px;
    }

    .navbar-brand-content {
        gap: 0;
    }

    .navbar-brand-name {
        font-size: 14px;

        letter-spacing: 0.06em;
    }

    .navbar-brand-subtitle {
        margin-top: 3px;

        font-size: 7px;

        letter-spacing: 0.12em;
    }

    .mobile-menu-toggle {
        flex-basis: 42px;

        width: 42px;
        height: 42px;
    }

    .mobile-menu-toggle span:nth-child(1) {
        top: 14px;
    }

    .mobile-menu-toggle span:nth-child(2) {
        top: 20px;
    }

    .mobile-menu-toggle span:nth-child(3) {
        top: 26px;
    }

    .mobile-menu-toggle.active span:nth-child(1),
    .mobile-menu-toggle.is-active span:nth-child(1),
    .mobile-menu-toggle.active span:nth-child(3),
    .mobile-menu-toggle.is-active span:nth-child(3) {
        top: 20px;
    }

    .navbar-menu {
        width: min(90vw, 350px);

        padding:
            80px
            19px
            22px;
    }
}


/* ============================================================
   20. SMALL MOBILE
   ============================================================ */

@media (max-width: 575px) {

    .main-navbar > .container {
        padding-right: 16px;
        padding-left: 16px;
    }

    .navbar-inner {
        gap: 10px;
    }

    .navbar-brand {
        min-width: 0;
    }

    .navbar-brand-name {
        overflow: hidden;

        max-width: 150px;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .navbar-menu {
        width: min(92vw, 340px);

        padding-right: 17px;
        padding-left: 17px;
    }
}


/* ============================================================
   21. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 390px) {

    .navbar-brand-mark {
        flex-basis: 38px;

        width: 38px;
        height: 38px;

        font-size: 18px;
    }

    .navbar-brand-name {
        max-width: 125px;

        font-size: 13px;
    }

    .navbar-brand-subtitle {
        font-size: 6.5px;
    }

    .mobile-menu-toggle {
        flex-basis: 40px;

        width: 40px;
        height: 40px;
    }
}


/* ============================================================
   22. KEYBOARD ACCESSIBILITY
   ============================================================ */

.main-navbar a:focus-visible,
.main-navbar button:focus-visible {
    outline: 2px solid rgba(158, 107, 42, 0.65);
    outline-offset: 3px;
}


/* ============================================================
   23. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .skip-link,
    .main-navbar .nav-link,
    .nav-dropdown-menu,
    .nav-dropdown-toggle i,
    .nav-dropdown-link,
    .navbar-enquiry-btn,
    .mobile-menu-toggle span,
    .navbar-menu,
    .mobile-menu-overlay {
        transition: none !important;
    }
}

/* ============================================================
   TOPBAR FINAL FIX
   ============================================================ */

.site-topbar {
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 0;

    background: #171410;
}

.site-topbar .container {
    width: 100%;
}

.site-topbar .topbar-inner {
    display: flex;

    min-height: 38px;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.topbar-tagline,
.topbar-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin: 0;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.04em;
}

.topbar-tagline {
    color: rgba(255, 255, 255, 0.75);
}

.topbar-tagline i,
.topbar-link i {
    margin: 0;

    color: #c79a58;

    font-size: 10px;
}

.topbar-link {
    color: rgba(255, 255, 255, 0.86);

    text-decoration: none;
}

.topbar-link:hover {
    color: #d7b47c;
}

.topbar-divider {
    display: block;

    width: 1px;
    height: 14px;

    background: rgba(255, 255, 255, 0.16);
}

.topbar-whatsapp i {
    color: #8bc89d;
}


/* TABLET + MOBILE */

@media (max-width: 991px) {

    .site-topbar {
        display: none !important;
    }

}