/* =============================================================
   LARELAPA UI  v2 — Light palette, card text at bottom,
   visible borders, Hindi/English toggle
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Inter:wght@400;500;600&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --lara-white:      #ffffff;
  --lara-bg:         #F8F7FF;       /* very light lavender page bg   */
  --lara-surface:    #ffffff;       /* card / widget background       */
  --lara-border:     #E2D9F3;       /* card border — soft lavender    */
  --lara-shadow:     0 2px 12px rgba(100,60,200,.08);
  --lara-shadow-hv:  0 8px 28px rgba(100,60,200,.16);

  --lara-purple:     #6C3FC5;       /* primary accent                 */
  --lara-purple-lt:  #EDE7FF;       /* light purple tint              */
  --lara-teal:       #0891B2;       /* secondary accent               */
  --lara-teal-lt:    #E0F7FA;
  --lara-orange:     #EA580C;       /* tertiary / CTA accent          */
  --lara-orange-lt:  #FFF1E6;
  --lara-green:      #059669;
  --lara-pink:       #DB2777;
  --lara-yellow:     #D97706;

  --lara-text:       #2D1B69;       /* dark purple — body text        */
  --lara-text-2:     #6B5B9E;       /* secondary text                 */
  --lara-text-3:     #9E8FC4;       /* muted text / meta              */
  --lara-heading:    #1A0E3F;

  --lara-nav-h:      54px;
  --lara-radius:     14px;
  --lara-radius-sm:  9px;
  --lara-card-img-h: 185px;        /* fixed image height in cards    */
  --lara-trans:      .2s ease;
}

/* ── Page base ─────────────────────────────────────────────── */
body { background: var(--lara-bg) !important; color: var(--lara-text); }

/* ── Suppress old header rows ──────────────────────────────── */
.bs-head-detail,
.bs-header-main,
.mainfeatured  { display: none !important; }
.site-content  { padding-top: 0 !important; }


/* =============================================================
   COMPACT NAVBAR
   ============================================================= */
.lara-header {
  position: sticky;
  top: 0;
  z-index: 1050;
  box-shadow: 0 1px 10px rgba(108,63,197,.14);
}

.lara-navbar {
  background: linear-gradient(90deg, #5B21B6 0%, #7C3AED 55%, #9333EA 100%) !important;
  min-height: var(--lara-nav-h) !important;
  padding: 0 !important;
}

/* Brand */
.lara-brand-wrap,
.lara-brand-wrap:hover {
  text-decoration: none !important;
  display: flex;
  align-items: center;
  padding: 0 .5rem;
  flex-shrink: 0;
  color: #fff !important;
}
.lara-brand-wrap img,
.lara-brand-wrap .custom-logo { height: 34px; width: auto; }
.lara-brand-name {
  font-family: 'Nunito', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.02em;
}

/* Nav links */
.lara-nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; }
.lara-nav-list > li { position: relative; }
.lara-nav-list > li > a {
  display: flex; align-items: center;
  height: var(--lara-nav-h);
  padding: 0 .85rem;
  font-family: 'Nunito', sans-serif;
  font-size: .88rem; font-weight: 700;
  color: rgba(255,255,255,.88) !important;
  text-decoration: none !important;
  border-bottom: 3px solid transparent;
  transition: color var(--lara-trans), background var(--lara-trans), border-color var(--lara-trans);
  white-space: nowrap;
}
.lara-nav-list > li > a:hover,
.lara-nav-list > li.current-menu-item > a,
.lara-nav-list > li.current-menu-ancestor > a {
  color: #FDE68A !important;
  border-bottom-color: #FDE68A;
  background: rgba(0,0,0,.14);
}

/* Dropdown */
.lara-nav-list .dropdown-menu {
  border: 1.5px solid var(--lara-border);
  border-top: 3px solid var(--lara-purple);
  border-radius: 0 0 var(--lara-radius-sm) var(--lara-radius-sm);
  box-shadow: var(--lara-shadow-hv);
  background: #fff;
  min-width: 195px;
}
.lara-nav-list .dropdown-menu > li > a {
  padding: .5rem 1rem;
  font-size: .86rem;
  color: var(--lara-heading) !important;
  text-decoration: none !important;
}
.lara-nav-list .dropdown-menu > li > a:hover {
  background: var(--lara-purple-lt);
  color: var(--lara-purple) !important;
}

