/* ============================================================
   KSHIPRA ACADEMY — THEME TOGGLE (Light / Dark)
   Drop this file into assets/css/ and link it in every page
============================================================ */

/* ---- Toggle Button ---- */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #F0EEF0;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.theme-toggle-btn:hover {
  background: rgba(232, 115, 42, 0.15);
  border-color: rgba(232, 115, 42, 0.4);
  transform: rotate(15deg) scale(1.05);
}

.theme-toggle-btn .icon-sun,
.theme-toggle-btn .icon-moon {
  position: absolute;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark mode → show moon */
.theme-toggle-btn .icon-sun  { opacity: 0; transform: scale(0.5) rotate(-90deg); }
.theme-toggle-btn .icon-moon { opacity: 1; transform: scale(1) rotate(0deg); }

/* Light mode → show sun */
html.light-mode .theme-toggle-btn .icon-sun  { opacity: 1; transform: scale(1) rotate(0deg); }
html.light-mode .theme-toggle-btn .icon-moon { opacity: 0; transform: scale(0.5) rotate(90deg); }

html.light-mode .theme-toggle-btn {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
  color: #1a1a2e;
}
html.light-mode .theme-toggle-btn:hover {
  background: rgba(232, 115, 42, 0.12);
}

/* On mobile inside hamburger menu, give it more room */
@media (max-width: 950px) {
  .theme-toggle-btn {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }
}


/* ============================================================
   LIGHT MODE VARIABLES
============================================================ */
html.light-mode {
  --clr-dark:          #F4F2F7;
  --clr-dark-card:     #FFFFFF;
  --clr-dark-surface:  #EDE9F4;
  --clr-dark-border:   rgba(0, 0, 0, 0.10);
  --clr-text:          #1A1A2E;
  --clr-text-muted:    #5A5570;
  --clr-white:         #1A1A2E;
  --grad-hero:         linear-gradient(135deg, #EDE9F4 0%, #F4EEF7 50%, #F7EEEE 100%);
}

/* ---- Base ---- */
html.light-mode {
  background: var(--clr-dark);
  color: var(--clr-text);
}

/* ---- Navbar ---- */
html.light-mode .navbar {
  background: rgba(244, 242, 247, 0.96);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
html.light-mode .navbar.scrolled {
  background: rgba(244, 242, 247, 0.98);
}
html.light-mode .nav-links a {
  color: #3A3550;
}
html.light-mode .nav-links a:hover {
  color: var(--clr-primary);
}
html.light-mode .nav-logo-text {
  color: #1A1A2E;
}
html.light-mode .nav-logo-text span {
  color: #5A5570;
}
html.light-mode .hamburger span {
  background: #1A1A2E;
}
html.light-mode .dropdown-content {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
html.light-mode .dropdown-content a {
  color: #5A5570 !important;
}
html.light-mode .dropdown-content a:hover {
  background: rgba(0,0,0,0.04);
  color: #1A1A2E !important;
}

/* ---- Mobile Nav Menu ---- */
html.light-mode .nav-links.active,
html.light-mode .nav-links.open {
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
html.light-mode .nav-links.active a,
html.light-mode .nav-links.open a {
  color: #3A3550;
}
html.light-mode .nav-links.active a:hover,
html.light-mode .nav-links.open a:hover {
  background: rgba(0,0,0,0.04);
  color: #1A1A2E;
}

/* ---- Hero ---- */
html.light-mode .hero {
  background: var(--grad-hero);
}
html.light-mode .hero h1,
html.light-mode .section-title {
  color: #1A1A2E;
}
html.light-mode .hero-desc {
  color: #5A5570;
}
html.light-mode .hero-badge {
  background: rgba(178,34,52,0.08);
  border-color: rgba(178,34,52,0.2);
  color: var(--clr-primary);
}

/* ---- Hero Course Pills in Light Mode ---- */
html.light-mode .hcp-gold {
  background: rgba(180, 83, 9, 0.08);
  border-color: rgba(180, 83, 9, 0.35);
  color: #b45309;
}
html.light-mode .hcp-gold:hover {
  border-color: #b45309;
  color: #b45309;
  box-shadow: 0 8px 25px rgba(180, 83, 9, 0.2);
}

html.light-mode .hcp-red {
  background: rgba(185, 28, 28, 0.08);
  border-color: rgba(185, 28, 28, 0.35);
  color: #b91c1c;
}
html.light-mode .hcp-red:hover {
  border-color: #b91c1c;
  color: #b91c1c;
  box-shadow: 0 8px 25px rgba(185, 28, 28, 0.2);
}

html.light-mode .hcp-orange {
  background: rgba(194, 65, 12, 0.08);
  border-color: rgba(194, 65, 12, 0.35);
  color: #c2410c;
}
html.light-mode .hcp-orange:hover {
  border-color: #c2410c;
  color: #c2410c;
  box-shadow: 0 8px 25px rgba(194, 65, 12, 0.2);
}

html.light-mode .hcp-crimson {
  background: rgba(190, 18, 60, 0.08);
  border-color: rgba(190, 18, 60, 0.35);
  color: #be123c;
}
html.light-mode .hcp-crimson:hover {
  border-color: #be123c;
  color: #be123c;
  box-shadow: 0 8px 25px rgba(190, 18, 60, 0.2);
}

html.light-mode .hcp-green {
  background: rgba(22, 163, 74, 0.1);
  border-color: rgba(22, 163, 74, 0.4);
  color: #15803d;
}
html.light-mode .hcp-green:hover {
  border-color: #15803d;
  color: #15803d;
  box-shadow: 0 8px 25px rgba(22, 163, 74, 0.2);
}

html.light-mode .hcp-new-dot {
  background: #16a34a;
  color: #ffffff;
}

/* ---- Section label ---- */
html.light-mode .section-desc {
  color: #5A5570;
}

/* ---- Cards ---- */
html.light-mode .glass-card,
html.light-mode .faq-item,
html.light-mode .blog-card,
html.light-mode .fork-btn,
html.light-mode .mou-firm-card,
html.light-mode .course-benefit-card,
html.light-mode .panel-body,
html.light-mode .persona-tab-content {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.09);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

html.light-mode .panel-body {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.09);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

html.light-mode .glass-card:hover,
html.light-mode .blog-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

/* ---- FAQ ---- */
html.light-mode .faq-section {
  background: var(--clr-dark);
}
html.light-mode .faq-question {
  color: #1A1A2E;
}
html.light-mode .faq-answer {
  color: #5A5570;
}
html.light-mode .faq-item.active {
  background: rgba(232,115,42,0.04);
  border-color: var(--clr-accent);
}

/* ---- Policy pages ---- */
html.light-mode .policy-header {
  background: var(--grad-hero);
}
html.light-mode .policy-header h1 {
  color: #1A1A2E;
}
html.light-mode .policy-content-wrapper {
  background: var(--clr-dark);
}
html.light-mode .policy-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.09);
  box-shadow: 0 12px 40px rgba(0,0,0,0.10);
}
html.light-mode .policy-card h3 {
  color: #1A1A2E;
  border-color: rgba(0,0,0,0.09);
}
html.light-mode .policy-section h4 {
  color: var(--clr-primary);
}
html.light-mode .policy-section p,
html.light-mode .policy-section li,
html.light-mode .policy-list li {
  color: #5A5570;
}
html.light-mode .policy-highlight {
  background: rgba(232,115,42,0.06);
  color: #3A3550;
}

/* ---- Buttons (ghost / outline) ---- */
html.light-mode .btn-ghost {
  background: rgba(0,0,0,0.05);
  color: #3A3550;
  border-color: rgba(0,0,0,0.10);
}
html.light-mode .btn-ghost:hover {
  background: rgba(0,0,0,0.09);
}
html.light-mode .btn-outline {
  color: #1A1A2E;
  border-color: rgba(0,0,0,0.25);
}
html.light-mode .btn-outline:hover {
  background: rgba(0,0,0,0.06);
}

/* ---- Stats / counters ---- */
html.light-mode .stat-number,
html.light-mode .panel-body h3,
html.light-mode .batch-title,
html.light-mode .blog-content h4,
html.light-mode .fork-btn strong,
html.light-mode .mou-section-title {
  color: #1A1A2E;
}
html.light-mode .stat-label,
html.light-mode .batch-date,
html.light-mode .blog-content p,
html.light-mode .fork-btn span,
html.light-mode .mou-section-sub {
  color: #5A5570;
}

/* ---- Footer ---- */
/* Footer keeps a dark background in light mode, so all text must stay light */
html.light-mode .footer {
  background: #1A1A2E;
  border-top: 1px solid rgba(255,255,255,0.08);
}
html.light-mode .footer .nav-logo-text {
  color: #F0EEF0;
}
html.light-mode .footer .nav-logo-text span {
  color: #9A96A4;
}
html.light-mode .footer h5 {
  color: #F0EEF0;
}
html.light-mode .footer p {
  color: #9A96A4;
}
html.light-mode .footer .footer-links a {
  color: #9A96A4;
}
html.light-mode .footer .footer-links a:hover {
  color: #F0EEF0;
}
html.light-mode .footer .footer-bottom p {
  color: #9A96A4;
}
html.light-mode .footer .footer-bottom p a,
html.light-mode .footer .footer-bottom-links a,
.footer .footer-bottom p a,
.footer .footer-bottom-links a {
  color: #e0583e !important;
  font-weight: 600 !important;
}

/* ---- Sections with dark surface ---- */
html.light-mode .common-cta-section {
  background: #EDE9F4;
}
html.light-mode .about-section,
html.light-mode .journey-section,
html.light-mode .corp-journey-section,
html.light-mode section {
  background: var(--clr-dark);
}

/* ---- Dark surface cards inside sections ---- */
html.light-mode .mou-section-highlight {
  background: linear-gradient(135deg, rgba(178,34,52,0.05), rgba(232,115,42,0.03));
  border-color: rgba(178,34,52,0.15);
}
html.light-mode .mou-firm-card {
  background: #F4F2F7;
  border-color: rgba(0,0,0,0.08);
}

/* ---- Batch rows ---- */
html.light-mode .batch-row {
  border-color: rgba(0,0,0,0.07);
}
html.light-mode .batch-row:hover {
  background: rgba(0,0,0,0.03);
}

/* ---- Scroll top button ---- */
html.light-mode .scroll-top {
  background: var(--clr-primary);
  color: #fff;
}

/* ---- WhatsApp float stays green ---- */

/* ============================================================
   FIX 1 — Hero "Official Training Partner" logos
   In dark mode they are inverted to white. In light mode,
   remove the invert filter so logos show in their natural colours.
============================================================ */
html.light-mode .panel-logos-row img {
  filter: none;
  opacity: 1;
}

/* ============================================================
   FIX 2 — LinkedIn buttons (pill & text variants)
   Both have hardcoded dark backgrounds (#21212c / #343a40).
   Override to a clean light surface with dark text.
============================================================ */
html.light-mode .linkedin-pill {
  background: #F0EEF6;
  border-color: rgba(0, 0, 0, 0.14);
}
html.light-mode .linkedin-pill:hover {
  background: #E6E2F2;
  border-color: rgba(0, 119, 181, 0.35);
}
html.light-mode .pill-name,
html.light-mode .pill-email {
  color: #1A1A2E;
}

html.light-mode .linkedin-text-btn {
  background: #F0EEF6;
  border-color: rgba(0, 0, 0, 0.14);
  color: #1A1A2E;
}
html.light-mode .linkedin-text-btn:hover {
  background: #E6E2F2;
  border-color: #0077b5;
  color: #1A1A2E;
}

/* ============================================================
   FIX 3 — Moving logo / ticker sections
   .ticker-item has hardcoded background (#1e1e26 / #1e2535).
   .partners-section has hardcoded background (#0c0c10).
   Override all of these to match the light theme.
============================================================ */
html.light-mode .partners-section {
  background: #EDE9F4;
}
html.light-mode .partners-section::before {
  /* soften the glow overlay in light mode */
  background: radial-gradient(ellipse at center, rgba(178,34,52,0.06) 0%, transparent 70%);
}

/* Text-only ticker items have a hardcoded dark inline background (#1e2535).
   Override those to a neutral light surface. Image-only items stay transparent
   so no white box appears behind the logos. */
html.light-mode .ticker-item {
  background: transparent !important; /* start transparent — image logos get no box */
  border-color: transparent;
  color: #3A3550;
}
/* Re-apply a subtle surface only for items that contain text (not images) */
html.light-mode .ticker-item:not(:has(img)) {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}
html.light-mode .ticker-item:hover {
  background: transparent !important;
  border-color: transparent;
  color: var(--clr-primary);
}
html.light-mode .ticker-item:not(:has(img)):hover {
  background: rgba(232, 115, 42, 0.10) !important;
  border-color: rgba(232, 115, 42, 0.35);
}

/* accred cards inside partners section */
html.light-mode .accred-card {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
html.light-mode .accred-card.featured-partner {
  background: linear-gradient(135deg, rgba(212,160,23,0.07), #FFFFFF);
  border-color: rgba(212,160,23,0.3);
}
html.light-mode .accred-title {
  color: #1A1A2E;
}
html.light-mode .accred-sub {
  color: #5A5570;
}

/* ---- Timeline / journey ---- */
html.light-mode .journey-step,
html.light-mode .corp-step {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.08);
}

/* ---- Persona tabs ---- */
html.light-mode .persona-tab {
  background: #EDE9F4;
  color: #5A5570;
  border-color: rgba(0,0,0,0.08);
}
html.light-mode .persona-tab.active {
  background: var(--clr-primary);
  color: #fff;
}

/* ---- Knowledge Hub / Blog ---- */
html.light-mode .blog-meta {
  color: var(--clr-accent);
}

/* ---- Transition everything nicely ---- */
body,
html.light-mode,
.navbar,
.glass-card,
.faq-item,
.blog-card,
.policy-card,
.fork-btn,
.batch-row,
.mou-firm-card,
.dropdown-content,
.nav-links {
  transition: background 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================================
   FIX 2 — Salary calculator highlight box text contrast
   .calc-box-highlight has an orange/red gradient background.
   In light mode the paragraph text inherits a dark colour
   making it hard to read. Force white on everything inside.
============================================================ */
html.light-mode .calc-box-highlight,
html.light-mode .calc-box-highlight h5,
html.light-mode .calc-box-highlight .calc-value,
html.light-mode .calc-box-highlight p {
  color: #ffffff !important;
}

/* ============================================================
   FIX 5 — Past Event Gallery overlay titles
   .gallery-overlay-title uses --clr-white which turns dark in
   light mode. The overlay sits over a dark photo gradient so
   the text must always stay white regardless of theme.
============================================================ */
html.light-mode .gallery-overlay-title,
html.light-mode .gallery-overlay-hint {
  color: #ffffff !important;
}

   In light mode --clr-white resolves to dark (#1A1A2E)
   causing black text on the orange button. Force white.
============================================================ */
html.light-mode .btn-accent {
  color: #ffffff !important;
}
html.light-mode .btn-accent:hover {
  color: #ffffff !important;
}

/* ============================================================
   KSHIPRA AI COACH (Light Mode Overrides)
============================================================ */
html.light-mode .kaia-section {
  background: var(--clr-dark-surface, #EDE9F4) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.light-mode .kaia-card {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08), 0 0 40px rgba(228, 160, 8, 0.08) !important;
}

html.light-mode .kaia-badge {
  background: rgba(228, 160, 8, 0.15) !important;
  border-color: rgba(228, 160, 8, 0.4) !important;
  color: #b45309 !important;
}
html.light-mode .kaia-badge i {
  color: #b45309 !important;
}

/* Suggestion questions (chips) in light mode - make them look clearly clickable */
html.light-mode .kaia-chip {
  background: #F4F2F7 !important;
  border: 1.5px solid rgba(228, 160, 8, 0.4) !important;
  color: #1A1A2E !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}
html.light-mode .kaia-chip:hover {
  background: rgba(228, 160, 8, 0.15) !important;
  border-color: #e4a008 !important;
  color: #b45309 !important;
  box-shadow: 0 4px 12px rgba(228, 160, 8, 0.2) !important;
}
html.light-mode .kaia-chip i {
  color: #d97706 !important;
}

/* Chat bubbles in light mode */
html.light-mode .kaia-bubble--ai,
html.light-mode .kaia-loading-bubble {
  background: #F4F2F7 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #1A1A2E !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
html.light-mode .kaia-bubble--ai strong {
  color: #b45309 !important;
}

html.light-mode .kaia-bubble--user {
  background: linear-gradient(135deg, #B22234, #E8732A) !important;
  color: #ffffff !important;
}

html.light-mode .kaia-avatar--user {
  background: #1A1A2E !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
}
html.light-mode .kaia-avatar--user i {
  color: #ffffff !important;
}

/* Text box (input) in light mode - make background, text, and border clearly visible */
html.light-mode .kaia-input {
  background: #F4F2F7 !important;
  border: 1.5px solid rgba(0, 0, 0, 0.25) !important;
  color: #1A1A2E !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}
html.light-mode .kaia-input:focus {
  border-color: #e4a008 !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(228, 160, 8, 0.2) !important;
  color: #1A1A2E !important;
}
html.light-mode .kaia-input::placeholder {
  color: #5A5570 !important;
  opacity: 0.8 !important;
}

/* Ask AI send button in light mode - force white text and icon */
html.light-mode .kaia-btn,
html.light-mode .kaia-btn span,
html.light-mode .kaia-btn i {
  color: #ffffff !important;
}
html.light-mode .kaia-btn:hover:not(:disabled) {
  color: #ffffff !important;
}

/* ============================================================
   GLOBAL FORM CONTROLS & PLACEHOLDER VISIBILITY
============================================================ */
/* ---- Dark Mode Forms ---- */
.form-control,
.kf-input,
.kf-textarea,
.kf-select,
.select-wrapper select,
.opt-input,
#qr-name, #qr-mobile, #qr-email,
#apply-name, #apply-mobile, #apply-email, #apply-college, #apply-city,
#name, #whatsapp, #email, #fullName, #phone, #companyName {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}
.form-control::placeholder,
.kf-input::placeholder,
.kf-textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
  opacity: 1 !important;
}
.form-control:focus,
.kf-input:focus,
.kf-textarea:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: #e4a008 !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 0 3px rgba(228, 160, 8, 0.2) !important;
  color: #ffffff !important;
}

/* ---- Light Mode Forms ---- */
html.light-mode .form-control,
html.light-mode .kf-input,
html.light-mode .kf-textarea,
html.light-mode .kf-select,
html.light-mode .select-wrapper select,
html.light-mode .opt-input,
html.light-mode #qr-name, html.light-mode #qr-mobile, html.light-mode #qr-email,
html.light-mode #apply-name, html.light-mode #apply-mobile, html.light-mode #apply-email, html.light-mode #apply-college, html.light-mode #apply-city,
html.light-mode #name, html.light-mode #whatsapp, html.light-mode #email, html.light-mode #fullName, html.light-mode #phone, html.light-mode #companyName,
html.light-mode input[type="text"],
html.light-mode input[type="email"],
html.light-mode input[type="tel"],
html.light-mode select,
html.light-mode textarea {
  background-color: #F4F2F7 !important;
  border: 1.5px solid rgba(0, 0, 0, 0.25) !important;
  color: #1A1A2E !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}
html.light-mode .form-control::placeholder,
html.light-mode .kf-input::placeholder,
html.light-mode .kf-textarea::placeholder,
html.light-mode input::placeholder,
html.light-mode textarea::placeholder {
  color: #5A5570 !important;
  opacity: 0.85 !important;
}
html.light-mode .form-control:focus,
html.light-mode .kf-input:focus,
html.light-mode .kf-textarea:focus,
html.light-mode input:focus,
html.light-mode textarea:focus,
html.light-mode select:focus {
  border-color: #e4a008 !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(228, 160, 8, 0.2) !important;
  color: #1A1A2E !important;
}