/* Soft, welcoming community theme */
:root {
  --pp-paper: #f5f0ea;
  --pp-paper-deep: #e9dfd4;
  --pp-ink: #1d1a18;
  --pp-ink-soft: #433a35;
  --pp-stone: #cab39a;
  --pp-gold: #b88b52;
  --pp-gold-deep: #8e673c;
  --pp-sage: #85997f;
  --pp-sage-deep: #536c5c;
  --pp-rose: #9b776a;
  --pp-rose-soft: #b36d5a;
  --pp-ink-muted: #5d524b;
  --pp-white: #ffffff;
  --pp-accent: var(--pp-gold);
}

body {
  background:
    radial-gradient(circle at top, rgba(184, 139, 82, 0.08), transparent 35%),
    linear-gradient(180deg, #faf6f2 0%, #efe7dc 100%);
  color: var(--pp-ink);
  font-family: "Noto Sans", "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand .site-title,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Noto Serif", Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--pp-ink);
}

p, li, label, .text-muted, .small {
  color: var(--pp-ink-muted);
  font-size: 1rem;
}

a {
  color: var(--pp-sage-deep);
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
  color: var(--pp-rose-soft);
}

/* Header / navbar */
.header-theme {
  background: linear-gradient(90deg, rgba(23, 20, 18, 0.98) 0%, rgba(54, 48, 43, 0.97) 100%);
  color: var(--pp-paper);
  border-bottom: 1px solid rgba(184, 139, 82, 0.28);
  box-shadow: 0 10px 22px rgba(20, 17, 15, 0.12);
}

.header-theme { position: relative; z-index: 1030; }

.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--pp-ink) !important;
  text-shadow: none;
}

.navbar-nav .nav-link,
.navbar-nav .dropdown-toggle {
  color: rgba(245, 240, 234, 0.92) !important;
  font-weight: 500;
}

.navbar-nav .nav-link:hover,
.navbar-nav .dropdown-toggle:hover {
  color: var(--pp-gold) !important;
}

/* Buttons */
.btn-pp-primary {
  background: linear-gradient(180deg, var(--pp-gold), var(--pp-gold-deep));
  color: #fffaf4;
  border: 1px solid rgba(126, 97, 69, 0.2);
  border-radius: 999px;
  padding: 0.72rem 1.3rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(98, 79, 61, 0.16);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-pp-primary:focus,
.btn-pp-primary:hover {
  box-shadow: 0 0 0 3px rgba(179, 109, 90, 0.12), 0 12px 20px rgba(98, 79, 61, 0.2);
}

.btn-pp-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 20px rgba(98, 79, 61, 0.2);
  filter: saturate(1.02);
  color: #fffaf4;
}

.btn-pp-ghost {
  background: rgba(255, 255, 255, 0.15);
  color: var(--pp-paper);
  border: 1px solid rgba(184, 139, 82, 0.26);
  border-radius: 999px;
}

.btn-outline-light {
  border-radius: 999px;
  color: var(--pp-ink);
  border-color: rgba(47, 59, 53, 0.25);
}

/* Cards */
.card-pp {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(29, 26, 24, 0.08);
  border-radius: 22px;
  box-shadow: 0 12px 24px rgba(29, 26, 24, 0.06);
}

/* Accent divider */
.hr-gold {
  border: none;
  height: 4px;
  background: linear-gradient(90deg, rgba(0,0,0,0), var(--pp-gold), rgba(179, 109, 90, 0.55), rgba(0,0,0,0));
  margin: 1rem 0;
}

/* Decorative backdrop containers */
.backdrop-lotus,
.backdrop-dragon {
  position: relative;
}

.backdrop-lotus::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/static/images/lotus.svg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 38%;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.backdrop-dragon::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/static/images/dragon.svg');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 28%;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.backdrop-lotus > *, .backdrop-dragon > * {
  position: relative;
  z-index: 1;
}

/* Footer */
.footer-pp {
  background: linear-gradient(180deg, #f7efe8 0%, #f1e5dc 100%);
  color: var(--pp-ink);
  padding: 1.25rem 0;
  border-top: 1px solid rgba(47, 59, 53, 0.08);
}

/* Jumbotron / hero readability improvements */
.jumbotron {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.82), rgba(239, 230, 220, 0.88)),
    linear-gradient(90deg, rgba(184, 139, 82, 0.04), rgba(83, 108, 92, 0.03));
  color: var(--pp-ink);
  padding: 3rem 2rem;
  border-radius: 28px;
  border: 1px solid rgba(61, 52, 46, 0.07);
  box-shadow: 0 16px 34px rgba(34, 30, 28, 0.05);
}

.jumbotron .display-5, .jumbotron .lead {
  color: var(--pp-ink);
}

.jumbotron .display-5 {
  font-size: clamp(2.3rem, 4vw, 4rem);
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}

.jumbotron .lead {
  font-size: 1.08rem;
  max-width: 60ch;
  color: var(--pp-ink-soft);
}

.card-pp h3,
.card-pp h4,
.card-pp h5 {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.96rem;
  color: var(--pp-ink-soft);
}

.btn,
.form-control,
.form-select,
.input-group-text {
  font-size: 0.96rem;
}

.form-label,
.label,
strong {
  letter-spacing: 0.02em;
}

/* small utilities */
.text-gold { color: var(--pp-gold); }
.text-red { color: var(--pp-rose); }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(transparent 96%, rgba(29, 26, 24, 0.015) 100%),
    radial-gradient(circle at 20% 0%, rgba(179, 109, 90, 0.04), transparent 24%);
  pointer-events: none;
  z-index: 0;
}

body > * {
  position: relative;
  z-index: 1;
}

/* responsive tweaks */
@media (max-width: 768px) {
  .backdrop-lotus { background-size: 60%; }
  .backdrop-dragon { background-size: 50%; }
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  margin-right: 1.5rem;
  padding-block: 0.5rem;
  text-decoration: none;
  text-shadow: none;
}

.navbar-logo {
  display: block;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  object-fit: contain;
}

.navbar-brand .site-title {
  color: var(--pp-paper);
  font-family: "Noto Serif", Georgia, serif;
  font-size: 1.26rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.navbar-brand:focus-visible {
  outline: 2px solid rgba(200, 156, 77, 0.6);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (max-width: 1199.98px) {
  .navbar-brand { gap: 0.5rem; margin-right: 0.75rem; }
  .navbar-logo { width: 44px; height: 44px; }
  .navbar-brand .site-title { font-size: 1.1rem; }
}

@media (max-width: 359.98px) {
  .navbar-logo { width: 38px; height: 38px; }
  .navbar-brand .site-title { font-size: 1rem; }
}