{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #444;
    background: #fffaf0; /* halka warm background */
}
body {
    background: #f5f4f0;
    color: #222;
}
section p,
section li {
    color: #444;
}
/* Navbar */

.navbar {
    background: #ff8c1a; /* soft saffron */
    color: white;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: left;
}

.logo {
    font-weight: 700;
    font-size: 20px;
}

.menu {
    font-size: 14px;
}

.menu a {
    color: white;
    text-decoration: none;
    padding: 0 4px;
}

.menu a:hover {
    text-decoration: underline;
}

/* Hero */

/* hero section */
.hero {
    position: relative
    overflow: hidden;
    background: url("images/hero-banner-hindufestivals-home-2.jpg") no-repeat center center;
    background-size: cover;
    padding: 60px 20px;
    border-radius: 8px;
    min-height: 380px; /* height adjust as needed */
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
}


.hero-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}
/* Hero subtitle bright */
.hero p {
    color: #ffffff;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* Search box bright */
/* HERO – search bar text */
.hero input[type="text"] {
    color: #333;          /* dark text, clearly visible */
    background: #ffffee;  /* halka off-white, pehle jaisa */
    font-weight: 500;
}

/* HERO – placeholder text */
.hero input[type="text"]::placeholder {
    color: #666;          /* medium grey – dikhai dega */
    opacity: 1;           /* kuch browser me zaroori hota hai */
}

/* HERO – search button text */
.search-btn {
    color: #ffffff;
    font-weight: 600;
}
.hero h1 {
    color: #ffe9c7; /* soft warm white */
    text-shadow: 0px 2px 6px rgba(243, 240, 240, 0.979);
}
.hero {
    min-height: 300px;
    padding: 100px 20px 80px;
}

    font-size: 34px;
    margin-bottom: 12px;
    color: #bf360c;
}

.hero p {
    color: #ffffff;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.hero-search {
    margin-top: 18px;
    display: flex;
    gap: 8px;
    max-width: 500px;
}

.hero-search input {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.hero-search button {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: #ff8c1a;
    color: white;
    cursor: pointer;
    font-size: 14px;
}
.hero-search input[type="text"] {
    color: #333;             /* search ke andar ka text */
    background: #ffffee;     /* halka warm background */
    font-weight: 500;
}

.hero-search input[type="text"]::placeholder {
    color: #666;             /* placeholder text */
    opacity: 1;
}
.hero-search button:hover {
    background: #e67605;
}

.hero-tags {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
}

/* Pills styling – text + box */
.hero-tags span,
.hero-tags a {
    display: inline-block;
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #ffdd80;
    color: #c75100;        /* saffron text */
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;       /* mouse le jao to clickable feel */
}

/* Hover effect (optional) */
.hero-tags span:hover,
.hero-tags a:hover {
    background: #fff7cc;
}
/* Hero Heading Styling */
.hero-title {
    font-size: 34px;
    font-weight: 700;
    color: #bf360c;
    margin-bottom: 8px;
}

.hero-subtitle {
    font-size: 16px;
    max-width: 700px;
    color: #555;
    margin-bottom: 16px;
}
.hero {
    position: relative;
}

/* Soft overlay to highlight text */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.30); /* 30% dark overlay */
    border-radius: 8px;
    z-index: 1;
}

/* Hero text above overlay */
.hero * {
    position: relative;
    z-index: 2;
}


/* Search Bar Styling */
.search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-input {
    flex: 1;
    min-width: 220px;
    padding: 8px 10px;
    border-radius: 20px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.search-btn {
    padding: 8px 18px;
    border-radius: 20px;
    border: none;
    background: #e65100;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.search-btn:hover {
    background: #bf360c;
}
/* FESTIVAL DASHBOARD AREA */
.dashboard {
  padding: 60px 20px 70px;
  max-width: 1200px;
  margin: 40px auto 0;
  border-radius: 24px 24px 0 0;
  background: radial-gradient(circle at top, #fff7e1 0, #ffffff 55%, #fff6f1 100%);
}

.dash-title {
  font-size: 26px;
  font-weight: 700;
  color: #4a2f18;
  margin-bottom: 6px;
  text-align: center;
}

.dash-subtitle {
  color: #7d5f4a;
  margin-bottom: 30px;
  text-align: center;
}

/* GRID OF 6 CARDS */
.dash-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* INDIVIDUAL CARD */
.dash-card {
  position: relative;
  background: linear-gradient(145deg, #ffffff, #fff8eb);
  padding: 22px 22px 20px;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(248, 180, 75, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Top golden edge */
.dash-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #fbbf24, #f97316, #fbbf24);
  opacity: 0.9;
}

/* Hover effect */
.dash-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
  background: linear-gradient(145deg, #fffaf0, #fff3de);
}

/* Card header: icon + title */
.dash-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.dash-icon {
  font-size: 20px;
}

.dash-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #7a4a27;
}

/* LIST + LINKS */
.dash-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 12px 0;
}

.dash-list li {
  margin-bottom: 8px;
}

.dash-list a {
  text-decoration: none;
  color: #4a3729;
  font-size: 15px;
  display: inline-block;
}

.dash-list a:hover {
  color: #d97706;
  text-decoration: underline;
}

/* Bottom “View all / Read articles” links */
.dash-link {
  color: #d97706;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.dash-link:hover {
  color: #b45309;
  text-decoration: underline;
}
/* Hero overlay + glow + particles */

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;  /* image ke upar, glow ke neeche bhi chalega */
}

/* Soft glowing aura behind content */
.hero-glow {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.35) 0, transparent 60%),
    radial-gradient(circle at 80% 0%, rgba(255, 183, 77, 0.55) 0, transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(255, 120, 60, 0.45) 0, transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}

/* Floating festive particles */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.hero-particles span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0, rgba(255, 215, 130, 0.85) 35%, transparent 70%);
  opacity: 0;
  animation: floatParticle 12s linear infinite;
}

/* Different particles positions + timings */
.hero-particles span:nth-child(1) {
  left: 12%;
  bottom: 12%;
  animation-duration: 13s;
  animation-delay: 0s;
}
.hero-particles span:nth-child(2) {
  left: 35%;
  bottom: 5%;
  animation-duration: 11s;
  animation-delay: 2s;
}
.hero-particles span:nth-child(3) {
  left: 60%;
  bottom: 15%;
  animation-duration: 14s;
  animation-delay: 1s;
}
.hero-particles span:nth-child(4) {
  left: 78%;
  bottom: 8%;
  animation-duration: 10s;
  animation-delay: 3s;
}
.hero-particles span:nth-child(5) {
  left: 25%;
  bottom: 25%;
  animation-duration: 15s;
  animation-delay: 4s;
}
.hero-particles span:nth-child(6) {
  left: 55%;
  bottom: 28%;
  animation-duration: 12s;
  animation-delay: 5s;
}

