/* ======================= FONTOVI PRELOAD ======================= */

@font-face {
  font-family: 'Fira Sans';
  src: url('fonts/FiraSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Sans';
  src: url('fonts/FiraSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Sans Extra Condensed';
  src: url('fonts/FiraSansExtraCondensed-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Sans Extra Condensed';
  src: url('fonts/FiraSansExtraCondensed-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Sans Extra Condensed';
  src: url('fonts/FiraSansExtraCondensed-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Sans Extra Condensed';
  src: url('fonts/FiraSansExtraCondensed-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ======================= GLOBALNI STILOVI ======================= */
html, body {
    font-size: 16px;
    line-height: 1.5;
    color: var(--dark-text);
    margin: 0;
    padding: 0;
    background-color: var(--white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto Slab", serif;
    text-rendering: optimizelegibility;
    font-weight: 600;
    color: var(--black);
}
p, li, span, code, pre, blockquote, small, strong, em, b  {
    font-family: "Roboto Slab", serif;
}



*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ======================= CSS VARIJABLE ======================= */


:root {
  --dark-red: #C94C4C;
  --blue-red: #d20e35;
  --primary-red: #ba0c2f;
  --accent-red: #d2281c;
  --dark-gray: #121212;
  --light-gray: #e8eef4;
  --neutral-gray: #acb0b4;
  --charcoal-blue: #7f8c96;
  --dark-text: #6c6e7a;
  --white: #fff;
  --black: #10273e;
}

/* ======================= RESET CSS ======================= */

/* Remove default margin, padding, borders */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

/* Universal reset for all elements */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    font-size: 100%;
   
    vertical-align: baseline;
}

/* Fix for block display on older HTML5 elements */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

/* Body settings */
body {
    line-height: 1.5;
    font-family: var(--font-main, sans-serif);
}

/* Lists */
ol, ul {
    list-style: none;
}

/* Quotes */
blockquote, q {
    quotes: none;
}
blockquote::before, blockquote::after,
q::before, q::after {
    content: '';
}

/* Tables */
table {
    border-collapse: collapse;
    width: 100%;
}

/* Clearfix */
.cf::before,
.cf::after {
    content: "";
    display: table;
}
.cf::after {
    clear: both;
}
.cf {
    zoom: 1;
}

/* Responsive Container */
.wrap, .hwrap  {
    width: 100%;
    margin: 0 auto;
}

.wrap {
    width: 94%;
    margin: 0 auto;
}

/* Responsive width for large screens */
@media (min-width: 1030px) {
    .wrap, .hwrap {
        width: 1200px;
    }
}

/* STICKY */
.cover img[itemprop="image"] {
  aspect-ratio: 900 / 475;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.cover {
  min-height: calc((475 / 900) * 100vw);
}
@media (min-width: 900px) {
  .cover {
    min-height: auto;
  }
}

/* RECENT CROPS */
img.attachment-crop {
  /* aspect-ratio: 420 / 300; */
  width: 100%;
  /* height: auto; */
  object-fit: cover;
  display: block;
}

/* LOGO */
img[src*="logoTris.svg"] {
  width: 115px; /* ako već nije u HTML-u */
  height: auto;
  display: block;
}


/* ======================= LINKOVI ======================= */

a {
    background: transparent;
    position: relative; /* Za pravilno pozicioniranje pseudo-elementa */
    font-weight: 600;
    color: var(--primary-red);
    text-decoration: none; /* Uklanja defaultno podcrtavanje */
    transition: color 0.25s ease;
}

/* Fokus & Hover */
a:focus,
a:hover {
    outline: none; /* Uklanja border koji se pojavljuje kod fokusa */
    color: var(--accent-red);
}

/* Klik */
a:active {
    outline: 0;
    color: var(--dark-red);
}

/* Pseudo-element za podcrtavanje */
a::after {
    /* content: ''; */
    /* position: absolute; */
    /* width: 0; */
    /* height: 1px; */
    /* bottom: -2px; */ /* Postavi liniju malo ispod teksta */
    /* left: 0; */
    /* background-color: var(--primary-red); */
    /* transition: width 0.25s ease; */
}

/* Efekt podcrtavanja na hover */
a:hover::after,
a:focus::after {
    width: 100%;
}

/* Povecava sirine linije pri hoveru */
a:hover, 
a:focus, 
a:visited:hover, 
a:visited:focus {
    /* color: var(--accent-red); */
}

/* Podrs¡ka za iOS (uklanja sivi highlight) */
a:link, a:visited:link {
    -webkit-tap-highlight-color: transparent;
}

/* ======================= reset ======================= */

/* Stiliziranje za abbr */
abbr[title] {
    border-bottom: 1px dotted;
}

/* Normalizirani bold stil */
b, strong, .strong {
    font-weight: 700; /* Bolje koristiti 600 za bolji kontrast kod naslova */
}

/* Italic stil */
dfn, em, .em {
    font-style: italic;
}

/* Horizontalna linija */
hr {
    height: 1px;
    border: none;
    background-color: var(--black);
    width: 100%;
    margin-bottom: 2em;
    clear: both;
}

/* Stil za paragraf */
p {
   
}

/* Formatirani tekst */
pre, code, kbd, samp {
    font-size: 1em;
  
}

/* Omogucava automatsko prelamanje linija u pre */
pre {
    white-space: pre-wrap;
}

/* Stil za citate */
q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/* Uklanjanje automatskog generiranja navodnika */
q:before, q:after {
    content: none;
}

/* Stil za small tekst */
small, .small {
    font-size: 75%;
}

/* Sup i Sub */
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.4em; /* Preciznija pozicija */
}

sub {
    bottom: -0.25em; /* Preciznija pozicija */
}

/* Dodatni razmaci za .next i .right */
.next, .right {
    display: block;
    float: right;
    padding: 1em;
}

/* ======================= GRID STILOVI ======================= */

/* Mobile */
@media (max-width: 767px) {
	.m-all {
		float: left;
		width: 100%;
	}
	.m-1of2 {
		float: left;
		width: 50%;
	}
	.sidebar {
		/* text-align: center; */
	}
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1029px) {


	.t-all {
		float: left;
		width: 100%;
	}
	.t-1of2 {
		float: left;
		width: 50%;
	}
	.t-1of3 {
		float: left;
		width: 33.33%;
	}
	.t-2of3 {
		float: left;
		width: 66.66%;
	}
}

/* Desktop */
@media (min-width: 1030px) {
	.d-all {
		float: left;
		width: 100%;
	}
	.d-1of2 {
		float: left;
		width: 48%;
	}
	.d-1of3 {
		float: left;
		width: 31%;
	}
	.d-2of3 {
		float: left;
		width: 65%;
		padding-right: 6.5em;
	}
}



/* ======================= NASLOVI ======================= */
h1, .h1, h2, .h2, h3, .h3 {
	font-family: "Roboto Slab", serif;
	text-rendering: optimizelegibility;
	font-weight: 900;
	color: var(--dark-text);
}

h4, .h4, h5, .h5, h6, .h6  {
  font-family: "Roboto Slab", serif;
	text-rendering: optimizelegibility;
	font-weight: 600;
	color: var(--black);
   
}
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
	text-decoration: none;
}

h1, .h1 {
	font-size: 2rem;
	margin: 0.25em 0;
}
h2, .h2 {
	font-size: 1.75em;
	line-height: 1.333em;
}
h3, .h3 {
	font-size: 1.25em;
	line-height: 1em;
	font-weight: 400;
}
h4, .h4 {
	font-size: 1.25em;
}
h5, .h5 {
	font-size: 1.15em;
	line-height: 2.09em;
	color: var(
--deep-red);
}
h6{
	font-size: .1em;
	line-height: 2em;
	
	padding: 0 7em;
}
/* Tags */
.tags {
  margin: 1em 0;
}


/* === RESET & DEFAULTS === */
dl, menu, ol, ul, nav ul, nav ol {
  margin: 1em 0;
  padding: 0;
  list-style: none;
}

dd {
  margin: 0;
}

menu {
  padding-left: 40px;
}

/********************* HEADER CONTAINER *********************/
.header {
  height: auto;
}

/********************* LOGO STYLING *********************/
#logo {
  color: white;
}

#logo a {
  color: inherit;
  text-decoration: none;
}

#logo img {
  max-width: 250px;
  height: auto;
}

#logo svg {
  max-width: 100%;
  height: auto;
}

.logo-container {
  max-width: 100%;
  flex: 1;
}

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

.head {
  position: relative;
}

/********************* TOP BAR STYLING *********************/
.top-bar {
  font-family: "Roboto Slab", serif;
  position: relative;
  z-index: 1;
  padding: 0.25em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  border-bottom: solid 1px #111;
  flex-direction: row;
  align-content: space-around;
}

.portal-name {
  color: var(--white);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  font-size: 1.5em;
  margin-left: 160px;
}

.current-time {
  color: var(--white);
  font-weight: 600;
  letter-spacing: 0.5px;
  display: none;
}

/********************* HEADER LAYOUT *********************/
.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.header-left {
  flex: 0 0 25%;
  display: flex;
  align-items: center;
}

.header-right {
  flex: 0 0 75%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/********************* NAVIGATION ROW *********************/
.nav-menu-wrapper {
  width: 100%;
}

.nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.nav-container {
  flex: 1;
}

/********************* NAVIGATION MENU *********************/
.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.menu {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  justify-content: space-between; /* Ovo osigurava raspored od ruba do ruba */
  flex-wrap: nowrap; /* Sprječava prelamanje u dva reda */
}

.menu > li {
  position: relative;
  white-space: nowrap; /* Sprječava prelamanje teksta unutar linka */
}

.menu > li > a {
  font-family: "Roboto Slab", serif;
  display: block;
  font-size: 1.125em;
  color: var(--black);
  padding: 0.5em 1em; /* Povećani horizontalni padding za bolju čitljivost */
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.3s;
}
.menu li:hover {
  opacity: 0.8;
}

.menu li.current-menu-item > a {
  color: var(--dark-red);
}

.menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
}

.menu .sub-menu li {
  background-color: var(--primary-red);
  padding: 0.8em 1.5em;
  width: 150%;
  border-bottom: solid 1px #fff;
}

.menu .sub-menu li a {
  color: var(--white);
  text-decoration: none;
  transition: color 0.3s;
}

.menu .sub-menu li a:hover {
  text-decoration: underline;
}

/********************* TOP ICONS / EXTRAS *********************/
.top-icons {
  padding-top: 0.5rem;
  display: flex; /* Promijenjeno iz none u flex */
  gap: 1rem;
  justify-content: flex-end;
}
.fut-icons {
  padding-top: 0.5rem;
  display: flex; /* Promijenjeno iz none u flex */
  gap: 1rem;
  justify-content: center;
}
.extras {
  display: flex;
  /* align-items: center; */
  gap: 0.5em;
}

.extras a {
  color: var(--white);
  text-decoration: none;
  font-weight: 400;
}

.extras svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/********************* MOBILE NAVIGATION (HAMBURGER) *********************/
.nav-toggle {
  display: none;
  cursor: pointer;
  padding: 1em;
  position: relative;
  z-index: 9999;
  background-color: transparent;
  border: none;
}

.hamburger {
  width: 30px;
  height: 3px;
  background-color: var(--primary-red);
  position: relative;
  display: block;
  transition: background-color 0.3s, transform 0.3s;
  margin: 0.5em auto;
}

.hamburger::before,
.hamburger::after {
  content: "";
  width: 30px;
  height: 3px;
  background-color: var(--primary-red);
  position: absolute;
  left: 0;
  transition: transform 0.3s;
}

.hamburger::before {
  top: -8px;
}

.hamburger::after {
  top: 8px;
}

.nav-toggle.active .hamburger {
  background-color: transparent;
}

.nav-toggle.active .hamburger::before {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.active .hamburger::after {
  transform: translateY(-8px) rotate(-45deg);
}

/* === LOGO VISIBILITY === */
.logo-desktop {
  display: block;
}

.logo-mobile {
  display: none!important;
}

/* === RESPONSIVE: MOBILE (<767px) === */





@media (max-width: 767px) {
  /* Hide desktop logo */
  .logo-desktop {
    display: none;
  }

  /* Show mobile logo */
  .logo-mobile {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* Header layout */
  .header-flex {
    flex-direction: column;
    width: 100%;
  }

  .header-left {
    flex: 0 0 75%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    gap: 1rem;
  }

  .header-right {
    width: 100%;
  }

  .logo-container {
    flex: 1;
  }

  .nav-toggle {
    flex: 0 0 25%;
    display: block;
    margin: 0;
    position: static;
    transform: none;
  }

  .nav-menu-wrapper {
    width: 100%;
  }

  /* Meni - vertikalni raspored */
  .nav-row {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 1px solid #ccc;
  }

  .nav-menu.active {
    display: flex;
    flex-direction: column;
  }
.nav-menu.active .top-icons {
    display: flex;
    justify-content: center;
  }
  .menu {
    flex-direction: column;
  }

  .menu > li {
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  .menu > li > a {
    display: block;
    width: 100%;
    padding: 1rem;
    text-align: center;
  }

  .portal-name {
    display: none;
  }

  /* Ikonice ispod menija */
  .top-icons {
    display: none;
  }

 .nav-menu.active + .top-icons {
    display: flex;
    justify-content: center;
    padding: 15px 0;
    background: #f5f5f5;
    margin-top: 0;
    border-top: 1px solid #ddd;
  }

  .nav-menu.active .extras {
    display: flex;
    justify-content: center;
    /* gap: 20px; */
  }

  .nav-menu.active .extras a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
  }

  .nav-menu.active .extras svg {
    width: 24px;
    height: 24px;
    fill: #333;
  }
}

/* =======================
   LOAD MORE BUTTON
======================= */

.load-more-button, .read-more-button {
    font-family: "Roboto Slab", serif;
    display: block;
    font-size: 1em;
    background-color: var(--primary-red);
    border: 1px solid #9c0f2e;
    color: var(--white);
    cursor: pointer;
    font-weight: 600;
    padding: 0.7em 1em;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    margin: 1.5em auto;
    transition: background-color 0.3s ease; /* Poboljsana tranzicija */
    /* font-variant: all-small-caps; */
}

.load-more-button:hover, .read-more-button:hover {
    background-color: var(--accent-red);
    color: white;
    text-decoration: underline;
}

.load-more-button a, .read-more-button a {
    font-size: 1em;
    font-weight: 600;
    color: var(--white);
    text-decoration: none; /* Uklonjen underline */
    transition: color 0.3s ease;
}

.load-more-button:hover a, .read-more-button a:hover {
    color: var(--white); /* Ostavio bijelu boju na hoveru da ne dolazi do nezeljene promjene */
}

/* =======================
   ARTICLE STYLING
======================= */

/* Article Container Styling */
.articles-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3em;
}

/* Article Item Styling */
.article-item {
	box-sizing: border-box;
	/* border-bottom: 1px solid #ddd; */
	margin-bottom: 1em;
}

/* First post full width */
.article-item.featured {
	width: 66%;
}

/* Regular posts in two columns on desktop */
.article-item.regular {
	width: 30%;
}

/* Responsive: All articles full width on smaller screens */
@media (max-width: 1029px) {
	.article-item {
		width: 100%;
	}
}

@media (max-width: 767px) {
    .article-item.regular {
	    width: 100%;
    }
}

/* =======================
   ARTICLE LIST
======================= */

/* Glavni container layout *//* GLAVNI CONTAINER LAYOUT */
#articles {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

/* LAYOUT STYLES */
.top-row {
    display: flex;
    gap: 2rem;
    align-items: stretch;
    width: 100%;
    border-bottom: solid 1px var(--light-gray);
}

/* LIJEVI VELIKI POST */
.featured-posts {
    flex: 2 1 60%;
}

/* DESNA KOLONA ZA 3 MALA POSTA */
.right-column {
    flex: 1 1 35%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* DONJI RED OD 6 POSTOVA */
.below-posts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    margin-top: 2rem;
}

.below-posts .article-item {
    flex: 1 1 calc(33.333% - 1rem);
    box-sizing: border-box;
}

/* FLEX ITEM STYLES */
.right-column .article-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: none;
}

.below-posts .article-item {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* IMAGE WRAPPER STYLES */
.img-wrapper {
    flex: 1 0 auto;
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}
.arthead .img-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 50%;
  position: relative;
  overflow: hidden;
}

.arthead .img-wrapper a {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  position: relative;
}

.arthead .img-wrapper img {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.below-posts .img-wrapper {
    position: relative;
    flex: 1 0 auto;
    overflow: hidden;
    min-height: 200px;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.img-wrapper:hover img {
    transform: scale(1.02);
}

/* RESPONZIVNOST - MOBILNI UREĐAJI */
@media (max-width: 768px) {
    #articles {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .top-row {
        flex-direction: column;
        gap: 1.5rem;
        border-bottom: none;
    }
    
    .featured-posts,
    .right-column {
        flex: 1 1 100%;
        width: 100%;
    }
    
    .below-posts .article-item {
        flex: 1 1 100%;
    }
    
    /* Dodatni stilovi za naslove na mobilnim */
    .art-title {
        font-size: 1rem;
        padding: 0.4em 0.6em;
        bottom: 15px;
    }
    
    .cover-title {
        font-size: 1.5rem;
    }
}
.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.img-wrapper:hover img {
  transform: scale(1.02);
}

/* CONTENT STYLES */
.arthead, .cover {
  flex: 1 1 auto;
}

/* TITLE STYLES */
.art-title {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(186, 12, 47, 0.8);
  color: var(--white);
  font-weight: 600;
  font-size: 1.125rem;
  text-align: center;
  z-index: 10;
  width: 90%;
  max-width: 90%;
  margin: 0 auto;
  padding: 0.25em;
  box-sizing: border-box;
  line-height: 1.4;
  transition: all 0.3s ease;
}

.art-title:hover {
  text-decoration: underline;
  background-color: rgba(200, 16, 46, 1);
}

.cover-title {
  margin-top: 1rem;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.3;
  color: var(--dark-text);
}

/* LINK STYLES */
.art-title a {
  color: inherit;
  text-decoration: none;
}

.art-title a:hover {
  text-decoration: underline;
}

/* RESPONSIVE STYLES */
@media (max-width: 768px) {
  .art-title {
    font-size: 1rem;
    padding: 0.4em 0.6em;
    bottom: 15px;
  }
}




@media (max-width: 767px) {
  .featured-posts {
    flex: 1 1 100%;
    width: 100%;
  }

  .right-column {
    flex: 1 1 100%;
    width: 100%;
  }

  .below-posts .article-item {
    flex: 1 1 100%;
  }
}
.article-header {
	box-sizing: border-box;
	display: block;
	position: relative;
	width: 100%;
	padding: 1em;
}

/* =======================
   CATEGORY LABEL STYLING
======================= */

.cover .category, .article-item .category {
	background: var(--black);
	font-family: "Roboto Slab", serif;
	font-size: 1em;
	color: var(--white);
	display: inline-block;
	padding: 5px 10px;
	position: absolute;
	text-transform: uppercase;
	z-index: 1555;
	font-weight: 600;
}

/* Hover Effect */
.article-item .category:hover, .cover .category:hover {
	background-color: var(--primary-red);
}

.article-item .category a, .cover .category a {
	color: var(--white);
	text-decoration: none;
}

.article-item .category a:hover, .cover .category a:hover {
	/* color: var(--dark-red); */
}

/* =======================
   IMAGE STYLING
======================= */

.article-item img {
	max-width: 100%;
	/* height: auto; */
	filter: saturate(60%);
	position: relative;
}

/* =======================
   POST META
======================= */

.post-meta {
    flex: 1;
}

/* =======================
   CATEGORY TITLE
======================= */

.cat-title {
    font-size: 1.75em;
    text-transform: uppercase;
    font-weight: 900;
    line-height: .65em;
    /* color: var(--light-gray); */
    border-bottom: solid 1px var(--light-gray);
    margin: .5em 0;
    text-align: center;
}


/* Metadata styling */

.entry-meta {
    font-size: 0.875em;
    color: var(--neutral-gray);
    margin-top: 0.5em;
}

.entry-meta {
 position: relative;
 /* border-bottom: solid 1px var(--neutral-gray); */
 /* border-top: solid 1px var(--light-gray); */
 padding: .25em 0;
 text-transform: capitalize;
 color: var(--neutral-gray);
 width: 100%;
 margin-top: .5em;
}

.entry-time, .entry-author, .pageviews {
	position: relative;
	font-family: "Roboto Slab", serif;
	text-rendering: optimizelegibility;
	display: inline-block;
	padding: 4px;
	font-weight: 400;
	/* !important and other errors commented out */
	/* !impo;!impoe;!impoer;!impoera;!impoer;!impoe;!i;!; */
	font-variant: normal;
	font-size: .875em;
	/* background-color: red; */
}
.pageviews {
color: var(--primary-red);
	font-weight: 600;
}
.entry-meta {
    display: flex;
    justify-content: space-between;  /* Align items in a straight row */
    align-items: center;            /* Align vertically */
    gap: 1rem;                      /* Adds spacing */
    border-bottom: solid 1px #e5e5e5;
    /* border-top: solid 1px #f9f6f6; */
    padding: .25em 0;
    text-transform: capitalize;
    color: #999;
    width: 100%;
    margin-top: .5em;
}

.entry-info {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Ensures dot, author, and time stay aligned */
}

.entry-sharing {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    width: 100%;
    flex-direction: column-reverse;
}

/* General Style for All Buttons */
.cssp-btn {
    display: inline-block;
    transition: all 0.3s ease;
}

/* Facebook Button Hover */
.cssp-btn.fb-btn:hover .cssp-circle {
    fill: #1877F2; /* Facebook Blue */
 
}

/* Bluesky Button Hover */
.cssp-btn.bluesky-btn:hover .cssp-circle {
    fill: #0055FF; /* Bluesky Color (pretpostavka) */
  
}

/* WhatsApp Button Hover */
.cssp-btn.wa-btn:hover .cssp-circle {
    fill: #25D366; /* WhatsApp Green */

}

/* Viber Button Hover */
.cssp-btn.viber-btn:hover .cssp-circle {
    fill: #665CAC; /* Viber Purple */

}

/* General Hover Effect for All Buttons */
.cssp-circle {
    transition: all 0.3s ease;
}


/* Sharing Button Style */
.cssp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    color: var(--primary-red);
    font-weight: bold;
}

.cssp-circle {
  padding:0 .25em;
}

.cssp-btn svg {
    width: 30px; 
    height: 30px;
}

/* Mobile Layout */
@media (max-width: 768px) {
    .entry-meta {
        flex-direction: row;
        gap: 0.5rem;
    }

    .entry-info,
    .entry-sharing {
        width: 100%;
        justify-content: flex-start;
    }

    .fb-like {
        transform: scale(1); 
    }
}





/* Headings */
 .cover h1 a {
    color: var(--dark-text);
    /* line-height: 1.75; */
    width: 80%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 2px 8px;
    /* background-color: var(--primary-red); */
    -webkit-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
    font-weight: 600;
    text-rendering: optimizelegibility;
    font-style: normal;
}
.hentry .cover-title a {/* background-color: var(--black)!important; */} 

.arthead h2:hover {
	color: var(--white);
}

.arthead h3 a{
    color: var(--white);
    line-height: 1.75;
    width: 80%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* padding: 2px 8px; */
    /* background-color: var(--primary-red); */
    -webkit-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
    font-weight: 600;
    text-rendering: optimizelegibility;
    font-style: normal;
    z-index: 333;
    line-height: 1.25em;
}
.arthead h3 a:hover{color: var(--white);/* background-color: var(--accent-red); */transition: all 0.25s ease;text-decoration:underline;}
.cover
{/* background-color: var(--deep-red); */}

/* Content Wrappers */
.arthead, .cover {
	position: relative;
}

entry-time {
	font-size: 0.875em;
}

.link {
	float:right;
}


.cat-head {
	text-align: center;
	padding: 1em;
	border-bottom: solid 1px var(--light-gray);
	margin: 0;
	width: 100%;
}
.cent p {
	font-size: 1em;
	margin: 0;
}
.header {
	border-bottom: solid 1px var(
 --light-gray);
}
.item-header img {
	/* filter: grayscale(100%); */
	height: auto;
}
.item-header img:hover {
	filter: grayscale(0%);
}
.excerpt-read-more{
	display: block;
	float:right;
	padding: 1.5em;
	font-size: 1.5em;
}

.cover {
}
.cover-title {
	/* margin-top:-2em; */
}

.arthead, .cover {
	position: relative;
	background-color: none;
}
.arthead h2 {
	/* padding: .5em; */
	color: var(--white);
}
.arthead h3:hover {
	/* padding: .5em; */
}
.arthead, .cover {
	/* background-color: var(--black) !important; */
}

.art-title {
	/* color: var(
--white); */
	/* margin-top: -2em; */
	/* padding: .5em; */
	/* position: relative; */
	
	
	
	
	
	
	
	
	
.article-title, .article-caption {
	position: relative;
	z-index: 10; /* veci broj da bi tekst bio iznad slike */
};
}
/* ==========================
   POSTS & CONTENT STYLES
========================== */

#content {
    min-height: 1000px;
}

#full-banner.wrap.cf {
    min-height: 150px;
    position: relative;
}

