/* imports, downloaded fonts and creates a name for the font */

@font-face {
  font-family: 'Inter';
  src: url(fonts/Inter/Inter-VariableFont_opsz\,wght.ttf) format("truetype");
}

@font-face {
    font-family: 'Figtree';
    src: url(fonts/Figtree/Figtree-VariableFont_wght.ttf) format("truetype");
}

@font-face {
    font-family: 'Libre';
    src: url(fonts/Libre_Caslon_Condensed/LibreCaslonCondensed-VariableFont_wght.ttf) format("truetype");
}

@font-face {
    font-family: 'Lato';
    src: url(fonts/Lato/Lato-Regular.ttf) format("truetype");
}




/* GENERAL OVERALL RULES CSS */

/*entire doc*/
body {
    margin: 0px; /*i did this because default margin is 8px and it creates white edges all around which look bad*/
}


/* writing and text p */
p {
    font-family: 'Lato', Arial, sans-serif; /* set font of p */
    font-size: 1.2rem ; /* size of font */
    line-height: 1.5; /* 1 line */
}

main {
    background-color: #F8C49B; /* bg color of main set to peach */
    padding: 50px; /* spacing top bottom left right 50px*/
}

main > * {
    width: 80%; 
    margin: 45px auto; /* creates proper spacing*/
}

h2 {
    font-family: 'Libre', Georgia, serif; /* set font h2 */
    font-size: 2.6rem; /* font size */
    color: #4A2511; /* font color*/
}







/* HEADER CSS*/






/* This customizes the header */
header {
    background-color: #3B1D0E; /* adds background color to the header */
    top: 0; /* keeps the header stuck at the top */
    position: sticky; /* header stays on page while scrolling*/
    z-index: 1000; /* adds a value to make it sit ontop of everything underneath this value, everything has
    an invisible z-index xyz u cant see it but its just there*/
    display: flex; /* I want everything inline so I flexed all the items in header*/
    align-items: center; /* aligns items in header centrally vertically */
}

/* This customizes the logo */
#logo {
  height: 90px; /* Adds a size constraint so the raw logo svg doesnt takeup the entire screen */
  width: auto; /* It's set to auto so the scaling stays uniform and the logo doesn't deform */
}

/* This customizes the cream version of the logo */
#logo_cream {
  height: 90px; /* Like before it adds a size constraint and properly sizes the image, uniformly to the last logo */
  width: auto;
  position: absolute; /* ignores the regular document spacing and places it to the last element */
  top: 0; /* This positions the cream logo to align top with the logo's top */
  left: 0; /* Positions the cream logo to align to the logo's left */
  /* bottom and right are now not needded as the logo is now aligned */
  opacity: 0; /* Makes the logo invisible otherwise by default it would be visisble */
}

/* changes logo cream undergoes during mouse hover */
header a:hover #logo_cream {
  opacity: 1; /* from 0-1 show opacity of cream logo when mouse is hovering, i want it to be visible so 1 = 100% */
}

/* changes both logos in header undergoes during mouse hover*/
header a:hover figure {
  transform: scale(1.1); /* scales the logo up to 110% of its original size */
  transition: transform 0.3s ease-in-out; /* adds a transition with the scaling to create animative effect */
}

/* Customizes the social media links to look like buttons */
.socials{
    list-style: none; /* removes defeault list style, (bullet point) */
    padding: 0px 50px 0px; /* top has no spacing 0px, middle is left and right 50px padding between the start and beginning of list, 0px bottom*/
    display: flex; /* makes the list items display in a row instead of a column */
    gap: 50px; /* adds a gap of 50px between each social link "button", padding on added spacing between the entire thing */
    
}

/* Customizing the links in the list of social media */
.socials a {
    background-color: #FC6D00; /* Gives the links a background for each so it looks like a button */
    border-radius: 50%; /* before they were square backdrps now i turned it into circles by making the edges super rounded */
    width: 50px;
    height: 50px; /* width and height are equal so the backdrop make ideal-sized circles */
    color: white;  /* Makes the icons inside it white */
    font-size: 24px; /* font size icons are bigger than default easier to see now */
    display: flex;  /* items within links are now flex so they can be customized further and fit inside circle design I had in mind*/
    align-items: center; /* aligns the icons vertically in the center */
    justify-content: center; /* aligns the icons horizontally in the center */
}

