/**
 * RMRS Elementor Overrides and Bridges
 * Compatibility layer for Elementor v3 and v4
 *
 * @package RMRS
 * @version 1.0.0
 */

/* ===========================================
   ELEMENTOR V3/V4 BRIDGE
   =========================================== */

/* Ensure RMRS variables take precedence while maintaining fallbacks */
.elementor-page,
.elementor {
  /* Typography */
  --e-global-typography-primary-font-family: var(--rmrs-font-family);
  --e-global-typography-secondary-font-family: var(--rmrs-font-family);
  --e-global-typography-text-font-family: var(--rmrs-font-family);
  --e-global-typography-accent-font-family: var(--rmrs-font-family);
}


/* ===========================================
   ELEMENTOR BUTTON OVERRIDES
   =========================================== */

/* Elementor Button - Apply RMRS styles */
.elementor-button {
  font-family: var(--rmrs-font-family, "Montserrat", sans-serif) !important;
  font-weight: var(--rmrs-font-weight-medium, 500) !important;
  border-radius: var(--rmrs-border-radius-md, 8px) !important;
  transition: all var(--rmrs-transition-slow, 0.3s ease) !important;
}

/* Primary Button Style (default) */
.elementor-button-wrapper .elementor-button.elementor-button-primary,
.elementor-button-wrapper .elementor-button[class*="primary"] {
  background-color: var(--rmrs-color-primary, #003dfa);
}

.elementor-button-wrapper .elementor-button.elementor-button-primary:hover,
.elementor-button-wrapper .elementor-button[class*="primary"]:hover {
  background-color: var(--rmrs-color-secondary, #0080ff);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 61, 250, 0.3);
}

/* Focus states for accessibility */
.elementor-button:focus {
  outline: none;
  box-shadow: var(--rmrs-shadow-focus, 0 0 0 3px rgba(0, 61, 250, 0.4));
}


/* ===========================================
   ELEMENTOR HEADING OVERRIDES
   =========================================== */

.elementor-heading-title {
  font-family: var(--rmrs-font-family, "Montserrat", sans-serif);
  color: var(--rmrs-color-text, #1a1a1a);
}

.elementor-widget-heading .elementor-heading-title {
  line-height: var(--rmrs-line-height-heading, 1.2);
}


/* ===========================================
   ELEMENTOR TEXT EDITOR OVERRIDES
   =========================================== */

.elementor-widget-text-editor {
  font-family: var(--rmrs-font-family, "Montserrat", sans-serif);
  color: var(--rmrs-color-text, #1a1a1a);
  line-height: 1.6;
}

.elementor-widget-text-editor a {
  color: var(--rmrs-color-primary, #003dfa);
  text-decoration: none;
  transition: color var(--rmrs-transition-base, 0.2s ease);
}

.elementor-widget-text-editor a:hover {
  color: var(--rmrs-color-secondary, #0080ff);
  text-decoration: underline;
}


/* ===========================================
   ELEMENTOR NAV MENU OVERRIDES
   =========================================== */

/* Desktop Menu */
.elementor-nav-menu--main .elementor-item {
  font-family: var(--rmrs-font-family, "Montserrat", sans-serif);
  font-weight: var(--rmrs-font-weight-regular, 400);
  color: var(--rmrs-color-text, #1a1a1a);
  transition: color var(--rmrs-transition-base, 0.2s ease);
}

.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item:focus {
  color: var(--rmrs-color-primary, #003dfa);
}

.elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--rmrs-color-primary, #003dfa);
  font-weight: var(--rmrs-font-weight-medium, 500);
}

/* Dropdown Menu */
.elementor-nav-menu--dropdown {
  background: var(--rmrs-color-white, #ffffff);
  box-shadow: var(--rmrs-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
  border-radius: var(--rmrs-border-radius-md, 8px);
}

.elementor-nav-menu--dropdown .elementor-item {
  color: var(--rmrs-color-text, #1a1a1a);
}

.elementor-nav-menu--dropdown .elementor-item:hover {
  background: var(--rmrs-color-background, #f7f7f0);
  color: var(--rmrs-color-primary, #003dfa);
}

/* Mobile Menu Toggle */
.elementor-menu-toggle {
  color: var(--rmrs-color-text, #1a1a1a);
}

.elementor-menu-toggle:hover {
  color: var(--rmrs-color-primary, #003dfa);
}


/* ===========================================
   ELEMENTOR FORM OVERRIDES
   =========================================== */

.elementor-form .elementor-field-group .elementor-field {
  font-family: var(--rmrs-font-family, "Montserrat", sans-serif);
  border: 2px solid #e0e0e0;
  border-radius: var(--rmrs-border-radius-md, 8px);
  padding: 12px 16px;
  transition: all var(--rmrs-transition-base, 0.2s ease);
}

.elementor-form .elementor-field-group .elementor-field:focus {
  border-color: var(--rmrs-color-primary, #003dfa);
  box-shadow: 0 0 0 3px rgba(0, 61, 250, 0.15);
  outline: none;
}

.elementor-form .elementor-field-group .elementor-field-textual::placeholder {
  color: #999999;
}

/* Form Submit Button */
.elementor-form .elementor-button[type="submit"] {
  background-color: var(--rmrs-color-primary, #003dfa);
  font-family: var(--rmrs-font-family, "Montserrat", sans-serif);
  font-weight: var(--rmrs-font-weight-medium, 500);
}

.elementor-form .elementor-button[type="submit"]:hover {
  background-color: var(--rmrs-color-secondary, #0080ff);
}


/* ===========================================
   ELEMENTOR ICON BOX OVERRIDES
   =========================================== */

.elementor-widget-icon-box .elementor-icon {
  transition: all var(--rmrs-transition-slow, 0.3s ease);
}

.elementor-widget-icon-box:hover .elementor-icon {
  transform: scale(1.1);
}

.elementor-widget-icon-box .elementor-icon-box-title {
  font-family: var(--rmrs-font-family, "Montserrat", sans-serif);
  color: var(--rmrs-color-text, #1a1a1a);
}


/* ===========================================
   ELEMENTOR ACCORDION/TOGGLE OVERRIDES
   =========================================== */

.elementor-accordion .elementor-accordion-item {
  margin-bottom: var(--rmrs-spacing-sm, 8px);
}

.elementor-accordion .elementor-tab-title {
  font-family: var(--rmrs-font-family, "Montserrat", sans-serif);
  font-weight: var(--rmrs-font-weight-medium, 500);
  background: var(--rmrs-color-background, #f7f7f0);
  border-radius: var(--rmrs-border-radius-md, 8px);
  transition: all var(--rmrs-transition-base, 0.2s ease);
}

.elementor-accordion .elementor-tab-title:hover {
  background: #eaeae5;
}

.elementor-accordion .elementor-tab-title[aria-expanded="true"],
.elementor-accordion .elementor-tab-title.elementor-active {
  background: var(--rmrs-color-primary, #003dfa);
  color: var(--rmrs-color-white, #ffffff);
  border-radius: var(--rmrs-border-radius-md, 8px) var(--rmrs-border-radius-md, 8px) 0 0;
}

.elementor-accordion .elementor-tab-title .elementor-accordion-icon {
  transition: transform var(--rmrs-transition-slow, 0.3s ease);
}

.elementor-accordion .elementor-tab-content {
  font-family: var(--rmrs-font-family, "Montserrat", sans-serif);
  border: 2px solid var(--rmrs-color-background, #f7f7f0);
  border-top: none;
  border-radius: 0 0 var(--rmrs-border-radius-md, 8px) var(--rmrs-border-radius-md, 8px);
}


/* ===========================================
   ELEMENTOR TABS OVERRIDES
   =========================================== */

.elementor-tabs .elementor-tab-title {
  font-family: var(--rmrs-font-family, "Montserrat", sans-serif);
  font-weight: var(--rmrs-font-weight-regular, 400);
  transition: all var(--rmrs-transition-base, 0.2s ease);
}

.elementor-tabs .elementor-tab-title:hover {
  color: var(--rmrs-color-primary, #003dfa);
}

.elementor-tabs .elementor-tab-title.elementor-active {
  color: var(--rmrs-color-primary, #003dfa);
  font-weight: var(--rmrs-font-weight-medium, 500);
}

.elementor-tabs .elementor-tab-content {
  font-family: var(--rmrs-font-family, "Montserrat", sans-serif);
}


/* ===========================================
   ELEMENTOR IMAGE BOX OVERRIDES
   =========================================== */

.elementor-widget-image-box .elementor-image-box-img img {
  border-radius: var(--rmrs-border-radius-lg, 12px);
  transition: transform var(--rmrs-transition-slow, 0.3s ease);
}

.elementor-widget-image-box:hover .elementor-image-box-img img {
  transform: scale(1.05);
}

.elementor-widget-image-box .elementor-image-box-title {
  font-family: var(--rmrs-font-family, "Montserrat", sans-serif);
  color: var(--rmrs-color-text, #1a1a1a);
}


/* ===========================================
   ELEMENTOR POSTS/LOOP GRID OVERRIDES
   =========================================== */

/* Apply card styles to Elementor Posts widget */
.elementor-posts-container .elementor-post {
  background: var(--rmrs-color-white, #ffffff);
  border-radius: var(--rmrs-border-radius-lg, 12px);
  overflow: hidden;
  border: 2px solid transparent;
  box-shadow: var(--rmrs-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.08));
  transition: all var(--rmrs-transition-slow, 0.3s ease);
}

.elementor-posts-container .elementor-post:hover {
  border-color: var(--rmrs-color-secondary, #0080ff);
  box-shadow: var(--rmrs-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
  transform: translateY(-4px);
}

.elementor-posts-container .elementor-post__thumbnail img {
  transition: transform var(--rmrs-transition-slow, 0.3s ease);
}

.elementor-posts-container .elementor-post:hover .elementor-post__thumbnail img {
  transform: scale(1.05);
}

.elementor-posts-container .elementor-post__title {
  font-family: var(--rmrs-font-family, "Montserrat", sans-serif);
  font-weight: var(--rmrs-font-weight-medium, 500);
}

.elementor-posts-container .elementor-post__title a {
  color: var(--rmrs-color-text, #1a1a1a);
  text-decoration: none;
  transition: color var(--rmrs-transition-base, 0.2s ease);
}

.elementor-posts-container .elementor-post__title a:hover {
  color: var(--rmrs-color-primary, #003dfa);
}


/* ===========================================
   ELEMENTOR LOOP GRID (V4)
   =========================================== */

.elementor-loop-container .e-loop-item {
  transition: all var(--rmrs-transition-slow, 0.3s ease);
}

.elementor-loop-container .e-loop-item:hover {
  transform: translateY(-4px);
}


/* ===========================================
   ELEMENTOR SECTION/CONTAINER OVERRIDES
   =========================================== */

/* Full-width section backgrounds */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--rmrs-container-max-width, 1200px);
}

/* Beige background sections */
.rmrs-bg-beige,
.elementor-section.rmrs-bg-beige {
  background-color: var(--rmrs-color-background, #f7f7f0) !important;
}

/* White background sections */
.rmrs-bg-white,
.elementor-section.rmrs-bg-white {
  background-color: var(--rmrs-color-white, #ffffff) !important;
}

/* Primary background sections */
.rmrs-bg-primary,
.elementor-section.rmrs-bg-primary {
  background-color: var(--rmrs-color-primary, #003dfa) !important;
}


/* ===========================================
   RMRS CUSTOM WIDGET STYLES
   =========================================== */

/* Stats Bar Widget (custom) */
.elementor-widget-rmrs-stats-bar .rmrs-stats-bar {
  /* Widget container styling handled by component CSS */
}

/* Depot Status Widget (custom) */
.elementor-widget-rmrs-depot-status .rmrs-depot-status {
  /* Widget container styling handled by component CSS */
}

/* Recycling Search Widget (custom) */
.elementor-widget-rmrs-recycling-search .rmrs-search-box {
  /* Widget container styling handled by component CSS */
}


/* ===========================================
   ACCESSIBILITY ENHANCEMENTS
   =========================================== */

/* Ensure focus states are visible on all Elementor elements */
.elementor a:focus,
.elementor button:focus,
.elementor input:focus,
.elementor select:focus,
.elementor textarea:focus {
  outline: 2px solid var(--rmrs-color-primary, #003dfa);
  outline-offset: 2px;
}

/* Skip to content link */
.elementor-kit-* .rmrs-skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}


/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */

@media (max-width: 1024px) {
  .elementor-section.elementor-section-boxed > .elementor-container {
    padding-left: var(--rmrs-container-padding, 20px);
    padding-right: var(--rmrs-container-padding, 20px);
  }
}

@media (max-width: 768px) {
  /* Mobile typography adjustments */
  .elementor-heading-title.elementor-size-large {
    font-size: var(--rmrs-font-size-h2, 1.875rem);
  }

  .elementor-heading-title.elementor-size-xl {
    font-size: var(--rmrs-font-size-h1, 2.25rem);
  }

  /* Mobile menu */
  .elementor-nav-menu--dropdown {
    border-radius: 0;
  }
}


/* ===========================================

/* ===========================================
   I'M HERE TO - Tab Menu with Arrows
   Elementor v3/v4 Compatible
   =========================================== */

/* Container */
#hereToMenu {
  display: flex;
  flex-direction: column;
}

/* Tab Triggers - Elementor v4 */
#hereToMenu [role="tab"] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Tab Triggers - Elementor v3 */
#hereToMenu .elementor-tab-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Arrow Chevron - v4 */
#hereToMenu [role="tab"]::after {
  content: "›";
  font-size: 1.5em;
  font-weight: 600;
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform 0.2s ease;
}

/* Arrow Chevron - v3 */
#hereToMenu .elementor-tab-title::after {
  content: "›";
  font-size: 1.5em;
  font-weight: 600;
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform 0.2s ease;
}

/* Hover State - v4 */
#hereToMenu [role="tab"]:hover::after {
  transform: translateX(4px);
}

/* Hover State - v3 */
#hereToMenu .elementor-tab-title:hover::after {
  transform: translateX(4px);
}

/* Active State - v4 */
#hereToMenu [role="tab"][aria-selected="true"]::after,
#hereToMenu [role="tab"].e--selected::after {
  color: #ffffff;
}

/* Active State - v3 */
#hereToMenu .elementor-tab-title.elementor-active::after {
  color: #ffffff;
}


   PRINT STYLES
   =========================================== */

@media print {
  .elementor-section {
    page-break-inside: avoid;
  }

  .elementor-widget-nav-menu,
  .elementor-widget-button,
  .elementor-widget-form {
    display: none !important;
  }

  .elementor a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666666;
  }
}