// ==========================================================
// Project 3 - base layout and components
// Nesting is used throughout (nav, breadcrumbs, grid) and the two
// media queries are generated by the respond() mixin.
// ==========================================================

@use "variables" as *;
@use "mixins" as *;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: $font-body;
  font-size: 1.05rem;
  line-height: 1.6;
  color: $ink;
  background-color: $bg;
}

// Accessible skip link, hidden until focused
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  padding: 0.5rem 1rem;
  background-color: $primary;
  color: $surface;
  z-index: 100;

  &:focus {
    left: 0;
  }
}

// ---- Header and main navigation (hamburger) ----
header {
  background-color: $primary;
  color: $surface;
  padding: $space $space * 1.5;
}

.site-name {
  margin: 0 0 0.75rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

nav {
  // The hamburger toggle button: three bars plus a label.
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background-color: $primary-light;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: $radius;
    color: $surface;
    font-family: $font-body;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;

    &:hover,
    &:focus {
      outline: 2px solid $highlight;
      outline-offset: 2px;
    }
  }

  .nav-toggle-bar {
    display: block;
    width: 22px;
    height: 3px;
    background-color: $surface;
    border-radius: 2px;
  }

  .nav-toggle-bars {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
  }

  // The menu is collapsed by default and revealed when .is-open is
  // added by the small nav.js toggle (which also flips aria-expanded).
  .nav-menu {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;

    &:not(.is-open) {
      display: none;
    }

    &.is-open {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    a {
      display: block;
      padding: 0.75rem 1rem;
      color: $surface;
      text-decoration: none;
      font-weight: 600;
      border-radius: $radius;

      &:hover,
      &:focus {
        background-color: $primary-light;
        outline: 2px solid $highlight;
        outline-offset: -2px;
      }
    }
  }
}

// ---- Breadcrumbs (secondary navigation, below the main nav) ----
.breadcrumbs {
  background-color: #ece8e1;
  border-bottom: 1px solid $border;

  ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    max-width: $maxw;
    margin: 0 auto;
    padding: 0.6rem $space * 1.5;
    list-style: none;
    font-size: 0.9rem;
  }

  li + li::before {
    content: "\203A"; // ›
    margin-right: 0.35rem;
    color: $muted;
  }

  a {
    color: $link;
    text-decoration: none;

    &:hover,
    &:focus {
      text-decoration: underline;
    }
  }

  [aria-current="page"] {
    color: $muted;
    font-weight: 600;
  }
}

// ---- Main content ----
main {
  max-width: $maxw;
  margin: 0 auto;
  padding: $space * 1.5 $space * 1.5 $space * 3;
}

h1 {
  font-size: 2.1rem;
  color: $accent;
  border-bottom: 3px solid $accent;
  padding-bottom: 0.4rem;
}

h2 {
  font-size: 1.5rem;
  color: $primary;
  margin-top: 2rem;
}

h3 {
  font-size: 1.2rem;
  color: $primary-light;
}

section {
  margin-bottom: 1.5rem;
}

main a {
  color: $link;

  &:hover,
  &:focus {
    color: $accent;
    text-decoration-thickness: 2px;
  }
}

// ---- Multi-column layout (CSS Grid) ----
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: $space * 1.5;
  margin-top: $space;
}

.card {
  background-color: $surface;
  border: 1px solid $border;
  border-radius: $radius;
  padding: $space * 1.25;

  h3 {
    margin-top: 0;
  }
}

// ---- Call-to-action button ----
.cta {
  text-align: center;
  margin: $space * 2 0;
}

.cta-button {
  @include button($accent, #b45309);
}

// ---- Code sample block ----
pre {
  background-color: $primary;
  color: $surface;
  padding: $space;
  border-radius: 0.4rem;
  overflow-x: auto;
  font-size: 0.9rem;
}

code {
  font-family: $font-code;
}

// ---- Back to top ----
.back-to-top {
  display: inline-block;
  margin-top: $space;
  font-weight: 600;
}

// ---- Footer ----
footer {
  background-color: $primary;
  color: $surface;
  text-align: center;
  padding: $space $space * 1.5;
  margin-top: 2rem;
}

// ---- References ----
.references {
  font-size: 0.9rem;
  line-height: 1.5;

  li {
    margin-bottom: 0.5rem;
  }
}

// ==========================================================
// Two media queries, generated from the $breakpoints map via
// the respond() mixin: tablet collapses the grid to two columns,
// phone collapses it to a single column and tightens spacing.
// ==========================================================
@include respond(tablet) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  main {
    padding: $space $space $space * 2;
  }
}

@include respond(phone) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: 1.7rem;
  }

  .site-name {
    font-size: 1.2rem;
  }
}