/*
	(c)2021 - visuallizard.com

	Responsive styles using Media Queries
*/

:root {
    --black: #000000;
    --white: #ffffff;
    --ltgrey: #dddddd;
    --grey: #999999;
    --dkgrey: #333333;
    --yellow: #ffcc00;
    --green: #339900 ;
    --red: #aa0000;
    --blue: #0077cc;

    /* brand colouring - primary */
    --riverclayred: #5c0f0f;
    --deepcurrant: #380a0a;
    --wintersun: #fff5ed;
    --gatheringglow: #eb6340;
    /* brand colouring - secondary */
    --canopygreen: #82874a;
    --canopygreen-deep: #404f36;
    --canopygreen-lite: #e3e899;
    --prairieochre: #b58030;
    --prairieochre-deep: #81471e;
    --prairieochre-lite: #ffcd4d;
    --bigskyblue: #5778c4;
    --bigskyblue-deep: #1c1c54;
    --bigskyblue-lite: #d5e6ff;
    --twilightthistle: #bfadd4;
    --twilightthistle-deep: #743e68;
    --twilightthistle-lite: #e9e6ff;
}

body::before { display: none; }

/* !Media Queries ============================== */



/* 1600px wide+ (laptop and desktop browsers) */
@media only screen and (min-width: 1601px) {
    body.debug::before { content: 'x-large'; display: block; }
    .mobile-menu-toggle { display: none; }
    p { font-size: 2rem; margin: 0 0 3.6rem 0; }

}
/* ! standard monitors and desktop browsers) */
@media only screen and (max-width: 1600px) {
    body.debug::before { content: 'large'; display: block; }
    .mobile-menu-toggle { display: none; }

}

/* ! tablets landscape display */
@media only screen and (max-width: 1200px) {
    body.debug::before { content: 'large'; }

    .container { max-width: 100%; }

    .site-title { max-width: 35%; }
    nav .nav-1 { font-size: 1.8rem; }


    div.internal-banner { max-height: 40vh; padding: 0; overflow: hidden; }
    div.internal-banner div.banner > img { top: auto; width: 100%; height: 100%; object-fit: cover; object-position: 0% 100%; }

}

@media only screen and (max-width: 1100px) {
    body.debug::before { content: 'medium'; }
    body.debug::after { display: none; }

    .mobile-menu-toggle { display: block; }
    .site-title { max-width: 100%; }
    nav#main-nav {
        display: block;
        position: fixed;
        top: 0;
        left: -100vw;
        bottom: 0;
        width: 100vw;
        z-index: 1;
        padding: 1rem;
        background-color: var(--deepcurrant);
        color: var(--wintersun);
    }
    nav#main-nav.show {
        max-width: 100%;
        left: 0;
    }
    nav#main-nav > div.site-title { display: none; }
    nav#main-nav.show > div.site-title {
        display: block;
        max-width: 100%;
        margin-top: 0.65rem;
    }
    nav#main-nav ul.nav-1 {
        display: block;
        position: relative;
        overflow: auto;
        width: 100%;
        max-height: 100vh;
        padding: 1rem 0;
        margin: 2rem 0 0 0;
        font-family: "Inter Tight", Arial, sans-serif;
    }
    .nav-item { display: block; }

    nav.main-nav .nav-1 > li { margin-bottom: 2rem; }
    nav.main-nav .nav-1 > li > a {
        text-align: unset; transition: none;
        text-transform: uppercase;
        letter-spacing: 15%;
    }
    nav.main-nav .nav-1 span.submenu {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 30px;
        height: 30px;
    }
    li.has-sub > .sub-list {
        display: block;
        position: relative;
        width: 95%;
        height: 0;
        padding: 0 0 0 2rem;
        border: none;
        margin: 0;
        background: none;
        color: var(--wintersun);
        box-shadow: none;
        opacity: 0;
        transition: none;
    }
    .nav-item[data-nav-status="has-active"] > .nav-link {}
    li.has-sub.show > ul.sub-list,
    li.has-sub[data-nav-status="has-active"] > ul.sub-list,
    li.has-sub[data-nav-status="active"] > ul.sub-list {
        height: auto;
        visibility: visible;
        opacity: 1;
    }
    nav .nav-1 > li[data-nav-status="active"] > a,
    nav .nav-1 > li[data-nav-status="has-active"] > a,
    .nav-item[data-nav-status="active"] > .nav-link,
    .nav-item[data-nav-status="has-active"] > .nav-link { text-decoration: none; }
    li.has-sub.show > .sub-list a.nav-link,
    li.has-sub[data-nav-status="has-active"] .sub-list a.nav-link { background: none; border-bottom: 1px solid transparent; color: inherit; }

    li[data-nav-status="active"] > a.nav-link,
    li.has-sub[data-nav-status="has-active"] > a.nav-link,
    li.has-sub[data-nav-status="has-active"] .sub-list li[data-nav-status="has-active"] > a.nav-link,
    li.has-sub[data-nav-status="has-active"] .sub-list > li[data-nav-status="active"] > a.nav-link { border-bottom: 1px solid var(--wintersun); text-decoration: none; }

    :nth-last-child(1) > .nav-2 .nav-list,
    :nth-last-child(2) > .nav-2 .nav-list { right: unset; }
    :nth-last-child(1) > .nav-2 .has-sub > .nav-link::after,
    :nth-last-child(2) > .nav-2 .has-sub > .nav-link::after { transform: scale(0.8) rotate(90deg); }

    nav .nav-2 { font-weight: 400 !important; }
    nav .nav-2 > li.has-sub > .sub-list { width: 100%; }
    nav .nav-2 > li.has-sub > .nav-link::after {
        background: no-repeat center center url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path fill='%23ffffff' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' /></svg>");
        width: 2rem;
        height: 2rem;
    }
    .nav-2 > li > a.nav-link,
    .nav-2 > li.has-active > a.nav-link,
    .nav-2 > li.active > a.nav-link,
    .nav-2 > li > a.nav-link:hover,
    .nav-2 > li > a.nav-link:visited,
    .nav-2 > li > a.nav-link:active,
    .nav-2 > li > a.nav-link:focus { background: none; border-bottom: 1px solid transparent; color: var(--wintersun); }

}

