/* Button Component System */

/* Normalize button elements to match anchor-based .btn sizing */
button.btn {
    line-height: var(--btn-line-height);
    vertical-align: middle;
}

/* Base Button - Default size for main CTAs */
.btn {
    --btn-padding-y: 0.625rem; /* 10px - 1.5x height increase for prominence */
    --btn-padding-x: var(--spacing-4);
    --btn-font-size: var(--font-size-base);
    --btn-font-family: var(--font-family-headings); /* Default: Satoshi font for primary buttons */
    --btn-font-weight: var(--font-weight-bold); /* 700 - bold for main CTAs */
    --btn-line-height: var(--line-height-base);
    --btn-border-radius: var(--radius-base);
    --btn-border-width: var(--border-width-1);

    /* Disabled state custom properties - variants can override */
    --btn-disabled-bg: var(--color-gray-100);
    --btn-disabled-border: var(--color-gray-300);
    --btn-disabled-color: var(--color-gray-600);

    display: inline-block;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    margin-bottom: 0;
    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: var(--btn-border-width) solid transparent;
    border-radius: var(--btn-border-radius);
    white-space: nowrap;
    user-select: none;
}

.btn:focus,
.btn:hover {
    text-decoration: none;
    outline: 0;
}

.btn:active,
.btn.active {
    background-image: none;
    outline: 0;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Keep for active button press feedback */
}

/* Enhanced Disabled State - Diagonal stripe pattern */
.btn.disabled,
.btn:disabled {
    cursor: not-allowed;
    background-color: var(--btn-disabled-bg);
    border-color: var(--btn-disabled-border);
    color: var(--btn-disabled-color);
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

/* Diagonal stripe pattern overlay for disabled buttons */
.btn.disabled::before,
.btn:disabled::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(0, 0, 0, 0.03) 4px,
        rgba(0, 0, 0, 0.03) 8px
    );
    pointer-events: none;
    z-index: 1; /* Ensure pattern renders above background but below text */
}

/* Ensure button text renders above pattern */
.btn.disabled > *,
.btn:disabled > * {
    position: relative;
    z-index: 2;
}