/* Floating animation */
@keyframes floatParticle {
  0% {
    transform: translate3d(0, 10px, 0) scale(0.7);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
  90% {
    opacity: 0;
  }
  100% {
    transform: translate3d(0, -130px, 0) scale(1.1);
  }
}

/* Make sure hero content sits on top of all this */
.hero-content {
  position: relative;
  z-index: 3;
}

/* Note section */

.note-section {
    background: #fffde7;
    border-top: 1px solid #ffecb3;
    border-bottom: 1px solid #ffecb3;
    padding: 12px 20px;
    font-size: 13px;
    color: #555;
    text-align: center;
}
/* Footer */
.footer {
  margin-top: 40px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #ffffff;
  padding: 22px 20px 14px;
}

.footer-top {
  max-width: 1100px;
  margin: 0 auto 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 10px;
}

.footer-left h3 {
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 700;
}

.footer-left p {
  margin: 0;
  font-size: 13px;
  opacity: 0.9;
}

.footer-right {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
}

.footer-right a {
  text-decoration: none;
  color: #fffbe7;
  opacity: 0.9;
}

.footer-right a:hover {
  opacity: 1;
  text-decoration: underline;
}

.footer-bottom {
  max-width: 1100px;
  margin: 6px auto 0;
  font-size: 12px;
  opacity: 0.85;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-bottom span {
  display: flex;
  align-items: center;
  gap: 6px;
}
* ===== FESTIVALS LIST PAGE ===== */

.page-hero {
  padding: 40px 20px 28px;
  background: linear-gradient(135deg, #f97316, #fbbf24);
  color: #ffffff;
}

.page-hero-festivals { }

.page-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.page-hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  opacity: 0.9;
  margin-bottom: 4px;
}

.page-hero-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
}

.page-hero-subtitle {
  font-size: 14px;
  max-width: 640px;
  margin: 0;
  opacity: 0.95;
}

/* Layout wrapper */

.festivals-layout {
  max-width: 1100px;
  margin: 24px auto 40px;
  padding: 0 20px 24px;
}

/* Filters bar */

.festival-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 249, 235, 0.95);
  border: 1px solid rgba(248, 180, 75, 0.2);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6b4a2b;
}

.filter-group label {
  font-weight: 600;
}

.filter-group select {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #e0c7a3;
  background: #fffdf7;
  outline: none;
}

/* List of festivals */

.festival-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 0;
}
/* ===== PUJA VIDHI LIST PAGE ===== */

/* Reuse page-hero but slightly softer for puja */
.page-hero-puja {
  background: linear-gradient(135deg, #f97316, #fbbf24);
}

/* Layout wrapper */
.puja-layout {
  max-width: 1100px;
  margin: 24px auto 60px;
  padding: 0 20px;
}

/* Filters */
.puja-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 249, 235, 0.95);
  border: 1px solid rgba(248, 180, 75, 0.2);
}

.puja-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Individual card */
.puja-card {
  display: flex;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(248, 180, 75, 0.18);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* subtle left strip */
.puja-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f97316, #facc15);
  opacity: 0.4;
}

.puja-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
  border-color: rgba(248, 180, 75, 0.4);
}

/* Left main column */
.puja-card-main {
  flex: 1;
}

.puja-name {
  margin: 0 0 4px;
  font-size: 18px;
}

.puja-name a {
  text-decoration: none;
  color: #4a2f18;
}

.puja-name a:hover {
  color: #d97706;
}

.puja-meta {
  margin: 0 0 2px;
  font-size: 13px;
  color: #865b33;
}

.puja-summary {
  margin: 6px 0 10px;
  font-size: 13px;
  color: #4a3729;
}

/* Tags */
.puja-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.puja-tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff7e3;
  border: 1px solid #facc15;
  color: #92400e;
}

/* Right mini-outline column */
.puja-side {
  width: 220px;
  flex-shrink: 0;
  font-size: 13px;
}

.puja-side-title {
  font-weight: 600;
  margin: 0 0 6px;
  color: #b45309;
}

.puja-side ul {
  margin: 0;
  padding-left: 18px;
}

.puja-side li {
  margin-bottom: 4px;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .puja-layout {
    padding: 0 16px 40px;
  }

  .puja-filters {
    flex-direction: column;
    align-items: flex-start;
  }

  .puja-card {
    flex-direction: column;
  }

  .puja-side {
    width: 100%;
  }
}
/* Individual festival card */

.festival-card {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 16px 18px 14px;
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(248, 180, 75, 0.22);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

/* Left gold bar */

.festival-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f97316, #facc15);
  opacity: 0.4;
  transform: scaleY(0.96);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Hover effect */

.festival-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
  background: #ffffff;
  border-color: rgba(248, 180, 75, 0.45);
}

.festival-card:hover::before {
  opacity: 1;
  transform: scaleY(1.03);
}

/* Left date block */

.fest-date {
  width: 80px;
  flex-shrink: 0;
  padding: 8px 10px;
  border-radius: 14px;
  background: #fff7e3;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fest-day {
  font-size: 22px;
  font-weight: 700;
  color: #b45309;
  line-height: 1;
}

.fest-month {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
  color: #8b5a2b;
}

/* Main content */

.fest-main {
  flex: 1;
}

.fest-name {
  margin: 0 0 4px;
  font-size: 18px;
}

.fest-name a {
  text-decoration: none;
  color: #4a2f18;
}

.fest-name a:hover {
  color: #d97706;
}

.fest-meta,
.fest-tithi {
  margin: 0 0 2px;
  font-size: 13px;
  color: #865b33;
}

.fest-summary {
  margin: 6px 0 10px;
  font-size: 13px;
  color: #4a3729;
}

/* Actions */

.fest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}

.fest-link-primary {
  font-size: 13px;
  font-weight: 600;
  color: #b45309;
  text-decoration: none;
}

.fest-link-primary:hover {
  text-decoration: underline;
  color: #9a3412;
}

.fest-link-secondary {
  font-size: 12px;
  color: #7c5c3b;
  text-decoration: none;
}

.fest-link-secondary:hover {
  text-decoration: underline;
}

/* Badge */

.fest-badge {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid;
  background: #fffef7;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fest-badge-major {
  border-color: #f59e0b;
  color: #b45309;
}

.fest-badge-vrat {
  border-color: #22c55e;
  color: #166534;
}

.fest-badge-ekadashi {
  border-color: #6366f1;
  color: #3730a3;
}

/* Small icons inside badges */

.fest-badge-major::before {
  content: "★";
  font-size: 10px;
}

.fest-badge-vrat::before {
  content: "🕉";
  font-size: 11px;
}

.fest-badge-ekadashi::before {
  content: "☾";
  font-size: 11px;
}
/* Mobile tweaks */
@media (max-width: 640px) {
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* Mobile layout polish */
@media (max-width: 768px) {
  /* Hero overall */
  .hero {
    padding: 28px 16px 40px;
    min-height: auto;
  }

  .hero-title {
    font-size: 22px;
    line-height: 1.25;
  }

  .hero-subtitle {
    font-size: 13px;
    margin-bottom: 18px;
  }

  /* Search bar: column layout on mobile */
  .hero-search-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .hero-search-input {
    width: 100%;
  }

  .hero-search-button {
    width: 100%;
    justify-content: center;
  }

  /* Pills: center + wrap nicely */
  .hero-pills {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
  }

  .hero-pill {
    min-width: 180px;
    text-align: center;
  }

  /* Dashboard spacing tighten */
  .dashboard {
    padding: 40px 16px 50px;
    margin-top: 20px;
  }

  .dash-title {
    font-size: 22px;
  }

  .dash-grid {
    gap: 20px;
  }
}

/* Generic page container */
.page-container {
    max-width: 1000px;
    margin: 20px auto 40px;
    padding: 0 20px;
}

/* Festival detail page */

.festival-hero h1 {
    font-size: 30px;
    color: #bf360c;
    margin-bottom: 6px;
}
/* Festivals list page */

.festival-list-page {
    margin-top: 20px;
}

.festival-list-hero h1 {
    font-size: 28px;
    color: #bf360c;
    margin-bottom: 8px;
}

.festival-list-hero p {
    font-size: 15px;
    color: #444;
    max-width: 700px;
    margin-bottom: 14px;
}

.festival-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.festival-filter select {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
    background: #fffaf0;
}

.festival-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.festival-item {
    background: #fff;
    padding: 14px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    font-size: 14px;
    color: #444;
}

.festival-item h3 {
    margin-bottom: 6px;
    color: #e65100;
}

.fest-item-meta {
    font-size: 13px;
    color: #777;
    margin-bottom: 6px;
}

.fest-item-text {
    font-size: 14px;
    margin-bottom: 8px;
    description ke baad halka gap: ;
}

.fest-item-link {
    font-size: 13px;
    color: #0e61b0;
    text-decoration: none;
    font-weight: 600;
}

.fest-item-link:hover {
    text-decoration: underline;
}

.fest-item-tag {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fff3cd;
    color: #8a6d3b;
}
/* Festivals list – ensure blue links for article pages */
.festival-item h3 a.article-link {
    color: #0e61b0;
    text-decoration: none;
    font-weight: 600;
}

.festival-item h3 a.article-link:hover {
    text-decoration: underline;
}

}
/* Mobile tweak */
* Aartis page */

