/* Hex grid. Children of a node as a honeycomb of links.
 *
 * Needs tokens.css. The markup contract is described in hexgrid.js.
 *
 * Without the script this is a plain, readable list of links. The script
 * adds the class "is-comb" and places the tiles. Everything that depends on
 * the honeycomb is written below ".is-comb".
 */

/* ---- plain list (no script) ------------------------------------------- */
.hexgrid { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.hexgrid li { margin: .4rem 0; }
.hexgrid .hex { color: var(--accent); font-weight: 600; }

/* ---- honeycomb ---------------------------------------------------------- */
.hexgrid.is-comb {
  /* Distance from the center of a tile to one of its corners. Every other
     size follows from it. The script reads this value. */
  --hex-size: 74px;
  --hex-gap: 6px;
  position: relative;
  margin-inline: auto;
}
@media (max-width: 700px) {
  .hexgrid.is-comb { --hex-size: 56px; }
}

/* The script sets the position of every item. */
.hexgrid.is-comb li {
  position: absolute;
  margin: 0;
  width: calc(var(--hex-size) * 1.732 - var(--hex-gap));
  height: calc(var(--hex-size) * 2 - var(--hex-gap));
}
.hexgrid.is-comb li:hover,
.hexgrid.is-comb li:focus-within { z-index: 2; }

.hexgrid.is-comb .hex {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  /* Pointy-top hexagon. */
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--hex-fill, var(--accent));
  color: var(--hex-on-fill, var(--on-accent));
  padding: 0 13%;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: calc(var(--hex-size) * .155);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .03em;
  overflow-wrap: anywhere;
  transition: transform .2s ease, filter .2s ease;
}
.hexgrid.is-comb .hex:hover,
.hexgrid.is-comb .hex:focus-visible {
  transform: scale(1.1);
  filter: brightness(1.12) saturate(1.15);
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .hexgrid.is-comb .hex { transition: none; }
}

/* ---- fills ----------------------------------------------------------------
   data-fill names one of the tile fills of tokens.css. */
.hex[data-fill="1"] { --hex-fill: var(--fill-1); --hex-on-fill: var(--on-fill-1); }
.hex[data-fill="2"] { --hex-fill: var(--fill-2); --hex-on-fill: var(--on-fill-2); }
.hex[data-fill="3"] { --hex-fill: var(--fill-3); --hex-on-fill: var(--on-fill-3); }
.hex[data-fill="4"] { --hex-fill: var(--fill-4); --hex-on-fill: var(--on-fill-4); }
.hex[data-fill="5"] { --hex-fill: var(--fill-5); --hex-on-fill: var(--on-fill-5); }
.hex[data-fill="6"] { --hex-fill: var(--fill-6); --hex-on-fill: var(--on-fill-6); }

/* ---- levels ---------------------------------------------------------------
   data-level says what the viewer gets from the node. Only "full" is
   produced so far. The rules for "teaser" and "inactive" follow later.  */