:root {
    --elm1: #75b96a;
    --mulberry1: #9ac5e6;
    --raspberry1: #f29fa3;
    --plum1: #e6443e;
    --orange1: #e7e6c8;
    --lemon1: #19945d;
    --accent: #3ea73a;
    --logotype: url(https://www.alleboerncykler.dk/media/cadgiz4a/navnetraek-1linje-sort.png);
    --footerlogo: url(https://www.alleboerncykler.dk/media/quzna3cw/cyklistforbundet_afmelder_sort_rgb.png);
}

/* Standard tekstfarver */
.c.color.Raspberry,
.c.color.Accent,
.c.color.Lemon{
    color: #fff !important;
}

/* LIGHTTEXT – kun på wrapper */
.r.lighttext {
    color: #fff; /* default */
}

/* Farve overrides */
.r.Lemon.lighttext {
    color: #f6e8e5;
}

.r.Raspberry.lighttext {
    color: #2f222d;
}

.r.Plum.lighttext {
    color: #f6e8e5;
}

.r.Accent.lighttext {
    color: #f6e8e5;
}

.r.Elm.lighttext {
    color: #000;
}

/* CTA følger parent farve */
.cta.c {
    color: inherit;
}

/* Hvis CTA skal overrides specifikt */
.cta.c.Lemon,
.cta.c.Plum,
.cta.c.Accent{
    color: #f6e8e5;
}

.cta.c.Raspberry,
.cta.c.Elm{
    color: #2f222d;
}

/* Recaptcha */
gen-search-widget + #recapthcha,
gen-search-widget + #recapthcha a {
    color: #4c1032;
}

/* Baggrund */
body {
    background-color: #e7e6c8;
}
a.c.color.Lemon {
    background: var(--lemon1) !important;
}
a.c.color.Plum {
    background: var(--plum1) !important;
}
a.c.color.Elm{
    background: var(--elm1) !important;
}
a.c.color.Mulberry{
    background: var(--mulberry1) !important;
}
a.c.color.Raspberry{
    background: var(--raspberry1) !important;
}
a.c.color.Orange{
    background: var(--orange1) !important;
}
footer .logo > div {
    background-size: contain;       /* fits entirely */
    background-position: center;    /* center it */
    background-repeat: no-repeat;
    background-size: 100%;
}
img {
    max-width: 100%;
}

ul.images li p:last-child {
    margin-bottom: 0;
    display: flow-root;
}

header {
    &.r {
        margin-top: 100px;
    }
    .co {
        min-height: auto;
    }
}
.sticky {
    background: linear-gradient(to bottom, var(--plum1) 0%, var(--plum1) 40%, var(--elm1) 40%, var(--elm1) 100%);
    height: 100px;

    .stick > a:first-child {
        top: 40px;
        width: 350px;
        max-width: calc(100% - 2 * var(--spacing));
        background-position: left;
    }
    
    .stick {
        a {
            margin-left: calc(10px + var(--spacing))!important;
        }
        a:first-child {
            margin-left: 0!important;
        }
        .button, .member a {
            background: none;
            color: #000;
            padding: 0;
            font-size: 14px;
        }
        .member {
            position: absolute;
            right: 340px;
            top: -9px;
        }
        .member a {
            float: none;
            display: inline-block;
            
            &:nth-child(1) {
                display: none;
            }
        }
    }
}

nav {
    &.main {
        a.button {
            position: relative;
            top: -12px;
        }
        a.open {
            color: color-mix(in srgb, var(--accent), #000 40%);
        }
    }
}

.lo nav.showMobile {
    li:nth-child(7) {
        display: none!important;
    }
}

@media only screen and (max-width: 877.5px) {
    nav.stick>a {
        display: block;
    }
    #b nav.stick > a:nth-child(2) {
        display: none!important;
    }
}
@media only screen and (min-width: 767px) {

li.hlc {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
}

li.hlc > img, ul.images li>img, ul.images li>.img {
  grid-column: 1;
  float: none;
  grid-row: 1 / span 999;
  margin: 0;
}

li.hlc > :not(img) {
  grid-column: 2;
}
}

.ButtonLink.cta {
    text-align: initial;
    min-height: initial;
    padding: 0;
    color: initial;
    a {
        min-width: initial;
        color: var(--accent);
        font-weight: initial;
        font: initial;
        padding: 8px 24px;
}
    }
    p {
        color: initial;
    }
}