/**
 * CONTEXT-AWARE HEADER STYLES
 * 
 * Adjusts header appearance based on app context (CONNECT vs MEN)
 * Applied via data-app-context attribute on body
 */

/* ========================================
   LOGO MODULE VARIATIONS
   ======================================== */

.logo-module,
.mobile-logo-connect {
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* CONNECT Context - Default */
.logo-module-connect,
body[data-app-context="connect"] .logo-module {
  color: var(--color-gold);
  font-weight: 600;
}

/* MEN Context - More Cinematic */
.logo-module-men,
body[data-app-context="men"] .logo-module {
  color: var(--color-gold);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ========================================
   OPTIONAL: SUBTLE CONTEXT TONE SHIFTS
   ======================================== */

/* MEN: Slightly deeper blacks, stronger gold presence */
body[data-app-context="men"] {
  --context-intensity: 1.1;
}

body[data-app-context="men"] .mobile-header {
  /* Slightly more opaque for MEN (more contained feel) */
  background: rgba(12, 12, 12, 0.98);
}

body[data-app-context="men"] .logo-module-men {
  /* Stronger gold glow in MEN context */
  text-shadow: 0 0 20px var(--color-gold-glow);
}

/* CONNECT: Lighter, more open feel */
body[data-app-context="connect"] .mobile-header {
  background: rgba(12, 12, 12, 0.95);
}

/* ========================================
   DESKTOP SIDEBAR CONTEXT AWARENESS
   ======================================== */

body[data-app-context="men"] .sidebar {
  /* MEN sidebar: slightly warmer tone */
  border-right-color: rgba(226, 182, 68, 0.1);
}

body[data-app-context="connect"] .sidebar {
  /* CONNECT sidebar: neutral */
  border-right-color: var(--color-border);
}

/* ========================================
   CONTEXT INDICATOR (Optional Debug)
   ======================================== */

.context-indicator {
  position: fixed;
  bottom: 80px;
  right: 16px;
  padding: 8px 12px;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

body[data-debug="true"] .context-indicator {
  opacity: 1;
}

.context-indicator::before {
  content: 'Context: ';
  color: var(--color-text-tertiary);
}

body[data-app-context="men"] .context-indicator::after {
  content: 'MEN';
  color: var(--color-gold);
  font-weight: 700;
}

body[data-app-context="connect"] .context-indicator::after {
  content: 'CONNECT';
  color: var(--color-gold);
  font-weight: 600;
}

/* ========================================
   SMOOTH CONTEXT TRANSITIONS
   ======================================== */

.mobile-logo,
.logo,
.mobile-header,
.sidebar {
  transition: all 0.3s ease;
}

/* Prevent flash of wrong context on load */
.mobile-logo:not([data-context]),
.logo:not([data-context]) {
  opacity: 0;
}

.mobile-logo[data-context],
.logo[data-context] {
  opacity: 1;
  transition: opacity 0.3s ease 0.1s;
}