/* 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 */
    text-align: center;
}

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*/
    text-align: center;
}







/* 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 */
}
#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 a {
    text-decoration: none;
    color: inherit;
}

h1 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*/
}



/* 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*/
}