/* ── Navbar action icons (search, dark toggle, lang toggle) ── */
.lara-desk-actions,
.lara-mobile-actions { gap: .3rem; }

/* Lang toggle — pill-style, distinct from icon buttons */
.lara-lang-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: .18rem;
  font-family: 'Nunito', sans-serif;
  font-size: .78rem;
  font-weight: 800;
  padding: .22rem .65rem;
  border-radius: 99px;
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.45) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--lara-trans), border-color var(--lara-trans);
  line-height: 1.3;
  white-space: nowrap;
}
.lara-lang-toggle:hover {
  background: rgba(255,255,255,.32) !important;
  border-color: rgba(255,255,255,.8) !important;
  color: #FDE68A !important;
}
.lara-lang-active  { opacity: 1; }
.lara-lang-divider { opacity: .45; font-weight: 300; margin: 0 .05rem; }
.lara-lang-other   { opacity: .7; }
.lara-lang-toggle:hover .lara-lang-other { opacity: 1; }

/* Search & dark-toggle icon buttons */
.lara-navbar .msearch,
.lara-desk-actions > a,
.lara-desk-actions > label,
.lara-mobile-actions > a,
.lara-mobile-actions > label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  font-size: .88rem;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--lara-trans);
}
.lara-navbar .msearch:hover,
.lara-desk-actions > a:hover,
.lara-desk-actions > label:hover,
.lara-mobile-actions > a:hover {
  background: rgba(255,255,255,.3) !important;
  color: #FDE68A !important;
}

/* Dark-mode switch restyled as icon */
.lara-navbar .switch {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.15) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer; border: none !important;
}
.lara-navbar .switch input { display: none !important; }
.lara-navbar .switch .slider {
  position: static !important; width: auto !important; height: auto !important;
  background: transparent !important; border-radius: 0 !important;
}
.lara-navbar .switch .slider::before {
  content: '\f185';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  font-size: .88rem; color: #FDE68A;
  background: transparent !important; border: none !important;
  position: static !important; width: auto !important; height: auto !important;
  transform: none !important; display: block;
}
body.dark .lara-navbar .switch .slider::before { content: '\f186'; color: #C4B5FD; }

/* Hamburger */
.lara-toggler {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,.4) !important;
  border-radius: 6px !important;
  padding: .28rem .48rem !important;
  flex-shrink: 0;
}
.lara-toggler .icon-bar {
  display: block; width: 19px; height: 2px;
  background: #fff; border-radius: 2px; margin: 4px 0; transition: all .3s;
}

/* Mobile nav */
@media (max-width: 991px) {
  #lara-nav-collapse {
    background: #5B21B6;
    padding: .4rem 0;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .lara-nav-list { flex-direction: column; }
  .lara-nav-list > li > a {
    height: auto; padding: .6rem 1.2rem;
    border-bottom: none; border-left: 3px solid transparent;
  }
  .lara-nav-list > li > a:hover,
  .lara-nav-list > li.current-menu-item > a {
    border-left-color: #FDE68A; background: rgba(0,0,0,.2); border-bottom: none;
  }
  .lara-lang-toggle { font-size: .76rem; padding: .2rem .55rem; }
}


/* =============================================================
   OVERLAY CARD  — image top, text pinned to BOTTOM of image,
   then white area below for excerpt + readmore
   ============================================================= */

/* Card is a flex column — image on top, text panel below */
.lara-oc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--lara-radius);
  overflow: hidden;
  text-decoration: none !important;
  cursor: pointer;
  background: var(--lara-surface);
  border: 1.5px solid var(--lara-border);
  box-shadow: var(--lara-shadow);
  transition: transform var(--lara-trans), box-shadow var(--lara-trans), border-color var(--lara-trans);
}
.lara-oc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lara-shadow-hv);
  border-color: var(--lara-purple);
  text-decoration: none !important;
}

