/* Page shell and navigation furniture (Story 1.3): landmarks, skip-link,
   site-nav, prompt-path, block-cursor, footer, and the global focus-visible
   rule. References the custom properties tokens.css.njk already emits --
   no color, font, or spacing value is restated here. */

body {
  margin: 0;
}

header,
main,
footer {
  max-width: var(--spacing-page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-gutter);
  padding-right: var(--spacing-gutter);
  box-sizing: border-box;
}

header {
  padding-top: var(--spacing-6);
}

/* Global focus ring. Every focusable element gets this; this file never
   suppresses the outline property without substituting this replacement. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Skip link. Lives outside <header> (see base.njk) so the header's own
   overflow handling for prompt-path's left-truncation can never clip a
   focused skip link. Moved off-screen with `top`, not `display: none` or
   `visibility: hidden`, so it stays in the focus order. */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 0;
  z-index: 1000;
  background: var(--bg-elevated);
  color: var(--accent);
  border: 1px solid var(--border);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-meta-size);
  font-weight: var(--font-meta-weight);
  line-height: var(--font-meta-line-height);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--spacing-2);
  left: var(--spacing-2);
}

/* site-nav -- "where can I go." */
.site-nav {
  margin-bottom: var(--spacing-5);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-5);
  list-style: none;
  margin: 0;
  padding: 0 0 var(--spacing-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-meta-size);
  font-weight: var(--font-meta-weight);
  line-height: var(--font-meta-line-height);
}

.site-nav li {
  display: flex;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  min-width: 24px;
  color: var(--fg-muted);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--accent);
}

.site-nav a[aria-current="page"] {
  color: var(--fg);
  font-weight: 600;
}

/* prompt-path -- "where am I." */
.prompt-path {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-6);
  color: var(--fg-muted);
  font-size: var(--font-prompt-path-size);
  font-weight: var(--font-prompt-path-weight);
  line-height: var(--font-prompt-path-line-height);
}

.prompt-path ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.prompt-path li {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-2);
}

.prompt-path li:not(:last-child)::after {
  content: "/";
  color: var(--fg-muted);
}

.prompt-path a {
  color: var(--fg);
  text-decoration: none;
}

/* A filesystem path doesn't reliably read as clickable -- every segment
   underlines on hover AND on focus, not only on hover. */
.prompt-path a:hover,
.prompt-path a:focus-visible {
  text-decoration: underline;
}

.prompt-path [aria-current="page"] {
  color: var(--fg);
}

.prompt-path__sigil {
  color: var(--accent);
}

/* Truncation: below 640px, hide every segment but the final two and reveal
   the elided ones only through the accessible <details> expansion. Above
   640px the ellipsis stays hidden and every segment shows. */
.prompt-path__ellipsis {
  display: none;
}

.prompt-path__ellipsis summary {
  cursor: pointer;
  color: var(--fg-muted);
  list-style: none;
}

.prompt-path__ellipsis summary::-webkit-details-marker {
  display: none;
}

.prompt-path__ellipsis summary:hover,
.prompt-path__ellipsis summary:focus-visible {
  text-decoration: underline;
}

@media (max-width: 639px) {
  .prompt-path li.prompt-path__hide-narrow {
    display: none;
  }

  .prompt-path__ellipsis {
    display: inline-flex;
  }
}

/* block-cursor -- a filled, non-blinking rectangle. A bare fill vanishes
   under forced-colors: active, so it also carries a border that survives. */
.block-cursor {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  background: var(--accent);
  border: 1px solid transparent;
  vertical-align: text-bottom;
}

@media (forced-colors: active) {
  .block-cursor {
    background: Highlight;
    border-color: CanvasText;
  }
}

/* prefers-contrast: more -- raises the one decorative token
   (--border-subtle, consumed only by .track-contents ol/li in lesson.css)
   to the same value as --border. No component rule is touched directly;
   every consumer re-resolves the custom property (NFR34, Story 1.10). */
@media (prefers-contrast: more) {
  :root {
    --border-subtle: var(--border);
  }
}

/* print (Story 1.10, NFR43) -- drop the furniture that only orients a
   screen reader (site-nav, prompt-path, footer), keep everything else.
   lesson.css carries the matching print rule for lesson-nav and
   track-contents, since those selectors live there. */
@media print {
  .site-nav,
  .prompt-path,
  footer {
    display: none;
  }
}

/* footer -- fixed order: profile, feed, author name + city. */
footer {
  margin-top: var(--spacing-16);
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-6);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-5);
  color: var(--fg-muted);
  font-size: var(--font-meta-size);
  font-weight: var(--font-meta-weight);
  line-height: var(--font-meta-line-height);
}

footer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  min-width: 24px;
  color: var(--fg-muted);
  text-decoration: underline;
}

footer a:hover,
footer a:focus-visible {
  color: var(--accent);
}