/**
 * Redport Navigation System - Complete Styles
 *
 * @package Redport_Theme
 * @since 1.0.0
 *
 * Unified CSS file for desktop megamenu and mobile drawer navigation
 * Includes: Variables, Desktop Nav, Megamenu, Mobile Drawer, Accessibility
 */

/* ============================================================================
   TABLE OF CONTENTS
   ============================================================================
   1. CSS Custom Properties (Variables)
   2. Header Base & Layouts
   3. Navigation Base
   4. Menu Items & Active States
   5. Overlay
   6. Dropdown Menus
   7. Megamenu
   8. Media Cards & Badges
   9. Mobile Drawer
   10. Responsive Adjustments
   11. No-JS Fallback
   12. Reduced Motion Support
   13. Project Bar - Secondary Navigation
   ============================================================================ */


/* ============================================================================
   1. CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================================================ */

:root {
    /* Header */
    --header-height: 76px; /* Mobile default */
    --header-items-gap: 0.75rem;
    --header-nav-gap: clamp(1rem, 2vw, 24px);
    --header-padding-top: 32px;
    --header-padding-bottom: 32px;
    --header-background-opacity: 1;
    --header-logo-opacity: 1;

    /* Colors (RGB format for Tailwind compatibility) */
    --color-foreground: 0 0 0;
    --color-background: 255 255 255;
    --color-border: 226 232 240;
    --color-overlay: 23 23 23;

    /* Animations */
    --animation-nav: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --animation-nav-delay: 0.1s;
    --animation-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --animation-primary: 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);

    /* Mobile Drawer Animations (Shopify timing) */
    --animation-drawer: 0.5s cubic-bezier(0.3, 1, 0.3, 1);
    --animation-drawer-nav: 0.5s cubic-bezier(0.6, 0, 0.4, 1);

    /* Spacing (Custom increments) */
    --sp-0d5: 0.125rem;    /* 2px */
    --sp-1: 0.25rem;       /* 4px */
    --sp-1d5: 0.375rem;    /* 6px */
    --sp-2: 0.5rem;        /* 8px */
    --sp-2d5: 0.625rem;    /* 10px */
    --sp-3: 0.75rem;       /* 12px */
    --sp-4: 1rem;          /* 16px */
    --sp-5: 1.25rem;       /* 20px */
    --sp-6: 1.5rem;        /* 24px */
    --sp-7: 1.75rem;       /* 28px */
    --sp-8: 2rem;          /* 32px */
    --sp-10: 2.5rem;       /* 40px */
    --sp-11: 2.75rem;      /* 44px */
    --sp-12: 3rem;         /* 48px */
    --sp-14: 3.5rem;       /* 56px */
    --sp-23: 5.75rem;      /* 92px */

    /* Border Radius */
    --border-radius: clamp(var(--sp-4), 1.052vw, var(--sp-5));
    --rounded-full: 9999px;

    /* Megamenu */
    --megamenu-padding-top: var(--sp-3);
    --megamenu-padding-bottom: var(--sp-14);

    /* Mobile Drawer */
    --drawer-width: 400px;
    --drawer-padding: var(--sp-5);

    /* Z-Index */
    --z-overlay: 1;
    --z-header: 20;
    --z-dropdown: 2;
    --z-drawer: 30;

    /* Transform Logical (for RTL support) */
    --transform-logical: 1;
}

/* Dark Mode Support
   TODO: Implement full dark mode support across the site
   Currently disabled - hardcoded colors in mega-menu, project-bar, and HTML classes
   need to be converted to CSS variables before enabling this.

@media (prefers-color-scheme: dark) {
    :root {
        --color-foreground: 255 255 255;
        --color-background: 23 23 23;
        --color-border: 64 64 64;
        --color-overlay: 255 255 255;
    }
}
*/

/* RTL Support */
[dir="rtl"] {
    --transform-logical: -1;
}


/* ============================================================================
   2. HEADER BASE & LAYOUTS
   ============================================================================ */

.header {
    --header-grid-template: "logo icons" / minmax(0, 1fr) auto;
    column-gap: var(--header-items-gap);
    grid-template: var(--header-grid-template);
    background: none;
    z-index: var(--z-header); /* 20 - ensures header (including project-bar) is above page content */
}

.header[is="sticky-header"] {
    transition: var(--animation-nav);
    transition-property: opacity, transform, padding-block-start, padding-block-end;
}

.header::before {
    content: '';
    z-index: 1;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgb(var(--color-background));
    opacity: var(--header-background-opacity);
}

@media screen and (pointer: fine) {
    .header::before {
        transition: opacity var(--animation-nav) var(--animation-nav-delay);
    }
}