/* ── IMAGE ZONE (fixed height, image fills it) ───────────── */
.lara-oc-img {
  position: relative;
  width: 100%;
  height: var(--lara-card-img-h);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  overflow: hidden;
}
/* Small zoom on hover */
.lara-oc-card:hover .lara-oc-img { background-size: 106%; }

/* Gradient only at the VERY bottom of the image — title floats here */
.lara-oc-img::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70%;
  background: linear-gradient(
    to top,
    rgba(20,8,60,.82)  0%,
    rgba(20,8,60,.45)  45%,
    transparent        100%
  );
  pointer-events: none;
}

/* Title + category row sit at the very bottom of the IMAGE zone */
.lara-oc-img-text {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: .7rem .85rem .55rem;
}

/* No-image placeholder */
.lara-oc-noimg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #EDE7FF 0%, #F0F9FF 60%, #FCE7F3 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: var(--lara-purple);
}

/* ── Category badges ────────────────────────────────────── */
.lara-oc-cats {
  display: flex; flex-wrap: wrap; gap: .28rem; margin-bottom: .32rem;
}
.lara-oc-badge {
  display: inline-block;
  padding: .14rem .55rem;
  border-radius: 99px;
  font-size: .68rem; font-weight: 700;
  background: var(--lara-purple);
  color: #fff;
  text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.lara-oc-cats .bs-blog-category { display: contents; }
.lara-oc-cats .bs-blog-category a {
  display: inline-block; padding: .14rem .55rem;
  border-radius: 99px; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: #fff !important; text-decoration: none !important; margin: 0;
  background: var(--lara-teal);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

/* Title pinned to bottom of image */
.lara-oc-title-img {
  font-family: 'Nunito', sans-serif;
  font-size: .95rem; font-weight: 800;
  color: #fff;
  line-height: 1.3; margin: 0;
  text-shadow: 0 1px 5px rgba(0,0,0,.5);
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── TEXT PANEL below image ─────────────────────────────── */
.lara-oc-body {
  flex: 1;
  display: flex; flex-direction: column;
  padding: .7rem .85rem .75rem;
  background: var(--lara-surface);
  gap: .3rem;
}

/* Meta row */
.lara-oc-meta {
  display: flex; flex-wrap: wrap; gap: .3rem .65rem;
  font-size: .72rem; color: var(--lara-text-3);
}
.lara-oc-meta span { display: flex; align-items: center; gap: .22rem; }
.lara-oc-meta a { color: var(--lara-text-3); }

/* Excerpt */
.lara-oc-excerpt {
  font-size: .8rem; color: var(--lara-text-2);
  line-height: 1.55; margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  flex: 1;
}

/* Read More link */
.lara-oc-readmore {
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: .75rem; font-weight: 700;
  color: var(--lara-purple);
  text-decoration: none !important;
  align-self: flex-start;
  padding: .18rem .6rem;
  border: 1.5px solid var(--lara-purple);
  border-radius: 99px;
  transition: background var(--lara-trans), color var(--lara-trans);
  margin-top: auto;
}
.lara-oc-card:hover .lara-oc-readmore {
  background: var(--lara-purple);
  color: #fff;
}


/* =============================================================
   LIST MODE (index / archive)
   ============================================================= */
.lara-overlay-list { display: flex; flex-direction: column; gap: 1.1rem; }

/* =============================================================
   GRID MODE
   ============================================================= */
/* (styles from Bootstrap row/col apply) */

/* =============================================================
   FRONT-PAGE GRID
   ============================================================= */
.lara-fp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.1rem;
}

/* First card spans 2 cols + taller image */
@media (min-width: 768px) {
  .lara-fp-grid .lara-oc-card:first-child { grid-column: span 2; }
  .lara-fp-grid .lara-oc-card:first-child .lara-oc-img { height: 240px; }
  .lara-fp-grid .lara-oc-card:first-child .lara-oc-title-img { font-size: 1.25rem; }
}

/* =============================================================
   FRONT-PAGE SECTION HEADERS
   ============================================================= */
.lara-fp-section { padding: 2rem 0; }
.lara-fp-recent  { background: var(--lara-bg); }
.lara-fp-custom-cat { background: var(--lara-white); }
.lara-fp-custom-cat:nth-of-type(even) { background: var(--lara-purple-lt); }

.lara-fp-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.1rem; gap: .75rem; flex-wrap: wrap;
}
.lara-fp-section-title {
  font-family: 'Nunito', sans-serif; font-size: 1.3rem; font-weight: 900;
  color: var(--lara-heading); margin: 0;
}
.lara-fp-section-title span {
  border-bottom: 3px solid var(--lara-purple); padding-bottom: 2px;
}
.lara-fp-viewall {
  font-family: 'Nunito', sans-serif; font-size: .82rem; font-weight: 700;
  color: var(--lara-purple) !important; text-decoration: none !important;
  border: 1.5px solid var(--lara-purple); border-radius: 99px;
  padding: .25rem .85rem; white-space: nowrap;
  transition: background var(--lara-trans), color var(--lara-trans);
}
.lara-fp-viewall:hover { background: var(--lara-purple); color: #fff !important; }

/* Category badge colour rotation */
.lara-fp-grid .lara-oc-card:nth-child(5n+1) .lara-oc-badge,
.lara-overlay-list .lara-oc-card:nth-child(5n+1) .lara-oc-badge { background: var(--lara-purple); }
.lara-fp-grid .lara-oc-card:nth-child(5n+2) .lara-oc-badge,
.lara-overlay-list .lara-oc-card:nth-child(5n+2) .lara-oc-badge { background: var(--lara-teal); }
.lara-fp-grid .lara-oc-card:nth-child(5n+3) .lara-oc-badge,
.lara-overlay-list .lara-oc-card:nth-child(5n+3) .lara-oc-badge { background: var(--lara-orange); }
.lara-fp-grid .lara-oc-card:nth-child(5n+4) .lara-oc-badge,
.lara-overlay-list .lara-oc-card:nth-child(5n+4) .lara-oc-badge { background: var(--lara-pink); }
.lara-fp-grid .lara-oc-card:nth-child(5n+5) .lara-oc-badge,
.lara-overlay-list .lara-oc-card:nth-child(5n+5) .lara-oc-badge { background: var(--lara-green); }

/* =============================================================
   SINGLE POST HERO — image capped at 340px, text at bottom
   ============================================================= */
.lara-single-wrap {
  max-width: 860px; margin: 1.5rem auto 3rem; padding: 0 1rem;
}

.lara-single-hero {
  position: relative;
  border-radius: var(--lara-radius); overflow: hidden;
  margin-bottom: 1.6rem;
  border: 1.5px solid var(--lara-border);
  box-shadow: var(--lara-shadow);
  max-height: 340px;
}
.lara-single-hero__img {
  width: 100%; height: 340px; object-fit: cover; display: block;
}

.lara-single-hero__overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.4rem 1.4rem 1.1rem;
  background: linear-gradient(
    to top, rgba(15,5,45,.9) 0%, rgba(15,5,45,.6) 50%, transparent 100%
  );
}
.lara-single-hero__title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(1.2rem, 3vw, 1.85rem); font-weight: 900;
  color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.4);
  margin: .45rem 0 .55rem; line-height: 1.3;
}
.lara-single-hero__meta {
  display: flex; flex-wrap: wrap; gap: .4rem .85rem;
  font-size: .77rem; color: rgba(255,255,255,.7);
}
.lara-single-hero__meta a { color: rgba(255,255,255,.88) !important; }
.lara-single-hero__meta i { margin-right: .18rem; }

