/*
 * sitemap.css — Sitemap page styles (tall photo hero, numbered link sections, sidebar index)
 * ═══════════════════════════════════════════════════════════════════════
 * PATH: css/sitemap.css
 * ROLE: The hero band photo for /sitemap (scoped by the layout's
 *       data-page="sitemap", reusing the guides-hub blueprints photo) and
 *       every page rule: the two-column layout (sections + sticky sidebar),
 *       numbered section headings, the 2-col link lists with one-line
 *       descriptions, the glossary A-Z chip row, and the sidebar (section
 *       index painted by js/section-spy.js + a back-to-top link). ≤1000px
 *       the sidebar stacks above the sections and the index becomes a chip
 *       row, mirroring css/warranty.css. The closing band is the shared
 *       .site-cta (css/site-shell.css). Tokens (--band, --teal, --display,
 *       --serif, --line…) come from css/site-shell.css.
 * USED BY: app/Views/public/sitemap.php (loaded through the layout's 'head'
 *       section).
 * Last Modified: 2026-09-14 — created for the sitemap restyle (replaces the
 *                page's inline style block and the Bootstrap grid)
 */

/* ── hero band photo ─────────────────────────────────── */
.wrapper2[data-page="sitemap"] {
  background-image: url(../images/home/hero-guides-hub.jpg);
  background-attachment: scroll;   /* fixed would frame only the top edge in a 430px band */
  background-position: center 50%; /* rolled blueprints + pen — reused from the guides hub */
}

/* ── page frame ──────────────────────────────────────── */
.sitemap-page {
  padding: clamp(2.5rem, 5vw, 4rem) 0 0;
  overflow-x: clip;
}
.sitemap-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.sitemap-main {
  min-width: 0;
}

/* ── sections ────────────────────────────────────────── */
.sitemap-section {
  scroll-margin-top: 90px;
}
.sitemap-section + .sitemap-section {
  margin-top: 3rem;
}
.sitemap-section-title {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin: 0 0 1.1rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--teal);
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -.01em;
  color: var(--ink);
}
.sitemap-section-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--teal-deep);
}
.sitemap-empty {
  margin: 0;
  font-family: var(--serif);
  font-size: .95rem;
  color: var(--muted);
}

/* ── link lists ──────────────────────────────────────── */
.sitemap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}
.sitemap-list li {
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
}
/* main.css paints every bare <a> white and blue on hover — set both states */
.sitemap-list a,
.sitemap-list a:hover,
.sitemap-list a:focus {
  font-family: var(--display);
  font-weight: 700;
  font-size: .98rem;
  color: var(--ink);
  text-decoration: none;
}
.sitemap-list a:hover,
.sitemap-list a:focus {
  color: var(--teal-deep);
  text-decoration: underline;
  text-decoration-color: rgba(42, 139, 130, .35);
  text-underline-offset: 3px;
}
.sitemap-desc {
  display: block;
  margin-top: .2rem;
  font-family: var(--serif);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ── glossary A-Z chip row ───────────────────────────── */
.sitemap-letters {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.sitemap-letters a,
.sitemap-letters a:hover,
.sitemap-letters a:focus {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  font-family: var(--display);
  font-weight: 700;
  font-size: .85rem;
  color: var(--ink);
  text-decoration: none;
}
.sitemap-letters a:hover,
.sitemap-letters a:focus {
  border-color: var(--teal);
  color: var(--teal-deep);
  background: var(--teal-tint);
}

/* ── closing line ────────────────────────────────────── */
.sitemap-closing {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

/* ── sidebar ─────────────────────────────────────────── */
.sitemap-side {
  position: sticky;
  top: calc(62px + 1.25rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sitemap-box {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.sitemap-box-title {
  margin: 0;
  padding: .9rem 1.25rem;
  background: var(--band);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sitemap-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sitemap-toc li + li {
  border-top: 1px solid var(--line);
}
.sitemap-toc a {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .7rem 1.25rem;
  font-family: var(--display);
  font-size: .88rem;
  color: var(--ink);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.sitemap-toc a:hover,
.sitemap-toc a:focus {
  background: var(--ground);
  color: var(--teal-deep);
  text-decoration: none;
}
.sitemap-toc a[aria-current="true"] {
  background: var(--teal-tint);
  color: var(--teal-deep);
  box-shadow: inset 4px 0 0 var(--teal);
}
.sitemap-toc-num {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--teal-deep);
}
.sitemap-toc-label {
  flex: 1 1 auto;
}
.sitemap-toc-count {
  font-family: var(--serif);
  font-size: .8rem;
  color: var(--muted);
}
.sitemap-side-top,
.sitemap-side-top:hover,
.sitemap-side-top:focus {
  display: block;
  padding: .7rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font-family: var(--display);
  font-weight: 700;
  font-size: .82rem;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}
.sitemap-side-top:hover,
.sitemap-side-top:focus {
  border-color: var(--teal);
  color: var(--teal-deep);
}

/* ── responsive ──────────────────────────────────────── */
@media (max-width: 1000px) {
  .sitemap-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .sitemap-side {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .6rem;
  }
  .sitemap-toc {
    flex: 1 1 100%;
  }
  .sitemap-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .9rem 1rem;
  }
  .sitemap-toc li + li {
    border-top: 0;
  }
  .sitemap-toc a {
    gap: .4rem;
    padding: .4rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .8rem;
  }
  .sitemap-toc a[aria-current="true"] {
    border-color: var(--teal);
    box-shadow: none;
  }
  .sitemap-toc-label {
    flex: 0 0 auto;
  }
  .sitemap-side-top {
    flex: 1 1 100%;
  }
}
@media (max-width: 640px) {
  .sitemap-list {
    grid-template-columns: 1fr;
  }
}