/**
 * Content area background & surfaces (homepage, articles, post).
 */
:root {
  --content-bg-top: #f6fbfb;
  --content-bg-bottom: #e8eef2;
  --content-bg: linear-gradient(180deg, var(--content-bg-top) 0%, var(--content-bg-bottom) 100%);
  --content-surface: #ffffff;
  --content-surface-soft: rgba(255, 255, 255, 0.88);
  --content-border: #dfe8ec;
  --content-border-soft: rgba(223, 232, 236, 0.85);
  --content-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  --content-shadow-hover: 0 12px 28px rgba(13, 148, 136, 0.1);
  --content-accent: #0d9488;
  --content-accent-light: #2dd4bf;
}

.io-grey-mode body {
  background: var(--content-bg) !important;
  background-attachment: fixed;
}

.page-container {
  background: transparent;
}

.main-content.flex-fill {
  background: var(--content-bg);
  min-height: 100vh;
}

#content.content-site,
#content.container {
  background: transparent;
}

/* Hero / search strip blends into page bg */
.header-big.bg-gradual::before {
  background-image: linear-gradient(to top, var(--content-bg-bottom) 0%, transparent 80%) !important;
}

.content-site.customize-site.big .p-title {
  background: transparent !important;
  box-shadow: none !important;
}

/* World clock & search widgets styled in hero-widgets.css */
.main-content .card,
.main-content .panel.card,
.main-content .block {
  border: 1px solid var(--content-border) !important;
  border-radius: 14px !important;
  background: var(--content-surface) !important;
  box-shadow: var(--content-shadow) !important;
}

.main-content .card:hover {
  box-shadow: var(--content-shadow-hover) !important;
}

/* Search input on homepage hero */
#content.container .card,
#content.container .panel.card {
  border: 1px solid var(--content-border);
  border-radius: 14px;
  background: var(--content-surface);
  box-shadow: var(--content-shadow);
}

.sidebar-content-box .card {
  border: 1px solid var(--content-border);
  background: var(--content-surface);
}

/* Footer sits on same canvas */
footer.main-footer {
  background: transparent;
}

footer.main-footer .footer-inner {
  border-top: 1px solid var(--content-border);
  padding-top: 1rem;
}

/* Dark mode */
.io-black-mode body {
  background: linear-gradient(180deg, #1a1d21 0%, #121417 100%) !important;
}

.io-black-mode .main-content.flex-fill {
  background: linear-gradient(180deg, #1a1d21 0%, #121417 100%);
}

.io-black-mode .main-content .card,
.io-black-mode .main-content .panel.card {
  background: #2c2e2f !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 767.98px) {
  .main-content.flex-fill {
    background: linear-gradient(180deg, #f6fbfb 0%, #eef4f7 100%);
  }
}