/*
 * WFP Forum — the button system (front end).
 *
 * The only stylesheet that draws buttons. Every value comes from the
 * --wfp-btn-* custom properties printed ahead of this file from
 * WFP_Forum_Buttons::tokens() (includes/class-buttons.php); change a value
 * there and every button follows.
 *
 *   Filled ....... accent background, black (or white, by contrast) text; lighter on hover
 *   Outline ...... transparent, outlined; outline and text turn light on hover
 *   Text ......... no box; text turns light on hover
 *   Danger ....... red filled / outlined, same behavior
 *   Disabled ..... dimmed, and never reacts to hover
 *
 * Forum pages set --g-accent / --g-on-accent / --g-accent-hover per group or
 * book (see WFP_Forum_Groups::accent*), so a book's buttons follow the same rules.
 * Everything outside the forum (Kadence, forms, Ultimate Member, MailerLite)
 * gets the same values in the last two sections.
 */

/* ── 1. One transition for every button ─────────────────────────────── */
/* Beats the !important transition that Spectra puts on all buttons. */

html body :is(.wfp-btn, .wfp-text-btn, .wfp-sort-pill, .wfp-submit-btn, .kb-button, .wp-block-button__link, .wp-element-button, a.button, .button,
              input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], .um-button, .um-modal-btn,
              .wfp-banner-btn, [id^="read-btn-"], #cc-add-btn, .cc-submit-btn, .feedback-submit) {
    transition: var(--wfp-btn-transition) !important;
}

/* ── 2. Forum buttons ───────────────────────────────────────────────── */

.wfp-forum .wfp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--wfp-btn-h); padding: var(--wfp-btn-pad);
    border: 1px solid var(--g-accent); border-radius: var(--wfp-btn-radius);
    background: var(--g-accent); color: var(--g-on-accent) !important;
    font-family: var(--wfp-btn-font); font-size: var(--wfp-btn-size); font-weight: var(--wfp-btn-weight);
    letter-spacing: var(--wfp-btn-tracking); text-transform: var(--wfp-btn-transform); line-height: var(--wfp-btn-line);
    text-decoration: none; cursor: pointer;
}
.wfp-forum .wfp-btn[hidden] { display: none; }
.wfp-forum .wfp-btn:hover:not(:disabled):not([aria-disabled="true"]):not(.is-busy) {
    background: var(--g-accent-hover); border-color: var(--g-accent-hover);
}
.wfp-forum .wfp-btn .wfp-icon { width: 16px; height: 16px; margin-left: -4px; }

/* Sizes */
.wfp-forum .wfp-btn-sm { min-height: var(--wfp-btn-h-sm); padding: var(--wfp-btn-pad-sm); font-size: var(--wfp-btn-size-sm); }
.wfp-forum .wfp-btn-lg,
.wfp-auth-actions .wfp-btn, .wfp-join-nav .wfp-btn, .wfp-join-done-actions .wfp-btn { min-height: var(--wfp-btn-h-lg); padding: var(--wfp-btn-pad-lg); }
.wfp-empty .wfp-btn { margin-top: 28px; }

/* Outline */
.wfp-forum .wfp-btn-ghost { background: transparent; border-color: var(--wfp-btn-outline); color: var(--wfp-btn-outline-text) !important; }
.wfp-forum .wfp-btn-ghost:hover:not(:disabled):not([aria-disabled="true"]):not(.is-busy) {
    background: transparent; border-color: var(--g-accent-hover); color: var(--g-accent-hover) !important;
}
.wfp-forum .wfp-btn-ghost .wfp-icon { width: 15px; height: 15px; margin: -1px 0 0 -4px; }

/* Danger */
.wfp-forum .wfp-btn-danger { background: var(--wfp-btn-danger-bg); border-color: var(--wfp-btn-danger-bg); color: var(--wfp-btn-danger-text) !important; }
.wfp-forum .wfp-btn-danger:hover:not(:disabled):not([aria-disabled="true"]):not(.is-busy) { background: var(--wfp-btn-danger-hover); border-color: var(--wfp-btn-danger-hover); }
.wfp-forum .wfp-btn-danger-ghost { background: transparent; border-color: var(--wfp-btn-danger-outline); color: var(--wfp-btn-danger-outline-text) !important; }
.wfp-forum .wfp-btn-danger-ghost:hover:not(:disabled):not([aria-disabled="true"]):not(.is-busy) {
    background: transparent; border-color: var(--wfp-btn-danger-outline-hover); color: var(--wfp-btn-danger-outline-hover) !important;
}

