/**
 * H5W global layout shell.
 *
 * The homepage header, footer, and primary content canvas establish 1290px as
 * the site's outer width. Inner templates share that outer shell while prose
 * and other reading-focused content may keep a narrower measure inside it.
 */

:root {
  --h5w-site-shell: 1290px;
  --h5w-site-gutter: 24px;
  --h5w-reading-column: 900px;
}

/* Kadence narrow templates still use the shared shell; their inner blocks can remain narrow. */
body:not(.home).content-width-narrow .content-container.site-container,
body:not(.home).content-width-narrow .hero-container.site-container {
  max-width: var(--h5w-site-shell);
  width: 100%;
}

/* H5W full-width Pages retain full-bleed backgrounds and align their inner shells. */
.h5w-start {
  --h5w-start-shell: var(--h5w-site-shell);
}

.h5w-summarize {
  --h5w-sum-shell: calc(var(--h5w-site-shell) - (2 * var(--h5w-site-gutter)));
}

.h5w-context-hub {
  --h5w-context-shell: calc(var(--h5w-site-shell) - (2 * var(--h5w-site-gutter)));
}

.h5w-guides {
  --h5w-guides-shell: calc(var(--h5w-site-shell) - (2 * var(--h5w-site-gutter)));
}

.h5w-safety-hub {
  --h5w-safety-shell: calc(var(--h5w-site-shell) - (2 * var(--h5w-site-gutter)));
}

.h5w-about__inner,
.h5w-sitemap__shell,
.h5w-tools-directory:not(.h5w-tools-directory--main),
.h5w-tools-toolbar {
  max-width: var(--h5w-site-shell);
}

.h5w-about__inner {
  padding-inline: var(--h5w-site-gutter);
}

/* The main directory keeps a full-bleed hero and aligns its working area to the shell. */
.h5w-tools-directory--main {
  max-width: none;
}

.h5w-tools-toolbar {
  padding-inline: var(--h5w-site-gutter);
}

.h5w-tools-directory--main > .h5w-tools-layout,
.h5w-tools-directory--main > .h5w-rating-method {
  max-width: calc(var(--h5w-site-shell) - (2 * var(--h5w-site-gutter)));
  width: calc(100% - (2 * var(--h5w-site-gutter)));
}

@media (max-width: 767px) {
  :root {
    --h5w-site-gutter: 16px;
  }
}