/*
 * Hello Elementor reset rules that loaded after the theme CSS in the former setup.
 * They won ties against equal-specificity rules loaded earlier (e.g. my-account.css "h2 { margin-bottom: 20px }",
 * WordPress ":root :where(.wp-element-button) { border-width: 0 }"), so they are enqueued after all theme
 * styles, unlayered, keeping the original selector specificity (the :where() scope adds none).
 * The Elementor kit button colors (theme.css, .brx-body button) still win as before.
 *
 * Scoped to markup that is not built from Bricks elements: shortcode output, rich text and the theme's custom elements.
 */
:where(.brxe-shortcode, .brxe-text, [class*="brxe-np-"]) :is(h1, h2, h3, h4, h5, h6) {
    margin-block: 8px 16px;
}

:where(.brxe-shortcode, .brxe-text, [class*="brxe-np-"]) [type=button],
:where(.brxe-shortcode, .brxe-text, [class*="brxe-np-"]) [type=submit],
:where(.brxe-shortcode, .brxe-text, [class*="brxe-np-"]) button {
    background-color: transparent;
    border: 1px solid #c36;
    border-radius: 3px;
    color: #c36;
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    padding: 0.5rem 1rem;
    text-align: center;
    transition: all 0.3s;
    user-select: none;
    white-space: nowrap;
}

:where(.brxe-shortcode, .brxe-text, [class*="brxe-np-"]) [type=button]:focus,
:where(.brxe-shortcode, .brxe-text, [class*="brxe-np-"]) [type=button]:hover,
:where(.brxe-shortcode, .brxe-text, [class*="brxe-np-"]) [type=submit]:focus,
:where(.brxe-shortcode, .brxe-text, [class*="brxe-np-"]) [type=submit]:hover,
:where(.brxe-shortcode, .brxe-text, [class*="brxe-np-"]) button:focus,
:where(.brxe-shortcode, .brxe-text, [class*="brxe-np-"]) button:hover {
    background-color: #c36;
    color: #fff;
    text-decoration: none;
}

/*
 * Global button style of the former Elementor kit, printed after the reset like the kit CSS was.
 * Same specificity as the kit selectors (.elementor-kit-7 button / input[type=submit])
 * so the existing component styles keep overriding it the same way.
 */
.brx-body button:where(:not(.bricks-mobile-menu-toggle, .splide__arrow, .splide__pagination__page, .brx-toggle-div)),
.brx-body input[type="button"],
.brx-body input[type="submit"] {
    background-color: var(--bricks-color-secondary, #dc0811);
    border-radius: 12px;
    color: var(--bricks-color-accent, #fff);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    padding: 14px 32px;
    text-transform: none;
}