/* Redefine rainy-window glass theme */

:root {
  --rain-glass-bg: rgba(184, 220, 242, 0.48);
  --rain-glass-bg-strong: rgba(203, 232, 249, 0.62);
  --rain-glass-border: rgba(220, 244, 255, 0.70);
  --rain-glass-shadow: 0 12px 36px rgba(14, 56, 92, 0.22);
  --rain-glass-radius: 20px;
}

html {
  min-height: 100%;
  background: #7894ad url('/images/site/blue-background.jpg') center center / cover fixed no-repeat !important;
}

body {
  min-height: 100vh;
  background: rgba(94, 124, 150, 0.10) !important;
}

/* Remove opaque page-level backgrounds so the rainy scene stays visible. */
#app,
#swup,
.page-container,
.main-content,
.main-content-container,
.home-content-container,
.post-content-container {
  background: transparent !important;
}

/* The sidebar wrapper spans the full page height. It is layout only, not a
   card; keeping it transparent avoids the tall glass column seen on v2.9.0. */
html body .home-sidebar-container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Redefine uses this white wrapper on friends, tags, categories and other
   template pages. It must be glass, otherwise it hides the site background. */
html body div.page-template-container {
  background-color: rgba(224, 241, 251, 0.52) !important;
  background-image: linear-gradient(
    135deg,
    rgba(244, 251, 255, 0.42),
    rgba(190, 224, 244, 0.20)
  ) !important;
  border: 1px solid rgba(231, 247, 255, 0.72) !important;
  border-radius: var(--rain-glass-radius) !important;
  box-shadow: 0 10px 32px rgba(14, 56, 92, 0.14),
              inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
}

/* Main cards, article panels and sidebars. */
html body li.home-article-item,
html body .post-entry,
html body .post-card,
html body div.article-content-container,
html body .article-content,
html body div.sidebar-content,
html body div.sidebar-links,
html body div.toc-content-container,
html body .archive-content-container,
html body .category-content-container,
html body .tag-content-container,
html body .friends-content-container,
html body .page-content-container,
html body .comment-container {
  background-color: var(--rain-glass-bg) !important;
  background-image: linear-gradient(
    135deg,
    rgba(225, 244, 255, 0.42),
    rgba(150, 205, 236, 0.26)
  ) !important;
  border: 1px solid var(--rain-glass-border) !important;
  border-radius: var(--rain-glass-radius) !important;
  box-shadow: var(--rain-glass-shadow),
              inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
}

/* Template pages keep a light glass surface over the site background. */
html body .archive-content-container,
html body .category-content-container,
html body .tag-content-container,
html body .friends-content-container,
html body .page-content-container,
html body .comment-container {
  background-color: rgba(224, 241, 251, 0.52) !important;
  background-image: linear-gradient(
    135deg,
    rgba(247, 252, 255, 0.46),
    rgba(188, 223, 244, 0.18)
  ) !important;
  border-color: rgba(231, 247, 255, 0.72) !important;
  box-shadow: 0 10px 32px rgba(14, 56, 92, 0.14),
              inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  -webkit-backdrop-filter: blur(16px) saturate(122%) !important;
  backdrop-filter: blur(16px) saturate(122%) !important;
}

/* Restore Redefine's original white article and TOC cards. */
html body div.article-content-container,
html body div.toc-content-container {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: var(--border-color, rgba(229, 231, 235, 0.92)) !important;
  box-shadow: var(--redefine-box-shadow, 0 8px 24px rgba(30, 55, 80, 0.10)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Code blocks use tables internally. Keep their line-number gutter neutral
   instead of inheriting the blue glass table style. */
html body figure.highlight,
html body figure.highlight table,
html body figure.highlight td.code,
html body figure.highlight td.code pre {
  background-color: #fdfdfd !important;
  background-image: none !important;
}

html body figure.highlight td.gutter,
html body figure.highlight td.gutter pre {
  background-color: #f5f6f7 !important;
  background-image: none !important;
  border-color: #e5e7eb !important;
}

/* A readable footer card shared by posts, friends and other inner pages. */
html body .main-content-footer footer.footer,
html body footer.footer {
  width: calc(100% - 40px) !important;
  max-width: 1200px !important;
  margin: 24px auto !important;
  padding: 20px 24px !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(14, 56, 92, 0.14) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
}

/* Navbar: thinner glass so it does not visually overpower the page. */
:is(.navbar-container, .navbar, header) {
  background: rgba(225, 239, 249, 0.28) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.38) !important;
  box-shadow: 0 6px 24px rgba(22, 52, 78, 0.12) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}

/* Small nested blocks should remain readable without becoming opaque. */
:is(.announcement, .sidebar-item, .copyright-info, blockquote) {
  background-color: var(--rain-glass-bg-strong) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
}

/* A restrained highlight that suits the cool rainy palette. */
a,
.active,
.toc-active {
  --primary-color: #3b82f6;
}

/* Dark mode glass. Covers the common theme markers used by Redefine versions. */
html.dark,
html[data-theme='dark'],
body.dark-mode {
  --rain-glass-bg: rgba(16, 30, 44, 0.48);
  --rain-glass-bg-strong: rgba(19, 36, 53, 0.62);
  --rain-glass-border: rgba(193, 220, 239, 0.20);
  --rain-glass-shadow: 0 14px 40px rgba(0, 8, 18, 0.38);
}

html.dark :is(.navbar-container, .navbar, header),
html[data-theme='dark'] :is(.navbar-container, .navbar, header),
body.dark-mode :is(.navbar-container, .navbar, header) {
  background: rgba(12, 27, 41, 0.46) !important;
  border-bottom-color: rgba(205, 229, 245, 0.16) !important;
}

/* Mobile browsers often handle fixed backgrounds poorly; the fixed image is
   replaced with a normal cover background while preserving the same look. */
@media (max-width: 768px) {
  html {
    background-attachment: scroll !important;
    background-position: 56% center !important;
  }

  html body li.home-article-item,
  html body div.sidebar-content,
  html body div.sidebar-links,
  html body .page-content-container,
  html body .comment-container {
    background-color: rgba(194, 226, 245, 0.60) !important;
    -webkit-backdrop-filter: blur(13px) saturate(125%) !important;
    backdrop-filter: blur(13px) saturate(125%) !important;
  }
}

/* Accessibility/performance fallback. */
@media (prefers-reduced-transparency: reduce) {
  html body :is(
    .home-article-item,
    .post-entry,
    .post-card,
    .article-content-container,
    .article-content,
    .sidebar-content,
    .sidebar-links,
    .toc-content-container,
    .archive-content-container,
    .category-content-container,
    .tag-content-container,
    .friends-content-container,
    .page-content-container,
    .comment-container
  ) {
    background: rgba(239, 247, 252, 0.90) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}