.aartis-page {
    margin-top: 20px;
}

.aarti-hero h1 {
    font-size: 28px;
    color: #bf360c;
    margin-bottom: 6px;
}

.aarti-subtitle {
    font-size: 14px;
    color: #555;
    max-width: 750px;
    margin-bottom: 14px;
}

.aarti-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.aarti-search-input {
    flex: 1;
    min-width: 220px;
    padding: 8px 10px;
    border-radius: 20px;
    border: 1px solid #e0a676;
    font-size: 14px;
}

.aarti-search-btn {
    padding: 8px 16px;
    border-radius: 20px;
    border: none;
    background: #e65100;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.aarti-search-btn:hover {
    background: #ff6f00;
}

.aarti-tags-row {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aarti-tag {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #ffb74d;
    background: #fff8e1;
    color: #bf360c;
}

.aarti-list-section {
    margin-top: 16px;
}

.aarti-list-section h2 {
    font-size: 22px;
    color: #d84315;
    margin-bottom: 4px;
}

.aarti-small-note {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}

.aarti-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.aarti-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    font-size: 14px;
    color: #444;
    position: relative;
}

.aarti-card h3 {
    font-size: 18px;
    color: #e65100;
    margin-bottom: 4px;
}

.aarti-meta {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.aarti-desc {
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
}

/* Aarti page clickable links (saffron style) */
.aarti-title a {
    color: #d35400;          /* saffron color */
    text-decoration: none;
    font-size: 18px;         /* h3 ke size jaisa */
    font-weight: 700;        /* bold like h3 */
}

.aarti-title a:hover {
    text-decoration: underline;
}

.aarti-coming {
    font-size: 12px;
    color: #999;
}

.aarti-label {
    position: absolute;
    top: 10px;
    right: 12px;
    background: #ffcc80;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 999px;
    color: #7b3f00;
}

/* Aartis responsive */
@media (max-width: 700px) {
    .aarti-search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .aarti-search-btn {
        width: 100%;
        text-align: center;
    }
}
/* Aarti detail page */

.aarti-detail-page {
    margin-top: 20px;
}

.aarti-detail-hero h1 {
    font-size: 26px;
    color: #bf360c;
    margin-bottom: 6px;
}

.aarti-detail-intro {
    font-size: 14px;
    color: #555;
    max-width: 780px;
    margin-bottom: 12px;
}

.aarti-back-link {
    font-size: 13px;
    margin-bottom: 4px;
}

.aarti-back-link a {
    color: #0b72b9;
    text-decoration: none;
}

.aarti-back-link a:hover {
    text-decoration: underline;
}

.aarti-detail-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-top: 10px;
}

.aarti-detail-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    font-size: 14px;
    color: #444;
}

.aarti-detail-card h2,
.aarti-detail-card h3 {
    color: #e65100;
    margin-bottom: 6px;
}

.aarti-lyrics-box {
    background: #fff8e1;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.6;
    margin: 6px 0 8px;
}

.aarti-lyrics-note {
    font-size: 12px;
    color: #777;
}

.aarti-detail-list {
    padding-left: 18px;
    margin: 4px 0 0;
    font-size: 13px;
}

.aarti-detail-list li {
    margin-bottom: 4px;
}

/* Responsive layout for aarti detail */
@media (max-width: 800px) {
    .aarti-detail-layout {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 700px) {
    .festival-filter {
        flex-direction: column;
        align-items: flex-start;
    }
}
.festival-meta {
    font-size: 14px;
    color: #777;
    margin-bottom: 10px;
}

.festival-intro {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 20px;
}

.festival-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.festival-main {
    flex: 2;
    min-width: 260px;
}

.festival-side {
    flex: 1;
    min-width: 240px;
}

.fest-card {
    background: white;
    padding: 14px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 14px;
    font-size: 14px;
    color: #444;
}

.fest-card h2,
.fest-card h3 {
    margin-bottom: 6px;
    color: #e65100;
}

.fest-list {
    padding-left: 18px;
    margin-top: 6px;
}

.fest-list li {
    margin-bottom: 6px;
    font-size: 14px;
}

.small-note {
    font-size: 12px;
    color: #666;
}

/* Festival page responsive */
@media (max-width: 700px) {
    .festival-layout {
        flex-direction: column;
    }
}
@media (max-width: 700px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .hero-inner {
        text-align: left;
    }

    .hero h1 {
        font-size: 22px;
    }

    .hero-search {
        flex-direction: column;
        max-width: 100%;
    }

    .footer-top {
        flex-direction: column;
        align-items: flex-start;
    }
    
}
/* ============================
   Temples list page
   ============================ */

.temple-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 15px 60px;
}

.temple-hero h1 {
  font-size: 26px;
  color: #c24a00;
  margin-bottom: 8px;
}

.temple-hero p {
  max-width: 720px;
  font-size: 14px;
  color: #555;
}

/* Filters row */

.temple-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 22px 0 10px;
}

.temple-filter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.temple-filter-item label {
  color: #884400;
}

.temple-filter-item select {
  min-width: 180px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #e0a86c;
  background: #fffdf8;
  font-size: 13px;
}

/* Temples grid */

.temple-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.temple-card {
  background: #fffaf0;
  border-radius: 10px;
  padding: 14px 18px;
  border: 1px solid #f3d6a0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  position: relative;
}

.temple-card h3 {
  font-size: 18px;
  margin-bottom: 4px;
  color: #b84300;
}

.temple-location {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.temple-meta {
  font-size: 12px;
  color: #885000;
  margin-bottom: 8px;
}

.temple-meta span {
  white-space: nowrap;
}

.temple-text {
  font-size: 13px;
  color: #444;
  line-height: 1.5;
  margin-bottom: 8px;
}

.temple-links {
  font-size: 12px;
  margin-bottom: 4px;
}

.temple-links a {
  color: #c24a00;
  text-decoration: none;
}

.temple-links a:hover {
  text-decoration: underline;
}

.temple-tag {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ffe2b5;
  color: #8c3a00;
  position: absolute;
  bottom: 10px;
  right: 12px;
}

/* Mobile responsive – temples */

@media (max-width: 700px) {
  .temple-page {
    padding: 20px 12px 40px;
  }

  .temple-hero h1 {
    font-size: 20px;
  }

  .temple-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .temple-filter-item select {
    width: 100%;
  }
}
/* Home dashboard text fix */
.home-sections h3,
.home-sections h4 {
    color: #c84b00;
    font-weight: 700;
}

.home-sections p,
.home-sections li,
.home-sections a {
    color: #444;
}
/* Home dashboard cards text ko darker karo */
.home-card h3,
.home-card h4 {
    color: #c84b00;      /* nice warm orange heading */
    font-weight: 700;
}

.home-card p,
.home-card li,
.home-card a {
    color: #444;         /* dark grey = clearly readable */
}
/* =============================
   Articles / Guides page
   ============================= */

.article-page {
  max-width: 1100px;
  margin: 20px auto 40px;
  padding: 0 16px;
}

/* Hero section on articles page */
.articles-hero {
  margin-top: 20px;
  margin-bottom: 24px;
  padding: 20px 18px;
  background: #fff7e6;
  border-radius: 12px;
  border: 1px solid #ffe0b3;
}

.articles-hero h1 {
  font-size: 34px;
  font-weight: 700;
  color: #b63e00;
  margin-bottom: 8px;
}

.articles-subtitle {
  font-size: 18px;
  color: #444;
  margin-bottom: 25px;
}

/* Filter pills row */
.articles-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-pill {
  border: 1px solid #ffcf80;
  background: #fffaf0;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
}

.filter-pill.active {
  background: #ff8c1a;
  color: white;
  border-color: #ff8c1a;
}

/* Articles grid */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 10px;
}

