/* ==========================================================================
   Dezitech — Bootstrap-based components that replaced React-only markup
   (navbar, certificate modal, contact form validation, chat widget states)
   ========================================================================== */

/* ---------- Header / Bootstrap navbar ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid #E2E8F0;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06);
}
.site-header .navbar { --bs-navbar-padding-y: 0; }
.site-header .nav-container {
  width: min(1280px, 92vw); margin: 0 auto; min-height: 60px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
}
.brand-logo { display: flex; align-items: center; height: 100%; padding: 0; text-decoration: none; }
.site-header .brand-logo { height: 60px; }
/* unscoped like the original Navbar.css, so the footer logo gets the same sizing */
.brand-logo .logo-png-colorized {
  width: 151px; height: auto; max-height: 46px; object-fit: contain; display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12)); transition: transform 0.2s ease;
}
.brand-logo:hover .logo-png-colorized { transform: scale(1.02); }

.site-header .nav-menu { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; }
.site-header .navbar-nav .nav-link {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px; font-weight: 600; line-height: 1.2; color: #334155;
  padding: 7px 16px; border-radius: 6px; background: transparent;
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none; transition: all 0.2s ease;
}
.site-header .navbar-nav .nav-link:hover { color: #0F172A; background: #F1F5F9; }
.site-header .navbar-nav .nav-link.is-active {
  color: #fff; font-weight: 700; background: #EF4444; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}
.site-header .nav-split { display: flex; align-items: stretch; flex-wrap: wrap; position: relative; }

/* Label + caret behave as ONE pill: same height, no gap, shared hover/active colour */
.site-header .nav-split > .nav-link { border-radius: 6px 0 0 6px; padding-right: 4px; }
.site-header .caret {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; margin: 0; padding: 0 12px 0 6px; min-height: 100%;
  background: transparent; color: #64748B; cursor: pointer;
  border-radius: 0 6px 6px 0; transition: background 0.2s ease, color 0.2s ease;
}
.site-header .caret-icon {
  width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s ease, margin 0.2s ease;
}
.site-header .caret.show .caret-icon { transform: rotate(-135deg); margin-top: 3px; }
.site-header .caret:focus-visible { outline: 2px solid #EF4444; outline-offset: 2px; }

/* hover (not active): light pill across label + caret */
.site-header .nav-split:hover > .nav-link:not(.is-active),
.site-header .nav-split:hover > .nav-link:not(.is-active) + .caret { background: #F1F5F9; color: #0F172A; }
.site-header .nav-split:hover > .nav-link:not(.is-active) + .caret { color: #EF4444; }

/* active section: one red pill */
.site-header .nav-split > .nav-link.is-active { box-shadow: none; padding-right: 4px; }
.site-header .nav-split > .nav-link.is-active + .caret { background: #EF4444; color: #fff; }

.site-header .nav-submenu {
  /* Bootstrap dropdowns inherit the dark page theme — force white menu, black text */
  --bs-dropdown-bg: #FFFFFF;
  --bs-dropdown-color: #0F172A;
  --bs-dropdown-link-color: #0F172A;
  --bs-dropdown-link-hover-color: #EF4444;
  --bs-dropdown-link-hover-bg: #FEF2F2;
  --bs-dropdown-link-active-color: #EF4444;
  --bs-dropdown-link-active-bg: #FEF2F2;
  --bs-dropdown-min-width: 240px;
  background-color: #FFFFFF;
  color: #0F172A;
  border: 1px solid #E2E8F0; border-radius: 12px; padding: 8px;
  box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.12); margin-top: 8px !important;
}
.site-header .nav-submenu .dropdown-item {
  font-size: 14px; font-weight: 500; color: #0F172A; padding: 9px 14px; border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header .nav-submenu .dropdown-item:hover,
.site-header .nav-submenu .dropdown-item:focus { color: #EF4444; background: #FEF2F2; font-weight: 600; transform: translateX(4px); }
.site-header .nav-submenu .dropdown-item.is-current { color: #EF4444; background: #FEF2F2; font-weight: 600; }

.site-header .mobile-toggle {
  background: #F8FAFC; border: 1px solid #CBD5E1; color: #0F172A; font-size: 20px; line-height: 1;
  padding: 6px 12px; border-radius: 8px; box-shadow: none;
}
.site-header .mobile-toggle:hover { border-color: #EF4444; color: #EF4444; background: #FEF2F2; }
.site-header .mobile-toggle .toggle-close,
.site-header .mobile-toggle[aria-expanded="true"] .toggle-open { display: none; }
.site-header .mobile-toggle[aria-expanded="true"] .toggle-close { display: inline; }

/* Desktop: open dropdowns on hover like the original, keep click for keyboard/touch */
@media (min-width: 992px) {
  .site-header .nav-dropdown:hover .nav-submenu { display: block; }
  .site-header .nav-split > .nav-submenu { top: 100%; left: 0; margin-top: 0 !important; }
  .site-header .nav-split > .nav-submenu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
}

/* Mobile: collapsible panel under the bar */
@media (max-width: 991.98px) {
  .site-header .navbar-collapse { flex-basis: 100%; }
  .site-header .nav-menu {
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 16px 0 24px; max-height: calc(100vh - 60px); overflow-y: auto;
  }
  .site-header .navbar-nav .nav-link { width: 100%; padding: 12px 14px; }
  .site-header .nav-split { justify-content: space-between; }
  .site-header .nav-split .nav-link { flex: 1; }
  .site-header .nav-split > .nav-submenu { flex-basis: calc(100% - 14px); }
  .site-header .caret { padding: 0 16px; }
  .site-header .nav-split > .nav-link { padding-right: 14px; }
  .site-header .nav-submenu {
    position: static; box-shadow: none; border: 0; border-left: 2px solid #EF4444; background: #FFFFFF;
    border-radius: 0 8px 8px 0; padding: 6px 10px; margin: 4px 0 6px 14px !important;
  }
  .site-header .nav-submenu .dropdown-item { padding: 11px 14px; }
}
@media (max-width: 480px) {
  .brand-logo .logo-png-colorized { width: 150px; max-height: 40px; }
}

/* ---------- Certificate modal (Bootstrap modal, original cert styling) ---------- */
.cert-bs-dialog { max-width: 800px; }
.cert-bs-content { border: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); }
.cert-modal .cert-modal-header-info p { font-family: 'JetBrains Mono', monospace !important; }
.cert-modal .cert-modal-close-btn:hover { background: #EF4444; border-color: #EF4444; }
.modal-backdrop.show { opacity: 0.88; background: #0B0F19; }
.cert-preview-frame { cursor: zoom-in; }
body.modal-open .dezitech-chat-launcher { display: none; }

/* ---------- Contact form: Bootstrap validation feedback ---------- */
.enquiry-form .is-invalid { border-color: #EF4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }
.enquiry-form .invalid-feedback { display: block; font-size: 12.5px; margin-top: 6px; color: #DC2626; }
.enquiry-alert { font-size: 14px; border-radius: 8px; margin-bottom: 18px; }
.btn-reset-form { display: inline-block; text-decoration: none; }

/* ---------- About page FAQ (answers are in the HTML; JS toggles them) ---------- */
.buyer-faq-item:not(.open) .buyer-faq-answer { display: none; }

/* ---------- Respect reduced-motion for the JS-driven effects ---------- */
@media (prefers-reduced-motion: reduce) {
  .about-reveal, .story-item, .discipline-item, .rev, .reveal, .service-detail-card { transition: none !important; }
}