/* ------------------------------------------------------------------
   Global call-to-action styles
   Source of truth: Figma "Untitled" file, node 23:173 ("Find out more").
   Depends on the tokens in typography.css - load that first.
   ------------------------------------------------------------------ */



   :root {
    --buttonRadius: 50vw;
   }

/* Solid pill CTA. White fill, black label, fully rounded.
   Works as either <a class="cc-btn"> or <button class="cc-btn">. */
.cc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: var(--button-text);
    font-weight: var(--weight-regular);
    line-height: normal;
    letter-spacing: 0;
    color: var(--page);
    background-color: #ffffff;
    border: 0;
    /* Any radius past half the height reads as a pill; 100px is the designed value. */
    border-radius: var(--buttonRadius);
    padding: 1em 2rem;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}


.cc-btn.cc-btn-sm {
    padding: 0.5rem 1em;
    font-size: var(--text-sm);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.cc-btn:hover,
.cc-btn:focus-visible {
    opacity: 0.8;
}

/* Inverted variant for use on light backgrounds. Not in the specimen frame -
   included because a white-on-white CTA is unusable and every page that is not
   dark will need it. Delete if the site is dark-only. */
.cc-btn--dark {
    color: #ffffff;
    background-color: #000000;
}