/* Button styling
 * All button styling now lives here.
*/

/* Default buttons */
a.button{  padding: 1rem 2rem; background: var(--brand-1); color: #fff; font-weight: bold; text-align: center; display: inline-block; border-radius: 1.5rem; opacity: 1; transition: all .15s ease-in-out; }
a.button:hover, a.button.current { border-radius: 1.5rem; background: var(--brand-2); color: #fff; transition: background .15s ease-in-out; }
a.display-block { width: 100%; }
p:has(a.button + a.button) { display: flex; gap: 2rem; flex-wrap: wrap; }

:is(h1, h2, h3, h4, h5, h6, ul, ol, blockquote, table) +:is(a.button, .button-block) { margin-top: clamp(1.5rem, 4vw, 4rem);  }

/* Buttons blocks */
.button-block.bottom { position: absolute; bottom: 6rem; }
p + .button-block, img + .button-block { margin-top: 2rem; }

.button.toast-primary{background-color: var(--brand-1); border: 1px solid var(--brand-1); color: #fff;}
.button.toast-primary:hover{background-color: #fff; color: var(--brand-1);}

.button.toast-secondary{background-color: var(--brand-2); border: 1px solid var(--brand-2); color: #fff;}
.button.toast-secondary:hover{background-color: #fff; color: var(--brand-2);}

.button.toast-tertiary{background-color: var(--brand-3); border: 1px solid var(--brand-3); color: #fff;}
.button.toast-tertiary:hover{background-color: #fff; color: var(--brand-3);}

.button.toast-quaternary{background-color: var(--brand-4); border: 1px solid var(--brand-4); color: #fff;}
.button.toast-quaternary:hover{background-color: #fff; color: var(--brand-4);}

.button.toast-white{background-color: #fff; border: 1px solid #fff; color: var(--text-color);}
.button.toast-white:hover{background-color: var(--text-color); color: #fff;}

.button.toast-clear-bordered{background-color: transparent; border: 1px solid var(--brand-3); color: var(--brand-3);}
.button.toast-clear-bordered:hover{background-color: var(--brand-3); color: #fff;}

/* Buttons with Backgrounds */
/* :is(.bg1, .bg3, .bg4, .bg5, .bg6, .bg7, .bg8) a.button, .has-bg a.button { color: var(--brand-3); background: #fff; }
:is(.bg2) a.button { background: var(--brand-1); }
:is(.bg1, .bg2, .bg3, .bg4, .bg5, .bg6, .bg7, .bg8) a.button:hover, .has-bg a.button:hover { background: rgba(0,0,0,.5); } */

a.header-button{font-size: 1.75rem; font-weight: bold; text-align: center;}