/**
 * 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;
}

/* ============================================================================
 * FOOTER COPYRIGHT OVERRIDE
 * The op-website-footer component has hardcoded copyright text in shadow DOM.
 * We overlay our own copyright from SiteSettings to make it editable.
 * ============================================================================ */

.footer-wrapper {
  position: relative;
}

.footer-copyright {
  position: absolute;
  top: 65px;  /* Positioned to overlay the internal copyright */
  left: 24px;
  font-size: 14px;
  font-weight: 600;
  z-index: 10;
  background: var(--color-white, #fff);  /* Cover the text behind */
  padding-right: 8px;
}

.footer-copyright--light {
  color: var(--color-neutral-300);
  background: var(--color-white, #fff);
}

.footer-copyright--dark {
  color: var(--color-primary-700);
  background: var(--color-neutral-900, #111);
}