/* =====================================================
   முக்கியமானது - NOTES (Tamil)

   இந்த version-ல் நான் உங்கள் original navbar-ஐ
   அடிப்படையில் மாற்றவில்லை.

   நான் செய்த முக்கிய மாற்றம்:

   1. உங்கள் existing navbar → அப்படியே
   2. Export dropdown → புதிய section
   3. Dropdown background → உங்கள் navbar-க்கு பொருந்தும் Dark Glass
   4. Existing green underline → Export-க்கும் வேலை செய்யும்
   5. Desktop → இரண்டு-level dropdown
===================================================== */


/* =====================================================
   EXPORT MENU STRUCTURE (Reference only)

   Export
   │
   ├── 🌾 Agriculture Products  →
   │       ├── Maize
   │       ├── Cow Dung
   │       ├── Coconut Products
   │       └── Coffee
   │
   ├── 🐟 Sea Foods             →
   │       ├── Chilled Fish
   │       ├── Frozen Sea Foods
   │       └── Dried Sea Foods
   │
   └── 📦 General Cargo         →
           ├── Textile Goods
           └── General Commodities
===================================================== */




/* =====================================================
   1. NAVBAR WRAPPER
   -----------------------------------------------------
   Fixed positioning container that centers the navbar
   horizontally and adds 3D perspective for the tilt.
===================================================== */





.navbar-wrapper {
    position: fixed;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1200px, calc(100% - 50px));
    z-index: 9999;
    perspective: 1200px;
    transition: top 0.4s ease;
}


/* =====================================================
   2. NAVBAR (Main glass bar)
   -----------------------------------------------------
   The core glass-morphism navigation bar.
   Default (non-scrolled) state.
===================================================== */

.navbar {
    position: relative;
    width: 100%;
    min-height: 76px;
    box-sizing: content-box;   /*NEW RULE*/
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    /* GLASS BACKGROUND */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.16),
        rgba(255, 255, 255, 0.05)
    );

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    /* BORDER */
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 22px;

    /* 3D SHADOW */
    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.20);

    transform-style: preserve-3d;

    transition:
        min-height 0.4s ease,
        padding 0.4s ease,
        border-radius 0.4s ease,
        background 0.4s ease,
        box-shadow 0.4s ease;
}


/* =====================================================
   3. TOP GLASS HIGHLIGHT
   -----------------------------------------------------
   Thin shiny line at the top edge of the navbar
   to enhance the glass effect.
===================================================== */

.navbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.7),
        transparent
    );
    pointer-events: none;
}


/* =====================================================
   4. BRAND / LOGO AREA
   -----------------------------------------------------
   Logo container + brand text (name + subtitle).
===================================================== */

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: white;
    flex-shrink: 0;
    transform: translateZ(30px);
}


/* =====================================================
   5. LOGO CIRCLE
===================================================== */

.brand-logo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background: linear-gradient(135deg, #ffffff, #ffffff);

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.20),
        inset 0 2px 4px rgba(255, 255, 255, 0.8);

    transform: translateZ(20px);
}


/* =====================================================
   6. LOGO IMAGE (inside the circle)
===================================================== */

.brand-logo img {
    width: 80%;
    height: 80%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}


/* =====================================================
   7. LOGO HOVER 3D EFFECT
===================================================== */

.brand:hover .brand-logo {
    transform:
        translateZ(20px)
        rotateY(15deg)
        rotateX(-8deg)
        scale(1.08);
}


/* =====================================================
   8. BRAND TEXT (name + subtitle)
===================================================== */

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 1px;
}

.brand-subtitle {
    font-size: 10px;
    opacity: 0.75;
    letter-spacing: 2px;
    margin-top: 4px;
}


/* =====================================================
   9. NAV MENU (desktop list of links)
===================================================== */

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
    transform: translateZ(25px);
}


/* =====================================================
   10. NAV ITEM (each <li>)
===================================================== */

.nav-item {
    position: relative;
}


