/*
 * Buttons – .button, 52px tall, 44px small.
 *
 *   .button--primary   cedar, white text (light grounds)
 *   .button--oak       oak, graphite text (dark grounds)
 *   .button--outline   a 1.5px outline in the text colour
 *   .button--small     44px, for the header
 *   .button-link       text with an arrow
 *
 * On a dark band (and anything marked .is-on-dark) primary turns oak and
 * outline turns chalk.
 */

.button {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 26px;
    font: var(--text-15as);
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);

    & .icon {
        width: 20px;
        height: 20px;
        transition: transform var(--transition-fast);
    }

    &:hover .icon-arrow { transform: translateX(4px); }
    &:active { transform: translateY(1px); }
}

.button--primary {
    color: var(--color-white);
    background: var(--color-cedar);
    border-color: var(--color-cedar);

    &:hover {
        background: var(--color-cedar-dark);
        border-color: var(--color-cedar-dark);
        box-shadow: 0 12px 24px -14px rgb(139 90 43 / 80%);
    }
}

.button--oak {
    color: var(--color-graphite);
    background: var(--color-oak);
    border-color: var(--color-oak);

    &:hover { background: var(--color-oak-light); border-color: var(--color-oak-light); }
}

.button--outline {
    color: var(--color-graphite);
    background: transparent;
    border-color: currentColor;

    &:hover {
        color: var(--color-white);
        background: var(--color-graphite);
        border-color: var(--color-graphite);
    }
}

.button--small {
    min-height: 44px;
    padding: 8px 20px;
}

.button-link {
    display: inline-flex;
    gap: var(--space-xs);
    align-items: center;
    font: var(--text-15as);
    color: var(--color-cedar);
    text-decoration: none;

    & .icon {
        width: 18px;
        height: 18px;
        transition: transform var(--transition-fast);
    }

    &:hover .icon { transform: translateX(4px); }
}

/* ── On dark grounds ──────────────────────────────────────────── */

:is(.section--dark, .is-on-dark, .cta-band, .site-menu) {
    & .button--primary {
        color: var(--color-graphite);
        background: var(--color-oak);
        border-color: var(--color-oak);

        &:hover { background: var(--color-oak-light); border-color: var(--color-oak-light); box-shadow: none; }
    }

    & .button--outline {
        color: var(--color-chalk);
        border-color: var(--color-white-25);

        &:hover {
            color: var(--color-graphite);
            background: var(--color-chalk);
            border-color: var(--color-chalk);
        }
    }

    & .button-link { color: var(--color-oak); }
}

/* ── Contact buttons (template-parts/contact-buttons) ─────────── */

.contact-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-sm);
    align-items: center;


    & .icon-whatsapp,
    & .icon-phone { width: 20px; height: 20px; }

    @media (max-width: 479px) {
        & .button { flex: 1 1 100%; }
    }
}