/* WordPress / Hello Elementor / Elementor kit compatibility for Clean Collective SSR layout */

/* Hello theme boxes non-Elementor pages — opt out so sections go edge-to-edge */
body.clean-collective:not([class*='elementor-page-']) .site-main,
body.cc-layout-ssr .site-main,
body.cc-layout-ssr #content,
body.cc-layout-ssr .page-content,
body.cc-layout-ssr .cc-main {
  max-width: none !important;
  width: 100% !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

body.cc-layout-ssr .page-content {
  padding-block: 0 !important;
}

body.clean-collective,
body.cc-layout-ssr {
  background: var(--color-bg, #f5f4ef);
  overflow-x: clip;
}

body.cc-layout-ssr .elementor-location-header,
body.cc-layout-ssr .elementor-location-footer,
body.cc-layout-ssr [data-elementor-type='header'],
body.cc-layout-ssr [data-elementor-type='footer'],
body.cc-layout-ssr .hello-elementor .site-header:not(.site-header),
body.cc-layout-ssr .hello-elementor .site-footer:not(.site-footer),
body.cc-layout-ssr .hello-elementor .page-header,
body.cc-layout-ssr .hello-elementor .entry-header {
  display: none !important;
}

/* Hello theme underlines all .page-content links on load */
body.clean-collective .page-content a,
body.clean-collective .page-content a:hover,
body.clean-collective .page-content a:focus,
body.clean-collective .page-content a:active,
body.clean-collective .page-content a:visited,
body.clean-collective .cc-main a,
body.clean-collective .cc-main a:hover,
body.clean-collective .cc-main a:focus,
body.clean-collective .cc-main a:active,
body.clean-collective .cc-main a:visited,
body.clean-collective #site-header a,
body.clean-collective #site-footer a,
body.clean-collective #floating-cta a {
  text-decoration: none !important;
}

/* Neutralize Elementor kit accent (default pink) on interactive elements */
body.clean-collective {
  --e-global-color-accent: var(--color-accent, #a4c96b);
  --e-global-color-primary: var(--color-charcoal, #252e28);
  --e-global-color-secondary: var(--color-sage, #6b8260);
  --wp--style--global--content-size: 100%;
  --wp--style--global--wide-size: 100%;
}

body.clean-collective button:not(.btn):not(.nav-dropdown__toggle):not(.review-modal__close):not(.announcement-banner__close):not(.mobile-nav__toggle):not(.accordion-trigger):not(.dirtyness-btn):not(.counter__btn):not(.contact-method-card):not(.reviews-carousel__arrow),
body.clean-collective button:not(.btn):not(.nav-dropdown__toggle):not(.review-modal__close):not(.announcement-banner__close):not(.mobile-nav__toggle):not(.accordion-trigger):not(.dirtyness-btn):not(.counter__btn):not(.contact-method-card):not(.reviews-carousel__arrow):hover,
body.clean-collective button:not(.btn):not(.nav-dropdown__toggle):not(.review-modal__close):not(.announcement-banner__close):not(.mobile-nav__toggle):not(.accordion-trigger):not(.dirtyness-btn):not(.counter__btn):not(.contact-method-card):not(.reviews-carousel__arrow):focus,
body.clean-collective button:not(.btn):not(.nav-dropdown__toggle):not(.review-modal__close):not(.announcement-banner__close):not(.mobile-nav__toggle):not(.accordion-trigger):not(.dirtyness-btn):not(.counter__btn):not(.contact-method-card):not(.reviews-carousel__arrow):focus-visible,
body.clean-collective button:not(.btn):not(.nav-dropdown__toggle):not(.review-modal__close):not(.announcement-banner__close):not(.mobile-nav__toggle):not(.accordion-trigger):not(.dirtyness-btn):not(.counter__btn):not(.contact-method-card):not(.reviews-carousel__arrow):active,
body.clean-collective .service-accordion__trigger,
body.clean-collective .service-accordion__trigger:hover,
body.clean-collective .service-accordion__trigger:focus,
body.clean-collective .service-accordion__trigger:focus-visible,
body.clean-collective .service-accordion__trigger:active,
body.clean-collective .nav-mega__trigger,
body.clean-collective .nav-mega__trigger:hover,
body.clean-collective .nav-mega__trigger:focus,
body.clean-collective .nav-mega__trigger:focus-visible,
body.clean-collective .menu-toggle,
body.clean-collective .menu-toggle:hover,
body.clean-collective .menu-toggle:focus {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-color: transparent !important;
}

body.clean-collective .service-accordion__trigger,
body.clean-collective .service-accordion__trigger:hover,
body.clean-collective .service-accordion__trigger:focus,
body.clean-collective .service-accordion__trigger:focus-visible {
  color: var(--color-white) !important;
}

body.clean-collective .elementor a:hover,
body.clean-collective .elementor a:focus,
body.clean-collective .elementor a:active {
  color: inherit;
}

body.clean-collective :where(.is-layout-constrained) > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none !important;
  margin-inline: 0 !important;
}

body.clean-collective .section,
body.clean-collective .hero,
body.clean-collective .cta-banner {
  width: 100%;
  max-width: none;
}

/* Hello Elementor caps .site-header / .site-footer width on non-dynamic templates */
body.clean-collective #site-header,
body.clean-collective #site-footer,
body.clean-collective .site-header,
body.clean-collective .site-header:not(.dynamic-header),
body.clean-collective .site-header.header-full-width,
body.clean-collective .site-footer,
body.clean-collective .site-footer:not(.dynamic-footer),
body.clean-collective .site-footer.footer-full-width,
body.clean-collective .announcement-banner,
body.clean-collective .cc-chrome,
body.clean-collective .cc-chrome--header,
body.clean-collective .cc-chrome--footer {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
}

body.clean-collective #site-footer,
body.clean-collective .cc-chrome--footer,
body.clean-collective .site-footer.footer-full-width {
  background: var(--color-primary, #252e28);
}

body.clean-collective .site-header__inner,
body.clean-collective .announcement-banner__inner,
body.clean-collective .site-footer .container {
  max-width: var(--max-width, 1500px);
  margin-inline: auto;
  width: 100%;
}

body.clean-collective .elementor-location-header,
body.clean-collective .elementor-location-footer {
  max-width: none !important;
  width: 100% !important;
}

/* Hero overlay header — keep nav text white (Elementor styles <button> mega triggers dark) */
body.clean-collective .site-header--overlay:not(.scrolled) .site-nav__link,
body.clean-collective .site-header--overlay:not(.scrolled) .nav-mega__trigger {
  color: rgba(255, 255, 255, 0.92) !important;
}

body.clean-collective .site-header--overlay:not(.scrolled) .site-nav__link:hover,
body.clean-collective .site-header--overlay:not(.scrolled) .site-nav__link.active,
body.clean-collective .site-header--overlay:not(.scrolled) .nav-mega__trigger:hover,
body.clean-collective .site-header--overlay:not(.scrolled) .nav-mega.open .nav-mega__trigger {
  color: var(--color-white, #fff) !important;
}

/* Book Now — restore pill outline stripped by Elementor button reset */
body.clean-collective .nav-dropdown--book .nav-dropdown__toggle {
  border: 1.5px solid var(--color-secondary, #6b8260) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.clean-collective .site-header:not(.site-header--overlay) .nav-dropdown--book .nav-dropdown__toggle,
body.clean-collective .site-header--overlay.scrolled .nav-dropdown--book .nav-dropdown__toggle {
  border-color: var(--color-secondary, #6b8260) !important;
  color: var(--color-secondary, #6b8260) !important;
}

body.clean-collective .site-header:not(.site-header--overlay) .nav-dropdown--book .nav-dropdown__toggle:hover,
body.clean-collective .site-header:not(.site-header--overlay) .nav-dropdown--book.open .nav-dropdown__toggle,
body.clean-collective .site-header--overlay.scrolled .nav-dropdown--book .nav-dropdown__toggle:hover,
body.clean-collective .site-header--overlay.scrolled .nav-dropdown--book.open .nav-dropdown__toggle {
  border-color: var(--color-secondary-dark, #556652) !important;
  background: var(--color-bg-alt, #eef0ea) !important;
  color: var(--color-secondary-dark, #556652) !important;
}

body.clean-collective .site-header--overlay:not(.scrolled) .nav-dropdown--book .nav-dropdown__toggle {
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: var(--color-white, #fff) !important;
}

body.clean-collective .site-header--overlay:not(.scrolled) .nav-dropdown--book .nav-dropdown__toggle:hover,
body.clean-collective .site-header--overlay:not(.scrolled) .nav-dropdown--book.open .nav-dropdown__toggle {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--color-white, #fff) !important;
  color: var(--color-white, #fff) !important;
}

/* Google review modal close button */
body.clean-collective .review-modal__close,
body.clean-collective .review-modal__close:focus,
body.clean-collective .review-modal__close:focus-visible {
  background: var(--color-bg-alt, #eef0ea) !important;
  background-color: var(--color-bg-alt, #eef0ea) !important;
  color: var(--color-primary, #252e28) !important;
  border: 1px solid var(--color-border, #c5cdc0) !important;
  box-shadow: none !important;
}

body.clean-collective .review-modal__close:hover {
  background: var(--color-primary, #252e28) !important;
  background-color: var(--color-primary, #252e28) !important;
  color: var(--color-white, #fff) !important;
  border-color: var(--color-primary, #252e28) !important;
}

body.clean-collective .review-modal__close svg {
  display: block !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
  max-width: none !important;
  max-height: none !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
}

/* Reviews carousel arrows — restore circular nav buttons stripped by Elementor button reset */
body.clean-collective .reviews-carousel__arrow,
body.clean-collective .reviews-carousel__arrow:focus,
body.clean-collective .reviews-carousel__arrow:focus-visible {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  background: var(--color-white, #fff) !important;
  background-color: var(--color-white, #fff) !important;
  border: 1px solid rgba(37, 46, 40, 0.14) !important;
  border-radius: 50% !important;
  color: var(--color-primary, #252e28) !important;
  box-shadow: 0 4px 14px rgba(37, 46, 40, 0.08) !important;
  cursor: pointer !important;
}

body.clean-collective .reviews-carousel__arrow:hover:not(:disabled) {
  background: var(--color-accent, #a4c96b) !important;
  background-color: var(--color-accent, #a4c96b) !important;
  border-color: rgba(30, 38, 32, 0.35) !important;
  color: var(--color-white, #fff) !important;
}

body.clean-collective .reviews-carousel__arrow:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

body.clean-collective .reviews-carousel__arrow svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
}

/* Announcement bar close — restore pill + SVG stripped by Elementor button reset */
body.clean-collective .announcement-banner__close,
body.clean-collective .announcement-banner__close:focus,
body.clean-collective .announcement-banner__close:focus-visible {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: var(--radius-pill, 9999px) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  box-shadow: none !important;
}

body.clean-collective .announcement-banner__close:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  color: var(--color-white, #fff) !important;
}

body.clean-collective .announcement-banner__close svg {
  display: block !important;
  width: 0.875rem !important;
  height: 0.875rem !important;
  min-width: 0.875rem !important;
  min-height: 0.875rem !important;
  max-width: none !important;
  max-height: none !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

@media (max-width: 640px) {
  body.clean-collective .announcement-banner__close,
  body.clean-collective .announcement-banner__close:focus,
  body.clean-collective .announcement-banner__close:focus-visible {
    width: 1.625rem !important;
    height: 1.625rem !important;
  }
}

/* Estimate form — restore bordered tiles stripped by Elementor button reset */
body.clean-collective .section--estimate .dirtyness-btn,
body.clean-collective .section--estimate .contact-method-card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--radius-sm, 8px) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--color-white, #fff) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body.clean-collective .section--estimate .contact-method-card {
  border-radius: var(--radius-md, 12px) !important;
  padding: 0.875rem 1rem !important;
  font-family: var(--font-heading, inherit) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  text-align: center !important;
}

body.clean-collective .section--estimate .dirtyness-btn:hover,
body.clean-collective .section--estimate .contact-method-card:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(164, 201, 107, 0.45) !important;
  color: var(--color-white, #fff) !important;
}

body.clean-collective .section--estimate .dirtyness-btn.selected,
body.clean-collective .section--estimate .contact-method-card.selected {
  border-width: 3px !important;
  border-color: var(--color-accent, #a4c96b) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--color-white, #fff) !important;
  box-shadow: none !important;
}

/* FAQ / content accordions — restore original light styling on WordPress */
body.clean-collective .accordion-trigger,
body.clean-collective .accordion-item.open .accordion-trigger,
body.clean-collective .accordion-item.open .accordion-trigger:hover,
body.clean-collective .accordion-item.open .accordion-trigger:focus,
body.clean-collective .accordion-item.open .accordion-trigger:focus-visible {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  white-space: normal !important;
  height: auto !important;
  min-height: 56px !important;
  background: var(--color-white, #fff) !important;
  background-color: var(--color-white, #fff) !important;
  color: var(--color-primary, #252e28) !important;
}

body.clean-collective .accordion-trigger:hover,
body.clean-collective .accordion-trigger:focus,
body.clean-collective .accordion-trigger:focus-visible {
  background: var(--color-bg-alt, #eef0ea) !important;
  background-color: var(--color-bg-alt, #eef0ea) !important;
  color: var(--color-primary, #252e28) !important;
}

body.clean-collective .accordion-trigger svg {
  color: var(--color-secondary-dark, #556652) !important;
  flex-shrink: 0 !important;
  margin-top: 0.125rem !important;
}

body.clean-collective .accordion-trigger__label {
  min-width: 0 !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

body.clean-collective .accordion-panel,
body.clean-collective .accordion-panel__inner {
  background: var(--color-white, #fff) !important;
  background-color: var(--color-white, #fff) !important;
}

/* Mobile menu dropdown toggles (Services, Book Now) — Elementor styles buttons white */
body.clean-collective .mobile-nav__toggle,
body.clean-collective .mobile-nav__toggle:hover,
body.clean-collective .mobile-nav__toggle:focus,
body.clean-collective .mobile-nav__toggle:focus-visible,
body.clean-collective .mobile-nav__toggle:active,
body.clean-collective .mobile-nav__toggle[aria-expanded="true"] {
  color: var(--color-primary, #252e28) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border, #d9d4cc) !important;
  box-shadow: none !important;
}

body.clean-collective .mobile-nav__link,
body.clean-collective .mobile-nav__link:hover,
body.clean-collective .mobile-nav__link:focus,
body.clean-collective .mobile-nav__link:focus-visible {
  color: var(--color-primary, #252e28) !important;
}

body.clean-collective .mobile-nav__phone-bar,
body.clean-collective .mobile-nav__phone-bar:hover,
body.clean-collective .mobile-nav__phone-bar:focus,
body.clean-collective .mobile-nav__phone-bar:focus-visible {
  display: flex !important;
  color: var(--color-white, #fff) !important;
  background: var(--color-primary, #252e28) !important;
  background-color: var(--color-primary, #252e28) !important;
  border-radius: 0 !important;
}

body.clean-collective .mobile-nav__phone-bar:hover {
  background: var(--color-primary-light, #323d35) !important;
  background-color: var(--color-primary-light, #323d35) !important;
  color: var(--color-white, #fff) !important;
}

body.clean-collective .mobile-nav__phone-bar svg {
  color: var(--color-accent, #a4c96b) !important;
  stroke: currentColor !important;
}

@media (max-width: 1200px) {
  body.clean-collective .site-header__inner {
    padding-left: var(--header-gutter-start, 0.625rem) !important;
    padding-right: var(--header-gutter-end, 0.375rem) !important;
    gap: 0.5rem !important;
  }

  body.clean-collective .site-header__actions {
    gap: 0.5rem !important;
    margin-right: 0 !important;
  }

  body.clean-collective .mobile-nav.open .mobile-nav__phone-bar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: calc(100% + var(--header-gutter-start, 0.625rem) + var(--header-gutter-end, 0.375rem)) !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--header-gutter-start, 0.625rem)) !important;
    margin-right: calc(-1 * var(--header-gutter-end, 0.375rem)) !important;
    padding-left: var(--header-gutter-start, 0.625rem) !important;
    padding-right: var(--header-gutter-end, 0.375rem) !important;
    z-index: 2 !important;
  }

  body.clean-collective .mobile-nav {
    padding-left: var(--header-gutter-start, 0.625rem) !important;
    padding-right: var(--header-gutter-end, 0.375rem) !important;
  }

  body.clean-collective .mobile-nav__toggle::after {
    width: var(--mobile-menu-toggle-size, 40px) !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }
}

/* Blog posts — no WordPress comment form */
body.clean-collective.single-post .comments-area,
body.clean-collective.single-post #respond,
body.clean-collective.single-post .comment-respond {
  display: none !important;
}

/* Contact form — preserve original styling under Elementor/Hello */
body.clean-collective .contact-form .form-label {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--color-primary, #252e28) !important;
  margin-bottom: 0.5rem !important;
}

body.clean-collective .contact-form .form-input,
body.clean-collective .contact-form .form-textarea,
body.clean-collective .contact-form .form-select {
  width: 100% !important;
  padding: 0.875rem 1rem !important;
  border: 1px solid var(--color-border, #d9d4cc) !important;
  border-radius: var(--radius-sm, 8px) !important;
  background: var(--color-white, #fff) !important;
  background-color: var(--color-white, #fff) !important;
  color: var(--color-text, #3d3832) !important;
  min-height: 48px !important;
  box-shadow: none !important;
  font-family: var(--font-body, Inter, sans-serif) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

body.clean-collective .contact-form .form-textarea {
  min-height: 140px !important;
  resize: vertical !important;
}

body.clean-collective .contact-form .form-input:focus,
body.clean-collective .contact-form .form-textarea:focus,
body.clean-collective .contact-form .form-select:focus {
  outline: none !important;
  border-color: var(--color-secondary, #6b8260) !important;
  box-shadow: 0 0 0 3px rgba(184, 160, 136, 0.2) !important;
}

body.clean-collective .contact-form .form-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

@media (max-width: 640px) {
  body.clean-collective .contact-form .form-row {
    grid-template-columns: 1fr !important;
  }
}

body.clean-collective .contact-form .btn[type="submit"] {
  margin-top: 0.5rem !important;
}