/* Wedding site theme — shared by splash_page.html (light, `theme-light`) and
   guest_dashboard.html (dark wood, `theme-rustic`). Layout, spacing, and
   typography sizing live inline as Tailwind utility classes in the templates
   (see _partials/_head.html's tailwind.config); this file only holds what
   Tailwind utilities can't express cleanly: the wood-plank background
   texture, the mobile nav drawer's open/closed state (dashboard only, since
   the splash page has no nav), and per-theme flash message colors. */

:root {
  --wood: #2b1d14;
  --wood-dark: #1c140e;
}

body.theme-rustic {
  background-color: var(--wood-dark);
  background-image:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.02) 0px,
      rgba(255, 255, 255, 0.02) 2px,
      transparent 2px,
      transparent 140px
    ),
    linear-gradient(180deg, var(--wood) 0%, var(--wood-dark) 100%);
  background-attachment: fixed;
}

/* Mobile nav drawer. #nav-links is an ID selector so it must be matched by
   an equally-or-more specific selector to toggle open, not a bare class. */
#nav-links {
  display: none;
}
#nav-links.is-open {
  display: flex;
}
@media (min-width: 768px) {
  #nav-links {
    display: flex !important;
  }
}

/* Flash message categories (flask `flash(msg, category)`). Two variants,
   scoped to each page's background so the text stays readable either way —
   guest_dashboard.html's dark wood background needs light text; splash_page's
   light beige background needs dark text. */
body.theme-rustic .success {
  background-color: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #bbf7d0;
}
body.theme-rustic .danger {
  background-color: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: #fecaca;
}
body.theme-rustic .info {
  background-color: rgba(147, 197, 253, 0.15);
  border: 1px solid rgba(147, 197, 253, 0.3);
  color: #bfdbfe;
}

body.theme-light .success {
  background-color: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
}
body.theme-light .danger {
  background-color: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}
body.theme-light .info {
  background-color: #dbeafe;
  border: 1px solid #93c5fd;
  color: #1e3a8a;
}