/**
 * PhonoLogic Split-Screen Layout System
 * =====================================
 * 
 * Shared styles for split-screen pages (login, onboarding, etc.)
 * REQUIRES: variables.css (must be imported first)
 * 
 * USAGE:
 * 1. Import order: variables.css → components.css → split-layout.css → page-specific.css
 * 2. Add body class: document.body.classList.add('page-login') or 'page-onboarding'
 * 3. Use .split-wrapper, .split-left, .split-right structure
 * 
 * Z-INDEX SCALE (document for future devs):
 * - 1-10: Page content layers
 * - 50: Split layout wrapper (covers main content when active)
 * - 100: Modals
 * - 1000: Global header (defined in global-header.css)
 * - 9999: Loading overlays
 * 
 * BROWSER SUPPORT:
 * - All modern browsers (Chrome 88+, Firefox 78+, Safari 14+, Edge 88+)
 * - No :has() selector used (only 87% support)
 * - Uses body classes for page detection instead
 * 
 * @version 1.0.0
 * @see styles.css for brand color definitions
 */

/* ==========================================================================
   CSS Custom Properties - Split Layout Theme
   Extends :root from styles.css
   ========================================================================== */

/* Split-layout specific variables - extend from variables.css */
:root {
  /* Panel backgrounds - use brand colors from variables.css */
  --split-left-bg: var(--color-bg-cream, #fff7f2);
  --split-left-border: var(--color-border-cream, #ffd9c9);
  --split-right-bg-login: linear-gradient(135deg, var(--color-brand, #dc9435) 0%, var(--color-primary, #ff8a3d) 100%);
  --split-right-bg-onboarding: var(--color-bg, #faf8f6);
  --split-right-bg-results: var(--color-bg, #faf8f6);
  --split-right-bg-assessment: var(--color-bg, #faf8f6);
  --split-right-bg-generator: var(--color-bg, #faf8f6);
  
  /* Panel sizing - 40/60 split for better balance */
  --split-left-width: var(--split-left-width, 40%);
  --split-left-width-login: 40%;
  --split-left-padding: var(--space-24, 48px) var(--space-20, 40px);
}

/* ==========================================================================
   Page Detection via Body Classes
   
   JS adds these classes to enable/disable layouts:
   - .page-login: Login/signup pages
   - .page-onboarding: Onboarding flow
   - .page-app: Main authenticated app
   ========================================================================== */

/* Login page: Header spans full width, transparent */
body.page-login #globalHeader {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px 24px;
}

/* Hide logo on login - left panel already has it */
body.page-login #globalHeader .gh-logo {
  display: none;
}

/* Hide nav links on login */
body.page-login #globalHeader nav {
  display: none;
}

/* Hide user menu/profile on login page */
body.page-login #globalHeader .user-menu,
body.page-login #globalHeader .gh-profile-switcher,
body.page-login #globalHeader .gh-nav {
  display: none;
}

/* Position Sign In button to the right */
body.page-login #globalHeader .gh-container {
  justify-content: flex-end;
}

/* Hide Sign In button on login page - already on the page */
body.page-login #globalHeader .gh-right {
  display: none;
}

/* Hide global header on onboarding page */
body.page-onboarding #globalHeader {
  display: none !important;
}

/* Global footer shows on all pages including login */

/* reCAPTCHA badge - smaller and visible above split layout */
.grecaptcha-badge {
  z-index: 9999 !important;
  transform: scale(0.8);
  transform-origin: right bottom;
}

/* ==========================================================================
   Base Split Layout Structure
   ========================================================================== */

.split-wrapper {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport for mobile */
}

/* Override #passwordGate from styles.css (ID has higher specificity than class)
   styles.css sets: flex-direction, align-items, justify-content, background, padding
   We must override ALL of these or they bleed through */
#passwordGate.split-wrapper {
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  background: transparent;
  padding: 0;
}

/* Login page: Edge-to-edge layout */
body.page-login {
  background: #faf8f6;  /* Light cream background */
  min-height: 100vh;
}

/* Container wraps split-wrapper + footer */
body.page-login .login-card-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.page-login .split-wrapper {
  flex: 1;
  position: relative;
  z-index: var(--z-split-wrapper);
}

/* Footer inside the card container */
body.page-login .login-footer {
  background: #fff7f2;
  border-top: 1px solid #ffd9c9;
  padding: 24px 32px;
}

