/* ============================================================
   HRVATSKI CURLING SAVEZ — main.css
   ============================================================ */

/* --- Variables --- */
:root {
  --hcs-red:       #CC0000;
  --hcs-red-dark:  #990000;
  --hcs-red-light: #e63333;

  /* Light theme */
  --bg:            #ffffff;
  --bg-secondary:  #f5f5f5;
  --text:          #1a1a1a;
  --text-muted:    #555555;
  --border:        #dddddd;
  --card-bg:       #ffffff;
  --card-shadow:   0 1px 4px rgba(0,0,0,0.10);
  --link:          #990000;
  --link-hover:    #CC0000;
}

[data-theme="dark"] {
  --bg:            #121212;
  --bg-secondary:  #1e1e1e;
  --text:          #e8e8e8;
  --text-muted:    #999999;
  --border:        #333333;
  --card-bg:       #1e1e1e;
  --card-shadow:   0 1px 4px rgba(0,0,0,0.40);
  --link:          #e06060;
  --link-hover:    #ff8080;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  transition: background 0.2s, color 0.2s;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* --- Header --- */
.site-header {
  background: var(--hcs-red);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: #fff;
  min-width: 0;
}

.header-brand:hover,
.header-brand:focus {
  color: #fff;
  text-decoration: none;
}

.header-logo {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  flex-shrink: 0;
}

.header-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.header-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-subtitle {
  font-size: 0.78rem;
  opacity: 0.85;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Puni naziv saveza je zadano vidljiv; skraćenica (HCS/CCA) se prikazuje
   samo na malim ekranima, vidi @media (max-width: 700px) niže. */
.header-title-short {
  display: none;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.theme-toggle,
.lang-toggle,
.m365-link {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  transition: background 0.15s;
  box-sizing: border-box;
}

.theme-toggle:hover,
.lang-toggle:hover,
.m365-link:hover {
  background: rgba(255,255,255,0.25);
}

/* Poveznica na M365/Teams (interne stranice saveza) - isti stil gumba kao theme/lang
   toggle (dijele zajedničko pravilo iznad), samo je ovo <a> pa treba
   display/text-decoration/line-height da visina bude identična ostalim gumbima. */
.m365-link {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  text-decoration: none;
}

.m365-link:hover,
.m365-link:focus {
  color: #fff;
  text-decoration: none;
}

/* Tri gumba u zaglavlju (tema, jezik, prijava) iste su veličine: kvadrat 2.4rem,
   sadržaj centriran - isto na velikim i malim ekranima. */
.theme-toggle,
.lang-toggle,
.m365-link {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.theme-toggle .theme-icon,
.m365-link .hi {
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: 0;
}

/* Tekst samo za čitače ekrana (npr. "Prijava" uz ikonu osobe) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.2s;
}

/* --- Navigation --- */
.site-nav {
  background: var(--hcs-red-dark);
}

.site-nav ul {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 0;
}

.site-nav ul[hidden] {
  display: none;
}

.site-nav ul li a {
  display: block;
  color: rgba(255,255,255,0.9);
  padding: 0.55rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  border-bottom: 2px solid transparent;
}

.site-nav ul li a:hover,
.site-nav ul li a.active {
  color: #fff;
  background: rgba(255,255,255,0.12);
  border-bottom-color: rgba(255,255,255,0.6);
  text-decoration: none;
}

/* --- Main Content --- */
.site-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
  width: 100%;
  flex: 1;
}

/* PHC pages - less top padding since subnav is right above */
.phc-wrap {
  margin-top: -1rem;
}

/* --- Home Hero --- */
.home-hero {
  padding: 1.5rem 0 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}

.hero-lead {
  font-size: 1.1rem;
  color: var(--text-muted);
}

/* --- News List (Homepage) --- */
.home-news h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--text);
  border-left: 4px solid var(--hcs-red);
  padding-left: 0.75rem;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.news-item {
  border-bottom: 1px solid var(--border);
}

.news-item:last-child {
  border-bottom: none;
}

.news-item-link {
  display: flex;
  gap: 1.25rem;
  padding: 1.1rem 0;
  text-decoration: none;
  color: var(--text);
  transition: background 0.1s;
  border-radius: 4px;
}

.news-item-link:hover {
  text-decoration: none;
  color: var(--text);
}

.news-item-link:hover .news-title {
  color: var(--hcs-red);
}

.news-thumb {
  flex-shrink: 0;
  width: 120px;
  height: 80px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-secondary);
}

.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
}

.news-thumb-placeholder img {
  width: 48px;
  height: 48px;
  opacity: 0.3;
}

.news-content {
  flex: 1;
  min-width: 0;
}

.news-date {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.news-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  line-height: 1.35;
  transition: color 0.15s;
}

