/* static/src/input.css */

@import "tailwindcss";

@font-face {
  font-family: 'Space Grotesk';
  src: url('https://fonts.gstatic.com/s/spacegrotesk/v12/SlGzJrM2JZ9bV9TqUuHjYw.woff2') format('woff2');
}

@font-face {
  font-family: 'Story Script';
  src: url('https://fonts.gstatic.com/s/storyscript/v1/4UaHrEJ283X07508q729Yw.woff2') format('woff2');
}
/* ─── EX THEME VARIABLES ────────────────────────────────────────────────────────
# Ex cor c8d96f
*/
@theme { 
  --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Story Script', ui-serif, Georgia, serif;
  --color-brand-lime: #c4f775;
  --color-ink: #1e1e2e;
  --color-ink-2: #2d2d3e;
}

/*
  ─── ACCORDION UTILITIES ─────────────────────────────────────────────────────
*/

@utility accordion-lime {
  background-color: #c4f775;
}

@utility accordion-gray {
  background-color: #f3f4f6;
}

/*
  ─── DESIGN TOKENS (UTILITIES) ───────────────────────────────────────────────
*/

@utility bg-brand-lime {
  background-color: var(--color-brand-lime);
}

@utility text-brand-lime {
  color: var(--color-brand-lime);
}

@utility bg-ink {
  background-color: var(--color-ink);
}

@utility bg-ink-2 {
  background-color: var(--color-ink-2);
}

/*
  ─── COMPONENT CLASSES (AVOID TAILWIND REPEAT) ───────────────────────────────
*/

