/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
* {
  box-sizing: border-box;
}
/*---------------------------------------------------END OF THE STYLE RESET-------------------------------------------*/

/*---------------------------------------------------TEXT STYLING-----------------------------------------------*/

body {
  background-color: #f6e8ac35;
}

main {
  /*margin: 10px 10px 10px 10px;*/
  max-width: 90vw;
  margin: 0 auto;
}

h1 {
  font-size: 2em;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  text-align: center;
}

.cheese-gallery h1 {
  padding-bottom: 0.5rem;
}

.logo h1 {
  font-size: 2em;
  color: #560102;
  font-weight: bold;
  margin: 0;
  background-color: #f6e8ac;
  padding-top: 0rem;
  padding-bottom: 0rem;
}

.logo p {
  font-size: 1em;
  color: #552000;
  background-color: #f6e8ac;
  padding-bottom: 0.5em;
}

.home h2 {
  padding-top: 1.5rem;
}

.home h2,
.home p,
.team p,
.story p,
.cheese-gallery p,
.cheese-gallery h2,
.team h2,
.events p,
.cheese-event-1 h2,
.cheese-event-1 p,
.cheese-event-2 h2,
.cheese-event-2 p,
.logo p,
.offers h2,
.offers p {
  text-align: center;
}

.home p,
.team p {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.story p {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.cheese-event-1 p,
.cheese-event-2 p,
.cheese-gallery p,
.offers p {
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
}

.cheese-event-1 h2,
.offers h2 {
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

.cheese-event-2 h2 {
  padding-bottom: 1.5rem;
}

.team h2 + p {
  padding-top: 0.5rem;
  padding-bottom: 2rem;
}

.columnone h2,
.columntwo h2,
.columnthree h2,
h2 {
  font-size: 1.5em;
}

h1,
h2,
.columnone h2,
.columntwo h2,
.columnthree h2 {
  color: #560102;
  line-height: 1.5em;
  font-family: adobe-garamond-pro, serif;
  font-weight: 600;
}

p {
  font-size: 1.2em;
}

.columnone p,
.columntwo p,
.columnthree p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1em;
  font-family: le-monde-livre-classic-byol, serif;
  font-weight: 300;
}

p,
ul li {
  color: #560102;
  line-height: 1.5em;
  font-family: le-monde-livre-classic-byol, serif;
  font-weight: 300;
}

/*-----------------------IMAGE STYLING-----------------------------------*/

.home img,
.story img,
.cheese-event-1 img,
.cheese-event-2 img,
.offers img {
  display: block;
  width: 400px;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}

.offers img {
  padding-top: 0.5em;
  padding-bottom: 1em;
}

.logo img {
  display: block;
  width: 200px;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}

.cheese-gallery img {
  display: block;
  width: 300px;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  padding-top: 0.5em;
  padding-bottom: 1em;
}

.cheese-event-1 img,
.cheese-event-2 img {
  padding-bottom: 0.5em;
  padding-top: 0.5em;
}

.team img {
  display: block;
  width: 400px;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  padding-top: 0.8rem;
  padding-bottom: 2rem;
}

/*-------------------------STYLING HEADER & NAVIGATION-----------------------------------*/

.header {
  padding: 60px 0;
}

.logo {
  background-color: #f6e8ac;
}

.logo img {
  display: block;
  margin: 0 auto;
}

.sidebar nav {
  padding: 10px 5px 5px 10px;
  margin: 0;
}

.sidebar nav ul {
  list-style-type: none;
  display: flex;
  flex-direction: column; /* Stack items vertically*/
  align-items: center; /* Center items horizontally */
  padding: 0;
  margin: 0;
}

.sidebar nav li {
  display: block; /* Ensure items are block elements */
  text-align: left; /* Center the text */
  padding: 10px 10px; /* Add spacing between items */
  margin: 5px 5px; /*creates space between items*/
}

.sidebar nav a {
  display: block; /* Make entire area clickable */
  padding: 10px 0;
  text-align: center;
  font-size: 1.5em;
  font-family: adobe-garamond-pro, serif;
  font-weight: 500;
  transition: 0.3s; /*gives a smoother animation between property changes*/
}

/*------------------LINK STATES--------------*/
ul li a:visited,
a:visited,
ul li a:link,
a:link {
  color: #560102;
  text-decoration: none;
}

ul li a:hover,
a:hover,
ul li a:focus,
a:focus,
ul li a:active,
a:active {
  color: #560102;
  text-decoration: underline; /*gives li item an underline when hovered over*/
}

.home a:link,
.home a:visited,
.story a:link,
.story a:visited,
.cheese-gallery a:link,
.cheese-gallery a:visited,
.cheese-event-1 a:link,
.cheese-event-1 a:visited,
.cheese-event-2 a:link,
.cheese-event-2 a:visited {
  color: #560102;
  text-decoration: underline;
}

.home a:active,
.home a:focus,
.home a:hover,
.story a:active,
.story a:focus,
.story a:hover,
.cheese-gallery a:active,
.cheese-gallery a:focus,
.cheese-gallery a:hover,
.cheese-event-1 a:active,
.cheese-event-1 a:focus,
.cheese-event-1 a:hover,
.cheese-event-2 a:active,
.cheese-event-2 a:focus,
.cheese-event-2 a:hover {
  color: #560102;
  text-decoration: none;
}

/*-------------------FOOTER----------------------------*/
footer {
  display: flex;
  flex-wrap: wrap; /* Allows responsiveness */
  justify-content: space-around; /* Spaces out the columns */
  padding: 10px;
  background-color: #f6e8ac;
  max-width: 100%;
}

/* Create a flexible layout for the three main columns*/
.columnone,
.columntwo,
.columnthree {
  flex: 1; /* Makes each column take equal space*/
  min-width: 250px; /* Ensures they don't shrink too much*/
  padding: 10px;
  padding-bottom: 5px;
}

.columnone a,
.columnthree a {
  transition: 0.3s; /*gives a smoother animation between property changes*/
}

svg {
  width: 16px;
  height: 16px;
}

footer > p,
.copyright {
  width: 100%;
  text-align: center;
  margin-top: 10px;
  font-size: 1em;
}

/*------------------------------------------------CREATING & STYLING THE HAMBURGER ICON--------------------------------*/

:root/*used to declare css variables,
  will make it easier to make changes to side bar styling*/ {
  --bar-width: 40px; /*how wide the sidebar will be*/
  --bar-height: 6px; /*how tall the bar will be*/
  --hamburger-gap: 5px; /*how big the gap is*/
  --foreground: #560102;
  --background: #f6e8acf0;
  --hamburger-margin: 8px; /*space around menu icon*/
  --animation-timing: 200ms ease-in-out;
  --hamburger-height: calc (var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}

.hamburger-menu {
  --x-width: calc(var(--hamburger-height) * 1.41421356237);
  display: flex;
  flex-direction: column; /*stacks the hamburger menu lines on top of each other*/

  gap: var(--hamburger-gap);
  width: max-content; /*stops the menu icon taking up the width of the screen*/

  position: absolute; /*postions the icon where i want it (top left of the screen)*/

  top: var(
    --hamburger-margin
  ); /*by setting top and left to hamburger margin, when the sidebar is opened the content will be pushed down based on the height of the hamburger menu icon*/

  left: var(--hamburger-margin);
  z-index: 2; /*controls the vertical stacking of the menu icon*/

  cursor: pointer; /*makes it clear to user that the menu icon is a clickable element*/
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
  content: "";
  width: var(--bar-width);
  height: var(--bar-height);
  background-color: var(--foreground);
  border-radius: 9999px; /*gives the menu lines a pill shape rather than a rectangle shape*/
  transform-origin: left center;
  transition: opacity var(--animation-timing), width var(--animation-timing),
    rotate var(--animation-timing), translate var(--animation-timing),
    background-color var(--animation-timing); /*allows menu transitions to be on the same timing*/
}

.hamburger-menu:has(input:checked) {
  --foreground: #560102;
  --background: #f6e8ac;
}

.hamburger-menu input {
  appearance: none; /*removes default apperance of the check box*/
  padding: 0; /*by setting padding and margin to 0 it sets the menu lines in a stacked position*/
  margin: 0;
  outline: none; /*gets rid of the outline that appears when users hover over the menu icon*/
  pointer-events: none; /*ensures all the interactions with the checkbox are through the label element placed in HTML*/
}

/*-------------------------CREATING THE X ON THE SIDEBAR-------------------*/

/*checking if the input has been checked using the has selector*/
.hamburger-menu:has(input:checked)::before {
  rotate: 45deg; /*roating the bottom line to form the first part of the X*/
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / -2); /*to offset the element*/
}

.hamburger-menu:has(input:checked)::after {
  rotate: -45deg; /*roating the opposite direction to form the second part of the X*/
  translate: 0 calc(var(--bar-height) / 2);
}

.hamburger-menu input:checked {
  opacity: 0; /*by setting both opacity and width to 0, the middle line of the menu icon will disappear when clicked on*/
  width: 0;
}

/*----------------------ACCESSIBILITY STYLING----------------------*/
/*makes it clear to users who are using the keyboard or other to navigate that the menu and X icons have been checked*/
.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible {
  border: 1px solid var(--background);
  box-shadow: 0 0 0 1px var(--foreground);
}
/*------------------------------------------------CREATING THE SIDE BAR------------------------------------*/

.header {
  position: relative;
  min-height: 100vh;
  padding-top: 1.5em;
}

.sidebar {
  position: fixed; /*ensures it stays on top*/
  transition: translate var(--animation-timing);
  translate: -100%; /*to hide it when menu toggle is unchecked*/
  padding: 0.5rem 1rem; /*seting left and right to 0 gets rid of the excess white space*/
  padding-top: calc(
    var(--hamburger-height)+ var(--hamburger-margin)+ 1rem
  ); /*creates space between and around sidebar and menu icon*/
  background-color: var(--background);
  color: var(--foreground);
  max-width: 10rem;
  height: 100vh;
  top: 0;
}

.hamburger-menu:has(input:checked) + .sidebar {
  translate: 0; /*allows the sidebar to slide in and out when checked*/
}

/*------------------MEDIA QUERIES----------------------*/

/*Small Screens*/
@media (max-width: 280px) {
  :root/*used to declare css variables,
  will make it easier to make changes to side bar styling*/ {
    --bar-width: 35px; /*how wide the sidebar will be*/
    --bar-height: 5px; /*how thick the bars will be*/
    --hamburger-gap: 4px; /*how big the gap is*/
  }
}

@media (max-width: 390px) {
  .logo h1 {
    font-size: 1.2rem; /* Reduce font size to fit smaller screens*/
  }

  .logo p {
    font-size: 0.8rem; /* Reduce font size to fit smaller screens*/
  }

  .hamburger-menu {
    margin-right: auto; /* Push it to the left */
    position: absolute; /*stops menu toggle from overlapping with the logo h1 and logo p*/
  }
}

@media (min-width: 600px) {
  .sidebar {
    max-width: 15rem; /* Increase the width of the sidebar */
    min-height: 100vh;
  }

  .story,
  .home,
  .cheese-gallery,
  .cheese-event-1,
  .cheese-event-2,
  .team,
  .offers {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin: auto;
  }

  .story img,
  .home img,
  .cheese-event-1 img,
  .cheese-event-2 img,
  .story p,
  .home p,
  .cheese-event-1 p,
  .cheese-event-2 p {
    width: 500px;
    max-width: 100%;
    text-align: center;
  }

  .cheese-gallery img,
  .team img,
  .offers img,
  .cheese-gallery p,
  .team p,
  .offers p {
    width: 400px;
    max-width: 100%;
    text-align: center;
  }
}

/*Medium Screens*/
@media (min-width: 900px) {
  /*lining up paragraphs and images in the center of the page*/
  .story,
  .home,
  .cheese-gallery,
  .cheese-event-1,
  .cheese-event-2,
  .team,
  .offers {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin: auto;
  }

  .story img,
  .home img,
  .cheese-event-1 img,
  .cheese-event-2 img,
  .story p,
  .home p,
  .cheese-event-1 p,
  .cheese-event-2 p {
    width: 600px;
    max-width: 100%;
    text-align: center;
  }

  .cheese-gallery img,
  .team img,
  .offers img,
  .cheese-gallery p,
  .team p,
  .offers p {
    width: 550px;
    max-width: 100%;
    text-align: center;
  }

  /*changing font sizes to fit the screen size and adding space around the text*/
  h1 {
    font-size: 2.5em;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  h2 {
    font-size: 2em;
    padding-top: 0.5em;
  }
  .team h2 {
    padding-top: 0;
    padding-bottom: 0;
  }

  p {
    font-size: 1.2em;
  }

  .events p {
    width: 800px;
    margin: 0 auto;
  }
}

/*Large Screens*/
@media (min-width: 1200px) {
  /*lining up paragraphs and images in the center of the page*/
  .story,
  .home,
  .cheese-gallery,
  .cheese-event-1,
  .cheese-event-2,
  .team {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin: auto;
  }

  .story img,
  .home img,
  .cheese-event-1 img,
  .cheese-event-2 img,
  .story p,
  .home p,
  .cheese-event-1 p,
  .cheese-event-2 p {
    width: 650px;
    max-width: 100%;
    text-align: center;
  }

  .cheese-gallery img,
  .team img,
  .cheese-gallery p,
  .team p {
    width: 600px;
    max-width: 100%;
    text-align: center;
  }

  /*changing font sizes to fit the screen size and adding space around the text*/
  h1 {
    font-size: 2.5em;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  h2 {
    font-size: 2em;
    padding-top: 0.5em;
  }
  .team h2 {
    padding-top: 0;
    padding-bottom: 0;
  }

  p {
    font-size: 1.2em;
  }

  .events p {
    width: 1000px;
    margin: 0 auto;
  }
}