/* =========================================================
   ATRA HEADER
   Desktop Base Layout
   DESKTOP ONLY
========================================================= */


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

.atra-header.atra-header--desktop {

    width:100% !important;

    position:relative !important;

    z-index:var(--atra-z-header) !important;

    background:var(--atra-color-background) !important;

    border-bottom:1px solid var(--atra-color-border) !important;

    direction:rtl !important;

}


/* =========================================================
   02. DESKTOP ONLY
========================================================= */

/*
 * Desktop Header:
 *
 * 1025px and above  = visible
 * 1024px and below  = completely hidden
 */

@media screen and (min-width:1025px) {

    .atra-header.atra-header--desktop {

        display:block !important;

        visibility:visible !important;

        opacity:1 !important;

        pointer-events:auto !important;

    }

}


@media screen and (max-width:1024px) {

    .atra-header.atra-header--desktop {

        display:none !important;

        visibility:hidden !important;

        opacity:0 !important;

        pointer-events:none !important;

    }

}


/* =========================================================
   03. CONTAINER
========================================================= */

.atra-header.atra-header--desktop .atra-header-container {

    width:100% !important;

    max-width:var(--atra-header-container) !important;

    margin-inline:auto !important;

    padding-inline:var(--atra-space-xl) !important;

    position:relative !important;

}


/* =========================================================
   04. HEADER INNER
========================================================= */

.atra-header.atra-header--desktop .atra-header__inner {

    width:100% !important;

    min-height:80px !important;

    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    direction:rtl !important;

    gap:var(--atra-space-lg) !important;

    position:relative !important;

    overflow:visible !important;

}


/* =========================================================
   05. LOGO AREA
========================================================= */

.atra-header.atra-header--desktop .atra-header__logo-area {

    flex:0 0 auto !important;

    display:flex !important;

    align-items:center !important;

    position:relative !important;

}


/* =========================================================
   06. NAVIGATION AREA
========================================================= */

.atra-header.atra-header--desktop .atra-header__navigation-area {

    flex:1 1 auto !important;

    min-width:0 !important;

    display:flex !important;

    align-items:center !important;

    position:relative !important;

    overflow:visible !important;

}


/* =========================================================
   07. CONSULTATION AREA
========================================================= */

.atra-header.atra-header--desktop .atra-header__consultation-area {

    flex:0 0 auto !important;

    display:flex !important;

    align-items:center !important;

    position:relative !important;

}


/* =========================================================
   08. ACTIONS AREA
========================================================= */

.atra-header.atra-header--desktop .atra-header__actions-area {

    flex:0 0 auto !important;

    display:flex !important;

    align-items:center !important;

    gap:var(--atra-space-sm) !important;

    position:relative !important;

    overflow:visible !important;

}


/* =========================================================
   09. ELEMENTOR / THEME SAFETY
========================================================= */

.atra-header.atra-header--desktop,
.atra-header.atra-header--desktop * {

    box-sizing:border-box;

}

/* =========================================================
   HIDE HELLO ELEMENTOR DEFAULT HEADER
   ATRA HEADER ONLY
========================================================= */

/* Hello Elementor default header */
body #site-header,
body .site-header {
    display: none !important;
}

/* If Elementor Theme Builder created another header */
body .elementor-location-header {
    display: none !important;
}

/* =========================================================
   10. IMPORTANT
========================================================= */

/*
 * Do NOT use:
 *
 * .atra-header { ... }
 *
 * for Desktop-specific rules.
 *
 * Everything Desktop-related is intentionally scoped to:
 *
 * .atra-header.atra-header--desktop
 *
 * This prevents Tablet and Mobile CSS from being affected.
 */


/* =========================================================
   END
========================================================= */