/* =====================================================
   11. NAV LINK (each <a>)
===================================================== */

.nav-link {
    position: relative;
    display: block;
    padding: 13px 14px;
    color: rgba(255, 255, 255, 0.90);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 12px;
    transform-style: preserve-3d;

    transition:
        color 0.25s ease,
        transform 0.25s ease,
        background 0.25s ease;
}


/* =====================================================
   12. NAV LINK HOVER (3D lift)
===================================================== */

.nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.10);
    transform:
        translateZ(18px)
        translateY(-3px);
}


/* =====================================================
   13. ANIMATED GREEN UNDERLINE (hover / active)
===================================================== */

.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 0;
    height: 2px;
    border-radius: 20px;
    background: #8ff5b7;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(143, 245, 183, 0.7);
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 55%;
}


/* =====================================================
   14. EXPORT DROPDOWN (wrapper)
===================================================== */

.export-dropdown {
    position: relative;
}

.export-link {
    display: flex;
    align-items: center;
    gap: 7px;
}


/* =====================================================
   15. DROPDOWN ARROW (currently commented out)
   -----------------------------------------------------
   Uncomment if you want to show a small arrow (⌄)
   next to the "Export" text.
===================================================== */

/* .dropdown-arrow {
    font-size: 15px;
    transition: transform 0.3s ease;
} */


/* =====================================================
   16. MAIN EXPORT MENU (first-level dropdown)
===================================================== */

.export-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 270px;
    padding: 10px;

    /* DARK GLASS */
    background: linear-gradient(
        135deg,
        rgba(8, 45, 27, 0.94),
        rgba(7, 40, 25, 0.88)
    );

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.12);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;

    z-index: 9999;
}


/* =====================================================
   17. TOP GLASS HIGHLIGHT (export menu)
===================================================== */

.export-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.55),
        transparent
    );
    pointer-events: none;
}


/* =====================================================
   18. SHOW EXPORT MENU ON HOVER
===================================================== */

.export-dropdown:hover .export-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}


/* =====================================================
   19. EXPORT CATEGORY (each item in first level)
===================================================== */

.export-category {
    position: relative;
    border-radius: 11px;
    transition: background 0.2s ease;
}

.export-category:hover {
    background: rgba(255, 255, 255, 0.08);
}


/* =====================================================
   20. CATEGORY TITLE (icon + label + arrow)
===================================================== */

.category-title {
    display: flex;
    align-items: center;
    padding: 13px 12px;
    font-family: "Syne", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.94);
    cursor: pointer;
}

.category-icon {
    width: 30px;
    font-size: 17px;
}

.category-arrow {
    margin-left: auto;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.55);
    transition:
        transform 0.2s ease,
        color 0.2s ease;
}

.export-category:hover .category-arrow {
    transform: translateX(4px);
    color: #8ff5b7;
}


/* =====================================================
   21. SECOND LEVEL SUBMENU
===================================================== */

.category-submenu {
    position: absolute;
    top: -10px;
    left: calc(100% + 10px);
    width: 220px;
    padding: 10px;

    /* DARK GLASS */
    background: linear-gradient(
        135deg,
        rgba(8, 45, 27, 0.96),
        rgba(7, 40, 25, 0.92)
    );

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.10);

    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);

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

    z-index: 10000;
}


/* =====================================================
   22. SHOW SECOND LEVEL ON HOVER
===================================================== */

.export-category:hover .category-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}


/* =====================================================
   23. SUBMENU LINKS
===================================================== */

