/*
 Theme Name:   Hindus Festivals Child
 Theme URI:    https://hindusfestivals.com/
 Description:  Custom child theme for Hindus Festivals — Sanatan Dharm homepage redesign
 Author:       hindusfestivals.com
 Template:     maktub
 Version:      1.0.0
 Text Domain:  hindusfestivals-child
*/

/* ─────────────────────────────────────────
   DESIGN TOKENS — Sanatan Dharm Palette
   ───────────────────────────────────────── */
:root {
  --saffron:       #E8591A;
  --saffron-light: #FDF3EC;
  --saffron-mid:   #F5956A;
  --gold:          #C8860A;
  --gold-light:    #FDF6E3;
  --gold-mid:      #E8B84B;
  --maroon:        #7C1D1D;
  --maroon-dark:   #5A1010;
  --maroon-light:  #FBF0F0;
  --lotus-pink:    #D4538C;
  --green-dharm:   #2E7D46;
  --green-light:   #EEF7F1;
  --blue-deep:     #1B3A6B;

  --text-primary:   #1A1612;
  --text-secondary: #5A5248;
  --text-muted:     #8A8078;

  --surface:        #FFFFFF;
  --surface-warm:   #FDFAF6;
  --surface-2:      #F7F3EE;
  --border:         rgba(124, 29, 29, 0.12);
  --border-gold:    rgba(200, 134, 10, 0.25);

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  --shadow-soft: 0 2px 12px rgba(124,29,29,0.08);
  --shadow-card: 0 4px 20px rgba(124,29,29,0.10);

  --font-devanagari: 'Noto Sans Devanagari', 'Mangal', sans-serif;
  --font-body:       'Inter', 'Segoe UI', sans-serif;
}

/* ─────────────────────────────────────────
   RESET & BASE
   ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--surface-warm);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; }

/* Devanagari text */
.deva, [lang="hi"] {
  font-family: var(--font-devanagari);
  line-height: 1.8;
}

/* ─────────────────────────────────────────
   LAYOUT SHELL
   ───────────────────────────────────────── */
.hf-site-wrapper {
  max-width: 100%;
  overflow-x: hidden;
}

.hf-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .hf-container { padding: 0 32px; }
}
@media (min-width: 1200px) {
  .hf-container { padding: 0 48px; }
}

/* ─────────────────────────────────────────
   TOP BAR
   ───────────────────────────────────────── */
.hf-topbar {
  background: var(--maroon-dark);
  padding: 7px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
}
.hf-topbar .hf-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.hf-topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hf-topbar-mantra {
  font-family: var(--font-devanagari);
  font-size: 13px;
  color: var(--gold-mid);
  letter-spacing: 0.5px;
}
.hf-topbar-badges {
  display: flex;
  gap: 6px;
}
.hf-topbar-badge {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
}
.hf-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hf-topbar-right a {
  color: rgba(255,255,255,0.75);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.hf-topbar-right a:hover { color: var(--gold-mid); }

/* ─────────────────────────────────────────
   HEADER / NAV
   ───────────────────────────────────────── */
.hf-header {
  background: var(--surface);
  border-bottom: 3px solid var(--saffron);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 16px rgba(124,29,29,0.10);
}
.hf-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

/* Logo */
.hf-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.hf-logo-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--maroon) 0%, var(--saffron) 60%, var(--gold) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 2px 10px rgba(232,89,26,0.3);
}
.hf-logo-text { line-height: 1.2; }
.hf-logo-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--maroon);
  letter-spacing: -0.3px;
}
.hf-logo-tagline {
  font-family: var(--font-devanagari);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.3px;
}

/* Primary Nav */
.hf-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.hf-nav li a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  display: block;
  transition: color 0.2s, background 0.2s;
  font-family: var(--font-devanagari);
}
.hf-nav li a:hover,
.hf-nav li.current-menu-item a {
  color: var(--saffron);
  background: var(--saffron-light);
}
.hf-nav li.menu-highlight a {
  background: var(--saffron);
  color: #fff;
  border-radius: 20px;
  padding: 7px 16px;
}
.hf-nav li.menu-highlight a:hover {
  background: var(--maroon);
  color: #fff;
}

/* Mobile menu toggle */
.hf-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
}
.hf-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--maroon);
  border-radius: 2px;
  transition: all 0.3s;
}

