/* *-*-*-*-*-*-*-*-*-*-*-* the bar on every garden page (Damla, 6 Nov): home, devlog, books; on the right the magnifier and a kind word *-*-*-*-*-*-*-*-*-*-*-* */
/* every page keeps its own bar on a laptop; this file comes after the page's own css and holds what all of them share:
   the kind word, the magnifier without a border, and the bar on a phone, one row */
header.site .hello { color: var(--ink2); white-space: nowrap; cursor: default; }

/* the magnifier: no border, no outline; white, with a white glow, under the pointer; a softer glow for the keyboard */
header.site .find-b, header.site .find-open { outline: none; }
/* its field never wears the book's yellow focus ring (book.css :focus-visible): the caret and its own line are enough */
header.site .find input:focus, header.site .find input:focus-visible { outline: none; }
header.site .find-b svg, header.site .find-open svg { transition: filter .15s ease; }
header.site .find-b:hover, header.site .find-open:hover, header.site .find-b:focus-visible, header.site .find-open:focus-visible { color: var(--ink); outline: none; }
header.site .find-b:hover svg, header.site .find-open:hover svg { filter: drop-shadow(0 0 4px rgba(255, 255, 255, .75)); }
header.site .find-b:focus-visible svg, header.site .find-open:focus-visible svg { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .45)); }

/* only the page you are on is white; home is grey on every other page */
header.site nav a.home:not([aria-current]) { color: var(--ink2) !important; }
header.site nav a.home:not([aria-current]):hover, header.site nav a.home:not([aria-current]):focus-visible { color: var(--ink) !important; }
header.site nav [aria-current] { color: var(--ink); }

/* *-*-*-*-*-*-*-*-*-*-*-* a phone: one row, 52 px *-*-*-*-*-*-*-*-*-*-*-* */
@media (max-width: 700px) {
  header.site { height: 52px; padding: 0 16px; gap: 16px; flex-wrap: nowrap; align-items: center; }
  /* damla, 6 nov: devlog books cv about projects websites; home, the magnifier and the kind word stay on a laptop */
  header.site nav { gap: 14px; flex: none; flex-wrap: nowrap; }
  header.site nav a.home { display: none; }
  header.site .elsewhere { display: none !important; }
  header.site .elsewhere { flex: 1 1 auto; min-width: 0; margin-left: auto; justify-content: flex-end; gap: 16px; flex-wrap: nowrap; }
  /* books drops under the bar, across the screen, a finger's room for each book */
  .menu { position: static; }
  .menu-d { top: 100%; left: 16px; right: 16px; min-width: 0; margin-top: 0; }
  .menu-d > * { min-height: 44px; align-items: center; }
  /* searching: the field takes the kind word's room */
  .find { min-width: 0; }
  .find.on { flex: 1 1 auto; justify-content: flex-end; }
  .find.on input, .find.on .find-field { flex: 1 1 auto; width: 0; max-width: 220px; min-width: 0; margin-right: 0; }
  .find.on + .hello { display: none; }
  /* a finger's room: every word of the bar answers a 44 px square round it, nothing moves */
  header.site nav > a, header.site .menu-t, header.site .find-b, header.site .find-open { position: relative; }
  header.site nav > a::after, header.site .menu-t::after, header.site .find-b::after, header.site .find-open::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}
/* the narrowest phones: the words come a little closer, the bar stays one row */
@media (max-width: 359px) {
  header.site nav { gap: 10px; }
}