/* content/tools/home/home.css
 *
 * Home page styling. Drives the hero intro, the four tool cards, the
 * encyclopedia panel, and a couple of supporting sections. Theme-aware
 * via the template's existing tokens (--background-alt, --card-bg etc.)
 * so dark mode flips correctly.
 */

/* Local tokens for icon tinting + soft surfaces. The template doesn't
 * ship a --primary-soft, so we declare one here with light + dark
 * variants. */
:root {
    --home-icon-bg:    rgba(37, 99, 235, 0.10);
    --home-icon-fg:    #2563eb;
    --home-cta-soft:   #dbeafe;
}
[data-theme="dark"] {
    --home-icon-bg:    rgba(96, 165, 250, 0.18);
    --home-icon-fg:    #93c5fd;
    --home-cta-soft:   rgba(96, 165, 250, 0.18);
}

/* ════════════════════════════════════════════════════════════════════════
 * HERO — h1 + subhead + CTA row. Sharp hook for visitors who arrive
 * skeptical and need the "free / no signup / what's the catch" answer
 * immediately.
 * ════════════════════════════════════════════════════════════════════════ */
.home-hero {
    max-width: 820px;
    margin: 0 auto var(--s-8, 32px);
    text-align: left;
}
.home-hero h1 {
    margin: 0 0 var(--s-3, 12px);
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--text-color);
}
@media (min-width: 720px) {
    .home-hero h1 { font-size: 36px; }
}
.home-hero-sub {
    font-size: 17px;
    line-height: 1.55;
    color: var(--text-light);
    margin: 0 0 var(--s-5, 20px);
    max-width: 720px;
}
.home-hero-ctas {
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 8px);
}
@media (min-width: 480px) {
    .home-hero-ctas { flex-direction: row; gap: var(--s-3, 12px); flex-wrap: wrap; }
}

/* Primary call-to-action button. ≥ 48 px tall, primary-coloured fill,
 * clear hover / focus state. Used in the hero and the closing CTA row. */
.home-cta-primary {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--s-3, 12px) var(--s-5, 20px);
    background: var(--primary-color);
    color: var(--card-bg);
    border: 1px solid var(--primary-color);
    border-radius: var(--r-md, 10px);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    min-height: 48px;
    box-shadow: var(--shadow-sm);
    transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.home-cta-primary:hover,
.home-cta-primary:focus-visible {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    outline: none;
}
.home-cta-primary--secondary {
    background: var(--card-bg);
    color: var(--primary-color);
}
.home-cta-primary svg {
    width: 16px; height: 16px;
}

/* ════════════════════════════════════════════════════════════════════════
 * SECTION HEADERS
 * ════════════════════════════════════════════════════════════════════════ */
.home-section {
    max-width: 1080px;
    margin: 0 auto var(--s-10, 40px);
}
.home-section-h {
    margin: 0 0 var(--s-2, 8px);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.2;
    letter-spacing: -0.01em;
    border: 0;
    padding: 0;
}
.home-section-lede {
    margin: 0 0 var(--s-5, 20px);
    color: var(--text-light);
    line-height: 1.55;
    font-size: 15px;
    max-width: 760px;
}

/* ════════════════════════════════════════════════════════════════════════
 * TOOL CARD GRID — 1 / 2 / 4 columns at the standard breakpoints
 * ════════════════════════════════════════════════════════════════════════ */
.home-tool-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-3, 12px);
}
@media (min-width: 480px) { .home-tool-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .home-tool-grid { grid-template-columns: repeat(4, 1fr); } }

