/* awesome — app-specific CSS extensions
 *
 * Ported verbatim from the original web-project-front-end's
 * `src/index.css` and `src/App.css` (the React port we're rebuilding).
 * These rules extend Tachyons with project-specific utilities and
 * tooltip primitives.
 *
 * Linked AFTER Tachyons in docs/index.html so equal-specificity rules
 * here win on cascade order.
 */

/* ---------- from src/index.css ---------- */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* ---------- from src/App.css ---------- */

:root {
  --tachyons-blue: #357EDD;
}

html, body, h1, h2, p, ul {
  margin: 0;
  padding: 0;
}

.lato {
  font-family: 'Lato', "Lucida Grande", Tahoma, sans-serif;
}

.mw-fixed-l {
  max-width: 64rem;
}

.f0 {
  font-size: 4rem;
}

.balance {
  text-wrap: balance;
}

.resize-none {
  resize: none;
}

/* tooltip primitives — from https://www.w3schools.com/css/css_tooltip.asp */

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tt-bottom.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tt-left.tooltip .tooltiptext {
  top: -5px;
  right: 105%;
}

.tt-bottom-left.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  right: 0;
}

/* hover/focus/active surface helpers */

.hover-bg-light-gray {
  background-color: rgba(238, 238, 238, 0);
  transition: all .2s ease-in;
}

.hover-bg-light-gray:hover, .hover-bg-light-gray:focus {
  background-color: rgba(238, 238, 238, 1);
  transition: all .2s ease-in;
}

.hover-bg-light-gray:active {
  background-color: rgba(238, 238, 238, 1);
  transition: all .2s ease-out;
}

.active-bg-white:active {
  background-color: white;
}

.focus-bg-white:focus {
  background-color: white;
}

/* avatar sizing — extends Tachyons w2/h2 with a slightly larger 3rem variant */

.w23 {
  width: 3rem;
}

.h23 {
  height: 3rem;
}

.lh-2 {
  line-height: 2rem;
}

/* link/button underline helper */

.dynamic-underline:hover,
.dynamic-underline:focus {
  text-decoration: underline;
}

/* ============================================================
 * Phase 9 Thread 1 — Tachyons checkbox-hack responsive nav
 *
 * Pattern: a hidden checkbox toggles the visibility of the nav
 * link list via the `:checked` selector. No JavaScript. The
 * hamburger `<label>` wraps a font-awesome `fa-bars` icon and
 * is `for=` the checkbox.
 *
 * Tachyons handles the breakpoint flip via `-ns` utility variants
 * (label is `.dn-ns` so it disappears at ≥ 30em; link list is
 * `.flex-ns` so it lays out horizontally at ≥ 30em). The rules
 * below add the ONE thing Tachyons doesn't have: the
 * `:checked` mobile reveal.
 *
 * Reference: github.com/dwyl/learn-tachyons#responsive-navigation-menu
 * ============================================================ */

/* The checkbox itself is hidden — only its :checked state matters. */
.nav-toggle-input {
  display: none;
}

/* Mobile default: link list hidden. The .nav-collapsible class is
   on the <ul>. On mobile (< 30em) it stays display:none until the
   checkbox is :checked; on ns+ it's display:flex via `.flex-ns`.
   When revealed on mobile, items stack vertically and align to the
   right edge (so they sit under the hamburger button position). */
.nav-toggle-input:checked ~ .nav-collapsible {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}

/* The hamburger is intentionally gray regardless of checked state.
   The blue color is reserved for the currently-active nav link
   (Home / Profile / Settings — see nav.cljc's render). Using blue
   for the hamburger too would dilute the "you are here" signal. */