/* Quickbar — one directory of every page and every section, on every page.
   Shared across the three language copies; the entries live in site-nav-data.js,
   which is generated from the pages themselves by tools/build_site_nav.py. */

/* No font-family here on purpose: the quickbar sits inside each page's own
   header and inherits the site's body face, so it follows if that ever changes. */
.qb { position: relative; }

.qb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* sized to the language pill beside it: 3px ring + 6px cell padding + 11px
     line ≈ 33px, so the two header pills read as one control family */
  min-height: 34px;
  padding: 8px 14px;
  border: 1px solid rgba(241, 234, 220, .14);
  border-radius: 999px;
  background: rgba(2, 8, 6, .44);
  color: #9cafaa;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.qb-btn:hover { color: #f1eadc; border-color: rgba(185, 149, 86, .45); }
.qb-btn[aria-expanded="true"] { color: #061511; background: #b99556; border-color: #b99556; }
/* the score pill on the score page itself — same brass the menu marks it with */
.qb-btn[aria-current="page"] { color: #b99556; }

.qb-bars {
  position: relative;
  width: 14px;
  height: 10px;
  flex: none;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.qb-bars::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: -.75px;
  border-top: 1.5px solid currentColor;
}

.qb-btn[aria-expanded="true"] .qb-bars { border-color: transparent; }
.qb-btn[aria-expanded="true"] .qb-bars::before,
.qb-btn[aria-expanded="true"] .qb-bars::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: -.75px;
  border-top: 1.5px solid currentColor;
}
.qb-btn[aria-expanded="true"] .qb-bars::before { transform: rotate(45deg); }
.qb-btn[aria-expanded="true"] .qb-bars::after { transform: rotate(-45deg); }

/* the sheet */
.qb-panel {
  display: none;
  position: absolute;
  z-index: 90;
  top: calc(100% + 12px);
  right: 0;
  /* one column of titles now, not a three-column directory, so the panel is a
     menu's width — wide enough that most section names still sit on one line */
  width: min(460px, calc(100vw - 32px));
  max-height: min(72svh, 640px);
  overflow: hidden auto;
  overscroll-behavior: contain;
  padding: 16px;
  border: 1px solid rgba(241, 234, 220, .14);
  border-radius: 10px;
  background: #0a1a15;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .58);
}

.qb-panel.open { display: block; }

.qb-search {
  position: sticky;
  top: -16px;
  z-index: 2;
  margin: -16px -16px 16px;
  padding: 16px;
  background: #0a1a15;
  border-bottom: 1px solid rgba(241, 234, 220, .1);
}

.qb-search input {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid rgba(241, 234, 220, .16);
  border-radius: 6px;
  background: rgba(2, 8, 6, .6);
  color: #f1eadc;
  font: inherit;
  font-size: 15px;
}

.qb-search input::placeholder { color: #7f918c; }
.qb-search input:focus { outline: 2px solid #b99556; outline-offset: 2px; border-color: #b99556; }

/* A single column: the panel opens as a short list of closed title rows, and any
   column layout would make groups jump sideways as one of them expands. */
.qb-group { margin-bottom: 2px; }

/* the title row: the name is a link to the page, the chevron beside it opens
   the section, and the two targets never overlap */
.qb-grouphead { display: flex; align-items: center; gap: 4px; }

.qb-grouphead > a.qb-group-title {
  flex: 1;
  min-width: 0;
  /* no left padding: the title's first letter lines up with the rail of the
     links below it, and with the left edge of the search field above */
  padding: 7px 8px 7px 0;
  border-radius: 6px;
  color: #f1eadc;
  font-family: 'Alegreya', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.qb-grouphead > a.qb-group-title:hover { background: rgba(185, 149, 86, .14); color: #d2ac68; }

.qb-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #9cafaa;
  cursor: pointer;
}

.qb-toggle:hover { color: #d2ac68; background: rgba(185, 149, 86, .14); }

/* the chevron is drawn, like the button's bars — no image, no text */
.qb-chev {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.qb-toggle[aria-expanded="true"] .qb-chev { margin-top: 3px; transform: rotate(-135deg); }

/* the list only exists on screen when its group is open, so its spacing is the
   gap an expanded group needs — closed rows stay tight against each other */
.qb-group ul { list-style: none; margin: 2px 0 12px; padding: 0; }

.qb-group a.qb-item {
  display: block;
  padding: 8px 8px 8px 14px;
  border-left: 1px solid rgba(241, 234, 220, .12);
  border-radius: 0 4px 4px 0;
  color: #9cafaa;
  font-size: 13.5px;
  line-height: 1.35;
  text-decoration: none;
}

.qb-group a.qb-item.sub { padding-left: 26px; font-size: 13px; }
.qb-group a.qb-item:hover { background: rgba(241, 234, 220, .05); color: #f1eadc; border-left-color: #b99556; }
.qb-group a.qb-item mark { background: rgba(185, 149, 86, .3); color: #f1eadc; border-radius: 2px; }

.qb-empty { padding: 22px 0; color: #9cafaa; font-size: 14px; }
.qb-hint { padding: 2px 0 0; color: #7f918c; font-size: 12px; }

/* current page */
.qb-group a[aria-current="page"] { color: #b99556; }

@media (max-width: 760px) {
  .qb-panel {
    /* a sheet pinned to the screen, not to the button — the button sits
       mid-header, so anchoring to it pushes the panel off the left edge */
    position: fixed;
    top: var(--qb-top, 64px);
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100svh - var(--qb-top, 64px) - 16px);
    padding: 14px;
  }
  .qb-search { margin: -14px -14px 14px; padding: 14px; top: -14px; }
  .qb-group a.qb-item { padding-top: 11px; padding-bottom: 11px; }
  /* a thumb-sized target for opening a section, clear of the title link */
  .qb-toggle { width: 48px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .qb-btn { transition: none; }
  .qb-chev { transition: none; }
}

/* the pages whose header was only a brand and a language pill */
.qb-slot { display: flex; align-items: center; gap: 14px; }

/* The homepage header also carries two shortcut links. The quickbar covers
   both and everything else, so on a phone they give up their room to it. */
@media (max-width: 760px) {
  .navr .navlink { display: none; }
}

/* Every header now carries two pills — Score and the quickbar — beside the brand
   and the language links. On a small phone the wordmark gives way to the mark
   alone so nothing is pushed off the side. Measured at 390px: without this the
   guide and score headers run 30–80px over and the language links wrap. */
@media (max-width: 520px) {
  header:has(.qb-btn) .brand b { display: none; }
  .qb-slot { gap: 10px; }
}

/* Below 430px the homepage grows its header controls to 48px touch cells, which
   makes the language pill 56px tall. Only that header — the guide pages keep the
   small pill — so the button matches it there and stays 34px everywhere else.
   That same 154px-wide language selector leaves no room for a second pill:
   measured, brand + both pills + languages needs 398px of a 390px phone. On that
   one header the score pill stands down; it is still one tap away inside the
   menu, under "Σκορ τζαι πόντοι". Every other page keeps both pills. */
@media (max-width: 430px) {
  .navr .qb-btn { min-height: 56px; }
  .navr .qb-score { display: none; }
}

/* On the narrowest phones even a guide header runs out of room: brand, both
   pills and the language links measure 355px, so below ~370px the score pill
   stands down there too rather than squeezing the language links into a stack. */
@media (max-width: 370px) {
  .qb-score { display: none; }
}