/**********************************************************
Mold Remediation Resource - Custom Styles (style.css)
Authoritative, clean, modern design; Bootstrap 5 customizations
***********************************************************/

/* ========== Global ========== */
body {
    font-family: 'Manrope', 'Nunito', Arial, Helvetica, sans-serif;
    background: #ECF7F3;
    color: #23272B;
    font-size: 1.085rem;
    line-height: 1.7;
    letter-spacing: 0.02em;
}

.site-bg {
    background: #ECF7F3;
    min-height: 100vh;
}

a {
    color: #274E4A;
    text-decoration: underline;
    transition: color 0.18s;
    font-weight: 600;
}
a:hover, a:focus {
    color: #72806B;
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', 'Nunito', Arial, Helvetica, sans-serif;
    color: #274E4A;
    font-weight: 700;
    letter-spacing: 0.5px;
}
h1 {
    font-size: 2.4rem;
    margin-bottom: 1rem;
}
h2 {
    font-size: 1.65rem;
    margin-bottom: .85rem;
}
h3 {
    font-size: 1.23rem;
    margin-bottom: .7rem;
}
h4, h5, h6 {
    font-size: 1.08rem;
    color: #23272B;
    font-weight: 600;
}

.lead {
    font-size: 1.16rem;
    font-weight: 500;
    color: #23272B;
}

