/* BASE CSS (Initial Setup)
-----------------------------
    #BASE CONTENT
        #TYPOGRAPHY
            #BODY
            #HEADINGS
            #PARAGRAPHS
            #LINKS
            #ARTICLE
            #HELPERS
        #MEDIA
            #IMAGES
        #COMPONENTS
            #BUTTONS
    #BASE LAYOUT
        #SIMPLE RESET
        #MEDIAQUERIES
        #CONTAINER
        #GRID SYSTEM
            #CLEARFIX
    #BASE SITE
        #SITE STRUCTURE
            #HEADER
                #site-id (LOGO)
            #FOOTER
            #SECTIONS
            #SUB PAGES
        #SITE NAVIGATION
            #TOGGLE-NAV (Default for Small Screens)
----------------------------------- */

/* TYPOGRAPHY */
body {
    font-size: 87.5%; /* 14px, 16px = 1em */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    line-height: 1.3;
    color: rgba(0 0 0 / 0.8);
}

/* HEADINGS */
/*
    Based on a Traditional Typographic Scale
    48, 36, 24, 21, 18, 16
*/


h1, h2, h3, h4, h5, h6 {
    margin: 0.5em 0;  
}
h1 {
    font-size: 3em; /* 48px */
    line-height: 1em;
}
h2 {
    font-size: 2.25em; /* 36px */
    line-height: 1.1em;
}
h3 {
    font-size: 1.5em; /* 24px */
    line-height: 1.2em;
}
h4 {
    font-size: 1.3125em; /* 21px */
    line-height: 1.3em;
}
h5 {
    font-size: 1.125em; /* 18px */
    line-height: 1.4em;
}
h6 {
    font-size: 1em; /* 16px */
    line-height: 1.5em;
}

/* PARAGRAPH */
p {
    margin: 0.5em 0;
    max-width: 60em;
}

/* LINKS */
a {
    color: rgba(0,0,153,.7);
    text-decoration: none;
}

a:hover {
    color: rgba(0,0,153,1);
    text-decoration: underline;
}

