/* Responsive overlay (scoped, inert unless html[data-rwd="1"]) */
html[data-rwd="1"] #dmRoot {
  /* establish a reasonable base */
}

/* Media and images scale down within containers */
html[data-rwd="1"] #dmRoot img,
html[data-rwd="1"] #dmRoot video,
html[data-rwd="1"] #dmRoot iframe {
  max-width: 100%;
  height: auto;
}

/* Container padding on small screens */
@media (max-width: 1024px) {
  html[data-rwd="1"] #dmRoot .dmInner,
  html[data-rwd="1"] #dmRoot .site_content,
  html[data-rwd="1"] #dmRoot .dmContent {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}

/* Navigation wrap and safe tap targets */
@media (max-width: 1024px) {
  html[data-rwd="1"] #dmRoot .unifiednav__container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  html[data-rwd="1"] #dmRoot .unifiednav__item {
    min-height: 44px;
    align-items: center;
    display: inline-flex;
  }
}

/* Button cluster stack */
@media (max-width: 768px) {
  html[data-rwd="1"] #dmRoot .flexButton,
  html[data-rwd="1"] #dmRoot .dmOnlyButton {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* Prevent horizontal overflow from absolutely positioned elements */
@media (max-width: 1024px) {
  html[data-rwd="1"] #dmRoot .dmRespRow,
  html[data-rwd="1"] #dmRoot .dmRespCol,
  html[data-rwd="1"] #dmRoot .dmLayoutWrapper {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Make hero buttons wrap text instead of overflowing */
html[data-rwd="1"] #dmRoot .dmButtonLink.flexButton {
  flex-wrap: wrap;
}
html[data-rwd="1"] #dmRoot .dmButtonLink.flexButton .text {
  white-space: normal;
}

/* Typography clamps (safe, additive) */
html[data-rwd="1"] #dmRoot h1 {
  font-size: clamp(28px, 4vw, 48px);
}
html[data-rwd="1"] #dmRoot h2 {
  font-size: clamp(24px, 3.2vw, 36px);
}
html[data-rwd="1"] #dmRoot h3 {
  font-size: clamp(20px, 2.6vw, 28px);
}
html[data-rwd="1"] #dmRoot p,
html[data-rwd="1"] #dmRoot li {
  font-size: clamp(16px, 1.8vw, 18px);
}

/* Hide sticky floating widgets on very small screens (redundant with middleware injection but safe) */
@media (max-width: 767px) {
  html[data-rwd="1"] #dmRoot .sticky-buttons-widget {
    display: none !important;
  }
}

/* Ensure sticky buttons are visible and clickable on larger screens */
html[data-rwd="1"] #dmRoot .sticky-buttons-widget {
  z-index: 2147483000; /* above headers/overlays */
}
html[data-rwd="1"] #dmRoot .sticky-buttons-widget span,
html[data-rwd="1"] #dmRoot .sticky-buttons-widget i {
  visibility: visible;
  opacity: 1;
}

/* Reduce sticky header spacer on small screens to avoid squish */
@media (max-width: 1024px) {
  html[data-rwd="1"] #dmRoot .stickyHeaderSpacer {
    height: 0 !important;
    display: none !important;
  }
}

/* Make header CTA buttons stack and fit on narrow viewports */
@media (max-width: 768px) {
  html[data-rwd="1"] #dmRoot .dmHeaderContainer .dmRespRow,
  html[data-rwd="1"] #dmRoot .dmHeaderContainer .dmRespColsWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  html[data-rwd="1"] #dmRoot .dmHeaderContainer .dmButtonLink.flexButton,
  html[data-rwd="1"] #dmRoot .dmHeaderContainer .dmOnlyButton {
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px 16px !important;
  }
  html[data-rwd="1"] #dmRoot .dmHeaderContainer .dmButtonLink.flexButton .text,
  html[data-rwd="1"] #dmRoot .dmHeaderContainer .dmOnlyButton .text {
    font-size: 18px !important;
  }
}

