/* layout.css: shell: container, nav, scroll progress, section frame, footer */

/* ---------- container ---------- */

.container {
  width: min(1200px, 100% - 2 * clamp(1rem, 4vw, 3rem));
  margin-inline: auto;
}

main {
  display: block;
}

/* ---------- scroll progress ---------- */

.scroll-progress {
  display: none;
}

@supports (animation-timeline: scroll()) {
  .scroll-progress {
    display: block;
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    z-index: 200;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    animation: scroll-progress-grow linear both;
    animation-timeline: scroll();
  }

  @keyframes scroll-progress-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    animation: none;
    transform: scaleX(0);
  }
}

/* ---------- nav ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: var(--space-3);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border-2);
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .site-nav {
    background: color-mix(in srgb, var(--color-surface-2) 82%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.site-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* brand */

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-text-hi);
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover {
  text-decoration: none;
}

.brand-user {
  color: var(--color-accent);
}

.brand-path {
  color: var(--color-text-3);
}

.brand-cursor {
  margin-inline-start: 0.15em;
  color: var(--color-accent);
  animation: blink 1.06s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-cursor {
    animation: none;
    opacity: 1;
  }
}

/* links */

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  min-width: 0;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2);
  color: var(--color-text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-state) var(--ease-standard);
}

.nav-links a::before {
  content: './';
  color: var(--color-text-3);
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current] {
  color: var(--color-accent);
}

/* Persistent call to action. Once the hero scrolls away this is the only route to
   contact that stays on screen, so it lives in the sticky nav. Outlined rather than
   filled so it does not compete with the solid button in the hero. */

.nav-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-accent-dim);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-state) var(--ease-standard),
    border-color var(--dur-state) var(--ease-standard),
    color var(--dur-state) var(--ease-standard);
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  text-decoration: none;
}

/* mobile nav */

@media (max-width: 720px) {
  .site-nav-inner {
    gap: var(--space-3);
  }

  .nav-links {
    gap: var(--space-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

}

/* ---------- section shell ---------- */

.section {
  padding-block: var(--space-fluid-xl);
  scroll-margin-top: 5rem;
}

.hero {
  scroll-margin-top: 5rem;
}

.section-head {
  margin-bottom: var(--space-fluid-md);
}

.section-cmd {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-accent);
  margin: 0;
}

.section-cmd::before {
  content: '$\00a0';
  color: var(--color-text-3);
}

h2.section-title {
  font-size: var(--step-3);
  margin-top: var(--space-2);
}

.section-title:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 4px;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--color-border-2);
  background: var(--color-surface-1);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-text-3);
  padding-block: var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

@media (max-width: 600px) {
  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- v2 mobile pass ---------- */

/* A1: two-row nav */

@media (max-width: 860px) {
  .site-nav-inner {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
  }

  /* row 1 keeps the brand and the action on opposite ends */
  .brand { order: 1; }
  .nav-cta { order: 2; }

  /* row 2: full width, links distributed */
  .nav-links {
    order: 3;
    flex-basis: 100%;
    justify-content: space-between;
    gap: 0;
    /* the row now fits, so the horizontal scroll fallback is no longer needed */
    overflow-x: visible;
  }

  .nav-links a {
    padding-inline: var(--space-1);
  }
}

/* A2: the action stays on screen at every width. Measured at 320px the brand and
   the button together need about 275px of the 288px available, so it fits. */

@media (max-width: 360px) {
  .nav-cta {
    padding-inline: var(--space-3);
  }
}

/* A5: on the narrowest phones the four links very nearly touch (measured 2px apart
   at 320px), which invites mis-taps. Dropping the ./ prefix here buys about 60px,
   spreading the gaps to roughly 24px. The terminal read is still carried by the
   brand prompt, the $ section commands and the mono type. */

@media (max-width: 360px) {
  .nav-links a::before { content: none; }
}

/* A3: tighten nav height on phones */

@media (max-width: 640px) {
  .site-nav { padding-block: var(--space-2); }
  .nav-links a { min-height: 40px; }
}

/* A4: safe-area insets for notched phones */

@media (max-width: 900px) {
  .site-nav,
  .site-footer {
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  }
}

/* A6: a landscape phone has very little height to spare, and at 820px and up the
   single row fits without the chip colliding with ./contact (measured: collision
   starts near 800px). Put the nav back on one row there to buy back the height. */

@media (min-width: 820px) and (max-width: 900px) and (max-height: 520px) {
  .site-nav-inner {
    flex-wrap: nowrap;
  }

  .brand { order: 0; }

  .nav-links {
    order: 1;
    flex-basis: auto;
    justify-content: flex-end;
    gap: var(--space-4);
  }

  .nav-cta { order: 2; }
}