#inner-content {
    margin-bottom: 2em;
}

#main {
    margin-bottom: 6em;
    /* padding: 2em; */
    /* padding: 2em; */
    padding: 2e;
    padding: 2;
    padding: 2em;
}

/* =======================
   ENTRY STYLES
======================= */


@media (max-width: 767px) {

.entry-content p, .entry-content li, .excerpt {
  
 
}
#main {
    padding:0.25em!important;
}

.entry-sharing {
align-items: center!important;
padding-bottom:2em;
}

}


.entry-content  {
width: 90%;
margin: 1em auto;
}

.text {margin-bottom: 2em}

.entry-content p,
.entry-content li, .excerpt {
	    font-family: "Roboto Slab", serif;
	    text-rendering: optimizelegibility;
	    font-size: 1em;
	    line-height: 1.5em;
	    font-weight: 300;
	    color: var(--dark-text);
}
.entry-content a {
    background: transparent;
    position: relative;
    font-weight: 400;
    color: var(--primary-red);
    text-decoration: underline;
    transition: color 0.25s ease;
}
.entry-content a:hover {
    color: var(--accent-red)!important;
    transition: color 0.25s ease;
}

.entry-content img {
    margin: 2em 0;
}

.entry-content h3 {
    font-family: "Roboto Slab", serif;
    text-rendering: optimizelegibility;
    font-weight: 600;
    color: var(--black);
    font-size: 1em;
    line-height: 1.5em;
    margin-top: 1em;
}
.entry-content h4 {
    font-family: "Roboto Slab", serif;
    text-rendering: optimizelegibility;
    font-weight: 400;
    color: var(--black);
    font-size: 1em;
    line-height: 1.5em;
    margin-top: 1em;
}


