/* CSS Reset */
* {
    box-sizing: border-box;
}

html, body, blockquote, code, h1, h2, h3, h4, h5, h6, p, pre {
    margin: 0;
    padding: 0
}
button, fieldset, form, input, legend, textarea, select {
    margin: 0;
    padding: 0
}
fieldset {
    border: 0
}
a, a * {
    cursor: pointer
}
div {
    margin: 0;
    padding: 0;
    background-color: transparent;
}
hr, img {
    border: 0;
}
applet, iframe, object {
    border: 0;
    margin: 0;
    padding: 0;
}
button, input[type=button], input[type=image], input[type=reset], input[type=submit], label {
    cursor: pointer;
}
ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* FONTS AND COLORS*/

:root{
     --font1: 'Oswald';
    --font2: 'Arial';
    --prim-fontcolor: hsla(0, 100%, 100%, 1);
    --sec-fontcolor: hsla(0, 0%, 0%, 1);
    --highlight: hsla(52, 100%, 50%, 1);
    --highlight2: hsla(111, 100%, 20%, 1);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font1, sans-serif);
    font-size: 2em;
    letter-spacing: 0.08em;
}

p,
a {
    font-family: var(--font2, sans-serif);
    font-size: 1.1em;
}





/* GENERAL */
.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    margin: -1px !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

html{
    scroll-behavior: smooth;
}

body {
    text-align: center;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

/* NAV */

header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
}
  
.nav-logo {
    margin: 1rem;
    width: 10rem;
}
  
.primary-nav {
    display: flex;
    gap: 2rem;
}