/* customize appearance of socials when mouse hovers*/
.socials a:hover {
    background-color: #FFF3E0; /* changes background of button to cream color matching cream logo hover */
    color: #3B1D0E; /* recolors icon because white on white is unreadable, to brown*/
    transform: scale(1.1); /* slightly sizes it up like the logo does, 110% original size, alert user it's being hovered*/
  transition: transform 0.3s ease-in-out; /* transition for applied mouse hover changes similarly to logo function*/
}

/* customize content in nav and nav */
nav {
    background-color: #FC6D00; /* bg color of nav is orange now */
    border: 6px solid #ff4502;
    font-family: 'Lato', Arial, sans-serif; /* font is set to lato for everything in it*/
}

/* custmise nav links */
nav ul {
    list-style: none; /* removes list style, removes defeault bulletpoints */
    display: flex; /* everyting sits inline */
    gap: 60px; /* 20 px between each element */
    margin: 0; /* removes default margin so i can space it how i want */
    padding: 15px 100px 15px 115px; /* spacing between other elements */
    align-items: center; /* centers everything in it vertically*/
}

/* now editing the links*/
.internal_links a{
    text-decoration: none; /* removes line underneath*/
    color: white; /* color of links font white */
    font-size: 1.5rem; /* sizes font */
}

/* when the link is the current page in internal links*/
.internal_links a[aria-current="page"] { /*current page is marked */
  color: #FFE600; /* changes the color of the current page link to yellow to communicate current page*/
}

/* hover appearance of links */
.internal_links a:hover {
  color: #000000; /* changes the links to black */
}






/* FEATURED RECIPE SECTION CSS*/

/* heading and main page piece */
h1 {
    font-family: 'Libre', Georgia, serif; /* set font */
    font-size: 3.2rem; /* set font size */
    margin-bottom: 20px; /* spacing bottom 20px */
    color: #ffed9c; /* color of font */
    background-color: #ea1313; /* bg color*/
    border: 8px solid #c92323; /* outline color*/
    border-radius: 8px; /* rounds border*/
    padding: 20px 20px; /* spacing */
}

/* calls and applies to the entire featured recipe section*/
#featured_recipe { /* parent container for grid */
    display: grid; /* calls and creates grid */
    grid-template-columns: 1fr 1fr; /* I only want 2 sections 2 parts left and right, so 1fraction 1 fraction 
    I now fractioned it in half to match what I need where text goes on left image goes on right*/
    gap: 1em; /* this just creates a gap between columns, rows in the grid so whatever i place in it has a gap now*/
    align-items: center;
}


#featured_recipe_img {
  border-radius: 35px; /* rounds image corners*/
  width: 100%; /* width is 100% of grid container its placed in*/
  height: auto; /* automatically scales in relevance to width so it doesnt distort*/
  aspect-ratio: 1/1;
  object-fit: cover;
}

#featured_recipe_img:hover { /* when mouse hovers over featured recipe..*/
    animation: pulse 1s infinite; /* animation begins name "pulse" from animation library infinite means loops spans 1s per cycle*/
}

#h1-caption { 
    background-color:#a6471e; /* bg color*/
    text-align: center; /* centers text*/
    padding: 10px; /* makes it bigger and padding all around*/
    text-transform: uppercase; /* everything will be automatically made uppercase*/
    letter-spacing: 0.19em; /* typography yayyy spacing between each letter*/
    border-radius: 5px; /* curves border */
    font-weight: 500;/* boldness value */
    color: #ffe9d5; /* color of text*/
    font-family: 'Figtree', Arial, sans-serif; /* font*/
}

#tags {
    font-family: Georgia, 'Times New Roman', Times, serif; /* font and fallbacks*/
    color: #ffed9c; /* font*/
    display: flex; /* items are now flex and inline*/
    gap: 15px; /* 8px gap between each*/
    list-style: none; /* no bulet points*/
    justify-content: flex-end; /* flex items go to right/ end of container*/
}