/* Header Layouts - Desktop */
@media screen and (min-width: 1024px) {
    .header--left {
        --header-grid-template: "logo navigation icons" / auto minmax(0, 1fr) auto;
    }

    .header--left-center {
        --header-grid-template: "logo navigation icons" / minmax(0, 1fr) fit-content(70%) minmax(0, 1fr);
    }

    .header--center-left {
        --header-grid-template: "navigation logo icons" / minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .header--center-split {
        --header-grid-template: "tools navigation logo navigation-split icons" / 130px minmax(0, 1fr) auto minmax(0, 1fr) 130px;
    }

    .header--center {
        --header-grid-template: "tools logo icons" "navigation navigation navigation" / minmax(0, 1fr) auto minmax(0, 1fr);
    }
}


/* ============================================================================
   3. NAVIGATION BASE
   ============================================================================ */

.header__navigation {
    grid-area: navigation;
    /* NO z-index here - let children control their own stacking */
}

.header__menu {
    gap: var(--header-nav-gap);
    /* NO z-index here - summary elements have z-22 via Tailwind */
}

.list-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Header logo and icons need z-index above ::before (z-index: 1) */
.header__logo,
.header__icons {
    position: relative;
    z-index: 2;
}


/* ============================================================================
   4. MENU ITEMS & ACTIVE STATES
   ============================================================================ */

.menu__item {
    position: relative;
    padding: 0.5rem 1rem;
    transition: color var(--animation-fast);
}

.menu__item:hover {
    color: rgb(var(--color-foreground) / 0.7);
}

/* Active menu item with dot indicator */
.list-menu.with-dot .menu__item[aria-current="page"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
}

/* Active menu item with block style */
.list-menu.with-block .menu__item {
    border-radius: var(--rounded-full);
    overflow: hidden;
}

.list-menu.with-block .menu__item .btn-text {
    position: relative;
    z-index: 2;
}

.list-menu.with-block .menu__item .btn-duplicate {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0;
    transition: opacity var(--animation-fast);
}
/*
.list-menu.with-block .menu__item:hover .btn-duplicate {
    opacity: 1;
}
*/

/* ============================================================================
   5. OVERLAY
   ============================================================================ */

.overlay {
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    background-color: rgb(var(--color-overlay) / 0.5);
    transition: opacity var(--animation-nav);
}

.overlay.active {
    opacity: 1 !important;
    pointer-events: auto;
}


/* ============================================================================
   6. DROPDOWN MENUS
   ============================================================================ */

/* Details Elements Base */
details[is="details-dropdown"],
details[is="details-mega"] {
    /* NO position: relative - mega-menu needs to position relative to header (fixed, full-width) */
    /* NO z-index - let summary (z-22) be above ::before, but mega-menu below */
}

details[is="details-dropdown"] summary,
details[is="details-mega"] summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

details[is="details-dropdown"] summary::-webkit-details-marker,
details[is="details-mega"] summary::-webkit-details-marker {
    display: none;
}

/* Dropdown Base */
.dropdown {
    --border-radius: clamp(var(--sp-4), 1.052vw, var(--sp-5));
    margin-inline-start: calc(var(--sp-8) * -1);
    min-width: 250px;
    padding-block-start: var(--header-height);
    transition: padding var(--animation-nav);
}

.dropdown__container {
    color: rgb(var(--color-foreground));
    background-color: rgb(var(--color-background));
    padding-block-start: var(--sp-6);
    padding-block-end: var(--sp-10);
}

[data-rounded-block="round"] .dropdown__container {
    border-end-start-radius: var(--border-radius);
    border-end-end-radius: var(--border-radius);
}

.dropdown__nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown__nav li {
    --tw-translate-x: 20%;
    transform: translateX(calc(var(--tw-translate-x) * var(--transform-logical, 1)));
    transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1),
                opacity 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: 0.2s;
    opacity: 0;
}

.dropdown__nav li > :is(details, p) {
    padding-inline: var(--sp-8);
}

.dropdown__nav a {
    line-height: 1.5;
    text-decoration: none;
    color: inherit;
    transition: opacity var(--animation-fast);
}

.dropdown__nav a:hover {
    /* opacity: 0.7; */
    color:var(--color-brand);
}

/* Dropdown Open State */
details[is="details-dropdown"][open] .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

details[is="details-dropdown"][open] .dropdown__nav > li {
    --tw-translate-x: 0;
    opacity: 1;
    transition-delay: 1.2s;
}

details[is="details-dropdown"][open] .dropdown__nav li:nth-child(1) { transition-delay: 0.3s; }
details[is="details-dropdown"][open] .dropdown__nav li:nth-child(2) { transition-delay: 0.4s; }
details[is="details-dropdown"][open] .dropdown__nav li:nth-child(3) { transition-delay: 0.5s; }
details[is="details-dropdown"][open] .dropdown__nav li:nth-child(4) { transition-delay: 0.6s; }
details[is="details-dropdown"][open] .dropdown__nav li:nth-child(5) { transition-delay: 0.7s; }
details[is="details-dropdown"][open] .dropdown__nav li:nth-child(6) { transition-delay: 0.8s; }
details[is="details-dropdown"][open] .dropdown__nav li:nth-child(7) { transition-delay: 0.9s; }
details[is="details-dropdown"][open] .dropdown__nav li:nth-child(8) { transition-delay: 1s; }
details[is="details-dropdown"][open] .dropdown__nav li:nth-child(9) { transition-delay: 1.1s; }

/* Nested Dropdowns */
.dropdown .dropdown {
    margin-inline-start: 0;
    margin-block-start: calc(var(--sp-5) * -1);
    padding-inline-start: var(--sp-1);
    padding-block-start: 0;
    transition: opacity var(--animation-fast), transform var(--animation-primary);
}

.dropdown .dropdown .dropdown__container {
    --tw-translate-y: 0;
    padding-block: var(--sp-6);
}

[data-rounded-block="round"] .dropdown .dropdown .dropdown__container {
    border-radius: var(--border-radius);
}

.dropdown.should-reverse .dropdown {
    inset-inline-start: auto;
    inset-inline-end: 100%;
    padding-inline-start: 0;
    padding-inline-end: var(--sp-1);
}


/* ============================================================================
   7. MEGAMENU
   ============================================================================ */

