/* Envelie V4 — CSS entry point
   Imports all design tokens + shared component styles.
   Used by admin/ pages via: <link rel="stylesheet" href="../css/envelie-v4.css">
   ============================================================ */
@import url("../shared.css");

/* ============ DONOR SUB-PAGES ============ */
html { overflow-x: hidden; }
.page-shell { min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 2; }
.nav-link[data-hidden-mobile="true"] { display: inline-flex; }
.hero { position: relative; overflow: hidden; padding: 56px 0 28px; }
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--donor-hero-glow-1, 10% 18%), var(--hero-glow-1), transparent 48%),
    radial-gradient(circle at var(--donor-hero-glow-2, 86% 12%), var(--hero-glow-2), transparent 42%);
  mask-image: linear-gradient(to bottom, #000 24%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, #000 24%, transparent 92%);
}
/* .eyebrow inherits from shared.css — static dot (no pulse animation) for donor pages */
.eyebrow .dot { animation: none; }
.hero-h1 {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.8vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 800;
  background: var(--hero-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lede {
  margin-top: 16px;
  max-width: var(--donor-lede-max-width, 660px);
  font-size: 17px;
  line-height: 1.65;
  color: var(--on-surface-variant);
}
.section-stack { display: flex; flex-direction: column; gap: 18px; }
.bullet-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}
.bullet-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
}
.icon-tile {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--primary-container) 18%, transparent);
  color: var(--primary);
}
.icon-tile.sage {
  background: color-mix(in srgb, var(--sage) 14%, transparent);
  color: var(--sage);
}
.icon-tile.warm {
  background: color-mix(in srgb, var(--warm-container) 18%, transparent);
  color: var(--warm);
}
.aurora-btn {
  min-height: 52px;
  padding: 0 2rem;
  border-radius: var(--radius-lg);
  border: 1.5px solid rgb(255 255 255 / 0.22);
  background: var(--aurora-bg);
  background-size: 300% 300%;
  color: var(--on-primary-fixed);
  box-shadow: 0 6px 22px var(--aurora-shadow);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
[data-theme="warm-wood"] .aurora-btn {
  color: #fff8ee;
}
.share-card {
  padding: clamp(24px, 4vw, 34px);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.share-copy {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: var(--donor-share-copy-max-width, 580px);
}
.ua-only-notice {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  border: 1.5px solid color-mix(in srgb, var(--outline-variant) 50%, transparent);
  background: color-mix(in srgb, var(--surface-container) 94%, transparent);
  color: var(--on-surface-variant);
  font-size: 14px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
}
@media (max-width: 560px) {
  .nav-link[data-hidden-mobile="true"] { display: none; }
  .share-card { align-items: flex-start; }
}
@media (max-width: 767px) {
  .ua-only-notice { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}