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

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

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


    /* footer */
    .footer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-logo, .footer-search-wrap, .land-acknowledgement, .copyright {
        grid-column: 1 / -1;
    }
    .land-acknowledgement > p {
        max-width: none;
    }

    .page-title-trees svg {
        min-width: 200%;
        margin-left: -50%;
    }

    .gallery__li {
        /* update default to 2 per row */
        --itemsPerRow: 2;
    }
    .gallery__ul.count-3 .gallery__li {
        --itemsPerRow: 3;
    }

}

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

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



    .contact-cols {
        display: grid;
        gap: var(--space-8);
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-cols .map-wrapper {
        grid-row: 1 / 3;
        grid-column: 2 / 3;
        height: 100%;
    }

    /* footer */
    .footer-search-wrap { width: 100%; max-width: 50%; }

    .side-x-side {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

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

    .page-title-trees svg {
        min-width: 180%;
        margin-left: -40%;
    }

}

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

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

    /* footer */
    .footer {
        grid-template-columns: repeat(3, 1fr);
    }
    .land-acknowledgement {
        grid-row: 1 / 2;
        grid-column: 3 / -1;
    }
    .footer-search-wrap {
        grid-row: 1 / 2;
        grid-column: 1 / 3;
        align-self: end;
        max-width: none;
    }
    .footer-contact, .footer-nav-wrap {
        text-align: left;
        grid-row: 1 / 2;
    }
    .footer-contact {
        grid-column: 1 / 2;
    }
    .footer-nav-wrap {
        grid-column: 2 / 3;
    }
    .page-title {
        padding-bottom: var(--space-6);
    }

    /* HEADER NAVIGATION - hide mobile, show desktop navbar */
    /* IMPORTANT: the min-width media query needs to match the plugins.js file */
    .logo { 
        grid-column: span 1;
    }
    .header-menu {
        grid-column: span 2;
        justify-content: end;
    }
    .site-nav {
        align-items: center;
        justify-content: space-between;
    }
    
    .page-title-trees svg {
        min-width: 150%;
        margin-left: -25%;
    }

    /* 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                      { border-radius: var(--radius-xl); color: var(--neutral-bg); display: block; padding: var(--space-2) var(--space-3) var(--space-1) var(--space-3); text-align: center; text-decoration: none; transition: background-color 0.2s ease-in-out; white-space: nowrap; }
    #header-menu a:hover                { color: white; background-color: var(--primary);  }
    
    #header-menu .header-btn            { margin-left: var(--space-3); }
    #header-menu .header-btn a          { background-color: var(--primary-mid); color: white; }
    #header-menu .header-btn a:hover    { background-color: var(--accent); }
    
    #header-menu .has-child             { position: relative; }
    #header-menu .has-child > a         { padding-right: var(--space-6); }
    #header-menu .has-child:hover > a   { background-color: var(--primary); }

    #header-menu .header-menu__ul       { align-items: center; display: flex; justify-content: end; list-style: none; margin: 0; padding: 0; width: 100%; }

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

    /* child / drop-down menus */
    #header-menu .header-menu__child-ul                 {
        background-color: white;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-neutral-xl);
        display: none;
        left: calc(-1 * var(--space-4));
        list-style: none;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: absolute;
        right: calc(-1 * var(--space-4));
        text-align: center;
        top: 100%;
        width: auto;
        z-index: 999;
    }
    #header-menu .header-menu__child-ul a               { border-radius: 0; color: var(--primary); display: block; padding: var(--space-2) var(--space-2) var(--space-1) var(--space-2); white-space: wrap; }
    #header-menu .header-menu__child-ul a:hover         { background-color: var(--primary-bg);  }

    #header-menu .header-menu__grandchild-ul            { display: block; font-size: var(--text-sm); list-style: none; margin: 0; padding: 0; }


}

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

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

    #header-menu .header-menu__ul       { gap: var(--space-2); }

    .logo > svg {
        fill:  var(--neutral-bg);
        max-width: 100%;
        height: 12rem; /* actual is 224px */
        width: 14rem; /* actual is 256px */
    }

    .page-title-trees svg {
        min-width: 110%;
        margin-left: -5%;
    }


}

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

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


    /* footer */
    .footer-search-wrap {
        max-width: 75%;
        margin-inline: 0;
    }

}