/**
 * Roji Child — Elementor visual overrides.
 *
 * Forces dark Roji palette through Elementor sections so widgets, headers,
 * and footers stay on-brand even when content editors style their own
 * blocks. Loaded only when Elementor is active (see inc/enqueue.php).
 */

/* Reset Elementor's default light backgrounds. */
.elementor-section,
.elementor-section-wrap,
.elementor .elementor-element {
  color: var(--roji-text-primary);
}

.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1200px;
}

/* Default heading + text colors in Elementor widgets. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  color: var(--roji-text-primary);
}
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  color: var(--roji-text-secondary);
}

/* Buttons. */
.elementor-button-wrapper .elementor-button,
.elementor-button-wrapper .elementor-button-link {
  background: var(--roji-accent);
  color: #fff !important;
  border-radius: var(--roji-radius);
  padding: 14px 24px;
  font-weight: 600;
  font-family: var(--roji-font-sans);
  border: 0;
  transition: background 0.15s ease;
}
.elementor-button-wrapper .elementor-button:hover {
  background: var(--roji-accent-hover);
  color: #fff !important;
}

/* Subtle outline button variant. */
.elementor-button-wrapper .elementor-button[data-variant="outline"] {
  background: transparent;
  color: var(--roji-text-primary) !important;
  border: 1px solid var(--roji-border);
}
.elementor-button-wrapper .elementor-button[data-variant="outline"]:hover {
  border-color: var(--roji-border-hover);
  background: transparent;
}

/* Cards / boxes. */
.elementor-widget-call-to-action .elementor-cta,
.elementor-widget-image-box .elementor-image-box-wrapper {
  background: var(--roji-card);
  border: 1px solid var(--roji-border);
  border-radius: var(--roji-radius);
}

/* Icons stroke weight: keep Lucide-style minimal look. */
.elementor-icon {
  stroke-width: 1.5px;
}

/* Forms (Elementor Pro). */
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select {
  background: var(--roji-dark) !important;
  border: 1px solid var(--roji-border) !important;
  color: var(--roji-text-primary) !important;
  border-radius: var(--roji-radius) !important;
}
.elementor-field-group input:focus,
.elementor-field-group textarea:focus {
  border-color: var(--roji-accent) !important;
  outline: none;
}

/* Header / nav — horizontal bar only. Dropdown panels are styled separately
   (next block): they need their own rules because some Elementor layouts move
   the `<nav>` outside `.elementor-location-header`, and kit defaults paint them
   white with link-blue text. */
.elementor-location-header .elementor-nav-menu--layout-horizontal a.elementor-item,
.elementor-location-header .elementor-nav-menu--layout-horizontal .elementor-item {
  color: rgba(240, 240, 245, 0.92) !important;
  font-weight: 500;
  letter-spacing: 0;
  transition: color 0.15s ease;
}
.elementor-location-header .elementor-nav-menu--layout-horizontal a.elementor-item:hover,
.elementor-location-header .elementor-nav-menu--layout-horizontal .elementor-item.elementor-item-active {
  color: var(--roji-accent-hover) !important;
}

/* Fallback when the horizontal layout class is absent (some kit exports). */
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu__container:not(.elementor-nav-menu--dropdown) a.elementor-item {
  color: rgba(240, 240, 245, 0.92) !important;
}

/* Mobile dropdown is intentionally NOT styled here.
   inc/mobile-nav.php replaces Elementor's mobile menu with a custom
   drawer (.roji-mnav-*); style.css hides .elementor-nav-menu--dropdown
   and .elementor-menu-toggle on screens <= 1024px so they never paint.
   See style.css "Mobile navigation" section for the full styling. */

/* Site Title widget in header (when not using filtered custom-logo HTML) */
.elementor-location-header .elementor-widget-theme-site-title .elementor-heading-title,
.elementor-location-header .elementor-widget-theme-site-title .elementor-heading-title a,
.elementor-location-header .elementor-widget-site-title .elementor-heading-title,
.elementor-location-header .elementor-widget-site-title .elementor-heading-title a {
  color: rgba(240, 240, 245, 0.96) !important;
  text-decoration: none !important;
  text-transform: lowercase !important;
  font-weight: 600 !important;
}

.elementor-location-header .elementor-widget-theme-site-logo a,
.elementor-location-header .elementor-widget-site-logo a {
  color: rgba(240, 240, 245, 0.96) !important;
  text-decoration: none !important;
}

/* Section dividers. */
.elementor-divider-separator {
  border-top-color: var(--roji-border) !important;
}

/* Footer: same widget classes as header, but links must read on black
   (header rules above would otherwise keep them muted / accent-only). */
.elementor-location-footer .elementor-nav-menu a,
.elementor-location-footer .elementor-nav-menu .elementor-item {
  color: rgba(240, 240, 245, 0.92) !important;
}
.elementor-location-footer .elementor-nav-menu a:hover,
.elementor-location-footer .elementor-nav-menu .elementor-item:hover,
.elementor-location-footer .elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--roji-accent-hover) !important;
}

.elementor-location-footer .elementor-nav-menu {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px 22px !important;
  row-gap: 14px !important;
}
.elementor-location-footer .elementor-nav-menu li {
  margin: 0 !important;
}