/* Section Headings */
.section-heading {
    font-size: 1.5rem;
    color: #274E4A;
    font-weight: 700;
    margin-bottom: .65rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ========== Navbar ========== */
.navbar {
    font-family: 'Manrope', 'Nunito', Arial, Helvetica, sans-serif;
    background: #fff !important;
    border-bottom: 2px solid #A8C3B4;
    box-shadow: 0 2px 8px rgba(39,78,74,0.04);
    padding-top: .3rem;
    padding-bottom: .3rem;
}
.navbar-brand {
    font-size: 1.45rem;
    font-weight: 700;
    color: #274E4A !important;
    letter-spacing: 1px;
    text-decoration: none !important;
}
.navbar .dropdown-menu {
    border: 1px solid #A8C3B4;
    background: #ECF7F3;
    box-shadow: 0 2px 16px rgba(39,78,74,0.05);
    margin-top: -3px !important;
    padding: .4rem .2rem;
    border-radius: .5rem;
}
.navbar .dropdown-item {
    font-weight: 500;
    color: #274E4A;
    border-radius: .33rem;
    padding: .45rem 1.1rem;
    transition: background 0.16s, color 0.16s;
}
.navbar .dropdown-item:active, 
.navbar .dropdown-item:focus, 
.navbar .dropdown-item:hover {
    background: #A8C3B4;
    color: #274E4A;
}
.navbar .nav-link, 
.navbar .dropdown-toggle {
    font-weight: 600;
    color: #274E4A !important;
    letter-spacing: 0.5px;
    font-size: 1.08rem;
    transition: color 0.18s;
    padding-left: .95rem;
    padding-right: .95rem;
}
.navbar .nav-link:hover, 
.navbar .dropdown-toggle:hover, 
.navbar .nav-link:focus, 
.navbar .dropdown-toggle:focus {
    color: #72806B !important;
}

/* Mobile Navigation */
@media (max-width: 991.98px) {
    .navbar .dropdown-menu {
        background: #fff;
        border-radius: .5rem;
    }
    .navbar .nav-link, 
    .navbar .dropdown-toggle {
        font-size: 1.14rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        padding-left: .6rem;
        padding-right: .6rem;
    }
}

/* ========== HERO SECTION ========== */
.homepage-hero-section {
    background: #ECF7F3;
    border: 2px solid #A8C3B4;
    border-radius: .8rem;
    box-shadow: 0 4px 28px rgba(39,78,74,0.08);
    margin-top: 2rem;
    margin-bottom: 2.2rem;
}
.homepage-hero-section h1 {
    font-size: 2.7rem;
    color: #274E4A;
    font-weight: 700;
    letter-spacing: 2px;
}
.homepage-hero-section .lead {
    font-size: 1.19rem;
    color: #23272B;
}
.homepage-hero-section .btn {
    background: #274E4A;
    color: #fff;
    border-radius: .55rem;
    font-weight: 700;
    font-size: 1.13rem;
    box-shadow: 0 4px 16px rgba(39,78,74,0.06);
    border: none;
    text-decoration: none;
}
.homepage-hero-section .btn:hover, 
.homepage-hero-section .btn:focus {
    background: #72806B;
    color: #fff;
}

/* ========== Homepage Navigation Tiles/Grid ========== */
.homepage-nav-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 1.3rem;
    margin-bottom: 2.5rem;
}
.homepage-nav-tile {
    background: #A8C3B4;
    color: #274E4A;
    border-radius: .65rem;
    box-shadow: 0 2px 13px rgba(39,78,74,0.08);
    border: 2px solid #A8C3B4;
    flex: 1 1 290px;
    max-width: 380px;
    min-width: 210px;
    padding: 1.55rem 1.3rem 1.1rem 1.3rem;
    text-align: left;
    transition: box-shadow 0.16s, border 0.15s, background 0.13s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: 160px;
    margin-bottom: 0.5rem;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.homepage-nav-tile:hover, .homepage-nav-tile:focus {
    background: #ECF7F3;
    border-color: #72806B;
    box-shadow: 0 8px 32px rgba(39,78,74,0.16);
    text-decoration: none;
    color: #274E4A;
}
.homepage-nav-tile .tile-icon {
    font-size: 2.3rem;
    color: #274E4A;
    margin-bottom: .65rem;
    display: block;
}
.homepage-nav-tile .tile-title {
    font-size: 1.18rem;
    font-weight: 700;
    color: #274E4A;
    margin-bottom: .35rem;
    letter-spacing: 0.5px;
}
.homepage-nav-tile .tile-desc {
    font-size: 1.025rem;
    color: #274E4A;
    font-weight: 500;
    margin-bottom: .1rem;
    line-height: 1.36;
}
@media (max-width: 991.98px) {
    .homepage-nav-tiles {
        gap: .75rem;
    }
    .homepage-nav-tile {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }
}

/* ========== Featured Resources Section ========== */
.featured-resources-section {
    margin-bottom: 2.7rem;
}
.featured-resource-card {
    background: #ECF7F3;
    border: 2px solid #A8C3B4;
    border-radius: .62rem;
    box-shadow: 0 3px 18px rgba(39,78,74,0.06);
    padding: 1.35rem 1.25rem 1.2rem 1.25rem;
    margin-bottom: 1.3rem;
    transition: box-shadow 0.16s, border 0.18s;
    min-height: 185px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.featured-resource-card.alt-bg {
    background: #A8C3B4;
    border-color: #A8C3B4;
}
.featured-resource-card .resource-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #274E4A;
    margin-bottom: .45rem;
}
.featured-resource-card .resource-desc {
    color: #23272B;
    font-size: 1.02rem;
    margin-bottom: .7rem;
}
.featured-resource-card .btn {
    background: #274E4A;
    color: #fff;
    font-size: .98rem;
    font-weight: 600;
    border-radius: .35rem;
    padding: .48rem 1.05rem;
    text-decoration: none;
    border: none;
    box-shadow: 0 2px 7px rgba(39,78,74,0.10);
    transition: background 0.15s;
}
.featured-resource-card .btn:hover, 
.featured-resource-card .btn:focus {
    background: #72806B;
    color: #fff;
}

/* ========== Quick Access Subtopics Strip ========== */
.quick-access-strip {
    background: #ECF7F3;
    padding: 1.2rem 1rem 1.2rem 1rem;
    border-radius: .7rem;
    box-shadow: 0 2px 11px rgba(39,78,74,0.06);
    overflow-x: auto;
    margin-bottom: 2.2rem;
    white-space: nowrap;
}
.quick-access-pill {
    display: inline-block;
    background: #A8C3B4;
    color: #274E4A;
    font-weight: 600;
    font-size: 1.04rem;
    border-radius: 999px;
    padding: .48rem 1.2rem;
    margin-right: .7rem;
    margin-bottom: .4rem;
    border: 2px solid #A8C3B4;
    text-decoration: none !important;
    transition: background 0.14s, border 0.15s, color 0.13s;
    box-shadow: 0 1px 6px rgba(39,78,74,0.04);
}
.quick-access-pill:hover, .quick-access-pill:focus {
    background: #FFF1D6;
    border-color: #72806B;
    color: #274E4A;
    text-decoration: none;
}
@media (max-width: 600px) {
    .quick-access-strip {
        padding: .7rem .3rem;
    }
    .quick-access-pill {
        font-size: .97rem;
        padding: .42rem .9rem;
    }
}

/* ========== Informational Block: What Is Mold? ========== */
.info-block {
    background: #fff;
    border-radius: .7rem;
    box-shadow: 0 2px 11px rgba(39,78,74,0.04);
    padding: 2.1rem 1.5rem 1.6rem 1.7rem;
    margin-bottom: 2.4rem;
    border-left: 4px solid #72806B;
}
.info-block .info-heading {
    font-size: 1.32rem;
    font-weight: 700;
    color: #274E4A;
    margin-bottom: .6rem;
    letter-spacing: 1px;
}
.info-block ul {
    margin-top: .5rem;
    margin-bottom: .7rem;
    padding-left: 1.4rem;
}
.info-block ul li {
    margin-bottom: .24rem;
    font-size: 1.02rem;
    color: #23272B;
    position: relative;
}
.info-block ul li::before {
    content: "\F26E";
    /* Bootstrap bi-check-circle-fill */
    font-family: "bootstrap-icons";
    color: #72806B;
    font-size: 1.05em;
    position: absolute;
    left: -1.3em;
    top: 2px;
}

.info-block strong {
    color: #274E4A;
    font-weight: 700;
}

/* ========== Remediation Steps Section ========== */
.remediation-steps-section {
    margin-bottom: 2.2rem;
}
.remediation-step-block {
    background: #ECF7F3;
    border-radius: .65rem;
    border: 2px solid #A8C3B4;
    box-shadow: 0 2px 9px rgba(39,78,74,0.06);
    display: flex;
    align-items: flex-start;
    gap: 1.15rem;
    padding: 1.28rem 1.2rem 1.13rem 1.4rem;
    margin-bottom: 1.15rem;
    position: relative;
}
.remediation-step-number {
    background: #274E4A;
    color: #fff;
    font-size: 1.17rem;
    font-weight: 700;
    border-radius: 50%;
    width: 2.3em;
    height: 2.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: .8rem;
    box-shadow: 0 2px 7px rgba(39,78,74,0.07);
    flex-shrink: 0;
}
.remediation-step-icon {
    font-size: 1.65rem;
    color: #72806B;
    margin-right: .6rem;
    margin-top: -2px;
    flex-shrink: 0;
}
.remediation-step-content {
    flex: 1 1 auto;
}
.remediation-step-title {
    font-size: 1.09rem;
    font-weight: 700;
    color: #274E4A;
    margin-bottom: .16rem;
    letter-spacing: 0.5px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 0.16s;
    display: inline-block;
}
.remediation-step-title:hover, .remediation-step-title:focus {
    color: #72806B;
}
.remediation-step-desc {
    color: #23272B;
    font-size: 1.01rem;
    margin-bottom: 0;
}
@media (max-width: 600px) {
    .remediation-step-block {
        flex-direction: column;
        gap: .74rem;
        padding: 1rem .7rem .9rem .95rem;
    }
    .remediation-step-number {
        width: 2em;
        height: 2em;
        font-size: 1rem;
        margin-right: 0;
        margin-bottom: .24rem;
    }
    .remediation-step-icon {
        font-size: 1.3rem;
        margin-right: .4rem;
        margin-top: 0;
    }
}

/* ========== Authority/Science Section ========== */
.authority-section {
    background: #A8C3B4;
    border-radius: .7rem;
    padding: 1.6rem 1.5rem 1.2rem 1.5rem;
    margin-bottom: 2.2rem;
    box-shadow: 0 2px 14px rgba(39,78,74,0.05);
}
.authority-section .authority-heading {
    font-size: 1.23rem;
    font-weight: 700;
    color: #274E4A;
    margin-bottom: .7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.authority-section ul {
    margin-top: .3rem;
    margin-bottom: .7rem;
    padding-left: 1.28rem;
}
.authority-section ul li {
    margin-bottom: .22rem;
    font-size: 1.03rem;
    color: #23272B;
    position: relative;
}
.authority-section ul li::before {
    content: "\F26A";
    /* Bootstrap bi-shield-lock-fill */
    font-family: "bootstrap-icons";
    color: #274E4A;
    font-size: 1.02em;
    position: absolute;
    left: -1.25em;
    top: 2px;
}
.authority-section a {
    color: #274E4A;
    text-decoration: underline;
    font-weight: 700;
}
.authority-section a:hover, .authority-section a:focus {
    color: #72806B;
}

/* ========== FAQ / Accordion ========== */
.faq-section {
    background: #fff;
    border-radius: .7rem;
    border: 2px solid #A8C3B4;
    box-shadow: 0 2px 15px rgba(39,78,74,0.06);
    padding: 1.7rem 1.2rem 1.3rem 1.3rem;
    margin-bottom: 2.2rem;
}
.faq-accordion .accordion-item {
    background: #ECF7F3;
    border: none;
    border-bottom: 1px solid #A8C3B4;
    border-radius: 0;
    margin-bottom: 0;
}
.faq-accordion .accordion-item:last-child {
    border-bottom: none;
}
.faq-accordion .accordion-button {
    background: #A8C3B4;
    color: #274E4A;
    font-weight: 700;
    font-size: 1.06rem;
    box-shadow: none;
    border: none;
    padding: .92rem 1.1rem;
    border-radius: 0;
    outline: none;
    transition: background 0.14s, color 0.14s;
}
.faq-accordion .accordion-button:focus {
    outline: 2px solid #72806B !important;
    z-index: 2;
}
.faq-accordion .accordion-button:not(.collapsed) {
    background: #ECF7F3;
    color: #274E4A;
    box-shadow: none;
}
.faq-accordion .accordion-body {
    background: #fff;
    color: #23272B;
    font-size: 1.01rem;
    padding: 1.1rem 1.2rem 1.2rem 1.5rem;
    border-radius: 0 0 .3rem .3rem;
}
.faq-accordion a {
    color: #72806B;
    font-weight: 600;
    text-decoration: underline;
}
.faq-accordion a:hover, .faq-accordion a:focus {
    color: #274E4A;
}

/* Remove border-radius from FAQ accordion title wrappers */
.faq-accordion .accordion-button, 
.faq-accordion .accordion-item {
    border-radius: 0 !important;
}

/* ========== Explore More Grid ========== */
.explore-more-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1.2rem;
    margin-bottom: 1.7rem;
}
.explore-more-link {
    background: #A8C3B4;
    color: #274E4A;
    font-weight: 700;
    font-size: 1.02rem;
    border-radius: .4rem;
    padding: .58rem 1.25rem;
    text-decoration: underline;
    margin-bottom: .2rem;
    display: inline-block;
    transition: background 0.13s, color 0.13s;
}
.explore-more-link:hover, .explore-more-link:focus {
    background: #274E4A;
    color: #fff;
    text-decoration: underline;
}
@media (max-width: 600px) {
    .explore-more-grid {
        flex-direction: column;
        gap: .35rem 0;
    }
    .explore-more-link {
        width: 100%;
        display: block;
        text-align: left;
    }
}

/* ========== Sidebar ========== */
.sidebar-section {
    background: #A8C3B4;
    border-radius: .7rem;
    box-shadow: 0 2px 10px rgba(39,78,74,0.08);
    padding: 1.5rem 1.1rem 1.2rem 1.15rem;
    margin-bottom: 2.1rem;
}
.sidebar-title {
    color: #274E4A;
    font-size: 1.09rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: .42rem;
    text-transform: uppercase;
}
.sidebar-link-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.1rem;
}
.sidebar-link-list li {
    margin-bottom: .38rem;
}
.sidebar-link-list a {
    color: #274E4A;
    font-size: 1.01rem;
    font-weight: 600;
    text-decoration: underline;
    transition: color 0.13s;
}
.sidebar-link-list a:hover, .sidebar-link-list a:focus {
    color: #72806B;
    text-decoration: underline;
}