.primary-nav a {
    color: var(--sec-fontcolor, #000);
}

.primary-nav a:hover {
    color: var(--highlight2, #138000);
}

.mobile-nav-toggle{
	display: none;
}

@media (max-width:55em) {
    .nav-logo {
        width: 8rem;
    }

    .primary-nav {
        position: fixed;
        z-index: 1000;
        inset: 0 0 0 45%;

        flex-direction: column;
        text-align: left;
        padding: min(20vh, 6rem) 2em;

        transform: translateX(100%);
        transition: transform 250ms ease-out;
        transition-delay: 30ms;

        background-color: hsla(0, 0%, 100%, 0.9);
    }

    @supports (backdrop-filter:blur(.4rem)) {
    .primary-nav {
        background-color: hsla(0, 0%, 100%, 0.7);
        backdrop-filter: blur(.4rem);
    }
    }
    
    .primary-nav li{
        font-size: 1.2em;
    }

    .primary-nav[data-visible="true"] {
        transform: translateX(0%);
    }

    .mobile-nav-toggle {
        display: block;
        position: fixed;
        z-index: 9999;

        background: url("assets/bars-solid.svg");
        background-repeat: no-repeat;

        width: 3.2rem;
        border: 0;
        aspect-ratio: 1;
        top: 2rem;
        right: 2rem;
    }

    .mobile-nav-toggle[aria-expanded="true"] {
        background-image: url("assets/xmark-solid.svg");
        width: 4rem;
        top: 1.5rem;
        right: 1rem;
    }
    /* BODY */
    .title_phonenum {
        text-decoration: underline;
    }

    .vfarms_sec a:hover {
        text-decoration: underline;
        color: hsla(54, 100%, 70%, 1);
    }
}

/* BODY */
/* TITLE  */
h1{
    font-size: 2.6em;
}

.title_sec-bg h1 {
    color: #fff;
}

.title_phonenum {
    color: #fff;
    font-size: 2em;
    margin: 0.5em;
}

.title_sec-bg {
    padding: 1.5em 0;
    margin: 0 1.5em;
    background-color: hsla(286, 0%, 0%, 0.6);
}

.title_sec {
    padding: 3em 0;
    background-image: url("assets/potato-hands-color.jpg");
    background-repeat: no-repeat;
    background-position: bottom 30% center;
    background-size: cover;
}

/* SEED GUIDE */
.seed-guide_sec {
    background-color: var(--bgcolor, hsl(0, 0%, 11%));
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    grid-auto-rows: 20em;
}

.seed-guide_sec h2, .seed-guide_sec a{
    padding-right: .2em;
    grid-column: 1 / 2;
    text-align: right;
    align-self: center;
    font-size: 1.8em;
}

.seed-guide_sec a {
    padding: 0;
    font-family: var(--font1, sans-serif);
    font-size: 1em;
}

.seed-guide-link {
    color: var(--highlight, yellow);
}

.seed-guide-link:hover {
    color: #e63d00;
}

.seed-guide_sec a:nth-child(2) {
    grid-column: 2 / 3;
    align-self: center;
    padding-left: .5em;
    width: 10em;
    height: auto;
}

.seed-guide_sec img {
    width: 10em;
    height: auto;
}

.seed-guide-words {
    display: block;
    color: #fff;
}

/* ABOUT  */
.about_sec {
    padding: 2.2em;
    background-color: #fff;
}

.about_sec h3, .about_sec p {
    color: #000;
}

.about_sec p {
    width: 18em;
    margin-right: auto;
    margin-left: auto;
}

.about_sec img {
    width: 10rem;
    padding-top: 1em;
}

/* FARM */ 
.farm_sec {
    background-image: url('assets/potatoes-ground.jpg');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
}

.farm_sec h2 {
    color: var(--prim-fontcolor, #fff);
}

.farm_sec a {
    color: var(--prim-fontcolor, #fff);
}

.farm_sec a:hover {
    color: var(--highlight, yellow);
}

.farm_sec ul {
    padding-bottom: .4em;
}

.farm_sec li {
    padding: .15em 0;
}

.farm_sec div {
    width: 22em;
    margin-left: auto;
    margin-right: auto;
    background-color: hsla(16, 0%, 0%, 0.7);
}

/* RESOURCES */
.resources_sec {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    background-color: hsla(80, 80%, 30%, 1);
}

.resources_sec img {
    grid-column: 1 / 2;
    width: 10em;
    margin-left: .5em;
    align-self: center;
    justify-self: right;
}

.resources_sec div {
    display: block;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    text-align: left;
    padding-left: .25em;
    margin: 2.5em .75em;
}

.resources_sec h2 {
    font-size: 1.5em;
}

.resources_sec p {
    font-size: 1.25em; 
}

.resources_sec a {
    display: inline-block;
    text-align: center;
    color: white;
    border: none;
    border-radius: 3px;
    padding: .8em 1em;
    font-size: 1.2em;
    background-color: hsla(104, 50%, 20%, 1);
}

.resources_bold {
    padding-bottom: 1em;
}

.resources_sec a:hover {
    background-color: hsla(0, 0%, 0%, 1);
}

/* FOOTER */
.contact_info {
    padding: 3em;
    background-image: url("assets/tractor.jpg");
    background-size: cover;
    background-position: bottom 25% center;
}

.contact_info p,
.contact_info address,
.contact_info a {
    font-family: var(--font2, sans-serif);
    color: var(--sec-fontcolor, #fff);
    font-style: normal;
    font-size: 1em;
}

.contact_info a:hover {
    color: var(--highlight2, #138000);
}

.contact_info address {
    padding: .4em;
}

.contact_info div {
    padding: .4em .1em;
    background-color: hsla(0, 0%, 100%, .8);
}

.street,
.city,
.postal {
    display: block;
}

.copyright {
    background-color: hsla(32, 0%, 20%, 1);
    padding: .2em;
}

.copyright p {
    font-size: .8em;
    color: hsla(32, 0%, 60%, 1);
}

/* VARIETIES PAGE */
/* V GENERAL */
.vari_main h1,
.vari_main a {
    color: #000;
}

/* V NAV */
.vari_nav {
    display: flex;
    gap: 1rem;
    margin: .5em;
    justify-content: center;
    align-items: center;
}

.vari_nav a {
    color: #000;
}

.vari_nav a:hover {
    color: var(--highlight2, #138000);
}

.vari_download_btn a {
    display: block;
    color: #fff;
    border: none;
    padding: .6em .8em;
    font-size: 1em;
    border-radius: 3px;
    background-color: hsla(104, 50%, 20%, 1);
}

.vari_download_btn a:hover {
    color: #fff;
    background-color: hsla(104, 50%, 10%, 1);
}

.vari_seed_nav {
    padding: 3em 0;
    background-color: #000;
    background-image: url("assets/field-bg3.png");
    background-repeat: no-repeat;
    background-position: bottom 75% center;
    background-size: cover;
}

.vari_seed_nav div {
    padding-bottom: .5em;
    background-color: hsla(0, 100%, 0%, .6);
}

.vari_seed_nav h1 {
    color: #fff;
    font-size: 3em;
}

.vari_seed_nav ul{
    display: grid;
    text-align: center;
    grid-template-columns: 1fr 8em 8em 1fr;
    grid-template-rows: 2em 2em 2em auto;
    justify-content: space-between;
}

.vari_seed_nav a {
    color: #fff;
    font-size: 1.4em;
}

.vari_seed_nav a:hover {
    color: var(--highlight, #ffee05);
    transition: .3s;
}

.red-seed,
.white-seed,
.purple-seed {
    grid-column: 2 / 3;
}

.russet-seed,
.yellow-seed,
.spec-seed {
    grid-column: 3 / 4;
}

.red-seed,
.russet-seed {
    grid-row: 1 / 2;
}

.white-seed,
.yellow-seed {
    grid-row: 2 / 3;
}

.spec-seed {
    grid-row: 3 / 4;
}

.redyellow-seed {
    grid-column: 2 / 4;
    grid-row: 4 / 5;
}

/* V SEED VARIETIES LISTS */
.vari_main h3 {
    font-size: 1.5em;
    margin: .3em auto .5em 1em;
}

.vari_main summary {
    padding: .3em;
    font-family: var(--font2, sans-serif);
    font-size: 1.2em;
    cursor: pointer;
    text-align: left;
}

.vari_main details {
    padding: .2em 0;
    border-top-style: solid;
    border-width: 2px;
}

.bottom-line {
    border-bottom-style: solid;
    border-width: 2px;
}

/* #yellow-seed {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
} */

#red-seed li,
#russet-seed li,
#white-seed li,
#yellow-seed li,
#redyellow-seed li,
#spec-seed li,
#purple-seed li {
    padding: .2em 0;
    margin: 0 0 0 2em;
    font-family: var(--font2, sans-serif);
    font-size: 1em;
    text-align: left;
}

#red-seed a:hover,
#russet-seed a:hover,
#white-seed a:hover,
#yellow-seed a:hover,
#redyellow-seed a:hover,
#spec-seed a:hover,
#purple-seed a:hover {
    color: var(--highlight2, orange);
    text-decoration: underline;
}

#red-seed,
#russet-seed,
#white-seed,
#yellow-seed,
#redyellow-seed,
#spec-seed,
#purple-seed {
    padding: 1.5em 2em;
    background-color: #fff;
}

.vnote {
    padding: 2em 0;
    background-color: #fff;
}

/* V FARM CONTACT LIST */
.vfarms_sec {
    background-color: hsla(35, 100%, 7%, 1);
}

.vfarms_sec h2 {
    margin: 0 auto;
    width: 9.5em;
    font-size: 2.5em;
    color: #fff;
    border-bottom-style: solid;
    border-width: 2px;
}

.vfarms_sec h4,
.vfarms_sec p,
.vfarms_sec a {
    color: #fff;
}

.email a:hover,
.website a:hover {
    text-decoration: underline;
    color: hsla(54, 100%, 70%, 1);
}

.vfarms_sec div {
    padding: 1em .5em;
    margin: 0 .3em;
}

.address1,
.address2,
.telnum,
.faxnum,
.email,
.contact-name,
.cellnum
.website {
    display: block;
}

.backtotop-link img{
    display: block;
    position: fixed;
    z-index: 9999;
    width: 4em;
    bottom: 3rem;
    right: 1.5rem;
}

/* ANIMATION TESTS *//*
@keyframes fadeinout {
    from {border: white 2px solid;}
    to {border: none;}
} */

/* BLUR */
@supports (backdrop-filter:blur(.4rem)) {
    .title_sec-bg {
        background-color: hsla(0, 100%, 0%, .5);
        backdrop-filter: blur(.1rem);
    }

    .farm_sec div {
        background-color: hsla(0, 100%, 0%, .4);
        backdrop-filter: blur(.2rem);
    }

    .vari_seed_nav div {
        background-color: hsla(0, 100%, 0%, .2);
        backdrop-filter: blur(.1rem);
    }
}


/* LG SCREEN ADJUSTMENTS */
@media (min-width: 55em){
    body {
        height: 100vh;
        margin: 0 auto;
        max-width: 80rem;
        padding: 0 .5rem;
        background-color: hsla(142, 15%, 90%, 1);
    }

/* 55em NAV */
    .primary-nav {
        padding-right: 1em;
    }
/* NAV UNDERLINE ANIMATION */
    .primary-nav li,
    .vari_nav li,
    .underline2 {
        position: relative;
    }

    li.underline:after {
        display: flex;
        position: absolute;
        content: "";
        height: 3px;
        width: 100%;
        background-color: var(--highlight2, #138000);
        left: 0;
        bottom: -5px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        transform: scaleX(0);
        transition: transform .2s ease-in-out;
    }

    li.underline2:after {
        display: flex;
        position: absolute;
        content: "";
        height: 3px;
        width: 100%;
        background-color: var(--highlight, #ffee05);
        left: 0;
        bottom: -5px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        transform: scaleX(0);
        transition: transform .2s ease-in-out;
    }

    li.underline:hover:after,
    li.underline2:hover:after {
        transform: scaleX(1);
    } 

/* 55em BODY */
/* 55em TITLE */
    .title_sec-bg {
        width: 50em;
        margin-left: auto;
        margin-right: auto;
    }
    
    .title_sec {
    padding: 5em 0;
    }

/* 55em RESOURCES */
    .resources_sec {
        grid-template-columns:1fr 1fr 1fr 1fr 1fr;
    }

    .resources_sec img {
        grid-column: 2 / 3;
    }

    .resources_sec div {
        grid-column: 3 / 5;
    }

/* 55em FOOTER */
    .contact_info {
        padding-left: 12em;
        padding-right: 12em;
    }

/* 55em VARI PAGE */
    .vari_nav {
        padding-right: 3em;
    }

    .vari_nav {
        gap: 2rem;
    }
    /* add Farms to navigation links when at this size but finish
    styling before figuing that out */

/* V SEED NAV */
    .vari_seed_nav ul{
        display: flex;
        padding: 0 4em;
        align-items: center;
    }

/* V SEED LISTS */
    .seed-lists {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;

        background-color: #fff;
    }

    #red-seed {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    #russet-seed {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

/* V FARMS LIST */
    .vfarms_sec {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .vfarms_sec h2{
        grid-column: 1 / 3;
    }

    #adri-farm,
    #espo-farm,
    #hask-farm,
    #kroe-farm,
    #spud-valley-farm {
        grid-column: 1 / 2;
    }

    #north-farm,
    #south-farm,
    #spru-farm,
    #spud-plains-farm,
    #swan-farm {
        grid-column: 2 / 3;
    }

    #adri-farm,
    #south-farm{
        grid-row: 2 / 3;
    }

    #espo-farm,
    #spru-farm {
        grid-row: 3 / 4;
    }

    #hask-farm,
    #spud-plains-farm {
        grid-row: 4 / 5;
    }
    
    #kroe-farm,
    #swan-farm {
        grid-row: 5 / 6;
    }
    
    #spud-valley-farm {
        grid-row: 6 / 7;
    }

    /* V BACK TO TOP LINK */
    .backtotop-link img{
        width: 4.5em;
        bottom: 4rem;
        right: 4rem;
    }
}