/* =========================================================
   Pacific Trails Resort — Responsive Styles (Chapter 7)
   Mobile‑first CSS with comments for your rubric.
   ========================================================= */

/* 1) Reset/Universal */
* { box-sizing: border-box; }

/* 2) Base (smartphone / single-column) */
:root {
  --brand-dark: #002171;
  --brand-accent: #1976D2;
  --text: #666666;
  --paper: #FFFFFF;
  --page: #EAEAEA;
}

html { scroll-behavior: smooth; }

/* Makes the layout fit small screens */
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: Verdana, Arial, sans-serif;
}

/* Wrapper keeps content centered on large screens */
#wrapper {
  max-width: 1200px;          /* Desktop cap */
  margin: 0 auto;             /* Center horizontally */
  background: linear-gradient(var(--paper), #90C7E3);
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
}

/* Header branding */
header {
  background: var(--brand-dark);
  color: #fff;
  font-family: Georgia, serif;
  padding: 1.25rem 1rem;
}
header h1 {
  margin: 0;
  letter-spacing: .12em;
  font-size: clamp(1.5rem, 4.5vw, 2.5rem);
  text-align: center;
}
header a { color: #fff; text-decoration: none; }

/* Navigation — single column (meets “smartphone single-column” rubric) */
nav {
  background: transparent;
  font-weight: bold;
  font-size: 1rem;
  padding: .5rem 1rem;
}
nav ul {
  /* Stacked links on phones */
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
nav a { text-decoration: none; }
nav a:link    { color: #5C7FA3; }
nav a:visited { color: #344873; }
nav a:hover   { color: #A52A2A; }

/* Hero areas — fluid full-width images on phones */
#homehero, #yurthero, #trailhero {
  height: 220px;
  background-size: cover;       /* Responsive cropping */
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;                    /* No sidebar offset on phones */
}
#homehero  { background-image: url('coast.jpg'); }
#yurthero  { background-image: url('yurt.jpg'); }
#trailhero { background-image: url('trail.jpg'); }

/* Main content */
main {
  background: var(--paper);
  padding: 1rem 1.25rem;
}

/* Typography */
h2, h3 { font-family: Georgia, serif; }
h2 { color: var(--brand-accent); }
dt { color: var(--brand-dark); font-weight: bold; }
.resort { color: var(--brand-accent); font-size: 1.1em; }

/* Sections stack on phones */
section { padding: .25rem 0; }

/* Footer */
footer {
  background: var(--paper);
  font-size: .8rem;
  font-style: italic;
  text-align: center;
  padding: 1rem;
}

/* =========================================================
   3) Medium devices (tablets / small laptops)
   Two-column content; nav becomes horizontal bar.
   ========================================================= */
@media (min-width: 600px) {
  nav ul {
    /* Horizontal nav for medium screens */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }

  /* Make content areas form two columns */
  main {
    /* Nothing special required; sections grid handles layout */
  }
  main .sections-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
  }

  #homehero, #yurthero, #trailhero {
    height: 280px;
  }
}

/* =========================================================
   4) Large screens (desktops)
   Classic sidebar nav on the left; three-column content.
   ========================================================= */
@media (min-width: 992px) {
  /* Sidebar layout */
  #layout {
    display: grid;                      /* CSS Grid for robust layout */
    grid-template-columns: 220px 1fr;   /* Sidebar + main */
    gap: 0;
  }

  nav {
    padding: 1rem;
  }
  nav ul {
    /* Stack links in sidebar */
    flex-direction: column;
    gap: .5rem;
    position: sticky;
    top: 0.75rem;
  }

  /* Hero and main align with the grid column */
  #content {
    /* This wrapper keeps hero + main aligned under the content column */
  }

  /* Three-column sections on desktop for a “pleasing display” */
  main .sections-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 2rem;
  }

  #homehero, #yurthero, #trailhero {
    height: 320px;
  }
}

/* END of pacific.css */