/*
Theme Name:        Dream Chaser Multi v22
Theme URI:         https://dreamchaser.app
Author:            Hypera AI
Author URI:        https://dreamchaser.app
Description:       Multilingual Dream Chaser theme with EN/TR/ES/DE language switcher. v22: Meet Susan character-driven upgrade + real editorial imagery for readings/blog.
Version:           1.4.0
Requires at least: 6.0
Requires PHP:      8.0
License:           Proprietary
License URI:       https://dreamchaser.app
Text Domain:       dreamchaser
Tags:              custom, blog, landing-page
*/

/*
 * CHANGELOG (v22 — May 2026)
 * --------------------------
 * - MEET SUSAN upgrade: the old "Conversation" section is reframed as
 *   "Meet Susan." Susan introduces herself, then a real cycling example
 *   conversation (Family / Love / Career / Self) plays out, anchored by
 *   classical-astrology references (Liz Greene, Steven Forrest, Demetra
 *   George). The right side is no longer a chat screenshot — it's a
 *   Susan portrait, framed in a square with peach glow. Susan becomes
 *   a CHARACTER, not a feature.
 * - REAL EDITORIAL IMAGERY: all 4 readings slider photos (workspace,
 *   love, dreams, palmistry) replaced with mood/aspirational paintings
 *   — astrology desk, love compatibility, dream interpretations, palm
 *   reading. Readings section now reads like a Vogue spread, not a
 *   feature catalog. (App screenshots stay concentrated in Showcase.)
 * - REAL BLOG IMAGES: 3 journal cards' CSS gradient + emoji glyph
 *   placeholders replaced with brand-perfect painterly illustrations
 *   (scorpio+moon / 3 tarot cards / feather in clouds). 16:10 aspect.
 * - PRESS BAR: kept (reversed earlier removal decision).
 * - FAQ: all 6 questions kept (reversed earlier reduction).
 * - HERO: untouched (per explicit instruction).
 *
 * CHANGELOG (v21 — May 2026)
 * --------------------------
 * - Showcase: real working 4-screen crossfade slider (was fake).
 * - How It Works: 120px illustrations + constellation connector.
 *
 * CHANGELOG (v20 — May 2026)
 * --------------------------
 * - Mobile hamburger menu fix.
 * - Hi-res screenshot upgrade.
 *
 * CHANGELOG (v19 — May 2026)
 * --------------------------
 * - Real screenshots, SVG ratings, FAQ icons, step illustrations,
 *   press bar, blog cards (gradient placeholders).
 */
Requires at least: 6.0
Requires PHP:      8.0
License:           Proprietary
License URI:       https://dreamchaser.app
Text Domain:       dreamchaser
Tags:              custom, blog, landing-page
*/

/*
 * CHANGELOG (v21 — May 2026)
 * --------------------------
 * - "A COSMOS IN YOUR PALM" SHOWCASE: slider now actually works.
 *   Previously the section had a static 2×2 grid image with caption
 *   dots that cycled — but the image never changed. Fake interaction.
 *   v21: replaced with 4 individual screenshots stacked, each
 *   crossfading in sync with the captions and dots. The image really
 *   reflects what the caption is describing. Phone bigger, ambient
 *   peach/rose glow behind it for atmosphere.
 * - "THREE STEPS TO THE COSMOS" REDESIGN: illustrations bumped from
 *   56×56 to 120×120 with drop-shadow halo. Dotted constellation
 *   connector line links the 3 steps horizontally (desktop only).
 *   Reduced gap between headline and steps from 80 → 64 px. The
 *   subtle gradient top line above each step removed — was visual
 *   noise. Section now feels intentional, not floating.
 *
 * CHANGELOG (v20 — May 2026)
 * --------------------------
 * - MOBILE MENU FIX: hamburger toggle (3 lines → X) replacing the
 *   previously broken display:none on all mobile nav links.
 * - HI-RES SCREENSHOTS: all 6 in-app screenshot assets replaced with
 *   source-quality exports from design tools.
 *
 * CHANGELOG (v19 — May 2026)
 * --------------------------
 * - Conversation section: static HTML chat mockup → real screenshot.
 * - Hero & testimonial ratings: text ★ → 5 SVG stars.
 * - FAQ topic icons per question (chat/phone/clock/lock/refresh/sparkle).
 * - How It Works step illustrations (originally 56×56).
 * - Press / social proof bar after marquee.
 * - Real App Store screenshots in readings slider + showcase.
 */

