/* tesaurex.com — components (Columbia Canvas) */

/* ---------- Header --------------------------------------------------
   Compact, one row, lightly translucent Columbia. Not a copy of any
   other vendor's navigation: wordmark left, three links, one action. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(196, 216, 225, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, background-color 200ms ease;
}

/* Once scrolling starts, near-black product media passes beneath the
   header. At 0.97 the nav keeps 5.6:1 against the darkest thing that can
   scroll under it, while still reading as a material rather than a slab. */
.site-header.is-scrolled {
  background: rgba(196, 216, 225, 0.97);
  border-bottom-color: var(--line-soft);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 58px;
}

.brand-home {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  color: var(--ink);
  flex: none;
}

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

.brand-home .mark {
  width: 23px;
  height: 23px;
  border-radius: 6px;
  flex: none;
}

/* The replaceable placeholder wordmark asset is the active identity.
   Swap assets/brand/placeholder-wordmark.svg to change it site-wide. */
.brand-home .wordmark {
  width: auto;
  height: 17px;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
  margin-left: auto;
  font-size: 0.93rem;
  font-weight: 560;
}

/* 44px tall keeps every nav target clear of WCAG 2.2 SC 2.5.8. It costs no
   header height: the row is already 58px. */
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
}

.site-nav a:hover {
  color: var(--ink);
  text-decoration: none;
}

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

/* `.site-nav a` (0,1,1) outranks `.btn-primary` (0,1,0), which would paint
   the header action's label in nav ink on the azure fill — 1.6:1. These
   restore the button's own colours at matching specificity. */
.site-nav .btn-primary,
.site-nav .btn-primary:hover {
  color: var(--white);
}

.site-nav .btn-secondary,
.site-nav .btn-ghost {
  color: var(--ink);
}

/* ---------- Buttons -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms ease, border-color 150ms ease,
    color 150ms ease, transform 110ms ease;
}

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

.btn:active {
  transform: scale(0.985);
}

.btn-primary {
  background: var(--azure-deep);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--azure-deeper);
  color: var(--white);
}

.btn-secondary {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
}

.btn-secondary:hover {
  border-color: var(--azure);
  color: var(--azure-ink);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn-ghost:hover {
  border-color: var(--azure);
  color: var(--azure-ink);
}

.btn-sm {
  min-height: 40px;
  padding: 0.55rem 1.1rem;
  font-size: 0.93rem;
}

/* Honest unavailable state — announced by aria-disabled, never a fake
   link, no pointer cursor, no misleading hover. */
.btn[aria-disabled="true"] {
  cursor: default;
  background: var(--columbia-deep);
  color: var(--ink-2);
  border-color: var(--line-soft);
  opacity: 1;
}

.btn[aria-disabled="true"]:hover {
  background: var(--columbia-deep);
  color: var(--ink-2);
  border-color: var(--line-soft);
  text-decoration: none;
}

.btn[aria-disabled="true"]:active {
  transform: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

/* ---------- Status pills --------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.66rem 0.28rem;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 640;
  letter-spacing: 0.012em;
  white-space: nowrap;
}

.pill-beta {
  background: var(--azure-wash);
  color: var(--azure-ink);
  box-shadow: inset 0 0 0 1px rgba(0, 128, 254, 0.22);
}

.pill-soon {
  background: var(--columbia-soft);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

/* ---------- Media frame ---------------------------------------------
   One restrained frame. No nested cards, no stacked dark boxes. */

.media-figure {
  margin: 0;
}

.media-frame {
  position: relative;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--blue-white);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.media-frame video,
.media-frame img {
  width: 100%;
  display: block;
}

.media-figure figcaption {
  margin-top: 0.7rem;
  font-size: var(--t-small);
  color: var(--ink-2);
}

/* Small, refined loop control (WCAG 2.2.2) — deliberately not a large
   floating white circle. 44px hit target, 28px visible disc. */
.loop-toggle {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.loop-toggle::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 1px rgba(11, 17, 22, 0.12),
    0 1px 3px rgba(11, 17, 22, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 150ms ease;
}

.loop-toggle svg {
  position: relative;
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.loop-toggle:hover::before {
  background: var(--white);
}

/* ---------- Island stage ---------------------------------------------
   The MacBook display environment the island attaches to. One contained
   product surface — the only one in the homepage hero. */

.island-stage {
  position: relative;
  border-radius: var(--r-media);
  overflow: hidden;
  background: linear-gradient(168deg, #dbe9f0 0%, #c9dde7 46%, #b9d2df 100%);
  box-shadow: inset 0 0 0 1px rgba(11, 17, 22, 0.1);
  /* Reads as the top of a MacBook display: enough room below the island to
     show it floating at the screen top, without a dead light field. */
  aspect-ratio: 1.95 / 1;
}

.island-stage .island-art {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 76%;
  height: auto;
}

/* Real product capture. The footage was recorded over the same gradient
   this stage paints, sized so the island occupies the same 76% width the
   illustration does — the frame, geometry, and colours do not change when
   the video activates. */
.island-stage .island-demo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.island-stage.is-compact {
  aspect-ratio: 3.1 / 1;
}

.island-stage.is-compact .island-art {
  width: 64%;
}

/* Standalone island illustration (product page rows) */
.island-plate {
  border-radius: var(--r-media);
  overflow: hidden;
  background: linear-gradient(168deg, #dbe9f0 0%, #c9dde7 52%, #bad3e0 100%);
  box-shadow: inset 0 0 0 1px rgba(11, 17, 22, 0.1);
  padding: 0;
}

.island-plate img {
  width: 100%;
  display: block;
}

/* ---------- Footer ---------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line-soft);
  padding-block: 2rem 2.75rem;
  font-size: var(--t-small);
  color: var(--ink-2);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 2rem;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-weight: 620;
}

.footer-brand img {
  height: 15px;
  width: auto;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-left: auto;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
}

.footer-links a:hover {
  color: var(--azure-ink);
}

.footer-note {
  flex-basis: 100%;
  margin: 0;
  color: var(--ink-3);
}

@media (max-width: 700px) {
  .footer-links {
    margin-left: 0;
    flex-basis: 100%;
  }
}