/* Homewise Picks — the MFA demo's look (task 18750).

   1. A small base reset in the spirit of Tailwind's preflight: main.css is
      Blank's placeholder until `npm run build`, so the seeded site must not
      depend on it. Once a developer builds Tailwind, utilities in src/**
      work alongside this file.
   2. The theme tokens the mfa-content components read
      (docs/spec/component-library.md §5). Loaded after the component CSS, so
      they win by source order.
   3. The site chrome: ribbon, header, hero, footer and the /about page. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&display=swap');

/* 1. Base */
*, *::before, *::after { box-sizing: border-box; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; }
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
a { color: inherit; }

/* 2. Tokens */
:root {
  --hw-ink: #14211f;
  --hw-muted: #5b6b68;
  --hw-line: #dfe7e4;
  --hw-paper: #fbfaf7;
  --hw-brand: #0f766e;
  --hw-brand-dark: #115e59;
  --hw-sun: #f59e0b;

  --ad-accent: var(--hw-brand);
  --ad-accent-contrast: #ffffff;
  --ad-cta-bg: #ff3a0e;
  --ad-cta-fg: #ffffff;
  --ad-info-accent: #2f6b4f;
  --ad-radius: 12px;
  --ad-font-heading: "Playfair Display", Georgia, serif;
  --ad-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ad-slot-height: 250px;
}

/* 3. Chrome */
.hw { min-height: 100vh; display: flex; flex-direction: column; background: var(--hw-paper); color: var(--hw-ink); font-family: var(--ad-font-body); font-size: 17px; }
.hw-wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.hw-ribbon { padding: 8px 20px; background: var(--hw-ink); color: #e6efed; font-size: .82rem; text-align: center; }
.hw-ribbon a { color: #fcd34d; font-weight: 600; }

.hw-header { background: #fff; border-bottom: 1px solid var(--hw-line); }
.hw-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.hw-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ad-font-heading); font-size: 1.35rem; font-weight: 700; text-decoration: none; }
.hw-logo__img { display: block; height: 40px; width: auto; max-width: 220px; object-fit: contain; }
.hw-logo__mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--hw-brand); color: #fff; font-family: var(--ad-font-body); font-size: 1.05rem; }
.hw-nav { display: flex; gap: 22px; font-size: .95rem; }
.hw-nav a { color: var(--hw-muted); text-decoration: none; font-weight: 600; }
.hw-nav a:hover { color: var(--hw-brand); }

.hw-main { flex: 1; padding: 40px 0 64px; }

.hw-hero { max-width: 760px; margin: 0 auto 8px; text-align: center; }
.hw-hero__kicker { color: var(--hw-brand); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hw-hero__title { margin-top: 10px; font-family: var(--ad-font-heading); font-size: clamp(2rem, 4.5vw, 2.9rem); line-height: 1.12; }
.hw-hero__lead { margin-top: 14px; color: var(--hw-muted); font-size: 1.1rem; }

.hw-footer { background: #fff; border-top: 1px solid var(--hw-line); color: var(--hw-muted); font-size: .9rem; }
.hw-footer__inner { padding-top: 28px; padding-bottom: 32px; display: grid; gap: 8px; }
.hw-footer__brand { color: var(--hw-ink); font-family: var(--ad-font-heading); font-size: 1.15rem; font-weight: 700; }

/* The MFA itself sits straight on the paper background; mfa-content draws
   the picks card, badges and score. */
.mm-mfa__label { border-color: var(--hw-line); color: var(--hw-muted); }
.mm-mfa__pick-title { color: var(--hw-ink); }
.mm-mfa__disclosure { font-style: italic; }
.mm-mfa-card { border-color: var(--hw-line); border-radius: 14px; }
.mm-mfa-card__title { color: var(--hw-ink); }
.mm-mfa-more { border-top-color: var(--hw-line); }
.mm-mfa-more__heading { color: var(--hw-ink); font-size: 1.4rem; font-weight: 700; }

/* /about */
.hw-prose { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--hw-line); border-radius: 16px; padding: clamp(20px, 4vw, 40px); }
.hw-prose h1 { font-family: var(--ad-font-heading); font-size: 2.2rem; line-height: 1.15; margin-bottom: 14px; }
.hw-prose h2 { font-family: var(--ad-font-heading); font-size: 1.35rem; margin: 28px 0 8px; }
.hw-prose p, .hw-prose li { color: #34423f; }
.hw-prose p { margin: 0 0 12px; }
.hw-prose ol, .hw-prose ul { margin: 0 0 12px; padding-left: 22px; }
.hw-prose li { margin-bottom: 6px; }
.hw-prose code { background: #f1f5f4; border-radius: 4px; padding: 1px 5px; font-size: .9em; }
.hw-prose a { color: var(--hw-brand); font-weight: 600; }

@media (max-width: 560px) {
  .hw { font-size: 16px; }
  .hw-nav { gap: 14px; font-size: .88rem; }
  .hw-logo__img { height: 32px; }
}