.home-tool-card {
    display: flex;
    flex-direction: column;
    padding: var(--s-4, 16px);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md, 10px);
    color: inherit;
    text-decoration: none;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    height: 100%;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
}
.home-tool-card:hover,
.home-tool-card:focus-visible {
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    outline: none;
}
.home-tool-card-head {
    display: flex;
    align-items: center;
    gap: var(--s-3, 12px);
    margin-bottom: var(--s-3, 12px);
}
.home-tool-card-icon {
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--home-icon-bg);
    color: var(--home-icon-fg);
    flex: 0 0 auto;
}
.home-tool-card-icon svg { width: 22px; height: 22px; }
.home-tool-card h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-color);
    border: 0;
    padding: 0;
}
.home-tool-card p {
    margin: 0 0 var(--s-3, 12px);
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.5;
    flex: 1 1 auto;
}
.home-tool-card-cta {
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.home-tool-card-cta svg { width: 14px; height: 14px; }

/* Feature card variants — Food Insight gets the bigger card with a
 * verdict-output mockup; My Food Diary sits next to it on desktop and
 * stacks below on mobile. The two smaller cards (Recipes, Shopping List)
 * use the original .home-tool-card. */
.home-tool-grid--feature {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-3, 12px);
    margin-bottom: var(--s-3, 12px);
}
@media (min-width: 900px) {
    .home-tool-grid--feature { grid-template-columns: 2fr 1fr; }
}
.home-tool-grid--small {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-3, 12px);
}
@media (min-width: 480px) {
    .home-tool-grid--small { grid-template-columns: 1fr 1fr; }
}
.home-tool-card--feature {
    padding: var(--s-5, 20px);
    border-width: 2px;
    border-color: var(--primary-color);
}
.home-tool-card--feature h3 { font-size: 19px; }
.home-tool-card--feature .home-tool-card-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
}
.home-tool-card--feature .home-tool-card-icon svg { width: 24px; height: 24px; }

/* Verdict mockup — a static representation of what the Food Insight
 * scanner returns. Uses theme tokens so it flips correctly in dark mode.
 * Mostly decorative; reinforces the value prop without an image asset. */
.home-verdict-mockup {
    margin-top: var(--s-3, 12px);
    padding: var(--s-3, 12px);
    background: var(--background-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md, 10px);
}
.home-verdict-mockup-product {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 2px;
}
.home-verdict-mockup-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: var(--s-2, 8px);
}
.home-verdict-mockup-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 12px;
    background: var(--home-icon-fg);
    color: var(--card-bg);
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: var(--s-3, 12px);
}
.home-verdict-mockup-pill .score {
    font-size: 12px;
    opacity: 0.95;
    font-variant-numeric: tabular-nums;
}
.home-verdict-mockup-pill .score::before {
    content: '·';
    margin-right: 4px;
    opacity: 0.6;
}
.home-verdict-mockup-reasons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.home-verdict-mockup-reasons li {
    font-size: 12px;
    color: var(--text-color);
    line-height: 1.4;
    padding: 4px 8px;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}
.home-verdict-mockup-reasons li::before {
    content: '\2713';                    /* ✓ */
    margin-right: 6px;
    color: var(--home-icon-fg);
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════════
 * ENCYCLOPEDIA — improved grid presentation with one-line blurbs per
 * category. Replaces the bare pill list.
 * ════════════════════════════════════════════════════════════════════════ */
.home-encyclopedia-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-2, 8px);
    margin: var(--s-3, 12px) 0 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 600px) { .home-encyclopedia-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .home-encyclopedia-grid { grid-template-columns: 1fr 1fr 1fr; } }
.home-encyclopedia-grid li {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md, 10px);
    padding: var(--s-3, 12px);
    transition: border-color 120ms ease, transform 120ms ease;
}
.home-encyclopedia-grid li:hover { border-color: var(--primary-color); }
.home-encyclopedia-grid a {
    display: block;
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
    margin-bottom: 4px;
    font-size: 14px;
}
.home-encyclopedia-grid a:hover,
.home-encyclopedia-grid a:focus-visible { color: var(--primary-color); outline: none; }
.home-cat-blurb {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.45;
}

/* ════════════════════════════════════════════════════════════════════════
 * FAQ — native <details>/<summary> for free, no JS.
 * ════════════════════════════════════════════════════════════════════════ */