/* ! tablets portrait display) */
@media only screen and (max-width: 850px) {
    body.debug::before { content: 'medium'; display: none; }

    h1, .h1 { font-size: 5.20rem; }
    h2, .h2 { font-size: 4.20rem; }
    h3, .h3 { font-size: 3.60rem; }
    h4, .h4 { font-size: 2.40rem; }
    h5, .h5 { font-size: 2.00rem; }
    h6, .h6 { font-size: 2.00rem; }
    p { font-size: 1.4rem; }
    main ul, main ol, footer ul { font-size: 1.4rem; }

    aside#social-bar > .container { padding-right: 6rem; }
    ul.social { justify-content: flex-end; width: 40%; column-gap: 1rem; }

    div.hero-banner { max-height: 70vh; }

    section#home-posts .container > h2 { flex: 0 0 58%; max-width: 58%; }
    section#home-posts .container > a { flex: 0 0 40%; max-width: 40%; }

    div.internal-banner { box-shadow: 0px -5rem 0px 0px var(--bigskyblue); }

    main#content.home > section {  }

    main.internal section > .container > h2,
    main.internal section > .container > div > h2,
    main.internal > .container > div > h2 { text-align: center; }

    footer > .container:first-child section:nth-child(1) { flex: 0 0 100%; max-width: 100%; }
    footer > .container:first-child section:nth-child(2) { flex: 0 0 48%; max-width: 48%; }
    footer > .container:first-child section:nth-child(3) { flex: 0 0 48%; max-width: 48%; }
    footer > .container:first-child section:nth-child(4) { flex: 0 0 100%; max-width: 100%; }
    footer nav.footer-legal-nav { width: 100%; }
    footer nav.footer-legal-nav ul { justify-content: center; margin: 5rem auto 0 auto; }
    footer p.copyright { width: 100%; text-align: center; }

}

/* ! phone display landscape */
@media only screen and (max-width: 670px) {
    body.debug::before { content: 'small'; }

    .cke > .c1,
    .cke > .c2,
    .cke > .c3,
    .cke > .c4,
    .cke > .c5,
    .cke > .c6 { flex: 0 0 100%; max-width: 100%; }

    .site-title > a { height: 2.4rem; font-size: 3.2rem; }
    div.hero-banner div.banner { height: 100%; margin: 0; }
    div.hero-banner > .container { height: 100%; }
    div.hero-banner .container p.h1 { font-size: 3.2rem; }
    div.hero-banner .container img { height: auto; margin: 0 auto; }

    div.internal-banner { max-height: 40vh; padding: 2rem 0 5rem 0; overflow: hidden; }
    div.internal-banner h1 { font-size: 4.0rem; }
    div.internal-banner div.banner { height: 40vh; }
    div.internal-banner div.banner > img { object-position: center center; filter: opacity(0.9); }

    main.home section#contest-announcements .container div.contest-info { flex: 0 0 100%; max-width: 100% }
    main.home section#contest-announcements .container div.contest-info > img:nth-child(1) { width: 100%; height: 100%; }
    main.home section#contest-announcements .container div.contest-info > img:nth-child(2) { left: auto; right: 0; bottom: -4rem; width: 45%; }
    main.home section#the-forks .container div.place-to-meet { order: 0; flex: 0 0 100%; max-width: 100%; padding: 3rem; }
    main.home section#the-forks .container > img { order: 1; flex: 0 0 90%; max-width: 90%; margin: 0 auto; }

    main.home section#introduction p,
    main.home section#contest-announcements p,
    main.home section#the-forks p { font-size: 1.6rem; }

    .main-region .contact-column,
    .contact-column#contact-form { flex: 0 0 100%; max-width: 100%; }

    a.link-item { flex: 0 0 48%; max-width: 48%; }


    footer > .container section { flex: 0 0 100% !important; max-width: 100% !important; }

}

/* ! Phone display portrait */
@media only screen and (max-width: 520px) {
    body.debug::before { content: 'small'; }

    h1, .h1 { font-size: 4.60rem; }
    h2, .h2 { font-size: 3.40rem; }
    h3, .h3 { font-size: 2.40rem; }
    h4, .h4 { font-size: 2.00rem; }
    h5, .h5 { font-size: 1.80rem; }
    h6, .h6 { font-size: 1.80rem; }

    div.hero-banner { max-height: 60vh; }
    div.hero-banner .container p.h1 { flex: 0 0 100%; max-width: 100%; margin: 0; font-size: 3.2rem; text-align: center; }
    div.hero-banner > .container { gap: 0; padding: 2rem; }
    div.hero-banner div.banner { width: 100%; height: 60vh; margin: 0; }
    div.hero-banner img.banner-img { object-position: bottom center; }
    div.hero-banner .container img { flex: 0 0 45%; max-width: 45%; height: auto; margin: 0 auto; }

    a.link-item { flex: 0 0 100%; max-width: 100%; }

    div.jury-item div.jury-bio { flex: 0 0 100%; max-width: 100%; }
    div.jury-item figure { flex: 0 0 70%; max-width: 70%; margin: 0 auto; }


}