/* ============================================================
   FLEXTRIBE — Base (loads on every page)
   Layout helpers, Header, Nav, Admin bar, Utility, Responsive
   ============================================================ */

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.flex-max-w {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .flex-max-w { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .flex-max-w { padding-left: 2rem; padding-right: 2rem; }
}

.flex-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
@media (min-width: 768px) {
    .flex-section { padding-top: 6rem; padding-bottom: 6rem; }
}

/* ============================================================
   ELEMENTOR HEADER — Glass morphism effect
   ============================================================ */
.elementor-location-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(255,255,255,0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
.elementor-location-header .e-con,
.elementor-location-header .elementor-section,
.elementor-location-header .elementor-container {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
}
.elementor-location-header > .e-con,
.elementor-location-header > .elementor-section {
    min-height: 95px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
@media (max-width: 767px) {
    .elementor-location-header > .e-con,
    .elementor-location-header > .elementor-section {
        min-height: 70px !important;
    }
}

/* ============================================================
   ELEMENTOR NAV MENU — Mobile dropdown spacing fix
   ============================================================ */
.elementor-widget-n-menu {
    --n-menu-title-space-between: 0px !important;
    --n-menu-title-padding: 0.75rem 1.25rem !important;
    --n-menu-title-line-height: 1.4 !important;
    --n-menu-toggle-icon-distance-from-dropdown: 30px !important;
}
.elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-wrapper {
    background-color: var(--flex-white) !important;
    gap: 0 !important;
    row-gap: 0 !important;
    padding: 0 !important;
}
.elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-wrapper .e-n-menu-item {
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(209,211,212,0.2) !important;
}
.elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-wrapper .e-n-menu-item:last-child {
    border-bottom: none !important;
}

/* ============================================================
   ELEMENTOR HEADER NAV
   ============================================================ */
.elementor-location-header .elementor-widget-wp-widget-nav_menu .menu,
.elementor-location-header .elementor-widget-wp-widget-nav_menu .nav-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
.elementor-location-header .elementor-widget-wp-widget-nav_menu {
    display: flex !important;
    align-items: center !important;
}
.elementor-location-header .elementor-widget-wp-widget-nav_menu .widget_nav_menu {
    display: flex !important;
    align-items: center !important;
}
.elementor-location-header .elementor-widget-wp-widget-nav_menu .menu-item {
    display: list-item !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.elementor-location-header .elementor-widget-wp-widget-nav_menu .menu-item a {
    display: block !important;
    color: var(--flex-charcoal) !important;
    font-family: var(--flex-font-heading) !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    text-decoration: none !important;
    padding: 0.5rem 0.875rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: color 0.2s !important;
}
.elementor-location-header .elementor-widget-wp-widget-nav_menu .menu-item a:hover,
.elementor-location-header .elementor-widget-wp-widget-nav_menu .menu-item.current-menu-item a {
    color: var(--flex-orange) !important;
}
.elementor-location-header .elementor-nav-menu--main .elementor-item {
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--flex-charcoal) !important;
}
.elementor-location-header .elementor-nav-menu--main .elementor-item:hover,
.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active {
    color: var(--flex-orange) !important;
}
.elementor-location-header .elementor-nav-menu--main {
    overflow: visible !important;
}

/* ============================================================
   ADMIN BAR — fixed header offset
   ============================================================ */
.admin-bar .elementor-sticky--active,
.admin-bar .e-con.elementor-sticky--active,
.admin-bar .elementor-section.elementor-sticky--active {
    top: 32px !important;
}
.admin-bar .elementor-location-header[style*="position: fixed"],
.admin-bar .elementor-location-header[style*="position:fixed"],
.admin-bar .e-con[style*="position: fixed"],
.admin-bar .elementor-section[style*="position: fixed"] {
    top: 32px !important;
}
.admin-bar .site-header,
.admin-bar header.elementor-location-header {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    .admin-bar .elementor-sticky--active,
    .admin-bar .e-con.elementor-sticky--active,
    .admin-bar .elementor-section.elementor-sticky--active,
    .admin-bar .elementor-location-header[style*="position: fixed"],
    .admin-bar .e-con[style*="position: fixed"],
    .admin-bar .site-header,
    .admin-bar header.elementor-location-header {
        top: 46px !important;
    }
}

/* ============================================================
   NAVIGATION (custom .flex-nav classes)
   ============================================================ */
.flex-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 999;
    background-color: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(209,211,212,0.2);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    height: 5rem;
}
@media (min-width: 768px) { .flex-nav { height: 6rem; } }

.flex-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.flex-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    cursor: pointer;
}
.flex-logo-icon {
    width: 2.5rem; height: 2.5rem;
    background-color: var(--flex-charcoal);
    border-radius: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--flex-white);
    font-family: var(--flex-font-heading);
    font-weight: 700; font-size: 1.25rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2);
    transition: background-color 0.3s;
    flex-shrink: 0;
}
.flex-logo:hover .flex-logo-icon { background-color: var(--flex-orange); }
@media (min-width: 768px) {
    .flex-logo-icon { width: 3rem; height: 3rem; font-size: 1.5rem; }
}
.flex-logo-name {
    font-family: var(--flex-font-heading);
    font-weight: 800; font-size: 1.25rem;
    letter-spacing: -0.025em; line-height: 1;
    color: var(--flex-charcoal);
}
@media (min-width: 768px) { .flex-logo-name { font-size: 1.5rem; } }
.flex-logo-sub {
    font-family: var(--flex-font-mono);
    font-size: 0.55rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--flex-light);
    font-weight: 700; margin-top: 0.25rem; display: block;
}