.entry-content table {
    width: 100%;
    border: 1px solid #eaedf2;
    margin-bottom: 1.5em;
}

.entry-content table caption {
    margin-bottom: 7px;
    font-size: 0.75em;
    color: #9fa6b4;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.entry-content th,
.entry-content td {
    padding: 7px;
    border-right: 1px solid #eaedf2;
}

.entry-content th {
    background-color: #f8f9fa;
    border-bottom: 1px solid #eaedf2;
}

.entry-content td:last-child,
.entry-content th:last-child {
    border-right: none;
}

.entry-content tr:nth-child(even) {
    background-color: #f8f9fa;
}

.entry-content blockquote {
    margin: 0 0 1.5em 0.75em;
    padding: 0 0 0 0.75em;
    border-left: 3px solid #2980b9;
    font-style: italic;
    color: #9fa6b4;
}

.entry-content dd {
    margin-left: 0;
    font-size: 0.9em;
    color: #787878;
    margin-bottom: 1.5em;
}

.entry-content pre {
    font-size: 1em;
    font-variant: italic;
    margin: 0 0 1.5em;
}

/* =======================
   IMAGE STYLES
======================= */

img {
    width: 100%;
    height: auto;
}

.entry-content .size-auto,
.entry-content .size-full,
.entry-content .size-large,
.entry-content .size-medium,
.entry-content .size-thumbnail {
    max-width: 100%;
    height: auto;
}

/* =======================
   CAPTION STYLES
======================= */

.wp-caption {
    max-width: 100%;
    padding: 0.5em;
    background: none;
    position: relative;
}

.wp-caption img {
    max-width: 100%;
    margin-bottom: 0;
    display: block;
    width: 100%;
}

.wp-caption p.wp-caption-text {
    font-size: 0.85em;
    position: absolute;
    background: var(--black);
    color: var(--white);
    width: 85%;
    bottom: 0;
    margin: 1em 0;
}

/* =======================
   HENTRY STYLES
======================= */

.hentry {
    margin: 0 auto 1.5em;
    clear: both;
}

.hentry header,
.hentry footer {
    padding: 0;
}

.hentry footer p {
    margin: 0;
}

/* =======================
   ENTRY TITLE STYLES
======================= */

.entry-title {
    margin: 0;
    text-transform: uppercase;
}

/* =======================
   SIDEBAR
======================= */

#sidebar {
    /* margin: 0 1em; */
    padding: 0 1em;
}