/*
 * NOTE
 * ----
 * The homepage is a fully self-contained custom template (front-page.php)
 * with all its CSS inline. This file provides ONLY blog/article styling
 * that matches the brand palette. If you don't run a blog yet, this file
 * can stay empty — front-page.php works on its own.
 */

:root {
  --ink:       #13101a;
  --ink-2:     #1c1626;
  --plum:      #3d2347;
  --burgundy:  #6b2845;
  --cream:     #f4e9d4;
  --champagne: #d4b896;
  --rose:      #d4938d;
  --peach:     #e8b8a5;
  --mist:      rgba(244, 233, 212, 0.62);
  --line:      rgba(244, 233, 212, 0.12);
}

/* ────────────────────────────────────────────
   Global blog styles (single posts, archives)
   ──────────────────────────────────────────── */
body {
  background: var(--ink);
  color: var(--cream);
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Site header (used on blog/inner pages, not homepage) */
.site-header {
  border-bottom: 1px solid var(--line);
  padding: 18px 32px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(19, 16, 26, 0.85);
  backdrop-filter: blur(14px);
}
.site-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--cream);
}
.site-brand img {
  width: 38px; height: 38px;
  border-radius: 9px;
}
.site-brand span {
  font-family: "Cormorant Garamond", serif;
  letter-spacing: 0.32em;
  font-size: 17px;
}

/* Article container */
.article-wrap {
  max-width: 740px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}
.article-meta {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 24px;
  font-weight: 500;
}
.article-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0 0 32px;
  color: var(--cream);
}
.article-title em { font-style: italic; color: var(--rose); }

.article-content {
  font-size: 18px;
  line-height: 1.75;
  color: var(--cream);
}
.article-content p { margin: 0 0 24px; opacity: 0.92; }
.article-content h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  margin: 56px 0 20px;
  color: var(--cream);
}
.article-content h2 em { font-style: italic; color: var(--rose); }
.article-content h3 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 24px;
  margin: 40px 0 16px;
  color: var(--cream);
}
.article-content a { color: var(--rose); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .3s; }
.article-content a:hover { color: var(--peach); }
.article-content strong { color: var(--cream); font-weight: 600; }
.article-content em { color: var(--peach); font-style: italic; }
.article-content blockquote {
  border-left: 2px solid var(--rose);
  padding: 4px 0 4px 24px;
  margin: 32px 0;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 22px;
  color: var(--cream);
}
.article-content ul, .article-content ol { margin: 0 0 24px 24px; }
.article-content li { margin-bottom: 8px; }
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 32px 0;
}
.article-content code {
  background: var(--ink-2);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  border: 1px solid var(--line);
}

/* Featured image */
.article-thumb {
  margin: 0 0 48px;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.article-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Archive / blog index */
.archive-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}
.archive-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.05;
  margin: 0 0 60px;
  color: var(--cream);
}
.archive-title em { font-style: italic; color: var(--rose); }

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 40px;
}
.post-card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.post-card:hover { transform: translateY(-6px); }
.post-card:hover h3 { color: var(--rose); }
.post-card .post-thumb {
  aspect-ratio: 4/3;
  border-radius: 16px;
  border: 1px solid var(--line);
  margin-bottom: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--plum), var(--burgundy));
}
.post-card .post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card .post-meta {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 10px;
  font-weight: 500;
}
.post-card h3 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--cream);
  transition: color 0.3s;
}
.post-card p {
  color: var(--mist);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

/* Footer (used on inner pages) */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 32px;
  text-align: center;
  color: var(--mist);
  font-size: 13px;
}
.site-footer a { color: var(--rose); text-decoration: none; }

/* WordPress-specific classes */
.alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.wp-block-image figcaption {
  text-align: center;
  font-size: 13px;
  color: var(--mist);
  margin-top: 8px;
  font-style: italic;
}
.screen-reader-text { position: absolute; left: -9999px; }