.article-card {
  background: white;
  border-radius: 12px;
  padding: 18px 16px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #f3e2c7;
  font-size: 14px;
}

.article-tag {
  display: inline-block;
  font-size: 14px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #fff0d9;
  color: #b65a00;
  margin-bottom: 8px;
}

.article-card h2 {
  font-size: 20px;
  margin-bottom: 6px;
  color: #e65100;
}

.article-meta {
  font-size: 12px;
  color: #777;
  margin-bottom: 10px;
}

.article-text {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
}

.article-link {
  font-size: 13px;
  color: #e65100;
  text-decoration: none;
  font-weight: 600;
}

.article-link:hover {
  text-decoration: underline;
}

/* Note section */
.articles-note {
  margin-top: 24px;
  margin-bottom: 32px;
  font-size: 13px;
  color: #666;
  background: #fff7e6;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid #ffe0b3;
}

/* Mobile tweaks */
@media (max-width: 700px) {
  .articles-hero h1 {
    font-size: 22px;
  }

  .article-card {
    font-size: 13px;
  }

  .article-card h2 {
    font-size: 16px;
  }
}
.card-highlight-title {
  margin-top: 10px;
  font-weight: 700;
  color: #c84b00;
}

.card-highlight-text {
  font-size: 14px;
  color: #555;
}
/* Chaitra Navratri page – header */
.page-header {
  margin-top: 24px;
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 26px;
  color: #c63f00; /* warm saffron */
  margin-bottom: 10px;
}

.page-subtitle {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

/* Banner placeholder box */
.festival-banner-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed #ffb766;
  background: #fff7e6;
  font-size: 13px;
  color: #8a4a00;
  margin-bottom: 24px;
}
/* Quick info / side box */
.info-box {
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 16px 16px 14px;
  border-radius: 12px;
  background: #fffdf6;
  border: 1px solid #ffe3b8;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  font-size: 14px;
}

.info-box h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #d35400;
}

.info-box h4 {
  margin-top: 12px;
  margin-bottom: 4px;
  font-size: 15px;
  color: #8a4a00;
}

.info-box ul {
  margin-left: 18px;
  margin-bottom: 6px;
}

.info-box li {
  margin-bottom: 3px;
}

.info-box .note {
  margin-top: 10px;
  font-size: 12px;
  color: #777;
}
/* Main content of festival page */
.content-section {
  margin-top: 10px;
  padding: 14px 0 30px;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}

.content-section h2 {
  font-size: 18px;
  margin-top: 18px;
  margin-bottom: 8px;
  color: #e65100;
}

.content-section p {
  margin-bottom: 8px;
}

.content-section ul {
  margin-left: 20px;
  margin-bottom: 8px;
}

.content-section li {
  margin-bottom: 4px;
}
/* Links inside info/content blocks */
.info-box a,
.content-section a {
  color: #e65100;
  text-decoration: none;
  font-weight: 600;
}

.info-box a:hover,
.content-section a:hover {
  text-decoration: underline;
}
@media (max-width: 700px) {
  .page-header h1 {
    font-size: 22px;
  }

  .page-subtitle {
    font-size: 13px;
  }

  .content-section {
    font-size: 13px;
  }
}
/* Festival banner box (Chaitra Navratri, Mahashivratri etc.) */
.festival-banner-box {
    margin: 18px 0 26px;
    padding: 18px 20px;
    background: #fff7e0;           /* halka saffron background */
    border-radius: 10px;
    border: 1px solid #ffd48a;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    text-align: center;
}

.festival-banner-box p {
    margin: 0;
    font-size: 14px;
    color: #aa6b00;
    font-weight: 500;
}
/* ===== Festivals Card Grid ===== */
.festival-list-grid {
    max-width: 1100px;
    margin: 20px auto 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
/* ===== Home hero section (final) ===== */


/* soft overlay for text readability */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(241, 121, 8, 0),
    rgba(0, 0, 0, 0.00)
  );
    pointer-events: none;
    z-index: ;
}
}

/* inner content */
.hero-content {
  position: relative;
  max-width: 640px;
  color: #ffffff;
  z-index: 1;
}

.hero-kicker {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.9;
}

.hero h1 {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 8px;
}

.hero-subtitle {
  font-size: 15px;
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 16px;
  opacity: 0.95;
}

/* search bar */
.hero-search {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.hero-search-wrapper {
    position: relative;
    display: inline-block;
    width: 260px;    
}
#searchSuggestions {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    max-height: 240px;
    overflow-y: auto;
    z-index: 500;
    padding: 6px 0;
    display: none; /* default hidden */
}

/* suggestion item box */
.search-suggestion-item {
    padding: 10px 14px;
    font-size: 14px;
    cursor: pointer;
    color: #333;
    line-height: 1.4;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

/* last item without border */
.search-suggestion-item:last-child {
    border-bottom: none;
}

/* hover effect */
.search-suggestion-item:hover {
    background: #fff7e6;
}


.hero-search-input {
  flex: 1;
  min-width: 210px;
  padding: 8px 10px;
  border-radius: 999px;
  border: none;
  outline: none;
  font-size: 14px;
}

.hero-search-button {
  padding: 8px 18px;
  border-radius: 999px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #ffcf7a;
  color: #5a2b00;
}

.hero-search-button:hover {
  background: #ffd995;
}

/* pills row */
.hero-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;

}

.hero-pill {
  display: inline-flex;
  flex-direction: column;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 250, 240, 0.95);
  text-decoration: none;
  min-width: 180px;
}

.hero-pill .pill-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a5a20;
}

.hero-pill .pill-value {
  font-size: 13px;
  font-weight: 600;
  color: #4a2600;
}