.home-faq {
    max-width: 760px;
    margin: 0 auto var(--s-8, 32px);
}
.home-faq-list {
    border-top: 1px solid var(--border-color);
}
.home-faq details {
    border-bottom: 1px solid var(--border-color);
}
.home-faq summary {
    list-style: none;
    cursor: pointer;
    padding: var(--s-3, 12px) 0;
    font-weight: 600;
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3, 12px);
}
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary::after {
    content: '+';
    flex: 0 0 auto;
    font-size: 22px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1;
    transition: transform 120ms ease;
}
.home-faq details[open] summary::after {
    content: '\2212';                    /* − */
}
.home-faq summary:hover,
.home-faq summary:focus-visible {
    color: var(--primary-color);
    outline: none;
}
.home-faq details > p {
    margin: 0 0 var(--s-3, 12px);
    color: var(--text-light);
    line-height: 1.6;
    font-size: 15px;
}

/* ════════════════════════════════════════════════════════════════════════
 * CLOSING CTA — repeating the four primary actions. One row on desktop,
 * stacked on mobile. Background tint to separate visually.
 * ════════════════════════════════════════════════════════════════════════ */
.home-final-cta {
    max-width: 1080px;
    margin: var(--s-8, 32px) auto 0;
    padding: var(--s-6, 24px) var(--s-4, 16px);
    background: var(--background-alt);
    border-radius: var(--r-md, 10px);
    text-align: center;
}
.home-final-cta h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 var(--s-4, 16px);
    color: var(--text-color);
    line-height: 1.2;
    border: 0;
    padding: 0;
}
.home-cta-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-2, 8px);
    margin: 0 auto var(--s-4, 16px);
    max-width: 720px;
}
@media (min-width: 600px) {
    .home-cta-row { grid-template-columns: repeat(4, 1fr); }
}
.home-final-cta-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════
 * ENCYCLOPEDIA PANEL — uses --background-alt (theme-aware) instead of the
 * hardcoded grey that broke in dark mode.
 * ════════════════════════════════════════════════════════════════════════ */
.home-encyclopedia {
    padding: var(--s-6, 24px);
    background: var(--background-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md, 10px);
}
.home-encyclopedia .home-section-h { margin-bottom: var(--s-2, 8px); }
.home-encyclopedia-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--s-3, 12px) 0 0;
    padding: 0;
    list-style: none;
}
.home-encyclopedia-categories li a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.home-encyclopedia-categories li a:hover,
.home-encyclopedia-categories li a:focus-visible {
    background: var(--home-cta-soft);
    border-color: var(--primary-color);
    color: var(--primary-color);
    outline: none;
}

/* ════════════════════════════════════════════════════════════════════════
 * PROSE BLOCKS — extra educational content sections
 * ════════════════════════════════════════════════════════════════════════ */
.home-prose {
    max-width: 760px;
    margin: 0 auto var(--s-8, 32px);
    color: var(--text-color);
    line-height: 1.65;
    font-size: 16px;
}
.home-prose h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 var(--s-3, 12px);
    color: var(--text-color);
    border: 0;
    padding: 0;
    line-height: 1.25;
}
.home-prose p {
    margin: 0 0 var(--s-3, 12px);
}
.home-prose p:last-child { margin-bottom: 0; }
.home-prose ul {
    margin: 0 0 var(--s-3, 12px);
    padding-left: var(--s-5, 20px);
    color: var(--text-color);
}
.home-prose ul li { margin-bottom: 6px; }

/* ════════════════════════════════════════════════════════════════════════
 * PRIVACY FOOTER
 * ════════════════════════════════════════════════════════════════════════ */
.home-privacy {
    max-width: 760px;
    margin: var(--s-6, 24px) auto 0;
    padding: var(--s-3, 12px) var(--s-4, 16px);
    background: var(--background-alt);
    border-radius: var(--r-md, 10px);
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
}
.home-privacy code {
    background: var(--code-bg);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.95em;
}