/* Megamenu Base */
.mega-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    z-index: 0; /* BELOW header::before (z-index: 1) for masking effect during animation */
    padding-block-start: var(--header-height);
    transition: padding var(--animation-nav);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
}

details[is="details-mega"][open] .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mega-menu__container {
    background-color: rgb(var(--color-background));
  /*  padding-block-start: var(--header-height);*/
    transition: padding var(--animation-nav);
}

/*
 * ============================================================================
 * ALTERNATIVĂ: Mega-menu cu scrollbar pentru conținut lung
 * ============================================================================
 * Decomentează blocul de mai jos dacă mega-menu-ul are conținut care
 * depășește înălțimea viewport-ului și vrei să adaugi scrollbar.
 *
 * ATENȚIE: Aceasta modifică comportamentul default Shopify care se bazează
 * pe conținut administrat/limitat fără scrollbar.
 * ============================================================================
 *
.mega-menu__container {
    max-height: calc(100vh - var(--header-height) - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground) / 0.2) transparent;
}

.mega-menu__container::-webkit-scrollbar {
    width: 6px;
}

.mega-menu__container::-webkit-scrollbar-track {
    background: transparent;
}

.mega-menu__container::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-foreground) / 0.2);
    border-radius: 3px;
}

.mega-menu__container::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--color-foreground) / 0.3);
}
 *
 * ============================================================================
 */

[data-rounded-block="round"] .mega-menu__container {
    border-end-start-radius: var(--border-radius);
    border-end-end-radius: var(--border-radius);
}

[data-rounded-block="round"] .mega-menu {
    border-end-start-radius: var(--border-radius);
    border-end-end-radius: var(--border-radius);
}

/* Megamenu List */
.mega-menu__list {
    --header-nav-gap: clamp(var(--sp-4), 1.263vw, var(--sp-6));
    gap: var(--header-nav-gap);
    padding-block-start: var(--sp-3);
    padding-block-end: var(--sp-14);
}

/* Megamenu Items */
.mega-menu__item {
    --tw-translate-y: 0;
    --tw-translate-x: 25%;
    flex: calc(20% - var(--header-nav-gap) * 5 / 6);
    max-width: calc(20% - var(--header-nav-gap) * 5 / 6);
    opacity: 0;
    transform: translate(
        calc(var(--tw-translate-x) * var(--transform-logical, 1)),
        var(--tw-translate-y)
    );
    transition: transform var(--animation-primary), opacity var(--animation-primary);
    transition-delay: 0.25s;
}

.mega-menu__item--nav {
    flex: calc(50% - var(--header-nav-gap) / 2);
    max-width: calc(50% - var(--header-nav-gap) / 2);
}

.mega-menu__item--nav.mega-menu__item--full {
    flex: 100%;
    max-width: 100%;
}

/* Megamenu Width Variations */
.mega-menu__item--small {
    flex: calc(40% - var(--header-nav-gap) / 2);
    max-width: calc(40% - var(--header-nav-gap) / 2);
}

.mega-menu__item--medium {
    flex: calc(50% - var(--header-nav-gap) / 2);
    max-width: calc(50% - var(--header-nav-gap) / 2);
}

.mega-menu__item--large {
    flex: calc(60% - var(--header-nav-gap) / 2);
    max-width: calc(60% - var(--header-nav-gap) / 2);
}

/* Megamenu Navigation */
.mega-menu__nav {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.mega-menu__nav--more {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.mega-menu__nav-item {
    --tw-translate-x: 0;
    opacity: 0;
    transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1),
                opacity 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: 0.2s;
}

.mega-menu__nav-item a {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity var(--animation-fast);
}

.mega-menu__nav-item a:hover {
    opacity: 0.7;
}

.mega-menu__nav-item a.active {
    font-weight: bold;
}

/* Megamenu Footer */
.mega-menu__footer {
    position: relative;
    padding-block-start: var(--sp-6);
}

.mega-menu__footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgb(var(--color-border));
}

.mega-menu__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    color: inherit;
    transition: opacity var(--animation-fast);
}

.mega-menu__link:hover {
    opacity: 0.7;
}

.mega-menu__link svg {
    transition: transform var(--animation-fast);
}

.mega-menu__link:hover svg {
    transform: translateX(0.25rem);
}

/* Megamenu Open State - Additional Rules */
details[is="details-mega"][open] .mega-menu__container {
    visibility: visible;
}

details[is="details-mega"][open] .mega-menu__item {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    opacity: 1;
}

details[is="details-mega"][open] .mega-menu__nav-item {
    --tw-translate-x: 0;
    opacity: 1;
}

/* Staggered Animation for Mega Menu Items */
details[is="details-mega"][open] .mega-menu__item:nth-child(1) { transition-delay: 0.4s; }
details[is="details-mega"][open] .mega-menu__item:nth-child(2) { transition-delay: 0.5s; }
details[is="details-mega"][open] .mega-menu__item:nth-child(3) { transition-delay: 0.6s; }
details[is="details-mega"][open] .mega-menu__item:nth-child(4) { transition-delay: 0.7s; }
details[is="details-mega"][open] .mega-menu__item:nth-child(5) { transition-delay: 0.8s; }
details[is="details-mega"][open] .mega-menu__item:nth-child(6) { transition-delay: 0.9s; }

