/* Arkum Labs — Navigation (Navbar, Tabs, Footer) */

/* ============================== NAVBAR ============================== */
.ark-navbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: var(--navbar-h);
  padding: 0 var(--grid-margin);
  background: color-mix(in oklab, var(--surface-void) 78%, transparent);
  backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid var(--border-subtle);
}
.ark-navbar__brand { display: flex; align-items: center; gap: var(--space-3); flex: none; text-decoration: none; }
.ark-navbar__brand img { height: 26px; width: auto; display: block; }
.ark-navbar__wordmark {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-base); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--text-strong);
}
.ark-navbar__nav { display: flex; align-items: center; gap: var(--space-1); }
.ark-navbar__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 34px; padding: 0 var(--space-4);
  font-size: var(--text-sm); font-weight: var(--fw-medium);
  color: var(--text-muted); text-decoration: none;
  border-radius: var(--radius-control);
  transition: var(--t-control);
}
.ark-navbar__link:hover { color: var(--text-strong); background: var(--surface-hover); }
.ark-navbar__link--active { color: var(--text-strong); }
.ark-navbar__link--active::after {
  content: ""; position: absolute; bottom: -1px; height: 2px; width: 18px;
  background: var(--accent); box-shadow: var(--glow-cyan-sm);
}
.ark-navbar__link { position: relative; }
.ark-navbar__spacer { flex: 1; }
.ark-navbar__actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }

/* ============================== TABS ============================== */
.ark-tabs { display: flex; flex-direction: column; }
.ark-tabs__list {
  display: flex; align-items: stretch; gap: var(--space-1);
  border-bottom: 1px solid var(--border-default);
}
.ark-tabs__tab {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-4);
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  transition: var(--t-control);
}
.ark-tabs__tab:hover { color: var(--text-default); }
.ark-tabs__tab:focus-visible { outline: none; box-shadow: var(--glow-focus); border-radius: var(--radius-control); }
.ark-tabs__tab--active { color: var(--text-strong); }
.ark-tabs__tab--active::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px;
  height: 2px; background: var(--accent); box-shadow: var(--glow-cyan-sm);
}
.ark-tabs__tab[disabled] { opacity: 0.4; cursor: not-allowed; }
.ark-tabs__count {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  padding: 1px 5px; border-radius: var(--radius-xs);
  background: var(--surface-card); color: var(--text-faint);
}
/* pill variant */
.ark-tabs--pill .ark-tabs__list { border: none; gap: var(--space-1); padding: var(--space-1); background: var(--surface-card); border-radius: var(--radius-control); display: inline-flex; }
.ark-tabs--pill .ark-tabs__tab { height: 32px; border-radius: var(--radius-xs); }
.ark-tabs--pill .ark-tabs__tab--active { background: var(--surface-raised); }
.ark-tabs--pill .ark-tabs__tab--active::after { display: none; }
.ark-tabs__panel { padding-top: var(--space-5); }

/* ============================== FOOTER ============================== */
.ark-footer {
  position: relative;
  background: var(--surface-base);
  border-top: 1px solid var(--border-default);
  padding: var(--space-16) var(--grid-margin) var(--space-8);
  color: var(--text-muted);
}
.ark-footer__top { display: flex; flex-wrap: wrap; gap: var(--space-16); justify-content: space-between; max-width: var(--container-max); margin: 0 auto; }
.ark-footer__brand { max-width: 300px; display: flex; flex-direction: column; gap: var(--space-4); }
.ark-footer__lockup { display: inline-flex; align-items: center; gap: var(--space-3); align-self: flex-start; }
.ark-footer__lockup img, .ark-footer__brand img { height: 30px; width: auto; display: block; align-self: flex-start; }
.ark-footer__wordmark { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-lg); letter-spacing: var(--tracking-wider); color: var(--text-strong); }
.ark-footer__tag { font-size: var(--text-sm); color: var(--text-faint); line-height: var(--leading-normal); }
.ark-footer__cols { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.ark-footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
.ark-footer__heading { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-faint); margin: 0 0 var(--space-1); }
.ark-footer__link { font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
.ark-footer__link:hover { color: var(--text-strong); }
.ark-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center;
  max-width: var(--container-max); margin: var(--space-12) auto 0;
  padding-top: var(--space-6); border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint);
}