/* ============================================================
   UnisealCR — shared.css  (v20260616)
   Single source of truth for: header, navbar, dark-mode, hero
   Include this in every page AFTER style.css and BEFORE
   responsive-full.css.
   ============================================================ */

/* Reset */
html, body { margin: 0 !important; padding: 0 !important; width: 100%; }

/* ── Header (sticky, always white) ── */
.header {
  position: fixed !important;
  top: 0; left: 0;
  width: 100%;
  z-index: 9999;
  background-color: #ffffff !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07) !important;
  transition: box-shadow 0.3s ease;
}
.header.is-scrolled {
  box-shadow: 0 4px 22px rgba(0,0,0,0.11) !important;
}

/* ── Navbar links ── */
.navbar .nav-menu li a:not(.btn) {
  color: #000000 !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  transition: all 0.3s ease;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
}
.navbar .nav-menu li a:not(.btn):hover {
  color: #ffffff !important;
  background-color: #000000 !important;
}
.navbar .nav-menu li a.active:not(.btn) {
  color: #ffffff !important;
  background-color: #000000 !important;
}

/* ── Section titles centered ── */
.section-header,
.hero-content,
.hero-title,
.section-title,
.hero-subtitle,
.section-subtitle,
.section-head,
.section-head h2,
.section-head p,
.chotam-hero__title,
.chotam-hero__text,
.main-slogan,
.hero-desc,
.hero-slogan {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* ── Hero media — below header, edge to edge ── */
.hero.hero--image-only {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  margin-top: var(--ucr-header-h) !important;
  left: 0;
  right: 0;
}
/* Home hero (chotam-hero) already uses padding-top, keep consistent */
.chotam-hero {
  margin-top: 0 !important;
  padding-top: var(--ucr-header-h) !important;
}
.hero.hero--image-only .hero-bg--only,
.hero.hero--image-only video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  transform: none !important;
}

/* ── Dark mode overrides ── */
html[data-theme="dark"] body {
  background: var(--bg-body);
  color: var(--text-main);
}
html[data-theme="dark"] .section,
html[data-theme="dark"] .section-alt,
html[data-theme="dark"] .about-hero,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .content-block,
html[data-theme="dark"] .full-profile,
html[data-theme="dark"] .profile-content {
  background: rgba(15,23,42,0.45);
  color: var(--text-main);
  border-color: rgba(148,163,184,0.18);
}
html[data-theme="dark"] .header,
html[data-theme="dark"] .header.is-scrolled {
  background-color: #0b1220 !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4) !important;
}
html[data-theme="dark"] a,
html[data-theme="dark"] .nav-menu a { color: var(--text-main); }

/* ── Dark mode: header nav links (override !important from light styles) ── */
html[data-theme="dark"] .navbar .nav-menu li a:not(.btn) {
  color: #e5e7eb !important;
}
html[data-theme="dark"] .navbar .nav-menu li a:not(.btn):hover {
  color: #000000 !important;
  background-color: #e5e7eb !important;
}
html[data-theme="dark"] .navbar .nav-menu li a.active:not(.btn) {
  color: #000000 !important;
  background-color: #e5e7eb !important;
}

/* ── Dark mode: hamburger lines ── */
html[data-theme="dark"] .menu-toggle span {
  background: #e5e7eb !important;
}

/* ── Dark mode: theme toggle button ── */
html[data-theme="dark"] .theme-toggle {
  background: rgba(255,255,255,0.12) !important;
  color: #e5e7eb !important;
}

/* ── Dark mode: logo text ── */
html[data-theme="dark"] .logo span {
  color: #e5e7eb !important;
}

/* ── Dark mode: mobile dropdown menu ── */
@media (max-width: 900px) {
  html[data-theme="dark"] .nav-menu {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.10) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,0.5) !important;
  }
  html[data-theme="dark"] .navbar .nav-menu li a:not(.btn) {
    color: #e5e7eb !important;
  }
  html[data-theme="dark"] .navbar .nav-menu li a:not(.btn):hover {
    background-color: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
  }
  html[data-theme="dark"] .navbar .nav-menu li a.active:not(.btn) {
    background-color: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
  }
  html[data-theme="dark"] .nav-menu .btn {
    background-color: #2b6cff !important;
    color: #ffffff !important;
    border-color: #2b6cff !important;
  }
}
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .subtitle { color: var(--text-secondary); }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .team-name,
html[data-theme="dark"] strong { color: #f8fafc !important; }
/* hero-title uses gradient fill — don't override with flat color */
html[data-theme="dark"] .hero-title {
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(120deg, #c97ec0 0%, #6b9fd4 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
html[data-theme="dark"] .hero-subtitle,
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .content-block p,
html[data-theme="dark"] .profile-content p { color: #cbd5e1 !important; }
html[data-theme="dark"] .content-block [style*="background: #eff6ff"],
html[data-theme="dark"] .content-block [style*="background:#eff6ff"] {
  background: rgba(37,99,235,0.16) !important;
  border: 1px solid rgba(96,165,250,0.25) !important;
}
html[data-theme="dark"] .content-block [style*="color: #1e3a8a"],
html[data-theme="dark"] .content-block [style*="color:#1e3a8a"] { color: #bfdbfe !important; }
html[data-theme="dark"] .site-footer { background: #0b1220 !important; border-top-color: rgba(255,255,255,0.12) !important; }
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .site-footer h3,
html[data-theme="dark"] .site-footer p,
html[data-theme="dark"] .site-footer span,
html[data-theme="dark"] .site-footer strong,
html[data-theme="dark"] .site-footer .footer-note,
html[data-theme="dark"] .site-footer .footer-line,
html[data-theme="dark"] .site-footer .footer-bottom { color: #e5e7eb !important; }
html[data-theme="dark"] .site-footer a,
html[data-theme="dark"] .site-footer i { color: #93c5fd !important; }
html[data-theme="dark"] .site-footer .footer-bottom { border-top-color: rgba(255,255,255,0.14) !important; }
html[data-theme="dark"] .site-footer .badge-pill {
  background: rgba(255,255,255,0.10) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}