/* Sidebar Header Styling */
.sidebar-header img {
    opacity: 0.25;
    transition: opacity 0.3s;
}

.sidebar-header img:hover {
    opacity: 1;
}

/* Sidebar Titles */
.sidebar-title {
    padding-bottom: 1em;
}

/* Widgets Styling */
.widget p:last-of-type {
    margin-bottom: 2em;
}

/* Sidebar Post Containers */
.sidebar-post, .related-post {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5em;
}

/* Thumbnail and Headline Wrapper */
.sidebar-post-top,
.search-result-top {
    display: flex;
    align-items: center;
}

/* Title and Metadata Container */
.sidebar-post-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Search Result Styling */
.search-result {
    padding: 1em 2em;
}

.search-result .entry-meta {
    justify-content: flex-end;
}

/* Thumbnail Styling */
.thumbnail-wrapper {
    position: relative;
    width: 50px;
    height: 50px;
    margin-right: 15px;
}

.thumbnail-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Thumbnail Red Overlay */
.thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(207, 8, 52, 0.75);
    border-radius: 50%;
}

/* Search Title */
.search-title {
    font-size: 1.25em;
    line-height: 1.15em;
    margin-top: 0.5em;
}

.search-title a:hover {
    color: var(--primary-red);
}

/* Thumbnail Links */
.thumbnail-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Metadata Styling */
.entry-meta {
    font-size: 0.875em;
    color: #666;
    margin-top: 0.5em;
}
/* ==========================
FOOTER
========================== */

