/* ============================================================
   LINKS & BUTTONS — single source of truth for every clickable
   text element on the site.

   Vocabulary: Fragment Mono 12/18, lowercase, underlined,
   white-40 → white-90 on hover. "Pill" = dashed border + soft fill.

   Selectors covered:
     • nav menu .....  .combined-menu a   (+ .link-text / .year)
     • in-text pill ..  .bio-link (inline) , .bio-case-link (block)
     • in-text text ..  .bio-project-link  (underline only, no pill)
     • tool buttons ..  .action-btn , .evenit-action-btn

   NB: the nav-menu DOM is generated by dist/core.bundle.js, so we
   target the existing selectors rather than a single shared class.
   Menu CONTAINER layout stays in combined-menu.css; non-link bio
   text styles stay in bio-text.css.
   ============================================================ */

/* ---- TEXT: the underlined label (shared by every link/button) ---- */
.combined-menu a .link-text,
.combined-menu a .year,
.bio-link,
.bio-case-link,
.bio-project-link,
.action-btn,
.evenit-action-btn {
  color: var(--white-40);
  font-family: "Fragment Mono", monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  text-transform: lowercase;
  text-decoration-line: underline;
  text-decoration-color: rgba(255, 255, 255, 0.40);
  text-decoration-thickness: 7.5%; /* ~0.9px */
  text-underline-offset: 1.6px;
  text-underline-position: auto;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* the nav <a> wraps its label in a span — keep the <a> itself un-underlined */
.combined-menu a {
  text-decoration: none;
}

/* ---- PILL: the button box (everything except the plain text-link) ---- */
.combined-menu a,
.bio-link,
.bio-case-link,
.action-btn,
.evenit-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.3s ease, color 0.2s ease, text-decoration-color 0.2s ease;
}

/* ---- per-context display variants ---- */
/* social links flow inline within running text */
.bio-link {
  vertical-align: baseline;
}

/* case links: own line, hug their text, 4px gap above each */
.bio-case-link {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
}

/* ---- HOVER (all links/buttons) ---- */
.combined-menu a:hover,
.bio-link:hover,
.bio-case-link:hover,
.action-btn:hover,
.evenit-action-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
.combined-menu a:hover .link-text,
.combined-menu a:hover .year,
.bio-link:hover,
.bio-case-link:hover,
.bio-project-link:hover,
.action-btn:hover,
.evenit-action-btn:hover {
  color: var(--white-90);
  text-decoration-color: rgba(255, 255, 255, 0.90);
}

/* ---- ACTIVE (nav current page) ---- */
.combined-menu a.active {
  background: rgba(255, 255, 255, 0.12);
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.20);
}
.combined-menu a.active .link-text,
.combined-menu a.active .year {
  color: var(--white-90);
  text-decoration-color: rgba(255, 255, 255, 0.90);
}





/* ---- hover/active color "core" ----*/
.combined-menu a[data-page="core"]:hover,
.combined-menu a[data-page="core"].active {
  background: rgba(232, 127, 255, 0.12);   /* mint fill, more transparent */
  border-color: rgba(232, 127, 255, 0.24); /* mint border, more transparent */
}
.combined-menu a[data-page="core"]:hover .link-text,
.combined-menu a[data-page="core"].active .link-text {
  color: rgba(232, 127, 255, 1) !important;
  text-decoration-color: rgba(232, 127, 255, 1) !important;
}




/* ---- per-link colour overrides (keyed by the bundle's data-page attr) ----
   clay.pet wears its mint (#E3EFCD) identity on hover AND when active (current page):
   solid mint text + a translucent mint fill & border. */
.combined-menu a[data-page="clay"]:hover,
.combined-menu a[data-page="clay"].active {
  background: rgba(255, 157, 71, 0.12);   /* mint fill, more transparent */
  border-color: rgba(255, 157, 71, 0.24); /* mint border, more transparent */
}
.combined-menu a[data-page="clay"]:hover .link-text,
.combined-menu a[data-page="clay"].active .link-text {
  color: rgba(255, 157, 71, 1) !important;
  text-decoration-color: rgba(255, 157, 71, 1) !important;
}




.combined-menu .active .link-text,
.combined-menu a[data-page="clay"].active .link-text,
.combined-menu a[data-page="core"].active .link-text
{
  text-decoration-line: none !important; /* active page: no underline (longhand — iOS Safari ignores the shorthand-with-color form) */
}





/* ---- PLAIN TEXT-LINK: project names (freelance previews), no pill ----
   inline-block + nowrap keeps each name on one line; the padding gives
   post-comma spacing and a wrap opportunity between projects. */
.bio-project-link {
  display: inline-block;
  white-space: nowrap;
  padding: 2px 4px 2px 1px;
  margin: -2px -3px -2px 0;
  line-height: 20px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* yellow text selection on case links */
.bio-case-link::selection {
  background-color: rgba(255, 208, 0, 0.12);
  color: var(--white-90);
}

/* ---- mobile ---- */
@media (max-width: 768px) {
  .combined-menu a .link-text,
  .combined-menu a .year,
  .bio-link,
  .bio-case-link,
  .bio-project-link,
  .action-btn,
  .evenit-action-btn {
    font-size: 14px;
    line-height: 20px;
  }
.combined-menu .active .link-text,
.combined-menu a[data-page="clay"].active .link-text,
.combined-menu a[data-page="core"].active .link-text
{
  text-decoration-line: none !important; /* active page: no underline (longhand — iOS Safari ignores the shorthand-with-color form) */
}

}