/* ═══════════════════════════════════════════════
   HSHL — layout.css
   Zajednički okvir: navigacija, mobilni izbornik, traka rezultata, podnožje,
   okvir sadržaja. Izvor: handoff redizajna (faza 2).
═══════════════════════════════════════════════ */

/* Poveznica „Preskoči na sadržaj" živi u components.css uz .screen-reader-text. */

/* ═══════════ NAVIGACIJA ═══════════
   Prozirna dok je stranica na vrhu, pa se zatamni nakon 40 px skrola
   (js/main.js dodaje .is-scrolled). Blur drži čitljivost dok je prozirna. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
  padding-inline: var(--pad-x);
  background: rgba(11,13,20,.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--linija);
  transition: background .3s ease;
}
.nav.is-scrolled { background: rgba(11,13,20,.92); }

.nav__brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav__logo { width: 42px; height: 42px; object-fit: contain; }

.nav__name {
  display: flex; flex-direction: column; line-height: 1;
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .14em;
  color: var(--bijela);
}
.nav__name small {
  font-family: var(--oznaka);
  font-size: .5rem; font-weight: 400;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--tekst-prigusen);
  margin-top: 3px;
}

.nav__links { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 24px); }
.nav__lista { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 24px); }

.nav__links .nav__lista a {
  font-family: var(--oznaka);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--tekst-prigusen);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.nav__links .nav__lista a:hover { color: #fff; }

/* Aktivna stranica: bijeli tekst i crvena crta. Klase dolaze iz wp_nav_menu(). */
.nav__lista .current-menu-item > a,
.nav__lista .current-menu-ancestor > a,
.nav__lista .current_page_item > a {
  color: var(--bijela);
  border-bottom-color: var(--crvena);
}

