/* ===== Base reset (mobile first / small display) ===== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Verdana, Arial, sans-serif;
  background-color: #40407A;          /* page edge color (shows on large) */
}

nav {
  position: fixed; top: 0; left: 0; width: 100%; height: 50px;
  background: #fff; z-index: 1000;
  padding: .5em 1em 1em;
}
nav ul { list-style: none; margin: 0; padding: 0 2em; font-size: 1.2em; }
nav li { display: inline; padding-left: 2em; }
nav a { text-decoration: none; }
nav a:link    { color:#3F2860; }
nav a:visited { color:#497777; }
nav a:hover   { color:#A26100; }

header {
  margin-top: 50px;                   /* make room for fixed nav */
  color: #fff;
  background-image: url(sunrise.jpg);
  background-size: 100% 100%;
  background-color: #40407A;
}
header a { text-decoration: none; color: #fff; }
header a:hover { color: #EDF5F5; }

header.home {
  /* small display per Task 2 */
  height: 20vh;
  padding-top: 2em;
  padding-left: 10%;
}
header.content {
  height: 20vh;
  padding-left: 10%;
}

#wrapper {
  background: #F5F5F5;
  padding: 2em;
  width: auto;                /* full width on small */
  margin: 0;
}

h2 { margin: 0; }
li, dd { font-size: 90%; }

section { padding-left: .5em; padding-right: .5em; }

#mathero,
#loungehero {
  /* hide hero images on phones */
  display: none;
  height: 300px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#mathero    { background-image: url(yogamat.jpg); }
#loungehero { background-image: url(yogalounge.jpg); }

/* neutralize old float helpers from Ch7 on small */
.onethird, .onehalf { float: none; width: 100%; padding: 0; }
#flow { display: block; }

/* ===== Chapter 9 case study – table styles (Task 2) ===== */

/* CONFIGURE THE TABLES */
table {
  border: 1px solid #40407A;     /* 1px purple border */
  border-collapse: collapse;     /* no cellspacing */
  margin-bottom: 1em;            /* 1em bottom margin */
}

/* CONFIGURE THE TABLE CELLS */
td, th {
  border: 1px solid #40407A;     /* 1px purple border on cells */
  padding: 0.5em;                /* 0.5em padding */
}

/* CONFIGURE ALTERNATE-ROW BACKGROUND COLOR */
tr:nth-of-type(even) {
  background-color: #D7E8E9;     /* light alternate row color */
}

/* CONFIGURE TABLE CAPTIONS */
caption {
  margin: 1em;
  font-weight: bold;
  font-size: 120%;
}

/* ===== Task 3: Medium display (>= 600px) ===== */
@media (min-width: 600px) {

  /* 1) Nav as a flex row; book suggests right-aligned (flex-end) */
  nav ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    gap: .5rem;
  }

  /* 2) Sections get breathing room; allow flex growth inside #flow */
  section { padding-left: 2em; padding-right: 2em; flex: 1; }

  /* 3) Show hero images on medium/large */
  #mathero, #loungehero { display: block; margin-bottom: 1em; }

  /* 4) Content groups become flex rows that can wrap */
  #flow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* ===== Task 4: Large display (>= 1024px) ===== */
@media (min-width: 1024px) {

  /* 1) Larger header text for more visual impact */
  header { font-size: 120%; }

  /* 2) Hero on home page taller and more spacious */
  header.home {
    height: 50vh;          /* 50% viewport height */
    padding-top: 5em;
    padding-left: 8em;
  }

  /* 3) Hero on content pages slightly shorter */
  header.content {
    height: 30vh;          /* 30% viewport height */
    padding-top: 2em;
    padding-left: 8em;
    padding-bottom: 2em;
  }

  /* 4) Page centered with gutters showing body background */
  #wrapper {
    width: 80%;
    max-width: 1200px;
    margin: auto;          /* horizontally centers layout */
  }
}