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

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

@media only screen and (min-width: 36rem) {

    .site-header {
        grid-template-areas: 
        "logo menu"
        "pagetitle pagetitle";
    }

    .site-logo {
        justify-content: start;
        margin: var(--space-base) var(--gutter);
    }
    
    .mobile-nav-toggle {
        height: auto;
        margin: var(--space-base) var(--gutter);

    }

    .page-title .copy > * {
        width: 75%;
        max-width: var(--max-narrow);
    }

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

    .footer-address-list {
        flex-wrap: nowrap;
    }
 
    .site-footer {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
        "contact contact"
        "nav1 nav2";
    }
    .footer-contact {
        grid-area: contact;
    }
    .footer-nav:first-of-type {
        grid-area: nav1;
    }
    .footer-nav:nth-of-type(2) {
        grid-area: nav2;
    }

    .gallery__li {
        --itemsPerRow: 2;
    }

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

    .rtbform {
        grid-template-areas:
        "ctaform-name ctaform-name"
        "ctaform-email ctaform-phone"
        "ctaform-msg ctaform-msg"
        "ctaform-math ctaform-btn"
        "ctaform-footer ctaform-footer"
        ;
    }


}

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

@media only screen and (min-width: 50rem) {
    
    .site-header {
        grid-template-areas: 
        "logo"
        "menu"
        "pagetitle";
    }
    .site-logo {
        justify-content: center;
        margin: var(--space-base) auto 0 auto;
    }

    .columns {
        grid-template-columns: repeat(12, 1fr);
        gap: var(--space-xxl) var(--space-xl);
    }

    .column {
        grid-column: span var(--span);
    }

    .row.zig-zag .columns > :first-child {
        order: 1;
    }


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

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

    /* show the previously-hidden header navigation */
    #header-menu                        {
        align-content: center;
        display: flex !important;
        font-size: var(--text-base); 
        grid-area: menu;
        height: 100%;
    }
    #header-menu .header-menu__ul       { align-items: center; display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; width: 100%; }

    /* style the header navigation menu */
    #header-menu a                      { align-content: center; background-color: transparent; border-radius: var(--radius-xs); color: var(--white); display: block; font-weight: 450; height: 100%; outline: 1px solid transparent; padding: var(--space-xs) var(--space-sm); text-decoration: none; transition: all 0.2s ease-in-out; white-space: nowrap; }
    #header-menu a:hover                { background-color: var(--neutral-dark); outline-color: var(--neutral);  }
    
    #header-menu .header-btn            { margin-left: var(--space-sm); }
    #header-menu .header-btn a          { background-image: linear-gradient(to bottom right, var(--accent-mid), var(--accent-dark)); border-bottom: 1px solid var(--accent-dark);  color: white; font-weight: 700; padding-inline: var(--space-lg); text-align: center; text-shadow: 0 1px 1px var(--accent-dark) }
    #header-menu .header-btn a:hover    { background-color: var(--accent); outline-color: var(--accent); }
    #header-menu .header-btn a:active   { background: var(--accent); }
    
    #header-menu .has-child             { position: relative; }
    #header-menu .has-child > a         { padding-right: var(--space-lg); }
    #header-menu .has-child:hover > a   { background-color: var(--neutral-dark); outline-color: var(--neutral); }


    #header-menu .header-menu__dropdown-icon {
        display: block !important; 
        position: absolute;
        right: 0.25rem;
        top: 50%;
        margin-top: -1rem;
        width: 2rem;
    }

    /* child / drop-down menus */
    #header-menu .header-menu__child-ul                 {
        background-color: var(--white);
        box-shadow: var(--shadow-md);
        border-radius: var(--radius-xs);
        display: none;
        font-size: var(--text-sm);
        gap: var(--space-xs);
        left: 0;
        list-style: none;
        margin: 0;
        outline: 1px solid var(--neutral);
        overflow: hidden;
        padding: var(--space-xs);
        position: absolute;
        text-align: left;
        top: 100%;
        width: auto;
        max-width: 100%;
        min-width: 18rem;
        z-index: 999;
    }
    #header-menu .header-menu__child-ul a               { background: transparent; display: block; color: var(--neutral-dark); padding: var(--space-xs) var(--space-sm); position: relative; white-space: wrap; }
    #header-menu .header-menu__child-ul a:hover         { background-color: var(--neutral-bg); outline-color: var(--neutral-light);  }

    #header-menu .header-menu__li:nth-of-type(2) .header-menu__child-ul a::first-letter {
        display: inline-block;
        margin-right: 1px;
        font-weight: 700;
    }


}

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

@media only screen and (min-width: 75rem) {

    .columns {
        gap: var(--space-xxl);
    }

    .gallery__ul.count-5 .gallery__li { --itemsPerRow: 5; }
    .gallery__ul.count-6 .gallery__li { --itemsPerRow: 6; }
    
    .footer-contact {
        text-align: left;
    }
    
    .footer-address-list {
        justify-content: start;
    }
    .site-footer-social {
        justify-content: start;
    }

    .site-footer {
        grid-template-areas:
        "contact nav1 nav2"
        ;
        grid-template-columns: 2fr 1fr 1fr;
    }

}



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

@media only screen and (min-width: 85rem) {

    .site-header {
        grid-template-areas: 
        "logo menu"
        "pagetitle pagetitle";
    }



    .site-logo {
        justify-content: start;
        margin: var(--space-base) 0 var(--space-base) var(--gutter);
    }
    #header-menu { margin-right: var(--gutter); }
    #header-menu .header-menu__ul       { justify-content: end; padding: var(--space-xs) 0; }

}