/**
 * Buttons: GB buttons, native buttons and submit inputs.
 *
 * Variants (add as a class on the button):
 *   (none)                 primary, --btn-bg / --btn-font-clr
 *   btn-alternate-color    swapped primary colors
 *   btn-no-bg              text link with an animated underline; the
 *                          underline appears when js/blocks/button.js adds
 *                          .visible on scroll
 *   btn-transparent        outlined, uses the section's text color
 *                          (btn-transparent-light / -dark are kept as aliases)
 * A <span class="gb-button"> renders as disabled.
 */

:root {
    /* Prototype G: pill buttons in bold body text */
    --button-padding: 0.85em 1.5em;
    --button-radius: 999px;
    --button-weight: 700;
}

a.gb-button,
button,
input[type="submit"] {
    padding: var(--button-padding);
    border-radius: var(--button-radius);
    font-weight: var(--button-weight);
    background-color: var(--btn-bg);
    color: var(--btn-font-clr);
    transition: all var(--transition-speed) var(--transition-timing-function);
}

a.gb-button:hover,
button:hover,
input[type="submit"]:hover {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-font);
}

/* Swapped colors */
a.gb-button.btn-alternate-color,
button.btn-alternate-color {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-font);
}

a.gb-button.btn-alternate-color:hover,
button.btn-alternate-color:hover {
    background-color: var(--btn-bg);
    color: var(--btn-font-clr);
}

/* Outlined */
a.gb-button.btn-transparent,
button.btn-transparent,
a.gb-button.btn-transparent-light,
button.btn-transparent-light,
a.gb-button.btn-transparent-dark,
button.btn-transparent-dark {
    background: none;
    border: 2px solid currentColor;
    color: var(--font-clr);
}

/* Prototype G: the outline fills with the text color on hover */
a.gb-button.btn-transparent:hover,
button.btn-transparent:hover,
a.gb-button.btn-transparent-light:hover,
button.btn-transparent-light:hover,
a.gb-button.btn-transparent-dark:hover,
button.btn-transparent-dark:hover {
    background: var(--font-clr);
    border-color: var(--font-clr);
    color: var(--bg-clr);
}

/* Disabled */
span.gb-button {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Text link with an animated underline. The underline is background layers
   that grow from the left, so the button needs no position, overflow or
   transform: a card link (.post-item-link, .card-link, .team-member-link)
   draws its whole-card hit area with an absolute ::before, and any of those
   on the button would trap that pseudo-element inside the button.
   Project (Suomen Jättikasvisyhdistys, Arto 29.10.2026): the underline is a
   strip of measuring tape (--tape-clr with --tape-tick-clr ticks on its upper
   half), as on the vuosinauha cells; the base theme draws a 2px currentColor
   line. Layers: ticks, then the tape. */
.gb-button.btn-no-bg {
    --no-bg-tape-height: 6px;
    padding: 5px 0 calc(var(--no-bg-tape-height) + 4px);
    border: 0;
    background:
        repeating-linear-gradient(90deg, var(--tape-tick-clr) 0 1px, transparent 1px 6px)
            left bottom calc(var(--no-bg-tape-height) / 2) / 0 calc(var(--no-bg-tape-height) / 2) no-repeat,
        linear-gradient(var(--tape-clr), var(--tape-clr))
            left bottom / 0 var(--no-bg-tape-height) no-repeat;
    color: var(--no-bg-btn-clr);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em; /* prototype G; the base theme uses 4px */
    font-weight: bold;
    transition: background-size 0.9s ease, color 0.5s ease;
    border-radius:0px;
}

/* js/blocks/button.js adds .visible when the link scrolls into view */
.gb-button.btn-no-bg.visible {
    background-size: 20% calc(var(--no-bg-tape-height) / 2), 20% var(--no-bg-tape-height);
}

/* a.gb-button:hover outranks the base rule, so the fill is cleared here too */
.gb-button.btn-no-bg:hover {
    color: var(--no-bg-btn-hover-clr);
    background-color: transparent;
    background-size: 100% calc(var(--no-bg-tape-height) / 2), 100% var(--no-bg-tape-height);
}