/* Logo Styling */
#logo_fut svg {
    width: 300px;
    height: 200px;
    /* float: left; */
}
.logo_fut {width:300px; margin: 0 auto}
/* Footer Bar */
.foot-bar {
    font-family: "Roboto Slab", serif;
    position: relative;
    background-color: var(--primary-red);
    padding: 0.5em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 2px solid #111;
}

/* Main Footer Styling */
.footer {
     font-family: "Roboto Slab", serif;
    clear: both;
    border-top: 1px solid var(--light-gray);
    /* background-color: #7f8c96; */
    min-height: 300px;
    margin-top: 4em;
}

/* Footer Text Styling */
.fut {
    text-align: center;
    padding: 1.5em 0.25em;
}

/* Footer Paragraphs */
.fut p {
    font-size: 0.875em;
    padding: 0.75em;
    color: var(--charcoal-blue);
}

/* Footer Headings */
.fut h2 {
    color: var(--light-gray);
    font-size: 1.5em;
    margin: auto 1em;
}

/* Footer Links */
.fut h2 a {
    color: var(--white);
    transition: color 0.3s;
}

.fut h2 a:hover {
    color: var(--black);
    text-decoration: underline;
}

/* Footer Logo */
#logo_fut {
    display: block;
    text-align: center;
    font-family: "Roboto Slab", serif;
    font-size: 1.25em;
    padding: 0.5em;
    text-decoration: none;
    font-weight: 300;
    letter-spacing: 15px;
    text-transform: uppercase;
    color: #ccc;
}

