/* =========================================================
   ARGUS MODIFICATIONS — VISUAL ENHANCEMENTS
   Append this block to the END of src/static/assets/main.css
   (do not replace the file — just add these rules after it)
   ========================================================= */

/* ---- 1. Distinct heading font -------------------------------
   Body text stays on Inter. Big headline + section titles switch
   to Work Sans at a heavy weight so they read as intentional
   branding rather than default Bootstrap type. */
.midtitle,
h2.bigfont {
    font-family: 'Work Sans', sans-serif !important;
    font-weight: 900;
    letter-spacing: -0.02em;
}

/* ---- 2. Gradient accent instead of flat theme color ----------
   Uses color-mix() so it automatically adapts if you change the
   site accent color in the admin panel later — no hardcoded hex. */
.btn-theme {
    background: linear-gradient(
        135deg,
        var(--theme-color) 0%,
        color-mix(in srgb, var(--theme-color) 70%, black) 100%
    ) !important;
    border: none !important;
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.btn-theme:hover {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--theme-color) 80%, white) 0%,
        var(--theme-color) 100%
    ) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--theme-color) 40%, transparent);
}

/* ---- 3. Product card hover glow -------------------------------
   Add class="productcard-glow" to the featured-product wrapper div
   (see index.ejs instructions below). Lifts the card and glows the
   border in your theme color on hover instead of doing nothing. */
.productcard-glow {
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    cursor: pointer;
}

.productcard-glow:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 24px 2px color-mix(in srgb, var(--theme-color) 45%, transparent);
    border-color: var(--theme-color) !important;
}

/* ---- 4. Subtle background texture instead of flat black -------
   Very light noise-free gradient wash so the page isn't pure flat
   #0a0b0d. Barely visible but breaks up the flatness. */
body {
    background-image:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--theme-color) 6%, transparent) 0%, transparent 40%),
        radial-gradient(circle at 85% 100%, color-mix(in srgb, var(--theme-color) 5%, transparent) 0%, transparent 40%) !important;
}