/* Quick Fact / Did You Know Box */
.quick-fact-box {
    background: #FFF1D6;
    color: #274E4A;
    border: 2px solid #A8C3B4;
    border-radius: .7rem;
    padding: 1.05rem 1rem 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.1rem;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    box-shadow: 0 1px 5px rgba(39,78,74,0.07);
}
.quick-fact-icon {
    font-size: 1.45rem;
    color: #72806B;
    margin-right: .6rem;
    margin-top: .08em;
    flex-shrink: 0;
}
.quick-fact-text {
    flex: 1 1 auto;
    font-size: 1.01rem;
    font-weight: 500;
    color: #274E4A;
    line-height: 1.45;
}

/* ========== Footer ========== */
.site-footer {
    background: #274E4A;
    color: #ECF7F3;
    font-family: 'Manrope', 'Nunito', Arial, Helvetica, sans-serif;
    font-size: 1.02rem;
    margin-top: 2.2rem;
    border-top: 3px solid #A8C3B4;
    box-shadow: 0 -2px 13px rgba(39,78,74,0.10);
    padding-top: 2rem;
    padding-bottom: .7rem;
}
.footer-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ECF7F3;
    letter-spacing: 1px;
    font-family: 'Manrope', 'Nunito', Arial, Helvetica, sans-serif;
}
.footer-desc {
    color: #ECF7F3;
    opacity: .82;
    font-size: .99rem;
    margin-top: .3rem;
    margin-bottom: .1rem;
}
.footer-section-title {
    font-size: 1.04rem;
    color: #A8C3B4;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .7px;
    margin-bottom: .6rem;
}
.footer-links {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.footer-link {
    color: #ECF7F3;
    text-decoration: underline;
    font-size: .99rem;
    font-weight: 500;
    transition: color 0.14s;
    margin-bottom: .18rem;
    display: inline-block;
}
.footer-link:hover, .footer-link:focus {
    color: #FFF1D6;
}
.footer-cta-bar {
    background: #A8C3B4;
    color: #274E4A;
    border-radius: .5rem;
    margin-top: 2.2rem;
    font-weight: 600;
    font-size: 1.09rem;
    box-shadow: 0 1px 8px rgba(39,78,74,0.05);
}
.footer-cta-link {
    color: #274E4A;
    text-decoration: underline;
    font-weight: 700;
    transition: color 0.13s;
}
.footer-cta-link:hover, .footer-cta-link:focus {
    color: #72806B;
    text-decoration: underline;
}
@media (max-width: 600px) {
    .site-footer {
        padding-top: 1.1rem;
        padding-bottom: .2rem;
    }
    .footer-cta-bar {
        font-size: .99rem;
        padding: .8rem;
    }
}

/* ========== Utility & Misc ========== */
.container {
    max-width: 1340px !important;
}
main#main-content {
    min-height: 60vh;
    padding-top: 0;
    padding-bottom: 0;
}
section {
    margin-bottom: 2.2rem;
}
@media (max-width: 1200px) {
    .container {
        max-width: 100% !important;
        padding-left: 1.2rem !important;
        padding-right: 1.2rem !important;
    }
}
@media (max-width: 600px) {
    body, .site-bg {
        font-size: .99rem;
    }
    section {
        margin-bottom: 1.25rem;
    }
}

