/* Nav Dropdowns */

.navContent ul li ul a {
    white-space: normal !important;
    overflow: visible !important;
}

@media only screen and (min-width: 768px) {
    .navContent ul li ul {
        min-width: 250px !important;
        right: auto !important; 
    }
}
:root {
  /* =========================================
     1. CORE BRAND COLORS (The Palette)
     ========================================= */
  --color-deep-space: #07070A;       /* Near-black / Main Bg */
  --color-void-navy: #15172B;        /* Deep navy / Cards & Containers */
  --color-nebula-purple: #6B4794;    /* Primary purple */
  --color-galactic-indigo: #2F296B;  /* Secondary purple */
  --color-starlight-white: #F8F9FA;  /* Off-white / Primary Text */
  --color-titanium-silver: #A9AEB5;  /* Metallic gray / Secondary Text */
  --color-thruster-cyan: #60C5FF;    /* Bright cyan / Primary Actions */
  --color-supernova-cyan: #8ADDFF;   /* Highlight cyan / Button Hovers */
  --color-core-glow: #E8C5FF;        /* Luminous lavender / Soft Accents */
  --color-nebula-violet: #8A5ED1;    /* Highlight purple / Sec. Button Hovers */

  /* =========================================
     2. GLOBAL BACKGROUNDS & LAYOUT
     ========================================= */
  --bg-main: var(--color-deep-space);
  --bg-header-sticky: #07070ACC;     /* Deep Space at 80% opacity */
  --bg-footer: var(--color-void-navy);
  
  --divider-line: #A9AEB533;         /* Titanium Silver at 20% opacity */
  --divider-label-bg: var(--bg-main);
  --divider-label-text: var(--color-titanium-silver);

  /* =========================================
     3. TYPOGRAPHY & INLINE STYLES
     ========================================= */
  --text-page-title: var(--color-starlight-white);
  --text-page-subtitle: var(--color-nebula-purple);
  --text-content-title: var(--color-starlight-white);
  --text-content-body: var(--color-titanium-silver);
  
  --text-bold-color: var(--color-thruster-cyan);
  --text-bold-bg: transparent;       /* Optional highlight: #60C5FF1A */
  --text-italic-color: var(--color-core-glow);
  --text-italic-bg: transparent;

  --text-selection-bg: var(--color-nebula-purple);
  --text-selection-color: var(--color-starlight-white);

  /* =========================================
     4. GLOBAL LINKS
     ========================================= */
  --link-base: var(--color-thruster-cyan);
  --link-hover: var(--color-core-glow);

  /* =========================================
     5. PRIMARY BUTTONS (The Rocket)
     ========================================= */
  --btn-primary-bg: var(--color-thruster-cyan);
  --btn-primary-text: var(--color-deep-space);
  --btn-primary-border: var(--color-thruster-cyan);
  --btn-primary-glow: 0px 0px 15px rgba(96, 197, 255, 0.5);
  
  --btn-primary-hover-bg: var(--color-supernova-cyan);
  --btn-primary-hover-text: var(--color-deep-space);
  --btn-primary-hover-border: var(--color-supernova-cyan);

  /* =========================================
     6. SECONDARY BUTTONS (The Butterfly)
     ========================================= */
  --btn-secondary-bg: var(--color-galactic-indigo);
  --btn-secondary-text: var(--color-starlight-white);
  --btn-secondary-glow: 0px 4px 20px rgba(232, 197, 255, 0.4);
  
  --btn-secondary-hover-bg: var(--color-nebula-violet);
  --btn-secondary-hover-text: var(--color-starlight-white);

  /* =========================================
     7. ITEM DISPLAYS (Grids & Cards)
     ========================================= */
  --item-container-bg: var(--color-void-navy);
  --item-container-border: var(--color-galactic-indigo);
  --item-title: var(--color-starlight-white);
  --item-content: var(--color-titanium-silver);
  --item-link: var(--color-thruster-cyan);

  /* =========================================
     8. EXPANDABLE MENUS (Accordions/Dropdowns)
     ========================================= */
  --menu-container-border: var(--color-galactic-indigo);
  --menu-header-bg: var(--color-void-navy);
  --menu-expanded-bg: var(--color-deep-space);
  --menu-text: var(--color-titanium-silver);
  --menu-text-selected: var(--color-thruster-cyan);

  /* =========================================
     9. TAGS & FILTERS
     ========================================= */
  --tag-default-bg: var(--color-void-navy);
  --tag-default-text: var(--color-titanium-silver);
  --tag-hover-bg: var(--color-galactic-indigo);
  --tag-hover-text: var(--color-starlight-white);
  --tag-selected-bg: var(--color-nebula-purple);
  --tag-selected-text: var(--color-starlight-white);

  /* =========================================
     10. CALLS TO ACTION (CTA Banners)
     ========================================= */
  --cta-container-bg: var(--color-galactic-indigo);
  --cta-container-border: var(--color-nebula-purple);
  --cta-title: var(--color-starlight-white);
  --cta-content: var(--color-titanium-silver);

  /* =========================================
     11. MODALS & POPUPS
     ========================================= */
  --modal-overlay: #07070ACC;        /* Deep Space at 80% opacity */
  --modal-bg: var(--color-void-navy);
  --modal-text-primary: var(--color-starlight-white);
  --modal-text-secondary: var(--color-titanium-silver);

  /* =========================================
     12. MAPS & MARKERS
     ========================================= */
  --map-marker-static: var(--color-nebula-purple);
  --map-marker-icon: var(--color-starlight-white);
  --map-marker-active: var(--color-thruster-cyan);
  --map-highlight-route: var(--color-thruster-cyan);
  --map-popup-bg: var(--color-void-navy);
  --map-popup-title: var(--color-starlight-white);
  --map-popup-text: var(--color-titanium-silver);

  /* =========================================
     13. FOOTER & SOCIAL ICONS
     ========================================= */
  --footer-heading: var(--color-starlight-white);
  --footer-text: var(--color-titanium-silver);
  --social-shape-base: var(--color-galactic-indigo);
  --social-symbol-base: var(--color-starlight-white);
  --social-shape-hover: var(--color-thruster-cyan);
  --social-symbol-hover: var(--color-deep-space);
}