/* ============================================================
   NAMO DESIGN SYSTEM v2 — Light / Dark + Single-line nav
   Strategy: CSS custom properties on :root + [data-theme="dark"]
   Inline styles are overridden via attribute selectors & !important
   ============================================================ */

/* ── Light token defaults ─────────────────────────────────── */
:root {
  --n-red:        #c0392b;
  --n-red-deep:   #922b21;
  --n-red-light:  #fdf2f1;
  --n-red-border: #f5c6c2;

  --n-bg:         #f4f6f9;
  --n-bg-card:    #ffffff;
  --n-bg-alt:     #f8f9fb;
  --n-bg-muted:   #f2f4f8;
  --n-bg-dark:    #0d0d1f;

  --n-text:       #1a1a2e;
  --n-text-2:     #4a5568;
  --n-text-3:     #8a95a3;
  --n-text-inv:   #ffffff;

  --n-border:     #e8eaee;
  --n-border-2:   #f0f0f0;

  --n-shadow:     0 2px 16px rgba(0,0,0,0.07);
  --n-shadow-md:  0 4px 24px rgba(0,0,0,0.10);
  --n-shadow-lg:  0 8px 40px rgba(0,0,0,0.14);

  --n-radius:     12px;
  --n-radius-sm:  8px;
  --n-radius-lg:  16px;

  --n-header-bg:     #ffffff;
  --n-header-border: #f0f0f0;
  --n-header-text:   #031F42;
  --n-topbar-bg:     #1a1a2e;
  --n-footer-bg:     #eef0f4;
  --n-footer-text:   var(--n-text);

  --n-page-hero-bg:  linear-gradient(135deg,#0d0d1f 0%,#1a293f 100%);

  --n-input-bg:    #fafafa;
  --n-input-bdr:   #e8eaee;
  --n-input-text:  #333333;

  --n-table-head:  #f8f9fb;
  --n-table-alt:   #fdfbfa;
  --n-table-bdr:   #f0f0f0;

  color-scheme: light;
}

/* ── Dark token overrides ─────────────────────────────────── */
[data-theme="dark"] {
  --n-bg:         #10121a;
  --n-bg-card:    #1c1f2e;
  --n-bg-alt:     #161926;
  --n-bg-muted:   #12141e;
  --n-bg-dark:    #080a12;

  --n-text:       #dde3f0;
  --n-text-2:     #8e99b0;
  --n-text-3:     #55617a;
  --n-text-inv:   #10121a;

  --n-border:     #272b3d;
  --n-border-2:   #1e2133;

  --n-shadow:     0 2px 16px rgba(0,0,0,0.35);
  --n-shadow-md:  0 4px 24px rgba(0,0,0,0.45);
  --n-shadow-lg:  0 8px 40px rgba(0,0,0,0.55);

  --n-header-bg:     #1c1f2e;
  --n-header-border: #272b3d;
  --n-header-text:   #dde3f0;
  --n-topbar-bg:     #0d0f1c;
  --n-footer-bg:     #050609;
  --n-footer-text:   #ffffff;

  --n-page-hero-bg:  linear-gradient(135deg,#080a12 0%,#0e1322 100%);

  --n-input-bg:    #1e2133;
  --n-input-bdr:   #272b3d;
  --n-input-text:  #dde3f0;

  --n-table-head:  #1e2133;
  --n-table-alt:   #171a28;
  --n-table-bdr:   #272b3d;

  color-scheme: dark;
}

/* ================================================================
   GLOBAL BODY & TRANSITION
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }
body {
  background-color: var(--n-bg) ;
  color: var(--n-text) ;
  transition: background-color 0.25s, color 0.25s;
}
h1,h2,h3,h4,h5,h6 { color: var(--n-text); }
p { color: var(--n-text-2); }

/* ================================================================
   HEADER
   ================================================================ */
.header-top-info-bar { background: var(--n-topbar-bg) !important; }
.header-1 {
  background: var(--n-header-bg) !important;
  border-bottom: 1px solid var(--n-header-border) !important;
  box-shadow: none !important;
  transition: background 0.25s, box-shadow 0.25s;
}
.header-1.sticky { box-shadow: 0 2px 20px rgba(0,0,0,0.12) !important; }
[data-theme="dark"] .header-1.sticky { box-shadow: 0 2px 20px rgba(0,0,0,0.5) !important; }

/* Nav items */
.header-1 .main-menu ul li a {
  color: var(--n-header-text) !important;
  font-size: 12.5px !important;
  padding: 20px 0 !important;
  font-weight: 600 !important;
}
.header-1 .main-menu ul li a:hover { color: var(--n-red) !important; }
.header-1 .main-menu ul li a .head-icon { display: none !important; }
.header-1 .main-menu ul li a i.fa-chevron-down { font-size: 9px !important; margin-left: 3px !important; }
.header-1 .main-menu ul { white-space: nowrap !important; }

/* Submenu */
.header-1 .main-menu ul li .submenu {
  background: var(--n-bg-card) !important;
  border: 1px solid var(--n-border) !important;
  box-shadow: var(--n-shadow-md) !important;
}
.header-1 .main-menu ul li .submenu li a {
  color: var(--n-text-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.header-1 .main-menu ul li .submenu li a:hover { color: var(--n-red) !important; }

/* Single line spacing */
.header-1 .main-menu ul li { margin-inline-end: 18px !important; }
@media (min-width:1200px) and (max-width:1349px) {
  .header-1 .container-fluid { padding: 0 10px !important; }
  .header-1 .main-menu ul li { margin-inline-end: 11px !important; }
  .header-1 .main-menu ul li a { font-size: 11px !important; }
  .namo-logo { height: 42px !important; }
}
@media (min-width:1350px) and (max-width:1599px) {
  .header-1 .container-fluid { padding: 0 16px !important; }
  .header-1 .main-menu ul li { margin-inline-end: 14px !important; }
  .header-1 .main-menu ul li a { font-size: 12px !important; }
}
@media (min-width:1600px) {
  .header-1 .main-menu ul li { margin-inline-end: 26px !important; }
  .header-1 .main-menu ul li a { font-size: 14px !important; }
}

/* Logo stays as-is in dark mode (no invert) */

/* ================================================================
   DARK MODE TOGGLE BUTTON
   ================================================================ */




/* ================================================================
   PAGE HERO HEADERS (replaces old breadcrumb)
   The .n-page-hero class is applied in PageHeader component
   ================================================================ */
.n-page-hero {
  background: var(--n-page-hero-bg) !important;
  padding: clamp(28px,5vw,48px) 0 clamp(20px,4vw,36px) !important;
  border-bottom: 3px solid var(--n-red);
}
.n-page-hero h1 { color: #fff !important; }
.n-page-hero p  { color: rgba(255,255,255,0.75) !important; }
.n-page-hero a  { color: rgba(255,255,255,0.55) !important; text-decoration: none; }
.n-page-hero .badge-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px; padding: 4px 14px; margin-bottom: 12px;
}
.n-page-hero .badge-pill span { color: rgba(255,255,255,0.85); font-size: 0.72rem; font-weight: 700; }

/* ================================================================
   SECTION BACKGROUNDS — override inline hardcoded colours
   ================================================================ */
/* All white-background sections */
[data-theme="dark"] section,
[data-theme="dark"] .section-bg,
[data-theme="dark"] .team-section-5,
[data-theme="dark"] .about-section,
[data-theme="dark"] .contact-section,
[data-theme="dark"] .courses-details-section,
[data-theme="dark"] .team-details-section,
[data-theme="dark"] .popular-courses-section-33,
[data-theme="dark"] .event-section,
[data-theme="dark"] .gallery-section,
[data-theme="dark"] .choose-us-section-3,
[data-theme="dark"] .quality-coureses-section,
[data-theme="dark"] .counter-section-23 {
  background-color: var(--n-bg) !important;
}

/* ================================================================
   CARDS — theme CSS can't override inline style, so we use
   a CSS class .n-card that components should add. For legacy
   components that still use inline style, we provide !important
   overrides using attribute selectors.
   ================================================================ */
.n-card {
  background: var(--n-bg-card) !important;
  color: var(--n-text) !important;
  border-color: var(--n-border) !important;
}
.n-card h1,.n-card h2,.n-card h3,.n-card h4,.n-card h5,.n-card h6 { color: var(--n-text) !important; }
.n-card p { color: var(--n-text-2); }

/* Legacy theme class overrides */
[data-theme="dark"] .feature-card-items,
[data-theme="dark"] .contact-box-items,
[data-theme="dark"] .popular-courses-items,
[data-theme="dark"] .team-card-items,
[data-theme="dark"] .courses-card-items,
[data-theme="dark"] .courses-details-items,
[data-theme="dark"] .team-details-items,
[data-theme="dark"] .event-card-items,
[data-theme="dark"] .single-footer-widget,
[data-theme="dark"] .about-wrapper-2,
[data-theme="dark"] .counter-wrapper-2 {
  background: var(--n-bg-card) !important;
  color: var(--n-text) !important;
}
[data-theme="dark"] .feature-card-items h3,
[data-theme="dark"] .contact-box-items h5,
[data-theme="dark"] .courses-details-items h3,
[data-theme="dark"] .team-card-items h4 { color: var(--n-text) !important; }

/* ================================================================
   INPUTS, FORMS
   ================================================================ */
input, textarea, select {
  background: var(--n-input-bg) !important;
  border-color: var(--n-input-bdr) !important;
  color: var(--n-input-text) !important;
  transition: border-color 0.2s;
}
input::placeholder, textarea::placeholder { color: var(--n-text-3) !important; }
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--n-red) !important;
  outline: none;
}

/* ================================================================
   TABLES
   ================================================================ */
[data-theme="dark"] table { color: var(--n-text) !important; }
[data-theme="dark"] table thead tr { background: var(--n-table-head) !important; }
[data-theme="dark"] table tbody tr { color: var(--n-text) !important; }
[data-theme="dark"] table td,
[data-theme="dark"] table th {
  border-color: var(--n-table-bdr) !important;
  color: var(--n-text) !important;
}

/* ================================================================
   TABS (bootstrap nav-link)
   ================================================================ */
[data-theme="dark"] .nav-link { color: var(--n-text-2) !important; }
[data-theme="dark"] .nav-link.active { color: var(--n-red) !important; }
[data-theme="dark"] .tab-content { color: var(--n-text) !important; }

/* ================================================================
   FOOTER — theme-adaptive (light bg in light mode, dark in dark mode)
   ================================================================ */
.footer-section-3, footer {
  background: var(--n-footer-bg) !important;
  color: var(--n-footer-text) !important;
}
.footer-section-3 *, footer * { transition: color 0.25s, background-color 0.25s; }

/* ================================================================
   BREADCRUMB / OLD THEME BREADCRUMB override
   ================================================================ */
[data-theme="dark"] .breadcrumb-wrapper,
[data-theme="dark"] .breadcrumb-wrapper.style-2 {
  background: #080a12 !important;
}

/* ================================================================
   SCROLLBAR
   ================================================================ */
[data-theme="dark"] ::-webkit-scrollbar { width:8px; background:#1c1f2e; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background:#272b3d; border-radius:4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background:#353a52; }

/* ================================================================
   SECTION SPACING CONSISTENCY
   ================================================================ */
.section-padding { padding: clamp(44px,6vw,72px) 0 !important; }
section { padding: clamp(36px,5vw,64px) 0; }
@media (max-width:575px) {
  .section-padding { padding: 32px 0 !important; }
  section { padding: 28px 0 !important; }
}

/* ================================================================
   SECTION TITLE CONSISTENCY
   ================================================================ */
.section-title h6 {
  color: var(--n-red) !important;
  font-size: 0.78rem !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 1px !important;
}
.section-title h2 {
  color: var(--n-text) !important;
  font-size: clamp(1.4rem,3vw,2rem) !important;
  font-weight: 800 !important; line-height: 1.25 !important;
}
[data-theme="dark"] .color-red h6 { color: var(--n-red) !important; }
[data-theme="dark"] .color-red h2 { color: var(--n-text) !important; }

/* ================================================================
   BUTTON CONSISTENCY
   ================================================================ */
.theme-btn {
  background: var(--n-red) !important;
  color: #fff !important;
  border: none !important;
  transition: opacity 0.2s !important;
}
.theme-btn:hover { opacity: 0.88 !important; color: #fff !important; }
.theme-btn.red-btn { background: var(--n-red) !important; }

/* ================================================================
   OFFCANVAS
   ================================================================ */
[data-theme="dark"] .offcanvas__info {
  background: var(--n-bg-card) !important;
}

/* ================================================================
   MOBILE
   ================================================================ */
@media (max-width:767px) { section { padding: 28px 0 !important; } }
@media (max-width:480px) { .header-top-info-bar { display: none !important; } }

/* ================================================================
   NAV DROPDOWN SPACING — tighter, more compact menus
   Original theme used 30px padding + 15px gaps designed for
   2-3 item menus. Our dropdowns have 5-12 items, so compact it.
   ================================================================ */
.header-1 .main-menu ul li .submenu {
  padding: 14px 18px !important;
  min-width: 240px !important;
}
.header-1 .main-menu ul li .submenu li:not(:last-child) {
  padding-bottom: 0 !important;
  margin-bottom: 2px !important;
}
.header-1 .main-menu ul li .submenu li a {
  padding: 8px 4px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  border-radius: 6px !important;
}
.header-1 .main-menu ul li .submenu li a:hover {
  background: var(--n-red-light) !important;
  padding-left: 8px !important;
}
/* Wider dropdowns for long institute/info names */
.header-1 .main-menu ul li:nth-child(2) .submenu,
.header-1 .main-menu ul li:nth-child(3) .submenu,
.header-1 .main-menu ul li:nth-child(4) .submenu {
  min-width: 300px !important;
}

/* Department list section wrapper */
.team-section-5 { background: var(--n-bg) !important; }

/* Footer logo stays as-is in dark mode (no invert) */