.category-submenu a {
    display: block;
    padding: 11px 13px;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-family: "Syne", sans-serif;
    font-size: 13px;
    font-weight: 500;

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

.category-submenu a:hover {
    background: #4760DD;
    color: white;
    padding-left: 18px;
    box-shadow: 0 5px 15px rgba(71, 96, 221, 0.30);
}


/* =====================================================
   24. EXPORT ARROW ROTATION (currently commented out)
   -----------------------------------------------------
   Uncomment if you want the "Export" arrow to rotate
   180° when hovering.
===================================================== */

/* .export-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
} */


/* =====================================================
   25. RIGHT ACTION AREA (Login + Chat buttons)
===================================================== */

.nav-action {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    transform: translateZ(35px);
}


/* =====================================================
   26. CONTACT / LOGIN BUTTON
===================================================== */

.contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 17px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.contact-button:hover {
    background: rgba(255, 255, 255, 0.20);
    transform:
        translateZ(18px)
        translateY(-3px);
}


/* =====================================================
   27. CHAT BUTTON
===================================================== */

.nav-chat-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;

    background: linear-gradient(135deg, #1d9b50, #0e6d36);
    color: white;
    font-size: 20px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);

    transition: all 0.3s ease;
}

.nav-chat-button:hover {
    transform:
        translateZ(20px)
        scale(1.08);
}


/* =====================================================
   28. MOBILE MENU BUTTON (hamburger)
===================================================== */

.menu-toggle {
    display: none;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
    cursor: pointer;
    position: relative;
    z-index: 10001;
}

.menu-toggle span {
    position: absolute;
    left: 11px;
    width: 23px;
    height: 2px;
    background: white;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.menu-toggle span:nth-child(1) { top: 14px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:nth-child(3) { top: 28px; }


/* =====================================================
   29. HAMBURGER → X (active state)
===================================================== */

.menu-toggle.active span:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
}

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

.menu-toggle.active span:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
}




/* =====================================================
   ╔═══════════════════════════════════════════════════╗
   ║   SCROLL EFFECT — TWO OPTIONS (CHOOSE ONE)        ║
   ║                                                   ║
   ║   OPTION A  →  Green effect ON                    ║
   ║   OPTION B  →  Green effect OFF (navbar stays)    ║
   ║                                                   ║
   ║   To switch:                                      ║
   ║   1. Comment the ACTIVE block                     ║
   ║   2. Uncomment the INACTIVE block                 ║
   ║                                                   ║
   ║   NOTE: You must ALSO toggle the JavaScript       ║
   ║   "handleScroll" function in navbar.js            ║
   ╚═══════════════════════════════════════════════════╝
===================================================== */




/* =====================================================
   ▶▶▶ OPTION A — GREEN EFFECT ON (ACTIVE NOW) ◀◀◀
   -----------------------------------------------------
   When user scrolls down:
     • Navbar shrinks (76px → 62px desktop / 55px mobile)
     • Background turns dark green
     • Subtitle "EXPORT • IMPORT • TRADING" hides
     • Logo shrinks (42px → 40px desktop / 36px mobile)

   ⚠ To DISABLE this: comment out this entire block
   ⚠ Also comment out "handleScroll" in navbar.js
===================================================== */

/* Desktop: scrolled state */
body.scrolled .navbar-wrapper {
    top: 12px;
}

body.scrolled .navbar {
    min-height: 62px !important;
    padding: 7px 15px !important;
    border-radius: 18px !important;
    background: rgba(8, 45, 27, 0.72) !important;
    background-image: none !important;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.32),
        inset 0 1px 1px rgba(255, 255, 255, 0.16) !important;
}

body.scrolled .brand-logo {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
}

body.scrolled .brand-subtitle {
    display: none !important;
}

/* Mobile: scrolled state */
@media (max-width: 900px) {
    body.scrolled .navbar {
        min-height: 55px !important;
        padding: 6px 12px !important;
        border-radius: 14px !important;
        background: rgba(8, 45, 27, 0.88) !important;
        background-image: none !important;
    }

    body.scrolled .brand-logo {
        width: 36px !important;
        height: 36px !important;
    }

    body.scrolled .brand-subtitle {
        display: none !important;
    }
}




