/**
 * CSS Overrides
 * =============================================================================
 * Styles that must load AFTER DesignBase core.css to override component defaults
 */

/* ============================================================================
 * NAVIGATION LINK COLORS
 * Light theme: light green (primary-200 = #74f1bf)
 * ============================================================================ */

/* Override the default text color for light theme navigation */
op-website-navigation[theme="Light"] {
  /* CSS custom properties that might be used by the component */
  --color-default-text: #74f1bf !important;
  --op-website-navigation-link-color: #74f1bf !important;
  --link-color: #74f1bf !important;
  --text-color: #74f1bf !important;
}

/* Try to target light DOM elements if not using shadow DOM */
op-website-navigation[theme="Light"]::part(nav-link),
op-website-navigation[theme="Light"] a:not([slot]),
op-website-navigation[theme="Light"] a {
  color: #74f1bf !important;
}

/* Target links inside op-container within navigation */
op-website-navigation[theme="Light"] op-container a,
op-website-navigation[theme="Light"] op-container span {
  color: #74f1bf !important;
}

/* If the component uses op-link internally */
op-website-navigation[theme="Light"] op-link {
  --color: #74f1bf !important;
  color: #74f1bf !important;
}