/* Scoped styles for the Text Page element */
.brxe-text-page {
    max-width: var(--site-container-width);
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px !important;
    margin: 75px auto;
}

.brxe-text-page.text-page--narrow {
    max-width: 900px;
}

.brxe-text-page.text-page--narrow .page-title,
.brxe-text-page.text-page--narrow .yoast-breadcrumb {
    text-align: center;
}

.brxe-text-page h1,
.brxe-text-page h2,
.brxe-text-page h3,
.brxe-text-page h4,
.brxe-text-page h5,
.brxe-text-page p,
.brxe-text-page ul,
.brxe-text-page ol,
.brxe-text-page blockquote {
    font-family: var(--font-secondary);
}

.brxe-text-page p,
.brxe-text-page ul,
.brxe-text-page ol {
    margin-top: 20px;
    margin-bottom: 20px;
}

.brxe-text-page h2 { font-size: 1.3em; }
.brxe-text-page h3 { font-size: 1.1em; }
.brxe-text-page h4 { font-size: 1em; }

.brxe-text-page .page-title {
    font-family: var(--font-primary);
    font-size: 2em;
    margin-bottom: 20px;
    padding-top: 40px !important;
}

.brxe-text-page .yoast-breadcrumb {
    margin-bottom: 40px;
    font-size: 0.9em;
    color: #666;
}

.brxe-text-page a {
    text-decoration: underline;
}

.brxe-text-page a:hover {
    text-decoration: none;
}

/* These styles are more global and might be better placed in your main theme stylesheet, but are kept here as per the original code */
#breadcrumbs {
    margin-top: -10px !important;
}

.mega-menu-wrapper {
    border-bottom: 1px solid #cccccc;
}
/* End global styles */


@media screen and (max-width: 767px) {
    .brxe-text-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    .brxe-text-page .page-title {
        padding-top: 40px !important;
    }
}