/* Staggered Animation for Nav Items */
details[is="details-mega"][open] .mega-menu__nav-item:nth-child(1) { transition-delay: 0.3s; }
details[is="details-mega"][open] .mega-menu__nav-item:nth-child(2) { transition-delay: 0.4s; }
details[is="details-mega"][open] .mega-menu__nav-item:nth-child(3) { transition-delay: 0.5s; }
details[is="details-mega"][open] .mega-menu__nav-item:nth-child(4) { transition-delay: 0.6s; }
details[is="details-mega"][open] .mega-menu__nav-item:nth-child(5) { transition-delay: 0.7s; }
details[is="details-mega"][open] .mega-menu__nav-item:nth-child(6) { transition-delay: 0.8s; }


/* ============================================================================
   7.1. MEGAMENU - FIGMA DESIGN (Node 2144-1286)
   ============================================================================
   Redport-specific mega menu design with tabs, two-column layout,
   and apartment cards grid.
   ============================================================================ */

/* --- TABS ZONE --- */
/* Figma: height 71px, bg #F1F1F1, padding 24px top/bottom, 80px left/right, gap 64px */
.mega-menu__tabs {
    background-color: #F1F1F1;
    padding: 24px 0;
}

.mega-menu__tabs-inner {
    max-width: var(--container-width, 1280px);
    margin: 0 auto;
    padding: 0 80px;
    display: flex;
    align-items: center;
    gap: 64px;
}

@media (max-width: 1400px) {
    .mega-menu__tabs-inner {
        padding: 0 40px;
        gap: 40px;
    }
}

@media (max-width: 1024px) {
    .mega-menu__tabs-inner {
        padding: 0 24px;
        gap: 24px;
    }
}


.mega-menu__tab {
    font-family: "Roc Grotesk", var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 23px;
    color: #4B5563;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.mega-menu__tab:hover {
    color: #000000;
}

.mega-menu__tab--active {
    color: #000000;
    font-weight: 500;
}

/* --- NAV MENU CONTENT --- */
/* Figma: bg white, padding 24px top/bottom, 80px left/right */
.mega-menu__content {
    background-color: #FFFFFF;
    padding: 24px 0;
}

.mega-menu__content-inner {
    max-width: var(--container-width, 1280px);
    margin: 0 auto;
    padding: 0 80px;
}

@media (max-width: 1400px) {
    .mega-menu__content-inner {
        padding: 0 40px;
    }
}

@media (max-width: 1024px) {
    .mega-menu__content-inner {
        padding: 0 24px;
    }
}

/* --- TAB PANELS --- */
.mega-menu__tab-panel {
    display: none;
    grid-template-columns: 356px 1fr;
    gap: 40px;
}

.mega-menu__tab-panel--active {
    display: grid;
}

@media (max-width: 1200px) {
    .mega-menu__tab-panel {
        grid-template-columns: 300px 1fr;
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .mega-menu__tab-panel {
        grid-template-columns: 1fr;
    }
}

/* --- LEFT COLUMN: Navigation Links --- */
/* Figma: width 356px, gap 8px between items */
.mega-menu__nav-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
}

.mega-menu__nav-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Figma: Nav Link - padding 16px, font 16px Roc Grotesk Regular */
.mega-menu__nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    font-family: "Roc Grotesk", var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    color: #4B5563;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.mega-menu__nav-link:hover {
    color: #000000;
    background-color: #FAFAFA;
}

/* Figma: Active nav link - bg #FAFAFA, border 0.4px #E4E4E4, radius 10px */
.mega-menu__nav-link--active,
.mega-menu__nav-link--has-children.mega-menu__nav-link--active {
    color: #000000;
    background-color: #FAFAFA;
    border: 0.4px solid #E4E4E4;
}

.mega-menu__nav-chevron {
    flex-shrink: 0;
    color: currentColor;
    transition: transform 0.2s ease;
}

.mega-menu__nav-link:hover .mega-menu__nav-chevron {
    transform: translateX(2px);
}

/* --- CTA Section --- */
.mega-menu__cta {
    margin-top: auto;
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mega-menu__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Roc Grotesk", var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.mega-menu__phone:hover {
    opacity: 0.7;
}

.mega-menu__phone-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Figma: CTA Button - bg black, text white, padding 12px/24px, radius 1000px */
.mega-menu__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-family: "Roc Grotesk", var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    background-color: #000000;
    border-radius: 1000px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.mega-menu__cta-btn:hover {
    background-color: #333333;
    transform: translateY(-1px);
}

/* --- RIGHT COLUMN: Cards Grid --- */
.mega-menu__cards-column {
    min-width: 0; /* Prevent grid blowout */
}

.mega-menu__cards-group {
    display: none;
}

.mega-menu__cards-group--active {
    display: block;
}

/* Figma: 2 columns grid */
.mega-menu__cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 700px) {
    .mega-menu__cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Figma: Card - padding 16px, hover bg #EDEDED */
.mega-menu__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.mega-menu__card:hover {
    background-color: #EDEDED;
}

/* Figma: Card Title - 16px Bold UPPERCASE, color #161515 */
.mega-menu__card-title {
    font-family: "Roc Grotesk", var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
    color: #161515;
    margin: 0;
}

/* Figma: Card Link - color #D60000 (brand red), with arrow */
.mega-menu__card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Roc Grotesk", var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-brand, #D60000);
}

.mega-menu__card-arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.mega-menu__card:hover .mega-menu__card-arrow {
    transform: translate(2px, -2px);
}


/* ============================================================================
   8. MEDIA CARDS & BADGES (for promotional content)
   ============================================================================ */

