/* ==========================================================================
   CSMVA — Global base styles
   Fonts, resets, reusable helpers, and shared animations.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
    --header-offset: 96px; /* space for any sticky chrome when jumping to anchors */
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    color: #1f2937;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.font-display {
    font-family: 'Poppins', system-ui, sans-serif;
}

/* Anchored sections clear the sticky navbar */
[id]:not(body) {
    scroll-margin-top: var(--header-offset);
}

/* --------------------------------------------------------------------------
   Reusable buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: 9999px;
    padding: 0.75rem 1.75rem;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
    background-color: #2ea24d;
    color: #fff;
    box-shadow: 0 12px 24px -10px rgba(46, 162, 77, 0.7);
}
.btn-primary:hover { background-color: #1c6b34; }

.btn-accent {
    background-color: #f2b705;
    color: #1c2b1a;
    box-shadow: 0 12px 24px -10px rgba(242, 183, 5, 0.7);
}
.btn-accent:hover { background-color: #cf9b00; }

.btn-outline {
    border: 2px solid #2ea24d;
    color: #1c6b34;
    background: transparent;
}
.btn-outline:hover { background-color: #2ea24d; color: #fff; }

/* --------------------------------------------------------------------------
   Section helpers
   -------------------------------------------------------------------------- */
.section-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2ea24d;
}

.prose-csmva p {
    margin-bottom: 1.1rem;
    line-height: 1.85;
    color: #374151;
}

/* --------------------------------------------------------------------------
   Scroll-reveal animation (used by main.js IntersectionObserver)
   -------------------------------------------------------------------------- */
/* Default (no-JS / JS-failed): fully visible — never hide content behind JS. */
.reveal {
    opacity: 1;
    transform: none;
}
/* Only hide + animate once JS has flagged the document. */
.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
    will-change: opacity, transform;
}
.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .btn:hover { transform: none; }
}