@layer components {
  .site-body {
    @apply bg-white text-gray-900 font-sans;
  }

  .site-container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }

  .page-x {
    @apply px-6 sm:px-8 lg:px-12;
  }

  .nav-shell {
    @apply flex items-center justify-between py-6;
  }

  .nav-links {
    @apply hidden md:flex items-center gap-3;
  }

  .nav-link-pill {
    @apply px-5 py-2 rounded-full border border-gray-300 text-sm font-medium hover:bg-gray-50 transition;
  }

  .nav-link-text {
    @apply px-5 py-2 text-sm font-medium hover:underline transition;
  }

  .btn-primary {
    @apply inline-block bg-gray-900 text-white text-sm font-medium px-8 py-4 rounded-2xl hover:bg-gray-700 transition;
  }

  .section {
    @apply bg-white;
  }

  .section-y {
    @apply py-20;
  }

  .tag {
    @apply inline-block font-bold text-gray-900 rounded-lg;
  }

  .tag-xl {
    @apply text-2xl px-4 py-2;
  }

  .tag-sm {
    @apply text-sm px-3 py-1 rounded-md;
  }

  .card-round {
    @apply rounded-3xl border-2 p-8;
  }

  .sim-card {
    @apply rounded-3xl border-2 p-8 flex flex-col justify-between min-h-[220px] relative overflow-hidden;
  }

  .link-arrow {
    @apply flex items-center gap-3;
  }

  .link-arrow-icon {
    @apply w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0;
  }

  .link-arrow-text {
    @apply text-sm font-medium hover:underline;
  }

  .footer-shell {
    @apply rounded-t-3xl mx-4 px-6 sm:px-8 lg:px-12 py-14;
  }

  .footer-epad-logo {
    @apply h-20 sm:h-24 w-auto object-contain shrink-0;
  }

  .footer-nav {
    @apply flex flex-wrap items-center gap-4 md:gap-8 mb-10;
  }

  .footer-link {
    @apply text-white text-sm underline underline-offset-4 hover:opacity-70 transition;
  }

  .footer-contact-block {
    @apply max-w-2xl;
  }

  .footer-project-text {
    @apply max-w-3xl text-gray-300 text-sm leading-relaxed mb-6;
  }

  .footer-contact-list {
    @apply space-y-3;
  }

  .footer-contact-row {
    @apply text-gray-300 text-sm leading-relaxed;
  }

  /* ── Cards ── */

  .card-dark {
    @apply rounded-3xl p-10;
    background-color: var(--color-ink);
  }

  .card-lime {
    @apply rounded-3xl p-10 border-2 border-gray-900;
    background-color: var(--color-brand-lime);
  }

  .card-grid-lime {
    @apply rounded-2xl p-8 border-2 border-gray-900;
    background-color: var(--color-brand-lime);
  }

  .card-grid-light {
    @apply rounded-2xl bg-gray-100 p-8 border-2 border-gray-900;
  }

  .card-grid-dark {
    @apply rounded-2xl p-8 border-2 border-gray-900;
    background-color: var(--color-ink);
  }

  .card-note {
    @apply bg-gray-50 rounded-2xl p-6 border border-gray-200;
  }

  /* ── Resource cards ── */

  .resource-card-link {
    @apply flex flex-col gap-1 px-4 py-3 bg-white border border-gray-200 rounded-xl no-underline transition-colors;
  }

  .resource-card-link:hover {
    @apply border-brand-lime bg-brand-lime/10;
  }

  .resource-card-name {
    @apply text-sm font-semibold text-gray-900 flex items-center gap-1;
  }

  .resource-card-desc {
    @apply text-xs text-gray-500 leading-snug;
  }

  /* ── Steps ── */

  .step-bar {
    @apply flex items-center gap-2 mb-8 md:mb-10 text-sm font-medium overflow-x-auto;
  }

  .step-label {
    @apply hidden sm:inline;
  }

  .step-active {
    @apply px-3 py-1 rounded-full bg-gray-900 text-white shrink-0;
  }

  .step-inactive {
    @apply px-3 py-1 rounded-full border border-gray-300 text-gray-400 shrink-0;
  }

  .step-bar-item {
    @apply flex items-center gap-2 no-underline;
  }

  a.step-bar-item:hover .step-inactive {
    @apply border-gray-500 text-gray-600;
  }

  .step-divider {
    @apply w-8 h-px bg-gray-300;
  }

  /* ── Labels ── */

  .label-lime {
    @apply text-sm font-bold uppercase tracking-wider mb-2;
    color: var(--color-brand-lime);
  }

  /* ── Buttons ── */

  .btn-secondary {
    @apply inline-block bg-white text-gray-900 text-sm font-medium px-8 py-4 rounded-2xl border-2 border-gray-900 hover:bg-gray-50 transition;
  }

  /* ── Nav bottom (always two-column on all screen sizes) ── */

  .nav-bottom {
    @apply flex gap-3;
  }

  .nav-bottom > * {
    flex: 1;
    justify-content: center;
  }

  /* ── Mobile nav ── */

  .nav-mobile-btn {
    @apply flex flex-col gap-1.5 md:hidden cursor-pointer bg-transparent border-0 p-1;
  }

  .nav-mobile-bar {
    @apply block w-6 h-0.5 bg-gray-900 rounded-full;
  }

  .nav-drawer-overlay {
    @apply fixed inset-0 bg-black/40 z-40 opacity-0 pointer-events-none;
    transition: opacity 0.3s ease;
  }

  .nav-drawer-overlay.open {
    @apply opacity-100 pointer-events-auto;
  }

  .nav-drawer {
    @apply fixed top-0 right-0 h-full w-4/5 max-w-xs bg-white z-50 flex flex-col px-6 py-6 shadow-2xl;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .nav-drawer.open {
    transform: translateX(0);
  }

  .nav-drawer-header {
    @apply flex justify-end mb-8;
  }

  .nav-drawer-close {
    @apply p-1 cursor-pointer bg-transparent border-0 text-gray-700;
  }

  .nav-drawer-links {
    @apply flex flex-col gap-3;
  }

  .nav-drawer-link {
    @apply px-5 py-2 rounded-full border border-gray-300 text-base font-medium text-center hover:bg-gray-50 transition;
  }

  /* ── Page hero heading ── */

  .page-hero-h1 {
    @apply text-3xl font-bold leading-tight mb-4 md:text-5xl;
  }

  /* ── Hero ── */

  .hero-section {
    @apply flex flex-col items-center gap-8 px-6 sm:px-8 lg:px-12 py-12 md:flex-row md:justify-between md:py-16;
  }

  .hero-content {
    @apply w-full text-center md:text-left md:max-w-xl;
  }

  .hero-title {
    @apply text-4xl font-bold leading-tight mb-6 md:text-6xl;
  }

  .hero-desc {
    @apply text-base text-gray-600 leading-relaxed mb-10 max-w-sm mx-auto md:mx-0;
  }

  .hero-image {
    @apply flex-shrink-0 w-full max-w-xs h-56 md:max-w-none md:w-[480px] md:h-[380px];
  }

  /* ── Feature columns (dark card 3-up) ── */

  .feature-cols {
    @apply rounded-3xl p-8 md:p-10 grid grid-cols-1 gap-8 md:grid-cols-3 md:gap-0;
    background-color: var(--color-ink);
  }

  .feature-col-l {
    @apply pb-8 border-b border-gray-600 md:pb-0 md:pr-8 md:border-b-0 md:border-r;
  }

  .feature-col-m {
    @apply pb-8 border-b border-gray-600 md:pb-0 md:px-8 md:border-b-0 md:border-r;
  }

  .feature-col-title {
    @apply text-white text-xl font-bold mb-4 leading-snug;
  }

  .feature-col-body {
    @apply text-gray-400 text-sm leading-relaxed mb-6;
  }

  .feature-col-note {
    @apply text-brand-lime text-sm font-medium;
  }

  /* ── Accordion ── */

  .accordion-item {
    transition: background-color 0.35s ease;
  }

  .accordion-btn {
    @apply w-full flex items-center justify-between px-6 py-5 text-left md:px-8 md:py-6;
  }

  .accordion-header-row {
    @apply flex items-center gap-3 md:gap-4;
  }

  .accordion-num {
    @apply text-2xl font-bold text-gray-900 shrink-0 w-10 md:text-3xl md:w-12;
  }

  .accordion-title {
    @apply text-base font-semibold text-gray-900 md:text-xl;
  }

  .accordion-icon {
    @apply w-9 h-9 rounded-full border-2 border-gray-900 flex items-center justify-center text-xl font-light text-gray-900 flex-shrink-0;
  }

  .accordion-body {
    @apply px-6 pb-5 pt-0 md:px-8 md:pb-6;
  }

  .accordion-body-text {
    @apply text-gray-800 text-sm leading-relaxed mb-5 max-w-2xl;
  }

  /* ── Simulators section ── */

  .simulators-intro {
    @apply flex flex-wrap items-baseline gap-3 mb-10;
  }

  .simulators-grid {
    @apply grid grid-cols-1 gap-4 sm:grid-cols-2;
  }

  .sim-img {
    @apply w-28 h-20 object-contain;
  }

  /* ── Footer responsive ── */

  .footer-top {
    @apply flex flex-row flex-wrap items-center justify-between gap-6 mb-10;
  }

  .footer-mid {
    @apply mb-12;
  }

  .footer-bottom {
    @apply flex flex-col gap-3 md:flex-row md:items-center md:justify-between;
  }
}

@media (min-width: 768px) {
  .hero-section {
    min-height: 82vh;
  }
}