/* Peddi — custom styles. Bootstrap utilities take priority. */

/* ══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS & BOOTSTRAP VARIABLE OVERRIDES
   ══════════════════════════════════════════════════════════════════ */

:root,
[data-bs-theme="light"] {
  --pd-parchment:       #FDF6EC;
  --pd-parchment-mid:   #F7EDD6;
  --pd-parchment-dark:  #EDD9A3;
  --pd-saffron:         #D97706;
  --pd-saffron-dark:    #B45309;
  --pd-saffron-glow:    rgba(217, 119, 6, .14);
  --pd-forest:          #1B4332;
  --pd-forest-mid:      #2D6A4F;
  --pd-charcoal:        #1C1917;
  --pd-warm-border:     rgba(180, 100, 10, .2);
  --pd-warm-shadow:     0 2px 16px rgba(180, 100, 10, .09);

  /* Bootstrap body & surface overrides */
  --bs-body-bg:          var(--pd-parchment);
  --bs-body-bg-rgb:      253, 246, 236;
  --bs-body-color:       var(--pd-charcoal);
  --bs-secondary-bg:     var(--pd-parchment-mid);
  --bs-secondary-bg-rgb: 247, 237, 214;
  --bs-tertiary-bg:      var(--pd-parchment-dark);
  --bs-border-color:     rgba(180, 100, 10, .18);
  --bs-link-color:       var(--pd-saffron-dark);
  --bs-link-hover-color: var(--pd-saffron);
}

[data-bs-theme="dark"] {
  --pd-gold:        #F59E0B;
  --pd-gold-soft:   #FCD34D;
  --pd-indigo:      #1E1B4B;
  --pd-indigo-card: #272460;
  --pd-warm-border: rgba(245, 158, 11, .2);

  --bs-body-bg:          #1E1B4B;
  --bs-body-bg-rgb:      30, 27, 75;
  --bs-body-color:       #F0EBE0;
  --bs-secondary-bg:     #272460;
  --bs-secondary-bg-rgb: 39, 36, 96;
  --bs-tertiary-bg:      #2E2A6E;
  --bs-border-color:     rgba(245, 158, 11, .2);
  --bs-link-color:       #F59E0B;
  --bs-link-hover-color: #FCD34D;
}

/* ══════════════════════════════════════════════════════════════════
   2. TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════ */

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

.font-telugu {
  font-family: 'Noto Serif Telugu', serif;
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════════
   3. PEDDI BRAND LOGO
   ══════════════════════════════════════════════════════════════════ */

.peddi-logo {
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  background: linear-gradient(
    135deg,
    #8b4400 0%,
    #d4700a 20%,
    #f0a830 45%,
    #ffd060 55%,
    #f0a830 70%,
    #d4700a 85%,
    #8b4400 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none !important;
  display: inline-block;
}

.peddi-logo-nav { font-size: 1.45rem; letter-spacing: 4px; }
.peddi-logo-xl  { font-size: 3rem;   letter-spacing: 10px; line-height: 1.1; }

/* ══════════════════════════════════════════════════════════════════
   4. NAVBAR
   ══════════════════════════════════════════════════════════════════ */

.navbar-peddi {
  background-color: var(--pd-forest) !important;
  border-top: 3px solid var(--pd-saffron);
  box-shadow: 0 2px 18px rgba(0, 0, 0, .18);
}

[data-bs-theme="dark"] .navbar-peddi {
  background-color: #100e2e !important;
  border-top-color: #F59E0B;
}

.navbar-peddi .nav-link {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .92rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .75) !important;
  padding: .45rem .75rem;
  transition: color .15s ease;
  position: relative;
}

/* Animated saffron underline on hover/active */
.navbar-peddi .nav-link::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--pd-saffron);
  transition: left .18s ease, right .18s ease;
  border-radius: 1px;
}

.navbar-peddi .nav-link:hover::after,
.navbar-peddi .nav-link.active::after {
  left: .5rem;
  right: .5rem;
}