/* Footer Logo Image */
#logo_fut img {
    width: 100px;
    height: auto;
}

/* ==========================
   TAGOVI
========================== */

/* General Tags Styling */
.tags a,
.tags-title {
    color: var(--white);
    line-height: 1.75;
    width: 80%;
    padding: 2px 8px;
    background-color: var(--primary-red);
    box-sizing: border-box;
    font-weight: 600;
    text-rendering: optimizeLegibility;
    text-transform: uppercase;
    transition: background-color 0.3s;
    -webkit-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Hover Effect for Tags */
.tags a:hover {
    background-color: var(--black);
}

/* Specific Styling for Tags Title */
.tags-title {
    background-color: var(--black);
}

/* ==========================
  SEARCH
========================== */

/* Search Title Styling */
.search-title h3 {
    box-sizing: border-box;
    padding: 1em 0 0.25em 0;
}

/* Search Title Links */
.search-title a {
    font-weight: 600;
    font-size: 1em;
    text-decoration: none;
    color: var(--neutral-gray);
    line-height: 1em;
    transition: color 0.3s;
}

/* Hover Effect */
.search-title a:hover {
    color: var(--accent-red);
}



/******************************************************************
PAGINACIJA
******************************************************************/
.pagination,
.wp-prev-next {
  margin: 1.5em 0;
}

/* Center the pagination */
.pagination {
  clear: both;
  text-align: center;
}

/* Pagination Wrapper */
.pagination ul {
  display: inline-block;
  background-color: var(--white);
  white-space: nowrap;
  padding: 0;
  clear: both;
  border-radius: 3px;
}

/* Pagination Items */
.pagination li {
  padding: 0;
  margin: 0;
  display: inline-block;
  overflow: hidden;
  border-bottom: 1px solid #eaedf2;
  border-radius: 20px;
}

/* Pagination Links */
.pagination a, .pagination span {
  font-family: "Roboto Slab", serif;
  text-rendering: optimizeLegibility;
  text-decoration: none;
  line-height: 1em;
  font-size: 1em;
  padding: 0.75em;
  min-width: 1em;
  display: block;
  color: var(--primary-red);
  transition: background-color 0.3s, color 0.3s;
}

/* Hover & Focus State */
.pagination a:hover, .pagination a:focus,
.pagination span:hover, .pagination span:focus {
  background-color: var(--accent-red);
  color: var(--white);
	  transition: all 0.3s ease;
}

/* Current Page Styling */
.pagination .current {
  cursor: default;
  color: #5c6b80;
}
.pagination .current:hover, .pagination .current:focus {
  background-color: var(--white);
  color: #5c6b80;
}

/* Fallback Previous & Next Links */
.wp-prev-next .prev-link {
  float: left;
}

.wp-prev-next .next-link {
  float: right;
}

/* end .pagination */




/* ==========================
  DROPDOWN
========================== */
.widget_archive h4 {
	font-family: "Roboto Slab", serif;
    text-rendering: optimizelegibility;
    font-size: 3em;
    font-weight:700;
    line-height: .65em;
    color: var(--light-gray);
    border-bottom: solid 2px var(--light-gray);
    margin: .5em 0;
	text-transform: uppercase;
}
	

/* Hide the native select element */
.custom-select-wrapper select {
    display: none;
}

/* Wrapper styling */
.custom-select-wrapper {
    position: relative;
    width: 100%; /* Adjust as needed */
    user-select: none;
    font-family: "Roboto Slab", serif;
    display: block;
    font-size: 1.125em;
    color: var(--neutral-gray-gray);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
}

/* Trigger styling */
.custom-select-trigger {
    display: block;
    padding: .75em;
	color: white;
    background-color: var(--primary-red);
    cursor: pointer;
    position: relative;
}

/* Arrow indicator */
.custom-select-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 30px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
 border-top: 10px solid var(--white);
    transform: translateY(-50%);
}

