/*
 * Styling specific to the demo/example front page shown before a real
 * homepage is configured (see inc/demo-front-page.php). The hero/feature
 * grid/FAQ/CTA sections themselves are rendered using real aos-blocks
 * markup and styled entirely by that plugin's own compiled stylesheets
 * (enqueued alongside this one) — this file only covers the bits that
 * are specific to this demo instance: the admin-only setup notice, and
 * page-level spacing around sections that don't carry their own outer
 * padding/max-width (feature-grid and FAQ are normally composed inside
 * an AOS Section block for that; this demo skips Section to stay simple).
 *
 * Uses the same design tokens (--color-*, --font-family-*, --spacing-*)
 * declared in theme.css, so it always matches the active site's palette
 * — including after a client customizes those tokens for their brand.
 */

.aos-demo-notice {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-background));
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-muted);
}
.aos-demo-notice a { color: var(--color-primary); font-weight: 600; }

.aos-demo-section {
    max-width: var(--max-wide-width);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}