/* guides.css — shared article styling for /guides/ pages.
 *
 * Sits ON TOP of the site design system: pages load the same chrome as any
 * content page (fonts.css, pages.css, header-search.css, footer.css,
 * theme.css, theme-chrome.css, theme-pages.css) plus this file. The article
 * lives inside the site's <main class="page-content"> + .content-card, so
 * background, header, footer, cards, typography and color all come from the
 * site's tokens. This file only styles the article-specific pieces, using
 * the --leif-* design tokens so future guides inherit the same look. */

.guide-crumbs { font-size: 13px; color: var(--text-secondary, #7D7B73); margin: 0 0 14px; }
.guide-crumbs a { color: inherit; text-decoration: none; }
.guide-crumbs a:hover { text-decoration: underline; }

.guide-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: var(--leif-score-green, #2F6B4F); margin: 0 0 6px; }
.guide-meta { font-size: 13px; color: var(--text-secondary, #7D7B73); margin: 8px 0 0; }

/* Article body (inside a .content-card) */
.guide-body { max-width: 72ch; }
.guide-body > p { margin: 0 0 16px; line-height: 1.65; }
.guide-body h2 { margin: 34px 0 10px; letter-spacing: -.01em; }
.guide-body h2:first-child { margin-top: 0; }
.guide-body h3 { margin: 22px 0 4px; font-size: 18px; }
.guide-body ul, .guide-body ol { margin: 0 0 16px; padding-left: 22px; }
.guide-body li { margin: 0 0 8px; line-height: 1.6; }
.guide-body a { color: var(--leif-action-clay-dark, #0b4f2d); }

.guide-lede { font-size: 19px; line-height: 1.55; color: var(--text-primary, #26241F); }

/* Red-flag cards (greenwashing guide) */
.guide-flags { list-style: none; padding: 0; margin: 16px 0 8px; }
.guide-flags > li { background: var(--leif-canvas, #F6F4EF); border: 1px solid var(--card-border, #E8E4DC); border-left: 4px solid #C9902B; border-radius: 12px; padding: 14px 18px; margin: 0 0 12px; }
.guide-flags h3 { margin: 0 0 4px; font-size: 17px; }
.guide-flags p { margin: 0; color: var(--text-secondary, #7D7B73); font-size: 15px; line-height: 1.55; }

/* Checklist */
.guide-check { background: var(--leif-score-green-tint, #EAF0EC); border: 1px solid var(--card-border, #E8E4DC); border-radius: 12px; padding: 18px 22px; margin: 22px 0; }
.guide-check h3 { margin: 0 0 10px; }
.guide-check ul { list-style: none; padding: 0; margin: 0; }
.guide-check li { padding-left: 26px; position: relative; margin: 0 0 8px; }
.guide-check li::before { content: "\2714"; position: absolute; left: 0; color: var(--leif-score-green, #2F6B4F); font-weight: 700; }

/* Callout */
.guide-callout { background: var(--leif-score-green-tint, #EAF0EC); border: 1px solid #cfe0d5; border-radius: 12px; padding: 16px 20px; margin: 24px 0; font-size: 15px; }
.guide-callout a { font-weight: 600; }

/* Certification cards (certifications guide) */
.cert { background: var(--card-bg, #fff); border: 1px solid var(--card-border, #E8E4DC); border-radius: 12px; padding: 18px 20px; margin: 0 0 14px; }
.cert h3 { margin: 0 0 2px; font-size: 19px; }
.cert .cert-what { color: var(--leif-score-green, #2F6B4F); font-weight: 600; font-size: 14px; margin: 0 0 12px; }
.cert dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14.5px; }
.cert dt { color: var(--text-secondary, #7D7B73); font-weight: 600; white-space: nowrap; }
.cert dd { margin: 0; }
.cert dd.cert-catch, .cert dt.cert-catch { color: #8a6d1a; }

.guide-sources { font-size: 13px; color: var(--text-secondary, #7D7B73); border-top: 1px solid var(--card-border, #E8E4DC); margin-top: 12px; padding-top: 14px; }
.guide-sources a { color: var(--text-secondary, #7D7B73); }

/* Guides hub grid */
.guide-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.guide-card { background: var(--card-bg, #fff); border: 1px solid var(--card-border, #E8E4DC); border-radius: 14px; padding: 22px 24px; transition: border-color .15s; }
.guide-card:hover { border-color: var(--leif-score-green, #2F6B4F); }
.guide-card h2 { margin: 0 0 8px; font-size: 22px; }
.guide-card h2 a { text-decoration: none; color: var(--text-primary, #26241F); }
.guide-card h2 a:hover { color: var(--leif-score-green, #2F6B4F); }
.guide-card p { margin: 0 0 12px; color: var(--text-secondary, #7D7B73); line-height: 1.55; }
.guide-card .guide-more { font-weight: 700; color: var(--leif-score-green, #2F6B4F); text-decoration: none; font-size: 14px; }