/**
 * buttons.css — button system.
 *
 * Single responsibility: button styling. Variants:
 *   .ice-btn                  base
 *   .ice-btn--gold            primary CTA (gold)
 *   .ice-btn--outline         outline
 *   .ice-btn--ghost           ghost (transparent over dark backgrounds)
 *   .ice-btn--sm              small
 *   .ice-btn--lg              large
 *   .ice-btn--block           full-width
 *
 * @package ICE_GeneratePress_Child
 * @since   1.0.0
 */

.ice-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--ice-spacing-2xs);
        padding: var(--ice-btn-pad-y) var(--ice-btn-pad-x);
        font-family: var(--ice-font-body);
        font-size: var(--ice-fs-base);
        font-weight: var(--ice-fw-semibold);
        line-height: 1;
        letter-spacing: var(--ice-ls-tight);
        border-radius: var(--ice-btn-radius);
        border: 2px solid transparent;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        transition: all var(--ice-btn-transition);
        -webkit-tap-highlight-color: transparent;
        user-select: none;
}

.ice-btn:hover {
        text-decoration: none;
}

.ice-btn:disabled,
.ice-btn[disabled] {
        opacity: 0.55;
        cursor: not-allowed;
        pointer-events: none;
}

/* ----- Variant: Gold (primary CTA) ----- */

.ice-btn--gold {
        background: var(--ice-accent);
        color: var(--ice-primary);
        border-color: var(--ice-accent);
        box-shadow: 0 2px 8px rgba(214, 181, 110, 0.3);
}

.ice-btn--gold:hover {
        background: var(--ice-accent-dark);
        border-color: var(--ice-accent-dark);
        color: var(--ice-primary);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(214, 181, 110, 0.45);
}

.ice-btn--gold:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(214, 181, 110, 0.3);
}

.ice-btn--gold svg {
        transition: transform var(--ice-t-base);
}

.ice-btn--gold:hover svg {
        transform: translateX(3px);
}

/* ----- Variant: Outline ----- */

.ice-btn--outline {
        background: transparent;
        color: var(--ice-title);
        border-color: var(--ice-border);
}

.ice-btn--outline:hover {
        background: var(--ice-primary);
        color: var(--ice-white);
        border-color: var(--ice-primary);
        transform: translateY(-1px);
}

.ice-btn--outline svg {
        transition: transform var(--ice-t-base);
}

.ice-btn--outline:hover svg {
        transform: translateX(3px);
}

/* ----- Variant: Ghost (for dark backgrounds) ----- */

.ice-btn--ghost {
        background: transparent;
        color: var(--ice-white);
        border-color: rgba(255, 255, 255, 0.4);
}

.ice-btn--ghost:hover {
        background: var(--ice-white);
        color: var(--ice-primary);
        border-color: var(--ice-white);
        transform: translateY(-1px);
}

/* ----- Variant: Primary (dark) ----- */

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

.ice-btn--primary:hover {
        background: #000;
        color: var(--ice-white);
        border-color: #000;
        transform: translateY(-1px);
}

/* ----- Sizes ----- */

.ice-btn--sm {
        padding: var(--ice-btn-pad-y-sm) var(--ice-btn-pad-x-sm);
        font-size: var(--ice-fs-sm);
}

.ice-btn--lg {
        padding: var(--ice-btn-pad-y-lg) var(--ice-btn-pad-x-lg);
        font-size: var(--ice-fs-md);
}

/* ----- Block (full-width) ----- */

.ice-btn--block {
        display: flex;
        width: 100%;
}

/* ----- Header CTA (slightly smaller) ----- */

.ice-header__actions .ice-btn--cta {
        padding: 10px 22px;
        font-size: var(--ice-fs-sm);
}

/* ----- WordPress button (classic editor / block editor) ----- */

.wp-block-button .wp-block-button__link,
.wp-block-button__link,
.entry-content .wp-block-button__link {
        font-family: var(--ice-font-body);
        font-weight: var(--ice-fw-semibold);
        padding: var(--ice-btn-pad-y-sm) var(--ice-btn-pad-x);
        border-radius: var(--ice-btn-radius);
        background: var(--ice-accent);
        color: var(--ice-primary);
        border: 0;
        text-decoration: none;
        transition: all var(--ice-btn-transition);
}

.entry-content .wp-block-button__link:hover {
        background: var(--ice-accent-dark);
        color: var(--ice-primary);
        transform: translateY(-1px);
}

.entry-content .is-style-outline .wp-block-button__link {
        background: transparent;
        color: var(--ice-title);
        border: 2px solid var(--ice-border);
}

.entry-content .is-style-outline .wp-block-button__link:hover {
        background: var(--ice-primary);
        color: var(--ice-white);
        border-color: var(--ice-primary);
}

/* Classic editor buttons (TinyMCE) */
.entry-content .btn,
.entry-content .button,
.entry-content a.button {
        display: inline-flex;
        align-items: center;
        gap: var(--ice-spacing-2xs);
        padding: var(--ice-btn-pad-y) var(--ice-btn-pad-x);
        font-family: var(--ice-font-body);
        font-size: var(--ice-fs-base);
        font-weight: var(--ice-fw-semibold);
        border-radius: var(--ice-btn-radius);
        background: var(--ice-accent);
        color: var(--ice-primary);
        text-decoration: none;
        transition: all var(--ice-btn-transition);
}

.entry-content .btn:hover,
.entry-content .button:hover,
.entry-content a.button:hover {
        background: var(--ice-accent-dark);
        color: var(--ice-primary);
        text-decoration: none;
        transform: translateY(-1px);
}