/**
 * Global page background — same mountain artwork as the home/demo screen.
 * Loaded on every HTML response via application/hooks/Site_assets.php
 */

html {
  min-height: 100%;
  background-color: #05070f;
}

body {
  min-height: 100vh;
  background-color: #05070f !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(5, 7, 15, 0.28) 0%,
      rgba(5, 7, 15, 0.42) 40%,
      rgba(5, 7, 15, 0.62) 100%
    ),
    url("../images/demo/hero-mountain.png") !important;
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Keep forms / cards readable on top of the artwork */
.login-container,
.forgot-container,
.reset-container,
.form-card,
.card,
.stat-card,
.workshop-container,
.option-card,
.modal-content,
.app-modal-card,
.demo-modal-card,
.upload-modal .modal-content,
.form-builder-left,
.form-builder-right,
.accordion-item,
.panel,
.content-card {
  background-color: #fff;
  backdrop-filter: blur(2px);
}

body:not(.demo-body) .container {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 24px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

body:not(.demo-body) .container .container {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Light UI titles that sit directly on the background */
body:not(.demo-body) .dashboard-title,
body:not(.demo-body) .container > h2,
body:not(.demo-body) .existing-section2 > h3,
body:not(.demo-body) .step-title2,
body:not(.demo-body) .info-message {
  color: #f4f6fb !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

body:not(.demo-body) .info-message {
  background: rgba(12, 18, 32, 0.72) !important;
  border-color: rgba(212, 175, 55, 0.28) !important;
  color: rgba(244, 246, 251, 0.9) !important;
}

/* Demo pages: one fixed mountain on body (demo-screen.css). Do not re-paint or crop it. */
body.demo-body {
  background-color: #05070f !important;
  background-image:
    radial-gradient(1200px 500px at 50% -10%, rgba(80, 110, 180, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(10, 16, 32, 0.22) 0%, rgba(5, 7, 15, 0.4) 45%, rgba(4, 6, 12, 0.72) 100%),
    url("../images/demo/hero-mountain.png") !important;
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

body.demo-body .demo-page::before {
  /* Full-viewport soft veil only — never a second mountain / hard seam */
  position: fixed !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(5, 7, 15, 0.08) 0%,
    rgba(5, 7, 15, 0.28) 55%,
    rgba(5, 7, 15, 0.55) 100%
  ) !important;
  opacity: 1 !important;
}

body.demo-body .demo-page::after {
  position: fixed !important;
  inset: 0 !important;
}

/* Global brand logo in headers */
.site-brand-logo {
  height: clamp(40px, 6vw, 56px);
  width: auto;
  max-width: min(260px, 52vw);
  display: block;
  object-fit: contain;
  object-position: left center;
}

.site-brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.header {
  display: flex !important;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.header > h1,
.header > h2 {
  flex: 1 1 auto;
  margin: 0;
}

.header .site-brand-link {
  order: -1;
}

.topbar .site-brand-logo {
  height: 48px;
}

.login-header .site-brand-logo,
.login-container .site-brand-logo {
  height: 64px;
  max-width: 280px;
  margin: 0 auto 16px;
}