/* =========================================================
   HAMSA — MOBILE LAYOUT
   =========================================================
   Mobile header:
   - Fixed natural header height
   - Logo on the left
   - Menu button on the right
   - Open menu floats below the header
   - Menu does NOT increase header height
   - Submenus stay inside the mobile menu
   ========================================================= */


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 991px) {

    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .hamsa-site-header {
        position: relative;
        z-index: 1000;
        overflow: visible;
    }

    .hamsa-header-inner {
        position: relative;

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

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

        gap: 16px;

        padding-top: 12px;
        padding-bottom: 12px;
    }


    /* -----------------------------------------------------
       LOGO
       ----------------------------------------------------- */

    .hamsa-header-left {
        flex: 1 1 auto;
        min-width: 0;

        display: flex;
        align-items: center;
    }

    .hamsa-site-branding {
        display: flex;
        align-items: center;
        max-width: 100%;
    }

    .hamsa-site-logo {
        display: block;
        max-width: 100%;
    }

    .custom-logo {
        display: block;

        width: auto;
        max-width: 185px;
        height: auto;
    }


    /* -----------------------------------------------------
       NAVIGATION AREA
       ----------------------------------------------------- */

    .hamsa-header-navigation {
        position: relative;

        flex: 0 0 auto;

        display: flex;
        align-items: center;

        margin-left: auto;
    }

    .hamsa-primary-nav {
        position: relative;

        display: flex;
        align-items: center;

        width: auto;
        margin: 0;
        padding: 0;
    }


    /* -----------------------------------------------------
       HIDE HEADER RIGHT
       ----------------------------------------------------- */

    .hamsa-header-right {
        display: none !important;
    }


    /* =====================================================
       MOBILE MENU BUTTON
       ===================================================== */

    .hamsa-menu-toggle {
        display: inline-flex !important;

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

        gap: 9px;

        width: auto;
        min-width: 0;
        height: 44px;

        margin: 0;
        padding: 0;

        border: 0;
        border-radius: 0;

        background: transparent;
        color: #111111;

        font-family: inherit;
        font-size: 17px;
        font-weight: 500;
        line-height: 1;

        cursor: pointer;

        box-shadow: none;
    }


    .hamsa-menu-toggle:hover,
    .hamsa-menu-toggle:focus,
    .hamsa-menu-toggle:active {
        background: transparent;
        color: #111111;

        border: 0;
        box-shadow: none;
    }


    .hamsa-menu-toggle:focus-visible {
        outline: 2px solid #c99a2e;
        outline-offset: 4px;
    }


    /* Hamburger icon */

    .hamsa-menu-toggle-icon {
        display: inline-block;

        width: auto;
        height: auto;

        font-size: 28px;
        font-weight: 400;
        line-height: 1;

        color: #111111;
    }


    .hamsa-menu-toggle-label {
        display: inline-block;

        margin: 0;
        padding: 0;

        font-size: 17px;
        line-height: 1;

        color: #111111;
    }


    /* =====================================================
       MOBILE MENU PANEL
       =====================================================

       IMPORTANT:
       The menu is ABSOLUTE.

       Therefore opening the menu does NOT increase the
       header height or push the page content downward.
       ===================================================== */

    .hamsa-menu {
        position: absolute !important;

        top: calc(100% + 10px);
        right: 0;
        left: auto;

        z-index: 99999;

        display: none !important;

        flex-direction: column;
        align-items: stretch;

        width: 320px;
        max-width: calc(100vw - 32px);
        min-width: 0;

        margin: 0;
        padding: 8px 20px 14px;

        list-style: none;

        background: #ffffff;

        border: 1px solid #dddddd;
        border-top: 2px solid #c99a2e;

        border-radius: 0;

        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.12);
    }


    /* Only show menu when JS adds .is-open */

    .hamsa-menu.is-open {
        display: flex !important;
    }


    /* =====================================================
       TOP LEVEL MOBILE ITEMS
       ===================================================== */

    .hamsa-menu > li {
        position: relative;

        display: block;

        width: 100%;

        margin: 0;
        padding: 0;

        list-style: none;
    }


    .hamsa-menu > li > a {
        display: block;

        width: 100%;

        margin: 0;
        padding: 13px 0;

        color: #111111;

        font-size: 16px;
        font-weight: 500;
        line-height: 1.45;

        text-decoration: none;

        white-space: normal;

        border-bottom: 1px solid #eeeeee;
    }


    .hamsa-menu > li > a:hover,
    .hamsa-menu > li > a:focus {
        color: #111111;
        background: transparent;
    }


    /* Remove desktop underline effect */

    .hamsa-menu > li > a::after {
        display: none !important;
    }


    /* =====================================================
       MOBILE SUBMENUS
       =====================================================

       The submenu is now INSIDE the parent item.

       It is no longer positioned absolutely.
       This prevents submenu items from overlapping
       Home / Team Skills / Project Skills / Contact.
       ===================================================== */

    .hamsa-menu > li > .sub-menu {
        position: static !important;

        display: block;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0 0 4px 14px;

        list-style: none;

        background: #fafafa;

        border: 0;
        border-left: 2px solid #c99a2e;
        border-radius: 0;

        box-shadow: none;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: none !important;
    }


    /* -----------------------------------------------------
       SUBMENU ITEMS
       ----------------------------------------------------- */

    .hamsa-menu > li > .sub-menu > li {
        display: block;

        width: 100%;

        margin: 0;
        padding: 0;

        list-style: none;
    }


    .hamsa-menu > li > .sub-menu > li > a {
        display: block;

        width: 100%;

        margin: 0;
        padding: 10px 10px;

        color: #333333;

        font-size: 14px;
        font-weight: 500;
        line-height: 1.45;

        text-decoration: none;

        white-space: normal;

        border-bottom: 1px solid #eeeeee;
    }


    .hamsa-menu > li > .sub-menu > li:last-child > a {
        border-bottom: 0;
    }


    .hamsa-menu > li > .sub-menu > li > a:hover,
    .hamsa-menu > li > .sub-menu > li > a:focus {
        color: #111111;
        background: #f5f5f3;
    }


    /* -----------------------------------------------------
       SECOND LEVEL SUBMENU
       ----------------------------------------------------- */

    .hamsa-menu .sub-menu .sub-menu {
        position: static !important;

        display: block;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0 0 0 12px;

        background: #ffffff;

        border: 0;
        border-left: 1px solid #dddddd;

        box-shadow: none;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: none !important;
    }


    .hamsa-menu .sub-menu .sub-menu a {
        display: block;

        padding: 8px 10px;

        font-size: 13px;
        line-height: 1.4;

        color: #555555;

        border-bottom: 1px solid #f0f0f0;
    }


    /* =====================================================
       PREVENT LEGACY NAVIGATION FROM INTERFERING
       ===================================================== */

    .hamsa-site-header .mobile-menu-control-wrapper,
    .hamsa-site-header .main-navigation,
    .hamsa-site-header #site-navigation {
        display: none !important;
    }


    /*
     * IMPORTANT:
     * Do NOT hide .hamsa-menu-toggle here.
     * Hamsa's own button must remain visible.
     */


    /* =====================================================
       MOBILE HEADER OVERFLOW
       ===================================================== */

    .hamsa-header-inner,
    .hamsa-header-navigation,
    .hamsa-primary-nav {
        overflow: visible;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hamsa-header-inner {
        min-height: 64px;

        gap: 12px;

        padding-top: 10px;
        padding-bottom: 10px;
    }


    .custom-logo {
        max-width: 150px;
    }


    .hamsa-menu-toggle {
        height: 42px;

        gap: 8px;

        font-size: 16px;
    }


    .hamsa-menu-toggle-icon {
        font-size: 26px;
    }


    .hamsa-menu-toggle-label {
        font-size: 16px;
    }


    .hamsa-menu {
        width: 300px;
        max-width: calc(100vw - 24px);

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


    .hamsa-menu > li > a {
        padding-top: 12px;
        padding-bottom: 12px;
    }


    .hamsa-menu > li > .sub-menu {
        padding-left: 12px;
    }
}