/* mobile tweaks */
@media (max-width: 768px) {
  .hero {
    padding: 22px 14px 20px;
    border-radius: 0;
    margin: 0 0 18px;
  }

  .hero h1 {
    font-size: 22px;
  }

  .hero-subtitle {
    font-size: 14px;
  }

  .hero-search {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-search-button {
    width: 100%;
    text-align: center;
  }
}
.dashboard {
  padding: 60px 20px;
  max-width: 1200px;
  margin: auto;
}

.dash-title {
  font-size: 26px;
  font-weight: 700;
  color: #4a2f18;
  margin-bottom: 6px;
  text-align: center;
}

.dash-subtitle {
  color: #7d5f4a;
  margin-bottom: 30px;
  text-align: center;
}

.dash-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Individual card — premium styling /
.dash-card {
position: relative;
background: linear-gradient(145deg, #ffffff, #fff8eb);
padding: 22px 22px 20px;
border-radius: 18px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
border: 1px solid rgba(248, 180, 75, 0.25);
opacity: 0; / animation start */
transform: translateY(24px);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.6s ease-out;
}

/* top golden strip */
.dash-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 3px;
border-radius: 18px 18px 0 0;
background: linear-gradient(90deg, #fbbf24, #f97316, #fbbf24);
opacity: 0.9;
}

/* hover */
.dash-card:hover {
transform: translateY(-6px);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
background: linear-gradient(145deg, #fffaf0, #fff3de);
}

/* animation final state */
.dash-card.show-card {
opacity: 1;
transform: translateY(0);
}
.dash-card-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}

.dash-icon {
font-size: 20px;
}

.dash-card h3 {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #7a4a27;
}
.dash-list {
list-style: none;
padding: 0;
margin: 8px 0 12px 0;
}

.dash-list li {
margin-bottom: 8px;
}

.dash-list a {
text-decoration: none;
color: #4a3729;
font-size: 15px;
display: inline-block;
}

.dash-list a:hover {
color: #d97706;
text-decoration: underline;
}

.dash-link {
color: #d97706;
font-weight: 600;
font-size: 14px;
text-decoration: none;
}

.dash-link:hover {
color: #b45309;
text-decoration: underline;
}
/* Hero search suggestions dropdown ---- */
.hero-search-wrapper {
  position: relative;
  flex: 1;
  min-width: 210px;
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: 10px;
  margin-top: 4px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
  max-height: 260px;
  overflow-y: auto;
  z-index: 20;
  display: none; /* default hidden */
}

.search-suggestion-item {
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid #f3f0ea;
}

.search-suggestion-item:last-child {
  border-bottom: none;
}

.search-suggestion-title {
  font-weight: 600;
  color: #3b2104;
}

.search-suggestion-meta {
  font-size: 11px;
  color: #7a6a54;
}

.search-suggestion-item:hover {
  background: #fff7e0;
}
/* Mobile layout polish – up to tablets */
@media (max-width: 768px) {
  /* HERO AREA */
  .hero {
    padding: 28px 16px 40px;
    min-height: auto;
  }

  .hero-title {
    font-size: 22px;
    line-height: 1.25;
  }

  .hero-subtitle {
    font-size: 13px;
    margin-bottom: 18px;
  }

  /* Search bar: stack input + button */
  .hero-search-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .hero-search-input {
    width: 100%;
  }

  .hero-search-button {
    width: 100%;
    justify-content: center;
  }

  /* Pills: wrap nicely + centre */
  .hero-pills {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
  }

  .hero-pill {
    min-width: 180px;
    text-align: center;
  }

  /* DASHBOARD SPACING */
  .dashboard {
    padding: 40px 16px 50px;
    margin-top: 20px;
  }

  .dash-title {
    font-size: 22px;
  }

  .dash-grid {
    gap: 20px;
  }
}

/* Footer mobile tweaks (agar pehle se nahi hai to add kar) */
@media (max-width: 640px) {
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
/* Mobile navbar fix */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  .menu {
    margin-top: 8px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .menu a {
    font-size: 14px;
    white-space: nowrap;
  }
}
@media (max-width: 768px) {
  /* ...existing mobile styles... */

  .festivals-layout {
    padding: 0 16px 40px;
  }

  .festival-card {
    flex-direction: column;
  }

  .fest-date {
    width: auto;
    align-items: flex-start;
    text-align: left;
    margin-bottom: 6px;
  }

  .fest-badge {
    position: static;
    margin-top: 4px;
    align-self: flex-start;
  }

  .festival-filters {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* FINAL festivals hero styling (keep near end of CSS) */
.page-hero {
  padding: 40px 20px 28px !important;
  background: linear-gradient(135deg, #f97316, #fbbf24) !important;
  color: #ffffff !important;
}

.page-hero-festivals { }

.page-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.page-hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  opacity: 0.9;
  margin-bottom: 4px;
}

.page-hero-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
}

.page-hero-subtitle {
  font-size: 14px;
  max-width: 640px;
  margin: 0;
  opacity: 0.95;
}


/* Monthly list */

.month-list {
  font-size: 14px;
  color: #4b3828;
}

.month-row {
  margin-bottom: 10px;
}

.month-name {
  font-weight: 600;
  color: #b45309;
  margin-bottom: 4px;
}

.month-row ul {
  margin: 0;
  padding-left: 18px;
}

.month-row li {
  margin-bottom: 3px;
}

.month-note {
  margin-top: 10px;
  font-size: 13px;
  color: #7a4a27;
}

/* Muhurat note */

.muhurat-note {
  margin-top: 10px;
  font-size: 13px;
  color: #555;
}

/* Mobile */
/* ===== AARTIS & CHALISAS PAGE ===== */

.page-hero-aartis {
  background: linear-gradient(135deg, #f97316, #fb923c);
}

.aarti-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 30px;
}

.aarti-side {
  background: #fff8e6;
  padding: 18px 20px;
  border-radius: 10px;
  border: 1px solid #f5d38b;
}

.aarti-main .aarti-box {
  background: white;
  padding: 25px;
  border-radius: 10px;
  border: 1px solid #eee0b5;
}

/* Filters */
.aarti-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 249, 235, 0.95);
  border: 1px solid rgba(248, 180, 75, 0.2);
}

.aarti-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Card */
.aarti-card {
  display: flex;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(248, 180, 75, 0.18);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.06);
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* left accent strip */
.aarti-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f97316, #facc15);
  opacity: 0.4;
}

.aarti-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 13px 26px rgba(15, 23, 42, 0.12);
  border-color: rgba(248, 180, 75, 0.4);
}

/* Main */
.aarti-main {
  flex: 1;
}

.aarti-name {
  margin: 0 0 4px;
  font-size: 18px;
}

.aarti-name a {
  text-decoration: none;
  color: #4a2f18;
}

.aarti-name a:hover {
  color: #d97706;
}

.aarti-meta {
  margin: 0 0 4px;
  font-size: 13px;
  color: #865b33;
}

.aarti-snippet {
  margin: 6px 0 10px;
  font-size: 13px;
  color: #4a3729;
}

/* Tags */
.aarti-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.aarti-tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff7e3;
  border: 1px solid #facc15;
  color: #92400e;
}

/* Side column */
.aarti-side {
  width: 220px;
  flex-shrink: 0;
  font-size: 13px;
}

.aarti-side-title {
  font-weight: 600;
  margin: 0 0 6px;
  color: #b45309;
}

.aarti-side ul {
  margin: 0;
  padding-left: 18px;
}

.aarti-side li {
  margin-bottom: 4px;
}

/* Mobile */
@media (max-width: 768px) {
  .aarti-layout {
    padding: 0 16px 40px;
  }

  .aarti-filters {
    flex-direction: column;
    align-items: flex-start;
  }

  .aarti-card {
    flex-direction: column;
  }

  .aarti-side {
    width: 100%;
  }
}
/* ===== TEMPLES & YATRAS PAGE ===== */

.page-hero-temples {
  background: linear-gradient(135deg, #f97316, #facc15);
}

.temples-layout {
  max-width: 1100px;
  margin: 24px auto 60px;
  padding: 0 20px;
}

/* Filters */
.temple-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 249, 235, 0.95);
  border: 1px solid rgba(248, 180, 75, 0.2);
}

.temple-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Card */
.temple-card {
  display: flex;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(248, 180, 75, 0.18);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.06);
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* left accent strip */
.temple-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fb923c, #facc15);
  opacity: 0.85;
}

.temple-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 13px 26px rgba(15, 23, 42, 0.12);
  border-color: rgba(248, 180, 75, 0.4);
}

/* Main info */
.temple-main {
  flex: 1;
}

.temple-name {
  margin: 0 0 4px;
  font-size: 18px;
}

.temple-name a {
  text-decoration: none;
  color: #4a2f18;
}

.temple-name a:hover {
  color: #d97706;
}

