/* #####################################################################
   MONARCH DESIGN SYSTEM v0.8.1
   MODULE: Buttons
   PURPOSE: Token-driven action controls plus contextual action layouts.
   DEPENDENCIES: colors.php, fonts.css, component-tokens.php
   ##################################################################### */

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    min-height:2.75rem;
    margin-inline:var(--space-xs);
    margin-block:var(--space-xs);
    padding-block:max(var(--button-padding-y), .85rem);
    padding-inline:max(var(--button-padding-x), 1.5rem);
    border:2px solid transparent;
    border-radius:var(--button-radius);
    cursor:pointer;
    font:var(--fw-bold) var(--fs-md)/1 var(--font-primary);
    text-decoration:none;
    transition:transform var(--transition-fast),filter var(--transition-normal),background var(--transition-normal);
}
.button:hover { transform:translateY(-1px); filter:brightness(1.08); }
.button:active { transform:translateY(0); }
.button-primary { background:var(--site-color-primary); color:var(--site-color-background); }
.button-secondary { background:var(--site-color-secondary); color:var(--site-color-background); }
.button-accent { background:var(--site-color-accent); color:var(--site-color-background); }
.button-outline { border-color:var(--site-color-primary); background:transparent; color:var(--site-color-text); }
.button-ghost { background:color-mix(in srgb, var(--site-color-text) 5%, transparent); color:var(--site-color-text); }
.button-small { min-height:2.2rem; padding:var(--button-padding-y-small) var(--button-padding-x-small); font-size:var(--fs-sm); }
.button-large { min-height:3.25rem; padding:var(--button-padding-y-large) var(--button-padding-x-large); font-size:var(--fs-lg); }
.button[disabled],.button.is-disabled { cursor:not-allowed; opacity:.48; pointer-events:none; }
.button-row {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    column-gap:var(--button-row-gap);
    row-gap:var(--button-group-gap);
    margin-block:var(--button-row-margin-top) var(--button-row-margin-bottom);
}
.button-group {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:var(--button-group-gap);
    margin-block:var(--button-group-margin-top) var(--button-group-margin-bottom);
}

.button-group .button,.button-row .button{margin:0}.button:focus-visible{outline:3px solid var(--site-color-accent);outline-offset:3px}

/* v0.8.3.4.1 final action-layout normalization. */
.button-row,
.button-group,
.showcase-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--button-row-gap, var(--space-md));
}
.button-row > .button,
.button-group > .button,
.showcase-links > .button {
    margin: 0;
}
/* Fallback breathing room for older browsers or cached gap rules. */
@supports not (gap: 1rem) {
    .button-row > .button,
    .button-group > .button,
    .showcase-links > .button {
        margin: calc(var(--space-sm) / 2);
    }
}


/* v0.8.3.6: button links are governed by the Button system, not default text-link states. */
a.button,
a.button:link,
a.button:visited,
.button {
    text-decoration: none;
}
a.button:not(.button-outline):not(.button-ghost):not(.button-secondary):not(.button-accent),
.button:not(.button-outline):not(.button-ghost):not(.button-secondary):not(.button-accent) {
    background: var(--site-color-primary);
    color: var(--site-color-background);
}
a.button-primary,
a.button-primary:link,
a.button-primary:visited,
.button-primary {
    color: var(--site-color-background);
}
a.button-secondary,
a.button-secondary:link,
a.button-secondary:visited,
.button-secondary {
    color: var(--site-color-background);
}
a.button-accent,
a.button-accent:link,
a.button-accent:visited,
.button-accent {
    color: var(--site-color-background);
}
a.button-outline,
a.button-outline:link,
a.button-outline:visited,
.button-outline,
a.button-ghost,
a.button-ghost:link,
a.button-ghost:visited,
.button-ghost {
    color: var(--site-color-text);
}
a.button:hover,
a.button:focus-visible,
a.button:active {
    text-decoration: none;
}

/* v0.8.3.6 patch: explicit accent-button contrast lock.
   Button-style links belong to the Button system, not the default text-link system. */
.button-accent,
a.button-accent,
a.button-accent:link,
a.button-accent:visited,
a.button-accent:hover,
a.button-accent:focus,
a.button-accent:focus-visible,
a.button-accent:active {
    background: var(--site-color-accent);
    color: var(--site-color-background) !important;
    border-color: var(--site-color-accent);
    text-decoration: none;
}
.button-accent:hover,
a.button-accent:hover,
.button-accent:focus-visible,
a.button-accent:focus-visible {
    color: var(--site-color-background) !important;
}