/* ============================================================
   KALANJALI — Whitish / Professional theme overhaul
   ============================================================
   Ivide vekkanam: WP Admin → Appearance → Customize → Additional CSS
   (Elementor Pro undenkil "Site Settings → Custom CSS"-ilum vekkam,
   ath global aayi effect aakum).

   Design language: kalanjali-redesign-preview.html-il use cheytha
   colours/fonts thanne — paper white background, deep indigo/ink
   text, saffron/peacock/maroon accents.
   ============================================================ */

/* ---- 1. Google Fonts (professional serif + clean sans pairing) ---- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --klj-paper:#FFFDF9;
  --klj-paper-soft:#FBF8F1;
  --klj-ink:#1A1533;
  --klj-ink-soft:#635C78;
  --klj-saffron:#E8871E;
  --klj-peacock:#0C6B58;
  --klj-maroon:#A93226;
  --klj-indigo:#241C4A;
  --klj-line:#EAE4D8;
}

/* ---- 2. Global background + typography ---- */
html, body{
  background:var(--klj-paper) !important;
  color:var(--klj-ink) !important;
  font-family:'Work Sans', sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title{
  font-family:'Fraunces', serif !important;
  color:var(--klj-ink) !important;
  font-weight:600 !important;
  letter-spacing:-0.01em;
}
p, li, .elementor-widget-text-editor{
  color:var(--klj-ink-soft) !important;
}
a{ color:var(--klj-indigo); }
a:hover{ color:var(--klj-peacock); }

/* Any section/container that was using a dark background gets pulled
   back to white/soft-paper — safe fallback so old dark blocks don't
   fight the new palette. Remove this rule for any ONE section you
   deliberately want to keep dark (e.g. a "Special Kids" band). */
.elementor-section:not(.klj-keep-dark){
  background-color:var(--klj-paper) !important;
  background-image:none;
}

/* ---- 3. Header / top bar — the "professional look" ---- */
header,
.site-header,
.elementor-location-header,
#masthead{
  background:#fff !important;
  border-bottom:1px solid var(--klj-line);
  box-shadow:0 2px 14px rgba(26,21,51,0.05);
}

/* Top utility bar (contact info + Track Registration / Login etc.) */
.klj-topbar,
.top-bar,
.topbar{
  background:var(--klj-indigo) !important;
  color:#fff !important;
}
.klj-topbar a, .top-bar a, .topbar a{
  color:rgba(255,255,255,0.85) !important;
}
.klj-topbar a:hover, .top-bar a:hover, .topbar a:hover{
  color:#fff !important;
}

/* Main nav links */
header nav a,
.elementor-nav-menu a,
.site-header nav a{
  color:var(--klj-ink) !important;
  font-weight:500;
  font-size:14.5px;
}
header nav a:hover,
.elementor-nav-menu a:hover,
.site-header nav a:hover{
  color:var(--klj-peacock) !important;
}

/* Dropdown / mega-menu panel */
.elementor-nav-menu--dropdown,
.sub-menu,
.dropdown-menu{
  background:#fff !important;
  border:1px solid var(--klj-line) !important;
  border-radius:12px !important;
  box-shadow:0 16px 34px rgba(26,21,51,0.12) !important;
}
.elementor-nav-menu--dropdown a,
.sub-menu a,
.dropdown-menu a{
  color:var(--klj-ink) !important;
}
.elementor-nav-menu--dropdown a:hover,
.sub-menu a:hover,
.dropdown-menu a:hover{
  background:var(--klj-paper-soft) !important;
  color:var(--klj-peacock) !important;
}