.temple-location {
  margin: 0 0 4px;
  font-size: 13px;
  color: #865b33;
}

.temple-summary {
  margin: 6px 0 10px;
  font-size: 13px;
  color: #4a3729;
}

/* Tags */
.temple-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.temple-tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff7e3;
  border: 1px solid #facc15;
  color: #92400e;
}

/* Side column */
.temple-side {
  width: 230px;
  flex-shrink: 0;
  font-size: 13px;
}

.temple-side-title {
  font-weight: 600;
  margin: 0 0 6px;
  color: #b45309;
}

.temple-side ul {
  margin: 0;
  padding-left: 18px;
}

.temple-side li {
  margin-bottom: 4px;
}

/* Mobile */
@media (max-width: 768px) {
  .temples-layout {
    padding: 0 16px 40px;
  }

  .temple-filters {
    flex-direction: column;
    align-items: flex-start;
  }

  .temple-card {
    flex-direction: column;
  }

  .temple-side {
    width: 100%;
  }
}
/* ===== ARTICLES / BLOG PAGE ===== */

.page-hero-articles {
  background: linear-gradient(135deg, #f97316, #fb923c);
}

.articles-layout {
  max-width: 1100px;
  margin: 24px auto 60px;
  padding: 0 20px;
}

/* Filters */
.article-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 249, 235, 0.95);
  border: 1px solid rgba(248, 180, 75, 0.2);
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Card */
.article-card {
  display: flex;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(248, 180, 75, 0.18);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.06);
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* left accent strip */
.article-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fb923c, #facc15);
  opacity: 0.85;
}

.article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 13px 26px rgba(15, 23, 42, 0.12);
  border-color: rgba(248, 180, 75, 0.4);
}

/* Main content */
.article-main {
  flex: 1;
}

.article-title {
  margin: 0 0 4px;
  font-size: 18px;
}

.article-title a {
  text-decoration: none;
  color: #4a2f18;
}

.article-title a:hover {
  color: #d97706;
}

.article-meta {
  margin: 0 0 4px;
  font-size: 13px;
  color: #865b33;
}

.article-summary {
  margin: 6px 0 10px;
  font-size: 13px;
  color: #4a3729;
}

/* Tags */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.article-tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff7e3;
  border: 1px solid #facc15;
  color: #92400e;
}

/* Side column */
.article-side {
  width: 240px;
  flex-shrink: 0;
  font-size: 13px;
}

.article-side-title {
  font-weight: 600;
  margin: 0 0 6px;
  color: #b45309;
}

.article-side ul {
  margin: 0;
  padding-left: 18px;
}

.article-side li {
  margin-bottom: 4px;
}

/* Mobile */
@media (max-width: 768px) {
  .articles-layout {
    padding: 0 16px 40px;
  }

  .article-filters {
    flex-direction: column;
    align-items: flex-start;
  }

  .article-card {
    flex-direction: column;
  }

  .article-side {
    width: 100%;
  }
}
/* ===== ABOUT PAGE ===== */

.page-hero-about {
  background: linear-gradient(135deg, #f97316, #fbbf24);
}

.about-layout {
  max-width: 960px;
  margin: 24px auto 60px;
  padding: 0 20px;
  font-size: 14px;
  color: #4a3729;
}

/* Big text sections */
.about-block {
  margin-bottom: 28px;
}

.about-block h2 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #b45309;
}

.about-block h3 {
  font-size: 16px;
  margin: 16px 0 6px;
  color: #92400e;
}

.about-block p {
  margin-bottom: 10px;
  line-height: 1.6;
}

.about-block ul {
  margin: 4px 0 10px 18px;
}

.about-block li {
  margin-bottom: 4px;
}

/* Feature grid */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 4px 0 28px;
}

.about-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(248, 180, 75, 0.25);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.about-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: #7a3416;
}

.about-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .about-layout {
    padding: 0 16px 40px;
  }
}
/* ===== CONTACT PAGE ===== */

.page-hero-contact {
  background: linear-gradient(135deg, #f97316, #f59e0b);
}

.contact-layout {
  max-width: 960px;
  margin: 24px auto 60px;
  padding: 0 20px;
  font-size: 14px;
  color: #4a3729;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 20px;
}

/* Cards */
.contact-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(248, 180, 75, 0.25);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.contact-card h2 {
  font-size: 20px;
  margin: 0 0 8px;
  color: #b45309;
}

.contact-card h3 {
  font-size: 16px;
  margin: 16px 0 6px;
  color: #92400e;
}

.contact-card p {
  margin-bottom: 10px;
  line-height: 1.6;
}

.contact-card ul {
  margin: 4px 0 10px 18px;
}

.contact-card li {
  margin-bottom: 4px;
}

/* Right card accent */
.contact-card-accent {
  background: linear-gradient(145deg, #fff7ea, #fffdf7);
}

/* Email box */
.contact-info-box {
  border-radius: 14px;
  padding: 10px 14px;
  background: #fef3c7;
  border: 1px solid #facc15;
  margin: 10px 0 14px;
}

.contact-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #92400e;
  margin: 0 0 2px;
}

.contact-email {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  color: #7a3416;
}

.contact-note {
  margin-bottom: 6px;
}

.contact-small {
  font-size: 13px;
  margin-bottom: 4px;
}

.contact-small-list {
  margin: 4px 0 14px 18px;
  font-size: 13px;
}

/* Form (demo UI only) */
.contact-form {
  margin-top: 4px;
  border-top: 1px dashed rgba(248, 180, 75, 0.6);
  padding-top: 12px;
}

.contact-form-row {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-form-row label {
  font-size: 13px;
  color: #854d0e;
}

.contact-form-row input,
.contact-form-row textarea {
  font: inherit;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}

.contact-form-row input:focus,
.contact-form-row textarea:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2);
}

.contact-form-note {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 8px;
}

.contact-btn {
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #f97316, #facc15);
  color: #7a3416;
  box-shadow: 0 6px 16px rgba(248, 180, 75, 0.4);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.contact-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 20px rgba(248, 180, 75, 0.5);
  filter: brightness(1.03);
}