/* =====================================================
   ▶▶▶ OPTION B — GREEN EFFECT OFF (COMMENTED) ◀◀◀
   -----------------------------------------------------
   When user scrolls down:
     • Navbar stays EXACTLY the same
     • No green colour
     • No size change
     • Subtitle stays visible

   To ENABLE: uncomment this block AND uncomment the
   "handleScroll" function in navbar.js
===================================================== */

/*
body.scrolled .navbar-wrapper {
    top: 25px;
}

body.scrolled .navbar {
    min-height: 76px !important;
    padding: 10px 18px !important;
    border-radius: 22px !important;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.16),
        rgba(255, 255, 255, 0.05)
    ) !important;
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.16),
        rgba(255, 255, 255, 0.05)
    ) !important;
    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.20) !important;
}

body.scrolled .brand-logo {
    width: 42px !important;
    height: 42px !important;
}

body.scrolled .brand-subtitle {
    display: block !important;
}

@media (max-width: 900px) {
    body.scrolled .navbar {
        min-height: 60px !important;
        padding: 8px 12px !important;
        border-radius: 16px !important;
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.05)
        ) !important;
        background-image: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.05)
        ) !important;
    }

    body.scrolled .brand-logo {
        width: 38px !important;
        height: 38px !important;
    }

    body.scrolled .brand-subtitle {
        display: block !important;
    }
}
*/




/* =====================================================
   30. MOBILE (≤ 900px) — BASE LAYOUT
   -----------------------------------------------------
   General mobile adjustments for the navbar.
===================================================== */