/* Button Variants */
.btn-primary {
    color: var(--color-white);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-primary:focus,
.btn-primary:hover {
    color: var(--color-white);
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.btn-primary:active,
.btn-primary.active {
    color: var(--color-white);
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.btn-secondary {
    --btn-font-family: var(--font-family-base); /* Inter font for secondary buttons */
    color: var(--color-text-secondary);
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-400);
}

.btn-secondary:focus,
.btn-secondary:hover {
    color: var(--color-text-secondary);
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-500);
}

.btn-secondary:active,
.btn-secondary.active {
    color: var(--color-text-secondary);
    background-color: var(--color-gray-300);
    border-color: var(--color-gray-600);
}

.btn-danger {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-danger:focus,
.btn-danger:hover {
    color: var(--color-white);
    background-color: var(--color-danger-dark);
    border-color: var(--color-danger-dark);
}

/* Danger Outline Button - Danger-colored text/border at rest, filled on hover */
.btn-danger-outline {
    --btn-font-family: var(--font-family-base);
    --btn-disabled-bg: transparent;

    color: var(--color-danger);
    background-color: transparent;
    border-color: var(--color-danger);
}

.btn-danger-outline:focus,
.btn-danger-outline:hover {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-danger-outline:active,
.btn-danger-outline.active {
    color: var(--color-white);
    background-color: var(--color-danger-dark);
    border-color: var(--color-danger-dark);
}

/* Herald Button - Maximum prominence with multi-line layout for "Become The Herald" CTA */
.btn-herald {
    /* Inherit hero button sizing and styling */
    --btn-padding-y: 0.875rem;  /* 14px - 40% larger than primary */
    --btn-padding-x: var(--spacing-6);  /* 24px - wider for visual weight */
    --btn-font-size: var(--font-size-lg);  /* 1.125rem (18px) */
    --btn-font-family: var(--font-family-headings);  /* Satoshi/Poppins */
    --btn-font-weight: var(--font-weight-bold);  /* 700 */

    /* Colors - use accent for consistency */
    color: var(--color-white);
    background-color: var(--color-accent);
    border-color: var(--color-accent);

    /* Enhanced shadow for depth */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    /* Multi-line layout */
    white-space: normal; /* Allow wrapping */
    line-height: 1.4; /* Tighter line height for multi-line */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-1); /* 4px gap between lines */
}

.btn-herald:hover,
.btn-herald:focus {
    color: var(--color-white);
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-herald:active,
.btn-herald.active {
    color: var(--color-white);
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

/* Herald button subtitle - secondary benefit text below primary CTA */
.btn-herald-subtitle {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    opacity: 0.9;
    line-height: 1.3;
}

/* Tertiary Button - Standard size with outline styling */
.btn-tertiary {
    /* Standard sizing (same as primary/secondary) */
    --btn-padding-y: 0.625rem;  /* 10px - matches base */
    --btn-padding-x: var(--spacing-4);  /* 16px - matches base */
    --btn-font-size: var(--font-size-base);  /* 1rem (16px) */
    --btn-font-family: var(--font-family-base);  /* Inter - body font */
    --btn-font-weight: var(--font-weight-bold);  /* 700 - bold like other buttons */
    --btn-border-radius: var(--radius-base);
    --btn-border-width: var(--border-width-1);

    /* Override disabled background for outline style */
    --btn-disabled-bg: transparent;

    /* Outline style - minimal visual weight */
    color: var(--color-accent);
    background-color: transparent;
    border-color: var(--color-accent);
}

.btn-tertiary:hover,
.btn-tertiary:focus {
    color: var(--color-accent-dark);
    background-color: var(--color-accent-light);
    border-color: var(--color-accent);
}

.btn-tertiary:active,
.btn-tertiary.active {
    color: var(--color-white);
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

/* ==========================================================================
   Consolidated Disabled Hover/Focus Override
   ========================================================================== */

/**
 * Prevents hover/focus effects on disabled buttons across all variants.
 * Uses custom properties so variants (like tertiary) can override specific values.
 * Source order after variants ensures this overrides variant hover states.
 */
.btn.disabled:hover, .btn.disabled:focus,
.btn:disabled:hover, .btn:disabled:focus {
    background-color: var(--btn-disabled-bg);
    border-color: var(--btn-disabled-border);
    color: var(--btn-disabled-color);
    cursor: not-allowed;
    box-shadow: none;
}

/* ==========================================================================
   Button Specificity Anchors
   ========================================================================== */

/**
 * Specificity boosters for button-styled links
 *
 * Problem: Contextual selectors (e.g., `.navbar .nav-link`, `.sidebar a`)
 * override base button classes when buttons are implemented as <a> tags.
 *
 * Solution: Use attribute selectors to increase specificity without !important.
 * This ensures button styles always take precedence over contextual link styles.
 *
 * Specificity calculation:
 * - `.btn-primary` = 0,1,0 (loses to `.navbar .nav-link` = 0,2,0)
 * - `a.btn-primary[class*="btn"]` = 0,2,1 (wins)
 *
 * Technical note: We use CSS custom properties (var(--btn-*)) instead of
 * `inherit` because custom properties inherit through the CSS cascade
 * (same element's class hierarchy), not DOM hierarchy (parent elements).
 */

/* Base button anchor reset */
a.btn[class*="btn"] {
    /* Typography - use CSS custom properties from .btn */
    color: inherit; /* Inherit from .btn-* variant color */
    text-decoration: none;
    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);

    /* Box model */
    display: inline-block;
    padding: var(--btn-padding-y) var(--btn-padding-x);

    /* Borders */
    border: var(--btn-border-width) solid transparent;
    border-radius: var(--btn-border-radius);

    /* Background */
    background-color: inherit; /* Inherit from .btn-* variant */

    /* Interaction */
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

/* Primary button anchor specificity */
a.btn-primary[class*="btn"] {
    color: var(--color-white);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

a.btn-primary[class*="btn"]:hover,
a.btn-primary[class*="btn"]:focus {
    color: var(--color-white);
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    text-decoration: none;
}

a.btn-primary[class*="btn"]:active,
a.btn-primary[class*="btn"].active {
    color: var(--color-white);
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

/* Tertiary button anchor specificity */
a.btn-tertiary[class*="btn"] {
    color: var(--color-accent);
    background-color: transparent;
    border-color: var(--color-accent);
}

a.btn-tertiary[class*="btn"]:hover,
a.btn-tertiary[class*="btn"]:focus {
    color: var(--color-accent-dark);
    background-color: var(--color-accent-light);
    border-color: var(--color-accent);
    text-decoration: none;
}

a.btn-tertiary[class*="btn"]:active,
a.btn-tertiary[class*="btn"].active {
    color: var(--color-white);
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

/* Secondary button anchor specificity */
a.btn-secondary[class*="btn"] {
    color: var(--color-text-secondary);
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-400);
}

a.btn-secondary[class*="btn"]:hover,
a.btn-secondary[class*="btn"]:focus {
    color: var(--color-text-secondary);
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-500);
    text-decoration: none;
}

a.btn-secondary[class*="btn"]:active,
a.btn-secondary[class*="btn"].active {
    color: var(--color-text-secondary);
    background-color: var(--color-gray-300);
    border-color: var(--color-gray-600);
}

/* Danger button anchor specificity */
a.btn-danger[class*="btn"] {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

a.btn-danger[class*="btn"]:hover,
a.btn-danger[class*="btn"]:focus {
    color: var(--color-white);
    background-color: var(--color-danger-dark);
    border-color: var(--color-danger-dark);
    text-decoration: none;
}

/* Danger outline button anchor specificity */
a.btn-danger-outline[class*="btn"] {
    color: var(--color-danger);
    background-color: transparent;
    border-color: var(--color-danger);
}

a.btn-danger-outline[class*="btn"]:hover,
a.btn-danger-outline[class*="btn"]:focus {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    text-decoration: none;
}

a.btn-danger-outline[class*="btn"]:active,
a.btn-danger-outline[class*="btn"].active {
    color: var(--color-white);
    background-color: var(--color-danger-dark);
    border-color: var(--color-danger-dark);
}

/* Herald button anchor specificity */
a.btn-herald[class*="btn"] {
    color: var(--color-white);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    display: inline-flex;
    white-space: normal;
}

a.btn-herald[class*="btn"]:hover,
a.btn-herald[class*="btn"]:focus {
    color: var(--color-white);
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    text-decoration: none;
}

a.btn-herald[class*="btn"]:active,
a.btn-herald[class*="btn"].active {
    color: var(--color-white);
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

/* Size variants - use CSS custom properties from .btn-sm */
a.btn-sm[class*="btn"] {
    /* .btn-sm overrides these custom properties */
    font-size: var(--btn-font-size);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    line-height: var(--btn-line-height);
    border-radius: var(--btn-border-radius);
}

/* Disabled state for button links */
a.btn[class*="btn"][aria-disabled="true"],
a.btn[class*="btn"].disabled {
    color: var(--btn-disabled-color);
    background-color: var(--btn-disabled-bg);
    border-color: var(--btn-disabled-border);
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Button Sizes */
.btn-sm {
    --btn-padding-y: var(--spacing-1);
    --btn-padding-x: var(--spacing-2);
    --btn-font-size: var(--font-size-sm);
    --btn-font-family: var(--font-family-base); /* Inter font for small buttons (secondary actions) */
    --btn-font-weight: var(--font-weight-normal); /* Override bold from .btn base */
    --btn-border-radius: var(--radius-sm);
}

/* Button Groups */
.btn-group {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.btn-group > .btn {
    position: relative;
    flex: 1 1 auto;
}

.btn-group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Herald button price line - matches CTA size (1rem) */
.btn-herald-price {
    font-size: var(--font-size-base); /* 1rem - equal weight with CTA */
}

/* Ensure animated gradient text inherits proper sizing */
.btn-herald .eth-address-aurora-light {
    font-size: inherit;
}

/* ==========================================================================
   Button Processing State - Functional UX Enhancement
   ========================================================================== */

/**
 * Processing state for buttons during async operations
 * Used during wallet connection/authentication to show progress
 * Functional UX enhancement: Provides clear feedback that system is working
 */
.btn-processing {
    cursor: wait;  /* Indicate waiting state */
}

/* Ensure processing+disabled prevents all interaction */
.btn-processing.disabled,
a.btn-processing[class*="btn"].disabled {
    pointer-events: none;
}

/* Prevent opacity stacking on tertiary buttons */
.btn-tertiary.btn-processing {
    opacity: 1;  /* Tertiary buttons are already subtle */
}

.btn-tertiary.btn-processing.disabled,
a.btn-tertiary[class*="btn"].btn-processing.disabled {
    opacity: 0.6;  /* Match standard disabled opacity */
}

/* ==========================================================================
   ARIA Live Region - Screen Reader Only
   ========================================================================== */

/**
 * Hide visually but keep accessible to screen readers
 * Used for announcing button state changes and other dynamic content
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}