/* Árshjól
 *
 * The wheel uses the site's own font by default. To force a specific one:
 *   .arshjol { --arshjol-font: "Your Font", sans-serif; }
 */

.arshjol {
  --arshjol-font: inherit;
  --arshjol-green: #00ffa1;
  --arshjol-dark: #00292c;
  --arshjol-hover: #ffffff;
  max-width: 1004px;
  margin-inline: auto;
}

.arshjol-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--arshjol-font);
}

/* Static parts of the design */
.arshjol-svg .ah-none { fill: none; }
.arshjol-svg .ah-line { fill: none; stroke: var(--arshjol-green); stroke-miterlimit: 10; }
.arshjol-svg .ah-green { fill: var(--arshjol-green); }
.arshjol-svg .ah-dark { fill: var(--arshjol-dark); }
.arshjol-svg .ah-pin { fill: var(--arshjol-green); opacity: 0.3; }
.arshjol-svg .ah-pattern { opacity: 0.15; }

/* Event labels (sizes are in SVG units; the viewBox is 1003.84 wide) */
.arshjol-svg .ah-label text {
  fill: var(--arshjol-green);
  font-size: 17px;
  font-weight: 800;
}
.arshjol-svg .ah-label .ah-hit {
  fill: transparent;
  pointer-events: all;
}
.arshjol-svg .ah-label { cursor: pointer; text-decoration: none; }
.arshjol-svg .ah-label:hover text,
.arshjol-svg .ah-label:focus-visible text {
  fill: var(--arshjol-hover);
}
.arshjol-svg .ah-label:focus { outline: none; }

/* List under the wheel */
.arshjol-list { margin-top: 2rem; }
.arshjol-list h3 { margin: 1.5em 0 0.5em; }
.arshjol-list ul { list-style: none; margin: 0; padding: 0; }
.arshjol-list li {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 0.5em 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.35);
}
.arshjol-date { white-space: nowrap; opacity: 0.75; }

/* list="mobile" (default): only on narrow screens. list="none": never. list="always": always. */
.arshjol--list-mobile .arshjol-list,
.arshjol--list-none .arshjol-list { display: none; }

@media (max-width: 700px) {
  .arshjol--list-mobile .arshjol-list { display: block; }
}