/* Button styling
 * All button styling now lives here.
 * Brand: square, Courier Prime uppercase. Primary = Cosmopolitan pink with cream text.
 */

/* Base button */
.button {
    padding: 1.5rem 2.2rem;
    background: var(--brand-1);
    color: var(--brand-4);
    display: inline-block;
    border-radius: 0;
    border: 0.2rem solid var(--brand-1);
    font-family: var(--font-mono);
    font-size: 1.5rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out;
}
.button:hover,
.button.current {
    background: var(--brand-2);
    border-color: var(--brand-2);
    color: var(--brand-4);
}
.button:focus-visible { outline: 0.3rem solid var(--brand-1); outline-offset: 0.3rem; }

/* Button variants */
.button.toast-primary {
    background: var(--brand-1);
    border-color: var(--brand-1);
    color: var(--brand-4);
}
.button.toast-primary:hover {
    background: var(--brand-2);
    border-color: var(--brand-2);
    color: var(--brand-4);
}
.button.toast-secondary {
    background: transparent;
    border-color: var(--brand-2);
    color: var(--brand-2);
}
.button.toast-secondary:hover {
    background: var(--brand-2);
    color: var(--brand-4);
}
.button.toast-tertiary {
    background: transparent;
    border-color: transparent;
    color: var(--brand-1);
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    text-underline-offset: 0.3em;
}
.button.toast-tertiary:hover {
    background: transparent;
    border-color: transparent;
    color: var(--brand-2);
}

.button.toast-dark { background: var(--brand-2); border-color: var(--brand-2); color: var(--brand-4); }
.button.toast-dark:hover { background: var(--brand-1); border-color: var(--brand-1); color: var(--brand-4); }

/* Layout helpers */
.button.display-block { width: 100%; text-align: center; }
p > .button + .button { margin-left: 1.2rem; }
:is(h1, h2, h3, h4, h5, h6, ul, ol, blockquote, table) + :is(.button, .button-block) { margin-top: clamp(1.5rem, 4vw, 4rem); }

/* Button blocks */
.button-block { margin-top: auto; padding-top: 4rem; }
.button-block.bottom { position: absolute; bottom: 6rem; }

/* Buttons on dark backgrounds (Little Black) */
:is(.bg2) .button.toast-secondary,
.has-bg.bg2 .button.toast-secondary { border-color: var(--brand-4); color: var(--brand-4); }
:is(.bg2) .button:hover { background: var(--brand-4); border-color: var(--brand-4); color: var(--brand-2); }