@media (max-width: 900px) {

    .navbar-wrapper {
        width: calc(100% - 30px);
        top: 15px;
    }

    .navbar {
        min-height: 65px;
        padding: 8px 12px;
    }


    /* ---------------------------------------------
       MOBILE NAV MENU (slide-in panel)
    --------------------------------------------- */

    .nav-menu {
        position: fixed;
        top: -20px;
        right: -110%;
        width: min(360px, 88vw);
        height: 110vh;
        padding: 110px 30px 40px;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;

        background: rgba(7, 40, 25, 0.96);

        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);

        border-left: 1px solid rgba(255, 255, 255, 0.15);

        box-shadow: -20px 0 50px rgba(0, 0, 0, 0.3);

        transform: none;

        transition: right 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .nav-menu.open {
        right: 0;
    }

    .nav-link {
        font-size: 18px;
        padding: 16px 15px;
    }

    .nav-link::after {
        bottom: 8px;
        left: 15px;
        transform: none;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
        width: 80px;
    }


    /* ---------------------------------------------
       HIDE DESKTOP ACTIONS ON MOBILE
    --------------------------------------------- */

    .nav-action {
        display: none;
    }


    /* ---------------------------------------------
       SHOW HAMBURGER ON MOBILE
    --------------------------------------------- */

    .menu-toggle {
        display: block;
    }


    /* ---------------------------------------------
       LOGO ON MOBILE
    --------------------------------------------- */

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

    .brand-subtitle {
        display: none;
    }

    .brand-logo {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }


    /* ---------------------------------------------
       MOBILE EXPORT DROPDOWN
    --------------------------------------------- */

    .export-menu {
        position: static;
        width: 100%;
        margin-top: 5px;
        padding: 5px;
        transform: none;
        opacity: 1;
        visibility: visible;
        display: none;
        background: rgba(255, 255, 255, 0.06);
        box-shadow: none;
        border: 1px solid rgba(255, 255, 255, 0.10);
    }

    .export-dropdown:hover .export-menu {
        transform: none;
    }

    .export-dropdown.active .export-menu {
        display: block;
    }

    .category-submenu {
        position: static;
        width: 100%;
        margin-top: 4px;
        padding: 5px;
        transform: none;
        opacity: 1;
        visibility: visible;
        display: none;
        background: rgba(255, 255, 255, 0.05);
        box-shadow: none;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .export-category.active .category-submenu {
        display: block;
    }

    .export-category:hover .category-submenu {
        transform: none;
    }

    .category-title {
        font-size: 16px;
        padding: 13px 12px;
    }

    .category-submenu a {
        font-size: 14px;
        padding: 12px 13px;
    }
}


/* =====================================================
   31. SMALL MOBILE (≤ 500px)
===================================================== */

@media (max-width: 500px) {

    .navbar-wrapper {
        width: calc(100% - 20px);
    }

    .brand-name {
        font-size: 13px;
        letter-spacing: 0.5px;
    }

    .brand-logo {
        width: 40px;
        height: 40px;
    }
}


/* =====================================================
   32. LOGIN SCREEN (hidden by default)
===================================================== */

#loginScreen {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#loginScreen.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =====================================================
   33. MOBILE-ONLY: KEEP NAVBAR INSIDE THE SCREEN
   -----------------------------------------------------
   Prevents the navbar from overflowing on small screens.
   Desktop (≥ 901px) is NOT affected.
===================================================== */

@media (max-width: 900px) {

    .navbar-wrapper {
        position: fixed !important;
        top: 12px !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        perspective: none !important;
    }

    .navbar {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 60px !important;
        padding: 8px 12px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        transform: none !important;
        gap: 10px !important;
    }

    .brand {
        max-width: 60% !important;
        overflow: hidden !important;
        transform: none !important;
    }

    .brand-name {
        font-size: 13px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .brand-subtitle {
        display: none !important;
    }

    .brand-logo {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0;
        transform: none !important;
    }

    .nav-action {
        display: none !important;
    }

    .menu-toggle {
        display: block !important;
        flex-shrink: 0;
    }

    .nav-menu {
        max-width: 90vw !important;
        box-sizing: border-box !important;
    }
}


/* =====================================================
   34. VERY SMALL PHONES (≤ 400px)
===================================================== */

@media (max-width: 400px) {

    .navbar-wrapper {
        padding: 0 8px !important;
    }

    .navbar {
        padding: 6px 10px !important;
    }

    .brand-name {
        font-size: 12px !important;
        letter-spacing: 0.5px !important;
    }

    .brand-logo {
        width: 34px !important;
        height: 34px !important;
    }
}


/* =====================================================
   35. MOBILE-ONLY: BRAND TEXT FITS PROPERLY
   -----------------------------------------------------
   Lets the brand text wrap on small screens instead of
   truncating with ellipsis.
===================================================== */

@media (max-width: 900px) {

    .brand {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        gap: 8px !important;
    }

    .brand-name {
        font-size: 12px !important;
        line-height: 1.15 !important;
        letter-spacing: 0.3px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word;
    }

    .brand-subtitle {
        display: block !important;
        font-size: 8px !important;
        letter-spacing: 1.5px !important;
        margin-top: 3px !important;
        opacity: 0.85 !important;
        white-space: nowrap;
    }

    .brand-text {
        min-width: 0;
        overflow: hidden;
    }
}


@media (max-width: 400px) {

    .brand-name {
        font-size: 11px !important;
        letter-spacing: 0.2px !important;
    }

    .brand-subtitle {
        font-size: 7px !important;
        letter-spacing: 1px !important;
    }
}




/* =====================================================
   ⚠ UNNECESSARY / DUPLICATE CODE — CANDIDATES TO DELETE
   -----------------------------------------------------
   The following blocks are NOT currently affecting the
   page (either fully commented out or fully overridden
   by later rules with `!important`). You can safely
   delete them to keep the file clean.

   >>> HIGHLIGHTED BELOW <<<
===================================================== */


/* =====================================================
   ❌ PATCH: STOP NAV ITEM SHIFTING ONLY (COMMENTED)
   -----------------------------------------------------
   REASON TO DELETE:
     • Fully commented out — does nothing.
     • If you ever need it, it's trivially re-addable.
     • Safe to delete.
===================================================== */

/* .nav-menu {
    flex: 1 1 auto;
    margin: 0 auto;
}

.nav-item {
    flex: 0 0 auto;
}

.nav-link {
    white-space: nowrap;
} */