/* Media Cards */
.media-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    background-color: rgb(var(--color-background));
}

.media-card--card {
    border: 1px solid rgb(var(--color-border) / 0.1);
}

.media-card__link {
    text-decoration: none;
    color: rgb(var(--color-foreground));
}

.media-card--overlap .media-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--sp-6);
    background: linear-gradient(
        to top,
        rgb(var(--color-overlay) / var(--overlay-opacity, 0.5)),
        transparent
    );
    color: rgb(var(--color-foreground));
}

.media-card__text {
    opacity: 0;
    transition: opacity var(--animation-primary);
}

.media-card:hover .media-card__text {
    opacity: 1;
}

/* Media Element */
.media {
    position: relative;
    overflow: hidden;
}

.media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--animation-primary);
}

.media-card:hover .media img {
    transform: scale(1.05);
}

/* Media Aspect Ratios */
.media--square { aspect-ratio: 1 / 1; }
.media--portrait { aspect-ratio: 3 / 4; }
.media--landscape { aspect-ratio: 4 / 3; }
.media--wide { aspect-ratio: 16 / 9; }
.media--adapt { aspect-ratio: auto; }

/* Badges */
.badges {
    top: var(--sp-3);
    left: var(--sp-3);
}

.badge {
    padding: var(--sp-1d5) var(--sp-3);
    border-radius: var(--border-radius);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge--onsale {
    background-color: rgb(220 38 38);
    color: rgb(255 255 255);
}


/* ============================================================================
   9. MOBILE DRAWER
   ============================================================================ */

/* Drawer Base */
.drawer {
    z-index: var(--z-drawer);
}

.drawer[open] {
    pointer-events: auto;
}

.drawer__inner {
    background-color: rgb(var(--color-background));
    max-width: var(--drawer-width);
    box-shadow: 4px 0 12px rgb(0 0 0 / 0.1);
    transform: translateX(calc(-100% * var(--transform-logical, 1)));
    transition: transform var(--animation-drawer);
}

.drawer[open] .drawer__inner {
    transform: translateX(0);
}

/* Drawer Header */
.drawer__header {
    padding: var(--drawer-padding);
    padding-block-end: var(--sp-3);
    border-bottom: 1px solid rgb(var(--color-border));
    transition: opacity var(--animation-drawer), visibility var(--animation-drawer);
}

.drawer[active] > .drawer__inner > :is(.drawer__content, .drawer__header) {
    opacity: 1 !important;
    visibility: visible !important;
}

.drawer__title {
    flex: 1;
}

.drawer__close {
    width: 44px;
    height: 44px;
    border-radius: var(--rounded-full);
    border: 1px solid rgb(var(--color-border));
    background-color: transparent;
    cursor: pointer;
    transition: background-color var(--animation-fast), border-color var(--animation-fast);
}

.drawer__close:hover {
    background-color: rgb(var(--color-foreground) / 0.05);
    border-color: rgb(var(--color-foreground) / 0.2);
}

/* Drawer Content */
.drawer__content {
    padding: var(--drawer-padding);
    padding-block-start: var(--sp-6);
    transition: opacity var(--animation-drawer), visibility var(--animation-drawer);
}


.drawer__scrollable {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground) / 0.2) transparent;
}

.drawer__scrollable::-webkit-scrollbar {
    width: 6px;
}

.drawer__scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.drawer__scrollable::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-foreground) / 0.2);
    border-radius: 3px;
}

/* Drawer Menu */
.drawer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.drawer__menu-group {
    margin-bottom: var(--sp-5);
    margin-bottom: 0;
}

.drawer__menu-item {
    padding: var(--sp-3) 0;
    text-decoration: none;
    color: inherit;
    transition: opacity var(--animation-fast), transform var(--animation-drawer);
}

.drawer__menu-item:hover {
    opacity: 0.7;
}

/* Current page indicator in mobile drawer */
.drawer__menu-item--current {
    opacity: 0.5;
}

/* Drawer Submenu */
.drawer__submenu {
    background-color: rgb(var(--color-background));
   /* padding: var(--drawer-padding);*/
    transition: transform var(--animation-drawer);
}

/* Accordion Style (stays in place) */
details[is="accordion-details"] .drawer__submenu {
    position: static;
    transform: none;
    padding-left: var(--sp-4);
    margin-top: var(--sp-2);
}

/* Nested Style (slides over) - Initial state off-screen right */
details[is="menu-details"] .drawer__submenu {
    transform: translateX(calc(100% * var(--transform-logical, 1)));
}

/* Slide-in when ACTIVE (not just open) - syncs with parent animation */
details[is="menu-details"].active > .drawer__submenu {
    transform: translateX(0);
}

/* Z-index when open */
details[is="menu-details"][open] > .drawer__submenu {
    z-index: 3;
}

/* Parent menu items slide out when submenu is active (Shopify-style) */
:is(.drawer__menu, .drawer__submenu).active > li > a,
:is(.drawer__menu, .drawer__submenu).active > li > details > summary {
    transform: translateX(calc(-30% * var(--transform-logical, 1)));
    opacity: 0;
    transition: transform var(--animation-drawer), opacity var(--animation-drawer);
}

/* Reset parent items when not active */
:is(.drawer__menu, .drawer__submenu):not(.active) > li > a,
:is(.drawer__menu, .drawer__submenu):not(.active) > li > details > summary {
    transform: translateX(0);
    opacity: 1;
    transition: transform var(--animation-drawer), opacity var(--animation-drawer);
}

