/*
 * Cookie banner — a bar along the bottom edge until the visitor answers.
 * Loaded on every page (see functions.php enqueue()).
 */

.cookie-banner {
    position:         fixed;
    left:             0;
    right:            0;
    bottom:           0;
    z-index:          var(--z-modal);
    padding:          20px var(--container-padding);
    background-color: var(--color-bg);
    border-top:       1px solid var(--color-border);
    box-shadow:       var(--shadow);
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner__inner {
    display:        flex;
    flex-wrap:      wrap;
    align-items:    center;
    gap:            16px 32px;
    max-width:      var(--container-width);
    margin:         0 auto;
}

.cookie-banner__title {
    margin:      0;
    font-family: var(--font-heading);
    font-size:   20px;
    line-height: 1.2;
    color:       var(--color-text);
}

.cookie-banner__text {
    flex:        1 1 420px;
    margin:      0;
    font-size:   15px;
    line-height: var(--line-height);
    color:       var(--color-text);
}

.cookie-banner__link {
    color:           inherit;
    text-decoration: underline;
}

.cookie-banner__actions {
    display: flex;
    flex:    0 0 auto;
    gap:     12px;
}

.cookie-banner__btn {
    padding: 10px 20px;
}

/* A footer link that is a button: looks like the other footer links. */
.site-footer__link--button {
    padding:     0;
    border:      0;
    background:  none;
    font:        inherit;
    color:       inherit;
    cursor:      pointer;
    text-align:  left;
}

@media ( max-width: 640px ) {
    .cookie-banner__actions {
        width: 100%;
    }

    .cookie-banner__btn {
        flex: 1 1 0;
    }
}