/* Badges in single hero */
.lara-single-hero__overlay .lara-oc-cats a,
.lara-single-hero__overlay .lara-oc-cats .bs-blog-category a {
  background: var(--lara-purple); color: #fff !important;
  padding: .14rem .55rem; border-radius: 99px; font-size: .68rem;
  font-weight: 700; text-transform: uppercase; text-decoration: none !important;
}

/* No-thumbnail block */
.lara-single-notitle-block {
  background: linear-gradient(135deg, var(--lara-purple-lt) 0%, #F0FFF4 100%);
  border-radius: var(--lara-radius); padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem; border-left: 4px solid var(--lara-purple);
  border: 1.5px solid var(--lara-border);
}
.lara-single-plain-title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(1.3rem, 3.5vw, 1.95rem); font-weight: 900;
  color: var(--lara-heading); margin: .4rem 0 .65rem; line-height: 1.3;
}

/* Article body */
.lara-single-content {
  font-family: 'Inter', sans-serif; font-size: 1rem;
  line-height: 1.85; color: var(--lara-text);
}
.lara-single-content p { margin-bottom: 1.15rem; }
.lara-single-content img {
  border-radius: var(--lara-radius-sm); max-width: 100%; height: auto;
  border: 1px solid var(--lara-border);
}

/* =============================================================
   NO-TRANSLATION PAGE
   ============================================================= */
