/* Navigacija natjecanja i donja traka — isti sastavni dijelovi na
 * unutarnjim, javnim i terenskim stranicama. Boje iz boje.css. */

/* ---------- traka natjecanja ---------- */

/* Ispod glavne trake, na svim stranicama jednog natjecanja. Lijepi se uz
   glavnu traku pri listanju, pa je skok na drugi dio natjecanja uvijek
   jedan klik, bez vraćanja na vrh. */
.podtraka {
  position: sticky; top: 58px; z-index: 20;
  display: flex; align-items: center; gap: 6px;
  margin: -8px -4px 18px; padding: 8px 4px;
  background: rgba(246, 242, 240, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.podtraka-natrag {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-s); text-decoration: none;
  color: var(--tinta-blijeda); font-size: 22px; line-height: 1;
  transition: background var(--brzina) ease, color var(--brzina) ease;
}
.podtraka-natrag:hover { background: var(--n-100); color: var(--tinta); }
.podtraka-naziv {
  flex: 0 1 auto; min-width: 0; margin-right: 6px;
  color: var(--tinta); font-weight: 650; text-decoration: none; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 32ch;
}
.podtraka-naziv:hover { color: var(--crvena-tamna); }
.podtraka-kartice {
  display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0;
  padding: 3px; border-radius: var(--r-m);
  background: var(--n-100);
}
.podtraka-kartice > a, .podtraka-izbornik > summary {
  flex: 0 0 auto;
  padding: 7px 13px; border-radius: 9px;
  border: 1px solid transparent;
  font-size: 13.5px; font-weight: 600; color: var(--tinta-blijeda);
  text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none;
  transition: background var(--brzina) ease, color var(--brzina) ease, box-shadow var(--brzina) ease;
}
.podtraka-kartice > a:hover, .podtraka-izbornik > summary:hover { color: var(--tinta); }
.podtraka-kartice > a.tu {
  background: var(--ploha); color: var(--crvena-700);
  box-shadow: var(--sjena-2);
}
.podtraka-izbornik { position: relative; margin-left: auto; flex: 0 0 auto; }
.podtraka-izbornik > summary { background: var(--ploha); border-color: var(--rub); }
.podtraka-izbornik > summary::-webkit-details-marker { display: none; }
.podtraka-izbornik > summary::after {
  content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.podtraka-izbornik[open] > summary { background: var(--ploha); color: var(--tinta); box-shadow: var(--sjena-2); }
.podtraka-popis {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 25;
  min-width: 230px; padding: 6px;
  background: var(--ploha); border: 1px solid var(--rub); border-radius: var(--r-m);
  box-shadow: var(--sjena-3);
  display: flex; flex-direction: column;
}
.podtraka-popis > a {
  padding: 9px 12px; border-radius: var(--r-s);
  color: var(--tinta); text-decoration: none; font-size: 14px; white-space: nowrap;
}
.podtraka-popis > a:hover { background: var(--n-50); color: var(--crvena-tamna); }
.podtraka-crta { height: 1px; margin: 5px 6px; background: var(--rub); }



/* Kartice se lome u novi red umjesto da nestanu izvan ruba — s pet-šest
   kartica i izbornikom Dokumenti na uskom zaslonu inače zadnja „pobjegne". */
.podtraka-kartice { flex-wrap: wrap; }

/* točkica „uživo" i brojčić uz karticu */
.podtraka-kartice > a { position: relative; }
.podtraka-tocka {
  display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%;
  background: var(--crvena-500); vertical-align: 1px;
  animation: dno-kuca 1.6s ease-in-out infinite;
}
.podtraka-znak {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 7px;
  border-radius: 9px; background: var(--zelena); color: #fff;
  font-style: normal; font-size: 11px; font-weight: 700; vertical-align: 1px;
}
@keyframes dno-kuca { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* podijeli — uz kartice, kao sporedni gumb */
.podtraka-dijeli {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 13px;
  border: 1px solid var(--rub); border-radius: var(--r-pill);
  background: var(--ploha); color: var(--tinta);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: var(--sjena-1);
}
.podtraka-dijeli svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.podtraka-dijeli:hover { border-color: var(--crvena-300); color: var(--crvena-800); }

/* naslov javne stranice natjecanja */
.jn-naslov { align-items: flex-start; }
.jn-podnaslov { font-size: 13px; color: var(--tinta-blijeda); margin-top: 4px; }
.jn-uzivo { color: var(--crvena-700); font-weight: 650; padding-left: 13px; position: relative; }
.jn-uzivo::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3px;
  border-radius: 50%; background: var(--crvena-500); animation: dno-kuca 1.6s ease-in-out infinite;
}
.jn-sat { text-align: right; }
.jn-sat #sat { font-size: 27px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.jn-sat #stanje { font-size: 12px; color: var(--tinta-blijeda); margin-top: 4px; }

/* ---------- donja traka (mobitel) ---------- */

/* Na računalu je nema; na mobitelu zamjenjuje izbornik u gornjoj traci. */
.dno { display: none; }

@media (max-width: 640px) {
  .dno {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--ploha);
    border-top: 1px solid var(--rub);
    box-shadow: 0 -6px 18px -10px rgba(60, 30, 25, .25);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .dno a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 56px; padding: 6px 2px 5px;
    color: var(--tinta-blijeda); text-decoration: none;
    font-size: 11px; font-weight: 600; letter-spacing: .01em;
    transition: color var(--brzina) ease;
  }
  .dno a svg {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  }
  /* aktivna stavka: ikona u crvenom jastučiću, kao na javnim stranicama */
  .dno a.tu { color: var(--crvena-700); }
  .dno a.tu svg {
    stroke-width: 2.3; padding: 3px 12px; box-sizing: content-box;
    border-radius: var(--r-pill); background: var(--crvena-100);
  }
  .dno a:active { color: var(--tinta); }

  /* Traka natjecanja: naziv u prvom retku, kartice ispod — lome se u
     redove, ništa ne ostaje izvan ruba. Nije ljepljiva — gornja traka je
     niža, a na malom zaslonu svaki piksel visine vrijedi. */
  .podtraka {
    position: static; flex-wrap: wrap; gap: 4px 6px;
    margin: -4px 0 14px; padding: 0;
  }
  /* prvi redak: strelica + naziv preko cijele širine, pa se kartice lome ispod */
  .podtraka-naziv { flex: 1 1 calc(100% - 40px); max-width: none; margin-right: 0; }
  /* drugi redak: kartice (lome se) + izbornik koji stoji uz njih */
  .podtraka-kartice { flex: 1 1 0; order: 3; min-width: 0; }
  .podtraka-kartice > a, .podtraka-izbornik > summary { padding: 9px 13px; font-size: 14px; }
  .podtraka-izbornik { position: static; order: 4; margin-left: 0; }
  .podtraka-popis {
    position: fixed; left: 12px; right: 12px; top: auto;
    bottom: calc(66px + env(safe-area-inset-bottom, 0));
    min-width: 0; padding: 8px;
  }
  .podtraka-popis > a { padding: 12px 14px; font-size: 15px; white-space: normal; }


  .podtraka-dijeli { order: 5; }
  .jn-sat { text-align: left; }
  .jn-sat #sat { font-size: 23px; }

  .dno a { position: relative; }
  .dno-tocka, .dno-znak { position: absolute; top: 5px; left: 50%; margin-left: 8px; }
  .dno-tocka { width: 7px; height: 7px; border-radius: 50%; background: var(--crvena-500); animation: dno-kuca 1.6s ease-in-out infinite; }
  .dno-znak {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--zelena); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700;
  }
}