/* ============================================================
   PERSONALITY REPORT — frontend results page styles
   Magazine-cover treatment matching the QuickScan result A4.
   Italic Playfair Display headlines, Nunito Sans body, per-flavour
   colour accents.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,600;0,800;1,400&family=Playfair+Display:ital,wght@1,400;1,900&display=swap');

/* ── Per-flavour palette (single source of truth) ───────────────────────── */
.ff-report-section,
.ff-report-profile,
.ff-profile-flavour-block {
    --sweet:  #f15973;
    --sour:   #75b934;
    --salt:   #c9b400;
    --bitter: #7a4723;
    --umami:  #302050;
    --ink:    #1a1a1a;
    --muted:  #2a2a2a;
    --rule:   rgba(26, 26, 26, 0.12);
}

/* ── Base wrapper ──────────────────────────────────────────────────────── */
.ff-report-section {
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--muted);
    background: none;
    padding: 0;
    margin: 0 0 36px;
    max-width: 760px;
}

/* Per-flavour accent colour (CSS variable used by children) */
.ff-report-section.flavour-sweet  { --accent: var(--sweet);  }
.ff-report-section.flavour-sour   { --accent: var(--sour);   }
.ff-report-section.flavour-salt,
.ff-report-section.flavour-salty  { --accent: var(--salt);   }
.ff-report-section.flavour-bitter { --accent: var(--bitter); }
.ff-report-section.flavour-umami  { --accent: var(--umami);  }

/* ── Paragraphs ───────────────────────────────────────────────────────── */
.ff-report-section p {
    font-family: inherit;
    font-size: 16px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 16px;
    padding: 0;
}

/* ── Bold / italic ────────────────────────────────────────────────────── */
.ff-report-section strong { font-weight: 700; color: var(--ink); }
.ff-report-section em     { font-style: italic; color: inherit; }

/* ── Headings ─────────────────────────────────────────────────────────── */
.ff-report-section h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 0.95;
    color: var(--ink);
    margin: 0 0 18px;
}
.ff-report-section h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.05;
    color: var(--ink);
    margin: 32px 0 14px;
}
.ff-report-section h3 {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent, var(--ink));
    margin: 24px 0 10px;
}

/* ── Lists ────────────────────────────────────────────────────────────── */
.ff-report-section ul,
.ff-report-section ol { margin: 0 0 16px; padding-left: 22px; }
.ff-report-section ul { list-style: disc; }
.ff-report-section li {
    font-family: inherit;
    font-size: 16px;
    line-height: 1.55;
    color: var(--muted);
    margin-bottom: 4px;
}

/* ── Line breaks ──────────────────────────────────────────────────────── */
.ff-report-section br { line-height: 1.55; }

/* Chapter title (e.g. "So… how do you taste?") */
.ff-report-section .ff-report-title,
.ff-report-profile .ff-report-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 900 !important;
    font-size: clamp(36px, 5vw, 64px) !important;
    line-height: 0.95 !important;
    color: var(--ink) !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Intro paragraph beneath the title */
.ff-report-intro {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(17px, 1.9vw, 20px);
    line-height: 1.45;
    color: var(--muted);
    margin-bottom: 28px;
}
.ff-report-intro p { font-size: inherit; line-height: inherit; font-style: italic; }

/* Outro paragraph after the flavour blocks */
.ff-report-outro {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.5;
    color: var(--muted);
    margin-top: 28px;
    border-top: 1px solid var(--rule);
    padding-top: 22px;
}
.ff-report-outro p { font-size: inherit; line-height: inherit; }

/* =============================================================
   Profile section (chapter 5 — Your personality blend)
   ============================================================= */
.ff-report-profile {
    font-family: 'Nunito Sans', sans-serif;
    color: var(--muted);
    background: none;
    max-width: 760px;
}

.ff-profile-flavour-blocks {
    margin: 28px 0 24px;
    padding: 0;
}

/* Each ranked flavour block */
.ff-profile-flavour-block {
    background: none;
    border: none;
    border-top: 1px solid var(--rule);
    padding: 22px 0 6px;
    margin: 0;
}
.ff-profile-flavour-block:last-of-type {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 22px;
}

/* Per-flavour accent (sets --accent for children) */
.ff-profile-flavour-block.flavour-sweet  { --accent: var(--sweet);  }
.ff-profile-flavour-block.flavour-sour   { --accent: var(--sour);   }
.ff-profile-flavour-block.flavour-salt,
.ff-profile-flavour-block.flavour-salty  { --accent: var(--salt);   }
.ff-profile-flavour-block.flavour-bitter { --accent: var(--bitter); }
.ff-profile-flavour-block.flavour-umami  { --accent: var(--umami);  }

/* The header (e.g. "#1 - ☕ Bitter - 37.5%") is the first <strong>.
   Style it as the magazine-cover headline in flavour colour. */
.ff-profile-flavour-block > strong:first-child {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.05;
    color: var(--accent, var(--ink));
    margin-bottom: 12px;
    letter-spacing: 0;
    text-transform: none;
}

/* Body paragraphs inside the block */
.ff-profile-flavour-block p,
.ff-profile-flavour-block {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--muted);
}
.ff-profile-flavour-block p { margin: 0 0 12px; }

/* "Like:" and "Feeling:" labels (after nl2br each starts a new "line") —
   we can't target them directly but we can use a subtle italic style for
   anything bold inside the block other than the leading header. */
.ff-profile-flavour-block strong:not(:first-child) {
    font-weight: 700;
    color: var(--ink);
}

.ff-profile-flavour-block ul {
    list-style: disc;
    padding-left: 22px;
    margin: 0 0 12px;
}
.ff-profile-flavour-block li {
    font-family: inherit;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--muted);
    margin-bottom: 4px;
}
.ff-profile-flavour-block br { line-height: 1.55; }

/* Intro paragraph above the blocks (no leading strong → render italic) */
.ff-report-profile > br + br,
.ff-report-profile > p:first-of-type {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(17px, 1.9vw, 20px);
    line-height: 1.45;
    color: var(--muted);
    margin-bottom: 24px;
}

/* ── Error message ────────────────────────────────────────────────────── */
.ff-report-section .ff-error {
    font-family: 'Nunito Sans', sans-serif;
    color: #856404;
    background: #fff3cd;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    border: 1px solid #ffe69c;
}