/* Drawer menu items: CSS-only staggered entrance */
.drawer[open]:not([active]) .drawer__menu:not(.active) > li {
    opacity: 0;
    transform: translateX(20px);
}

.drawer[active] .drawer__menu:not(.active) > li {
    opacity: 1;
    transform: translateX(0);
    animation: drawer-menu-in 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) both;
}

.drawer[active] .drawer__menu:not(.active) > li:nth-child(1) { animation-delay: 0.10s; }
.drawer[active] .drawer__menu:not(.active) > li:nth-child(2) { animation-delay: 0.20s; }
.drawer[active] .drawer__menu:not(.active) > li:nth-child(3) { animation-delay: 0.30s; }
.drawer[active] .drawer__menu:not(.active) > li:nth-child(4) { animation-delay: 0.40s; }
.drawer[active] .drawer__menu:not(.active) > li:nth-child(5) { animation-delay: 0.50s; }
.drawer[active] .drawer__menu:not(.active) > li:nth-child(6) { animation-delay: 0.60s; }
.drawer[active] .drawer__menu:not(.active) > li:nth-child(7) { animation-delay: 0.70s; }
.drawer[active] .drawer__menu:not(.active) > li:nth-child(8) { animation-delay: 0.80s; }
.drawer[active] .drawer__menu:not(.active) > li:nth-child(9) { animation-delay: 0.90s; }
.drawer[active] .drawer__menu:not(.active) > li:nth-child(10) { animation-delay: 1.00s; }

@keyframes drawer-menu-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Back Button for Nested Menus */
.drawer__submenu button[data-close] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    margin-bottom: var(--sp-4);
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    transition: opacity var(--animation-fast);
}

.drawer__submenu button[data-close]::before {
    content: '';
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>') center / contain no-repeat;
}

.drawer__submenu button[data-close]:hover {
    opacity: 0.7;
}

/* Hide Back Button in Accordion Mode */
details[is="accordion-details"] .drawer__submenu button[data-close] {
    display: none;
}

/* Drawer Footer */
.drawer__footer {
    padding: var(--drawer-padding);
    padding-block-start: var(--sp-6);
    border-top: 1px solid rgb(var(--color-border));
    gap: var(--sp-4);
}

.drawer__footer-top {
    gap: var(--sp-4);
    padding-block-end: var(--sp-4);
    border-bottom: 1px solid rgb(var(--color-border));
}

.drawer__footer-top button {
    padding: var(--sp-3);
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    transition: opacity var(--animation-fast);
}

.drawer__footer-top button:hover {
    opacity: 0.7;
}

.drawer__footer-bottom {
    padding-block-start: var(--sp-4);
}

/* Drawer Promotions */
.drawer__promotions {
    margin-top: var(--sp-6);
    padding-top: var(--sp-6);
    border-top: 1px solid rgb(var(--color-border));
}

.drawer__promotions .mega-menu__list {
    --header-nav-gap: var(--sp-3);
    padding-block: 0;
}

.drawer__promotions .mega-menu__item {
    --tw-translate-x: calc(var(--sp-10) * -1);
    max-width: 100%;
    padding-inline-start: 0;
    transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1),
                opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

details[is="accordion-details"] .drawer__promotions .mega-menu__item,
details.active .drawer__promotions .mega-menu__item,
.drawer__promotions .media-card__text {
    --tw-translate-x: 0;
    opacity: 1;
}

/* Gesture Support (swipe to close) */
gesture-element {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

/* Drawer Overlay */
.drawer overlay-element {
    z-index: 1; /* Below drawer__inner (z-10) but explicitly defined for proper stacking */
    background-color: rgb(var(--color-overlay) / 0.5);
    transition: opacity var(--animation-drawer), visibility var(--animation-drawer);
}

.drawer[open] overlay-element {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
}

/* Hamburger Button */
.menu-drawer-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    transition: opacity var(--animation-fast);
    position: relative;
    z-index: 40; /* Above header::before (z-index: 1) */
}

.menu-drawer-button:hover {
    opacity: 0.7;
}

.menu-drawer-button svg {
    width: 24px;
    height: 24px;
}

/* Icon visibility toggle - Open icon visible by default, Close icon hidden */
.menu-drawer-button__icon--open {
    display: flex;
}

.menu-drawer-button__icon--close {
    display: none;
}

/* When drawer is open (aria-expanded="true"), swap icons */
.menu-drawer-button[aria-expanded="true"] .menu-drawer-button__icon--open {
    display: none;
}

.menu-drawer-button[aria-expanded="true"] .menu-drawer-button__icon--close {
    display: flex;
}

/* Chevron Icons in Menu */
summary svg {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform var(--animation-fast);
}

/* Accordion Style - Rotate Chevron */
details[is="accordion-details"][open] > summary svg {
    transform: translateY(-50%) rotate(180deg);
}

/* Nested Style - No Rotation */
details[is="menu-details"] summary svg {
    transform: translateY(-50%) rotate(0);
}

/* Modal Elements (for language/currency selectors) */
modal-element {
    z-index: calc(var(--z-drawer) + 1);
}

modal-element .modal__container {
    background-color: rgb(var(--color-background));
    padding: var(--sp-8);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    max-height: 80vh;
    transform: translateY(100%);
    transition: transform var(--animation-drawer);
}

modal-element[open] .modal__container {
    transform: translateY(0);
}

