/* -----------------------
   Base (Mobile First)
   ----------------------- */
   * {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    padding: 0;
    background-color: #EAEAEA;
    color: #666;
    font-family: Arial, Helvetica, sans-serif;
    list-style-image: url("./images/marker.gif");
  }
  
  #wrapper {
    width: 100%;
  }
  
  /* Header: dark blue background, white text */
  header {
    background-color: #002171;
    color: #FFFFFF;
    text-align: center;
    padding: 1em 0;
  }
  
  header h1 {
    margin: 0;
    font-size: 2em;
    letter-spacing: 0.1em;
  }
  
  header a {
    color: #FFFFFF;
    text-decoration: none;
  }
  header a:hover {
    color: #90C7E3;
  }
  
  /* Nav: white background, stacked links on mobile */
  nav {
    background-color: #FFFFFF;
    text-align: center;
    padding: 1em;
  }
  
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  nav ul li {
    border-bottom: 1px solid #000033;
    padding: 0.5em 0;
  }
  
  nav a {
    color: darkblue;
    text-decoration: none;
    font-size: 1.1em;
  }
  nav a:hover {
    color: #A52A2A;
  }
  
  /* Hero images */
  #homehero,
  #yurthero,
  #trailhero {
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  #homehero {
    background-image: url("./images/coast2.jpg");
  }
  #yurthero {
    background-image: url("./images/yurt.jpg");
  }
  #trailhero {
    background-image: url("./images/trail.jpg");
  }
  
  /* Main content area */
  main {
    background-color: #FFFFFF;
    padding: 1em;
  }
  
  h2 {
    margin: 0;
    padding: 0.5em 0;
    color: #002171;
  }
  
  /* Footer */
  footer {
    background-color: #FFFFFF;
    text-align: center;
    font-size: 0.75em;
    font-style: italic;
    padding: 1em;
    font-family: Georgia, "Times New Roman", serif;
  }
  
  /* Special styling for "Pacific Trails Resort" */
  .resort {
    font-weight: bold;
    color: blue;
  }
  
  /* -----------------------
     Table Styles for Chapter 9
     ----------------------- */
  table {
    border: 2px solid #3399CC;
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
  }
  
  th,
  td {
    padding: 0.5em;
    border: 2px solid #3399CC;
  }
  
  td {
    text-align: center;
  }
  
  .text {
    text-align: left;
  }
  
  tr:nth-of-type(odd) {
    background-color: #F5FAFC;
  }
  
  /* -----------------------
     Medium Layout (min-width: 600px)
     ----------------------- */
  @media screen and (min-width: 600px) {
    #wrapper {
      width: 100%;
      margin: 0 auto;
    }
    
    header {
      padding: 1em;
    }
    
    /* Nav bar: horizontal, with positioning & z-index to avoid overlap */
    nav {
      background-color: white;
      padding: 0.5em;
      position: relative;
      z-index: 10;
    }
    
    nav ul {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
    }
    
    nav ul li {
      border-bottom: none;
      padding: 0.5em;
    }
    
    nav a {
      color: darkblue;
      font-size: 1em;
    }
    
    main {
      margin: 0 auto;
      padding: 1em;
    }
    
    /* For pages with class "content" (Yurts & Activities):
       Display the h2 on its own row and the three sections side by side */
    .content main {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto;
      gap: 1em;
    }
    
    .content main > h2 {
      grid-column: 1 / -1;
    }
    
    .content main section {
      background-color: #FFFFFF;
      padding: 0 1em;
    }
    
    /* New rule to force the special section to span all columns */
    .content main #special {
      grid-column: 1 / -1;
    }
  }
  
  /* -----------------------
     Large Layout (min-width: 1024px)
     ----------------------- */
  @media screen and (min-width: 1024px) {
    #wrapper {
      width: 80%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 200px 1fr;
      grid-template-rows: auto auto 1fr auto;
      grid-template-areas:
        "header header"
        "nav hero"
        "nav main"
        "footer footer";
      border: 1px solid #000033;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
      background-color: #FFFFFF;
    }
    
    header {
      grid-area: header;
      padding: 1em;
    }
    
    /* Nav on the left with gradient background, vertical list */
    nav {
      grid-area: nav;
      background-image: linear-gradient(to bottom, #FFFFFF, lightblue);
      text-align: left;
      padding: 1em;
      position: relative;
      z-index: 10;
    }
    
    nav ul {
      display: block;
      margin: 0;
      padding: 0;
    }
    
    nav ul li {
      padding: 0.5em 0;
      border-bottom: none;
    }
    
    nav a {
      color: darkblue;
      font-size: 1.1em;
    }
    
    /* Hero in top-right */
    #homehero, #yurthero, #trailhero {
      grid-area: hero;
      margin: 0;
    }
    
    /* Main in bottom-right */
    main {
      grid-area: main;
      padding: 1em;
      background-color: #FFFFFF;
    }
    
    /* Footer across the bottom */
    footer {
      grid-area: footer;
      padding: 1em;
    }
    
    /* For "content" pages, keep the grid layout for main */
    .content main {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto;
      gap: 1em;
    }
    
    .content main > h2 {
      grid-column: 1 / -1;
    }
    
    .content main section {
      background-color: #FFFFFF;
      padding: 0 1em;
    }
    
    /* New rule to force the special section to span all columns */
    .content main #special {
      grid-column: 1 / -1;
    }
  }