.login-footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.login-footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.login-footer-tagline {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

.login-footer-links {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.login-footer-links a {
  color: #4b5563;
  text-decoration: none;
}

.login-footer-links a:hover {
  color: #ff8a3d;
}

.login-footer-links span {
  color: #d1d5db;
}

.login-footer-copyright {
  margin: 0;
  font-size: 12px;
  color: #9ca3af;
}

/* ==========================================================================
   Left Panel - Value Proposition / Instructions
   ========================================================================== */

.split-left {
  width: var(--split-left-width);
  flex-shrink: 0;
  background: var(--split-left-bg);
  border-right: 1px solid var(--split-left-border);
  padding: var(--split-left-padding);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* Changed from center - prevents content being cut off */
  padding-top: 60px;  /* Add top padding instead */
  overflow-y: auto;
}

/* Login page has wider left panel */
body.page-login .split-left {
  width: var(--split-left-width-login);
}

/* Onboarding page: sticky left panel */
body.page-onboarding .split-left {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
}

/* ==========================================================================
   Left Panel Content Elements
   ========================================================================== */

.split-left .logo {
  margin-bottom: 24px;
}

.split-left .logo img {
  height: 48px;
  width: auto;
}

.split-left .headline {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.split-left .subheadline {
  font-size: 17px;
  color: #6b7280;
  margin: 0 0 32px 0;
  line-height: 1.6;
}

/* Section title (e.g., "WHY ASSESS?") */
.split-left .section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--badge-default, #dc9435);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 16px 0;
}

/* ==========================================================================
   Feature List (used in both login and onboarding)
   ========================================================================== */

.split-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}

.split-feature {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(220, 148, 53, 0.15);
}

.split-feature:last-child {
  border-bottom: none;
}

.split-feature-icon {
  width: 36px;
  height: 36px;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--badge-default, #dc9435);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background 0.3s ease, color 0.3s ease;
}

/* Progress states: completed steps fill orange */
.split-feature.completed .split-feature-icon {
  background: #ff8a3d;
  color: white;
}

.split-feature.active .split-feature-icon {
  background: #fff7f2;
  color: #ff8a3d;
  box-shadow: 0 0 0 2px #ff8a3d;
}

.split-feature-icon svg {
  width: 18px;
  height: 18px;
}

.split-feature-content h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.split-feature-content p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

/* ==========================================================================
   Social Proof / Testimonial
   ========================================================================== */

.split-testimonial {
  background: white;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-top: auto; /* Push to bottom of flex container */
}

.split-testimonial blockquote {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
  font-style: italic;
}

.split-testimonial cite {
  font-size: 13px;
  color: #6b7280;
  font-style: normal;
}

/* ==========================================================================
   Right Panel - Main Content Area
   ========================================================================== */

.split-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  position: relative;
  overflow-y: auto;
}

/* Login page: purple gradient background */
body.page-login .split-right {
  background: var(--split-right-bg-login);
}

/* Onboarding page: cream background */
body.page-onboarding .split-right {
  background: var(--split-right-bg-onboarding);
  overflow: hidden;
}

/* Results page: cream background */
body.page-results .split-right {
  background: var(--split-right-bg-results);
}

/* Assessment page: cream background */
body.page-assessment .split-right {
  background: var(--split-right-bg-assessment);
}

/* Generator page: cream background */
body.page-generator .split-right {
  background: var(--split-right-bg-generator);
}

/* ==========================================================================
   Right Panel Content Container
   ========================================================================== */

.split-content {
  width: 100%;
  max-width: 560px;  /* Increased from 480px for better content sizing */
}

/* Login page: slightly narrower for forms */
body.page-login .split-content {
  max-width: 480px;  /* Increased from 420px */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ==========================================================================
   Card Styles (for forms, info boxes)
   ========================================================================== */

.split-card {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.split-card--small {
  padding: 24px 28px;
  text-align: center;
}

.split-card--form {
  padding: 32px;
}

.split-card__title {
  margin: 0 0 8px 0;
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  text-align: center;
}

.split-card__subtitle {
  margin: 0 0 24px 0;
  font-size: 14px;
  color: #6b7280;
  text-align: center;
}

/* ==========================================================================
   Version Footer (positioned at bottom of right panel)
   ========================================================================== */

.split-version {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
}

/* Login: white text on orange gradient */
body.page-login .split-version {
  color: rgba(255, 255, 255, 0.8);
}

/* Onboarding: gray text on cream */
body.page-onboarding .split-version {
  color: #9ca3af;
}

/* ==========================================================================
   Responsive: Hide Left Panel on Mobile/Tablet
   ========================================================================== */

@media (max-width: 900px) {
  .split-left {
    display: none;
  }
  
  .split-right {
    padding: 24px;
  }
  
  .split-content {
    max-width: 100%;
  }
  
  /* Login page: Edge-to-edge on all sizes */
}

@media (max-width: 480px) {
  .split-right {
    padding: 16px;
  }
  
  .split-card {
    padding: 24px 20px;
  }
  
}

/* ==========================================================================
   Reduced Motion Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .split-wrapper,
  .split-left,
  .split-right,
  .split-card {
    transition: none;
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.split-left:focus-within,
.split-right:focus-within {
  outline: none; /* Panels don't need focus outline */
}

/* Ensure focus is visible on interactive elements */
.split-card a:focus-visible,
.split-card button:focus-visible,
.split-card input:focus-visible {
  outline: 3px solid var(--badge-default, #dc9435);
  outline-offset: 2px;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .split-wrapper {
    position: static;
    display: block;
  }
  
  .split-left {
    display: none;
  }
  
  .split-right {
    background: white !important;
    padding: 0;
  }
}