modal-element .modal__scrollable {
    overflow-y: auto;
    max-height: 60vh;
}

modal-element .close {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
}


/* ============================================================================
   9.1. MOBILE DRAWER - FROM BOTTOM ANIMATION (Redport Custom)
   ============================================================================
   On mobile (max-width: 639px), the drawer slides up from the bottom
   instead of sliding in from the left side.
   ============================================================================ */

@media screen and (max-width: 639px) {
    /* Swipe indicator (line at top for swipe down gesture) */
    .drawer__header::before {
        content: '';
        background-color: rgb(var(--color-border));
        border-radius: var(--rounded-full);
        height: var(--sp-1);
        width: var(--sp-12);
        position: absolute;
        inset-block-start: var(--sp-2d5);
        inset-inline-start: 50%;
        transform: translateX(-50%);
    }

    /* Close button absolute positioning */
    .drawer__close {
        position: absolute;
        inset-block-start: var(--sp-1);
        inset-inline-end: var(--sp-1);
    }

    /* FROM BOTTOM ANIMATION */
    .drawer .drawer__inner {
        border-end-end-radius: 0;
        border-end-start-radius: 0;
        border-start-end-radius: var(--sp-5);  /* Rounded top-right */
        border-start-start-radius: var(--sp-5); /* Rounded top-left */
        height: 100%;
        width: 100%;
        max-height: calc(100% - 100px);  /* Leave 100px space at top */
        max-width: none;
        inset-block-start: auto;
        inset-block-end: 0;  /* Positioned at bottom */
        transform: translate3d(0, 100%, 0);  /* Initial: Below screen */
    }

    /* When drawer is active */
    .drawer[active] > .drawer__inner {
        transform: translateZ(0);  /* Final: Visible, raised up */
    }

    /* Overlay background for mobile */
    .drawer[active] > .overlay {
        background: none;
        background-color: rgb(var(--color-overlay) / 0.7);
        transform: translateZ(0);
    }

    /* Content transitions without delay on mobile */
    .drawer[active] > .drawer__inner > :is(.drawer__content, .drawer__header) {
        transition-delay: 0s;
    }
}


/* ============================================================================
   10. RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Large Screens */
@media screen and (min-width: 1024px) {
    :root {
        --header-height: 80px; /* Desktop */
        --header-items-gap: 2em;
        --header-nav-gap: 2em;
    }
}

@media screen and (min-width: 1400px) {
    :root {
        --header-items-gap: 2.5em;
        --header-nav-gap: 2.5em;
    }
}

/* Sticky Header Adjustments */
@media screen and (min-width: 768px) {
    .header-scrolled .dropdown,
    .header-scrolled .mega-menu__container {
        padding-block-start: calc(var(--header-height) - calc(var(--section-padding-top) * 0.25) - calc(var(--section-padding-bottom) * 0.25));
    }
}

/* Mobile - Hide Desktop Navigation */
@media screen and (max-width: 1023px) {
    .header__navigation,
    .header__menu,
    .mega-menu {
        display: none !important;
    }
}

/* Desktop - Hide Mobile Drawer */
@media screen and (min-width: 1024px) {
    .drawer,
    .menu-drawer-button {
        display: none !important;
    }
}

/* Small Mobile Screens */
@media screen and (max-width: 480px) {
    .drawer__inner {
        max-width: 100vw;
    }
}


/* ============================================================================
   11. NO-JS FALLBACK
   ============================================================================ */

.no-js details[is="details-dropdown"] > .dropdown,
.no-js details[is="details-mega"] > .mega-menu {
    inset-block-start: 100%;
}

.no-js details[is="details-dropdown"][open] > .dropdown,
.no-js details[is="details-mega"][open] > .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.no-js .dropdown__container,
.no-js .mega-menu__container {
    border: 1px solid rgb(var(--color-border));
}

[data-rounded-block="round"].no-js .dropdown__container,
[data-rounded-block="round"].no-js .mega-menu__container {
    border-radius: var(--border-radius);
}

.no-js .dropdown__nav li,
.no-js .mega-menu__item,
.no-js .mega-menu__nav-item {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    opacity: 1;
}

.no-js .mega-menu__container {
    visibility: visible;
    transform: translateY(0px);
}

.no-js .drawer {
    position: static;
    width: auto;
    max-width: none;
}

.no-js .drawer__inner {
    transform: none;
    box-shadow: none;
}

.no-js .drawer__header,
.no-js .drawer__content {
    opacity: 1;
    visibility: visible;
}


/* ============================================================================
   12. REDUCED MOTION SUPPORT (Accessibility)
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    :root {
        --animation-nav: 0s;
        --animation-nav-delay: 0s;
        --animation-fast: 0s;
        --animation-primary: 0s;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .header::before,
    .dropdown,
    .dropdown__container,
    .dropdown__nav li,
    .mega-menu,
    .mega-menu__container,
    .mega-menu__item,
    .mega-menu__nav-item,
    .drawer__inner,
    .drawer__submenu,
    .drawer__promotions .mega-menu__item {
        transition: none;
    }

    .dropdown__nav li,
    .mega-menu__item,
    .mega-menu__nav-item,
    .drawer__promotions .mega-menu__item {
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        opacity: 1;
    }
}


/* ============================================================================
   13. PROJECT BAR - Secondary Navigation (Figma Design)
   ============================================================================
   Displays shortcuts for the current project/minisite.
   Only visible on desktop (lg:block).
   Design from Figma node 38-6052
   ============================================================================ */