/* HELPER CLASSES */
.text-centered {
    text-align: right;
}
.full-width {
    max-width: none;
    width: 100%;
}
.horiz-center {
    margin-left: auto;
    margin-right: auto;
}
.hidden {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
@media (min-width: 768px) {
.hidden-desktop {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
}
@media (max-width: 767px) {
    .hidden-mobile {
        position: absolute;
        top: -9999px;
        left: -9999px;
}
}

/* IMAGES */
img {
    max-width: 100%;
    height: auto;
}

/* BUTTONS */
.button {
    font-size: inherit;
}

.button,
button,
form input[type="submit"] {
    font-size: inherit;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    line-height: 1.2;
    background-color: rgba(77,71,45,.8);
    border: 1px solid rgba(77,71,45,.8);
    color: rgba(250,245,239,.8);
    padding: 0.6em;
    display: inline-block;
    margin: 0.5em 1em 0em 0em;
    text-align: center;
    border-radius: .5em;
}

.button:hover,
button:hover,
form input[type="submit"]:hover {
    background-color: rgba(77,71,45,1);
    border-color: rgba(77,71,45,1);
    color: rgba(250,245,239,1);
    text-decoration: none;
}

.button.alt {
    border: 1px solid rgba(77,71,45,.8);
    background-color: transparent;
    color: rgba(77,71,45,.8);
}

.button.alt:hover {
    border-color: rgba(77,71,45,2);
    color: rgba(250,245,239,1);
}

/* LAYOUT */

/* SIMPLE RESET */
* { box-sizing: border-box; }

body { margin: 0; }

/* CONTAINER */
.container {
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 0 4%;
}

/* MEDIA QUERIES */
@media (min-width: 768px) {
}

/* TABLET SIZED STYLING GOES HERE */
@media (min-width: 1050px) {
    body {
        font-size: 100%; /* 16px */
    }
}

@media (min-width: 1250px) {
    body {
        font-size: 112.5%; /* 18px */
    }
    .container {
        max-width: 1200px;   
    }
}

/* FOR DEMO PURPOSES ONLY */
body.demo {
    padding-top: 2em;
}

body.demo::before {
    content: "Small (Mobile) Screen (less than 768px)";
    background-color: powderblue;
    width: 100%;
    position: fixed;
    top: 0;
    text-align: right;
    padding: .25em;
}

@media (min-width: 768px) {
    body.demo::before {
        content: "Medium (Tablet) Screen (768px - 1050px)";
        background-color: palevioletred;
        width: 100%;
        position: fixed;
        top: 0;
        text-align: right;
        padding: .25em;
}
}

@media (min-width: 1050px) {
    body.demo::before {
        content: "Large (Notebook) Screen (1050px - 1250px)";
        background-color: palegoldenrod;
        width: 100%;
        position: fixed;
        top: 0;
        text-align: right;
        padding: .25em;
}
}

@media (min-width: 1250px) {
    body.demo::before {
        content: "Extra Large (Desktop) Screen (1250px +)";
        background-color: peachpuff;
        width: 100%;
        position: fixed;
        top: 0;
        text-align: right;
        padding: .25em;
}
}

/* SEMATIC GRID SYSTEM */

.row > .column {
    margin-bottom: 4%;
}

@media (min-width: 768px) {

    .row {
        display: flex;
        justify-content: space-between;
        margin-left: -2%;
        margin-right: -2%;
    }
    
    .row > .column {
        flex-grow: 1;
        margin-left: 2%;
        margin-right: 2%;
    }

    .row > .column.one-half {
        max-width: 46%;
    }

    .row > .column.one-third {
        max-width: 29.3333%;
    }

    .row > .column.two-thirds {
        max-width: 66.6666%;
    }

    .row > .column.one-fourth {
        max-width: 21%;
    }

    .row > .column.three-fourths {
        max-width: 79%;
    }

    .row > .column.two-fourths {
        max-width: 58%;
    }

    .row > .column.centered {
        margin-left: auto;
        margin-right: auto;
    }

    .row > .column.centered {
        margin-left: auto;
        margin-right: auto;
    }
}

/* FOR DEMO PURPOSES ONLY */
.demo .column {
    background-color: rgba(0, 0, 0, .2);
    padding: 1em;
    text-align: center;
}

/* SITE HEADER */
.site-header {
    padding: .5em 0;
}

/* ON LARGER SCREEN LOGO GOES LEFT AND NAV GOES RIGHT */
@media (min-width: 768px) {
    .site-header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* STYLING FOR BOTH SITE HEADER AND FOOTER */
.site-header a,
.site-footer a {
    color: rgba(219,208,206,.8);;
}

.site-header a:hover,
.site-footer a:hover {
    color: rgba(219,208,206,1);
    text-decoration: none;
}

/* LOGO AREA */
.site-id h1 {
    font-size: 1.5em;
    margin: 0;
    text-align: center;
}

/* SITE-NAV */
.site-nav ul {
    font-size: 1.25em;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
}

.site-nav a {
    display: block;
    padding: 1.5em;
}

.site-nav .menu-button {
    display: none;
}

.site-nav {
    padding-right: 2em;
}
/* SECTIONS */
section {
    padding: 3em 0;
}

/* PRODUCTS */
.column.one-third {
    text-align: center;
}

/* HERO */
.hero {
    padding: 6em 4%;
    background-color: rgba(250,245,239,1);
    text-align: right;
}

.hero h2, p {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.hero h2 {
    color: rgba(77,71,45,1);
    padding: 0 .5em 0;
}

.hero p {
    color: rgba(145,134,116,1);
    padding: 0 1em 0 9em;
}

/* OUR STORY */
.hero.text-centered {
    margin-top: 0;
    margin-bottom: 0;
    text-align: right;
}

.row p {
    margin-left: 0;
}

/* TOGGLE NAV */
@media (max-width: 767px) {
    .site-header {
        padding-bottom: 1.5em;
    }
    .toggle-nav .site-id {
        position: absolute;
        /* margin-top: 0em; */
    }
    .toggle-nav .site-nav {
        text-align: right;
    }
    .toggle-nav .site-nav .menu-button {
        display: block;
        display: inline-block;
        cursor: pointer;
        padding: 0.3em 1em;
        border: 1px solid rgba(250,245,239,1);
        /* margin-bottom: 0.5em; */
    }
    .toggle-nav .site-nav .menu-button::selection {
        background-color: rgba(250,245,239,1);
    }
    .toggle-nav .site-nav ul {
        display: block;
        text-align: center;
    }
    .toggle-nav .site-nav a:hover {
        background-color: rgba(250,245,239,1);
        color: rgba(145,134,116,1);
    }
    .toggle-nav[data-navstate="closed"] ul {
        height: 0;
        overflow: hidden;
    }
    .toggle-nav[data-navstate="open"] ul {
        height: auto;
        overflow: visible;
    }

/* NAVICON */
    .toggle-nav .site-nav .menu-button.navicon {
        border: none;
        color: rgba(255,255,255,0);
        padding: 0;
    }
    .toggle-nav .site-nav .menu-button.navicon::after {
        content: "\2630";
        display: inline-block;
        color: rgba(250,245,239,.8);
        font-size: 2em;
        margin-top: .5em;
        padding: 0.3em 0.2em 0.4em 0em;
        text-align: center;
    }
    .toggle-nav[data-navstate="open"] .site-nav .menu-button.navicon::after {
        content: "\2715";
    }
}

/* STICKY FOOTER */
/* .site-footer.sticky {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 100;
    background-color: #fff;
} */

/* STICKY HEADER - works with a class="sticky" on .site-header */
.site-header.sticky {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
    background-color: rgba(77,71,45,1);
}

.site-header.sticky+.site-main {
    padding-top: 3em;
}

#about {
    background: rgba(0,0,0,0.05);
}

#contact {
    background: rgba(0,0,0,0.1);
}

/* SUB PAGES */
article {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10em;
}

article h1, 
article h1 + .subhead,
article .date {
    text-align: center;
}

article h2.subhead {
    font-weight: normal;
    font-size: 1.7em;
    line-height: 1.2;
    opacity: .8;
}

article .date {
    font-size: 75%;
    font-weight: normal;
    opacity: .5;
    margin-bottom: 3em;
}

article h1 {
    margin-top: 2em;
}

article p + h2,
article p + h3,
article p + h4 {
    margin-top: 1.6em;
}

article h3 {
    font-size: 112.5%;
    font-weight: bold;
}

blockquote {
    margin: 4em 2em 4em 2em;
}

.site-footer {
    margin-top: 5em;
}

/* 
article p:first-of-type {
    font-size: 1.4em;
    line-height: 1.3;
}*/

/* article p:first-of-type:first-letter {
    font-size: 3em;
    line-height: 1em;
    background: #000;
    color: #fff;
    padding: .2em .4em;
    margin-right: .3em;
    float: left;
} */

/* FORMS */

form {
    max-width: 600px;
    margin: 0 auto;
}

form label,
form input,
form textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
}

form label {
    margin-top: 1.5em;
    margin-bottom: 0.3em;
}

form input[type="text"],
form textarea {
    border: 0px;
    padding: .8em;
    color: #666;
}

form textarea {
    min-height: 15em;
    font-size: 87.5%;
    line-height: 1.5;
}

form input[type="submit"] {
    margin-top: 1.5em;
    width: auto;
}

/* CUSTOM SITE CSS */
.section-title {
    text-align: center;
    margin-bottom: 2em;
}

.section-title::after {
    content: "";
    display: block;
    width: 100px;
    margin: .5em auto;
    border-bottom: 3px solid rgba(0,0,0,.2);
}

/* Vertical Media Query add height/padding to bottom of contact section only for large screen - crredit to Romina for this idea */
@media (min-height: 600px) {
    #contact {
        padding-bottom: 15em;
    }
}

#products {
    padding: 3em 4%;
    text-align: right;
}

#products h2 {
    padding-right: 2%;
    max-width: 1200px;
    text-align: right;
    color: rgba(77,71,45,1);
}

/* PRODUCTS STYLING */
#products {
    position: relative;
    background: rgba(250,245,239,1);
}

#products .beans {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    translate: -60% 0;
}


#products .pomelo {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    translate: 50% 110%;
}

#products .turmeric {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    translate: -40% 210%;
}

h4 {
    font-weight: normal;
}

#blog h4 {
    text-align: left;
    padding: 1em 1.25em 0em 0.5em;
}

.read a {
    float: left;
    padding-left: 0.6em;

}

#blog h2 {
    padding-left: 1.35em;
    color: rgba(77,71,45,1);
}

.verticalLine {
    border: 1px solid black;
}

#quote {
    background: rgba(170,164,119,0.6);;
}

#quote h2 {
    text-align: center;
    color: rgba(77,71,45,1);
}

.column ul {
    list-style: none;
    text-align: left;
    padding: 0;   
}

.column h4 {
    text-align: left;
}

.column p {
    text-align: left;
}

#site-footer {
    max-width: 1075px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
}