/* ================================================================
   FOUR PILLARS — VISUAL ELEVATION LAYER
   Loaded after /static/css/four-pillars.css.
   This file is additive: removing the <link> tag reverts the page
   to its prior look. Nothing here removes functionality, only
   refines presentation.

   Five elevation changes, in order of visual leverage:
     1. Element color system (the system that ties chart visuals together)
     2. Display typography (the "premium feel" signal)
     3. Visual hierarchy between sections (hero vs chart vs reading vs footer)
     4. Color discipline (gold becomes scarce again so it means something)
     5. Single-side rounded-corner border replacements (your style rule)

   Implementation notes:
     - Uses CSS custom properties under :root so the system is one
       point of edit rather than scattered hex codes.
     - Targets existing class names from four-pillars.css. No JS or
       HTML changes required.
     - Where the base file already defines colors via var(...) with
       gold fallbacks, we override the var at root so the gold
       fallback never fires for non-accent uses.
   ================================================================ */


/* ════════════════════════════════════════════════════════════════
   ROOT TOKENS — the system of record
   ════════════════════════════════════════════════════════════════ */

:root {
    /* ── Element palette ──
       Each element gets two values: a saturated chart color (for
       glyphs, bars, accents on a dark background) and a soft tint
       (for backgrounds and borders). The tint is the chart color
       at ~8-12% alpha. Picked to read clearly against your
       existing indigo-dark page background.

       Color philosophy:
         Wood   = jade green     (growth, springtime, vegetation)
         Fire   = vermilion red  (warmth, summer, flame)
         Earth  = ochre/gold     (stability, late summer, soil)
         Metal  = platinum-blue  (clarity, autumn, refined metal)
         Water  = deep indigo    (depth, winter, ocean)

       Earth deliberately differs from the brand gold (#E8C547) so
       the brand accent and the Earth element don't collide. Earth
       gets a warmer, more terracotta-leaning ochre.
    */
    --el-wood:        #6FBF7F;
    --el-wood-tint:   rgba(111, 191, 127, 0.10);
    --el-wood-border: rgba(111, 191, 127, 0.28);

    --el-fire:        #D26B5C;
    --el-fire-tint:   rgba(210, 107, 92, 0.10);
    --el-fire-border: rgba(210, 107, 92, 0.30);

    --el-earth:       #CBA86A;
    --el-earth-tint:  rgba(203, 168, 106, 0.10);
    --el-earth-border:rgba(203, 168, 106, 0.30);

    --el-metal:       #B6C6D4;
    --el-metal-tint:  rgba(182, 198, 212, 0.10);
    --el-metal-border:rgba(182, 198, 212, 0.28);

    --el-water:       #6A8FC8;
    --el-water-tint:  rgba(106, 143, 200, 0.10);
    --el-water-border:rgba(106, 143, 200, 0.30);

    /* ── Brand accent — kept for hero, CTAs, and key data points only ──
       Renamed semantically: --color-accent is now reserved use, not
       a paint-by-numbers default. Same hex as before so nothing breaks. */
    --color-accent: #E8C547;
    --color-accent-soft: rgba(232, 197, 71, 0.14);

    /* ── Surface tones ──
       Three section weights. Hero/chart get the deepest treatment,
       reading sections get a lighter neutral, footer-zone gets near-flat. */
    --surface-deep:    rgba(255, 255, 255, 0.025);
    --surface-reading: rgba(255, 255, 255, 0.015);
    --surface-flat:    transparent;

    /* ── Text rhythm ──
       Three font roles, strictly enforced:
         display = English headings (warmer, serif, slightly luxurious)
         body    = inherited body sans (unchanged)
         han     = Chinese characters (Noto Serif SC, unchanged)
       The display family uses Cormorant Garamond when available,
       falling back through system serifs so no external font request
       is required for the page to render reasonably. */
    --font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino', 'Palatino Linotype', Georgia, serif;
    --font-han:     'Noto Serif SC', 'Songti SC', 'PingFang SC', serif;

    /* ── Rhythm scale for section spacing ── */
    --space-section: 3.5rem;
    --space-section-tight: 2.25rem;
}


