/*
 * Global button system.
 * __btn owns structure, typography and interaction.
 * _btn__<color> modifiers own visual variants.
 * _btn__<width> modifiers own optional width behavior.
 */
.__btn {
    display: inline-flex;
   
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.__btn:focus-visible {
    outline: 3px solid var(--link-normal);
    outline-offset: 3px;
}

.__btn[disabled],
.__btn[aria-disabled="true"] {
    cursor: default;
}

/* Soft blue: secondary navigation and category controls. */
._btn__light-blue {
    border-color: #e1eafd;
    background: #e1eafd;
    color: #2251cc;
}

._btn__light-blue:hover:not([disabled]):not([aria-disabled="true"]) {
    border-color: #2251cc;
    background: #2251cc;
    color: #fff;
}

/* Neutral: disabled and low-priority controls. */
._btn__light-grey {
    border-color: #e4e8ef;
    background: #fafbfc;
    color: #667085;
}

._btn__light-grey:hover:not([disabled]):not([aria-disabled="true"]) {
    border-color: #d5dae3;
    background: #f1f3f6;
    color: #344054;
}

/* Brand accent. */
._btn__orange {
    border-color: var(--accent-normal);
    background: var(--accent-normal);
    color: #fff;
}

._btn__orange:hover:not([disabled]):not([aria-disabled="true"]) {
    border-color: var(--accent-dark);
    background: var(--accent-dark);
    color: #fff;
}

/* Strong but restrained CTA, used for blog-home actions and dark form controls. */
._btn__dark-blue {
    border-color: #294d87;
    background: #294d87;
    color: #fff;
}

._btn__dark-blue:hover:not([disabled]):not([aria-disabled="true"]) {
    border-color: #203e70;
    background: #203e70;
    color: #fff;
}


/* Soft orange: very light warm CTA for the blog home. */
._btn__soft-orange {
    border-color: #f1c6b5;
    background: #fff3ec;
    color: #b84b29;
}

._btn__soft-orange:hover:not([disabled]):not([aria-disabled="true"]) {
    border-color: #e9b49f;
    background: #ffe8dc;
    color: #9f3f22;
}

/* Soft blue: very light cool CTA paired with the warm action above. */
._btn__soft-blue {
    border-color: #d4dde8;
    background: #f2f6fb;
    color: #315a84;
}

._btn__soft-blue:hover:not([disabled]):not([aria-disabled="true"]) {
    border-color: #c3d0df;
    background: #e8f0f8;
    color: #274b70;
}

/* Optional width modifiers. */
._btn__auto { width: auto; }
._btn__full { width: 100%; }
._btn__fit {
    width: fit-content;
    max-width: 100%;
}

/* Context-only spacing; visuals still come from __btn + modifiers. */
.site__read_more { margin-top: 20px; }

/* Standard form/button contexts that need a slightly taller control. */
.site__search_submit,
.site__comments .submit {
    min-height: 46px;
    padding-inline: 17px;
}

/* Ordinary text links. Apply explicitly; no button dimensions or fill. */
.site_link__text {
    color: #2251cc;
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .16em;
    transition: color .18s ease;
}
.site_link__text:hover { color: #173a99; }
.site_link__text:focus-visible {
    outline: 3px solid var(--link-normal);
    outline-offset: 3px;
}