/* CI Agile & TeamWorks Static Sites Styles */

/* Base resets and utilities */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Ensure full height */
body {
  min-height: 100vh;
}

/* Style isolation - prevent CSS bleed between sites */
.site-main {
  /* Main site namespace */
}

.site-teamworks {
  /* TeamWorks site namespace */
}

/* Custom animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}

/* Custom gradients */
.gradient-purple {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-pink {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.gradient-orange {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.gradient-green {
  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

.gradient-blue {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

/* Mobile menu hidden by default */
#mobile-menu {
  display: none;
}

#mobile-menu.active {
  display: block;
}

/* ------------------------------------------------------------
   Navbar dropdown parent "active pill" state
   - Applies only to dropdown parents (Programs/Resources/Company)
   - Trigger state is driven by aria-expanded="true" toggled in main.js
   ------------------------------------------------------------ */

/* Base: use outline so layout never shifts */
[data-dropdown-trigger] {
  outline: 2px solid transparent;
  outline-offset: 0;
  border-radius: 9999px;
}

/* Open state (Main/TeamWorks light UI) */
[data-dropdown-trigger][aria-expanded="true"] {
  outline-color: currentColor;
  background: rgba(255, 255, 255, 0.95);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Chevron flip for open state */
[data-dropdown-trigger] [data-dropdown-icon] {
  transition: transform 150ms ease;
}
[data-dropdown-trigger][aria-expanded="true"] [data-dropdown-icon] {
  transform: rotate(180deg);
}

/* Form validation styles */
/* Loading state */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Success/Error message styles */
.message {
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.message.success {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #34d399;
}

.message.error {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #f87171;
}

/* Client logo strip infinite-scroll animation */
@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Jess-only: infinite logo marquee (used by SocialProofSection) */
.site-jess .jess-logo-marquee {
  width: max-content;
  will-change: transform;
  animation: scroll 20s linear infinite;
}

.site-jess .jess-logo-marquee:hover,
.site-jess .jess-logo-marquee:focus-within {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .site-jess .jess-logo-marquee {
    animation: none;
    transform: translateX(0);
  }
}

/* ── Jess (JESS program) theme variables ─────────────────────────────── */
/* Scoped to `.site-jess` so it won't affect Main / TeamWorks.            */
.site-jess {
  /* Defaults taken from jess7/src/styles/theme.css (:root) */
  --font-size: 16px;
  --background: #ffffff;
  --foreground: oklch(0.145 0 0);
  --card: #ffffff;
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: #030213;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.95 0.0058 264.53);
  --secondary-foreground: #030213;
  --muted: #ececf0;
  --muted-foreground: #717182;
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --input: transparent;
  --input-background: #f3f3f5;
  --switch-background: #cbced4;
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: #030213;
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  /* Ensure body matches token colors even without Tailwind base layers */
  background: var(--background);
  color: var(--foreground);
}

.site-jess.dark {
  /* Dark theme values taken from jess7/src/styles/theme.css (.dark) */
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);

  background: var(--background);
  color: var(--foreground);
}

/* Dark-friendly scrollbar for Jess pages only */
.site-jess.dark ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
}

.site-jess.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
}

.site-jess.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Print styles */
@media print {
  nav, footer, .no-print {
    display: none;
  }
}

/* ── Static-safe reveal + stagger (Jess + others) ────────────────────── */
[data-reveal],
[data-reveal-group] [data-reveal-item] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

[data-reveal-group].is-visible [data-reveal-item] {
  opacity: 1;
  transform: none;
}

/* Fallback: if a reveal group has no [data-reveal-item], stagger direct children (Jess only) */
.site-jess [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}
.site-jess [data-reveal-group].is-visible > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-group] [data-reveal-item] {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* ── Jess accordion helpers (static export friendly) ─────────────────── */
/* Remove default disclosure marker */
[data-jess-accordion] > summary::-webkit-details-marker { display: none; }
[data-jess-accordion] > summary::marker { content: ""; }

/* Rotate chevron when open */
[data-jess-accordion][open] .jess-accordion-icon {
  transform: rotate(180deg);
}

.jess-accordion-icon {
  transition: transform 200ms ease;
}


/* ── Jess micro-animations (static-safe, CSS only) ───────────────────── */
/* Keep scoped to Jess so Main/TeamWorks are untouched. */
.site-jess .jess-float {
  animation: jess-float 2.4s ease-in-out infinite;
}
.site-jess .jess-float-slow {
  animation: jess-float 3.2s ease-in-out infinite;
}
.site-jess .jess-spin-slow {
  animation: jess-spin 10s linear infinite;
}
@keyframes jess-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes jess-spin {
  to { transform: rotate(360deg); }
}

/* JESS Leadership hero image – Reedsy-style fixed-height crop with focal-point control */
/* The container has a fixed height; the <img> fills it via object-fit:cover.          */
/* object-position controls which part of the photo stays visible (the focal point).   */

/* Container: fixed height, overflow hidden so the img is cropped */
.site-jess .jess-hero-img-wrap {
  height: 420px;          /* mobile: shorter crop */
  overflow: hidden;
  position: relative;
}

/* Image: fill the container, crop to focal point */
.site-jess .jess-hero-bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;  /* mobile – keep Jeff's face/upper body visible */
}

/* Tablet */
@media (min-width: 640px) {
  .site-jess .jess-hero-img-wrap {
    height: 480px;
  }
}

/* Desktop – taller panel, shift focal point */
@media (min-width: 1024px) {
  .site-jess .jess-hero-img-wrap {
    height: 520px;
  }
  .site-jess .jess-hero-bg-img {
    object-position: center 15%;  /* desktop – a bit more headroom */
  }
}