/* Soester Mannenkoor Apollo - ontwerp v2.
   Gevraagd: de site 100% breed, de header minder hoog, en het rood als verloop.
   Zelfde inhoud als v1, alleen andere CSS op het vaste contract. */

:root {
    --site-accent:          #7A003A;   /* bordeaux - knoppen en links blijven effen */
    --site-accent-hover:    #943558;
    --site-accent-contrast: #FFF6DB;
    --site-ink:             #333333;
    --site-link:            #7A003A;
    --site-bg:              #FFFFFF;
    --site-surface:         #FFF6DB;
    --site-line:            #EADFC2;
    --site-focus:           #DCA057;
    --site-font:            "Open Sans", system-ui, sans-serif;
    --site-font-head:       "Open Sans", system-ui, sans-serif;
    --site-weight-head:     700;
    --site-radius:          6px;

    /* 100% breed. Lopende tekst blijft op leesbreedte (--site-measure). */
    --site-container:       100%;

    /* Het verloop: van bordeaux naar een warmer rood, met een vleug goud. */
    --apollo-gradient: linear-gradient(100deg, #5C002B 0%, #7A003A 45%, #A3274F 85%, #B8563E 100%);
}

/* Lagere header: minder opvulling en een kleiner logo. */
.site-header {
    background: var(--apollo-gradient);
    color: var(--site-accent-contrast);
    padding-block: calc(var(--site-space) * .55);
    border-bottom: 2px solid var(--site-focus);
}
.site-logo img { max-height: 30px; }

.site-header a,
.site-nav a {
    color: var(--site-accent-contrast);
}
.site-nav a {
    padding: .35em .6em;
    border-radius: var(--site-radius-sm);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
    background: rgba(255, 246, 219, .14);
}

.site-main h1 {
    border-bottom: 3px solid var(--site-focus);
    padding-bottom: .3em;
}

.site-footer {
    background: var(--apollo-gradient);
    color: var(--site-accent-contrast);
}
.site-footer a {
    color: var(--site-accent-contrast);
}