/* components.css — Links, buttons and the site header. */

/* ---------- Links & buttons ---------- */
.link {
  display: inline-flex; align-items: center; gap: .5rem; padding-bottom: 3px; font-size: .9375rem; font-weight: 500; color: var(--fg-strong);
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%;
  transition: background-size .55s var(--ease-out);
}
.link:hover, .link:focus-visible { background-size: 0% 1px; background-position: 100% 100%; }
.link .icon { transition: transform .4s var(--ease-out); }
.link:hover .icon { transform: translateX(4px); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem; padding: .875rem 1.375rem; border-radius: var(--r-pill);
  font-size: .9375rem; line-height: 1.25rem; font-weight: 500; white-space: nowrap; cursor: pointer;
  translate: var(--bx, 0px) var(--by, 0px);
  transition: background-color .25s, color .25s, box-shadow .25s, translate .5s var(--ease-out);
}
.btn--sm { padding: .625rem 1rem; font-size: .875rem; }
.btn--light { background: var(--fg-strong); color: var(--bg); }
.btn--light:hover { background: var(--fg); }
.btn--ghost { box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--fg-strong); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--fg-strong); }
.btn .icon { transition: transform .4s var(--ease-out); }

.skip-link { position: fixed; left: 1rem; top: calc(env(safe-area-inset-top, 0px) + .75rem); z-index: 100; padding: .75rem 1rem; border-radius: var(--r-pill); background: var(--fg-strong); color: var(--bg); font-size: .875rem; font-weight: 500; transform: translateY(-220%); transition: transform .2s var(--ease-out); }
.skip-link:focus { transform: none; }
/* ---------- Header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--glass); -webkit-backdrop-filter: saturate(1.2) blur(16px); backdrop-filter: saturate(1.2) blur(16px); border-bottom: 1px solid var(--hairline); }
.site-header__bar { display: flex; align-items: center; gap: 1rem; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .55rem; margin-right: auto; color: var(--fg-strong); }
.brand__mark { display: block; width: 1.625rem; height: 1.625rem; filter: var(--mark-filter); transition: filter .4s; }
.brand__name { font-size: 1.4rem; line-height: 1; transform: translateY(-1px); }
.brand:hover .brand__mark, .brand:focus-visible .brand__mark { filter: var(--mark-filter) drop-shadow(0 0 10px rgb(248 222 92 / .7)); }
.site-nav__list { position: relative; display: flex; flex-wrap: wrap; gap: .25rem; }
.nav-indicator { position: absolute; top: 0; left: 0; height: 100%; width: 0; border-radius: var(--r-pill); background: var(--tint); opacity: 0; pointer-events: none; transition: transform .3s var(--ease-in-out), width .3s var(--ease-in-out), opacity .2s; }
.nav-link { position: relative; z-index: 1; display: block; padding: .5rem .875rem; border-radius: var(--r-pill); font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--fg-muted); transition: color .25s; }
.nav-link:hover, .nav-link[aria-current] { color: var(--fg-strong); }
.nav-link[aria-current] { background: var(--tint); }
.site-nav__list.has-indicator .nav-link[aria-current] { background: transparent; }
.theme-toggle { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill); color: var(--fg-strong); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s; }
.theme-toggle:hover { box-shadow: inset 0 0 0 1px var(--fg-strong); }
.theme-toggle .icon { width: 1.05rem; height: 1.05rem; transition: transform .7s var(--ease-out); }
.theme-toggle:hover .icon { transform: rotate(-25deg); }
.nav-toggle { display: none; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (max-width: 767.98px) {
  .js-ready .nav-toggle { display: inline-grid; }
  .js-ready .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: .5rem 1.25rem 1.25rem; background: var(--bg); border-bottom: 1px solid var(--hairline); }
  .js-ready .site-nav.is-open { display: block; }
  .js-ready .site-nav__list { flex-direction: column; }
  .js-ready .site-nav__list .nav-link { padding: .875rem 0; font-size: 1.125rem; border-radius: 0; background: transparent; }
  .nav-indicator { display: none; }
  .js-ready .site-header__cta { display: none; }   /* small screens: the call to action lives in the menu */
  .js-ready .site-nav__cta { display: flex; width: 100%; margin-top: 1rem; padding-block: 1rem; font-size: 1rem; }
}
.site-nav__cta { display: none; }

/* Views */
.js .view { display: none; }
.js .view:first-of-type, .js .view:target { display: block; }
.js main:has(.view:target) .view:first-of-type:not(:target) { display: none; }