.nav__cta {
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: #fff;
  background: var(--crvena);
  padding: 12px 20px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background .25s ease;
}
.nav__cta:hover { background: var(--crvena-hover); color: #fff; }

/* ═══════════ HSHL.TV ═══════════
   Prijenosi su „živo" stanje, pa nose ledeno plavu (pravilo 8): obrub i
   točka koja pulsira. Izbornik ide udesno do nje (`margin-left: auto`). */
.nav__links { margin-left: auto; }
.nav__tv {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  font-family: var(--oznaka);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--bijela);
  padding: 10px 14px;
  border: 1px solid var(--plava);
  transition: background .25s ease;
}
.nav__tv:hover { background: rgba(74,144,196,.16); color: #fff; }
.nav__tv-tocka {
  /* Romb, kao točke u ljestvici — tema nema zaobljenja. */
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--plava);
  animation: nav-tv-puls 1.8s ease-in-out infinite;
}
@keyframes nav-tv-puls {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

/* Telefon: grb, kratica, podnaslov, HSHL.TV i hamburger ne stanu u 350px —
   hamburger je ispadao iz ekrana. Podnaslov otpada (puni naziv je u heroju i
   podnožju), gumb se zbija. */
@media (max-width: 600px) {
  .nav { gap: 12px; }
  .nav__name small { display: none; }
  .nav__burger { flex-shrink: 0; }
  .nav__tv { padding: 8px 10px; font-size: .64rem; letter-spacing: .12em; gap: 6px; }
}

/* ═══════════ PREBACIVAČ JEZIKA ═══════════ */
.nav__jezici {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--oznaka);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .2em;
}
.nav__jezik { display: flex; align-items: center; gap: 8px; }
.nav__jezik + .nav__jezik::before { content: '/'; color: rgba(237,241,247,.2); }
.nav__jezik a { color: var(--tekst-prigusen); transition: color .2s ease; }
.nav__jezik a:hover { color: #fff; }
/* Oznaka aktivnog jezika je 0.68rem — sitno, pa ide na svjetliju crvenu. */
.nav__jezik--aktivan span { color: var(--crvena-tekst); }

/* ═══════════ HAMBURGER ═══════════ */
.nav__burger {
  display: none;
  flex-direction: column; justify-content: center; align-items: stretch;
  gap: 6px;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 0; cursor: pointer;
}
.nav__burger span {
  display: block; height: 2px;
  background: var(--bijela);
  transition: transform .3s ease, opacity .25s ease;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ═══════════ TRAKA REZULTATA ═══════════
   U redizajnu stoji uz DONJI rub, iznad sadržaja, i klizne u vidljivost tek
   kad hero prođe (js/pokret.js dodaje .is-vidljiv). Bez JS-a je vidljiva
   odmah — pravilo 12: skripta nadograđuje, ne omogućuje. */
.ticker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center;
  height: var(--ticker-h);
  background: rgba(11,13,20,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--linija);
}
/* Skriveno stanje postavlja klasa koju upisuje js/pokret.js, i to tek kad je
   sigurno da će je isti kod i maknuti. Ista zaštita kao kod `.js-reveal`: da
   traka bez skripte ne ostane zauvijek gurnuta ispod ruba. */
.ticker.is-vozi { transform: translateY(101%); transition: transform .5s var(--krivulja); }
.ticker.is-vozi.is-vidljiv { transform: none; }

.ticker__label {
  flex-shrink: 0;
  align-self: stretch;
  display: flex; align-items: center;
  background: var(--crvena);
  color: #fff;
  font-family: var(--oznaka);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  padding: 0 18px;
}
.ticker__viewport { overflow: hidden; flex: 1; min-width: 0; display: flex; align-items: center; }
.ticker__track {
  display: flex; align-items: center; gap: 48px;
  white-space: nowrap;
  animation: ticker-klizi 36s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker-klizi {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker__item {
  font-family: var(--oznaka);
  font-size: .72rem;
  color: var(--tekst);
  transition: color .2s ease;
}
.ticker__item:hover { color: var(--bijela); }
.ticker__item b {
  color: var(--plava);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  margin-right: 10px;
}
.ticker__item em { font-style: normal; color: var(--bijela); font-weight: 700; }

/* ═══════════ OKVIR SADRŽAJA ═══════════ */
.wrap {
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Navigacija je fiksna, pa sadržaj mora dobiti razmak jednak njezinoj visini.
   Traka rezultata više ne oduzima prostor na vrhu — u redizajnu je uz donji
   rub — pa se u razmak ne uračunava; umjesto toga podnožje dobiva razmak
   ispod sebe da je zadnji red ne prekrije. */
.glavni { padding-top: var(--nav-h); }

/* Hero je jedina sekcija koja SMIJE ići pod fiksnu navigaciju. Negativna
   margina poništava razmak koji .glavni dodaje svemu ostalom, pa se offset ne
   računa dvaput. */
.glavni > .hero:first-child,
.glavni > .hero-track:first-child { margin-top: calc(-1 * var(--nav-h)); }

/* ═══════════ PODNOŽJE ═══════════ */
.footer {
  background: var(--led);
  border-top: 1px solid var(--linija);
  padding: clamp(56px, 7vw, 96px) 0 0;
  /* Prostor da fiksna traka rezultata ne prekrije zadnji red. */
  padding-bottom: var(--ticker-h);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding-inline: var(--pad-x);
  max-width: 1600px; margin-inline: auto;
}

.footer__brand { display: flex; align-items: flex-start; gap: 16px; }
.footer__logo { width: 54px; height: 54px; object-fit: contain; flex-shrink: 0; }
.footer__brand b {
  display: block;
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 900; font-size: 1.1rem;
  letter-spacing: .12em;
  color: var(--bijela);
}
.footer__brand p {
  font-size: .8rem;
  color: var(--tekst-prigusen);
  margin-top: 8px; line-height: 1.55;
}

.footer__col { display: flex; flex-direction: column; gap: 10px; }
/* Naslov stupca je 0.64rem — sitan crveni tekst, dakle svjetlija crvena. */
.footer__col b {
  font-family: var(--oznaka);
  font-size: .64rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--crvena-tekst);
  margin-bottom: 6px;
}
.footer__lista { display: flex; flex-direction: column; gap: 10px; }
.footer__col a,
.footer__col p,
.footer__col span {
  font-size: .84rem;
  color: var(--tekst-prigusen);
}
.footer__col a { transition: color .2s ease; }
.footer__col a:hover { color: var(--bijela); }
.footer__col p a { color: inherit; }
.footer__col p a:hover { color: var(--bijela); }

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px;
  margin-top: clamp(40px, 5vw, 72px);
  padding: 24px var(--pad-x);
  max-width: 1600px; margin-inline: auto;
  border-top: 1px solid var(--linija);
}
.footer__bottom p,
.footer__bottom a {
  font-family: var(--oznaka);
  font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.footer__bottom a:hover { color: var(--bijela); }
.footer__social { display: flex; gap: 20px; }

/* Završna pruga: crvena / bijela / navy u jednakim trećinama. */
.footer__pruga {
  height: 4px;
  background: linear-gradient(90deg,
    var(--crvena) 0 33.33%,
    var(--bijela) 33.33% 66.66%,
    var(--navy)   66.66% 100%);
}

/* ═══════════ RESPONSIVE ═══════════
   Redizajn ima jedan prijelom: 920 px. Iznimka je navigacija: s devet stavki
   (Natjecanja, rujan 2026.) vodoravni izbornik ne stane ispod ~1240 px, pa se
   ondje sklapa u hamburger; iznad toga se do 1500 px samo zbija. */
@media (max-width: 1500px) {
  .nav { gap: 18px; }
  .nav__links,
  .nav__lista { gap: clamp(10px, 1.1vw, 18px); }
  .nav__links .nav__lista a { letter-spacing: .1em; }
  .nav__cta { padding-inline: 16px; white-space: nowrap; }
}

@media (max-width: 1240px) {
  /* Zatvoren panel skriva i jezike jer su mu sada dijete. */
  .nav__links { display: none; }
  /* Bez izbornika u retku HSHL.TV stoji desno, uz hamburger. */
  .nav__tv { margin-left: auto; }
  .nav__burger { display: flex; }

  /* Panel je dijete .nav-a i pozicioniran je, pa bi inače prekrio grb i
     hamburger — izbornik bi se otvorio bez vidljivog načina da se zatvori.
     Oba ostaju iznad njega. */
  .nav__brand,
  .nav__burger { position: relative; z-index: 96; }

  /* Fullscreen izbornik. Bez JS-a `.nav__links` ostaje `display: none` samo
     ovdje — mobilni izbornik je nadogradnja, a svi linkovi postoje i u
     podnožju, pa sadržaj ostaje dohvatljiv.

     NE koristi `inset: 0`. `.nav` nosi `backdrop-filter`, a taj svojstvom
     postaje sadržajni blok za `position: fixed` potomke — pa se `inset: 0`
     razriješi prema navigaciji visokoj 76px, a ne prema ekranu. Izmjereno:
     panel je bio visok 150px i linkovi su mu ispadali van. Eksplicitna širina
     i visina daju isti rezultat bez obzira na to tko je sadržajni blok, jer
     navigacija ionako počinje u gornjem lijevom kutu. */
  .nav__links.is-open {
    display: flex;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100svh;
    z-index: 95;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0;
    background: var(--led);
    background-image: repeating-linear-gradient(115deg, transparent 0 42px, rgba(255,255,255,.03) 42px 43px);
    padding: calc(var(--nav-h) + 34px) clamp(20px, 6vw, 40px) 40px;
    overflow-y: auto;
    /* Bez ovoga se skrol preko otvorenog izbornika prenosi na stranicu ispod. */
    overscroll-behavior: contain;
  }
  .nav__links.is-open .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  /* `display: block`: poveznica je inače inline, pa joj padding ne razmiče
     retke — stavke su se preklapale (svaka visoka 61px, a razmak 30px) i
     crta je bila samo ispod riječi, pomaknuta u redak niže. */
  .nav__links.is-open .nav__lista a {
    display: block;
    font-family: var(--display);
    font-stretch: var(--sirina-display);
    font-weight: 900;
    /* 8vw je na 375 px davalo 30 px, a „REPREZENTACIJE" je tada široka
       ~353 px uz 330 px raspoloživo — riječ je izlazila van ekrana. */
    font-size: clamp(1.35rem, 6.6vw, 2.6rem);
    letter-spacing: 0;
    line-height: 1;
    color: var(--bijela);
    padding: 16px 0;
    border-bottom: 1px solid var(--linija);
  }
  .nav__links.is-open .nav__jezici {
    margin-top: 26px;
    gap: 12px;
    font-size: .82rem;
    letter-spacing: .24em;
  }
  .nav__links.is-open .nav__cta {
    margin-top: 28px;
    display: inline-flex; justify-content: center;
    font-size: .8rem;
  }
}

@media (max-width: 920px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .ticker__label { padding: 0 12px; font-size: .58rem; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}