/* Optional Google Fonts load. If you'd rather host locally or avoid
   the external request, delete this @import. The fallback chain above
   will keep things readable.
   Imports must precede other rules, but since this file is loaded
   after four-pillars.css, that order is preserved at the file level. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap');


/* ════════════════════════════════════════════════════════════════
   CHANGE 1: ELEMENT COLOR SYSTEM
   The single most important elevation. Every pillar, hidden stem,
   element bar, and chart datum needs to read as its element's color.
   ════════════════════════════════════════════════════════════════ */

/* ── Pillar cards — element-tinted backgrounds & borders ──
   The pillar cards in the orientation row should each carry the
   color of their dominant element. We can't know which element
   a pillar is from CSS alone, but the base CSS provides per-pillar
   class hooks (.fp-pillar--year, --month, --day, --hour) AND data
   attributes set by the JS render. We target the most reliable
   element-class hooks the renderer emits. */

/* Pillar orientation cards (the simple top row) */
.fp-pillar-card {
    background: var(--surface-deep);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

/* Element-themed pillar cards. If the JS already adds element classes
   like .fp-pillar-card--wood etc., these take effect. If not, the
   default treatment above still looks clean. */
.fp-pillar-card--wood,
.fp-pillar-card[data-element="Wood"]   { background: var(--el-wood-tint);  border-color: var(--el-wood-border); }
.fp-pillar-card--fire,
.fp-pillar-card[data-element="Fire"]   { background: var(--el-fire-tint);  border-color: var(--el-fire-border); }
.fp-pillar-card--earth,
.fp-pillar-card[data-element="Earth"]  { background: var(--el-earth-tint); border-color: var(--el-earth-border); }
.fp-pillar-card--metal,
.fp-pillar-card[data-element="Metal"]  { background: var(--el-metal-tint); border-color: var(--el-metal-border); }
.fp-pillar-card--water,
.fp-pillar-card[data-element="Water"]  { background: var(--el-water-tint); border-color: var(--el-water-border); }

/* The stem and branch glyphs inside pillar cards — tint them by element.
   Same pattern: target the element data attribute when the renderer
   supplies it, otherwise fall back gracefully. */
.fp-pillar-card-stem[data-element="Wood"],
.fp-pillar-card-chars [data-element="Wood"] .fp-pillar-card-stem { color: var(--el-wood); }
.fp-pillar-card-stem[data-element="Fire"]   { color: var(--el-fire); }
.fp-pillar-card-stem[data-element="Earth"]  { color: var(--el-earth); }
.fp-pillar-card-stem[data-element="Metal"]  { color: var(--el-metal); }
.fp-pillar-card-stem[data-element="Water"]  { color: var(--el-water); }

.fp-pillar-card-branch[data-element="Wood"]  { color: var(--el-wood); }
.fp-pillar-card-branch[data-element="Fire"]  { color: var(--el-fire); }
.fp-pillar-card-branch[data-element="Earth"] { color: var(--el-earth); }
.fp-pillar-card-branch[data-element="Metal"] { color: var(--el-metal); }
.fp-pillar-card-branch[data-element="Water"] { color: var(--el-water); }

/* Element balance bars — color each row's bar fill by element. */
.fp-el-row[data-element="Wood"]  .fp-el-bar-fill { background: var(--el-wood);  box-shadow: 0 0 12px rgba(111,191,127,0.25); }
.fp-el-row[data-element="Fire"]  .fp-el-bar-fill { background: var(--el-fire);  box-shadow: 0 0 12px rgba(210,107,92,0.25); }
.fp-el-row[data-element="Earth"] .fp-el-bar-fill { background: var(--el-earth); box-shadow: 0 0 12px rgba(203,168,106,0.25); }
.fp-el-row[data-element="Metal"] .fp-el-bar-fill { background: var(--el-metal); box-shadow: 0 0 12px rgba(182,198,212,0.25); }
.fp-el-row[data-element="Water"] .fp-el-bar-fill { background: var(--el-water); box-shadow: 0 0 12px rgba(106,143,200,0.25); }

/* Hidden Stem chips — small element-colored pills. The hs-stem element
   appears inside .fp-hs-pillar cards. We accent the stem character
   itself by element. */
.fp-hs-stem[data-element="Wood"]  { color: var(--el-wood); }
.fp-hs-stem[data-element="Fire"]  { color: var(--el-fire); }
.fp-hs-stem[data-element="Earth"] { color: var(--el-earth); }
.fp-hs-stem[data-element="Metal"] { color: var(--el-metal); }
.fp-hs-stem[data-element="Water"] { color: var(--el-water); }

/* Element name labels in the balance section — color the name too. */
.fp-el-row[data-element="Wood"]  .fp-el-name { color: var(--el-wood); }
.fp-el-row[data-element="Fire"]  .fp-el-name { color: var(--el-fire); }
.fp-el-row[data-element="Earth"] .fp-el-name { color: var(--el-earth); }
.fp-el-row[data-element="Metal"] .fp-el-name { color: var(--el-metal); }
.fp-el-row[data-element="Water"] .fp-el-name { color: var(--el-water); }


/* ════════════════════════════════════════════════════════════════
   CHANGE 2: DISPLAY TYPOGRAPHY
   English headings get the serif display family. The Chinese
   characters stay on Noto Serif SC. Body text stays inherited.
   The result is a clear hierarchy: serif = headings, sans = body,
   Han = glyph - three distinct typographic roles.
   ════════════════════════════════════════════════════════════════ */

.fp-hero-title,
.fp-results-title,
.fp-education-title,
.fp-luck-title,
.fp-element-balance-title,
.fp-form-title,
.fp-details-title,
.fp-adv-block-title,
.fp-edu-block h3,
.fp-edu-block h4 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.005em;
    /* The serif renders larger optically than sans at the same px size,
       so we soften the weight slightly to keep visual mass even. */
}

