/* -------------------------------------------------------------------------- */
/* RTB-RESP.CSS (c) richardthebrave.com ------------------------------------- */

/* -----------------------------------------------------------------------------
* MARK: small (540px)
*/

@media only screen and (min-width: 540px) {

    .footer-nav-wrap {
        flex-direction: row;
        gap: var(--space-6);
    }
    .logo {
        margin-left: -1.25rem;
    }
    .logo-icon {
        width: 120px;
    }
    .logo-text {
        width: 180px;
    }

    .content-grid {
        --padding-inline: var(--space-8);
    }

    .portal-ul {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        gap: var(--space-6);
    }
    .page-title-img {
        --page-title-padding: var(--space-8);
        aspect-ratio: 2/1;
    }
    .page-title-hero-img {
        max-width: 18rem;
    }
    .page-title-hero-inner:hover .page-title-hero-icon img {
        transform: scale(1.2);
    }
    /* combi boiler */
    .page-title-hero-img-wrap :nth-child(2){ left: 5%; top: 7%; }
    /* busted pipe */
    .page-title-hero-img-wrap :nth-child(3){ right: 7%; top: 7%; }
    /* kitchen */
    .page-title-hero-img-wrap :nth-child(4){ right: 10%; bottom: 20%; }
    /* tub */
    .page-title-hero-img-wrap :nth-child(5){ left: 14%; bottom: 20%; }

    .gallery__ul.count-5 .gallery__li,
    .gallery__ul.count-6 .gallery__li { --itemsPerRow: 3; }


    
}

/* -----------------------------------------------------------------------------
* MARK: medium (800px)
*/

@media only screen and (min-width: 800px) {


    .page-title-inner {
        grid-template-columns: repeat(2, 1fr);
    }
    .page-title-img {
        margin-left: 0;
        height: 100%;
        aspect-ratio: auto;
        z-index: 0;
        filter: brightness(0.8) contrast(1.2);
    }

    .page-title::after {
        top: -112%;
        height: 250%;
        width: 65%;
        border-radius: 0 50% 50% 0;
    }
    
    .page-title-hero-img { max-width: 20rem; }
    /* combi boiler */
    .page-title-hero-img-wrap :nth-child(2){ left: 10%; top: 14%; }
    /* busted pipe */
    .page-title-hero-img-wrap :nth-child(3){ right: 12%; top: 11%; }
    /* kitchen */
    .page-title-hero-img-wrap :nth-child(4){ right: 15%; bottom: 20%; }
    /* tub */
    .page-title-hero-img-wrap :nth-child(5){ left: 14%; bottom: 20%; }


    .logo-text {
        width: 200px;
    }

    .grid-12-md {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }

    .full-reviews {
        grid-template-columns: repeat(3, 1fr);
    }

    .random-reviews {
        grid-template-columns: 1fr 1fr;
    }
    .random-reviews .review {
        border: 0;
        padding: var(--space-6);
        text-align: center;
    }
    .random-reviews .review-avatar {
        margin-inline: auto;
    }

    .random-reviews-cta {
        grid-column: span 2;
        justify-content: center;
    }

    .full-reviews {
        grid-auto-flow: dense;
        gap: var(--space-8) var(--space-6);
    }
    .full-reviews .review:first-of-type,
    .full-reviews .review:nth-child(7),
    .full-reviews .review:nth-child(10) {
        background-color: #FFF1D9;
        border-radius: var(--radius-xs);
        grid-column: span 2;
        padding: var(--space-4);
    }

    .full-reviews .review:first-of-type .review-avatar,
    .full-reviews .review:nth-child(7) .review-avatar,
    .full-reviews .review:nth-child(10) .review-avatar {
        background-color: #FED58E;
        color: white;
    }

    .contact-form {
        grid-column: 2 / 12;
    }

    .contact-cards {
        grid-template-columns: 1fr 1fr;
    }

    .gallery__ul.count-4 .gallery__li { --itemsPerRow: 4; }


    .two-column-item {
        grid-template-columns: 4fr 3fr;
    }
    .two-column-item:nth-child(odd) {
        grid-template-columns: 3fr 4fr;
    }

    .two-column-item:nth-child(odd) .two-column-text {
        grid-row: 1;
        grid-column: 1 / 2;
    }
    .two-column-text {
        padding: var(--space-8) var(--space-6);        
    }

    .footer-nav-wrap {
        gap: var(--space-8);
    }

    .gallery__ul.count-3 .gallery__li { --itemsPerRow: 3; }

}

/* -----------------------------------------------------------------------------
* MARK: large (1100px)
*/