#tags li {
    background-color: #ff7b00; /* bg color*/
    padding: 10px; /* expand it make bg bigger visually color*/
    border-radius: 50px; /* rounds edges*/
}


#featured_recipe h1 a,
#h1-caption a {
    color: inherit; /* inherits color from element above, not link color applied*/
    text-decoration: none; /*no underline from it being a link*/
}

#featured_recipe h1 a:hover,
#h1-caption a:hover {
    color:black; /* i added this hover feature so people do know its a link tho when they hover over it, font color turns black*/
    font-weight: 800; /*boldness*/
}

.button {
    font-family: 'Georgia'; /* view more button and bottom button styling, both same font georgia*/
    font-size: 1.2rem; /*size*/
    background-color: #ffed9c; /*bg color of button*/
    border-radius: 20px; /* its not acc a button its a link but it looks like a button thats why i say it*/
    color: #c92323; /*font color red*/
    text-decoration: none; /*no undrline*/
    padding: 10px; /*expands button backdrop visually*/
}




/* ABOUT RHONDA SECTION CSS*/






#about-rhonda {
    display: grid; /* when i want to arrange and swap over elements I use gridding therefore set display to grid type*/
    grid-template-columns: 1fr 1fr; /* setting container template like before 1fr 1fr 1fraction 1 fraction*/
    gap: 1em; /* gap between containers same gap space keep consistent as above grip container*/
    align-items: center;  /* centers elements vertically in their containers so for example the image beside will sit nicely beside the text container than misaligned*/
}

#about-rhonda-text {
    grid-column: 2;
    grid-row;
}

#about-rhonda-figure {
    grid-column: 1;
    grid-row: 1;
}

#about-rhonda-img {
  width: 100%; /* again, width is 100% of grid container its placed in*/
  height: auto; /* stays relevant to width size so image doesnt distort */
  aspect-ratio: 1/1; /* aspect ratio 1:1 is like the fraction of the image not resolution but like size overall*/
  object-fit: cover; /* sometimes the aspect or width height may distort image bc images stretches or changes to fit rules, this ensure the image remains unaltered*/
}

#rhonda-husband-figure {
  grid-column: 1 / -1; /* i put the gridding activity in resources but starting from 0 and counting with negatives u can specify which containers u want to place it in*/
}

#rhonda-husband-figure figcaption {
  text-align: center; /* centers text*/
  font-size: 1.6rem; /* sizing of it*/
  font-weight: bold;
  margin: 20px 0px; /* a little spacing so its not suffocating the caption */
  color: #4A2511;
  font-family: 'Lato', Georgia, 'Times New Roman', Times, serif; /* fallbacks and main font*/
}

#rhonda-with-her-husband {
  width: 100%;  /* 100 percent of container size*/
  height: auto; /* keeps relevance*/
}






/* STUDENT HELP SECTION CSS*/







#student-help {
    text-align: center; /*all text in it centered*/
}

#student-help-img {
  height: 3rem;  /* making the imported cdu image smaller*/
  width: auto;
}

#student-help h2 {
    color: #1C3A6E; /*yk and I know what this is*/
}



/* FOOTER CSS*/




footer {
    padding: 20px 20px 120px; /*this also creates spacing for the footer visual*/
    background-color: #FC6D00; /*bg color of footer*/
    background-image: url('../images/index_visuals/footer_visual_tone.svg'); /* yay the footer visuals*/
    background-repeat: no-repeat; /* if it was repeat it'd fill the whole footer even the writing which i don't want*/
    background-size: 100% auto; /*100% for as wide as the footer of img and auto for height, retains img proportions*/
    background-position: bottom; /* so it sits at thebottom*/
    color: white; /* writing is white*/
    font-family: 'Figtree', Arial, sans-serif; /*font and fallbacks*/
    font-size: 1.5rem; /*font size*/
    text-align: center; /*centers copyright*/
}

#footer_links {
    list-style: none; /*no bullet points*/
    display: flex; /*inline all link and flex items*/
    gap: 300px; /*gap between links*/
    justify-content: center; /*centers all the links*/
}