/**
 * =================================================================
 * MYFUN.CO.ZA THEME — South African Flag Colours
 * Green #007A4D | Gold #FFB81C | Red #DE3831 | Blue #002395
 * =================================================================
 */

:root {
    --color-primary: #007A4D;
    --color-primary-dark: #005C3A;
    --color-primary-light: #009960;
    --color-primary-rgb: 0, 122, 77;
    --color-secondary: #002395;
    --color-accent: #FFB81C;
    --color-accent-dark: #D9970A;
    --gradient-primary: linear-gradient(135deg, #007A4D 0%, #005C3A 100%);
    --gradient-hero: linear-gradient(135deg, #E8F5EE 0%, #D0EBE0 100%);
    --gradient-hero-text: #003D26;
}

/* ---- Buttons ---- */
.btn-primary {
    background: var(--gradient-primary);
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #009960 0%, #007A4D 100%);
    border-color: var(--color-primary-light);
}

/* ---- Header flag stripe ---- */
.site-header {
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(
        to right,
        #DE3831 0%,
        #DE3831 20%,
        #FFB81C 20%,
        #FFB81C 40%,
        #007A4D 40%,
        #007A4D 60%,
        #002395 60%,
        #002395 80%,
        #000000 80%,
        #000000 100%
    ) 1;
}

/* ---- Nav active state ---- */
.main-nav a.active,
.main-nav a:hover {
    color: var(--color-accent);
}

/* ---- Hero/Banner accent ---- */
.hero-section,
.page-hero {
    background: var(--gradient-hero);
    color: var(--gradient-hero-text);
}

/* ---- Cards ---- */
.card:hover {
    border-color: var(--color-primary-light);
    box-shadow: 0 4px 20px rgba(0, 122, 77, 0.15);
}

/* ---- Links ---- */
a {
    color: var(--color-primary);
}
a:hover {
    color: var(--color-primary-light);
}

/* ---- Footer ---- */
.site-footer {
    background: linear-gradient(135deg, #003D26 0%, #002395 100%);
}

/* ---- Badges / tags ---- */
.badge-primary,
.tag-primary {
    background-color: var(--color-primary);
}
.badge-accent,
.tag-accent {
    background-color: var(--color-accent);
    color: #000;
}

/* ---- SA flag decorative strip (reusable class) ---- */
.sa-flag-strip {
    height: 4px;
    background: linear-gradient(
        to right,
        #DE3831 0% 20%,
        #FFB81C 20% 40%,
        #007A4D 40% 60%,
        #002395 60% 80%,
        #000000 80% 100%
    );
    border-radius: 2px;
}