.project-bar {
    position: relative;
    z-index: 2; /* Above header::before (z-1), visible */
    background-color: #EDEDED;
    /* border-bottom: 1px solid #F3F4F6; */
    /* Smooth fade transition */
    transition: opacity 0.15s ease-out, visibility 0s linear 0.15s;
}

/* When mega-menu or dropdown is open, hide project-bar completely
   - opacity: fade out smoothly
   - position: absolute removes from flow (header::before won't extend to cover it)
   - visibility: hidden after fade completes (accessibility) */
.header:has(.header__navigation details[is="details-mega"][open]) .project-bar,
.header:has(.header__navigation details[is="details-dropdown"][open]) .project-bar {
   /* opacity: 0;
    visibility: hidden;*/
    z-index: -1;
    position: absolute;
    top: 100%; /* Position below the main header area */
    left: 0;
    width: 100%;
    pointer-events: none;
   /* transition: opacity 0.15s ease-out, visibility 0s linear 0s;*/
}

.project-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-width, 1232px);
    margin: 0 auto;

}

/* Responsive padding for smaller screens */
@media (max-width: 1400px) {
    .project-bar__inner {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 1200px) {
    .project-bar__inner {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Project Title - Left side */
.project-bar__title {
    font-family: "Roc Grotesk", var(--font-sans);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #000000;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--animation-fast);
}

.project-bar__title:hover {
    opacity: 0.7;
}

/* Navigation - Center */
.project-bar__nav {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.project-bar__nav-item {
    margin-bottom: 0;
}

.project-bar__nav-link {
    font-family: "Roc Grotesk", var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.44;
    color: rgba(0, 0, 0, 0.7);
    text-decoration: none;
    white-space: nowrap;
    gap:8px;
    transition: color var(--animation-fast), opacity var(--animation-fast);
}

.project-bar__nav-link:hover {
    color: rgba(0, 0, 0, 1);
}

.project-bar__nav-link--active {
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
}

/* Actions - Right side */
.project-bar__actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Phone link */
.project-bar__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    font-family: "Roc Grotesk", var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color var(--animation-fast);
}

.project-bar__phone:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.project-bar__phone svg,
.project-bar__phone i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* CTA Button */
.project-bar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-family: "Roc Grotesk", var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 20px;
    color: #FFFFFF;
    background-color: #000000;
    border: none;
    border-radius: 1000px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--animation-fast), transform var(--animation-fast);
}

.project-bar__cta:hover {
    background-color: var(--color-black);
    transform: translateY(-1px);
}

.project-bar__cta:active {
    transform: translateY(0);
}

/* Project Bar Dropdown Support */
.project-bar__nav-item {
    position: relative;
}

.project-bar__nav-item details {
    position: relative;
}

.project-bar__nav-item details summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.project-bar__nav-item details summary::-webkit-details-marker {
    display: none;
}

.project-bar__summary {
    position: relative;
    z-index: 2;
}

/* Dropdown positioning for project bar */
.project-bar__dropdown {
    margin-inline-start: calc(var(--sp-4) * -1);
    min-width: 200px;
    padding-block-start: 45px;
}

.project-bar__dropdown .dropdown__container {
    padding-block-start: var(--sp-4);
    padding-block-end: var(--sp-6);
    padding-inline: var(--sp-6);
    border-radius: var(--border-radius);
    border: 1px solid rgb(var(--color-border) / 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    background-color: rgb(var(--color-background));
}

/* Nav link with dropdown arrow */
.project-bar__nav-link {
    display: inline-flex;
    align-items: center;
}

.project-bar__nav-link svg {
    flex-shrink: 0;
}

/* Open state styling */
.project-bar__nav-item details[open] .project-bar__nav-link svg {
    transform: rotate(180deg);
}

/* Vitality Est Theme */
.vitality-est .project-bar {
    background-color: var(--color-misty-blue);    
}

.vitality-est .project-bar .project-bar__nav-link{
    color: var(--color-muted-navy) ;
}

.vitality-est .project-bar .project-bar__nav-link:hover {
    color: var(--color-brand);
}

.vitality-est .project-bar .project-bar__phone{
    color: var(--color-muted-navy);
}

.vitality-est .project-bar .project-bar__cta {
    background-color: var(--color-muted-navy);
    color: var(--color-white);
}


/* thelevel-apartments Theme */
.thelevel-apartments .project-bar {
    background-color: var(--color-muted-navy);    
}

.thelevel-apartments .project-bar .project-bar__nav-link{
    color:  var(--color-white);
}

.thelevel-apartments .project-bar .project-bar__nav-link:hover {
    color: var(--color-brand);
}

.thelevel-apartments .project-bar .project-bar__phone{
    color:  var(--color-white);
}

.thelevel-apartments .project-bar .project-bar__cta {
    background-color: var(--color-thelevel-apartments-yellow);
    color: var(--color-white);
}

/* infinity-nord Theme */
.infinity-nord .project-bar {
    background-color: var(--color-light-gray);    
}

.infinity-nord .project-bar .project-bar__nav-link{
    color:  var(--color-muted-navy);
}

.infinity-nord .project-bar .project-bar__nav-link:hover {
    color: var(--color-brand);
}

.infinity-nord .project-bar .project-bar__phone{
    color:  var(--color-muted-navy);
}

.infinity-nord .project-bar .project-bar__cta {
    background-color: var(--color-infinity-nord-yellow-intense);
    color: var(--color-white);
}