/* Options container */
.custom-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 99;
}

/* Individual option styling */
.custom-option {
    padding: 10px;
    cursor: pointer;
    display: inline-block;
    width: 95%;
    border-bottom: solid 1px var(--light-gray);
}

.custom-option:hover {
    background-color: var(--primary-red);
    color: white;
}

/* Show options when active */
.custom-options.show {
    display: block;
}
.custom-options {
    max-height: 500px;       /* Limits dropdown height */
    overflow-y: auto;        /* Vertical scroll only */
    overflow-x: hidden;      /* Prevents horizontal scroll */
    border: 1px solid #ccc;  /* Clean separation */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
}

/* Custom Scrollbar for WebKit Browsers (Chrome, Safari) */
.custom-options::-webkit-scrollbar {
    width: 20px;               /* Scrollbar width */
}

.custom-options::-webkit-scrollbar-track {
    background: #eee;         /* Track color */

}

.custom-options::-webkit-scrollbar-thumb {
    background-color: var(--accent-red); /* Thumb color (red from your theme) */
    border-radius: 40px;
    border: 2px solid #eee;    /* Space around the thumb */
}

/* Optional: Hover effect on scrollbar thumb */
.custom-options::-webkit-scrollbar-thumb:hover {
    background-color: #ee0014; /* Darker red for hover */
}

.screen-reader-text{display: none}

.extras svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
    transition: fill 0.3s ease-in-out;
}

.extras a {
    color: #333;
}
.extras a:hover {
    color: #ff6600;
}
.tooltip-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-wrapper::after {
    content: attr(data-title);
    position: absolute;
    bottom: 25%;  /* Postavlja tooltip iznad ikone */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.50);
    text-transform: uppercase;
    color: #fff;
    padding: 5px 10px;
    font-size: .875em;
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Tooltip nije klikabilan */
}

.tooltip-wrapper:hover::after {
    opacity: 1;
    visibility: visible;
}
/* Modalni prozor - skriven po defaultu */
.mail-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

/* Sadrzaj modala */
.mail-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 500px;
    border-radius: 8px;
}
/* Tekstualni input */
input[type="text"] {
    width: 100%;
    padding: 1em;
    border: 1px solid #ddd;
    background-color: white;
    color: black;
    box-sizing: border-box;
    display: block;
    margin-bottom: 1.5em;
}

