/* ============================================================
   app.css — Editorial Reverence Design System
   Săptămâna Sfântă 2026
   ============================================================ */

/* ── Material Symbols icon defaults ── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 24;
  font-size: 1.25rem;
  line-height: 1;
  vertical-align: middle;
}
.icon-sm  { font-size: 1rem;    }
.icon-md  { font-size: 1.25rem; }
.icon-lg  { font-size: 1.5rem;  }
.icon-xl  { font-size: 2rem;    }

/* ── Base ── */
body {
  background-color: #fbf9f4;
  color: #1b1c19;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}

/* ── Glassmorphism header ── */
.glass-header {
  background: rgba(251, 249, 244, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ── Navigation drawer ── */
#drawer-overlay {
  transition: opacity 0.3s ease;
}
#drawer {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#drawer.open {
  transform: translateX(0);
}

/* ── Day cards ── */
.day-card {
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.day-card:active {
  transform: scale(0.98);
}

/* ── Expanding accent line on cards ── */
.expand-line {
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Scripture block ── */
.scripture-block {
  font-family: 'Newsreader', serif;
  font-style: italic;
  border-left: 2px solid #6c5e06;
  padding-left: 1.25rem;
}

/* ── Progress bar ── */
.progress-fill {
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── View enter animation ── */
.view-enter {
  animation: fadeSlideIn 0.35s ease forwards;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── iOS / Android safe areas ── */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 1rem); }
.pt-safe { padding-top:    env(safe-area-inset-top,    0);    }

/* ── Share button pulse ── */
@keyframes pulse-gold {
  0%,  100% { box-shadow: 0 0 0 0px rgba(108, 94, 6, 0.3); }
  50%        { box-shadow: 0 0 0 8px  rgba(108, 94, 6, 0);  }
}
.share-pulse {
  animation: pulse-gold 2.5s ease infinite;
}

/* ── Read checkmark entrance ── */
.read-badge {
  animation: fadeSlideIn 0.3s ease;
}

/* ── Chip / liturgical marker ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #eae8e3;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #42474c;
  font-family: 'Manrope', sans-serif;
}
.chip.active   { background: #f7e382; color: #524700; }
.chip.tertiary { background: #4d3f62; color: #d1bfe9; }

/* ── Good Friday gradient card ── */
.good-friday-gradient {
  background: linear-gradient(135deg, #183241 0%, #36294a 100%);
}

/* ── Suppress scrollbar inside drawer ── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Loading skeleton pulse ── */
.skeleton {
  background: linear-gradient(90deg, #f0eee9 25%, #e4e2dd 50%, #f0eee9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 0.25rem;
}
@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Error state ── */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}

/* ── Dark mode (auto device sync) ── */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1c1c1a !important;
    color: #e3e3dd !important;
  }

  .glass-header {
    background: rgba(28, 28, 26, 0.90) !important;
  }

  /* Surface backgrounds */
  .bg-surface, .bg-background           { background-color: #1c1c1a !important; }
  .bg-surface-container-lowest          { background-color: #141412 !important; }
  .bg-surface-container-low             { background-color: #242421 !important; }
  .bg-surface-container                 { background-color: #282826 !important; }
  .bg-surface-container-high            { background-color: #2e2e2b !important; }
  .bg-surface-container-highest         { background-color: #333330 !important; }

  /* Text */
  .text-primary                         { color: #b0cadd !important; }
  .text-on-surface                      { color: #e3e3dd !important; }
  .text-on-background                   { color: #e3e3dd !important; }
  .text-on-surface-variant              { color: #c2c7cc !important; }
  .text-outline                         { color: #8c9198 !important; }
  .text-secondary                       { color: #d4c65c !important; }
  .text-on-secondary-container          { color: #f7e382 !important; }

  /* Secondary container (Easter card) */
  .bg-secondary-container               { background-color: #3a3400 !important; }

  /* Drawer */
  #drawer                               { background-color: #242421 !important; }

  /* Chips */
  .chip                                 { background: #333330 !important; color: #c2c7cc !important; }
  .chip.active                          { background: #4a4100 !important; color: #f7e382 !important; }
  .chip.tertiary                        { background: #4d3f62 !important; color: #d1bfe9 !important; }

  /* Scripture block */
  .scripture-block                      { border-color: #d4c65c !important; }

  /* Skeleton loader */
  .skeleton {
    background: linear-gradient(90deg, #242421 25%, #333330 50%, #242421 75%) !important;
  }

  /* Progress bar track */
  .bg-outline-variant\/20               { background-color: rgba(66, 71, 76, 0.3) !important; }
}