/* global styles element */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: white;
  color: #333;
}

/* header containter element */
.header-container {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* styles for header font and placement */
.header-container h1 {
  font-family: "Snell Roundhand", cursive;
  font-weight: bold;
  font-size: 42px;
  margin: 0;
  text-align: left;
}

/* styles for book now button in header */
.book-now {
  background-color: #f39c12;
  color: white;
  padding: 10px 20px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/* styles for book now hover */
.book-now:hover {
  background-color: #e67e22;
}

/* styles for size and color of header */
header {
  width: 100%;
  background: linear-gradient(to bottom, #CDE8B0, #4F7942);
  color: white;
  padding: 1em 0 0.5em 0;
  box-sizing: border-box;
}

/* styles for nav bar layout */
nav {
  width: 90%;
  margin: auto;
}

/* styles for nav list layout */
nav ul {
  list-style: none;
  margin: auto;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* styles for nav block display */
nav li {
  display: inline-block;
}

/* styles for nav links */
nav a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  padding: 10px 15px;
}

/* styles for main content wrapper */
main {
  margin: auto;
  background-color: white;
}

/* styles for hero section - book page */
.hero {
  background-color: white;
  padding: 40px 20px;
  text-align: center;
  color: #4F7942;
}

/* styles for hero layout - book page */
.hero-gallery {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* styles for hero images - book page */
.hero-gallery img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 10px;
}

/* styles for green cabin button */
.cta-button {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #4F7942;
  color: white;
  text-decoration: none;
  font-size: 18px;
  border-radius: 5px;
}

/* styles for list of highlights on main page */
.highlights li {
  color: #4F7942;
}

/* styles for highlight section on main page */
.highlights {
  padding: 40px 20px;
  background-color: white;
  text-align: center;
}

/* styles for footer */
footer {
  background-color: #4F7942;
  color: white;
  text-align: center;
  padding: 1em 0;
  width: 100%;
}

/* styles for footer text content */
footer p {
  color: white;
}

/* styles for subheading on each page - header 2 */
.page-subheading {
  width: 90%;
  margin: 20px auto 0 auto;
  font-size: 28px;
  color: #4F7942;
  text-align: left;
  background-color: white;
}

/* styles for h3 on each page */
h3 {
  width: 90%;
  margin: 20px auto 0 auto;
  font-size: 22px;
  color: #4F7942;
  text-align: left;
  padding-bottom: 10px;
  border-bottom: 1px solid #4F7942;
}

/* styles for contact form alignment */
.contact-form {
  text-align: left;
}

/* styles for heading inside contact form */
.contact-form h2 {
  text-align: left;
  padding-left: 20px;
}

/* styles for all labels on contact form */
.contact-form label,
label {
  display: block;
  margin: auto;
  font-weight: bold;
  width: 90%;
}

/* styles for text and email input on contact form */
.contact-form input[type="text"],
.contact-form input[type="email"] {
  display: block;
  width: 90%;
  height: 20px;
  margin: auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  text-align: left;
}

/* styles for message area on contact form */
.contact-form textarea {
  display: block;
  width: 90%;
  height: 200px;
  margin: auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  text-align: left;
}

/* styles for submit button on contact form */
.contact-form input[type="submit"] {
  background-color: #f39c12;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  display: block;
  margin: auto;
  font-weight: bold;
  width: 90%;
}

/* styles for general text and list items thoughout website */
blockquote,
p,
li {
  width: 90%;
  margin: 10px auto;
  text-align: left;
  color: #4F7942;
}

/* styles for flex layout on tabs - cabin page */
.tabs {
  display: flex;
  flex-direction: row;
  gap: 30px;
  flex-wrap: wrap;
  width: 90%;
}

/* styles for tab labels - cabin page */
.tab-labels {
  list-style: none;
  width: 90%;
  flex: 1;
}

/* styles for label spacing - cabin page */
.tab-labels li {
  margin-bottom: 10px;
}

/* styles for tab label - cabin page */
.tab-labels label {
  cursor: pointer;
  font-weight: bold;
  color: #4F7942;
  display: block;
  transition: color 0.2s ease;
}

/* styles for tab hover - cabin page*/
.tab-labels label:hover {
  color: #2c3e50;
}

/* styles for tab label content - cabin page */
.tab-content {
  flex: 2;
  min-width: 300px;
}

/* hide nonselected tabs - cabin page */
.tab {
  display: none;
}

/* hide radio buttons - cabin page */
.tabs input[type="radio"] {
  display: none;
}

/* styles to show only the checked tab content - cabin page */
#creekside:checked ~ .tab-content #creekside-tab,
#forest:checked ~ .tab-content #forest-tab,
#hilltop:checked ~ .tab-content #hilltop-tab,
#autumn:checked ~ .tab-content #autumn-tab,
#winter:checked ~ .tab-content #winter-tab,
#spring:checked ~ .tab-content #spring-tab,
#summer:checked ~ .tab-content #summer-tab,
#secluded:checked ~ .tab-content #secluded-tab,
#tranquil:checked ~ .tab-content #tranquil-tab,
#sunset:checked ~ .tab-content #sunset-tab {
  display: block;
}

/* styles for image for each tab - cabin page */
.tab img {
  width: 100%;
  max-width: 500px;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* styles for each image description - cabin page */
.tab p {
  max-width: 500px;
  margin: 10px 0;
  padding: 0;
  text-align: left;
  color: #4F7942;
}

/* layout for cabin section */
.cabin-content {
  display: flex;
  gap: 30px;
  align-items: center;
  max-width: 100%;
  flex-wrap: wrap;
}

/* left side image and text on cabin page */
.cabin-left {
  max-width: 500px;
}

/* right side booking button on cabin page */
.cabin-right {
  flex: 1;
  text-align: center;
}

/* book now button on cabin page */
.book-now-large {
  display: inline-block;
  background-color: #f39c12;
  color: white;
  font-size: 20px;
  font-weight: bold;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

/* styles for hover on book now button on cabin page */
.book-now-large:hover {
  background-color: #e67e22;
}

/* wrapper for seasons content */
.seasons-grid {
  width: 90%;
  margin: 40px auto;
  text-align: center;
}

/* styles for season rows */
.season-row {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

/* styles for season columns */
.season-column {
  flex: 1 1 45%;
  text-align: center;
}

/* styles for season heading 3 */
.season-column h3 {
  font-size: 20px;
  color: #4F7942;
  margin-bottom: 10px;
}

/* styles for season images */
.season-column img {
  width: 100%;
  max-width: 400px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* styles for season description text */
.season-column p {
  font-size: 16px;
  color: #4F7942;
  margin: 0 auto;
  max-width: 400px;
  text-align: center;
}

/* centering action buttons on home page */
.cta-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

/* styles for cabin button on home page */
.cta-button {
  background-color: #4F7942;
  color: white;
  padding: 10px 20px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/* styles for cabin button hover on home page */
.cta-button:hover {
  background-color: #3e6335;
}

/* styles for book now button on home page */
.cta-button.book-airbnb {
  background-color: #f39c12;
}

/* styles for hover book now button on home page */
.cta-button.book-airbnb:hover {
  background-color: #e67e22;
}

/* styles for media query for screens smaller than 700 px width */
@media (max-width: 700px) {
  nav ul {
    flex-direction: column;         /* stack items vertically */
    align-items: center;            /* center items horizontally */
    padding: 0;
    gap: 0px;                      /* space between nav items */
  }

  nav li {
    width: 100%;                   
    text-align: center;
  }

  nav a {
    display: block;
    width: 100%;
    padding: 0px 0;
    border-bottom: 1px solid #fff; 
  }

  /* --- split cabin labels into 2 columns --- */
  .tab-labels {
    display: grid;
    grid-template-columns: 1fr 1fr; /* two equal columns */
    gap: 10px;
    justify-items: center;         /* center text horizontally in each cell */
  }

  .tab-labels label {
    text-align: center;
  }

  /* --- Center cabin content below --- */
  .cabin-content {
    flex-direction: column;        /* stack images and buttons vertically */
    align-items: center;           /* center content */
    text-align: center;            /* center text */
  }

  .cabin-left img {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }

  .cabin-left p {
    align-items: center;
text-align: center;            /* center text */
  }
}