.news-excerpt {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.news-more {
  margin-top: 1.5rem;
  text-align: center;
}

.btn-more {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: var(--hcs-red);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s;
}

.btn-more:hover {
  background: var(--hcs-red-dark);
  color: #fff;
  text-decoration: none;
}

/* --- Page --- */
.page-article {
  max-width: 820px;
}

.page-header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.page-title {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.2;
}

.page-description {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* Naslovi odlomaka unutar .page-content (npr. stranice "O nama" i "O curlingu")
   - crvena okomita crta s lijeve strane, isti obrazac kao .kalendar-naslov,
   .klubovi-naslov i .home-news h2 drugdje na stranici. */
.page-content h2 {
  font-size: 1.4rem;
  margin: 2rem 0 0.75rem;
  border-left: 4px solid var(--hcs-red);
  padding-left: 0.75rem;
}
.page-content h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
.page-content p  { margin-bottom: 1rem; }
.page-content ul, .page-content ol { margin: 0.5rem 0 1rem 1.5rem; }
.page-content li { margin-bottom: 0.3rem; }
.page-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.page-content th, .page-content td { padding: 0.6rem 0.9rem; border: 1px solid var(--border); text-align: left; }
.page-content th { background: var(--bg-secondary); font-weight: 600; }


/* --- Post --- */
.post-article {
  max-width: 820px;
}

.post-hero-image {
  margin-bottom: 1.5rem;
  border-radius: 6px;
  overflow: hidden;
  max-height: 420px;
}

.post-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

/* Zaglavlje vijesti: link "Sve vijesti" lijevo, datum desno */
.post-header .post-meta { justify-content: space-between; }

/* Galerija fotografija na kraju vijesti */
.foto-grid-vijest {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0;
}
.foto-grid-vijest a img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  transition: opacity 0.15s;
}
.foto-grid-vijest a:hover img { opacity: 0.85; }

/* Video u galeriji: sličica iste veličine kao fotke (4:3), s malim crvenim play znakom dolje lijevo.
   Klik otvara prozor s fotkama i videima (assets/js/vijesti-lightbox.js). Bez sličice: tamna pločica s naslovom. */
.foto-grid-vijest .video-tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(135deg, #2b3540, #14191f);
  color: #fff;
  font: inherit;
  text-align: center;
  margin: 1.25rem 0;   /* isto kao .post-content img, da sličica stoji u ravnini s fotkama u istom redu */
}
.foto-grid-vijest .video-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
  transition: opacity 0.15s;
}
.foto-grid-vijest .video-tile:hover img { opacity: 0.85; }
.foto-grid-vijest .video-tile-title { display: none; }
.foto-grid-vijest .video-tile.nema-slicice { display: flex; align-items: center; justify-content: center; }
.foto-grid-vijest .video-tile.nema-slicice .video-tile-title {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  box-sizing: border-box;
  padding: 0.5rem 0.5rem 2.1rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.foto-grid-vijest .video-tile-play {
  position: absolute;
  left: 7px;
  bottom: 7px;
  width: 28px;
  height: 20px;
  background: var(--hcs-red, #cc0000);
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s, background 0.15s;
  pointer-events: none;
}
.foto-grid-vijest .video-tile-play::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 5px;
  border-left: 9px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.foto-grid-vijest .video-tile:hover .video-tile-play,
.foto-grid-vijest .video-tile:focus-visible .video-tile-play { background: #e60000; transform: scale(1.1); }
.foto-grid-vijest .video-tile:focus-visible { outline: 3px solid var(--hcs-red, #cc0000); outline-offset: 2px; }
@media (max-width: 600px) {
  .foto-grid-vijest { grid-template-columns: repeat(2, 1fr); }
}

.post-category {
  background: var(--hcs-red);
  color: #fff;
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.post-title {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1.5rem;
}

.post-content { line-height: 1.75; }
.post-content h2 { font-size: 1.4rem; margin: 2rem 0 0.75rem; }
.post-content h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
.post-content p  { margin-bottom: 1.1rem; }
.post-content ul, .post-content ol { margin: 0.5rem 0 1.1rem 1.5rem; }
.post-content li { margin-bottom: 0.4rem; }
.post-content img { border-radius: 5px; margin: 1.25rem 0; }
.post-content iframe { max-width: 100%; margin: 1.25rem 0; }

/* ===== Lightbox za fotografije u vijestima (assets/js/vijesti-lightbox.js) ===== */
.vijesti-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.vijesti-lightbox-overlay.open { display: flex; }
.vijesti-lightbox-modal {
  position: relative;
  max-width: 900px;
  width: 100%;
}
/* X za zatvaranje - u gornjem desnom kutu same fotografije (unutar .vijesti-lightbox-frame,
   isti princip stezanja na stvarnu veličinu fotke kao i gumb za cijeli ekran ispod). */
.vijesti-lightbox-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}
.vijesti-lightbox-close:hover { background: rgba(0, 0, 0, 0.8); }
.vijesti-lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
}
/* Omotač oko fotke i natpisa/brojača ispod nje - steže se na stvarnu širinu fotografije,
   pa se .vijesti-lightbox-footer (100% širok unutar ovog omotača) točno poravna s
   lijevim/desnim rubom fotke, a ne s cijelim redom koji uključuje i strelice. */
.vijesti-lightbox-body {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
/* Okvir se steže na stvarnu veličinu prikazane fotografije, tako da gumb za
   cijeli ekran uvijek prianja uz nju (i kod uskih/portret fotografija) */
.vijesti-lightbox-frame {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  touch-action: pan-y pinch-zoom;   /* vodoravni swipe obrađuje vijesti-lightbox.js */
}
.vijesti-lightbox-image {
  max-width: 100%;
  max-height: 76vh;
  border-radius: 8px;
  display: block;
}
.vijesti-lightbox-fullscreen-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 6px;
  width: 34px;
  height: 34px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vijesti-lightbox-fullscreen-btn:hover { background: rgba(0, 0, 0, 0.8); }
.vijesti-lightbox-stage:fullscreen { background: #000; width: 100vw; height: 100vh; border-radius: 0; }
.vijesti-lightbox-stage:fullscreen .vijesti-lightbox-image { max-width: 96vw; max-height: 96vh; border-radius: 0; }
.vijesti-lightbox-stage:-webkit-full-screen { background: #000; width: 100vw; height: 100vh; }
.vijesti-lightbox-stage:-webkit-full-screen .vijesti-lightbox-image { max-width: 96vw; max-height: 96vh; border-radius: 0; }
/* Fallback za preglednike bez Fullscreen API-ja na običnim elementima (npr. iOS Safari,
   koji podržava fullscreen samo za <video>) - vijesti-lightbox.js tada umjesto
   requestFullscreen() ručno prebacuje ovu klasu, isti vizualni rezultat kao :fullscreen
   pravila iznad, samo bez sakrivanja adresne trake preglednika. */
.vijesti-lightbox-stage.pseudo-fullscreen { position: fixed; inset: 0; z-index: 2001; margin: 0; background: #000; width: 100vw; height: 100vh; border-radius: 0; }
/* Strelice su sada na samoj fotografiji, pa im ne treba rezervirati prostor sa strane. */
.vijesti-lightbox-stage.pseudo-fullscreen .vijesti-lightbox-image { max-width: 100vw; max-height: 96vh; border-radius: 0; }
/* Strelice su na samoj fotografiji (lijevo i desno, okomito u sredini) - okvir je zato širi.
   Isti izgled kao gumb za zatvaranje i cijeli ekran (tamna prozirna podloga, bijela strelica). */
.vijesti-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}
.vijesti-lightbox-prev { left: 8px; }
.vijesti-lightbox-next { right: 8px; }
.vijesti-lightbox-nav:hover { background: rgba(0, 0, 0, 0.8); }
.vijesti-lightbox-nav:disabled { opacity: 0.25; cursor: default; }
@media (max-width: 600px) { .vijesti-lightbox-overlay { padding: 40px 8px; } }
/* --- YouTube video u istom nizu kao fotografije (vijesti-lightbox.js) ---
   Isto kao u pregledu prvenstava: sličica (ili tamna pločica) s crvenim play gumbom dolje lijevo i porukom;
   klikom se učitava YouTube plejer. Širina prozora prati omjer videa (--ar), pa nema crnih rubova. */
/* Kad je prikazan video, fotografija i gumb za cijeli ekran su skriveni (atribut hidden) - display iz pravila iznad ga inače nadjača. */
.vijesti-lightbox-image[hidden],
.vijesti-lightbox-fullscreen-btn[hidden] { display: none; }
.vijesti-lightbox-body.video-body { width: min(100%, calc(76vh * var(--ar, 1.7778))); }
.video-body .vijesti-lightbox-frame { display: block; width: 100%; }
.vijesti-lightbox-yt {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 1.7778);
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #2b3540, #14191f);
  cursor: pointer;
}
.vijesti-lightbox-yt img { width: 100%; height: 100%; object-fit: contain; display: block; margin: 0; border-radius: 0; }
.vijesti-lightbox-yt img.cover { object-fit: cover; }
.vijesti-lightbox-yt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.vijesti-lightbox-yt-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.8rem;
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: left;
}
.vijesti-lightbox-yt-play {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 28px;
  background: var(--hcs-red, #cc0000);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  transition: transform 0.15s, background 0.15s;
}
.vijesti-lightbox-yt-play::before {
  content: "";
  position: absolute;
  left: 16px; top: 8px;
  border-left: 12px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.vijesti-lightbox-yt:hover .vijesti-lightbox-yt-play,
.vijesti-lightbox-yt:focus-visible .vijesti-lightbox-yt-play { transform: scale(1.1); background: #e60000; }
.vijesti-lightbox-yt:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.vijesti-lightbox-player {
  width: 100%;
  aspect-ratio: var(--ar, 1.7778);
  border: 0;
  border-radius: 8px;
  display: block;
  background: #000;
  margin: 0;
}
@media (max-width: 600px) {
  .vijesti-lightbox-yt-caption { font-size: 0.68rem; gap: 0.5rem; padding: 0.45rem 0.55rem; }
  .vijesti-lightbox-yt-play { width: 34px; height: 24px; border-radius: 7px; }
  .vijesti-lightbox-yt-play::before { left: 13px; top: 6px; border-left-width: 11px; border-top-width: 6px; border-bottom-width: 6px; }
}
.vijesti-lightbox-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.vijesti-lightbox-caption {
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
}
.vijesti-lightbox-counter {
  font-size: 12.5px;
  font-family: 'Courier New', monospace;
  color: rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
}

.post-footer {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.back-link {
  font-size: 0.9rem;
  font-weight: 600;
}

/* --- Vijesti archive page --- */
.vijesti-archive h1 {
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--hcs-red);
  padding-left: 0.75rem;
}

/* --- Footer --- */
.site-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-inner a {
  color: var(--text-muted);
}

.footer-inner a:hover {
  color: var(--link-hover);
}

/* --- Clubs table --- */
.clubs-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}

.clubs-table th,
.clubs-table td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  vertical-align: middle;
}

.clubs-table th {
  background: var(--hcs-red);
  color: #fff;
  font-weight: 600;
  text-align: left;
}

.clubs-table tr:nth-child(even) td {
  background: var(--bg-secondary);
}

.club-logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* --- Responsive --- */
@media (max-width: 700px) {
  .header-subtitle { display: none; }
  .header-title { font-size: 1rem; }
  .header-title-full { display: none; }
  .header-title-short { display: inline; }
  .header-logo { width: 46px; height: 46px; }

  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
  }

  .site-nav.open {
    display: block;
    position: relative;
    z-index: 100;
    /* Zaglavlje je "sticky", pa je otvoreni izbornik uvijek uz vrh ekrana.
       Visina je ograničena na ekran (minus traka zaglavlja) i panel se lista sam -
       ništa ne može biti odrezano ni na malim ekranima ili u vodoravnom položaju. */
    max-height: calc(100vh - 4.6rem);
    max-height: calc(100dvh - 4.6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Strelica uz stavke koje otvaraju podizbornik (Prvenstva Hrvatske, Statistika) */
  .site-nav a.has-sub::after {
    content: "\203A";
    float: right;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.85;
  }

  /* Redak "‹ naziv" na vrhu 2. i 3. razine: povratak jednu razinu gore */
  .site-nav ul.mnav-sub .mnav-back {
    font-weight: 700;
    background: rgba(0,0,0,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  .site-nav .mnav-back-arrow {
    display: inline-block;
    width: 1.1rem;
    font-size: 1.3rem;
    line-height: 1;
    vertical-align: -0.05em;
  }

  .site-nav ul {
    flex-direction: column;
    padding: 0.5rem 0;
  }

  .site-nav ul li a {
    padding: 0.65rem 1.25rem;
    border-bottom: none;
    border-left: 3px solid transparent;
  }

  .site-nav ul li a:hover {
    border-left-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.1);
  }

  .news-thumb {
    width: 80px;
    height: 60px;
  }

  .page-title, .post-title {
    font-size: 1.4rem;
  }
}

@media (max-width: 420px) {
  .header-inner { padding: 0.6rem 1rem; }
  .site-main { padding: 1.5rem 1rem; }
}

/* --- No posts placeholder --- */
.no-posts {
  color: var(--text-muted);
  font-style: italic;
  padding: 1rem 0;
}

/* --- Kalendar --- */
.kalendar-wrap {
  max-width: 1100px;
}

.kalendar-naslov {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--text);
  border-left: 4px solid var(--hcs-red);
  padding-left: 0.75rem;
}

.kalendar-sekcija {
  margin-bottom: 1.5rem;
}

.sekcija-naslov {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  margin-bottom: 0.75rem;
  display: inline-block;
}

.sekcija-naslov.trening {
  background: #e8f5e9;
  color: #2e7d32;
}

.sekcija-naslov.domaca {
  background: #fff3e0;
  color: #e65100;
}

.sekcija-naslov.medjunarodna {
  background: #e3f2fd;
  color: #1565c0;
}

[data-theme="dark"] .sekcija-naslov.trening    { background: #1b3a1c; color: #81c784; }
[data-theme="dark"] .sekcija-naslov.domaca     { background: #3e2000; color: #ffb74d; }
[data-theme="dark"] .sekcija-naslov.medjunarodna { background: #0d2a4a; color: #64b5f6; }

.kalendar-podsekcija {
  margin-bottom: 1.5rem;
}

.kalendar-podsekcija:last-child {
  margin-bottom: 0;
}

.podsekcija-naslov {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 0.6rem 0.15rem;
}

/* Održana natjecanja ostaju vidljiva, ali vizualno prigušena da se jasno
   razlikuju od predstojećih. */
.kalendar-podsekcija-odrzana .kalendar-kartica {
  opacity: 0.6;
}

.kalendar-kartica {
  display: grid;
  grid-template-columns: 148px 46px 1fr auto;
  gap: 0.5rem 0.9rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  transition: border-color 0.15s;
}



.kartica-datum {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hcs-red);
  /* Namjerno BEZ white-space:nowrap - par datuma koji prelaze iz mjeseca u
     mjesec (npr. "27. 10. – 01. 11. 2026.") ne stanu u uži stupac u jednom
     retku, pa se prelome u dva retka umjesto da se preklope preko susjednog
     stupca s HR oznakom. */
}

/* Stupac s oznakom "HR"/"(HR)" (vidi .repr-znak niže) - zaseban stupac umjesto
   da oznaka stoji uz prvi od više natjecanja nabrojanih na istoj kartici (npr.
   "World Junior-B Curling Championships (Men)/(Women)"), gdje bi inače
   izgledalo kao da se oznaka odnosi samo na to prvo natjecanje. Prisutan je na
   SVAKOJ kartici (prazan kad nema oznake) da poravnanje stupaca ostane
   jednako na cijeloj stranici - :empty ga skriva bez ostavljanja praznog
   razmaka kad ništa ne sadrži. */
.kartica-oznaka {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stupac s natjecanjima kartice - jedan "redak" po natjecanju (.kartica-red),
   svaki sa svojim bedžom kategorije (.kat-znak, vidi niže) i nazivom
   (.kartica-naziv), jer domaća natjecanja znaju na istoj kartici nabrajati
   natjecanja iz različitih kategorija (npr. juniori i seniori istog vikenda).
   Bedž i naziv su u ISTOM retku (grid s fiksnim prvim stupcem za bedž), tako
   da se poravnaju po visini pouzdano (flex/grid centriranje), umjesto da se
   oslanjamo na podudaranje line-height vrijednosti dvaju odvojenih stupaca. */
.kartica-redovi {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.kartica-red {
  display: grid;
  grid-template-columns: 70px 40px 1fr;
  align-items: center;
  column-gap: 0.5rem;
}

.kartica-red > .kat-znak,
.kartica-red > .disc-znak {
  justify-self: start;
}

.kartica-sezona {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}

.kartica-naziv {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.kartica-detalji {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.kartica-mjesto {
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 650px) {
  .kalendar-kartica {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .kartica-datum {
    font-size: 0.8rem;
  }

  .kartica-red {
    grid-template-columns: 62px 40px 1fr;
  }

  .kartica-mjesto {
    text-align: left;
    font-size: 0.8rem;
  }
}

/* --- Kalendar reprezentacija znak ---
   Oznaka u zasebnom stupcu kartice (.kartica-oznaka, vidi gore) za
   međunarodno natjecanje na koje hrvatska reprezentacija sigurno nastupa
   ("HR", puna pozadina) ili se tek može kvalificirati ("HR", samo obrub,
   na engleskom "CRO") - vidi podaci/hcs-web-data.xlsx list "Kalendar",
   stupac B ("HR" / "(HR)"). Namjerno je u svom stupcu, a ne uz naziv
   natjecanja, jer kartica zna nabrojati više natjecanja odjednom (npr. Men/
   Women) na koja se ista oznaka odnosi - uz naziv bi izgledalo kao da vrijedi
   samo za prvo od njih. Bez tooltipa (namjerno - vidi git povijest ako ga
   treba vratiti). */
.repr-znak {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.05rem 0.4rem;
  border-radius: 20px;
  vertical-align: middle;
  cursor: default;
}

.repr-znak-siguran {
  background: var(--hcs-red);
  color: #fff;
}

.repr-znak-moguc {
  background: none;
  color: var(--hcs-red);
  border: 1px solid var(--hcs-red);
}

/* --- Kalendar bedž kategorije ---
   Bedž na početku svakog retka natjecanja (.kartica-red, vidi gore) koji
   prikazuje kategoriju natjecanja (juniori/seniori/veterani) - vidi
   podaci/hcs-web-data.xlsx list "Kalendar", stupci C/E (hrvatski/engleski
   naziv kategorije). Isti oblik kao .repr-znak, ali s punom pastelnom
   pozadinom po kategoriji umjesto crvene. */
.kat-znak {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.05rem 0.4rem;
  border-radius: 20px;
  vertical-align: middle;
  cursor: default;
  white-space: nowrap;
}

.kat-znak-juniori { background: #e8f5e9; color: #2e7d32; }
.kat-znak-seniori { background: #fff9c4; color: #7c5800; }
.kat-znak-veterani { background: #fdeaea; color: #b71c1c; }

[data-theme="dark"] .kat-znak-juniori  { background: #1b3a1c; color: #81c784; }
[data-theme="dark"] .kat-znak-seniori  { background: #4a3800; color: #ffd54f; }
[data-theme="dark"] .kat-znak-veterani { background: #451515; color: #ef9a9a; }

/* --- Kalendar bedž discipline ---
   Bedž iza bedža kategorije (vidi gore) - vidi podaci/hcs-web-data.xlsx list
   "Kalendar", stupci D/H (hrvatski/engleski naziv discipline):
   M (muškarci) plava, Ž/W (žene) crvena, MC/MIX (mješoviti curling) žuta,
   MP/MD (mješoviti parovi) zelena. Isti oblik kao .kat-znak, malo zasićenije
   boje da se ne miješaju s bedžom kategorije. */
.disc-znak {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.05rem 0.4rem;
  border-radius: 20px;
  vertical-align: middle;
  cursor: default;
  white-space: nowrap;
}

.disc-m  { background: #d3e6fb; color: #0d47a1; }
.disc-z  { background: #f8cfcf; color: #b71c1c; }
.disc-mc { background: #ffec80; color: #5f4500; }
.disc-mp { background: #c8e9cb; color: #1b5e20; }

[data-theme="dark"] .disc-m  { background: #12325a; color: #90caf9; }
[data-theme="dark"] .disc-z  { background: #5a1a1a; color: #ef9a9a; }
[data-theme="dark"] .disc-mc { background: #5a4600; color: #ffe082; }
[data-theme="dark"] .disc-mp { background: #1d4a22; color: #a5d6a7; }

.kalendar-legenda {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.kalendar-legenda .repr-znak {
  font-size: 0.7rem;
}





/* --- Klubovi --- */
.klubovi-wrap {
  width: 100%;
}

.klubovi-sekcija {
  margin-bottom: 2.5rem;
}

.klubovi-naslov {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  border-left: 4px solid var(--hcs-red);
  padding-left: 0.75rem;
  color: var(--text);
}

.neaktivni .klubovi-naslov {
  border-left-color: var(--border);
  color: var(--text-muted);
}

.klubovi-tablica {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.klubovi-tablica thead th {
  background: var(--hcs-red);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.6rem 0.7rem;
  text-align: left;
  white-space: nowrap;
  border: none;
}

.klubovi-tablica tbody tr td {
  background: var(--card-bg) !important;
  padding: 0.55rem 0.7rem;
  font-size: 0.84rem;
  color: var(--text);
  border: none;
  border-bottom: 2px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}

.klubovi-tablica tbody tr:last-child td {
  border-bottom: 2px solid var(--border);
}

.klubovi-tablica tbody tr.neaktivan td {
  opacity: 0.6;
}

/* Redak kluba koji ima vlastitu stranicu: cijeli redak je klikabilan (klubovi/index.html, tr[data-href]).
   Svijetla tema: blagi crvenkasti ton; tamna tema: malo svjetlija neutralna pozadina + crvena crta s lijeve strane. */
.klubovi-tablica tbody tr.klub-link { cursor: pointer; }
.klubovi-tablica tbody tr.klub-link td { transition: background 0.15s; }
.klubovi-tablica tbody tr.klub-link:hover td { background: #fbeeee !important; }
[data-theme="dark"] .klubovi-tablica tbody tr.klub-link:hover td { background: #2a2a2a !important; }
[data-theme="dark"] .klubovi-tablica tbody tr.klub-link:hover td:first-child { box-shadow: inset 3px 0 0 var(--hcs-red); }
.klubovi-tablica tbody tr.klub-link .kol-naziv a { color: inherit; text-decoration: none; }
.klubovi-tablica tbody tr.klub-link:hover .kol-naziv a { color: var(--link-hover); text-decoration: none; }
[data-theme="dark"] .klubovi-tablica tbody tr.klub-link:hover .kol-naziv a { color: inherit; }

.kol-logo {
  width: 66px;
  min-width: 66px;
  padding: 0.3rem 0.4rem !important;
  text-align: center;
}

.kol-logo img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}

/* Neki logotipi klubova su gotovo posve crno-bijeli (npr. Silent) i na tamnoj
   pozadini praktički nestaju. Dodajemo tanku bijelu obrubu oko neprozirnih
   piksela, isto rješenje kao za .club-logo na stranicama prvenstava. */
[data-theme="dark"] .club-logo-img {
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.9)) drop-shadow(0 0 1px rgba(255,255,255,0.9));
}

.kol-naziv {
  font-weight: 600;
  min-width: 120px;
}

.kol-adresa {
  white-space: normal;
  min-width: 160px;
}

.kol-email a {
  color: var(--link);
  font-size: 0.82rem;
}

.kol-email a:hover {
  color: var(--link-hover);
}

/* --- Responsive --- */
@media (max-width: 750px) {
  .klubovi-tablica thead {
    display: none;
  }

  .klubovi-tablica,
  .klubovi-tablica tbody,
  .klubovi-tablica tr,
  .klubovi-tablica td {
    display: block;
    width: 100%;
  }

  .klubovi-tablica tbody tr {
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.6rem;
    overflow: hidden;
  }

  .klubovi-tablica td {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.45rem 0.85rem;
    white-space: normal;
    border-bottom: 1px solid var(--border);
    width: 100% !important;
    box-sizing: border-box;
  }

  .klubovi-tablica td:last-child {
    border-bottom: none;
  }

  .klubovi-tablica td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-width: 120px;
    flex-shrink: 0;
  }

  .kol-logo {
    padding: 0.6rem 0.85rem !important;
  }

  .kol-logo::before { display: none; }

  .kol-logo img {
    width: 104px;
    height: 104px;
  }

  .kol-naziv {
    font-size: 1rem;
    font-weight: 700;
    border-bottom: 2px solid var(--hcs-red) !important;
  }

  .kol-naziv::before { display: none; }
}

/* --- PHC dropdown navigation (razina 2 i 3) --- */

/* Both nav bars span full width with coloured background */
.phc-nav2 {
  background: #990000;
  width: 100%;
}

.phc-nav3 {
  background: #7a0000;
  width: 100%;
}

/* Inner wrapper constrains content to 1100px, same as site-main */
.phc-nav2-inner,
.phc-nav3-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
}

/* nav3 items right-aligned: list fills space and pushes right */
.phc-nav3-inner {
  justify-content: flex-start;
}
.phc-nav3-inner .phc-nav3-list {
  margin-left: auto;
}

.phc-nav2-list,
.phc-nav3-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.phc-nav2-list li a,
.phc-nav3-list li a {
  display: block;
  color: rgba(255,255,255,0.85);
  padding: 0.4rem 0.85rem;
  font-size: 0.83rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.phc-nav2-list li a:hover,
.phc-nav3-list li a:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
  text-decoration: none;
}

.phc-nav2-list li a.active,
.phc-nav3-list li a.active {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.08);
}

@media (max-width: 700px) {
  .phc-nav2-inner,
  .phc-nav3-inner {
    justify-content: flex-start;
  }
}

/* --- PHC subnav bars (razina 2 i 3) --- */

/* Full-width bar - background fills edge to edge */
.phc-subnav-bar {
  background: #990000;
  opacity: 0;
  transition: opacity 0.1s;
}
.phc-subnav-bar.ready {
  opacity: 1;
}
.phc-subnav-bar--l3 {
  background: #990000;
}

/* List uses same padding/centering as site-nav ul */
.phc-subnav-list {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 0;
}

/* L2: offset list so first item aligns under navPrvenstva.
   We use padding-left on the list itself. 
   navPrvenstva is 5th item - we push with JS one time on load. */
.phc-subnav-bar--l2 .phc-subnav-list {
  padding-left: var(--phc-nav2-offset, 1.25rem);
}

/* L3: right-align by pushing list right */
.phc-subnav-bar--l3 .phc-subnav-list {
  justify-content: flex-end;
}

.phc-subnav-list li a {
  display: block;
  color: rgba(255,255,255,0.85);
  padding: 0.45rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.phc-subnav-list li a:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
  text-decoration: none;
}

.phc-subnav-list li a.active {
  color: #fff;
  background: rgba(255,255,255,0.12);
  border-bottom-color: rgba(255,255,255,0.6);
}

@media (max-width: 700px) {
  /* Sakrij nav2 i nav3 na mobilnom — JS ih kontrolira */
  .phc-subnav-bar {
    display: none !important;
  }
  .phc-subnav-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .phc-subnav-list::-webkit-scrollbar {
    display: none;
  }
  .phc-subnav-bar--l2 .phc-subnav-list {
    padding-left: 1rem;
    justify-content: flex-start;
  }
  .phc-subnav-bar--l3 .phc-subnav-list {
    justify-content: flex-start;
  }
  .phc-subnav-list li a {
    white-space: nowrap;
  }
}

/* ===== Ikone (SVG umjesto emojija) =====
   .hi  = jednobojna ikona, preuzima boju teksta (currentColor), radi u svijetloj i tamnoj temi.
   .hm  = medalja u boji (zlato/srebro/bronca).
   Ikone su ugrađene kao data-URI, pa nema dodatnih datoteka ni zahtjeva prema mreži. */
.hi{display:inline-block;width:1.1em;height:1.1em;vertical-align:-0.18em;background-color:currentColor;-webkit-mask:var(--hi) center/contain no-repeat;mask:var(--hi) center/contain no-repeat;}
.hi-pin{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");}
.hi-sun{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");}
.hi-moon{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");}
.hi-monitor{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");}
.hi-trophy{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E");}
.hi-globe{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10Z'/%3E%3C/svg%3E");}
.hi-broom{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3l-8.5 8.5'/%3E%3Cpath d='M9.5 10.5l4 4-6.2 6.2a2.8 2.8 0 0 1-4-4z'/%3E%3Cpath d='M6 14.5l3.5 3.5'/%3E%3C/svg%3E");}
.hi-file{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4M10 13H8M16 17H8M16 13h-2'/%3E%3C/svg%3E");}
.hi-mail{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");}
.hi-hammer{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9M18 15l4-4M21.5 11.5l-1.914-1.914A2 2 0 0 1 19 8.172V7l-2.26-2.26a6 6 0 0 0-4.202-1.756L9 2.96l.92.82A6.18 6.18 0 0 1 12 8.4V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5'/%3E%3C/svg%3E");}
.hi-expand{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");}
.hm{display:inline-block;width:1.3em;height:1.3em;vertical-align:-0.3em;background:var(--hm) center/contain no-repeat;}
.hm-g{--hm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h4l1.5 6.5-3 .5z' fill='%233b6ea5' stroke='none'/%3E%3Cpath d='M17 2h-4l-1.5 6.5 3 .5z' fill='%23c0392b' stroke='none'/%3E%3Ccircle cx='12' cy='15' r='7' fill='%23F2C230' stroke='%23B8860B' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='15' r='4' fill='none' stroke='%23B8860B' stroke-width='1.2' opacity='.55'/%3E%3C/svg%3E");}
.hm-s{--hm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h4l1.5 6.5-3 .5z' fill='%233b6ea5' stroke='none'/%3E%3Cpath d='M17 2h-4l-1.5 6.5 3 .5z' fill='%23c0392b' stroke='none'/%3E%3Ccircle cx='12' cy='15' r='7' fill='%23C9CFD6' stroke='%238A939D' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='15' r='4' fill='none' stroke='%238A939D' stroke-width='1.2' opacity='.55'/%3E%3C/svg%3E");}
.hm-b{--hm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h4l1.5 6.5-3 .5z' fill='%233b6ea5' stroke='none'/%3E%3Cpath d='M17 2h-4l-1.5 6.5 3 .5z' fill='%23c0392b' stroke='none'/%3E%3Ccircle cx='12' cy='15' r='7' fill='%23D08A4E' stroke='%238F5424' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='15' r='4' fill='none' stroke='%238F5424' stroke-width='1.2' opacity='.55'/%3E%3C/svg%3E");}
/* Ikone u kalendaru dodaju se preko ::before jer se tekst elemenata mijenja pri prebacivanju jezika */
.kartica-mjesto::before,.sekcija-naslov::before{content:'';display:inline-block;width:1.1em;height:1.1em;vertical-align:-0.2em;margin-right:0.35em;background-color:currentColor;-webkit-mask:var(--hi) center/contain no-repeat;mask:var(--hi) center/contain no-repeat;}
.kartica-mjesto::before{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");width:1em;height:1em;vertical-align:-0.15em;margin-right:0.3em;}
.sekcija-naslov.trening::before{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3l-8.5 8.5'/%3E%3Cpath d='M9.5 10.5l4 4-6.2 6.2a2.8 2.8 0 0 1-4-4z'/%3E%3Cpath d='M6 14.5l3.5 3.5'/%3E%3C/svg%3E");}
.sekcija-naslov.domaca::before{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E");}
.sekcija-naslov.medjunarodna::before{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10Z'/%3E%3C/svg%3E");}

/* Napomena na stranicama Vijesti u engleskom načinu (vijesti su samo na hrvatskom) */
.hr-only-note {
  font-size: 0.88rem;
  color: var(--text-muted);
  border-left: 3px solid var(--hcs-red);
  background: var(--bg-card, rgba(128,128,128,0.08));
  padding: 0.5rem 0.8rem;
  margin: 0 0 1.25rem;
  border-radius: 0 4px 4px 0;
}
.hr-only-note:empty { display: none; }

/* ===== YouTube "klikni za prikaz" (vidi assets/js/video-facade.js) ===== */
.video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: #1c1c1c;
  color: #fff;
  font: inherit;
  text-align: left;
}
.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.video-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.6rem 0.8rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8rem;
  line-height: 1.35;
}
.video-text { min-width: 0; }
.video-text strong { display: block; font-size: 0.9rem; margin-bottom: 0.1rem; }
/* Gumb za reprodukciju: mali, u donjem lijevom kutu, lijevo od teksta */
.video-play {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 28px;
  background: var(--hcs-red, #cc0000);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  transition: transform 0.15s, background 0.15s;
}
.video-play::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 8px;
  border-left: 12px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.video-facade:hover .video-play,
.video-facade:focus-visible .video-play {
  transform: scale(1.1);
  background: #e60000;
}
.video-facade:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.video-wrap iframe { display: block; }

/* --- Video u tekstu vijesti (generira ga editor, vidi edit/index.html): klikni-za-prikaz u stupcu teksta.
   Vodoravni video je 16:9 u punoj širini stupca. Okomiti (Shorts) ima vlastiti uski okvir 9:16 -
   najviše 360 px širine i 80% visine zaslona (na mobitelu puna širina stupca) - pa unutar njega nema crnih rubova. --- */
.vijest-video { margin: 1.5rem 0; }
.vijest-video .video-facade,
.vijest-video .video-iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 6px;
  margin: 0;
}
/* .post-content img ima marginu i zaobljene rubove (za fotke u tekstu) - ovdje to ne smije utjecati na sličicu videa */
.vijest-video .video-facade img { margin: 0; border-radius: 0; }
.vijest-video .video-facade-okomit,
.vijest-video .video-iframe-okomit {
  width: min(100%, 360px, calc(80vh * 0.5625));
  aspect-ratio: 9 / 16;
  margin-left: auto;
  margin-right: auto;
}

/* --- Korisne poveznice na naslovnici (pločice) ---
   Pločice fiksne širine poravnate ulijevo, kao izbornik i vijesti: adresa
   stranice gore, zatim mala ikona i naziv (do 2 retka). Na 1100 px
   stane ih 9 u jedan red; što ne stane, prelazi u idući red. Na mobitelu 3 u
   redu. Ikone su naše (SVG maske), bez ikakvih vanjskih zahtjeva. */
.home-links { margin-top: 2.5rem; }
.link-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, 112px);
  gap: 0.4rem;
  justify-content: start;
}
.link-chips li { display: flex; }
.link-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f4f5f7;
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.link-chip .hi { color: var(--hcs-red); width: 1.2rem; height: 1.2rem; flex: 0 0 auto; vertical-align: 0; }
.link-chip-domain {
  order: -1;
  margin-bottom: 0.05rem;
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
/* Hover: samo okvir pocrveni i pozadina se malo promijeni; tekst ostaje iste
   boje i bez podcrtavanja (globalno a:hover bi ga inače podcrtao). */
.link-chip:hover { border-color: var(--hcs-red); background: #e9ecf0; color: var(--text); text-decoration: none; }
[data-theme="dark"] .link-chip { background: #272727; }
[data-theme="dark"] .link-chip:hover { background: #333333; }
.link-chip:focus-visible { outline: 2px solid var(--hcs-red); outline-offset: 2px; }
@media (max-width: 650px) {
  .link-chips { grid-template-columns: repeat(3, 1fr); }
}
.hi-tv{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='15' rx='2'/%3E%3Cpath d='M17 2l-5 5-5-5'/%3E%3C/svg%3E");}
.hi-clipboard{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4M12 16h4M8 11h.01M8 16h.01'/%3E%3C/svg%3E");}
.hi-flag{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cpath d='M4 22v-7'/%3E%3C/svg%3E");}
.hi-bag{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");}
.hi-zap{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");}
.hi-cube{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.3 7L12 12l8.7-5M12 22V12'/%3E%3C/svg%3E");}
.hi-user{--hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");}

/* --- Uživo: stavka izbornika (vidljiva samo dok traje natjecanje, vidi uzivo-config.js) --- */
.site-nav ul li[hidden] { display: none; }
.nav-live {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: #fff;
  vertical-align: 0.05em;
  animation: hcs-live-pulse 1.4s ease-in-out infinite;
}
@keyframes hcs-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .nav-live { animation: none; } }