.flex-nav-links {
    display: none;
    list-style: none; margin: 0; padding: 0;
    gap: 2.5rem; align-items: center;
}
@media (min-width: 1024px) { .flex-nav-links { display: flex; } }
.flex-nav-links a {
    font-family: var(--flex-font-heading);
    font-weight: 600; font-size: 0.875rem;
    color: var(--flex-charcoal); text-decoration: none;
    transition: color 0.2s;
}
.flex-nav-links a:hover,
.flex-nav-links a.active { color: var(--flex-orange); }
.flex-nav-links a.active { font-weight: 700; }

.flex-nav-cart {
    position: relative;
    color: var(--flex-charcoal);
    background: none; border: none;
    cursor: pointer; padding: 0.5rem;
    transition: color 0.2s; text-decoration: none;
}
.flex-nav-cart:hover { color: var(--flex-orange); }
.flex-nav-cart svg { width: 1.5rem; height: 1.5rem; display: block; }
.flex-cart-badge {
    position: absolute; top: 0; right: 0;
    background-color: var(--flex-orange);
    color: var(--flex-white);
    font-size: 0.625rem; font-weight: 700;
    font-family: var(--flex-font-heading);
    width: 1rem; height: 1rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--flex-white);
}

.flex-mobile-menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background-color: var(--flex-white);
    border-top: 1px solid rgba(209,211,212,0.2);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    z-index: 998;
}
.flex-mobile-menu.open { display: block; }
.flex-mobile-menu a {
    display: block; padding: 1rem 1.25rem;
    font-family: var(--flex-font-heading);
    font-weight: 600; font-size: 1rem;
    color: var(--flex-charcoal); text-decoration: none;
    border-bottom: 1px solid rgba(209,211,212,0.1);
    transition: color 0.2s;
}
.flex-mobile-menu a:hover,
.flex-mobile-menu a.active { color: var(--flex-orange); }
.flex-hamburger {
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 0.5rem;
}
@media (min-width: 1024px) { .flex-hamburger { display: none; } }
.flex-hamburger span {
    display: block; width: 1.5rem; height: 2px;
    background-color: var(--flex-charcoal);
    border-radius: 2px; transition: all 0.3s;
}

/* ============================================================
   UTILITY — Page top padding (fixed nav offset)
   ============================================================ */
.flex-page-top { padding-top: 5rem; }
@media (min-width: 768px) { .flex-page-top { padding-top: 6rem; } }

/* ============================================================
   RESPONSIVE — hide/show helpers
   ============================================================ */
@media (max-width: 1023px) { .flex-desktop-only { display: none !important; } }
@media (min-width: 1024px) { .flex-mobile-only  { display: none !important; } }