/* ==========================================================================
   Theme Color Override - Converts all hardcoded colors to CSS variables
   This file should be loaded LAST to override hardcoded colors
   Load Order: theme/variables.css → other CSS → this file
   ========================================================================== */

/* CRITICAL: This file creates ALIASES where CSS expects DIFFERENT variable names
   than what ThemeService generates.

   RULE: Only define aliases here if the LEFT side name is DIFFERENT from the RIGHT side!

   WRONG (circular reference - breaks the variable):
     --navbar-bg: var(--navbar-bg, #0d6a40);

   RIGHT (valid alias - maps different names):
     --section-title: var(--sections-title, #0d6a40);

   Most variables from ThemeService can be used DIRECTLY in CSS without aliases.
   ========================================================================== */
:root {
  /* ========================================================================
     SECTION TITLES - Map --sections-* to shorter names
     ======================================================================== */
  --section-title: var(--sections-title, #0d6a40);
  --single-content-h2: var(--sections-single-content-h2, #0d6a40);
  --video-section-title: var(--sections-video-section-title, #0d6a40);
  --grid-section-title: var(--sections-grid-section-title, #0d6a40);
  --reviewer-name: var(--sections-reviewer-name, #333333);
  --navbar-section-title: var(--sections-navbar-section-title, #0d6a40);

  /* ========================================================================
     DIAGONAL OVERLAY - Map --diagonal-overlay-* to --carousel-overlay-*
     ======================================================================== */
  --carousel-overlay-left-rgb: var(--diagonal-overlay-left-rgb, 145, 18, 0);
  --carousel-overlay-left-opacity: var(--diagonal-overlay-left-opacity, 0.898);
  --carousel-overlay-right-rgb: var(--diagonal-overlay-right-rgb, 145, 18, 0);
  --carousel-overlay-right-opacity: var(
    --diagonal-overlay-right-opacity,
    0.598
  );

  /* ========================================================================
     MEGA MENU - Only the alias that maps different names
     ======================================================================== */
  --mega-menu-border-width: var(--mega-menu-border-top-width, 3px);
  --mega-menu-parent-hover: var(--mega-menu-parent-item-hover, #e51937);

  /* ========================================================================
     BUTTONS - Map --button-primary-bg to --button-bg
     ======================================================================== */
  --button-bg: var(--button-primary-bg, #e51937);

  /* ========================================================================
     LINKS - Map --links-* to --link-*
     ======================================================================== */
  --link-color: var(--links-default, #0d6a40);
  --link-hover: var(--links-hover, #e51937);
}

/* ==========================================================================
   NAVBAR - Main nav links only (exclude dropdowns and mega menu)
   Higher specificity: ul#desktop-nav > li > a beats li a
   ========================================================================== */
#essential-navbar ul#desktop-nav > li > a {
  color: var(--navbar-text) !important;
}

/* Hover uses --active-color from active.color in colors.json */
#essential-navbar ul#desktop-nav > li > a:hover:not(.active) {
  color: var(--active-color, #0d6a40) !important;
}

/* Active nav item - text color and underline from active.color in colors.json
   Higher specificity: ul#desktop-nav > li > a.active beats li a.active */
#essential-navbar ul#desktop-nav > li > a.active {
  color: var(--active-color, #0d6a40) !important;
}

#essential-navbar ul#desktop-nav > li > a.active::after {
  background-color: var(--active-color, #0d6a40) !important;
}

/* ==========================================================================
   MEGA MENU - Background, borders, and text colors
   Higher specificity: ul#desktop-nav li.mega-menu
   ========================================================================== */
#essential-navbar ul#desktop-nav li.mega-menu .mega-menu-dropdown {
  background-color: var(--mega-menu-bg, #ffffff) !important;
  border-top: var(--mega-menu-border-top-width, 3px) solid #0d6a40 !important;
}

/* Mega menu left side - parent headers
   Higher specificity: ul#desktop-nav li.mega-menu */
#essential-navbar ul#desktop-nav li.mega-menu .parent-header-item {
  color: var(--navbar-dropdown-text, #0d6a40) !important;
}

#essential-navbar ul#desktop-nav li.mega-menu .parent-header-item span {
  color: var(--navbar-dropdown-text, #0d6a40) !important;
}

#essential-navbar ul#desktop-nav li.mega-menu .parent-header-item:hover span,
#essential-navbar ul#desktop-nav li.mega-menu .parent-header-item.active span {
  color: var(--mega-menu-parent-hover) !important;
}

#essential-navbar ul#desktop-nav li.mega-menu .parent-header-item::before,
#essential-navbar ul#desktop-nav li.mega-menu .parent-header-item:hover::before,
#essential-navbar
  ul#desktop-nav
  li.mega-menu
  .parent-header-item.active::before {
  background-color: var(--mega-menu-parent-hover) !important;
}

/* Mega menu right side - children links
   Higher specificity: ul#desktop-nav li.mega-menu */
#essential-navbar ul#desktop-nav li.mega-menu .mega-menu-right a,
#essential-navbar ul#desktop-nav li.mega-menu .children-column a {
  color: var(--navbar-dropdown-text, #0d6a40) !important;
}

#essential-navbar ul#desktop-nav li.mega-menu .mega-menu-right a:hover,
#essential-navbar ul#desktop-nav li.mega-menu .children-column a:hover,
#essential-navbar ul#desktop-nav li.mega-menu .mega-menu-right a.active,
#essential-navbar ul#desktop-nav li.mega-menu .children-column a.active {
  color: var(--navbar-dropdown-text-hover, #0d6a40) !important;
}

/* Children column link hover indicator (the line that appears on hover)
   Override mega-menu-override.css hardcoded #e51937 */
#essential-navbar ul#desktop-nav li.mega-menu .children-column a::before {
  background-color: var(
    --mega-menu-children-column-indicator-color,
    #e51937
  ) !important;
}

#essential-navbar ul#desktop-nav li.mega-menu .children-column a:hover::before {
  background-color: var(
    --mega-menu-children-column-indicator-color,
    #e51937
  ) !important;
}

/* Mega menu title headers - hover color from megaMenu.titleHeaderHoverColor in colors.json
   Override mega-menu-override.css hardcoded #e51937 */
#essential-navbar ul#desktop-nav li.mega-menu .title-item .title-header:hover {
  color: var(--mega-menu-title-header-hover-color, #e51937) !important;
}

#essential-navbar
  ul#desktop-nav
  li.mega-menu
  .title-item
  .title-header:hover::before {
  background-color: var(
    --mega-menu-title-header-hover-color,
    #e51937
  ) !important;
}

/* Nested title headers in mega menu */
#essential-navbar
  ul#desktop-nav
  li.mega-menu
  .title-item
  .title-children
  .title-item
  .title-header:hover,
#essential-navbar
  ul#desktop-nav
  li.mega-menu
  .title-item
  .title-children
  .title-item
  .title-header.active {
  color: var(--mega-menu-title-header-hover-color, #e51937) !important;
}

/* Regular menu items (left side of mega menu) */
#essential-navbar .regular-menu-item::before {
  background-color: var(
    --mega-menu-regular-menu-item-color,
    #e51937
  ) !important;
}

#essential-navbar .regular-menu-item:hover::before,
#essential-navbar .regular-menu-item.active::before {
  background-color: var(
    --mega-menu-regular-menu-item-color,
    #e51937
  ) !important;
}

#essential-navbar .regular-menu-item:hover span,
#essential-navbar .regular-menu-item.active span {
  color: var(--mega-menu-regular-menu-item-color, #e51937) !important;
}

/* ==========================================================================
   FOOTER - Specific and comprehensive overrides
   ========================================================================== */
footer,
.main-footer,
.footer {
  background-color: var(--footer-bg) !important;
  color: var(--footer-color) !important;
}

/* Footer links - use footer-specific text color */
footer a,
.main-footer a,
.footer a {
  color: var(--footer-text) !important;
}

footer a:hover,
.main-footer a:hover,
.footer a:hover {
  color: var(--footer-color) !important;
}

/* Footer paragraphs and secondary text */
footer p,
.main-footer p,
.footer p,
.footer-bottom p {
  color: var(--footer-text-secondary) !important;
}

/* ==========================================================================
   CAROUSEL - Titles and descriptions
   ========================================================================== */
.carousel-title {
  color: var(--carousel-title) !important;
}

.carousel-slide-title {
  color: var(--carousel-slide-title) !important;
}

.carousel-slide-description {
  color: var(--carousel-slide-description) !important;
}

/* ==========================================================================
   SECTION TITLES - Configurable from JSON
   ========================================================================== */
.section-title-img-text,
.reviews-section-title,
.partner-section-title,
.prefix-link-section-title,
.slider-title,
.image-section-title,
.image-simple-title {
  color: var(--section-title) !important;
}

/* Split content h2 - specific color */
.split-content h2 {
  color: var(--split-content-h2-color) !important;
  font-size: var(--split-content-h2-font-size) !important;
  font-weight: var(--split-content-h2-font-weight) !important;
  margin-bottom: var(--split-content-h2-margin-bottom) !important;
  margin-top: var(--split-content-h2-margin-top, 2rem) !important;
  line-height: var(--split-content-h2-line-height) !important;
}

/* Single content h2 */
.single-content h2 {
  color: var(--single-content-h2) !important;
}

/* ==========================================================================
   NAVBAR DROPDOWN - Separate colors from main navbar
   Higher specificity: ul#desktop-nav li .dropdown-menu
   ========================================================================== */
#essential-navbar ul#desktop-nav .dropdown-menu {
  background-color: var(--navbar-dropdown-bg, #ffffff) !important;
  border: 1px solid var(--navbar-dropdown-border, #ddd) !important;
}

#essential-navbar ul#desktop-nav li .dropdown-menu a {
  color: var(--navbar-dropdown-text, #0d6a40) !important;
}

#essential-navbar ul#desktop-nav li .dropdown-menu a:hover,
#essential-navbar ul#desktop-nav li .dropdown-menu a.active {
  background-color: #f5f5f5 !important;
  color: var(--navbar-dropdown-text-hover, #0d6a40) !important;
}

/* ==========================================================================
   ADDITIONAL SECTION TITLES
   ========================================================================== */
.video-section-title {
  color: var(--video-section-title, #0d6a40) !important;
}

.grid-section-title {
  color: var(--grid-section-title, #0d6a40) !important;
}

.reviewer-name,
.review-author {
  color: var(--reviewer-name, #333333) !important;
}

.navbar-section-title {
  color: var(--navbar-section-title, #0d6a40) !important;
}

/* ==========================================================================
   NAVIGATION TABS
   ========================================================================== */
.nav-tab {
  color: var(--nav-tab-default, #666666) !important;
  border-color: transparent !important;
}

.nav-tab.active {
  background: var(--nav-tab-active-bg, #0d6a40) !important;
  color: white !important;
  border-color: var(--nav-tab-active-border, #0d6a40) !important;
  border-bottom-color: var(--nav-tab-active-underline, #0d6a40) !important;
}

.nav-tab.active::after {
  background: var(--nav-tab-active-underline, #0d6a40) !important;
}

.nav-tab:hover {
  color: var(--nav-tab-active, #0d6a40) !important;
}

/* ==========================================================================
   NAVBAR CONTENT & TITLES
   ========================================================================== */
.navbar-content .content-title {
  color: var(--content-title-color, #0d6a40) !important;
}

.navbar-content .content-title::after {
  background-color: var(--content-title-after-bg, #0d6a40) !important;
  color: var(--content-title-after-color, #0d6a40) !important;
}

/* ==========================================================================
   ICONS & INTERACTIVE ELEMENTS
   Higher specificity: ul#desktop-nav to override navbar-theme.css
   ========================================================================== */
#essential-navbar ul#desktop-nav .search-icon,
#essential-navbar .search-icon-container .search-icon,
#essential-navbar .search-icon {
  color: var(--search-icon-color, #ffffff) !important;
}

#essential-navbar .region-toggle .fa-globe {
  color: var(--region-toggle-color, #0d6a40) !important;
}

/* ==========================================================================
   IMAGE ITEMS & GRID
   ========================================================================== */
.image-item-media::before {
  background-color: var(--image-item-before-bg, rgba(0, 0, 0, 0.3)) !important;
}

.grid-column {
  background-color: var(--grid-column-bg, #ffffff) !important;
  border-color: var(--grid-column-border, #eee) !important;
}

/* ==========================================================================
   BUTTONS - Removed global overrides to allow admin JSON styles to take effect
   Individual button colors are controlled per-component via inline styles
   ========================================================================== */

/* ==========================================================================
   SHARE BUTTON - Floating share toggle button
   Uses primary color from theme
   ========================================================================== */
.share-toggle-btn {
  background: linear-gradient(
    135deg,
    var(--primary, #0d6a40),
    var(--primary, #0d6a40)
  ) !important;
  box-shadow: 0 4px 15px rgba(13, 106, 64, 0.3) !important;
}

.share-toggle-btn:hover {
  box-shadow: 0 6px 20px rgba(13, 106, 64, 0.4) !important;
}