/* ============================================================
   jolly-studio.css Ã¢â‚¬â€ drop-in mobile-first theme for JollyAI
   Include this AFTER all other stylesheets in header.php:
     <link rel="stylesheet" href="/css/jolly-studio.css" />
   This file does NOT change markup. It retargets existing
   IDs/classes from index.php + header.php into the Studio
   visual system. Safe to remove to revert.
   ============================================================ */


:root {

  /* Branded dark (default) */
  --js-bg: #0a0a0b;
  --js-bg-1: #111113;
  --js-bg-2: #18181c;
  --js-bg-3: #232328;
  --js-line: rgba(255,255,255,0.08);
  --js-line-2: rgba(255,255,255,0.14);
  --js-ink: #f5f5f5;
  --js-ink-2: #c8c8cd;
  --js-ink-3: #8b8b94;
  --js-acid: oklch(0.9 0.22 130);
  --js-acid-ink: #0a0a0b;
  --js-magenta: oklch(0.7 0.28 350);
  --js-radius: 18px;
  --js-radius-sm: 12px;
  --js-shadow-2: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px rgba(0,0,0,0.6);
  --js-shadow-acid: 0 12px 40px -8px oklch(0.9 0.22 130 / 0.5);
}

/* Light mode Ã¢â‚¬â€ opt-in via <html data-jolly-theme="light"> */
html[data-jolly-theme="light"] {
  --js-bg: #f5f4ef;
  --js-bg-1: #ffffff;
  --js-bg-2: #efeee8;
  --js-bg-3: #e3e2da;
  --js-line: rgba(10,10,11,0.08);
  --js-line-2: rgba(10,10,11,0.14);
  --js-ink: #0a0a0b;
  --js-ink-2: #2a2a2e;
  --js-ink-3: #5a5a62;
  --js-acid: oklch(0.78 0.2 130);
}

/* ============== GLOBAL RESET ============== */


/* ============== HEADER / NAV ============== */
.logo-text {
  font-family: var(--js-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--js-ink) !important;
}
.logo-img { border-radius: 8px; }

.nav-link {
  font-family: var(--js-font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
}
.nav-link:hover { color: var(--js-ink) !important; }
.nav-link::after { background: var(--js-acid) !important; }


/* Eyebrow / mono labels */
.form-label, label.form-label {
  font-family: var(--js-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--js-ink-3) !important;
  font-weight: 600 !important;
}

/* ============== FORM CONTROLS ============== */
.form-control,
input.form-input,
textarea,
select.form-control {
  background: var(--js-bg-1) !important;
  border: 1px solid var(--js-line) !important;
  border-radius: var(--js-radius) !important;
  color: var(--js-ink) !important;
  font-family: var(--js-font-body) !important;
  font-size: 15px !important;
  padding: 14px 16px !important;
  outline: none !important;
  transition: border-color .2s ease;
}
.form-control:focus,
input.form-input:focus,
textarea:focus,
select.form-control:focus {
  border-color: var(--js-ink-3) !important;
  box-shadow: none !important;
}

/* Prompt textarea Ã¢â‚¬â€ make it the hero */
#prompt, textarea#prompt {
  font-family: var(--js-font-body) !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  min-height: 120px !important;
}

/* ============== ASPECT RATIO Ã¢â‚¬â€ visual segmented buttons ============== */
/* Replace the native <select> look with a clean pill row */
#aspectRatio {
  background: var(--js-bg-1) !important;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--js-ink-3) 50%),
    linear-gradient(135deg, var(--js-ink-3) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50% !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
  padding-right: 36px !important;
}

/* PRO option styling */
#aspectRatio option[data-pro="true"],
#steps option[data-pro="true"] {
  color: var(--js-acid) !important;
}

/* ============== CARDS / SECTIONS ============== */
.form-group {
  background: var(--js-bg-1);
  border: 1px solid var(--js-line);
  border-radius: var(--js-radius);
  padding: 14px;
  margin-bottom: 12px !important;
}
.form-group .form-control,
.form-group input.form-input,
.form-group textarea {
  background: transparent !important;
  border: none !important;
  padding: 8px 0 !important;
  border-radius: 0 !important;
}
.form-group .form-control:focus { border-color: transparent !important; }

/* ============== UPLOAD ZONE ============== */
.upload-zone, #image-upload-zone, #video-upload-zone {
  background: var(--js-bg-1) !important;
  border: 1.5px dashed var(--js-line-2) !important;
  border-radius: var(--js-radius) !important;
  color: var(--js-ink-2) !important;
  transition: border-color .2s ease, background .2s ease;
}
.upload-zone:hover, #image-upload-zone:hover {
  border-color: var(--js-acid) !important;
  background: var(--js-bg-2) !important;
}
.upload-icon { color: var(--js-ink-3) !important; }
.upload-icon i { color: var(--js-ink-3) !important; }

/* ============== ANNOUNCEMENT BANNER ============== */
.announcement-banner {
  background: var(--js-ink) !important;
  color: var(--js-bg) !important;
  box-shadow: none !important;
}
.announcement-text { font-family: var(--js-font-mono) !important; font-size: 12px !important; letter-spacing: 0.04em !important; text-transform: uppercase; }
.announcement-close { background: rgba(0,0,0,0.15) !important; color: var(--js-bg) !important; }

/* ============== ENHANCE PROMPT BUTTON ============== */
.enhance-prompt-btn {
  background: var(--js-bg-2) !important;
  border: 1px solid var(--js-line) !important;
  color: var(--js-ink) !important;
  border-radius: 999px !important;
  font-family: var(--js-font-body) !important;
  font-weight: 600 !important;
}
.enhance-prompt-btn:hover {
  background: var(--js-bg-3) !important;
  color: var(--js-acid) !important;
  border-color: var(--js-acid) !important;
}

/* ============== AUTH MODAL ============== */
.auth-tab {
  font-family: var(--js-font-body) !important;
  font-weight: 600 !important;
  color: var(--js-ink-3) !important;
}
.auth-tab.active { color: var(--js-ink) !important; border-bottom-color: var(--js-acid) !important; }
.auth-submit-btn {
  background: var(--js-acid) !important;
  color: var(--js-acid-ink) !important;
  border-radius: 999px !important;
  font-family: var(--js-font-display) !important;
  font-weight: 700 !important;
}

/* ============== MOBILE-FIRST RESPONSIVE GRID ============== */
@media (max-width: 768px) {
  body { padding-bottom: 80px; }
  .container, .main-container { padding: 12px !important; max-width: 100% !important; }
  .form-group { padding: 12px !important; margin-bottom: 8px !important; }
  h1, .hero-title { font-size: 32px !important; line-height: 0.95 !important; }
  .nav-link { padding: 10px 12px !important; }
}

/* ============== FIELD HELP DETAILS ============== */
.field-help summary {
  font-family: var(--js-font-mono) !important;
  font-size: 10px !important;
  color: var(--js-ink-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.field-help-text {
  background: var(--js-bg-2) !important;
  color: var(--js-ink-2) !important;
  border-radius: var(--js-radius-sm) !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
}