/* ---------------------------------------------------------------------------
   PTTHex public button system
   ---------------------------------------------------------------------------
   The purchased theme ships one set of button colours and the generated
   brand-overrides.css remaps only some of them, so a brand-green button used to
   turn indigo on hover, an outline button put black text on a dark green fill,
   and the solid button was two pixels shorter than every other variant because
   it dropped its border. This file is the single place the site's buttons are
   defined, loaded after theme.min.css and brand-overrides.css.

   Six variants, and nothing else is used on the public site:

     Light surfaces      Dark surfaces
     ------------------  ----------------------
     .btn-primary        .btn-light
     .btn-outline-primary .btn-outline-light
     .btn-outline-secondary
     .btn-link

   Every one of them shares the same box, radius, weight, transition, focus
   ring, and press feedback, so a row of mixed buttons lines up exactly.
--------------------------------------------------------------------------- */

:root {
    /* The brand green, with the theme's own green as the fallback. */
    --ptt-btn-primary: var(--brand-primary, #3d7c44);
    --ptt-btn-primary-rgb: var(--brand-primary-rgb, 61, 124, 68);

    /* Hover lifts a dark brand colour towards the light rather than darkening
       it into black; the press state goes the other way. Both are computed
       from the brand colour, so a new brand colour needs no new values here. */
    --ptt-btn-primary-hover: #17601a;
    --ptt-btn-primary-active: #07340a;

    --ptt-btn-ink: #0b0f19;
    --ptt-btn-ink-muted: #565973;
    --ptt-btn-line: #d4d7e5;
    --ptt-btn-line-strong: #b4b7c9;
    --ptt-btn-neutral-bg: #f3f6ff;
    --ptt-btn-neutral-bg-hover: #e2e5f1;

    --ptt-btn-radius: 0.5rem;
    --ptt-btn-font-weight: 600;
    --ptt-btn-transition: color .15s ease-in-out, background-color .15s ease-in-out,
        border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .12s ease-in-out;
    --ptt-btn-ring: 0 0 0 0.2rem rgba(var(--ptt-btn-primary-rgb), .3);
    --ptt-btn-ring-light: 0 0 0 0.2rem rgba(255, 255, 255, .45);
    --ptt-btn-lift: 0 0.375rem 0.875rem -0.375rem rgba(var(--ptt-btn-primary-rgb), .5);
}

@supports (color: color-mix(in srgb, red, blue)) {
    :root {
        --ptt-btn-primary-hover: color-mix(in srgb, var(--ptt-btn-primary) 84%, #ffffff);
        --ptt-btn-primary-active: color-mix(in srgb, var(--ptt-btn-primary) 88%, #000000);
    }
}

/* --- shared box -------------------------------------------------------- */
/* Display is deliberately left to the theme: the header call to action relies
   on .d-none / .d-xl-inline-flex utilities to appear only on wide screens. */
.page-wrapper .btn,
.header .btn,
.site-footer .btn,
footer .btn {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--ptt-btn-radius);
    font-weight: var(--ptt-btn-font-weight);
    text-decoration: none;
    transition: var(--ptt-btn-transition);
}

.page-wrapper .btn:focus,
.header .btn:focus,
footer .btn:focus {
    outline: none;
}

.page-wrapper .btn:focus-visible,
.header .btn:focus-visible,
footer .btn:focus-visible {
    box-shadow: var(--ptt-btn-ring);
    outline: none;
}

.page-wrapper .btn:active,
.header .btn:active,
footer .btn:active {
    transform: translateY(1px);
}

.page-wrapper .btn:disabled,
.page-wrapper .btn.disabled,
.header .btn:disabled,
footer .btn:disabled {
    opacity: .55;
    box-shadow: none;
    transform: none;
}

/* Round icon buttons keep their circle. */
.page-wrapper .btn.btn-icon,
.header .btn.btn-icon,
footer .btn.btn-icon,
.page-wrapper .btn.rounded-circle,
.header .btn.rounded-circle,
footer .btn.rounded-circle {
    border-radius: 50%;
}

/* --- sizes ------------------------------------------------------------- */
/* One radius for every size, so a small button and a large one read as the
   same component. Heights land on 36 / 44 / 52px. */
.page-wrapper .btn-sm,
.header .btn-sm,
footer .btn-sm {
    --si-btn-border-radius: var(--ptt-btn-radius);
    padding: 0.5rem 1.125rem;
    font-size: 0.8125rem;
    border-radius: var(--ptt-btn-radius);
}

.page-wrapper .btn-lg,
.header .btn-lg,
footer .btn-lg {
    --si-btn-border-radius: var(--ptt-btn-radius);
    padding: 0.8125rem 1.75rem;
    font-size: 1rem;
    border-radius: var(--ptt-btn-radius);
}

/* --- solid primary ----------------------------------------------------- */
.page-wrapper .btn-primary,
.header .btn-primary,
footer .btn-primary {
    background-color: var(--ptt-btn-primary);
    background-image: none;
    border-color: var(--ptt-btn-primary);
    color: #fff;
}

.page-wrapper .btn-primary:hover,
.header .btn-primary:hover,
footer .btn-primary:hover {
    background-color: var(--ptt-btn-primary-hover);
    border-color: var(--ptt-btn-primary-hover);
    color: #fff;
    /* The theme ships `.btn:hover { box-shadow: none !important }`, so the one
       place this file raises its weight is here, to give the filled buttons a
       press-me lift. */
    box-shadow: var(--ptt-btn-lift) !important;
}

.page-wrapper .btn-primary:active,
.page-wrapper .btn-primary:focus-visible:active,
.header .btn-primary:active,
footer .btn-primary:active {
    background-color: var(--ptt-btn-primary-active);
    border-color: var(--ptt-btn-primary-active);
    color: #fff;
}

.page-wrapper .btn-primary:disabled,
.page-wrapper .btn-primary.disabled {
    background-color: var(--ptt-btn-primary);
    border-color: var(--ptt-btn-primary);
    color: #fff;
}

/* --- outline primary --------------------------------------------------- */
.page-wrapper .btn-outline-primary,
.header .btn-outline-primary,
footer .btn-outline-primary {
    background-color: transparent;
    border-color: rgba(var(--ptt-btn-primary-rgb), .4);
    color: var(--ptt-btn-primary);
}

.page-wrapper .btn-outline-primary:hover,
.header .btn-outline-primary:hover,
footer .btn-outline-primary:hover {
    background-color: var(--ptt-btn-primary);
    border-color: var(--ptt-btn-primary);
    /* This is the bug this file was written for: the theme put black text on
       the dark green fill, which is unreadable. */
    color: #fff;
    box-shadow: var(--ptt-btn-lift) !important;
}

.page-wrapper .btn-outline-primary:active,
.header .btn-outline-primary:active,
footer .btn-outline-primary:active {
    background-color: var(--ptt-btn-primary-active);
    border-color: var(--ptt-btn-primary-active);
    color: #fff;
}

/* --- outline secondary (quiet, neutral) -------------------------------- */
.page-wrapper .btn-outline-secondary,
.header .btn-outline-secondary,
footer .btn-outline-secondary {
    background-color: transparent;
    border-color: var(--ptt-btn-line);
    color: var(--ptt-btn-ink);
}

.page-wrapper .btn-outline-secondary:hover,
.header .btn-outline-secondary:hover,
footer .btn-outline-secondary:hover {
    background-color: var(--ptt-btn-neutral-bg);
    border-color: var(--ptt-btn-line-strong);
    color: var(--ptt-btn-ink);
    box-shadow: none;
}

.page-wrapper .btn-outline-secondary:active {
    background-color: var(--ptt-btn-neutral-bg-hover);
    border-color: var(--ptt-btn-line-strong);
    color: var(--ptt-btn-ink);
}

/* The neutral chip used by the round social buttons. */
.page-wrapper .btn-secondary,
.header .btn-secondary,
footer .btn-secondary {
    background-color: var(--ptt-btn-neutral-bg);
    border-color: var(--ptt-btn-neutral-bg);
    color: var(--ptt-btn-ink);
}

.page-wrapper .btn-secondary:hover,
.header .btn-secondary:hover,
footer .btn-secondary:hover {
    background-color: var(--ptt-btn-primary);
    border-color: var(--ptt-btn-primary);
    color: #fff;
}

/* --- text button ------------------------------------------------------- */
.page-wrapper .btn-link,
footer .btn-link {
    background-color: transparent;
    border-color: transparent;
    color: var(--ptt-btn-primary);
    font-weight: var(--ptt-btn-font-weight);
    text-decoration: none;
}

.page-wrapper .btn-link:hover,
footer .btn-link:hover {
    color: var(--ptt-btn-primary-active);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    box-shadow: none;
}

.page-wrapper .btn-link:active {
    transform: none;
}

/* --- dark surfaces ----------------------------------------------------- */
/* Used on the dark footer and on the coloured closing panels. */
.page-wrapper .btn-light,
footer .btn-light {
    background-color: #fff;
    border-color: #fff;
    color: var(--ptt-btn-ink);
}

.page-wrapper .btn-light:hover,
footer .btn-light:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--ptt-btn-primary);
}

.page-wrapper .btn-outline-light,
footer .btn-outline-light {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.page-wrapper .btn-outline-light:hover,
footer .btn-outline-light:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--ptt-btn-ink);
}

.page-wrapper .btn-light:focus-visible,
.page-wrapper .btn-outline-light:focus-visible,
footer .btn-light:focus-visible,
footer .btn-outline-light:focus-visible {
    box-shadow: var(--ptt-btn-ring-light);
}

/* --- carousel arrows on the home page ---------------------------------- */
.page-wrapper .btn-prev,
.page-wrapper .btn-next {
    border-color: var(--ptt-btn-line);
    color: var(--ptt-btn-ink);
}

.page-wrapper .btn-prev:hover,
.page-wrapper .btn-next:hover {
    background-color: var(--ptt-btn-primary);
    border-color: var(--ptt-btn-primary);
    color: #fff;
}

/* A visitor who asked for less motion still gets the colour change. */
@media (prefers-reduced-motion: reduce) {
    .page-wrapper .btn:active,
    .header .btn:active,
    footer .btn:active {
        transform: none;
    }
}