/* Niamos Labs shared components: top bar, brand lockup, horizon, footer.
 * Link order on every page: /assets/base.css, then this file, then the page's own CSS.
 * Contract and markup: _design/components.md. Tokens come from base.css. */

/* ---------- Brand: the studio mark, alone or with the name ---------- */
/* The mark file is /assets/mark.svg on every page; switching logo options replaces that one file. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: var(--leading-title);
  color: var(--color-ink);
  text-decoration-color: transparent;
  white-space: nowrap;
}
.brand:hover { text-decoration-color: var(--color-sun); }
/* px on purpose: the mark is an image and keeps its size under text zoom */
.brand__mark {
  flex: none;
  width: var(--brand-mark, 40px);
  height: var(--brand-mark, 40px);
}

/* ---------- Top bar: phone stacks it centered; from 48rem logo lockup left, page links right ---------- */
.topbar {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  padding-block: var(--space-sm) 0;
}
.topbar .brand { min-height: 2.75rem; }
@media (max-width: 47.99rem) {
  /* Phone: the bar stacks, so the lockup can be large and centered */
  .topbar .brand { --brand-mark: 56px; font-size: var(--text-title); }
}
.topbar__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-md);
  font-weight: var(--weight-strong);
}
.topbar__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem; /* 44 */
  white-space: nowrap;
}

/* ---------- Horizon: the studio mark at page scale ---------- */
/* The sun is a full disc centered on the line; the horizon clips its lower half, so at rest it reads as a half sun. */
.horizon {
  position: relative;
  height: calc(var(--sun-size) / 2);
  border-bottom: var(--rule) solid var(--color-ink);
  overflow: hidden;
}
.horizon::after {
  content: "";
  position: absolute;
  bottom: calc(var(--sun-size) / -2);
  right: 0;
  width: var(--sun-size);
  height: var(--sun-size);
  border-radius: 50%;
  background: var(--horizon-sun, var(--color-sun));
}
@media (min-width: 80rem) {
  /* The sun rises over the start of the right-hand column */
  .horizon::after { right: calc(var(--col-side) - var(--sun-size)); }
}

/* Sunrise: tied to scroll, the sun climbs from behind the line to its half-sun rest as the horizon moves
   up the screen (from fully on screen at the bottom to a quarter of the way down). Browsers without scroll-driven
   animations, and anyone with reduced motion, get the resting half sun. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .horizon { view-timeline: --horizon block; }
    .horizon::after {
      animation: sunrise 1ms linear both; /* 1ms: the duration is ignored on a scroll timeline */
      animation-timeline: --horizon;
      animation-range: contain 0% contain 75%; /* fully risen with the line a quarter of the way down the screen */
    }
  }
}
@keyframes sunrise {
  from { transform: translateY(calc(var(--sun-size) / 2)); } /* fully behind the line */
  to   { transform: none; }
}

/* ---------- Footer ---------- */
.foot {
  display: grid;
  /* minmax(0, 1fr): the single phone column may not grow past the screen at large text sizes */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-xl) var(--space-2xl);
  border-top: var(--rule) solid var(--color-ink);
  text-align: center; /* phone only; 48rem and up align to the start */
}
.foot__col { display: grid; gap: var(--space-2xs); align-content: start; }
.foot__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: var(--leading-title);
  padding-bottom: var(--space-3xs);
}
.foot__col p { color: var(--color-ink-2); }
.foot__col a { color: var(--color-ink); }
.foot__col ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-md); }
/* 44px-plus tap height without moving the text: padding grows the hit area, the negative margin gives the space back */
.foot__col li a {
  display: inline-block;
  white-space: nowrap;
  min-width: 44px; /* short names like "Nuri" still get a 44px-wide target */
  padding-block: var(--space-xs);
  margin-block: calc(-1 * var(--space-xs));
}

@media (min-width: 48rem) {
  .topbar { flex-direction: row; }
  .foot { text-align: start; }
  /* Privacy and studio take their own width so no short line breaks; support prose takes the rest */
  .foot { grid-template-columns: minmax(0, 1fr) max-content max-content; gap: var(--space-lg); }
  .foot__col ul { flex-direction: column; }
}
@media (min-width: 80rem) {
  /* Privacy and studio split the right-hand column */
  .foot { grid-template-columns: minmax(0, 1fr) repeat(2, calc((var(--col-side) - var(--space-lg)) / 2)); }
}