/* Remove Bootstrap blue highlights from form controls, buttons, etc */
.btn:focus, .btn:active, .form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 2px #A8C3B4 !important;
    border-color: #72806B !important;
    outline: none !important;
}

/* Remove extra border-radius from Bootstrap cards, buttons, etc */
.card, .btn, .form-control, .form-select, .accordion, .accordion-item, .accordion-button {
    border-radius: .55rem !important;
}

/* Remove border-radius from accordion title wrappers (for FAQ section only) */
.faq-accordion .accordion-button, .faq-accordion .accordion-item {
    border-radius: 0 !important;
}
.faq-accordion .accordion-item {
    border-radius: 0 !important;
}

/* Hide default Bootstrap close button outline */
.btn-close:focus {
    box-shadow: none !important;
}

/* Miscellaneous */
::-webkit-scrollbar {
    width: 9px;
    background: #ECF7F3;
}
::-webkit-scrollbar-thumb {
    background: #A8C3B4;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #72806B;
}

@media (max-width: 991.98px) {
    aside.col-12.col-lg-4 {
        margin-top: 2rem;
    }
}

/* ========== Adsense Block (Global) ========== */
.adsense-block {
    margin: 2rem 0 2.5rem 0;
    text-align: center;
    min-height: 100px;
    background: #fff;
    border: 2px dashed #A8C3B4;
    border-radius: .62rem;
    box-shadow: 0 2px 11px rgba(39,78,74,0.04);
    padding: 1.2rem .7rem 1.1rem .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 700px) {
    .adsense-block {
        padding: .7rem .2rem;
        min-height: 80px;
    }
}

/* ========== SVG/Illustration Styles ========== */
.hero-illustration {
    max-width: 100%;
    width: 330px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .hero-illustration {
        width: 95%;
        max-width: 300px;
        margin-bottom: 1.1rem;
    }
}

/* ========== Custom Print Styles ========== */
@media print {
    .navbar, .site-footer, .adsense-block, .sidebar-section, .quick-access-strip, .footer-cta-bar {
        display: none !important;
    }
    body, main#main-content, .container {
        background: #fff !important;
        color: #23272B !important;
    }
    a {
        color: #274E4A !important;
        text-decoration: underline !important;
    }
}

/* ========== End of Mold Remediation Resource Custom Styles ========== */