/**
 * EAAS Theme - Button Styles
 *
 * Tous les boutons utilisent les variables CSS :root réassignées
 * dans chaque media query par output.php.
 * Aucune valeur hardcodée — tout est piloté par le Customizer.
 *
 * @package    EAAS
 * @version    2.5
 * @author     Rodolphe
 * @link       https://enaccordavecsoi.fr
 * @file       buttons.css
 */

/* ── BLOCK BUTTON WRAPPER (standalone, no wp-block-library needed) ── */
.wp-block-button {
    display: block;
    margin-bottom: 1em;
}

.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.wp-block-buttons.is-vertical {
    flex-direction: column;
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid var(--btn-primary-bg, var(--secondary-color, #4a90e2));
    color: var(--btn-primary-bg, var(--secondary-color, #4a90e2));
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--btn-primary-bg, var(--secondary-color, #4a90e2));
    color: var(--btn-primary-text, #ffffff);
}

/* ── BASE ── */
.btn,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
    display: inline-block;
    padding: var(--btn-padding-v, 14px) var(--btn-padding-h, 32px);
    background: var(--btn-primary-bg, var(--secondary-color, #4a90e2));
    color: var(--btn-primary-text, #ffffff);
    border: none;
    border-radius: var(--btn-border-radius, 8px);
    font-size: var(--font-size-base, 16px);
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

/* ── VARIANTE SECONDAIRE ── */
.btn-secondary {
    background: var(--btn-secondary-bg, transparent);
    color: var(--btn-secondary-text, var(--text-color, #2c3e50));
    border: 1px solid var(--btn-secondary-border, var(--muted-border, #e0e0e0));
    box-shadow: none;
}

.btn-secondary:hover {
    border-color: var(--secondary-color, #4a90e2);
    color: var(--secondary-color, #4a90e2);
    background: var(--btn-secondary-bg, transparent);
    transform: translateY(var(--hover-lift, -3px));
    box-shadow: var(--shadow-md);
}

/* ── VARIANTE OUTLINE ── */
.btn-outline {
    background: transparent;
    border: 1px solid var(--btn-primary-bg, var(--secondary-color, #4a90e2));
    color: var(--btn-primary-bg, var(--secondary-color, #4a90e2));
    box-shadow: none;
}

.btn-outline:hover {
    background: var(--btn-primary-bg, var(--secondary-color, #4a90e2));
    color: var(--btn-primary-text, #ffffff);
    transform: translateY(var(--hover-lift, -3px));
    box-shadow: var(--shadow-md);
}

/* ── HOVER : EFFET LIFT (défaut) ── */
.btn:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    transform: translateY(var(--btn-hover-lift, -3px));
    box-shadow: var(--shadow-md);
    color: var(--btn-primary-text, #ffffff);
    filter: brightness(1.1);
}

/* ── EFFETS AU SURVOL (variantes) ── */
.btn-hover-none:hover,
.btn-hover-none.btn:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    filter: brightness(1.08);
}

.btn-hover-grow:hover,
.btn-hover-grow.btn:hover {
    transform: scale(1.05);
}

.btn-hover-glow:hover,
.btn-hover-glow.btn:hover {
    transform: none;
    box-shadow: 0 0 20px rgba(var(--secondary-color-rgb, 74, 144, 226), 0.4);
}

.btn-hover-fill:hover,
.btn-hover-fill.btn:hover {
    transform: none;
    filter: brightness(0.92);
}

/* ── FOCUS VISIBLE (accessibilité) ── */
.btn:focus-visible,
.wp-block-button__link:focus-visible,
input[type="submit"]:focus-visible,
button[type="submit"]:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-outline-color, #4a90e2);
    outline-offset: var(--focus-outline-offset, 2px);
}

/* ── RESPONSIVE ── */

/* Tablet Portrait (max 991px) */
@media screen and (max-width: 991px) {
    .btn,
    .wp-block-button__link,
    input[type="submit"],
    button[type="submit"] {
        padding: var(--btn-padding-v-tablet, 12px) var(--btn-padding-h-tablet, 24px);
    }
}

/* Mobile (max 767px) */
@media screen and (max-width: 767px) {
    .btn,
    .wp-block-button__link,
    input[type="submit"],
    button[type="submit"] {
        padding: var(--btn-padding-v-mobile, 12px) var(--btn-padding-h-mobile, 24px);
        font-size: var(--font-size-base-mobile, 15px);
        min-height: 44px;
    }
}

/* Small Mobile (max 480px) */
@media screen and (max-width: 480px) {
    .btn,
    .wp-block-button__link,
    input[type="submit"],
    button[type="submit"] {
        padding: 10px 20px;
        font-size: 14px;
        border-radius: var(--btn-border-radius-mobile, 6px);
    }
}

/* Very Small Mobile (max 360px) */
@media screen and (max-width: 360px) {
    .btn,
    .wp-block-button__link,
    input[type="submit"],
    button[type="submit"] {
        padding: 8px 16px;
        font-size: 13px;
        width: 100%;
    }
}