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

body.hw-library-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-library-react-shell .hw-btn--primary,
body.hw-library-react-shell .hw-btn--primary:hover,
body.hw-library-react-shell .hw-btn--primary:focus,
body.hw-library-react-shell .hw-btn--primary:active,
body.hw-library-react-shell a.hw-btn--primary:hover {
  color: #fff;
}

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

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

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

body.hw-library-react-shell .site-main.hw-library-react-shell,
body.hw-library-react-shell #primary.hw-library-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-library-react-shell .entry-hero-container,
body.hw-library-react-shell .entry-hero-layout-wrap,
body.hw-library-react-shell .entry-hero,
body.hw-library-react-shell .kadence-entry-header,
body.hw-library-react-shell .kadence-below-title-meta,
body.hw-library-react-shell article.page > header.entry-header,
body.hw-library-react-shell .entry-header-wrap,
body.hw-library-react-shell .page-header,
body.hw-library-react-shell .entry-title-wrap,
body.hw-library-react-shell .wp-block-post-title {
  display: none !important;
}

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

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