/* -------------------------------------------------------------------------- */
/* 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-8)
    }
    
    .portal-ul {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        gap: var(--space-6);
    }
    .portal-li-link {
        padding-bottom: var(--space-6);
    }

    .tax-forms .portal-li-link {
        grid-template-columns: 2fr 3fr 1fr;
    }
    
    .tax-forms .portal-arrow {
        display: flex;
        justify-content: end;
    }

}

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

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

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

    .tax-forms > * {
        grid-column: span 6;
    }

    .contact-form {
        grid-column: 4 / 10;
    }

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


    .two-column {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }
    .two-column-text {
        align-self: center;
    }
    
    .two-column-image {
        max-width: none;
        align-self: center;
    }

    .two-column-image img {
        aspect-ratio: 1;
        object-fit: contain;
    }

    .two-column-image.cover-img img {
        object-fit: cover;
    }


    .flipped .two-column-image {
        grid-column: 1 / 2;
    }

    .flipped .two-column-image {
        grid-column: 2 / -1;
        grid-row: 1;
    }



}

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

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

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

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

    .footer-last-col {
        justify-items: end;
        display: grid;
        align-content: space-between;
        justify-self: end;
        grid-column: 10 / -1;
    }
    .footer-address {
        grid-column: 1 / 4;
    }
    .footer-nav-wrap {
        grid-column: 4 / 10;
    }

    .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;
    }
    .footer-cta-btn .btn {
        display: block;
        text-align: center;
    }
    .footer-trio {
        max-width: 70%;

    }

    .two-column-image {
        grid-column: 2 / 6;
    }

    .has-image:not(.flipped) .two-column-text {
        grid-column: 6 / 12;
    }

    .has-image.flipped .two-column-text {
        grid-column: 2 / 8;
    }
    .has-image.flipped .two-column-image {
        grid-column: 8 / 12;

    }

    .courtesy-nav {
        display: block;
    }

    .courtesy-nav ul {
        justify-content: end;
    }

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

    .logo-nav-wrap { position: relative; }

    /* ensure the cloned menu stays hidden */
    #mm-clone-header-menu   { display: none !important; }
    #mobile-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(--secondary); display: block; padding: var(--space-4) var(--space-3); text-align: center; text-decoration: none; transition: all 0.2s ease-in-out; }
    #header-menu a:hover                { background-color: var(--neutral-light); }

    #header-menu :nth-child(1) > .header-menu__a:hover { background-color: var(--accent-light); }
    #header-menu :nth-child(2) > .header-menu__a:hover { background-color: var(--secondary-light); }
    #header-menu :nth-child(3) > .header-menu__a:hover { background-color: var(--primary-light); }

    #header-menu .has-child:nth-child(1):hover > a { background-color: var(--accent-light); }
    #header-menu .has-child:nth-child(2):hover > a { background-color: var(--secondary-light); }
    #header-menu .has-child:nth-child(3):hover > a { background-color: var(--primary-light); }

    .header-menu__child-a               { display: flex !important; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
    .header-menu__child-a span          { width: calc(100% - var(--space-7)); }
    .header-menu__child-a svg           { width: var(--space-6); height: var(--space-6); }
    
    #header-menu .has-child:hover > a   { background-color: var(--secondary-light); }

    #header-menu .header-menu__ul       { align-items: center; display: flex; gap: 0; 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 var(--space-1) var(--space-8) rgba(0, 0, 0, 0.2); border-radius: var(--radius-xs); display: none; gap: var(--space-1); grid-template-columns: repeat(2, 1fr); left: 25%; list-style: none; margin: 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: 1px solid var(--secondary-bg); display: block; padding: var(--space-4); text-align: left; border-radius: var(--radius-xxs); }

    #header-menu .header-menu__child-ul a:hover               { border-color: var(--secondary); background-color: transparent }

    

    #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;
    }

    .tax-forms > * {
        grid-column: span 4;
    }

}

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

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

}