/* ============================================================
   React Explore shell — canvas below Hearthwrite global nav
   Active when hw_explore_react_shell_active() swaps template
============================================================ */

body.hw-explore-react-shell {
  overflow-x: clip;
  background: var(--hw-fe-canvas, var(--hw-canvas-bg, var(--hw-bg, #f7f3ed)));
  background-color: var(--hw-fe-bg, var(--hw-bg, #f7f3ed));
  background-attachment: fixed;
  color: var(--hw-text, #24211d);
}

body.hw-explore-react-shell .hw-btn--primary,
body.hw-explore-react-shell .hw-btn--primary:hover,
body.hw-explore-react-shell .hw-btn--primary:focus,
body.hw-explore-react-shell .hw-btn--primary:active,
body.hw-explore-react-shell a.hw-btn--primary:hover {
  color: #fff;
}

/* Kadence maps --global-palette-btn-bg onto plain <button> — keep Explore chips readable */
body.hw-explore-react-shell #hw-explore-root button.hw-explore-toolbar__filters-btn,
body.hw-explore-react-shell #hw-explore-root button.hw-explore-toolbar__lane,
body.hw-explore-react-shell #hw-explore-root button.hw-explore-results__page,
body.hw-explore-react-shell #hw-explore-root button.hw-explore-results__bookmark,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip,
body.hw-explore-react-shell button.hw-explore-filters-modal__tab,
body.hw-explore-filters-open button.hw-explore-filters-modal__chip,
body.hw-explore-filters-open button.hw-explore-filters-modal__tab,
body.hw-explore-filters-open button.hw-explore-filters-modal__tags-nav-item,
body.hw-explore-filters-open .hw-explore-filters-modal__match button,
body.hw-explore-filters-open button.hw-explore-filters-modal__close,
body.hw-explore-filters-open button.hw-explore-filters-modal__backdrop {
  background-image: none;
  box-shadow: none;
  filter: none;
  transform: none;
}

/* Defeat Kadence :active orange flash when toggling chips off */
body.hw-explore-filters-open .hw-explore-filters-modal,
body.hw-explore-react-shell .hw-explore-filters-modal {
  --global-palette-btn-bg: transparent;
  --global-palette-btn-bg-hover: transparent;
  --global-palette1: transparent;
  --global-palette2: transparent;
}

body.hw-explore-filters-open button.hw-explore-filters-modal__chip,
body.hw-explore-filters-open button.hw-explore-filters-modal__chip:hover,
body.hw-explore-filters-open button.hw-explore-filters-modal__chip:focus,
body.hw-explore-filters-open button.hw-explore-filters-modal__chip:focus-visible,
body.hw-explore-filters-open button.hw-explore-filters-modal__chip:active,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip:hover,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip:focus,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip:focus-visible,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip:active {
  background-image: none !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none;
}

body.hw-explore-filters-open button.hw-explore-filters-modal__chip:not(.is-active):not(.is-included):not(.is-excluded),
body.hw-explore-filters-open button.hw-explore-filters-modal__chip:not(.is-active):not(.is-included):not(.is-excluded):hover,
body.hw-explore-filters-open button.hw-explore-filters-modal__chip:not(.is-active):not(.is-included):not(.is-excluded):focus,
body.hw-explore-filters-open button.hw-explore-filters-modal__chip:not(.is-active):not(.is-included):not(.is-excluded):active,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip:not(.is-active):not(.is-included):not(.is-excluded),
body.hw-explore-react-shell button.hw-explore-filters-modal__chip:not(.is-active):not(.is-included):not(.is-excluded):hover,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip:not(.is-active):not(.is-included):not(.is-excluded):focus,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip:not(.is-active):not(.is-included):not(.is-excluded):active {
  background-color: color-mix(in srgb, var(--hw-surface, #f3ebe3) 92%, transparent) !important;
  background-image: none !important;
  color: var(--hw-text, #24211d) !important;
}

body.hw-explore-filters-open button.hw-explore-filters-modal__chip.is-included,
body.hw-explore-filters-open button.hw-explore-filters-modal__chip.is-included:hover,
body.hw-explore-filters-open button.hw-explore-filters-modal__chip.is-included:focus,
body.hw-explore-filters-open button.hw-explore-filters-modal__chip.is-included:active,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip.is-included,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip.is-included:hover,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip.is-included:focus,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip.is-included:active {
  background-color: color-mix(in srgb, #1f7a4d 18%, #f3faf6) !important;
  background-image: none !important;
  color: #13452c !important;
}

body.hw-explore-filters-open button.hw-explore-filters-modal__chip.is-excluded,
body.hw-explore-filters-open button.hw-explore-filters-modal__chip.is-excluded:hover,
body.hw-explore-filters-open button.hw-explore-filters-modal__chip.is-excluded:focus,
body.hw-explore-filters-open button.hw-explore-filters-modal__chip.is-excluded:active,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip.is-excluded,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip.is-excluded:hover,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip.is-excluded:focus,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip.is-excluded:active {
  background-color: color-mix(in srgb, #c62828 18%, #fff5f4) !important;
  background-image: none !important;
  color: #7a1414 !important;
}

body.hw-explore-filters-open button.hw-explore-filters-modal__chip.is-active,
body.hw-explore-filters-open button.hw-explore-filters-modal__chip.is-active:hover,
body.hw-explore-filters-open button.hw-explore-filters-modal__chip.is-active:focus,
body.hw-explore-filters-open button.hw-explore-filters-modal__chip.is-active:active,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip.is-active,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip.is-active:hover,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip.is-active:focus,
body.hw-explore-react-shell button.hw-explore-filters-modal__chip.is-active:active {
  background-color: color-mix(in srgb, var(--hw-text, #24211d) 8%, var(--hw-elevated, #fffaf4)) !important;
  background-image: none !important;
  color: var(--hw-text, #24211d) !important;
}

body.hw-explore-react-shell #hw-explore-root button.hw-explore-toolbar__filters-btn:hover,
body.hw-explore-react-shell #hw-explore-root button.hw-explore-toolbar__filters-btn:focus-visible,
body.hw-explore-react-shell #hw-explore-root button.hw-explore-toolbar__filters-btn:active,
body.hw-explore-react-shell #hw-explore-root button.hw-explore-toolbar__lane:hover,
body.hw-explore-react-shell #hw-explore-root button.hw-explore-toolbar__lane:focus-visible,
body.hw-explore-react-shell #hw-explore-root button.hw-explore-toolbar__lane.is-active,
body.hw-explore-react-shell #hw-explore-root button.hw-explore-results__page:hover,
body.hw-explore-react-shell #hw-explore-root button.hw-explore-results__page.is-active {
  color: var(--hw-text, #24211d);
  background-image: none;
  box-shadow: none;
  filter: none;
  transform: none;
}

body.hw-explore-react-shell #hw-explore-root,
body.hw-explore-react-shell #hw-explore-root:hover,
body.hw-explore-react-shell .hw-explore-app,
body.hw-explore-react-shell .hw-explore-app:hover,
body.hw-explore-react-shell .hw-explore-app [data-hw-section]:hover {
  background-image: none;
  filter: none;
}

body.hw-explore-react-shell #wrapper,
body.hw-explore-react-shell #inner-wrap,
body.hw-explore-react-shell .site,
body.hw-explore-react-shell .site-content,
body.hw-explore-react-shell #content,
body.hw-explore-react-shell #primary,
body.hw-explore-react-shell .content-area,
body.hw-explore-react-shell .content-container,
body.hw-explore-react-shell .site-container,
body.hw-explore-react-shell .content-bg,
body.hw-explore-react-shell .content-wrap,
body.hw-explore-react-shell .entry-content-wrap,
body.hw-explore-react-shell .entry-content,
body.hw-explore-react-shell .inside-article,
body.hw-explore-react-shell article.page,
body.hw-explore-react-shell .hw-explore-react-shell {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
}

body.hw-explore-react-shell #inner-wrap {
  display: block;
}

body.hw-explore-react-shell #secondary,
body.hw-explore-react-shell .sidebar {
  display: none;
}

body.hw-explore-react-shell .site-main.hw-explore-react-shell,
body.hw-explore-react-shell #primary.hw-explore-react-shell {
  display: block;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  float: none;
  flex: 1 1 100%;
  min-height: 100vh;
  padding: 0;
  overflow: visible;
}

body.hw-explore-react-shell .entry-hero-container,
body.hw-explore-react-shell .entry-hero-layout-wrap,
body.hw-explore-react-shell .entry-hero,
body.hw-explore-react-shell .kadence-entry-header,
body.hw-explore-react-shell .kadence-below-title-meta,
body.hw-explore-react-shell article.page > header.entry-header,
body.hw-explore-react-shell .entry-header-wrap,
body.hw-explore-react-shell .page-header,
body.hw-explore-react-shell .entry-title-wrap,
body.hw-explore-react-shell .wp-block-post-title {
  display: none !important;
}

body.hw-explore-react-shell #hw-explore-root,
body.hw-explore-react-shell .hw-explore-app {
  width: 100%;
  max-width: none;
  margin-inline: auto;
}

body.hw-explore-react-shell #hw-explore-root .hw-explore-app__stage {
  margin-inline: auto;
}