@media (max-width: 768px) {
  .hf-menu-toggle { display: flex; }
  .hf-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--surface);
    flex-direction: column;
    padding: 12px 20px 20px;
    border-bottom: 3px solid var(--saffron);
    box-shadow: var(--shadow-card);
    gap: 4px;
    align-items: flex-start;
  }
  .hf-nav.is-open { display: flex; }
  .hf-nav li { width: 100%; }
  .hf-nav li a { font-size: 15px; padding: 10px 14px; }
  .hf-header { position: relative; }
}
@media (max-width: 480px) {
  .hf-topbar-badges,
  .hf-topbar-right { display: none; }
  .hf-logo-name { font-size: 16px; }
}

/* ─────────────────────────────────────────
   HERO SECTION
   ───────────────────────────────────────── */
.hf-hero {
  background: linear-gradient(135deg, var(--maroon-dark) 0%, var(--maroon) 35%, #B03020 65%, var(--gold) 100%);
  position: relative;
  overflow: hidden;
  padding: 64px 0 56px;
}
.hf-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 30%, rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(circle at 90% 70%, rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(circle at 50% 90%, rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(circle at 30% 60%, rgba(255,200,100,0.06) 1px, transparent 1px);
  background-size: 48px 48px, 64px 64px, 56px 56px, 40px 40px;
}
/* Decorative Om symbol */
.hf-hero::after {
  content: '🕉';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 220px;
  opacity: 0.04;
  pointer-events: none;
  line-height: 1;
}
.hf-hero .hf-container { position: relative; z-index: 1; }
.hf-hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.hf-hero-content { color: #fff; }
.hf-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold-mid);
  margin-bottom: 16px;
}
.hf-hero-title {
  font-family: var(--font-devanagari);
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 8px;
  color: #fff;
}
.hf-hero-subtitle {
  font-size: 15px;
  opacity: 0.8;
  margin-bottom: 28px;
  letter-spacing: 0.5px;
}
.hf-hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.hf-btn-hero-primary {
  background: #fff;
  color: var(--maroon);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 28px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.hf-btn-hero-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.hf-btn-hero-outline {
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: 28px;
  border: 1.5px solid rgba(255,255,255,0.5);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, border-color 0.2s;
}
.hf-btn-hero-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.8);
}
.hf-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 24px;
}
.hf-stat {
  text-align: center;
  padding: 0 16px;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.hf-stat:last-child { border-right: none; }
.hf-stat:first-child { padding-left: 0; }
.hf-stat-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--gold-mid);
  line-height: 1;
}
.hf-stat-label {
  font-size: 10px;
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
/* Hero side widget */
.hf-hero-widget {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-lg);
  padding: 20px;
  color: #fff;
  min-width: 200px;
  backdrop-filter: blur(8px);
}
.hf-hero-widget-title {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 10px;
}
.hf-hero-date {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-mid);
}
.hf-hero-month {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 12px;
}
.hf-hero-panchang-mini { display: flex; flex-direction: column; gap: 6px; }
.hf-panchang-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  padding: 5px 8px;
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
}
.hf-panchang-row-label { opacity: 0.6; }
.hf-panchang-row-val { font-weight: 500; }
.hf-rahukaal-mini {
  margin-top: 10px;
  background: rgba(200,0,0,0.25);
  border: 1px solid rgba(255,100,100,0.3);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  text-align: center;
  font-size: 11px;
}
.hf-rahukaal-mini strong {
  display: block;
  font-size: 13px;
  color: #FFB3B3;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .hf-hero-inner { grid-template-columns: 1fr; }
  .hf-hero-widget { display: none; }
  .hf-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
  .hf-stat:nth-child(2) { border-right: none; }
}
@media (max-width: 480px) {
  .hf-hero { padding: 40px 0 36px; }
  .hf-hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────
   TODAY STRIP
   ───────────────────────────────────────── */
.hf-today-strip {
  background: var(--gold-light);
  border-bottom: 1px solid var(--border-gold);
  padding: 14px 0;
}
.hf-today-inner {
  display: flex;
  align-items: stretch;
  gap: 14px;
}
.hf-today-date-box {
  background: var(--gold);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  text-align: center;
  min-width: 68px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hf-today-date-num {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.hf-today-date-month {
  font-size: 10px;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.hf-today-info { flex: 1; }
.hf-today-label {
  font-family: var(--font-devanagari);
  font-size: 13px;
  font-weight: 600;
  color: var(--maroon);
  margin-bottom: 7px;
}
.hf-today-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hf-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
}
.hf-pill-saffron { background: #FDE8D8; color: #7C2A0A; }
.hf-pill-gold    { background: #FBF0D0; color: #6B4400; }
.hf-pill-green   { background: #DDF0E4; color: #1B5E30; }
.hf-pill-maroon  { background: #F5E0E0; color: var(--maroon); }
.hf-pill-blue    { background: #E4EEF9; color: #1A3E8C; }

.hf-rahukaal-box {
  background: var(--maroon-light);
  border: 1px solid rgba(124,29,29,0.2);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  text-align: center;
  min-width: 90px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hf-rahukaal-label {
  font-size: 9px;
  color: var(--maroon);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}
.hf-rahukaal-time {
  font-size: 15px;
  font-weight: 700;
  color: var(--maroon);
  margin-top: 3px;
}
.hf-rahukaal-note {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 2px;
}

@media (max-width: 600px) {
  .hf-today-inner { flex-wrap: wrap; }
  .hf-today-date-box { min-width: 56px; padding: 8px 12px; }
  .hf-rahukaal-box { flex-grow: 1; }
}

/* ─────────────────────────────────────────
   SECTION HEADING
   ───────────────────────────────────────── */
.hf-section { padding: 40px 0; }
.hf-section + .hf-section { padding-top: 0; }

.hf-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.hf-section-head-icon { font-size: 20px; flex-shrink: 0; }
.hf-section-head-text {}
.hf-section-head-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--maroon);
  line-height: 1.2;
}
.hf-section-head-sub {
  font-family: var(--font-devanagari);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}
.hf-section-head-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border-gold), transparent);
}
.hf-section-head-link {
  font-size: 12px;
  color: var(--saffron);
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: gap 0.2s;
  flex-shrink: 0;
}
.hf-section-head-link:hover { gap: 6px; }

/* ─────────────────────────────────────────
   UPCOMING FESTIVALS SCROLL
   ───────────────────────────────────────── */
.hf-festivals-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hf-festivals-scroll::-webkit-scrollbar { display: none; }

.hf-festival-card {
  flex-shrink: 0;
  width: 148px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  scroll-snap-align: start;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.hf-festival-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.hf-festival-thumb {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  position: relative;
}
.hf-festival-thumb-diwali  { background: linear-gradient(135deg, #7C1D1D, #C8860A); }
.hf-festival-thumb-holi    { background: linear-gradient(135deg, #9C2D90, #E8591A); }
.hf-festival-thumb-ganesh  { background: linear-gradient(135deg, #E8591A, #FAB04A); }
.hf-festival-thumb-navaratri { background: linear-gradient(135deg, #2E7D46, #6BC47A); }
.hf-festival-thumb-janm    { background: linear-gradient(135deg, #1A3E8C, #4A86E8); }
.hf-festival-thumb-makar   { background: linear-gradient(135deg, #0D5C6B, #1DB8CF); }
.hf-festival-body { padding: 10px 10px 12px; }
.hf-festival-name { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.hf-festival-date { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.hf-festival-countdown {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
}
.hf-festival-countdown.soon   { background: #FDE8D8; color: #7C2A0A; }
.hf-festival-countdown.future { background: #E4EEF9; color: #1A3E8C; }

/* ─────────────────────────────────────────
   CATEGORY GRID
   ───────────────────────────────────────── */
.hf-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 600px) {
  .hf-categories-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}
@media (max-width: 380px) {
  .hf-categories-grid { grid-template-columns: repeat(3, 1fr); }
}

.hf-cat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 8px 14px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hf-cat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: var(--border-gold);
}
.hf-cat-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.hf-cat-icon-saffron { background: var(--saffron-light); }
.hf-cat-icon-gold    { background: var(--gold-light); }
.hf-cat-icon-green   { background: var(--green-light); }
.hf-cat-icon-maroon  { background: var(--maroon-light); }
.hf-cat-icon-blue    { background: #E4EEF9; }
.hf-cat-icon-purple  { background: #F0E8F8; }

.hf-cat-name {
  font-family: var(--font-devanagari);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.hf-cat-count {
  font-size: 10px;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────
   PANCHANG WIDGET
   ───────────────────────────────────────── */
.hf-panchang-widget {
  background: var(--maroon);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  color: #fff;
}
.hf-panchang-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.hf-panchang-widget-title {
  font-family: var(--font-devanagari);
  font-size: 16px;
  font-weight: 600;
  color: var(--gold-mid);
}
.hf-panchang-widget-date {
  font-size: 12px;
  opacity: 0.65;
  margin-top: 3px;
}
.hf-panchang-widget-badge {
  background: rgba(200,134,10,0.25);
  border: 1px solid rgba(200,134,10,0.4);
  color: var(--gold-mid);
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
}
.hf-panchang-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 600px) {
  .hf-panchang-grid { grid-template-columns: repeat(2, 1fr); }
}
.hf-panch-item {
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.hf-panch-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.5;
  margin-bottom: 4px;
}
.hf-panch-val {
  font-size: 14px;
  font-weight: 600;
}
.hf-panchang-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}
.hf-panchang-footer-note { opacity: 0.6; }
.hf-panchang-footer-link {
  color: var(--gold-mid);
  font-weight: 500;
}
.hf-panchang-footer-link:hover { opacity: 0.85; }

/* ─────────────────────────────────────────
   FEATURED ARTICLE
   ───────────────────────────────────────── */
.hf-featured {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 1fr 1fr;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.hf-featured:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(124,29,29,0.15);
}
.hf-featured-visual {
  background: linear-gradient(135deg, var(--maroon-dark), var(--saffron) 70%, var(--gold));
  padding: 32px 28px;
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
}
.hf-featured-visual::before {
  content: '🪔';
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 72px;
  opacity: 0.18;
}
.hf-featured-badge {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold-mid);
  margin-bottom: 10px;
  width: fit-content;
}
.hf-featured-title {
  font-family: var(--font-devanagari);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}
.hf-featured-meta {
  font-size: 11px;
  opacity: 0.65;
  margin-top: 8px;
}
.hf-featured-body {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hf-featured-excerpt {
  font-family: var(--font-devanagari);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.hf-featured-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.hf-featured-author { font-size: 11px; color: var(--text-muted); }
.hf-btn-read {
  background: var(--saffron);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.2s, transform 0.2s;
}
.hf-btn-read:hover { background: var(--maroon); transform: translateX(2px); }

@media (max-width: 768px) {
  .hf-featured { grid-template-columns: 1fr; }
  .hf-featured-visual { min-height: 180px; }
}

/* ─────────────────────────────────────────
   ARTICLE GRID
   ───────────────────────────────────────── */
.hf-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .hf-articles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .hf-articles-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

.hf-article-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.hf-article-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.hf-article-thumb {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  position: relative;
}
.hf-article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.hf-article-thumb-saffron { background: #FDE8D8; }
.hf-article-thumb-gold    { background: #FBF0D0; }
.hf-article-thumb-green   { background: #DDF0E4; }
.hf-article-thumb-maroon  { background: #F5E0E0; }
.hf-article-thumb-blue    { background: #E4EEF9; }
.hf-article-thumb-purple  { background: #F0E8F8; }

.hf-article-body { padding: 10px 12px 14px; flex: 1; display: flex; flex-direction: column; }
.hf-article-category {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  margin-bottom: 5px;
}
.hf-article-title {
  font-family: var(--font-devanagari);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
  flex: 1;
}
.hf-article-date {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ─────────────────────────────────────────
   MAIN + SIDEBAR LAYOUT
   ───────────────────────────────────────── */
.hf-content-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 1000px) {
  .hf-content-layout { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
   SIDEBAR
   ───────────────────────────────────────── */
.hf-sidebar { display: flex; flex-direction: column; gap: 24px; }

.hf-sidebar-widget {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.hf-sidebar-widget-head {
  background: var(--surface-2);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--maroon);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hf-sidebar-widget-body { padding: 14px 16px; }

/* Vrat list widget */
.hf-vrat-list { display: flex; flex-direction: column; gap: 1px; }
.hf-vrat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.hf-vrat-item:last-child { border-bottom: none; }
.hf-vrat-date-badge {
  background: var(--saffron-light);
  color: var(--saffron);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  min-width: 46px;
  text-align: center;
  flex-shrink: 0;
}
.hf-vrat-name {
  font-family: var(--font-devanagari);
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  flex: 1;
}
.hf-vrat-days {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────
   EKADASHI BANNER
   ───────────────────────────────────────── */
.hf-ekadashi-banner {
  background: linear-gradient(135deg, var(--green-dharm), #48A868);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-soft);
}
.hf-ekadashi-banner:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(46,125,70,0.25);
}
.hf-ekadashi-icon { font-size: 36px; flex-shrink: 0; }
.hf-ekadashi-content { flex: 1; }
.hf-ekadashi-label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 3px;
}
.hf-ekadashi-name {
  font-family: var(--font-devanagari);
  font-size: 15px;
  font-weight: 700;
}
.hf-ekadashi-date { font-size: 11px; opacity: 0.75; margin-top: 2px; }
.hf-ekadashi-arrow { font-size: 20px; opacity: 0.8; flex-shrink: 0; }

/* ─────────────────────────────────────────
   NEWSLETTER
   ───────────────────────────────────────── */
.hf-newsletter {
  background: linear-gradient(135deg, var(--blue-deep), #2C5FA8);
  border-radius: var(--radius-lg);
  padding: 28px;
  color: #fff;
  text-align: center;
}
.hf-newsletter-icon { font-size: 32px; margin-bottom: 10px; }
.hf-newsletter-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.hf-newsletter-sub {
  font-size: 12px;
  opacity: 0.72;
  line-height: 1.5;
  margin-bottom: 18px;
}
.hf-newsletter-form { display: flex; gap: 8px; }
.hf-newsletter-input {
  flex: 1;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 24px;
  padding: 10px 16px;
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
  min-width: 0;
}
.hf-newsletter-input::placeholder { color: rgba(255,255,255,0.45); }
.hf-newsletter-input:focus { border-color: rgba(255,255,255,0.7); }
.hf-newsletter-btn {
  background: #fff;
  color: var(--blue-deep);
  border: none;
  border-radius: 24px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
}
.hf-newsletter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ─────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────── */
.hf-footer {
  background: var(--maroon-dark);
  color: rgba(255,255,255,0.75);
  padding: 48px 0 24px;
}
.hf-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 36px;
}
@media (max-width: 900px) {
  .hf-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 480px) {
  .hf-footer-grid { grid-template-columns: 1fr; }
}

.hf-footer-brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.hf-footer-brand-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--maroon), var(--saffron));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.hf-footer-brand-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.hf-footer-brand-desc {
  font-family: var(--font-devanagari);
  font-size: 12px;
  opacity: 0.6;
  line-height: 1.7;
  margin-bottom: 16px;
}
.hf-footer-social { display: flex; gap: 8px; }
.hf-social-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.2s;
  cursor: pointer;
}
.hf-social-btn:hover { background: rgba(255,255,255,0.18); }

.hf-footer-col-title {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
}
.hf-footer-link {
  display: block;
  font-family: var(--font-devanagari);
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 9px;
  transition: color 0.2s;
}
.hf-footer-link:hover { color: var(--gold-mid); }

.hf-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hf-footer-copy {
  font-size: 11px;
  opacity: 0.45;
}
.hf-footer-bottom-links { display: flex; gap: 16px; }
.hf-footer-bottom-links a {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  transition: color 0.2s;
}
.hf-footer-bottom-links a:hover { color: var(--gold-mid); }

/* ─────────────────────────────────────────
   UTILITY
   ───────────────────────────────────────── */
.hf-bg-warm { background: var(--surface-warm); }
.hf-bg-surface { background: var(--surface); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════

/* ═══════════════════════════════════════════════════════
   TYPOGRAPHY — Better Readability (improved font sizes)
═══════════════════════════════════════════════════════ */

body {
  font-size: 16px;
  line-height: 1.75;
}

.deva, [lang="hi"] {
  font-family: var(--font-devanagari);
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: 0.01em;
}

.hf-section-head-title    { font-size: 22px; font-weight: 700; }
.hf-festival-name         { font-size: 13px; font-weight: 600; }
.hf-festival-date         { font-size: 11px; }
.hf-cat-name              { font-size: 12px; font-weight: 600; }
.hf-cat-count             { font-size: 11px; }
.hf-article-thumb         { height: 100px; font-size: 32px; }
.hf-today-label           { font-size: 14px; font-weight: 600; }
.hf-pill                  { font-size: 12px; padding: 4px 12px; }
.hf-panch-val             { font-size: 15px; font-weight: 600; }
.hf-hero-title            { font-size: clamp(26px, 4.5vw, 44px); }
.hf-hero-subtitle         { font-size: 16px; }
.hf-stat-num              { font-size: 28px; }
.hf-stat-label            { font-size: 11px; }
.hf-logo-name             { font-size: 20px; }
.hf-logo-tagline          { font-size: 12px; }
.hf-nav li a              { font-size: 14px; }


/* ═══════════════════════════════════════════════════════
   BREADCRUMB BAR
═══════════════════════════════════════════════════════ */
.hf-breadcrumb-bar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}
.hf-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
}
.hf-breadcrumb a {
  color: var(--saffron);
  font-weight: 500;
  transition: color 0.2s;
}
.hf-breadcrumb a:hover { color: var(--maroon); }
.hf-breadcrumb-sep { color: var(--text-muted); padding: 0 3px; }
.hf-breadcrumb-current {
  color: var(--text-secondary);
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════════
   SINGLE PAGE — Outer wrap & 2-column grid
═══════════════════════════════════════════════════════ */
.hf-single-wrap {
  background: var(--surface-warm);
  padding: 36px 0 56px;
}

.hf-single-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 36px;
  align-items: start;
}
@media (max-width: 1024px) {
  .hf-single-layout { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════
   ARTICLE — card shell
═══════════════════════════════════════════════════════ */
.hf-article {
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}


/* ── Article Header ──────────────────────── */
.hf-article-header {
  padding: 32px 36px 24px;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 640px) {
  .hf-article-header { padding: 22px 20px 18px; }
}

/* Category badges */
.hf-article-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.hf-article-cat-badge {
  background: var(--saffron-light);
  color: var(--saffron);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  transition: background 0.2s, color 0.2s;
  display: inline-block;
}
.hf-article-cat-badge:hover {
  background: var(--saffron);
  color: #fff;
}

/* Post title */
.hf-article-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0 0 18px;
}
@media (max-width: 640px) {
  .hf-article-title { font-size: 21px; }
}

/* Meta row — separated from title */
.hf-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 13px;
  color: var(--text-muted);
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  margin-top: 2px;
}
.hf-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hf-meta-icon { font-size: 14px; line-height: 1; }
.hf-meta-sep  {
  color: var(--border);
  font-weight: 300;
  font-size: 18px;
  line-height: 1;
}


/* ── Featured image ──────────────────────── */
.hf-article-featured-img {
  width: 100%;
  max-height: 440px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hf-article-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ── Article body — rich reading experience ─ */
.hf-article-body {
  padding: 32px 36px 28px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-primary);
}
@media (max-width: 640px) {
  .hf-article-body { padding: 22px 20px; font-size: 16px; }
}

.hf-article-body p {
  margin-bottom: 1.5em;
  font-size: 17px;
  line-height: 1.85;
}
.hf-article-body h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--maroon);
  margin: 2em 0 0.7em;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--saffron-light);
}
.hf-article-body h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 1.6em 0 0.5em;
}
.hf-article-body h4 {
  font-size: 17px;
  font-weight: 600;
  color: var(--maroon);
  margin: 1.3em 0 0.4em;
}
.hf-article-body ul,
.hf-article-body ol {
  margin: 0.8em 0 1.5em 1.6em;
}
.hf-article-body li {
  margin-bottom: 0.5em;
  font-size: 17px;
  line-height: 1.75;
}
.hf-article-body blockquote {
  background: var(--gold-light);
  border-left: 4px solid var(--gold);
  margin: 1.8em 0;
  padding: 18px 22px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--text-secondary);
  font-size: 17px;
}
.hf-article-body blockquote p { margin-bottom: 0; }
.hf-article-body a {
  color: var(--saffron);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.hf-article-body a:hover { color: var(--maroon); }
.hf-article-body img {
  border-radius: var(--radius-md);
  margin: 1.2em 0;
  box-shadow: var(--shadow-soft);
  max-width: 100%;
}
.hf-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 15px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.hf-article-body th {
  background: var(--maroon);
  color: #fff;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
}
.hf-article-body td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.hf-article-body tr:nth-child(even) td { background: var(--surface-2); }
.hf-article-body tr:last-child td     { border-bottom: none; }


/* ── Tags ────────────────────────────────── */
.hf-article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 18px 36px;
  border-top: 1px solid var(--border);
  background: var(--surface-warm);
}
@media (max-width: 640px) { .hf-article-tags { padding: 14px 20px; } }
.hf-tags-label { font-size: 13px; font-weight: 600; color: var(--text-muted); flex-shrink: 0; margin-right: 4px; }
.hf-tag-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.hf-tag-pill:hover {
  background: var(--saffron-light);
  color: var(--saffron);
  border-color: var(--saffron-mid);
}


/* ── Share bar ───────────────────────────── */
.hf-share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 18px 36px 24px;
  border-top: 1px solid var(--border);
}
@media (max-width: 640px) { .hf-share-bar { padding: 14px 20px 20px; } }
.hf-share-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 4px;
  flex-shrink: 0;
}
.hf-share-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.hf-share-btn:hover   { background: var(--surface-2); }
.hf-share-fb:hover    { background: #1877F2; color: #fff; border-color: #1877F2; }
.hf-share-wa:hover    { background: #25D366; color: #fff; border-color: #25D366; }
.hf-share-tw:hover    { background: #1DA1F2; color: #fff; border-color: #1DA1F2; }
.hf-share-copy:hover  { background: var(--gold-light); border-color: var(--gold); color: var(--gold); }


/* ── Prev / Next navigation ──────────────── */
.hf-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
}
@media (max-width: 520px) { .hf-post-nav { grid-template-columns: 1fr; } }

.hf-post-nav-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-soft);
}
.hf-post-nav-item:hover {
  border-color: var(--saffron);
  box-shadow: var(--shadow-card);
}
.hf-post-nav-next { text-align: right; }
.hf-post-nav-dir  {
  font-size: 11px;
  color: var(--saffron);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.hf-post-nav-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.45;
}


/* ── Related posts ───────────────────────── */
.hf-related { margin-top: 28px; }
.hf-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 640px) {
  .hf-related-grid { grid-template-columns: 1fr 1fr; }
}
.hf-related-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
}
.hf-related-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.hf-related-body  { padding: 10px 12px 14px; }
.hf-related-title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.45; }
.hf-related-date  { font-size: 11px; color: var(--text-muted); margin-top: 5px; }


/* ═══════════════════════════════════════════════════════
   SIDEBAR — complete redesign, clean & structured
═══════════════════════════════════════════════════════ */

/* Make sure sidebar shows up in single layout */
.hf-single-layout > aside.hf-sidebar {
  position: sticky;
  top: 80px;  /* stick below header */
}

.hf-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Widget shell */
.hf-sidebar-widget {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

/* Widget heading */
.hf-sidebar-widget-head {
  background: linear-gradient(90deg, var(--maroon) 0%, #A02525 100%);
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Widget body default padding */
.hf-sidebar-widget-body { padding: 16px 18px; }


/* ── Panchang sidebar widget ─────────────── */
.hf-sb-panchang-body { padding: 16px 18px; }

.hf-sb-date-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.hf-sb-date-num {
  font-size: 36px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
  min-width: 44px;
}
.hf-sb-date-full {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.hf-sb-date-masa {
  font-family: var(--font-devanagari);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

.hf-sb-panch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.hf-sb-panch-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
}
.hf-sb-panch-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 3px;
  font-weight: 500;
}
.hf-sb-panch-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.hf-sb-rahukaal {
  background: var(--maroon-light);
  border: 1px solid rgba(124,29,29,0.18);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-size: 13px;
  color: var(--maroon);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}
.hf-sb-rahukaal strong {
  font-size: 14px;
  font-weight: 700;
}

.hf-sb-link-btn {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--saffron);
  padding: 9px 14px;
  border: 2px solid var(--saffron);
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s;
  letter-spacing: 0.3px;
}
.hf-sb-link-btn:hover {
  background: var(--saffron);
  color: #fff;
}


/* ── Upcoming Vrat items ─────────────────── */
.hf-sb-vrat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  cursor: pointer;
}
.hf-sb-vrat-item:last-of-type { border-bottom: none; }
.hf-sb-vrat-item:hover { background: var(--saffron-light); }

.hf-sb-vrat-date {
  background: var(--saffron-light);
  color: var(--saffron);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  min-width: 50px;
  text-align: center;
  flex-shrink: 0;
  border: 1px solid rgba(232,89,26,0.2);
}
.hf-sb-vrat-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  line-height: 1.4;
}
.hf-sb-vrat-days {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.hf-sb-vrat-days.soon {
  color: var(--saffron);
  font-weight: 700;
}


/* ── Recent post items ───────────────────── */
.hf-sb-post-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  cursor: pointer;
}
.hf-sb-post-item:last-of-type { border-bottom: none; }
.hf-sb-post-item:hover { background: var(--surface-2); }

.hf-sb-post-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.hf-sb-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hf-sb-post-info { flex: 1; min-width: 0; }
.hf-sb-post-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  /* 2-line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hf-sb-post-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}


/* ── Festival items ──────────────────────── */
.hf-sb-fest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  cursor: pointer;
}
.hf-sb-fest-item:last-of-type { border-bottom: none; }
.hf-sb-fest-item:hover { background: var(--gold-light); }

.hf-sb-fest-emoji {
  font-size: 24px;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}
.hf-sb-fest-info  { flex: 1; min-width: 0; }
.hf-sb-fest-name  {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.hf-sb-fest-date  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }


/* ── Category items ──────────────────────── */
.hf-sb-cat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  cursor: pointer;
}
.hf-sb-cat-item:last-of-type { border-bottom: none; }
.hf-sb-cat-item:hover { background: var(--surface-2); }

.hf-sb-cat-name {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}
.hf-sb-cat-count {
  font-size: 11px;
  background: var(--surface-2);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
}


/* ── Newsletter mini ─────────────────────── */
.hf-sb-newsletter .hf-sidebar-widget-head {
  background: linear-gradient(90deg, var(--blue-deep), #2C5FA8);
}
.hf-sb-newsletter .hf-sidebar-widget-body {
  background: linear-gradient(135deg, var(--blue-deep), #2C5FA8);
  padding: 18px;
}
.hf-sb-nl-desc {
  font-family: var(--font-devanagari);
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  line-height: 1.65;
  margin-bottom: 14px;
}
.hf-sb-nl-input {
  width: 100%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  color: #fff;
  font-size: 13px;
  outline: none;
  margin-bottom: 9px;
  display: block;
  transition: border-color 0.2s;
}
.hf-sb-nl-input::placeholder { color: rgba(255,255,255,0.45); }
.hf-sb-nl-input:focus { border-color: var(--gold-mid); }
.hf-sb-nl-btn {
  width: 100%;
  background: var(--gold-mid);
  color: var(--maroon-dark);
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  letter-spacing: 0.2px;
}
.hf-sb-nl-btn:hover { background: #fff; color: var(--blue-deep); }
.hf-sb-nl-msg {
  font-size: 12px;
  margin-top: 8px;
  min-height: 18px;
  text-align: center;
}

/* "View all" footer link inside widgets */
.hf-sb-widget-footer {
  padding: 10px 18px 14px;
}


/* ═══════════════════════════════════════════════════════
   COMMENTS SECTION
═══════════════════════════════════════════════════════ */
.hf-single-main .comments-area,
.hf-single-main .comment-respond {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-top: 24px;
  box-shadow: var(--shadow-soft);
}
@media (max-width: 640px) {
  .hf-single-main .comments-area,
  .hf-single-main .comment-respond { padding: 20px 18px; }
}
.hf-single-main .comments-title,
.hf-single-main .comment-reply-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--maroon);
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--saffron-light);
}
.hf-single-main .comment-author .fn {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.hf-single-main .comment-content p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
}
.hf-single-main .comment-form input[type="text"],
.hf-single-main .comment-form input[type="email"],
.hf-single-main .comment-form input[type="url"],
.hf-single-main .comment-form textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface);
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 14px;
  display: block;
}
.hf-single-main .comment-form input:focus,
.hf-single-main .comment-form textarea:focus {
  border-color: var(--saffron);
}
.hf-single-main .comment-form-comment textarea { min-height: 130px; resize: vertical; }
.hf-single-main #submit {
  background: var(--saffron);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 11px 30px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.hf-single-main #submit:hover {
  background: var(--maroon);
  transform: translateY(-1px);
}