/* Apply same stacking to the hamburger header container (small screens) */
@media (max-width: 768px) {
  html[data-rwd="1"] #dmRoot .hamburger-header-container .dmRespRow,
  html[data-rwd="1"] #dmRoot .hamburger-header-container .dmRespColsWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  html[data-rwd="1"]
    #dmRoot
    .hamburger-header-container
    .dmButtonLink.flexButton,
  html[data-rwd="1"] #dmRoot .hamburger-header-container .dmOnlyButton {
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px 16px !important;
  }
}

/* Prevent layout overflow from inner wrappers */
@media (max-width: 1024px) {
  html[data-rwd="1"] #dmRoot .dmInner,
  html[data-rwd="1"] #dmRoot #site_content {
    overflow-x: hidden;
  }
}

/* Avoid duplicate headers on large screens: hide hamburger header */
@media (min-width: 1025px) {
  html[data-rwd="1"] #dmRoot .hamburger-header-container {
    display: none !important;
  }
}

/* UI polish: soften dropdowns and CTA pills (subtle) */
html[data-rwd="1"] #dmRoot .unifiednav__container_sub-nav,
html[data-rwd="1"] #dmRoot .unifiednav__container_sub-nav *[class*="menu"] {
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border: 1px solid #e8e8e8;
  background: #ffffff;
  overflow: hidden;
}
html[data-rwd="1"] #dmRoot .unifiednav__container_sub-nav a:hover {
  background: #f7f7f7 !important;
}
/* Ensure dropdowns render above hero */
html[data-rwd="1"] #dmRoot .unifiednav__container_sub-nav {
  z-index: 1000;
}

/* Production dropdown enhancements (subtle, non-breaking) */
/* Only apply when dropdown is already visible (controlled by Duda JS) */
#dmRoot .unifiednav__container_sub-nav[aria-expanded="true"] {
  border-radius: 6px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e0e0e0 !important;
}

#dmRoot .unifiednav__container_sub-nav .unifiednav__item {
  transition: background-color 0.15s ease;
}

#dmRoot .unifiednav__container_sub-nav .unifiednav__item:hover {
  background: #f0f0f0 !important;
}

#dmRoot .unifiednav__container_sub-nav .unifiednav__item:focus-visible {
  outline: 2px solid #fa8205;
  outline-offset: -2px;
}

/* Nested dropdowns positioning (Builders > Electrical > Lighting) */
#dmRoot .unifiednav__container_sub-nav[data-depth="1"] {
  margin-left: 2px;
  margin-top: -6px;
}

/* CTA pills: consistent rounding + focus states */
html[data-rwd="1"] #dmRoot .dmButtonLink.button_2,
html[data-rwd="1"] #dmRoot .dmOnlyButton.button_2 {
  border-radius: 9999px !important;
}
html[data-rwd="1"] #dmRoot .dmButtonLink.button_2:focus-visible,
html[data-rwd="1"] #dmRoot .dmOnlyButton.button_2:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

/* Production CTA button enhancements */
#dmRoot .dmButtonLink,
#dmRoot .dmOnlyButton {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#dmRoot .dmButtonLink:hover,
#dmRoot .dmOnlyButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#dmRoot .dmButtonLink:active,
#dmRoot .dmOnlyButton:active {
  transform: translateY(0);
}

#dmRoot .dmButtonLink:focus-visible,
#dmRoot .dmOnlyButton:focus-visible {
  outline: 2px solid #fa8205;
  outline-offset: 2px;
}

/* Mobile header: show hamburger + logo only; move CTAs into sticky buttons */
@media (max-width: 767px) {
  html[data-rwd="1"]
    #dmRoot
    .hamburger-header-container
    .dmButtonLink.flexButton,
  html[data-rwd="1"] #dmRoot .hamburger-header-container .dmOnlyButton {
    display: none !important;
  }
  html[data-rwd="1"] #dmRoot .hamburger-header-container .imageWidget img {
    max-height: 64px;
    height: auto;
  }
}