/* ============================================================
   IBBIS / Commec — Button & Link System  (v2.0)
   ------------------------------------------------------------
   Vendored from the IBBIS Design System (project "IBBIS Design System",
   buttons.css). Keep in sync via DesignSync rather than editing here.

   Six finalized treatments + two nav states. No hover wobble: there is NO
   `transform: translateY(...)` on any hover state. Hover feedback is
   colour / fill / outline / an animated underline only — nothing moves.

   TOKEN DEPENDENCIES (defined in colors_and_type.css): --red, --red-hover,
   --navy, --ibbis-white, --font-sans, --tracking-caps (.10em button label),
   --tracking-caps-l (.14em nav label), --fs-xs, --radius-none, --dur-med,
   --ease-out, --shadow-inset-focus.

   MARKUP CONTRACTS
     Buttons — <a> or <button>. Add `.btn--on-dark` on navy surfaces.
       Light primary  : <a class="btn btn--primary">…</a>
       Light secondary: <a class="btn btn--secondary">…</a>
       Dark  primary  : <a class="btn btn--primary btn--on-dark">…</a>
       Dark  secondary: <a class="btn btn--secondary btn--on-dark">…</a>
     Nav — <a>, inside a navy bar (colour inherits from the bar).
       Text-link : <a class="nav-link">…</a>
       Button    : <a class="nav-link nav-link--button">…</a>
       Selected / current page — add aria-current="page"; its underline
       becomes persistent (does not depend on hover).
   ============================================================ */

/* ---------- Base button ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-none);
  text-decoration: none;
  cursor: pointer;
  /* colour-only transitions — deliberately NO transform here */
  transition: background var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-inset-focus); }

/* 1 · Light-bg primary — red, darkens to --red-hover on hover */
.btn--primary {
  background: var(--red);
  color: var(--ibbis-white);
  border-color: var(--red);
}
.btn--primary:hover {
  background: var(--red-hover);
  border-color: var(--red-hover);
}

/* 2 · Light-bg secondary — navy outline, fills navy + white text on hover */
.btn--secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--secondary:hover {
  background: var(--navy);
  color: var(--ibbis-white);
  border-color: var(--navy);
}

/* 3 · Dark-bg primary — red, fills navy + white outline + white text on hover */
.btn--on-dark.btn--primary {
  background: var(--red);
  color: var(--ibbis-white);
  border-color: var(--red);
}
.btn--on-dark.btn--primary:hover {
  background: var(--navy);
  color: var(--ibbis-white);
  border-color: var(--ibbis-white);
}

/* 4 · Dark-bg secondary — white outline, fills white + navy text on hover */
.btn--on-dark.btn--secondary {
  background: transparent;
  color: var(--ibbis-white);
  border-color: var(--ibbis-white);
}
.btn--on-dark.btn--secondary:hover {
  background: var(--ibbis-white);
  color: var(--navy);
  border-color: var(--ibbis-white);
}

/* ---------- Nav link / button ----------
   Underline geometry is UNIFIED across both nav treatments (identical bottom
   offset + height) so a text-link and a button in the bar align exactly.
   Colour inherits from the bar; only the underline colour differs. */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps-l);
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  padding-bottom: 6px;   /* room shared by both underlines */
  cursor: pointer;
  white-space: nowrap;
}
/* 5 · Nav text-link — animated red underline, hugging the text */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;             /* unified position */
  height: 2px;           /* unified height   */
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-med) var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); }

/* 6 · Nav button — same underline geometry, white instead of red */
.nav-link--button::after { background: var(--ibbis-white); }

/* Persistent selected / current-page state — underline stays, independent of
   hover. Red for text-links, white for buttons (each inherits its ::after). */
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .nav-link::after { transition: none; }
}