/**
 * Component Styles
 *
 * One stylesheet covering the shared components scaffolded in
 * template-parts/ (per theme-architecture/COMPONENT_LIBRARY_STRUCTURE.md).
 * Ported from prototype/styles.css. Per CSS_ARCHITECTURE.md this may be
 * split further (e.g. into homepage.css, calculator.css, hsn-sac.css)
 * once those template-specific files are built.
 *
 * FOUNDATION UI PASS: header/nav/footer/mobile-drawer rules that
 * previously lived in this file have been REMOVED — they now live in
 * the dedicated header.css, navigation.css, and footer.css files
 * (enqueued before this one, per inc/assets.php), which use the real
 * BEM-style class names the new template-parts actually render
 * (e.g. .site-logo, .mobile-drawer__nav, .footer-col--brand) rather
 * than this file's older flat names (.logo, .drawer-nav, etc.). Kept
 * here only: buttons, cards, founder/reviewer boxes, email capture,
 * and the ad-slot placeholder — none of which this foundation-UI pass
 * touched.
 */

/* Buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem;
	padding: 12px 24px; border-radius: var(--radius-sm); border: none;
	transition: background var(--motion-fast), opacity var(--motion-fast);
}
.btn-primary { background: var(--color-accent); color: var(--color-navy); }
.btn-primary:hover { background: #c4933a; }
.btn-secondary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.btn-secondary:hover { background: rgba(15,76,58,0.06); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-full { width: 100%; }

/* Cards */
.card { background: #fff; border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-4); transition: box-shadow var(--motion-fast); }
.card:hover { box-shadow: var(--shadow-card-hover); }
.card-tab-green { border-left: 3px solid var(--color-primary); }
.card-tab-sage { border-left: 3px solid var(--color-secondary); }
.card-tab-gold { border-left: 3px solid var(--color-accent); }

/* Founder / Reviewer boxes */
.founder-strip { background: #fff; border-bottom: var(--border-hairline); padding: var(--space-5) 0; }
.founder-inner { display: flex; gap: var(--space-4); align-items: flex-start; }
.founder-avatar, .reviewer-avatar {
	flex-shrink: 0; border-radius: 50%; background: var(--color-primary); color: #fff;
	font-family: var(--font-display); font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.founder-avatar { width: 48px; height: 48px; font-size: 0.9375rem; }
.reviewer-avatar { width: 36px; height: 36px; font-size: 0.8125rem; }
.founder-name { font-weight: 700; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.founder-badge { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; background: rgba(62,142,107,0.12); color: var(--color-secondary); padding: 2px 8px; border-radius: var(--radius-sm); }
.reviewer-block { display: flex; gap: var(--space-3); align-items: center; background: #fff; border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.reviewer-name { font-weight: 600; font-size: 0.9375rem; margin-bottom: 2px; }
.reviewer-meta { font-size: 0.8125rem; color: var(--color-text-muted); margin-bottom: 0; }

/* Email capture */
.email-capture { background: #fff; border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-5); }
.email-form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 480px; margin: 0 auto; }
@media (min-width: 640px) { .email-form { flex-direction: row; } }
.email-form input { flex: 1; padding: 14px 16px; border-radius: var(--radius-sm); border: var(--border-hairline); font-size: 1rem; }
.form-note { font-size: 0.8125rem; color: var(--color-text-muted); text-align: center; margin-top: var(--space-2); }

/* Disclaimer Block — moved here from homepage.css in the Calculator
   Platform Foundation pass, since single-hz_calculator.php (via
   inc/calculator-engine.php's empty mount point) now needs it too, and
   that template never loads homepage.css. This is a sitewide-reusable
   component, not a homepage-exclusive one. */
.disclaimer-block {
	display: flex; gap: var(--space-3); align-items: flex-start;
	background: rgba(15, 76, 58, 0.04); border-left: 3px solid var(--color-secondary);
	border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-top: var(--space-4);
	max-width: 600px;
}
.disclaimer-icon { width: 20px; height: 20px; stroke: var(--color-secondary); flex-shrink: 0; margin-top: 2px; }
.disclaimer-block p { font-size: 0.875rem; color: var(--color-text); margin-bottom: 0; }

/* Ad slot placeholder (per ADSENSE_INTEGRATION_MAP.md — component not yet built, token reserved) */
.ad-slot { min-height: 120px; border: 1px dashed rgba(15,76,58,0.25); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 0.8125rem; margin: var(--space-5) 0; }

/* Footer rules moved to assets/css/footer.css in the foundation UI pass. */