/* =========================================================================
   Layout – navbar, page container, footer
   ========================================================================= */

/* ---------- Navbar ---------- */
.site-header {
  position: fixed;
  top: var(--space-24);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: stretch;
  gap: var(--space-8);
  width: max-content;
  max-width: calc(100% - 2 * var(--space-16));
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(var(--space-24), 8vw, 150px);
  padding: var(--space-4) var(--space-16) var(--space-4) 42px;
  background: var(--surface-page);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-nav);
}

.nav__logo {
  font-family: var(--font-display);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-22);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--text-strong);
  white-space: nowrap;
}
.nav__logo img { height: 17px; width: auto; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  list-style: none;
}

.nav__link {
  display: block;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-md);
  font-size: var(--font-size-20);
  line-height: 30px;
  color: var(--text-strong);
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.nav__link:hover { background: var(--surface-muted); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-full);
  background: var(--surface-brand-focus);
  color: var(--text-on-brand);
  font-size: var(--font-size-20);
  line-height: 30px;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.nav__cta:hover { background: var(--surface-brand-hover); }
.nav__cta:active { background: var(--surface-brand-pressed); }

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text-strong);
}
.nav__toggle:hover { background: var(--surface-muted); }

/* Back pill next to the navbar (component pages) */
.nav-back {
  display: none;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-20);
  border-radius: var(--radius-full);
  background: var(--surface-brand-focus);
  color: var(--text-on-brand);
  font-size: var(--font-size-20);
  line-height: 30px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--shadow-nav);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.nav-back:hover { background: var(--surface-brand-hover); }
.nav-back[data-visible="true"] { display: inline-flex; }

/* ---------- Page ---------- */
.page {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 78px var(--gutter) 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page > main { flex: 1; }

.view { animation: view-in var(--duration-base) var(--ease-standard); }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Footer ---------- */
.site-footer {
  display: flex;
  justify-content: center;
  padding: var(--space-124) 0 var(--space-24);
  font-size: var(--font-size-16);
  line-height: 24px;
  color: var(--text-subtle);
  text-align: center;
}
.site-footer strong { font-weight: var(--font-weight-700); }

/* ---------- Responsive navbar ---------- */
@media (max-width: 1100px) {
  .nav__link, .nav__cta, .nav-back { font-size: var(--font-size-16); }
  .nav__cta { min-width: 0; padding-inline: var(--space-16); }
  .nav { padding-left: var(--space-28); }
}

@media (max-width: 860px) {
  .site-header { top: var(--space-12); width: calc(100% - 2 * var(--space-16)); }
  .nav { flex: 1; padding: var(--space-4) var(--space-8) var(--space-4) var(--space-24); }
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: absolute;
    top: calc(100% + var(--space-8));
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-12);
    background: var(--surface-page);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-nav);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-standard),
                visibility var(--duration-base);
  }
  .nav[data-open="true"] .nav__menu { opacity: 1; visibility: visible; transform: none; }
  .nav__link, .nav__cta { font-size: var(--font-size-18); padding: var(--space-12) var(--space-16); }
  .nav__cta { justify-content: center; }
  .nav-back { padding-inline: var(--space-16); }
  .nav-back__label { display: none; }
  .page { padding-top: 64px; }
}
#view:focus, #view:focus-visible { outline: none; box-shadow: none; }