/* States: dimmed buttons ignore hover completely */
.wfp-forum .wfp-btn:disabled, .wfp-forum .wfp-btn[aria-disabled="true"] { opacity: var(--wfp-btn-disabled-opacity); cursor: default; }
.wfp-forum .wfp-btn.is-busy { opacity: .6; cursor: progress; }

/* A file picker drawn as a button */
.wfp-photo-actions label.wfp-btn { cursor: pointer; }
.wfp-photo-actions label.wfp-btn:focus-within { outline: 2px solid var(--f-label); outline-offset: 3px; }

/* Text buttons */
.wfp-forum .wfp-text-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer;
    font-family: var(--wfp-btn-font); font-size: var(--wfp-btn-size); font-weight: var(--wfp-btn-weight);
    letter-spacing: var(--wfp-btn-tracking); text-transform: var(--wfp-btn-transform);
    color: var(--f-text);
}
.wfp-forum .wfp-text-btn:hover:not(:disabled) { background: none; color: var(--g-accent-hover); }
.wfp-forum .wfp-text-btn .wfp-icon { width: 15px; height: 15px; }
.wfp-forum .wfp-text-btn-quiet { font-weight: 400; letter-spacing: .04em; text-transform: none; font-size: 14px; color: var(--f-muted); }
.wfp-forum .wfp-text-btn-quiet:hover:not(:disabled) { color: var(--f-text); }
/* Already light blue: the lift is to white */
.wfp-join-card .wfp-text-btn, .wfp-acct-part-head .wfp-text-btn { color: var(--f-label); }
.wfp-join-card .wfp-text-btn:hover:not(:disabled), .wfp-acct-part-head .wfp-text-btn:hover:not(:disabled) { color: var(--f-text); }

/* Sort and filter pills: outline buttons that can be "on" */
.wfp-forum .wfp-sort-pill {
    display: inline-flex; align-items: center; min-height: 38px; padding: 6px 18px;
    border: 1px solid var(--wfp-btn-outline); border-radius: var(--wfp-btn-radius);
    font-size: 15px; color: var(--wfp-btn-outline-text);
}
.wfp-forum .wfp-sort-pill:hover { border-color: var(--g-accent-hover); color: var(--g-accent-hover); }
.wfp-forum .wfp-sort-pill[aria-current], .wfp-forum .wfp-sort-pill[aria-current]:hover { background: #FFFFFF; border-color: #FFFFFF; color: #000; }

/* ── 3. Buttons from other plugins and the theme ────────────────────── */

/* Kadence's global button colors (buttons, button blocks, WooCommerce) read these. */
body {
    --global-palette-btn-bg: var(--wfp-btn-bg);
    --global-palette-btn-bg-hover: var(--wfp-btn-bg-hover);
    --global-palette-btn: var(--wfp-btn-text);
    --global-palette-btn-hover: var(--wfp-btn-text);
}

/* Ultimate Member and the file-upload button inside it. These win over the
   older white-text rules in Additional CSS (same selectors, one more "html body"). */
html body .um .um-button,
html body .um a.um-button,
html body .um input[type="submit"].um-button,
html body .um-modal-footer .um-modal-btn,
html body .ajax-upload-dragdrop .upload,
html body .um-field-area a.um-button.um-btn-auto-width,
html body #um-submit-btn {
    background-color: var(--wfp-btn-bg) !important; border-color: var(--wfp-btn-bg) !important; color: var(--wfp-btn-text) !important;
}
html body .um .um-button:hover,
html body .um a.um-button:hover,
html body .um input[type="submit"].um-button:hover,
html body .um-modal-footer .um-modal-btn:hover,
html body .ajax-upload-dragdrop .upload:hover,
html body .um-field-area a.um-button.um-btn-auto-width:hover,
html body #um-submit-btn:hover,
html body #um_account_submit_general:hover,
html body #um_account_submit_password:hover {
    background-color: var(--wfp-btn-bg-hover) !important; border-color: var(--wfp-btn-bg-hover) !important; color: var(--wfp-btn-text) !important;
}

/* MailerLite sign-up form (/subscribe/). Its embed code sets white text and a darker hover. */
body #mlb2-27471996.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button,
body #mlb2-27471996.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button,
body #mlb2-27471996 .ml-mobileButton-horizontal button {
    background-color: var(--wfp-btn-bg) !important; border-color: var(--wfp-btn-bg) !important; color: var(--wfp-btn-text) !important;
    transition: var(--wfp-btn-transition) !important;
}
body #mlb2-27471996.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button:hover,
body #mlb2-27471996.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover,
body #mlb2-27471996 .ml-mobileButton-horizontal button:hover {
    background-color: var(--wfp-btn-bg-hover) !important; border-color: var(--wfp-btn-bg-hover) !important; color: var(--wfp-btn-text) !important;
}