/* ---- 4. Buttons — rounded, saffron primary / indigo outline ---- */
.elementor-button,
button,
input[type="submit"],
.btn{
  background:var(--klj-saffron) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  font-weight:600 !important;
  padding:12px 26px !important;
  box-shadow:0 6px 18px rgba(232,135,30,0.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
.elementor-button:hover,
button:hover,
input[type="submit"]:hover,
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(232,135,30,0.36);
}
.btn-outline{
  background:transparent !important;
  color:var(--klj-indigo) !important;
  border:1.5px solid var(--klj-indigo) !important;
  box-shadow:none;
}

/* ---- 5. Cards / boxes — soft border instead of heavy shadow ---- */
.elementor-widget-image-box,
.card,
.elementor-icon-box-wrapper{
  background:#fff;
  border:1px solid var(--klj-line);
  border-radius:20px;
}

/* ---- 6. Forms (e.g. the Booking Form) ---- */
input[type="text"],
input[type="email"],
textarea,
select{
  background:#fff !important;
  border:1px solid var(--klj-line) !important;
  border-radius:10px !important;
  color:var(--klj-ink) !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus{
  border-color:var(--klj-peacock) !important;
  outline:none !important;
}

/* ---- 7. Footer — keep it dark/indigo for contrast, text light ---- */
footer,
.elementor-location-footer{
  background:var(--klj-indigo) !important;
  color:rgba(255,255,255,0.85) !important;
}
footer h1, footer h2, footer h3, footer h4,
footer .elementor-heading-title{
  color:#fff !important;
}
footer a{
  color:rgba(255,255,255,0.85) !important;
}
footer a:hover{
  color:#fff !important;
}

/* ============================================================
   Header & Nav polish (v2) — merged in
   ============================================================ */
/* ============================================================
   KALANJALI — Header & Top Bar polish (v2)
   ============================================================
   Ivide vekkanam: Appearance → Customize → Additional CSS
   (kalanjali-whitish-theme.css already vechittundenkil, AATHINE
   THAAZHE ee file koodi ADD cheyyuka — replace cheyyenda, both
   thanne vekkam, ee file header/nav mathram koodutham polish
   cheyyum).

   Ee site "e-n-menu" (Elementor-inte puthiya Nav Menu widget)
   aanu use cheyyunnath — athinte official class-names koode
   ee CSS-il cover cheythittund. Ethenkilum selector match
   aakathe irunnal, browser-il right-click → Inspect cheythu
   exact class enik ayachu tharu, adjust cheyyam.
   ============================================================ */


/* ---- 1. Header shell — clean white bar, subtle shadow, sticky-ready ---- */
header,
.site-header,
.elementor-location-header{
  background:#fff !important;
  border-bottom:1px solid var(--klj-line);
  box-shadow:0 2px 16px rgba(26,21,51,0.05);
  transition:box-shadow .2s ease;
}
/* When Elementor's "sticky" effect is on (header sticks on scroll),
   deepen the shadow so it visibly separates from content. */
.elementor-sticky--effects{
  box-shadow:0 6px 24px rgba(26,21,51,0.10) !important;
}

/* Give the header row breathing room instead of a cramped strip. */
.elementor-location-header .elementor-container{
  padding-top:14px;
  padding-bottom:14px;
}

/* ---- 2. Logo — consistent height, never stretched ---- */
.elementor-location-header img,
header .site-logo img,
.elementor-widget-theme-site-logo img{
  height:46px;
  width:auto;
  max-width:none;
}

/* ---- 3. Main navigation (classic Nav Menu widget) ---- */
.elementor-nav-menu{
  gap:30px;
}
.elementor-nav-menu a,
.elementor-item{
  color:var(--klj-ink) !important;
  font-family:'Work Sans', sans-serif;
  font-weight:500 !important;
  font-size:14.5px !important;
  position:relative;
  padding:6px 2px !important;
}
.elementor-nav-menu a::after,
.elementor-item::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:2px;
  background:var(--klj-peacock);
  transition:width .2s ease;
}
.elementor-nav-menu a:hover,
.elementor-item:hover,
.elementor-item.elementor-item-active{
  color:var(--klj-peacock) !important;
}
.elementor-nav-menu a:hover::after,
.elementor-item:hover::after{
  width:100%;
}

/* ---- 3b. Main navigation (new "e-n-menu" widget — Elementor 3.24+) ---- */
.e-n-menu,
.e-n-menu-title-container{
  gap:30px;
}
.e-n-menu .e-n-menu-title,
.e-n-menu-item-title{
  color:var(--klj-ink) !important;
  font-family:'Work Sans', sans-serif !important;
  font-weight:500 !important;
  font-size:14.5px !important;
}
.e-n-menu .e-n-menu-item:hover .e-n-menu-title,
.e-n-menu-item:hover .e-n-menu-item-title{
  color:var(--klj-peacock) !important;
}
.e-n-menu-dropdown-icon svg{
  fill:var(--klj-ink-soft) !important;
}

/* ---- 4. Dropdown / mega-menu panel (covers both widget versions) ---- */
.elementor-nav-menu--dropdown,
.sub-arrow,
.e-n-menu-dropdown{
  background:#fff !important;
  border:1px solid var(--klj-line) !important;
  border-radius:12px !important;
  box-shadow:0 16px 34px rgba(26,21,51,0.14) !important;
  padding:8px !important;
  margin-top:10px !important;
}
.elementor-nav-menu--dropdown a,
.e-n-menu-dropdown a,
.e-n-menu-dropdown .e-n-menu-item-title{
  color:var(--klj-ink) !important;
  border-radius:8px;
  padding:9px 12px !important;
  display:block;
}
.elementor-nav-menu--dropdown a:hover,
.e-n-menu-dropdown a:hover,
.e-n-menu-dropdown .e-n-menu-item:hover .e-n-menu-item-title{
  background:#F5F1E6 !important;
  color:var(--klj-peacock) !important;
}

/* ---- 5. "Register" style CTA button inside the header ---- */
header .elementor-button{
  padding:11px 24px !important;
  font-size:14px !important;
}

/* ---- 6. Mobile hamburger — match the palette instead of default black ---- */
.elementor-menu-toggle,
.e-n-menu-toggle svg{
  color:var(--klj-indigo) !important;
  fill:var(--klj-indigo) !important;
}
.elementor-nav-menu--dropdown.elementor-nav-menu__container,
.e-n-menu-content{
  background:#fff !important;
}

/* ---- 7. Top utility bar (if using the separate topbar HTML snippet) ---- */
.klj-topbar{
  position:relative;
  z-index:100;
}