/* =========================================================
   कन्नौजी बोली — हेरिटेज थीम CSS
   Paste this into: Appearance → Customize → Additional CSS
   (or Max Mega Menu → Menu Themes → [your theme] → General → Custom CSS)
   ========================================================= */

/* ---------- 1. Color palette (Kannauj heritage: ittar-gold, terracotta, deep maroon) ---------- */
:root{
  --kb-cream:      #fbf3e6;
  --kb-cream-dark: #f3e6cf;
  --kb-maroon:     #7a1f2b;
  --kb-maroon-dark:#5a1620;
  --kb-gold:       #c8932c;
  --kb-terracotta: #b5651d;
  --kb-ink:        #3b2415;
}

/* ---------- 2. Interactive heritage background (site-wide) ---------- */
body{
  background-color: var(--kb-cream);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(200,147,44,0.10) 0, transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(122,31,43,0.08) 0, transparent 45%),
    repeating-linear-gradient(135deg, rgba(181,101,29,0.05) 0 2px, transparent 2px 24px);
  background-attachment: fixed;
  transition: background-position 0.6s ease;
}
/* subtle motion on scroll-adjacent hover areas — gives the page a "living" feel */
body:hover{
  background-position: 0 0, 0 0, 10px 10px;
}

/* content cards / widget boxes get a warm paper-like card look */
.entry-content, .widget, .site-main article{
  background: #fffaf1;
  border: 1px solid var(--kb-cream-dark);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(122,31,43,0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.entry-content:hover, .site-main article:hover{
  box-shadow: 0 6px 18px rgba(122,31,43,0.12);
  transform: translateY(-2px);
}

/* ---------- 3. Interactive mega menu — headings enlarge on hover ---------- */
/* Works for Max Mega Menu's default markup */
.mega-menu-item > a.mega-menu-link{
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--kb-ink) !important;
  letter-spacing: 0.2px;
  transition: font-size 0.25s ease, color 0.25s ease, transform 0.25s ease;
  position: relative;
}
.mega-menu-item > a.mega-menu-link:hover,
.mega-menu-item.mega-toggle-on > a.mega-menu-link{
  font-size: 19px !important;
  color: var(--kb-maroon) !important;
  transform: translateY(-1px) scale(1.06);
}
/* gold underline sweep on hover */
.mega-menu-item > a.mega-menu-link::after{
  content:"";
  position:absolute; left:50%; bottom:2px;
  width:0; height:2px;
  background: var(--kb-gold);
  transition: width 0.3s ease, left 0.3s ease;
}
.mega-menu-item > a.mega-menu-link:hover::after{
  width:80%; left:10%;
}
/* dropdown panels — warm heritage card look */
.mega-menu-item .mega-sub-menu{
  background: var(--kb-cream) !important;
  border: 1px solid var(--kb-gold) !important;
  border-radius: 8px;
}
.mega-menu-item .mega-sub-menu a{
  color: var(--kb-ink) !important;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.mega-menu-item .mega-sub-menu a:hover{
  color: var(--kb-terracotta) !important;
  padding-left: 6px;
}

/* If Max Mega Menu isn't the active nav on a page (fallback to core WP menu) */
.main-navigation a,
.primary-menu a{
  transition: font-size 0.25s ease, color 0.25s ease;
}
.main-navigation a:hover,
.primary-menu a:hover{
  font-size: 1.15em;
  color: var(--kb-maroon);
}

/* ---------- 4. Widget headings — heritage banner style ---------- */
.widget-title, .widget h2, .widget h3{
  color: #fff;
  background: linear-gradient(90deg, var(--kb-maroon), var(--kb-maroon-dark));
  padding: 8px 14px;
  border-radius: 6px;
  border-left: 4px solid var(--kb-gold);
  font-size: 1.05em;
}

/* ---------- 5. Buttons / links accent ---------- */
a{ color: var(--kb-maroon); }
a:hover{ color: var(--kb-terracotta); }