/* =============================================================================
   FYSH — FAQ + glossary styling (GEO/AEO content blocks)
   CR: fysh-geo-bundle-2026-07-16

   Self-contained, additive stylesheet loaded only on pages that render an
   FAQ section (partials/faq-section.php) or the glossary page. Uses brand
   hex values directly so it does not depend on page-specific CSS variables.
   Mobile-first; no layout hacks; respects reduced-motion.
============================================================================= */

.fysh-faq {
    /* CR: fysh_home_faq 2026-07-17
       Cream band restores the alternating-section rhythm — previously the FAQ
       inherited the body's white and blended into the agent-strip CTA above,
       falsely implying shared content. Padding raised from 40/8 to 4.5rem
       top and bottom so it matches every other .section on the page. */
    background: var(--cream, #F6F5F2);
    padding: 4.5rem 0;
}
.fysh-faq__heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem;
    line-height: 1.2;
    color: #0F2340;
    margin: 0 0 6px;
}
.fysh-faq__intro,
.fysh-faq__updated {
    font-size: 0.85rem;
    color: #6B7A8D;
    margin: 0 0 20px;
}
.fysh-faq__updated {
    margin-top: -12px;
}
.fysh-faq__list {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
}
/* Card styling mirrors the homepage .feature-card ("Built for every type of
   mover") so FAQ cards read as part of the same card system. */
.fysh-faq__item {
    padding: 1.75rem;
    background: var(--white, #FFFFFF);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: var(--radius-md, 12px);
    transition: box-shadow var(--ease, .22s ease),
                transform var(--ease, .22s ease),
                border-color var(--ease, .22s ease);
}
.fysh-faq__item:hover {
    box-shadow: var(--shadow-md, 0 6px 20px rgba(15,35,64,.13));
    border-color: rgba(74,158,224,0.4);
    transform: translateY(-3px);
}

/* ── Per-card subject icon — CR: fysh_home_faq 2026-07-17 ────────────────
   Visually identical to .feature-card__icon in components.css so the two
   card systems ("Built for every type of mover" + FAQ) read as one family.
   50 × 50 rounded square, soft blue gradient tint, stroke-icon inside. */
.fysh-faq__icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(30,91,168,.10), rgba(30,91,168,.04));
    border-radius: var(--radius-sm, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    color: var(--blue, #1E5BA8);
}
.fysh-faq__icon i {
    font-size: 24px;
    line-height: 1;
}

.fysh-faq__q {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--navy, #0F2340);
    margin: 0 0 0.45rem;
    line-height: 1.3;
}
.fysh-faq__a {
    color: var(--muted, #6B7A8D);
    font-size: 0.875rem;
    line-height: 1.7;
}
.fysh-faq__a p { margin: 0 0 8px; }
.fysh-faq__a p:last-child { margin-bottom: 0; }
.fysh-faq__a a { color: #1E5BA8; }

/* Two-column on wider viewports keeps the block compact without hiding content */
@media (min-width: 860px) {
    .fysh-faq__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 20px;
    }
}

/* ── Glossary ──────────────────────────────────────────────────────────────── */
.fysh-glossary {
    max-width: 820px;
    margin: 0 auto;
    padding: 32px 20px 56px;
}
.fysh-glossary__eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1E5BA8;
    font-weight: 600;
    margin: 0 0 8px;
}
.fysh-glossary__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    line-height: 1.15;
    color: #0F2340;
    margin: 0 0 10px;
}
.fysh-glossary__sub {
    color: #6B7A8D;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 28px;
}
.fysh-glossary__term {
    border-top: 1px solid #E2E8F0;
    padding: 18px 0;
}
.fysh-glossary__term:last-child { border-bottom: 1px solid #E2E8F0; }
.fysh-glossary__dt {
    font-size: 1.08rem;
    font-weight: 600;
    color: #0F2340;
    margin: 0 0 6px;
}
.fysh-glossary__dd {
    margin: 0;
    color: #3A4657;
    font-size: 0.95rem;
    line-height: 1.65;
}
.fysh-glossary__dd a { color: #1E5BA8; }

/* =============================================================================
   Comparison page (private sale vs estate agent)
============================================================================= */
.cmp-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 20px 56px;
}
.cmp-wrap .section-eyebrow { display: block; margin-bottom: 0.6rem; }
.cmp-title {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: 2rem;
    line-height: 1.15;
    color: var(--navy, #0F2340);
    margin: 0 0 1.25rem;
}
.cmp-wrap h2 {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: 1.4rem;
    color: var(--navy, #0F2340);
    margin: 2.5rem 0 1rem;
}
.cmp-wrap p {
    color: var(--muted, #6B7A8D);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 1rem;
}
.cmp-wrap p a { color: var(--blue, #1E5BA8); }

/* Answer-first lead box (first thing AI/readers see) */
.cmp-answer {
    background: linear-gradient(135deg, rgba(30,91,168,.06), rgba(30,91,168,.02));
    border: 1px solid var(--border, #E2E8F0);
    border-left: 3px solid var(--gold, #C9A84C);
    border-radius: var(--radius-md, 12px);
    padding: 1.25rem 1.5rem;
    margin: 0 0 2rem;
    color: var(--navy, #0F2340);
    font-size: 1rem;
    line-height: 1.7;
}
.cmp-answer strong { color: var(--navy, #0F2340); }

/* Comparison table */
.cmp-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border, #E2E8F0);
    border-radius: var(--radius-md, 12px);
    margin: 0 0 0.75rem;
}
.cmp-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.cmp-table th,
.cmp-table td {
    padding: 0.9rem 1.1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border, #E2E8F0);
}
.cmp-table thead th {
    background: var(--navy, #0F2340);
    color: var(--white, #fff);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
}
.cmp-table thead th.cmp-fysh { background: var(--blue, #1E5BA8); }
.cmp-table tbody th {
    font-weight: 600;
    color: var(--navy, #0F2340);
    background: #FAFBFC;
    width: 34%;
}
.cmp-table tbody td { color: var(--muted, #6B7A8D); }
.cmp-table td.cmp-fysh {
    background: rgba(201,168,76,0.07);
    color: var(--navy, #0F2340);
    font-weight: 500;
}
.cmp-table tr:last-child th,
.cmp-table tr:last-child td { border-bottom: 0; }

.cmp-note {
    font-size: 0.8rem !important;
    color: #9BA8B4 !important;
    margin: 0 0 1.5rem !important;
}
.cmp-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border, #E2E8F0);
}