.lara-notranslation-wrap { min-height: 50vh; display: flex; align-items: center; }
.lara-notranslation-box {
  max-width: 520px; margin: 0 auto;
  background: var(--lara-white); border: 1.5px solid var(--lara-border);
  border-radius: var(--lara-radius); box-shadow: var(--lara-shadow-hv);
  padding: 2.5rem 2rem; text-align: center;
}
.lara-notranslation-icon {
  font-size: 3.5rem; color: var(--lara-purple); margin-bottom: 1rem;
}
.lara-notranslation-title {
  font-family: 'Nunito', sans-serif; font-size: 1.5rem; font-weight: 900;
  color: var(--lara-heading); margin-bottom: .75rem;
}
.lara-notranslation-desc {
  color: var(--lara-text-2); font-size: .95rem; line-height: 1.6; margin-bottom: 1.75rem;
}
.lara-notranslation-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }

/* Generic button helpers */
.lara-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Nunito', sans-serif; font-size: .9rem; font-weight: 700;
  padding: .55rem 1.25rem; border-radius: 99px; text-decoration: none !important;
  transition: all var(--lara-trans); border: 1.5px solid transparent;
}
.lara-btn-primary {
  background: var(--lara-purple); color: #fff !important; border-color: var(--lara-purple);
}
.lara-btn-primary:hover { background: #5B21B6; border-color: #5B21B6; }
.lara-btn-outline {
  background: transparent; color: var(--lara-purple) !important;
  border-color: var(--lara-purple);
}
.lara-btn-outline:hover { background: var(--lara-purple-lt); }

/* =============================================================
   MISC FIXES
   ============================================================= */
.bs-card-box { border-radius: var(--lara-radius); background: var(--lara-white); }
.bs-card-box.page-entry-title {
  background: linear-gradient(135deg, #5B21B6 0%, #7C3AED 60%, #9333EA 100%);
  border: none; padding: 1.4rem 1.75rem; margin-bottom: 1.4rem;
}
.bs-card-box.page-entry-title .title,
.bs-card-box.page-entry-title h1 { color: #fff; }

/* Sidebar widget borders */
.bs-sidebar .bs-widget {
  border: 1.5px solid var(--lara-border) !important;
  border-radius: var(--lara-radius) !important;
  box-shadow: var(--lara-shadow);
}

/* Pagination */
.navigation.pagination .nav-links .page-numbers {
  border: 1.5px solid var(--lara-border);
  border-radius: var(--lara-radius-sm);
  background: var(--lara-white);
  color: var(--lara-text);
}
.navigation.pagination .nav-links .page-numbers.current,
.navigation.pagination .nav-links a:hover {
  background: var(--lara-purple);
  color: #fff; border-color: var(--lara-purple);
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 767px) {
  .lara-single-hero       { max-height: 220px; }
  .lara-single-hero__img  { height: 220px; }
  .lara-fp-grid           { grid-template-columns: 1fr; }
  .lara-fp-grid .lara-oc-card:first-child { grid-column: span 1; }
  :root { --lara-card-img-h: 165px; }
}