/* ==========================================================================
   Base — Variables, Reset, Typography, Utility
   ========================================================================== */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
    /* Brand colors — VSI green palette with navy secondary */
    --color-primary:       #003a25;
    --color-primary-dark:  #00261a;
    --color-secondary:     #003658;   /* navy blue, used in dividers and footer */
    --color-accent:        #003a25;   /* matches primary; button CTA color */
    --color-accent-hover:  #00261a;
    --color-text-heading:  #333333;
    --color-text-body:     #666666;
    --color-bg:            #ffffff;
    --color-bg-alt:        #f7f7f7;   /* subtle off-white for alternating sections */
    --color-border:        #dddddd;
    --color-white:         #ffffff;
    --color-black:         #000000;

    /* Flash message semantic colors — bg/border/text triplets */
    --color-success:       #28a745;
    --color-success-bg:    #d4edda;
    --color-success-border:#c3e6cb;
    --color-error:         #dc3545;
    --color-error-bg:      #f8d7da;
    --color-error-border:  #f5c6cb;
    --color-info:          #17a2b8;
    --color-info-bg:       #d1ecf1;
    --color-info-border:   #bee5eb;

    /* Typography — single font family, keeps bundle small */
    --font-heading:  'Roboto', Helvetica, Arial, Lucida, sans-serif;
    --font-body:     'Roboto', Helvetica, Arial, Lucida, sans-serif;
    --font-button:   'Roboto', Helvetica, Arial, Lucida, sans-serif;

    /* Spacing scale — rem-based for consistent rhythm */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  2rem;
    --space-xl:  3rem;
    --space-2xl: 5rem;

    /* Layout constraints */
    --container-max: 1200px;
    --header-height: 130px;  /* topbar + divider + main nav; updated in responsive.css */

    /* Shared transition durations */
    --transition-fast: 0.2s ease;
    --transition-med:  0.3s ease;
}


/* --- Reset — Normalize box model and strip browser defaults --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-text-body);
    background-color: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }  /* prevent images from overflowing containers */
a { color: #2ea3f2; text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: #2ea3f2; text-decoration: none; }
ul, ol { list-style: none; }  /* lists are styled per-component instead */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-text-heading); line-height: 1.2; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
iframe { border: 0; }


/* --- Utility --- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-lg); }


/* --- Buttons --- */
/* Base button: bold uppercase with letter-spacing to match vsinsights.com style */
.btn {
    display: inline-block;
    font-family: var(--font-button);
    font-weight: 900;
    font-size: 0.9375rem;
    line-height: inherit;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0.875rem 2rem;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}
/* Primary CTA — accent color; hover + glow are derived from the theme accent
   so the whole button tracks the Accent Colour set in Admin → Theme Settings. */
.btn--primary {
    background-color: var(--color-accent);
    color: var(--color-white);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--color-accent) 35%, transparent);
}
.btn--primary:hover {
    background-color: color-mix(in srgb, var(--color-accent), #000 12%);
    color: var(--color-white);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-accent) 45%, transparent);
}
/* Full-width modifier for forms */
.btn--full { display: block; width: 100%; }
/* Secondary — darker green, used in less prominent placements */
.btn--secondary {
    background-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 4px 15px rgba(0, 58, 37, 0.3);
}
.btn--secondary:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
}
/* Small button for compact contexts (tables, inline actions) */
.btn--sm {
    font-size: 0.75rem;
    padding: 3px 10px;
    letter-spacing: 0.5px;
}


/* --- Flash Messages — fixed toast-style notifications --- */
/* Container pinned below header on the right */
.flash-messages {
    position: fixed;
    top: calc(var(--header-height) + var(--space-md));  /* sits just below the sticky header */
    right: var(--space-lg);
    z-index: 2000;  /* above header (1000) but below modals (5000) */
    width: 100%;
    max-width: 420px;
}
/* Individual flash — colored left border indicates severity */
.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-sm);
    border-radius: 5px;
    border-left: 4px solid;
    font-size: 0.9375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: flash-slide-in 0.3s ease;
}
/* Slide in from right to draw attention */
@keyframes flash-slide-in {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* Severity variants — background, border, and text color triplets */
.flash--success { background-color: var(--color-success-bg); border-color: var(--color-success); color: #155724; }
.flash--error   { background-color: var(--color-error-bg);   border-color: var(--color-error);   color: #721c24; }
.flash--info    { background-color: var(--color-info-bg);    border-color: var(--color-info);    color: #0c5460; }
/* Close button — inherits flash text color, fades in on hover */
.flash__close { font-size: 1.25rem; line-height: 1; color: inherit; opacity: 0.5; padding: 0 0 0 var(--space-md); }
.flash__close:hover { opacity: 1; }