.fp-hero-title {
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.005em;
}

@media (max-width: 600px) {
    .fp-hero-title {
        font-size: 2rem;
    }
}

.fp-results-title {
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.fp-education-title {
    font-size: 1.8rem;
    font-weight: 600;
}

/* Hero subtitle gets refined — italicized for prose feel, slightly
   warmer color. Italic serif under a serif headline reads as
   "literary" rather than "UI label." */
.fp-hero-subtitle {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.55;
    opacity: 0.78;
    color: #d8cfc0;
    letter-spacing: 0.005em;
}

@media (max-width: 600px) {
    .fp-hero-subtitle {
        font-size: 1.05rem;
    }
}


/* ════════════════════════════════════════════════════════════════
   CHANGE 3: VISUAL HIERARCHY BETWEEN SECTIONS
   Each major zone gets its own visual treatment so the page reads
   as a sequence of acts rather than a uniform scroll.
   ════════════════════════════════════════════════════════════════ */

/* ── Hero zone: airier, more vertical breathing room ── */
.fp-hero {
    padding: 4rem 1.5rem 2rem;
    max-width: 820px;
}

.fp-breadcrumb {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.45;
    margin-bottom: 2rem;
}


/* ── Calculator section: feels like the action, slightly tightened ── */
.fp-calculator-section {
    padding-bottom: 3rem;
}


/* ── Results header: stage-like presentation with eyebrow label ──
   We add a virtual "eyebrow" using a ::before pseudo-element on the
   results title block so the section announces itself before its
   headline. */
.fp-results-header {
    position: relative;
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
}

.fp-results-header::before {
    content: 'Your Reading';
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
    opacity: 0.7;
    margin-bottom: 1rem;
}


/* ── Results main container: deepest visual treatment ──
   This is the "stage." Slightly inset, with a subtle gradient that
   sets it apart from the rest of the page. */
.fp-results {
    position: relative;
    padding-top: 1rem;
    padding-bottom: 3rem;
}

.fp-results::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(180deg, rgba(232, 197, 71, 0.025) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.fp-results > * {
    position: relative;
    z-index: 1;
}


/* ── Element balance section: reading-zone surface ──
   Lighter than the chart "stage", more like body content. */
.fp-element-balance {
    background: var(--surface-reading);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    margin: 2rem auto;
    max-width: 920px;
}


/* ── Luck pillars: visual continuation of the "stage" but bordered ── */
.fp-luck-pillars {
    background: var(--surface-deep);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    margin: 2rem auto;
    max-width: 1080px;
}


/* ── Section eyebrow labels — used as a class hook on section titles ──
   This adds the small uppercase context label CosmicTao uses above
   their section headlines. Apply by adding the class to a wrapping
   element, or it activates automatically on .fp-luck-title etc.
   below. */
.fp-luck-title::before,
.fp-element-balance-title::before {
    content: attr(data-eyebrow);
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
    opacity: 0.7;
    margin-bottom: 0.5rem;
    font-family: inherit;
    font-style: normal;
    font-weight: 500;
}


/* ── Education section: airy, scholarly ── */
.fp-education-section {
    padding: var(--space-section) 1.5rem;
}

.fp-education-eyebrow {
    color: var(--color-accent);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.8;
}


/* ── FAQ + reference grid: muted "footer-zone" treatment ──
   These come after the main reading and shouldn't compete visually.
   Lower contrast, more compact. */
.fp-reference-section,
section.fp-section[id="faq"] {
    background: var(--surface-flat);
    padding-top: var(--space-section-tight);
    padding-bottom: var(--space-section-tight);
}


/* ════════════════════════════════════════════════════════════════
   CHANGE 4: COLOR DISCIPLINE — gold becomes scarce
   The base CSS uses gold everywhere. We narrow its use to:
     - The single accent for CTAs and key data
     - Auspicious-stars and Day Master highlights
     - Hover/focus states
   Everywhere else: plain text white, or element color, or no accent.
   ════════════════════════════════════════════════════════════════ */

/* ── Pillar labels: were gold, now muted ──
   The "Year Pillar" / "Month Pillar" labels above each card don't
   need to compete with the actual data inside the card. */
.fp-pillar-label,
.fp-pillar-card-label,
.fp-hs-pillar-label,
.fp-tg-pillar-label {
    color: rgba(232, 224, 212, 0.55);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ── Pillar role descriptors ──
   "The Outer Animal" / "The True Animal" — keep slightly more visible
   than label but still subordinate to the actual chart data. */
.fp-pillar-role {
    color: rgba(232, 224, 212, 0.65);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Day Pillar gets a subtle gold ring since it's the user's Day Master. */
.fp-pillar--day,
.fp-pillar-card--day {
    border-color: rgba(232, 197, 71, 0.35) !important;
    box-shadow: 0 0 0 1px rgba(232, 197, 71, 0.12), 0 8px 24px rgba(0,0,0,0.25);
}

.fp-pillar--day .fp-pillar-label,
.fp-pillar-card--day .fp-pillar-card-label {
    color: var(--color-accent);
}


/* ── Detail panel tabs: gold reserved for active state only ──
   Inactive tabs are muted; active tab gets the gold accent. */
.fp-detail-tab {
    color: rgba(232, 224, 212, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
}

.fp-detail-tab--active {
    color: var(--color-accent);
    border-color: rgba(232, 197, 71, 0.4);
    background: rgba(232, 197, 71, 0.06);
}


/* ── Education block headings: keep gold only on the H3, body stays text-color ── */
.fp-edu-block h4 {
    color: rgba(232, 224, 212, 0.92);
}


/* ════════════════════════════════════════════════════════════════
   CHANGE 5: REPLACE SINGLE-SIDE BORDERS ON ROUNDED CONTAINERS
   Your style memory: no border-left: 3px solid on rounded boxes.
   Replace with either full border + tinted background, or a small
   leading glyph.
   ════════════════════════════════════════════════════════════════ */

/* The base CSS has several offenders (lines 223, 506 etc.). Override
   by using full borders + accent-tinted background. */

.fp-analogy-box,
.fp-element-insight,
.fp-edu-block--bordered {
    border-left: none !important;
    border: 1px solid rgba(232, 197, 71, 0.20);
    background: rgba(232, 197, 71, 0.04);
    border-radius: 12px;
    padding: 1.25rem 1.4rem;
}

/* If a small visual marker is needed, use a leading glyph not a stripe.
   This adds a small "◆" before any element with the .fp-analogy-icon
   class — already present in the markup. We just style it. */
.fp-analogy-icon {
    color: var(--color-accent);
    opacity: 0.7;
}


/* ════════════════════════════════════════════════════════════════
   SMALL ADDITIONAL POLISH
   Items that aren't on the main list but cost nothing and add
   meaningful refinement.
   ════════════════════════════════════════════════════════════════ */

/* ── CTA buttons: stronger visual weight ── */
.fp-calculate-btn {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.9rem 1.5rem;
    background: linear-gradient(180deg, var(--color-accent) 0%, #d4b53b 100%);
    color: #1a1a2e;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(232, 197, 71, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fp-calculate-btn:not([disabled]):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(232, 197, 71, 0.35);
}

.fp-calculate-btn[disabled] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(232, 224, 212, 0.4);
    box-shadow: none;
    cursor: not-allowed;
}


/* ── Sticky results nav: refine the pill buttons ── */
.fp-results-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.fp-nav-pill {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(232, 224, 212, 0.7);
    transition: all 0.18s ease;
}

.fp-nav-pill:hover {
    color: rgba(232, 224, 212, 1);
    border-color: rgba(232, 197, 71, 0.25);
}

.fp-nav-pill--active {
    color: var(--color-accent);
    border-color: rgba(232, 197, 71, 0.45);
    background: rgba(232, 197, 71, 0.06);
}


/* ── Form fields: small refinements for premium feel ── */
.fp-field label {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    font-weight: 500;
    opacity: 0.7;
    text-transform: uppercase;
}

.fp-field select {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    color: rgba(232, 224, 212, 0.95);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.fp-field select:hover {
    border-color: rgba(232, 197, 71, 0.3);
}

.fp-field select:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(232, 197, 71, 0.05);
}


/* ── Form title and subtitle: align with new typography system ── */
.fp-form-title {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-bottom: 0.35rem;
}

.fp-form-subtitle {
    color: rgba(232, 224, 212, 0.6);
    font-size: 0.95rem;
}


/* ── Section dividers: replace hard rules with soft gradient lines ── */
.fp-results > section + section,
.fp-results > div + div {
    margin-top: 2.5rem;
}


/* ── Mobile: tighten section padding so content gets more width ── */
@media (max-width: 600px) {
    .fp-element-balance,
    .fp-luck-pillars {
        padding: 1.4rem 1rem;
        border-radius: 12px;
    }

    .fp-hero {
        padding: 2.5rem 1.25rem 1.5rem;
    }

    .fp-results-header {
        padding: 1.5rem 1rem 1.25rem;
    }
}


/* ════════════════════════════════════════════════════════════════
   END OF ELEVATION LAYER
   ================================================================
   To revert: remove the <link rel="stylesheet" ...> for this file
   from the page template. The base four-pillars.css is unchanged.
   ================================================================ */