.navbar-peddi .nav-link:hover  { color: #fff !important; }
.navbar-peddi .nav-link.active { color: #fff !important; font-weight: 600; }

.navbar-brand { font-size: 1.35rem; }

/* Admin badge link */
.admin-nav-link { color: #fbbf24 !important; }
[data-bs-theme="dark"] .admin-nav-link { color: #fcd34d !important; }
.admin-nav-link:hover { color: #fde68a !important; }
.admin-nav-link.active::after { background: #fbbf24 !important; }

/* Utility buttons in the dark navbar */
.navbar-peddi .btn-outline-secondary {
  color: rgba(255, 255, 255, .7);
  border-color: rgba(255, 255, 255, .25);
}
.navbar-peddi .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   5. HERO — MANUSCRIPT STYLE
   ══════════════════════════════════════════════════════════════════ */

.hero-manuscript {
  background-color: var(--pd-parchment-mid);
  /* Kolam-inspired dot-grid watermark */
  background-image:
    radial-gradient(circle, rgba(180, 100, 10, .07) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  border: 1px solid var(--pd-warm-border);
  border-top: 3px solid var(--pd-saffron);
  border-radius: .85rem;
  position: relative;
  overflow: hidden;
}

[data-bs-theme="dark"] .hero-manuscript {
  background-color: #1a1742;
  background-image:
    radial-gradient(circle, rgba(245, 158, 11, .06) 1.5px, transparent 1.5px);
  border-color: rgba(245, 158, 11, .22);
  border-top-color: #F59E0B;
}

/* Decorative inner glow in corners */
.hero-manuscript::before {
  content: '';
  position: absolute;
  top: -60px; left: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(217,119,6,.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero-manuscript::after {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(27,67,50,.06) 0%, transparent 70%);
  pointer-events: none;
}
[data-bs-theme="dark"] .hero-manuscript::after {
  background: radial-gradient(circle, rgba(245,158,11,.06) 0%, transparent 70%);
}

/* Ornamental rule between title block and search */
.hero-rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 360px;
  margin: 0 auto;
}
.hero-rule::before,
.hero-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(217,119,6,.45));
}
.hero-rule::after {
  background: linear-gradient(to left, transparent, rgba(217,119,6,.45));
}
.hero-rule-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pd-saffron);
  opacity: .55;
  flex-shrink: 0;
}

/* Bilingual tagline */
.hero-bilingual {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem .8rem;
}

.hero-en {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--pd-charcoal);
}
[data-bs-theme="dark"] .hero-en { color: rgba(240, 235, 224, .9); }

.hero-tel {
  font-family: 'Noto Serif Telugu', serif;
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--pd-saffron-dark);
}
[data-bs-theme="dark"] .hero-tel { color: #F59E0B; }

.hero-sep {
  color: var(--pd-saffron);
  opacity: .55;
  font-size: .8rem;
  align-self: center;
}

.hero-sub-line {
  font-size: .88rem;
  color: rgba(28, 25, 23, .52);
}
[data-bs-theme="dark"] .hero-sub-line { color: rgba(240, 235, 224, .48); }

/* Search bar */
.hero-search-wrap { max-width: 640px; }

.hero-search-bar {
  background: rgba(255, 253, 248, .92);
  border: 1.5px solid rgba(180, 100, 10, .25);
  border-radius: .65rem;
  padding: .3rem;
  box-shadow: 0 4px 20px rgba(180, 100, 10, .12);
}

[data-bs-theme="dark"] .hero-search-bar {
  background: rgba(30, 27, 75, .85);
  border-color: rgba(245, 158, 11, .28);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

.hero-search-bar .form-control,
.hero-search-bar .form-select {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif;
}

.hero-search-bar .form-control:focus,
.hero-search-bar .form-select:focus {
  background: rgba(253, 246, 236, .95);
  border-color: rgba(217, 119, 6, .4);
}

[data-bs-theme="dark"] .hero-search-bar .form-control,
[data-bs-theme="dark"] .hero-search-bar .form-select {
  color: #F0EBE0;
}
[data-bs-theme="dark"] .hero-search-bar .form-control::placeholder {
  color: rgba(240, 235, 224, .45);
}
[data-bs-theme="dark"] .hero-search-bar .form-control:focus,
[data-bs-theme="dark"] .hero-search-bar .form-select:focus {
  background: rgba(255, 255, 255, .07);
}
[data-bs-theme="dark"] .hero-search-bar .form-select option {
  background: #1E1B4B;
}

/* Saffron search button */
.btn-saffron {
  background-color: var(--pd-saffron);
  border-color: var(--pd-saffron);
  color: #fff;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border-radius: .45rem !important;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-saffron:hover,
.btn-saffron:focus {
  background-color: var(--pd-saffron-dark);
  border-color: var(--pd-saffron-dark);
  color: #fff;
}

/* Stat pills */
.hero-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(217, 119, 6, .08);
  border: 1px solid rgba(217, 119, 6, .22);
  color: var(--pd-charcoal);
  border-radius: 999px;
  padding: .3rem .9rem;
  font-size: .81rem;
  font-family: 'Inter', sans-serif;
  transition: background .15s ease, border-color .15s ease;
}
.hero-pill:hover {
  background: rgba(217, 119, 6, .16);
  border-color: rgba(217, 119, 6, .4);
  color: var(--pd-charcoal);
}
[data-bs-theme="dark"] .hero-pill {
  background: rgba(245, 158, 11, .1);
  border-color: rgba(245, 158, 11, .22);
  color: rgba(240, 235, 224, .85);
}
[data-bs-theme="dark"] .hero-pill:hover {
  background: rgba(245, 158, 11, .2);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   6. CARDS & COMPONENTS
   ══════════════════════════════════════════════════════════════════ */

.card {
  border-color: var(--pd-warm-border);
  box-shadow: var(--pd-warm-shadow);
}

[data-bs-theme="dark"] .card {
  border-color: rgba(245, 158, 11, .15);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .28);
}

.stat-card {
  border-color: var(--pd-warm-border);
  border-radius: .65rem;
  transition: transform .15s ease, box-shadow .15s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(180, 100, 10, .14);
}

[data-bs-theme="dark"] .stat-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

/* ══════════════════════════════════════════════════════════════════
   7. ABOUT PAGE HERO BANNER
   ══════════════════════════════════════════════════════════════════ */

.about-hero-banner {
  background: linear-gradient(135deg, var(--pd-forest) 0%, #0d3326 45%, #1a3a28 100%);
  color: #fff;
}

[data-bs-theme="dark"] .about-hero-banner {
  background: linear-gradient(135deg, #100e2e 0%, #1B4332 60%, #0f3d28 100%);
}

/* ══════════════════════════════════════════════════════════════════
   8. FOOTER ORNAMENT DIVIDER
   ══════════════════════════════════════════════════════════════════ */

.footer-ornament {
  padding: 0 1rem;
  overflow: hidden;
  line-height: 0;
  margin-bottom: -1px;
}
.footer-ornament svg {
  display: block;
  width: 100%;
  height: auto;
}

.footer-tagline {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════
   9. AUTOCOMPLETE DROPDOWN
   ══════════════════════════════════════════════════════════════════ */

.autocomplete-list {
  position: absolute;
  z-index: 1050;
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--bs-border-color);
  border-top: none;
  border-radius: 0 0 .375rem .375rem;
  background: var(--bs-body-bg);
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

.autocomplete-list li {
  padding: .45rem .75rem;
  cursor: pointer;
  font-size: .9rem;
  border-bottom: 1px solid var(--bs-border-color);
  font-family: 'Inter', sans-serif;
}

.autocomplete-list li:last-child { border-bottom: none; }

.autocomplete-list li:hover,
.autocomplete-list li.active {
  background-color: var(--pd-saffron-glow);
}

/* ══════════════════════════════════════════════════════════════════
   10. SEARCH RESULT HIGHLIGHTS
   ══════════════════════════════════════════════════════════════════ */

mark {
  background-color: rgba(217, 119, 6, .18);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   11. ADMIN — TILE GRID
   ══════════════════════════════════════════════════════════════════ */

.admin-tile-card {
  transition: transform .15s ease, box-shadow .15s ease;
}

.admin-tile:hover .admin-tile-card {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14) !important;
}

/* ══════════════════════════════════════════════════════════════════
   12. UTILITIES & EXTRAS
   ══════════════════════════════════════════════════════════════════ */

.text-purple { color: #6f42c1 !important; }
.text-teal   { color: #0d9488 !important; }
.letter-spacing-1 { letter-spacing: .06em; }
