/*!
 * Stylesheet for Sugarbushers Website
 * Author: Your Name
 * Creation Date: March 20, 2024
 * Last Updated: March 20, 2024
 *
 * This stylesheet contains the styles for the main components of the
 * Sugarbushers website, including the responsive navigation bar, page layout,
 * and typography. It aims to provide a consistent and visually appealing
 * user interface across all device sizes.
 */

body {
    margin: 0;
    padding-top: 60px; /* Adjust based on your navbar's height */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
	background-image: url('../images/bg.jpg'); 
	background-repeat: repeat; /* This will repeat the image both vertically and horizontally */
	background-size: auto; /* This keeps the image at its original size */
	background-position: top left; /* This starts the tiling from the top left corner of the element */
}

/* Navbar styles */
.navbar {
  overflow: hidden;
  background-color: #333;
  /* Make the navigation bar extend fully */
  width: 100%;
  /* Reset margin and padding to remove default spacing */
  margin: 0;
  padding: 0;
  position: fixed; /* Make navbar fixed on top */
  top: 0; /* Position at the top */
  z-index: 1000; /* Ensure navbar is above other content */
}

/* Adjust the H1 style to fit within the navbar */
.navbar h1 {
    float: left; /* Aligns the text to the left */
    color: #f2f2f2; /* Text color */
    margin: 0; /* Remove default margin */
    padding: 14px 16px; /* Align padding with navbar items */
    font-size: 36px; /* Adjust font size as needed */
    display: block; /* Ensure it's displayed as a block-level element */
}

/* Style the links inside the navigation bar */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 36px;
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}

/* Change the color of links on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.navbar a.active {
  background-color: #434343;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.navbar .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width: 600px) {
  .navbar.responsive {position: relative;}
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Ensures images are responsive but does not center them by default */
img {
    max-width: 100%;
    height: auto;
}

/* Portrait image styles */
.portrait {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
    height: 150px; /* or other desired height */
    width: auto; /* maintains aspect ratio */
    max-width: none; /* prevents inheriting from general img styles */
    max-height: none;
}

/* Styles for <p> tags */
p {
    max-width: 900px;
    width: 100%; /* Ensures responsiveness */
    margin: 0 auto; /* Centers the paragraph if the screen is wider than 900px */
	font-family: "Gentium Book Plus", serif;
    font-weight: 400;
    font-style: normal;
	font-size: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
}

/* Responsive Image Grid */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 1000px; /* or your preferred max width */
    margin: 20px 0; /* Adjust spacing around the grid */
}

.image-grid-item {
    /* Styles specific to items within the image grid */
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .portrait {
        float: none;
        margin: 0 auto; /* Center portrait images on smaller screens */
        display: block;
    }

    p, .image-grid {
        max-width: 100%; /* Allow these elements to use the full screen width on smaller screens */
    }
}


/* Google Fonts */
.dancing-script {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.navbar a:first-of-type {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 40px;
}

.dm-serif {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}


/* Count Down */
  #countdown {
    font-size: 36px;}
   .image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 images wide */
    gap: 10px; /* Adjusts the space between the images */
    max-width: 1000px; /* Maximum width of the grid */
    width: 100%; /* Makes the grid responsive */
  }
  
  
  /* Image Grid */
    .image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 images wide */
    gap: 10px; /* Adjusts the space between the images */
    justify-content: center; /* Centers the grid horizontally */
  }
  
  .image-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-aligns the image titles */
  }
  .image-grid-item img {
    width: 100%; /* Makes each image fill its cell */
    height: auto; /* Keeps the image aspect ratio */
    margin-bottom: 5px; /* Space between image and title */
  }
  
  @media (max-width: 600px) {
    .image-grid {
      grid-template-columns: 1fr; /* Single column layout for small screens */
    }
  }