/**
 * custom.css — Ocendeck
 * Only what Tailwind cannot cover:
 * - Font face (Plus Jakarta Sans via Google Fonts fallback)
 * - Header transition state
 * - Carousel fade
 * - Mega menu polish
 * - Scrollbar, focus ring, misc
 */

/* ─────────────────────────────────────────────
   1. Plus Jakarta Sans
   ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

*,
*::before,
*::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  color: #111827;
}


/* ─────────────────────────────────────────────
   2. Header states
   ───────────────────────────────────────────── */
#site-header {
  transition: background-color 0.35s ease,
              box-shadow       0.35s ease,
              backdrop-filter  0.35s ease;
}

#site-header.header-scrolled {
  background-color: #ffffff;
  box-shadow: 0 2px 20px rgba(14, 27, 89, 0.08);
}

#site-header.header-top {
  background-color: transparent;
  box-shadow: none;
}

/* CTA button in header: always blue – no colour override from scroll */
#site-header .nav-cta-btn {
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
}


/* ─────────────────────────────────────────────
   3. Mega menu polish
   ───────────────────────────────────────────── */
.mega-menu {
  transform-origin: top center;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

/* subtle separator between mega-menu columns */
.mega-menu .grid > div + div {
  border-left: 1px solid #f3f4f6;
  padding-left: 2rem;
}

/* hover accent bar on mega-menu item */
.mm-item {
  transition: background-color 0.15s ease;
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
}
.mm-item:hover {
  background-color: #f9fafb;
}


/* ─────────────────────────────────────────────
   4. Hero carousel — fade transition
   ───────────────────────────────────────────── */
.carousel-slide {
  transition: opacity 0.75s ease-in-out;
  will-change: opacity;
}

/* Active dot scale */
.carousel-dot {
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.carousel-dot-active {
  transform: scale(1.35);
}


/* ─────────────────────────────────────────────
   5. Section animations (scroll reveal)
   ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ─────────────────────────────────────────────
   6. Form inputs — clean focus ring
   ───────────────────────────────────────────── */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18);
  border-color: #1d4ed8;
}

/* select chevron */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}


/* ─────────────────────────────────────────────
   7. Custom scrollbar (WebKit)
   ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #1d4ed8; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #0e1b59; }


/* ─────────────────────────────────────────────
   8. Focus-visible for keyboard users
   ───────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) {
  outline: none;
}


/* ─────────────────────────────────────────────
   9. Platform card hover accent line
   ───────────────────────────────────────────── */
article .absolute.top-0 {
  transition: opacity 0.25s ease;
}
article:not(:hover) .absolute.top-0 {
  opacity: 0.6;
}
article:hover .absolute.top-0 {
  opacity: 1;
}


/* ─────────────────────────────────────────────
   10. Mobile menu slide-down animation
   ───────────────────────────────────────────── */
#mobile-menu {
  animation: slideDown 0.25s ease forwards;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ─────────────────────────────────────────────
   11. Why section icon hover glow
   ───────────────────────────────────────────── */
.group:hover > div[class*="w-16"] {
  box-shadow: 0 0 0 6px rgba(29, 78, 216, 0.12);
}


/* ─────────────────────────────────────────────
   12. Print — hide non-essential
   ───────────────────────────────────────────── */
@media print {
  #site-header,
  #hero,
  #mobile-menu,
  footer { display: none; }
}


/* ─────────────────────────────────────────────
   13. Ocendeck logo color switching
   Symbol (.ock-sym)  → #307ffc on white bg, white on dark/transparent
   Wordmark (.ock-word) → #0e1b59 on white bg, white on dark/transparent
   ───────────────────────────────────────────── */

/* Default: transparent header → white logo */
.ock-sym  { fill: #ffffff; transition: fill 0.3s ease; }
.ock-word { fill: #ffffff; transition: fill 0.3s ease; }

/* Scrolled: white header → original brand colors */
#site-header.header-scrolled .ock-sym  { fill: #307ffc; }
#site-header.header-scrolled .ock-word { fill: #0e1b59; }

/* Light-bg pages start scrolled; apply brand colors immediately */
[data-header-light="true"] #site-header .ock-sym,
[data-header-light="true"] #site-header.header-scrolled .ock-sym { fill: #307ffc; }
[data-header-light="true"] #site-header .ock-word,
[data-header-light="true"] #site-header.header-scrolled .ock-word { fill: #0e1b59; }

/* ─────────────────────────────────────────────
   13. Ocendeck logo SVG — adaptive color
   .ock-sym  = symbol ellipses  → white on transparent bg, #307ffc on white bg
   .ock-word = wordmark letters → white on transparent bg, #0e1b59 on white bg
   Transition syncs with header scroll transition (0.35s).
   ───────────────────────────────────────────── */

/* Default: transparent header → white logo */
#logo-svg .ock-sym { fill: #ffffff; transition: fill 0.35s ease; }
#logo-svg .ock-word { fill: #ffffff; transition: fill 0.35s ease; }

/* Scrolled: white header → brand colors */
#site-header.header-scrolled #logo-svg .ock-sym  { fill: #307ffc; }
#site-header.header-scrolled #logo-svg .ock-word { fill: #0e1b59; }

/* Light-bg pages (data-header-light) always show brand colors from load */
[data-header-light="true"] #logo-svg .ock-sym  { fill: #307ffc; }
[data-header-light="true"] #logo-svg .ock-word { fill: #0e1b59; }