/* Email input */
input[type="email"] {
    width: 100%;
    padding: 1em;
    border: 1px solid #ddd;
    background-color: white;
    color: #333;
    box-sizing: border-box;
    display: block;
    margin-bottom: 1.5em;
}

/* Lozinka input */
input[type="password"] {
    width: 100%;
    padding: 0.5em 0.75em;
    border: 1px solid #ddd;
    background-color: white;
    color: #333;
    box-sizing: border-box;
    display: block;
    margin-bottom: 1.5em;
}

/* Checkbox */
/* Fix za checkbox koji se ne može kliknuti */
.privacy-consent {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.privacy-consent input[type="checkbox"] {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  position: static !important;
  z-index: auto !important;
  pointer-events: auto !important;
  appearance: auto !important;
}
.privacy-consent span {
  line-height: 1.4;
}



/* Radio button */
input[type="radio"] {
    width: 15px;
    height: 15px;
    border: 1px solid #ddd;
    display: inline-block;
    margin-right: 0.5em;
    appearance: none;
    -webkit-appearance: none;
    background-color: white;
}

input[type="radio"]:checked {
    background-color: blue;
}

/* Dropdown (Select) */
select {
    padding: 0.5em 0.75em;
    border: 1px solid #ddd;
    background-color: white;
    color: #333;
    box-sizing: border-box;
    display: block;
 
    margin-bottom: 1.5em;
}

/* (Textarea) */
textarea {
    padding: 0.5em 0.75em;
    border: 1px solid #ddd;
    background-color: white;
    min-height: 200px;
    color: #333;
    box-sizing: border-box;
    display: block;
    margin-bottom: 1.5em;
    resize: vertical;
    width: 100%;
}

/* Gumb */
button, input[type="submit"] {font-family: "Roboto Slab", sans-serif!important;text-rendering: optimizelegibility;font-weight: 600;font-size: 1.25em;padding: .5em;border: 1px solid #ddd;background-color: #cf2e2e;color: white;cursor: pointer;/* border-radius: 0px!important; */transition: background-color 0.3s;/* width: 100%; */}

button:hover, input[type="submit"]:hover {
    /* background-color: #e14d43; */
}

/* Status poruka */
#mail-status {
    margin-top: 10px;
    font-weight: bold;
    text-align: center;
}

.success {
    color: green;
}

.error {
    color: red;
}
/* Skip link za tipkovnu navigaciju */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  z-index: 1000;
  transition: top 0.3s;
}
.skip-link:focus {
  top: 0;
}

/* Toolbar */
.accessibility-tools {
  position: fixed;
  bottom: 20px;
  right: 20px;
     background-color: var(--black);
  padding: 10px;
  /* border-radius: 6px; */
  z-index: 9999;
}


/* General Styling for Accessibility Tools Container */
.accessibility-tools {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* Styling for Individual Buttons */
.accessibility-tools button {
    background-color: var(--white);
    color: var(--black);
    border: 1px solid var(--primary-red); /* Crveni okvir */
    padding: 10px 15px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

/* Hover Effect (Promjena pozadine i boje okvira) */
.accessibility-tools button:hover {
 
	  background: var(--primary-red);
    color: var(--white);
    border-color: var(--primary-red);
}

/* Active State (Kad je opcija aktivna) */
.accessibility-tools button.active {
    background-color: var(--black);
    color: var(--white);
    border-color: var(--primary-red);
}


.accessibility-tools button {
  font-size: 16px;
  margin-right: 5px;
  cursor: pointer;
}

/* Inverzne boje */
body.high-contrast {
  background: var(--black) !important;
  color: #fff !important;
}
body.high-contrast a {
  color: #FFFFD2!important;
}
body.high-contrast .nav-container {
  background-color: var(--black)!important;
}
body.high-contrast img {
}

/* Povecani font */
body.large-text {
  font-size: 140%;
}

/* Podcrtavanje linkova */
body.underline-links a {
  text-decoration: underline !important;
}
#toggle-underline {
text-decoration:underline;
}
#slb_viewer_wrap .slb_theme_slb_default .slb_data_title, #slb_viewer_wrap .slb_theme_slb_default .slb_group_status {
	font-family: "Fira Sans Extra Condensed", sans-serif!important;
	text-rendering: optimizelegibility;
	font-weight: 600;
	padding-top:.25em
}


/* Galerija s gridom */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 stupca za vee ekrane */
    gap: 10px;
    margin-bottom: 20px;
}

/* Svaka stavka u galeriji */
.gallery-item {
    position: relative;
    overflow: hidden;
    width: 300px!important;
    height: 200px!important;
    aspect-ratio: 300 / 200;
}

/* Slike unutar galerije */
.gallery-item img {
    width: 400px;
    height: 200px!important;
    object-fit: cover;
    transition: transform 0.3s ease;
    margin: 0!important;
    border: none!important;
}

/* Hover efekt za slike */
.gallery-item img:hover {
    transform: scale(1.05);
}


.cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 475;
  object-fit: cover;
  display: block;
}
.fut a {color: var(--lightgray); font-weight:400; text-decoration: underline}
.fut a:hover {color: var(--primary-red); text-decoration: underline}

@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(1, 1fr); /* 1 stupac na mobitelima */
        .gallery-item {
    position: relative;
    overflow: hidden;
    width: 100%!important;
    height: 50%important;
    aspect-ratio: 300 / 200;
}
    }
}
@media (max-width: 480px) {
.cover h1 {        font-size: 1.5em !important;
        line-height: 1.25em;}
    
}