/**
 * BIO FILAMENT — button colour corrections.
 *
 * Two homepage buttons are configured in the editor with
 * backgroundColor:"background" (#F6F8FD) — the same colour as the page body —
 * so they read as having no background at all. Their text colours then flip on
 * hover via the theme's global rule:
 *
 *   :root :where(.wp-element-button,.wp-block-button__link):hover{
 *      background-color: <green>; color: <near-white>; }
 *
 * The .has-*-color classes carry !important so the background survives, but the
 * text colour does not — giving white text on a near-white button.
 *
 * Fix: give these buttons a real surface and keep their own text colour on
 * hover. !important is required to beat the preset classes.
 */

/* A button whose background preset equals the page background is invisible.
   Give it a white surface with a hairline border so it reads as a button. */
.wp-block-button__link.has-background-background-color,
.wp-element-button.has-background-background-color {
    background-color: #FFFFFF !important;
    border: 1px solid #DEE7E3;
}

/* Keep each button's own text colour on hover instead of the theme's near-white. */
.wp-block-button__link.has-foreground-color:hover,
.wp-block-button__link.has-foreground-color:focus,
.wp-element-button.has-foreground-color:hover,
.wp-element-button.has-foreground-color:focus {
    color: var(--wp--preset--color--foreground) !important;
}

.wp-block-button__link.has-secondary-color:hover,
.wp-block-button__link.has-secondary-color:focus,
.wp-element-button.has-secondary-color:hover,
.wp-element-button.has-secondary-color:focus {
    color: var(--wp--preset--color--secondary) !important;
}

/* Hover state for those light buttons: tint the surface toward the brand
   green rather than swapping colours wholesale. */
.wp-block-button__link.has-background-background-color:hover,
.wp-block-button__link.has-background-background-color:focus,
.wp-element-button.has-background-background-color:hover,
.wp-element-button.has-background-background-color:focus {
    background-color: #EBF4EF !important;
    border-color: #1B6B47;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31, 41, 38, 0.12);
}

.wp-block-button__link,
.wp-element-button {
    transition: background-color .16s ease, color .16s ease,
                border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

/* Outline buttons (e.g. تعرف علينا on a dark hero) fill subtly on hover. */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
    background-color: rgba(255, 255, 255, 0.14) !important;
}