@media only screen and (min-width: 1100px) {

    .grid-12-lg {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }

    .logo {
        margin-left: -2rem;
    }
    .logo-text {
        width: 220px;
    }
    .logo-icon {
        margin-block: -3rem;
        width: 160px;
    }
    .logo:hover .logo-icon {
        -webkit-animation:pulsate-fwd .7s ease-in-out infinite both;animation:pulsate-fwd .7s ease-in-out infinite both
    }

    .two-column-image {
        aspect-ratio: 4/3;
    }

    .page-title-img img {
        aspect-ratio: 10/9;
    }

    .portal-ul {
        grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    }

    .intro-main {
        padding-right: var(--space-8)
    }
    .intro-sidebar {
        border-top-width: 0;
        border-right-width: 0;
        padding: 0 0 var(--space-3) var(--space-3);
    }    

    .footer-address {
        grid-column: 1 / 4;
    }
    .footer-nav-wrap {
        grid-column: 4 / -1;
    }
    .footer-cta-logo {
        width: 12.5rem;
    }
    
    .footer-cta-wrap {
        align-items: center;
    }
    .footer-cta-logo {
        grid-column: 1 / 4;
    }
    .footer-cta-copy {
        grid-column: 4 / 9;
    }
    .footer-cta-btn {
        grid-column: 10 / -1;
        text-align: center;
    }
    
    .footer-cta-btn .btn {
        display: block;
        text-align: center;
    }
    .footer-search-wrap {
        grid-column: span 6;
    }
    .contact-form {
        grid-column: 4 / 10;
    }

    .gallery__ul.count-5 .gallery__li { --itemsPerRow: 5; }
    .gallery__ul.count-6 .gallery__li { --itemsPerRow: 6; }

    /* HEADER NAVIGATION - hide mobile, show desktop navbar */
    /* IMPORTANT: the min-width media query needs to match the plugins.js file */

    .courtesy-nav ul {
        justify-content: end;
    }
    .logo-nav-wrap { position: relative; }

    /* ensure the cloned menu stays hidden */
    #mm-clone-header-menu   { display: none !important; }
    #header-menu-toggle     { display: none !important; }

    /* show the previously-hidden header navigation */
    #header-menu                        { display: block !important; }

    /* style the header navigation menu */
    #header-menu a                      { color: var(--neutral-dark); display: block; border-radius: var(--radius-sm); padding: var(--space-4) var(--space-2); text-align: center; text-decoration: none; transition: all 0.3s ease-in-out; }
    #header-menu a:hover                { background-color: var(--neutral-bg); }
    
    #header-menu .header-btn            { margin-inline: var(--space-1); }
    #header-menu .header-btn a          { background-color: var(--secondary-bg); color: var(--secondary); font-weight: 600; }
    #header-menu .header-btn a:hover    { background-color: var(--primary-bg); color: var(--primary); }
    
    #header-menu .has-child:hover > a   { background-color: var(--neutral-bg); }
    #header-menu .header-menu__ul       { align-items: center; display: flex; gap: var(--space-1); justify-content: start; line-height: 1; list-style: none; margin: 0; padding: 0; width: 100%; }

    /* child / drop-down menus */
    #header-menu .header-menu__child-ul                 { align-items: start; background-color: #fff; box-shadow: 0 2rem 10rem rgba(0, 0, 0, 0.2); display: none; gap: var(--space-1); grid-template-columns: repeat(2, 1fr); left: auto; list-style: none; margin: -20px auto 0 auto; max-width: var(--max-wide); padding: var(--space-3); position: absolute; right: 0; top: 100%; width: 75%; z-index: 999; }
    #header-menu .header-menu__child-ul a               { border-radius: var(--radius-xs); display: block; padding: var(--space-2); text-align: left; }
    #header-menu .header-menu__child-ul :last-child a   { bacxkground-color: var(--neutral-light); text-align: right; }

    #header-menu .header-menu__child-ul :last-child a::after { content: '→' }
    #header-menu .header-menu__child-ul li:last-child   { border-top: 1px solid var(--neutral-light); padding-top: var(--space-1); grid-column: span 2; text-transform: capitalize; }

    #header-menu .header-menu__child-li                 { height: 100%; }
    #header-menu .header-menu__grandchild-ul            { display: block; font-size: var(--text-sm); line-height: 1.2; list-style: none; margin: 0; padding: 0; }


}

/* -----------------------------------------------------------------------------
* MARK: x-large (1440px)
*/

@media only screen and (min-width: 1440px) {

    .footer-cta-logo {
        grid-column: 1 / 4;
    }
    .footer-cta-copy {
        grid-column: 4 / 9;
    }
    .footer-search-wrap {
        grid-column: 7 / -1;
    }

    .page-title-img {
        margin: 0;
        position: absolute;
        top: 0;bottom: 0;right: 0;left: 40%;
    }

    .page-title::after {
        width: 57%;
    }
    .footer-nav-wrap {
        grid-column: 7 / -1;
    }

    #header-menu .header-menu__child-ul                 {  width: 50% }

}

/* -----------------------------------------------------------------------------
* MARK: xx-large (1820px)
*/

@media only screen and (min-width: 1820px) {

}