/* =============================================================================
   BUTTON COMPONENTS — lib/styles/components/buttons.css
   Covers: PrimaryButton, SecondaryButton, TertiaryButton
   Spec: JusticeMatters Brand Guidelines
   ============================================================================= */

/* Base Button Reset shared across all buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 12px 24px;
    min-height: 48px;
    /* Touch target minimum */
    border: none;
    border-radius: var(--radius-sm);
    /* 4px radius */
    font-family: var(--font-body);
    font-size: var(--fs-button);
    font-weight: var(--fw-semibold);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    /* Uses fast transition (150ms) for responsive state feedback */
    transition: background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
    user-select: none;
}

/* =============================================================================
   PRIMARY BUTTON
   Block: .primary-button
   ============================================================================= */

.primary-button {
    background-color: var(--color-justice-blue);
    color: var(--color-white);
    box-shadow: var(--shadow-card);
    transform: translateY(0);
    text-decoration: none;
    /* Prevents global link underline */
}

.primary-button:hover:not(:disabled):not(.primary-button--disabled) {
    background-color: #152a45;
    /* Darkened Justice Blue */
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
    /* Subtle hover lift */
    color: var(--color-white);
    /* Overrides global a:hover color */
    text-decoration: none;
}

.primary-button:active:not(:disabled):not(.primary-button--disabled) {
    background-color: #0d1a2b;
    /* Further darkened */
    box-shadow: var(--shadow-card);
    transform: translateY(1px);
    /* Active press feedback */
    color: var(--color-white);
    text-decoration: none;
}

.primary-button:focus-visible {
    outline: var(--focus-outline);
    /* Guidance Teal */
    outline-offset: var(--focus-offset);
}

/* Modifier: Full Width */
.primary-button--full-width {
    width: 100%;
}

/* Modifier: Disabled */
.primary-button--disabled,
.primary-button:disabled {
    background-color: var(--color-mid-grey);
    color: var(--color-paper-white);
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: translateY(0);
}

/* Modifier: Loading */
.primary-button--loading {
    cursor: wait;
    opacity: 0.9;
}

.primary-button--loading:hover {
    background-color: var(--color-justice-blue);
    box-shadow: var(--shadow-card);
    transform: translateY(0);
    color: var(--color-white);
    text-decoration: none;
}

/* Elements: Icons and Labels */
.primary-button__icon {
    font-size: 14px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.primary-button__icon--leading {
    margin-right: 4px;
}

.primary-button__icon--trailing {
    margin-left: 4px;
}

.primary-button:hover .primary-button__icon--trailing {
    transform: translateX(4px);
}

.primary-button__label--loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

/* =============================================================================
   SECONDARY BUTTON
   Block: .secondary-button
   ============================================================================= */

.secondary-button {
    background-color: transparent;
    color: var(--color-guidance-teal);
    border: 2px solid var(--color-guidance-teal);
    transform: translateY(0);
    text-decoration: none;
}

.secondary-button:hover:not(:disabled):not(.secondary-button--disabled) {
    background-color: rgba(29, 118, 112, 0.05);
    /* Extremely subtle wash to avoid strong fill */
    border-color: var(--color-justice-blue);
    /* Animated border emphasis */
    color: var(--color-justice-blue);
    /* Animated text emphasis / overrides global a:hover */
    text-decoration: none;
}

.secondary-button:active:not(:disabled):not(.secondary-button--disabled) {
    background-color: rgba(29, 118, 112, 0.1);
    transform: translateY(1px);
    /* Solid press feedback */
    color: var(--color-justice-blue);
    text-decoration: none;
}

.secondary-button:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

/* Modifier: Full Width */
.secondary-button--full-width {
    width: 100%;
}

/* Modifier: Disabled */
.secondary-button--disabled,
.secondary-button:disabled {
    border-color: var(--color-mid-grey);
    color: var(--color-mid-grey);
    background-color: transparent;
    opacity: 0.6;
    cursor: not-allowed;
    transform: translateY(0);
}

/* Modifier: Loading */
.secondary-button--loading {
    cursor: wait;
    opacity: 0.9;
}

.secondary-button--loading:hover {
    background-color: transparent;
    transform: translateY(0);
    color: var(--color-guidance-teal);
    text-decoration: none;
}

/* Elements: Icons and Labels */
.secondary-button__icon {
    font-size: 14px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.secondary-button__icon--leading {
    margin-right: 4px;
}

.secondary-button__icon--trailing {
    margin-left: 4px;
}

.secondary-button:hover .secondary-button__icon--trailing {
    transform: translateX(4px);
}

.secondary-button__label--loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

/* =============================================================================
   TERTIARY BUTTON
   Block: .tertiary-button
   ============================================================================= */

.tertiary-button {
    background-color: transparent;
    color: var(--color-justice-blue);
    border: 2px solid transparent;
    text-decoration: none;
    text-underline-offset: 4px;
    box-shadow: none;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    transform: translateY(0);
}

.tertiary-button:hover:not(:disabled):not(.tertiary-button--disabled) {
    background-color: transparent;
    color: var(--color-guidance-teal);
    /* Subtle text color shift overrides global a:hover */
    text-decoration: underline;
    text-decoration-color: var(--color-guidance-teal);
    box-shadow: none;
    /* No transform applied to maintain minimal, editorial movement */
}

.tertiary-button:active:not(:disabled):not(.tertiary-button--disabled) {
    background-color: transparent;
    color: var(--color-justice-blue);
    /* No transform applied to maintain minimal, editorial movement */
}

.tertiary-button:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

/* Modifier: Full Width */
.tertiary-button--full-width {
    width: 100%;
}

/* Modifier: Disabled */
.tertiary-button--disabled,
.tertiary-button:disabled {
    color: var(--color-mid-grey);
    background-color: transparent;
    opacity: 0.6;
    cursor: not-allowed;
    text-decoration: none;
    transform: translateY(0);
}

/* Modifier: Loading */
.tertiary-button--loading {
    cursor: wait;
    opacity: 0.9;
    color: var(--color-justice-blue);
}

.tertiary-button--loading:hover {
    text-decoration: none;
    color: var(--color-justice-blue);
}

/* Elements: Icons and Labels */
.tertiary-button__icon {
    font-size: 14px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.tertiary-button__icon--leading {
    margin-right: 4px;
}

.tertiary-button__icon--trailing {
    margin-left: 4px;
}

/* Disabled hover animation on tertiary icons to avoid making the button feel promotional */
.tertiary-button:hover .tertiary-button__icon--trailing {
    transform: none;
}

.tertiary-button__label--loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}