/* ===================================================================
   MOBILE-FIRST APPROACH
   Everything outside a media query below is the MOBILE layout - the
   default every browser sees first. Each media query below then adds
   or overrides styles as the screen gets wider. We never take styles
   away going up the scale, only add to or override what is already
   there. This is why min-width queries are used throughout, rather
   than max-width.
   =================================================================== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Trebuchet MS", Arial, sans-serif;
  color: #222;
}

/* --- Live breakpoint tracker (teaching aid, not part of the real page) --- */

.tracker {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 10px 16px;
  font-family: "Courier New", monospace;
  font-size: 0.85em;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.tracker-badge span {
  display: none;
  background: #b8720a;
  color: #ffffff;
  padding: 2px 10px;
  border-radius: 3px;
  font-weight: bold;
}

/* Default (below 480px): show the mobile badge */
.tracker-badge .b-mobile { display: inline-block; }

/* ===================================================================
   BREAKPOINT 1: 480px - large phones / small phones in landscape
   =================================================================== */
@media (min-width: 480px) {
  .tracker-badge .b-mobile { display: none; }
  .tracker-badge .b-480 { display: inline-block; }
}

/* ===================================================================
   BREAKPOINT 2: 768px - tablets
   =================================================================== */
@media (min-width: 768px) {
  .tracker-badge .b-480 { display: none; }
  .tracker-badge .b-768 { display: inline-block; }
}

/* ===================================================================
   BREAKPOINT 3: 1024px - small laptops and desktops
   =================================================================== */
@media (min-width: 1024px) {
  .tracker-badge .b-768 { display: none; }
  .tracker-badge .b-1024 { display: inline-block; }
}

/* ===================================================================
   HEADER + NAV
   Mobile: logo and links stacked in a single column.
   480px+: nav becomes a horizontal row.
   1024px: more breathing room added.
   =================================================================== */

.site-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  background: #1f3864;
  color: #ffffff;
}

.logo {
  font-size: 1.3rem;
  font-weight: bold;
}

.main-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.main-nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
}

.main-nav a:hover {
  text-decoration: underline;
}

@media (min-width: 480px) {
  .site-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .main-nav {
    flex-direction: row;
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .site-header {
    padding: 20px 48px;
  }
}

/* ===================================================================
   HERO
   Font sizes and padding step up at each breakpoint so the banner
   feels proportionate to the extra space available.
   =================================================================== */

.hero {
  padding: 30px 20px;
  text-align: center;
  background: #e7f3f3;
}

.hero h1 {
  font-size: 1.4rem;
  color: #1b6e6e;
  margin: 0 0 10px;
}

.hero p {
  font-size: 0.95rem;
  margin: 0 0 16px;
}

.button {
  display: inline-block;
  background: #b8720a;
  color: #ffffff;
  padding: 10px 22px;
  font-size: 0.95rem;
  border-radius: 4px;
}

@media (min-width: 480px) {
  .hero h1 { font-size: 1.8rem; }
  .hero p { font-size: 1.05rem; }
}

@media (min-width: 768px) {
  .hero { padding: 48px 20px; }
  .hero h1 { font-size: 2.4rem; }
  .hero p { font-size: 1.15rem; }
}

@media (min-width: 1024px) {
  .hero h1 { font-size: 3rem; }
}

/* ===================================================================
   SIDEBAR + MAIN CONTENT
   Mobile and tablet: sidebar sits above the content, full width.
   768px+: still stacked (a tablet in portrait has room, but not
   quite enough for a comfortable side-by-side layout at our chosen
   breakpoint - a good example of why 768px isn't automatically
   "go two columns" for every layout).
   1024px+: sidebar and content sit side by side using Grid.
   =================================================================== */

.layout {
  padding: 20px;
  display: block;
}

.sidebar {
  background: #f2f2f2;
  padding: 16px 20px;
  margin-bottom: 20px;
  border-radius: 6px;
}

.sidebar h2 {
  font-size: 1.05rem;
  margin: 0 0 10px;
  color: #1f3864;
}

.sidebar ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.8;
}

@media (min-width: 1024px) {
  .layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 30px;
    padding: 30px 48px;
  }
  .sidebar {
    margin-bottom: 0;
  }
}

/* ===================================================================
   CARD GRID
   1 column (mobile) -> 2 columns (480px) -> 3 columns (768px)
   -> 4 columns (1024px). Grid makes each step a one-line change.
   =================================================================== */

.content h2 {
  font-size: 1.1rem;
  color: #1f3864;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 480px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 12px;
}

.card-image {
  width: 100%;
  height: 90px;
  background: #cccccc;
  border-radius: 4px;
  margin-bottom: 10px;
}

.card h3 {
  font-size: 0.95rem;
  margin: 0 0 6px;
  color: #1f3864;
}

.card p {
  font-size: 0.82rem;
  color: #444;
  margin: 0;
}

/* ===================================================================
   FOOTER
   =================================================================== */

.site-footer {
  padding: 16px 20px;
  background: #1f3864;
  color: #cfd8ea;
  text-align: center;
  font-size: 0.85rem;
  margin-top: 20px;
}