:root {
  --header-height: 72px;
  --admin-bar-height: 0px;
  --page-side-padding: 20px;
  --page-max-width: 1280px;
  --section-spacing: 24px;
}

body.admin-bar {
  --admin-bar-height: 46px;
}

@media (min-width: 783px) {
  body.admin-bar {
    --admin-bar-height: 32px;
  }
}

/* EXACTLY two breakpoints only */
@media (min-width: 1024px) {
  :root {
    --header-height: 84px;
    --page-side-padding: 32px;
    --section-spacing: 32px;
  }
}

/* ---------------------------------
   WordPress admin bar
   Handle in one place only
--------------------------------- */

body.admin-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#wpadminbar {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999 !important;
  transform: none !important;
}

/* ---------------------------------
   Global page spacing under header
   This file handles spacing ONLY
--------------------------------- */

html {
  scroll-padding-top: calc(var(--admin-bar-height) + var(--header-height));
  margin-top: 0 !important;
}

body {
  min-height: 100vh;
}

.site-main {
  display: block;
  padding-top: calc(var(--admin-bar-height) + var(--header-height));
}

.site-content,
.site-footer__inner {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-side-padding);
}

.site-content {
  padding-top: var(--section-spacing);
  padding-bottom: var(--section-spacing);
}

.site-footer__inner {
  padding-top: 20px;
  padding-bottom: 20px;
}

.entry-header,
.entry-content,
.no-results {
  margin-bottom: 20px;
}