:root {
  --panel-bg-light: rgba(255, 255, 255, 0.68);
  --panel-border-light: rgba(255, 255, 255, 0.32);
  --panel-shadow-light: rgba(41, 53, 73, 0.14);
  --panel-bg-dark: rgba(20, 24, 31, 0.58);
  --panel-border-dark: rgba(255, 255, 255, 0.08);
  --panel-shadow-dark: rgba(0, 0, 0, 0.34);
  --home-bg-blur: 0px;
  --home-bg-scale: 1.08;
  --home-bg-brightness: 0.98;
  --home-bg-saturate: 1;
  --home-bg-overlay-top: rgba(255, 255, 255, 0.08);
  --home-bg-overlay-bottom: rgba(255, 255, 255, 0.18);
  --home-bg-overlay-solid: rgba(236, 240, 244, 0.08);
}

html,
body {
  background: transparent !important;
}

/* One fixed wallpaper layer for the whole site */
#web_bg {
  position: fixed !important;
  inset: -140px !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: blur(var(--home-bg-blur)) brightness(var(--home-bg-brightness)) saturate(var(--home-bg-saturate));
  transform: scale(var(--home-bg-scale));
  transition: filter 220ms ease, transform 220ms ease;
}

/* Home page should use the global wallpaper only, not a second header background */
#body-wrap > #page-header.full_page {
  background-image: none !important;
  background-color: transparent !important;
  background-attachment: scroll !important;
}

/* Post pages should also rely on the single blurred global wallpaper */
#body-wrap.post > #page-header.post-bg {
  background-image: none !important;
  background-color: transparent !important;
  background-attachment: scroll !important;
}

#web_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--home-bg-overlay-top), var(--home-bg-overlay-bottom)),
    var(--home-bg-overlay-solid);
  transition: background 220ms ease;
}

/* Foreground panels float above the wallpaper */
#recent-posts .recent-post-item,
#aside-content .card-widget,
#post,
#page,
#archive,
.layout > div:first-child > .article-sort-item {
  background: var(--panel-bg-light) !important;
  border: 1px solid var(--panel-border-light);
  box-shadow: 0 16px 36px var(--panel-shadow-light);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

#recent-posts .recent-post-item:hover,
#aside-content .card-widget:hover,
#post:hover,
#page:hover,
.layout > div:first-child > .article-sort-item:hover {
  background: rgba(255, 255, 255, 0.76) !important;
  box-shadow: 0 20px 44px rgba(41, 53, 73, 0.18);
}

#page-header:not(.full_page)::before {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

#body-wrap > #page-header.full_page::before {
  background: transparent !important;
}

#body-wrap.post > #page-header.post-bg::before {
  background: transparent !important;
}

#body-wrap,
#footer,
#footer::before,
#footer .footer-other {
  background: transparent !important;
}

[data-theme='dark'] {
  --home-bg-brightness: 0.72;
  --home-bg-saturate: 0.92;
  --home-bg-overlay-top: rgba(9, 11, 16, 0.12);
  --home-bg-overlay-bottom: rgba(9, 11, 16, 0.26);
  --home-bg-overlay-solid: rgba(9, 11, 16, 0.1);
}

[data-theme='dark'] #recent-posts .recent-post-item,
[data-theme='dark'] #aside-content .card-widget,
[data-theme='dark'] #post,
[data-theme='dark'] #page,
[data-theme='dark'] #archive,
[data-theme='dark'] .layout > div:first-child > .article-sort-item {
  background: var(--panel-bg-dark) !important;
  border-color: var(--panel-border-dark);
  box-shadow: 0 16px 36px var(--panel-shadow-dark);
}

[data-theme='dark'] #recent-posts .recent-post-item:hover,
[data-theme='dark'] #aside-content .card-widget:hover,
[data-theme='dark'] #post:hover,
[data-theme='dark'] #page:hover,
[data-theme='dark'] .layout > div:first-child > .article-sort-item:hover {
  background: rgba(20, 24, 31, 0.68) !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
}

/* Restore the default page background on archive and standalone pages */
html:has(#body-wrap.page-archive),
html:has(#body-wrap.type-about),
html:has(#body-wrap.type-categories),
html:has(#body-wrap.type-tags),
html:has(#body-wrap.type-link),
body:has(#body-wrap.page-archive),
body:has(#body-wrap.type-about),
body:has(#body-wrap.type-categories),
body:has(#body-wrap.type-tags),
body:has(#body-wrap.type-link) {
  background: var(--global-bg) !important;
}

body:has(#body-wrap.page-archive) #web_bg,
body:has(#body-wrap.type-about) #web_bg,
body:has(#body-wrap.type-categories) #web_bg,
body:has(#body-wrap.type-tags) #web_bg,
body:has(#body-wrap.type-link) #web_bg {
  display: none !important;
}

#body-wrap.page-archive,
#body-wrap.type-about,
#body-wrap.type-categories,
#body-wrap.type-tags,
#body-wrap.type-link,
#body-wrap.page-archive #footer,
#body-wrap.type-about #footer,
#body-wrap.type-categories #footer,
#body-wrap.type-tags #footer,
#body-wrap.type-link #footer,
#body-wrap.page-archive #footer .footer-other,
#body-wrap.type-about #footer .footer-other,
#body-wrap.type-categories #footer .footer-other,
#body-wrap.type-tags #footer .footer-other,
#body-wrap.type-link #footer .footer-other {
  background: var(--global-bg) !important;
}

#body-wrap.page-archive #footer::before,
#body-wrap.type-about #footer::before,
#body-wrap.type-categories #footer::before,
#body-wrap.type-tags #footer::before,
#body-wrap.type-link #footer::before {
  background: transparent !important;
}

/* Crop header images from the bottom when the aspect ratio does not match */
#body-wrap.page-archive > #page-header,
#body-wrap.type-about > #page-header,
#body-wrap.type-categories > #page-header,
#body-wrap.type-tags > #page-header,
#body-wrap.type-link > #page-header {
  background-position: center 12% !important;
}