/* Mobile */
@media (max-width: 768px) {
  .contact-layout {
    padding: 0 16px 40px;
  }

  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ===== PRIVACY PAGE ===== */

.page-hero-privacy {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.privacy-layout {
  max-width: 900px;
  margin: 24px auto 60px;
  padding: 0 20px;
  font-size: 14px;
  color: #4a3729;
}

.privacy-block {
  margin-bottom: 22px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(248, 180, 75, 0.4);
}

.privacy-block:last-of-type {
  border-bottom: none;
}

.privacy-block h2 {
  font-size: 19px;
  margin-bottom: 6px;
  color: #b45309;
}

.privacy-block p {
  margin-bottom: 8px;
  line-height: 1.6;
}

.privacy-block ul {
  margin: 4px 0 8px 18px;
}

.privacy-block li {
  margin-bottom: 4px;
}

/* Mobile */
@media (max-width: 768px) {
  .privacy-layout {
    padding: 0 16px 40px;
  }
}
/* ================================
   FESTIVAL ARTICLE PAGE DESIGN
   ================================ */

.festival-article {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px;
  font-size: 16px;
  line-height: 1.65;
  color: #444;
  background: #fffdf8;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

/* Hero section */
.festival-article-hero {
  margin-bottom: 40px;
}

.festival-article-hero .article-eyebrow {
  color: #c45d0d;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}

.festival-article-hero .article-title {
  font-size: 30px;
  color: #d9531e;
  margin-bottom: 12px;
}

.festival-article-hero .article-intro {
  font-size: 17px;
  color: #555;
  max-width: 850px;
}

/* Layout: Sidebar + Content */
.festival-article-layout {
  display: flex;
  gap: 40px;
}

/* Side box */
.festival-article-side {
  width: 260px;
  background: #fff7e5;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #f2d39b;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  height: fit-content;
}

.festival-article-side .side-heading {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #b74e0e;
}

.festival-article-side .side-list li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #444;
}

/* Main content */
.festival-article-main a {
  color: #c45d0d;
  text-decoration: none;
  font-weight: 600;
}

.festival-article-main a:hover {
  text-decoration: underline;
}

.article-block {
  margin-bottom: 32px 0 40px;
}

.article-block h2 {
  font-size: 24px;
  margin-bottom: 12px;
  color: #d9531e;
}

.article-block h3 {
  font-size: 19px;
  margin: 15px 0 8px;
  color: #b74e0e;
}

.article-block ul,
.article-block ol {
  padding-left: 20px;
}

.article-block ul li,
.article-block ol li {
  margin-bottom: 8px;
  font-size: 15px;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
  .festival-article-layout {
    flex-direction: column;
  }

  .festival-article-side {
    width: 100%;
  }

  .festival-article-hero .article-title {
    font-size: 26px;
  }
}
/* ============================
   AARTIS PAGE – LAYOUT & STYLING
   ============================ */

/* Hero section for Aartis */
.page-hero-aartis {
  padding: 48px 16px 32px;
  background: radial-gradient(circle at top left, #fff7e6, #fff1d1);
  border-bottom: 1px solid rgba(250, 176, 90, 0.25);
}

.page-hero-aartis .page-hero-inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
}

.page-hero-aartis h1 {
  font-size: 32px;
  margin: 8px 0 10px;
  color: #7a3515;
}

.page-hero-aartis .page-hero-label {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #b45309;
  font-weight: 600;
}

.page-hero-aartis .page-hero-kicker {
  max-width: 680px;
  font-size: 15px;
  color: #5a4331;
}

/* Aartis list layout */
.aartis-layout {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 16px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 28px;
}

/* Left column = main categories, Right = helpful info / quick links */
.aarti-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Category block */
.aarti-category {
  background: linear-gradient(135deg, #fffdf5, #fff6dd);
  border-radius: 18px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(234, 179, 8, 0.25);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.aarti-category h2 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #7c2d12;
}

.aarti-category p {
  margin: 0 0 10px;
  font-size: 14px;
  color: #5b4332;
}

/* Aarti links inside category */
.aarti-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.aarti-list li + li {
  margin-top: 6px;
}

.aarti-list a {
  font-size: 15px;
  text-decoration: none;
  color: #7a1b1b;
}

.aarti-list a:hover {
  text-decoration: underline;
  color: #b91c1c;
}

/* Small pill tags under some items */
.aarti-meta {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.aarti-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.15);
  color: #92400e;
  border: 1px solid rgba(234, 179, 8, 0.5);
}

/* Right side "how to use" / notes box */
.aarti-helper-card {
  background: #fefcf5;
  border-radius: 18px;
  padding: 18px 18px 14px;
  border: 1px dashed rgba(217, 119, 6, 0.5);
}

.aarti-helper-card h2 {
  margin: 0 0 8px;
  font-size: 17px;
  color: #7c2d12;
}

.aarti-helper-card p,
.aarti-helper-card li {
  font-size: 14px;
  color: #5b4332;
}

/* ============================
   SINGLE AARTI PAGE – TEXT BLOCK
   ============================ */

/* Wrapper for Aarti text */
.aarti-text-block {
  background: #fff8dc; /* light warm yellow */
  border-radius: 18px;
  padding: 18px 16px 20px;
  border: 1px solid rgba(234, 179, 8, 0.5);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

/* Aarti title inside text block */
.aarti-text-block .aarti-title {
  font-size: 20px;
  margin-bottom: 10px;
  color: #7c2d12;
  text-align: center;
}

/* Hindi / Devanagari lines */
.aarti-lines {
  font-size: 17px;
  line-height: 1.7;
  color: #7a1b1b; /* dark reddish text */
  white-space: pre-line; /* line-breaks respect karega */
}

/* Transliteration or explanation below */
.aarti-meaning {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: #5b4332;
  border-top: 1px dashed rgba(148, 64, 26, 0.3);
  padding-top: 10px;
}

/* Mobile responsive for aartis */
@media (max-width: 768px) {
  .aartis-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-hero-aartis .page-hero-inner {
    text-align: left;
  }
}
/* Devanagari line styling */
.dev-line {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.6;
  display: block;
  margin-bottom: 2px;
}

/* Hinglish transliteration styling */
.hk-line {
  color: #333;
  font-size: 1.05rem;
  opacity: 0.95;
  margin-top: 2px;
  display: block;
  line-height: 1.5;
}
.devnagari p {
  margin-bottom: 18px;
}
.devnagari strong {
  font-size: 1.05rem;
}
.names-block p {
  margin-bottom: 6px;
}

.names-block strong {
  font-size: 1.02rem;
}
/* ===========================
   Base / page container
   =========================== */
body {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  background: #fffaf6;
  color: #333;
  margin: 0;
  line-height: 1.65;
}

/* container to center content */
.festival-article {
  max-width: 1100px;
  margin: 30px auto;
  padding: 30px;
}

/* layout: left sidebar + main column */
.festival-article-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 30px;
  align-items: start;
}

/* sidebar box */
.festival-article-side {
  background: #fff8f0;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  font-size: 14px;
  color: #555;
}

/* article main area styling */
.festival-article-main {
  background: #ffffff;
  border-radius: 8px;
  padding: 26px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

/* section heading */
.names-block h2 {
  color: #d75a00;
  font-size: 26px;
  margin-top: 0;
  margin-bottom: 18px;
  border-left: 6px solid #ffd9b3;
  padding-left: 12px;
}

/* each name paragraph */
.names-block p {
  background: #fffaf0;
  border-left: 4px solid #ffb64d;
  padding: 10px 14px;
  margin: 8px 0;
  border-radius: 6px;
  transition: transform .12s ease, box-shadow .12s;
}

/* hover effect to feel interactive */
.names-block p:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
}

/* Sanskrit name (strong) */
.names-block p strong {
  font-size: 18px;
  color: #b24a00;
}

/* meaning text after strong - keep slightly smaller */
.names-block p {
  font-size: 17px;
  color: #333;
}

/* related block (end-of-article lists) */
.article-block ul {
  background: #f7f7f7;
  padding: 16px;
  border-radius: 8px;
  margin-top: 20px;
}
.article-block ul li { margin: 8px 0; }

/* footer */
.site-footer {
  background: #f9a825; /* saffron-ish */
  color: #fff;
  padding: 28px 20px;
  margin-top: 36px;
  border-top: 4px solid #ef6c00;
}
.site-footer a { color: #fff; text-decoration: underline; }

/* responsive */
@media (max-width: 880px) {
  .festival-article-layout { grid-template-columns: 1fr; }
  .festival-article-side { order: 2; }
  .festival-article-main { order: 1; }
}
/* ====== Temple page layout helpers (paste at end of style.css) ====== */

/* make main template a two-column grid: content + sidebar */
.temple-layout {
  display: grid;
  grid-template-columns: 1fr 320px; /* main content = flexible, sidebar = 320px */
  gap: 28px;
  align-items: start;
}

/* ensure article and aside fill their grid cells */
.temple-main { width: 100%; }
.temple-side { width: 100%; }

/* cards look consistent across page */
.temple-card {
  background: #fff;
  border-left: 4px solid #ffd08a;
  padding: 18px;
  margin-bottom: 20px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  border-radius: 4px;
  line-height: 1.55;
}

/* make FAQ / final-note / small blocks align as columns inside main content */
#faq, #final-note, #significance, #darshan, #reach, #packing, #sadhana, #nearby {
  /* keep them full width inside the article but visually grouped */
  width: 100%;
}

/* If you want three small summary blocks (like quick info, advisories, links)
   to appear side-by-side on wide screens, use this mini-grid inside article */
.temple-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 20px;
}

/* fallback: if content is long, each card stacks naturally */
.temple-summary-row .temple-card { margin-bottom: 0; }

/* sidebar cards small tweaks */
.temple-side .temple-card { border-left-color: #ffd2a8; padding: 14px; }

/* headings and list spacing */
.temple-card h3, .temple-card h4 { margin-top: 0; margin-bottom: 10px; color: #c84b2a; }
.temple-card ul, .temple-card ol { margin: 8px 0 0 1.1em; padding: 0; }

/* responsive: stack to single column on small screens */
@media (max-width: 960px) {
  .temple-layout { grid-template-columns: 1fr; padding: 0 14px; }
  .temple-summary-row { grid-template-columns: 1fr; }
  .temple-side { order: 2; } /* keep sidebar after main content on mobile */
  .temple-main { order: 1; }
}
/* responsive: stack to single column on small screens — scoped to temples page */
@media (max-width: 960px) {
  body.page-temples .temples-layout,
  body.page-temples section.temples-layout,
  body.page-temples section.temple-layout {
    display: block;
    padding: 10px;
  }

  body.page-temples .temple-card {
    display: block;
    padding: 10px 12px;
    margin-bottom: 18px;
  }

  /* temple-side moves below main on mobile */
  body.page-temples .temple-card .temple-main,
  body.page-temples .temple-card .temple-side {
    grid-column: auto;
    min-width: auto;
  }
}

/* small visual polish for the final note block */
#final-note .temple-card { border-left-color: #f4a261; background: #fffaf6;
 }
/* ===== Temples layout - stable 2-column grid & cards ===== */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
}

/* temple-list / detail layout */
.temple-layout {
  display: grid;
  grid-template-columns: 1fr 320px; /* main content + sidebar */
  gap: 28px;
  align-items: start;
}

/* for mobile fallback */
@media (max-width: 880px) {
  .temple-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* card style used across pages */
.temple-card {
  background: #fff;
  padding: 16px 18px;
  border-left: 4px solid #f7b64d;
  margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border-radius: 4px;
}

/* quick summary row with three mini-cards */
.temple-summary-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.temple-summary-row .temple-card {
  flex: 1 1 0;
  min-width: 0;
}

/* sidebar */
.temple-side {
  position: relative;
}

/* small helpers */
.temple-hero { margin-bottom: 18px; }
.temple-hero .lead { max-width: 900px; color: #5b4c3a; line-height: 1.55; }

/* ensure footer sits after content */
.footer { clear: both; }

/* safety: reset floats if any old code uses them */
.clearfix::after { content: ""; display: block; clear: both; }

/* small responsive improvements for very small screens */
@media (max-width: 480px) {
  .temple-summary-row { flex-direction: column; }
  .temple-card { padding: 12px; }
}
/* ----- Desktop-specific compact layout override for temples listing ----- */

.temples-list {
  /* grid for desktop: 2 columns on medium, 3 on wide screens */
  display: grid !important;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 20px !important;
  align-items: start;
  width: 100%;
  max-width: 1180px;      /* prevent full-width stretching */
  margin: 18px auto;      /* center the listing on wide screens */
  padding: 0 12px;
  box-sizing: border-box;
}

/* ensure each card stays compact */
.temples-list .temple-card {
  padding: 12px 14px !important;
  border-left: 4px solid #f7b64d !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  min-height: 110px;
  display: block;
  line-height: 1.35;
}

/* Larger desktop — 3 columns */
@media (min-width: 1200px) {
  .temples-list {
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    max-width: 1320px;
  }
}

/* Tablet / small desktop fallback */
@media (min-width: 760px) and (max-width:1199px) {
  .temples-list {
    grid-template-columns: repeat(2, minmax(300px, 1fr));
  }
}

/* Mobile: single column (keep previous mobile behavior) */
@media (max-width: 759px) {
  .temples-list {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 12px;
  }
  .temples-list .temple-card { padding: 10px 12px; }
}

/* Safety: override any strong global selectors that may force inline/grid collapse */
.page-container .temples-list,
section.temples-list,
.temples-list { display: grid !important; }
/* === temples page: desktop layout (scoped) === */
@media (min-width: 960px) {
  body.page-temples .temples-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: start;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 18px;
    box-sizing: border-box;
  }

  body.page-temples .temples-layout > .temple-filters,
  body.page-temples .temples-layout > .temple-list {
    grid-column: 1;
  }

  body.page-temples .temple-list .temple-card {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
    align-items: start;
    padding: 12px 14px;
    border-left: 4px solid #f7b64d;
    background: #fff;
    margin-bottom: 18px;
    box-sizing: border-box;
  }

  body.page-temples .temple-card .temple-main { grid-column: 1; }
  body.page-temples .temple-card .temple-side { grid-column: 2; min-width: 220px; }

  /* safe scoped min-width reset for temples only */
  body.page-temples * { min-width: 0; }
}
/* === Article page layout: main content + right sidebar (matches site style) === */
.article-page-container,
section.article-layout {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 18px;
  box-sizing: border-box;
}

/* grid: left main content + right sidebar */
@media (min-width: 960px) {
  .article-page-grid {
    display: grid;
    grid-template-columns: 1fr 320px; /* left flexible, right fixed sidebar */
    gap: 28px;
    align-items: start;
  }

  .article-main {
    width: 100%;
    box-sizing: border-box;
  }

  .article-side {
    width: 320px;
    min-width: 220px;
    box-sizing: border-box;
  }
}

/* mobile fallback: single column */
@media (max-width: 959px) {
  .article-page-grid { display: block; padding: 8px 6px; }
  .article-side { margin-top: 18px; }
}

/* hero area (top colored banner) */
.page-hero-articles .page-hero-inner {
  padding: 26px 18px;
  color: #fff;
  background: linear-gradient(180deg, #ff9f3b 0%, #ffb84d 50%);
}
.page-hero-articles .page-hero-title { font-size: 28px; margin: 6px 0 8px; }

/* article content styling */
.article-content {
  background: transparent;
  padding: 6px 0;
  line-height: 1.65;
  color: #333;
  font-size: 15px;
}

/* small boxed quick lists on left (like quick facts) */
.article-quick {
  border-left: 4px solid #f7b64d;
  background: #fff;
  padding: 12px 14px;
  margin-bottom: 20px;
}

/* right sidebar card look */
.article-side .side-card {
  border-left: 4px solid #f7b64d;
  background: #fff;
  padding: 12px 14px;
  margin-bottom: 18px;
}

/* headings inside article */
.article-main h1, .article-main h2 {
  color: #d35400; /* warm saffron tone */
  margin-top: 18px;
  margin-bottom: 12px;
}

/* related links list */
.related-pages ul { margin: 6px 0 14px; padding-left: 18px; color: #444; }
.related-pages a { color: #b85b00; text-decoration: none; }
.related-pages a:hover { text-decoration: underline; }

/* small utility */
.article-meta { color: #777; font-size: 13px; margin-bottom: 8px; }
.article-tags .article-tag {
  display:inline-block; padding:4px 8px; border-radius:12px; font-size:12px; margin-right:6px;
  background:#fff7ea; border:1px solid #f1c68a; color:#8b5b1a;
}

/* ensure no element forces narrow columns */
* { min-width: 0; }
html {
  scroll-behavior: smooth;
}