/* ============================================================
   React homepage shell — canvas below Hearthwrite global nav
   Used when hw_homepage_react_shell_active() swaps in home-react-shell.php
============================================================ */

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

/* Full-bleed WordPress chrome — stage keeps its own max-width in home-app.css */
body.hw-homepage-react-shell #wrapper,
body.hw-homepage-react-shell #inner-wrap,
body.hw-homepage-react-shell .site,
body.hw-homepage-react-shell .site-content,
body.hw-homepage-react-shell #content,
body.hw-homepage-react-shell #primary,
body.hw-homepage-react-shell .content-area,
body.hw-homepage-react-shell .content-container,
body.hw-homepage-react-shell .site-container,
body.hw-homepage-react-shell .content-bg,
body.hw-homepage-react-shell .content-wrap,
body.hw-homepage-react-shell .entry-content-wrap,
body.hw-homepage-react-shell .entry-content,
body.hw-homepage-react-shell .inside-article,
body.hw-homepage-react-shell article.page,
body.hw-homepage-react-shell .hw-home-react-shell {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
}

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

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

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

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

/* Stage keeps its own usable max-width from home-app.css (Collections parity) */
body.hw-homepage-react-shell #hw-home-root .hw-home-app__stage {
  margin-inline: auto;
}

body.hw-homepage-react-shell .hw-home-admin-footer-slot {
  max-width: var(--hw-site-header-max, 1560px);
  margin: var(--hw-space-lg, 1rem) auto;
  padding-inline: var(--hw-hero-gutter, 1.5rem);
  text-align: center;
}