/**
 * This file is managed by the WindPress Wizard.
 * To avoid losing your changes, please use the WindPress Wizard to edit this file,
 * as manual edits may be overwritten.
 */

/**
 * Tailwind CSS v4 Custom Theme Configuration
 * Migrated from tailwind.config.js v3 format
 *
 * @package STEPJAM_Theme
 * @since 1.0.0
 */

@theme {
  /* ========================================
     FIGMA DESIGN TOKENS - COLOR SYSTEM
     ======================================== */

  --color-figma-black: #000000;
  --color-figma-white: #FFFFFF;
  --color-figma-cyan: #00F7FF;

  /* ========================================
     HERO SECTION DIMENSIONS
     ======================================== */

  /* Desktop Hero Frame: 1920px × 1080px */
  --spacing-hero-full: 67.5rem;      /* 1080px */
  --spacing-hero-fv: 41.625rem;      /* 666px */

  /* Make The Moment Logo Dimensions */
  --spacing-make-logo-w: 73.774rem;  /* 1180.38px */
  --spacing-make-logo-h: 12.479rem;  /* 199.66px */

  /* Mobile Hero Dimensions */
  --spacing-make-mobile-w: 36.5rem;  /* 584px */
  --spacing-make-mobile-h: 6.125rem; /* 98px */

  /* SP Hero Box Dimensions */
  --spacing-sp-hero-box-w: 48.009rem;  /* 768.14px */
  --spacing-sp-hero-box-h: 41.616rem;  /* 665.86px */

  /* SP Make Logo Dimensions */
  --spacing-sp-make-logo-w: 29.509rem;  /* 472.14px */
  --spacing-sp-make-logo-h: 4.991rem;   /* 79.86px */

  /* ========================================
     RESPONSIVE BREAKPOINTS
     ======================================== */

  /* Mobile-first breakpoint: max-width 767px */
  --breakpoint-mobile: 767px;

  /* ========================================
     WHSJ SECTION RESPONSIVE DIMENSIONS
     ======================================== */

  /* Section Height - Desktop & Mobile */
  --spacing-whsj-section-h: clamp(600px, 100vh, 100vh);

  /* Mobile Text Container Widths */
  --spacing-whsj-mobile-text-w: clamp(300px, 56.5%, 500px);
  --spacing-whsj-mobile-title-w: clamp(250px, 42.5%, 400px);
  --spacing-whsj-mobile-text-content-w: clamp(250px, 75%, 350px);

  /* Mobile Vertical Positioning */
  --spacing-whsj-mobile-title-top: clamp(20px, 3%, 40px);
  --spacing-whsj-mobile-text-top: clamp(160px, 30%, 240px);

  /* Mobile Height Constraints */
  --spacing-whsj-mobile-text-min-h: clamp(150px, 20%, 200px);
  --spacing-whsj-mobile-text-max-h: calc(100vh - clamp(350px, 55%, 500px));

  /* Mobile Padding */
  --spacing-whsj-mobile-padding: clamp(20px, 3%, 40px);
  --spacing-whsj-mobile-text-padding: clamp(10px, 2%, 20px);

  /* ========================================
     NAVIGATION OVERLAY DIMENSIONS
     ======================================== */

  /* Header & Logo Dimensions */
  --spacing-nav-header-h: 96.12px;
  --spacing-nav-logo-w: 173.08px;
  --spacing-nav-logo-h: 96.12px;

  /* Close Button Dimensions */
  --spacing-nav-close-w: clamp(80px, 106.67px, 150px);
  --spacing-nav-close-h: clamp(16px, 21.47px, 30px);

  /* Footer Dimensions */
  --spacing-nav-footer-h: 60px;
  --spacing-nav-footer-logo-w: clamp(800px, 1215.55px, 100%);
  --spacing-nav-footer-logo-h: clamp(30px, 37.03px, 45px);
}

/* ========================================
   EMERGENCY FALLBACK - ESSENTIAL RESPONSIVE UTILITIES
   ======================================== */

/* Display Utilities - Base */
.hidden { display: none !important; }
.block { display: block !important; }
.flex { display: flex !important; }
.inline { display: inline !important; }
.inline-block { display: inline-block !important; }

/* Responsive Display Utilities - MD (768px+) */
@media (min-width: 768px) {
  .md\:block { display: block !important; }
  .md\:hidden { display: none !important; }
  .md\:flex { display: flex !important; }
  .md\:inline { display: inline !important; }
  .md\:inline-block { display: inline-block !important; }
}

/* Responsive Display Utilities - LG (1024px+) */
@media (min-width: 1024px) {
  .lg\:block { display: block !important; }
  .lg\:hidden { display: none !important; }
  .lg\:flex { display: flex !important; }
  .lg\:inline { display: inline !important; }
  .lg\:inline-block { display: inline-block !important; }
}

/* Responsive Display Utilities - XL (1280px+) */
@media (min-width: 1280px) {
  .xl\:block { display: block !important; }
  .xl\:hidden { display: none !important; }
  .xl\:flex { display: flex !important; }
  .xl\:inline { display: inline !important; }
  .xl\:inline-block { display: inline-block !important; }
}

/* Responsive Display Utilities - MAX-MD (<768px) */
@media (max-width: 767px) {
  .max-md\:block { display: block !important; }
  .max-md\:hidden { display: none !important; }
  .max-md\:flex { display: flex !important; }
  .max-md\:inline { display: inline !important; }
  .max-md\:inline-block { display: inline-block !important; }
}

/* ========================================
   LIB-LIST SECTION - SPECIFIC RESPONSIVE FIX
   ======================================== */

/* Mobile: Hide Desktop Container, Show Mobile Container */
@media (max-width: 767px) {
  .lib-list-container { display: none !important; }
  .lib-list-container-mobile { display: block !important; }
}

/* Desktop (MD+): Show Desktop Container, Hide Mobile Container */
@media (min-width: 768px) {
  .lib-list-container { display: block !important; }
  .lib-list-container-mobile { display: none !important; }
}