/* import Inter font, using 300, 400, 700, 900 weights. These can be declared individually using font-weight: 400; */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap');

@font-face {
    font-family: 'Inter';
    src: url(fonts/inter.ttf)
}

h1, p {
    font-family: Inter;
    font-weight: bolder;
}

/* global adjustments to remove padding from widths and margin from body, etc… */
* {
    box-sizing: border-box; 
    margin:0; /* remove all margins on everything, typically not the best approach */
}

body {
    margin:0;
    background-color: #faf2ea;
    font-size: 1em; /* default font size, this creates a 16px scale for <p> text, headings are scaled in relation to this, for example h1 double this, so it is 2em */
    line-height: 1.2; /* setting line height for <p> */
    font-family: 'Inter', sans-serif; /* setting a font and weight (next line) for everything, overriding it in other locations where needed */
    font-weight: 700;
}

section.cards { /* creating a "container" for the smoothie instructions */
    width:90vw;
    height:190vh;
    margin: 5vh 5vw;
    padding:1vw;
    background: #fff;
    box-shadow: 0px 3px 20px rgba(0,0,0,0.2); /* X offset, Y offset, blur amount, color */
/* these flex properties create a flexbox that works on the <h1>, .top-card, .base, .sweet, .fruit, and .add, as they are the child elements of .cards */
    display: flex; 
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: 2rem;

}

h1 { /* styles for the title */
    font-size: 6vw;
    width:100%;
    font-family: 'Inter', sans-serif;
    color: #FF881B;
    margin:0;
    padding-top: 40px;
}


ul { /* applies to all unordered lists. including the nested Boba Jellies options list */
    font-size: 1.75rem;
    margin: 1rem;
    color: #094704;
}

/* set the sizes of the boxes, the .top-card class is wrapped around .first (which is wrapped around .hours and .size) and .base. This allows a first row to be created with those items that wasn't possible with the previous HTML element set up */
.top-card {
    width:100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    gap: 2rem;
}
 
.first { /* this container holds and controls .hours and .size */
    width:25%;
    display: flex;
    flex-flow: row wrap;
   justify-content: center;
   gap: 2rem;
}

.hours, .size { /* this makes .hours and .size horizontally fill their container (.first) the padding is just for spacing */
    width:100%;
    padding:1vw;
}

.hours { /* sets the color and font styles for .hours */
    color: #FF881B;
    font-size:40px;
    font-weight: 400;
    margin:0;
}

.base { /* sets the width of base so it is larger than .first */
    width:75%;
    padding:1vw;
}

.sweet { /*sets the size of sweet so it matches .first up above it */ 
    width:25%;
    padding:1vw;
}

.fruit { /* sets the width of .fruit using calc(), which we haven't used before. the instruction basically says make this element 75% minus 2viewport widths (2%) this accomodates the padding */
    width:calc(75% - 2vw);
    padding:1vw 0;
}

.add { /*sets the width on .add which makes it fit on a new row */
    width:100%;
    padding:1vw;
}


/* add outlines, lines and background colors to specific boxes */
.size, .base {
    border: 1px solid #094704;
    position: relative; /* used for .base:after so I could make a double line */
}

.base:after { /* creates the double line on .base */
    content: "";
    width: calc(100% - 15px);
    height:calc(100% - 15px);
    border: 1px solid #094704;
    position: absolute;
    left:5px;
    top:5px;
    right:5px;
    bottom:10px;
}

.sweet {
    border-right: 1px solid #094704;
}

.add {
    border-top: 1px solid #094704;
}

.step { /* all .step numbered headings use this for their orange background and white text */
    background-color: #FF881B;
    padding:1vw;
    border-radius:10px;
    color: #fff;
    font-weight: 900;
    font-size: 2vw;
}

.size ul {
    list-style-image: url('../links/sizeIcon.png'); /* add icons to bullet points for size, we can explore a different method to make these bigger if you prefer */
}

/*-----add numbers to step titles */
.step p:before { /* this is used to add margin-right to all of the items below, without having to repeat this property every time */
    margin-right:1rem;

}
.size .step p:before {
    content: "1";
}
.base .step p:before {
    content: "2";
}
.sweet .step p:before {
    content: "3";
}
.fruit .step p:before {
    content: "4";
}

.add .step p:before {
    content: "5";
}

/*-----adjust ingredient lists into multi column layouts */
.base, .fruit, .add {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-evenly;
}

.base .ingredients, .fruit .ingredients, .add .ingredients {
    flex: 1;
    display: flex;
    justify-content: stretch;
}

.base ul, .fruit ul, .add ul:not( ul ul) { /* creates a flexbox container on the uls in fruit and add, but not the nested list in Boba Jellies */
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: space-around;
}

.base ul li  { /* adjusts the widths so .base list has two columns */
    width:50%;
}

.fruit ul li { /* adjusts the widths so .fruit list has three columns */
    width:30%;
}

.add ul:not(ul ul) li { /* adjusts the widths so .add list has four columns */
    width:25%;
}

/* adjusts the Boba Jellies nested list below */
 /*.add ul ul { 
   display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
} */

.sweet ul li {
    margin-bottom: 60px;
}

.size ul li {
    margin-bottom: 60px;
}

.add ul li:not(.add ul ul li) {
    margin-bottom: 80px;
}
 .hours p {
    margin-bottom: 20px;
    margin-top: 10px;
    font-size: 27px;
 }

 .ingredients:not(.base .ingredients, .fruit .ingredients){
    margin-top: 3rem;
 }