:root {
   --font-family: "Rubik", sans-serif;
   --primary: #1746a2;
}

.language-switcher {
   display: flex;
   align-items: center;
   position: relative;
}

.language-switcher select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background-color: transparent;
   border: none;
   color: white;
   font-family: "Outfit", sans-serif;
   font-size: 16px;
   font-weight: 500;
   padding: 1rem 1rem 0 0;
   cursor: pointer;
}

.language-switcher::after {
   content: "";
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 16px;
   height: 16px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   pointer-events: none;
}

.language-switcher select:focus {
   outline: none;
   box-shadow: none;
}

.language-switcher select option {
   background-color: rgba(22, 25, 200, 0.9); /* Similar to your primary blue */
   color: white;
   padding: 10px;
}

.language-switcher select:-moz-focusring {
   color: transparent;
   text-shadow: 0 0 0 #fff;
}

.language-switcher select:focus > option:checked {
   background: rgb(3, 5, 126);
   color: white;
}

select[aria-label="Select language"] {
   outline: none !important;
   box-shadow: none !important;
}

select[aria-label="Select language"] {
   background-image: none !important;
}

/* Typography */
@font-face {
   font-family: "Rustico";
   src: url("../Rustico-Regular.otf") format("opentype");
   font-weight: normal;
   font-style: normal;
}

/* Update brand-font class to use Rustico */
.brand-font {
   font-family: "Rustico", cursive; /* Keep cursive as fallback */
}

/* Container */
.container-fluid {
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 2rem;
}

/* Header and Navigation */
header {
   position: relative;
   height: 85vh;
   overflow: hidden;
}

header.default-header {
   background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      url("../img/hero.jpg") center/cover;
}

header.utrke-header {
   background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      url("../img/utrke.jpg") center/cover;
}

header.poredak-header {
   background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      url("../img/poredak.jpg") center/cover;
}

header.novosti-header {
   background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      url("../img/novosti.jpg") center/cover;
}

nav {
   position: absolute;
   top: 2rem;
   left: 0;
   right: 0;
   z-index: 100;
   padding: 1rem 2rem;
   background: transparent;
}

.nav-links {
   display: flex;
   gap: 2.5rem;
   align-items: center;
}

nav a {
   color: #fff;
   font-family: "Outfit", sans-serif;
   font-size: 16px;
   font-weight: 500;
   text-decoration: none;
   transition: opacity 0.3s ease;
}

nav a:hover {
   opacity: 0.8;
}

.nav-brand {
   font-family: "Rustico", cursive;
   color: white;
   position: relative;
   font-size: 2rem;
   padding-top: 16px;
}

.nav-brand::after {
   content: "EX";
   position: absolute;
   color: #ec272e;
   left: 5.15em;
   font-size: 2.2rem;
   top: 0;
   padding-top: 14px;
}

.nav-brand {
   text-indent: -0.1em;
}

.hamburger {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   padding: 0.5rem;
   color: #fff;
   z-index: 101;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
   content: "";
   display: block;
   width: 24px;
   height: 2px;
   background: #fff;
   transition: transform 0.3s ease;
}

.hamburger-inner::before {
   transform: translateY(-8px);
}

.hamburger-inner::after {
   transform: translateY(6px);
}

.hamburger.active .hamburger-inner {
   transform: rotate(45deg);
}

.hamburger.active .hamburger-inner::before {
   opacity: 0;
}

.hamburger.active .hamburger-inner::after {
   transform: translateY(-2px) rotate(-90deg);
}

/* Hero Section */
.hero {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   min-height: 75vh;
}

.hero h1 {
   font-size: 4rem;
   font-family: Rubik;
   margin-bottom: 0.1rem;
   color: #fff;
}

.hero p {
   font-size: 1.1rem;
   font-family: Rubik;
   margin-bottom: 0.8rem;
   font-weight: 600;
   color: #fff;
}

.hero a.contrast {
   background-color: #1619c8;
   color: #fff;
   padding: 0.75rem 2rem;
   border-radius: 10px;
   text-decoration: none;
   font-family: Outfit;
   font-size: 18px;
   font-style: normal;
   font-weight: 400;
   border: none;
   transition: background-color 0.3s ease;
}

.hero a.contrast:hover {
   background-color: #03057e;
}

/* About Section */
.about {
   padding: 2rem 2rem;
   background: url("../img/map.jpg") center/cover;
   display: flex;
   align-items: center;
   margin-bottom: 0;
}

.about .container {
   display: flex;
   flex-direction: column;
   gap: 3rem;
}

.about-content {
   background: rgba(255, 255, 255, 0); /* More transparent background */
   padding: 5rem 0rem 3rem 0rem;
   max-width: 600px;
}

.mobile-map {
   display: none; /* Hide mobile map on desktop */
}

.about-content h2,
.about-content p {
   color: #000; /* Black text */
}

.about-content h2 {
   font-size: 2.5rem;
   margin-bottom: 1rem;
}

.about-content p {
   font-size: 1.1rem;
   line-height: 1.6;
}

.race-logos {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 2rem;
}

.race-logos {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 2rem;
}

/* News Section */
.news {
   padding: 4rem 2rem 2rem 2rem;
   background-color: #f4f4f4;
   margin-top: 4rem;
   margin-bottom: 0;
}

.news h2 {
   text-align: center;
   color: #000;
   font-family: Rubik;
   font-weight: 700;
   margin-bottom: 0rem;
}

.news-card {
   background: white;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0px 0px 1px 0px rgba(40, 41, 61, 0.04),
      0px 2px 4px 0px rgba(96, 97, 112, 0.16);
   padding: 0;
   margin: 0.5rem 0 1.5rem 0;
}

.news-date {
   color: #959393;
   font-family: Rubik;
   font-size: 16px;
   font-weight: 400;
   padding: 0.5rem 1rem 0rem 1rem !important;
   margin: 0;
}

.news .brand-font {
   padding: 2rem 0 2rem 0;
}

.news-content h3 {
   color: #121212;
   font-family: Rubik;
   font-size: 22px;
   font-weight: 700;
   padding: 0.5rem 1rem 0rem 1rem;
   margin: 0;
}

.news-content p {
   font-family: Rubik;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
   padding: 0.5rem 1rem 2rem 1rem;
   margin: 0;
}

.news-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1rem;
   margin-top: 0rem;
}

/* Footer */
footer {
   background: #3e3f42;
   color: white;
   padding: 2rem;
   text-align: center;
}

footer h2 {
   color: white;
}

/* Utrke */

.race-container {
   background: white;
}

.race-card {
   display: flex;
   margin-top: 1rem;
   margin-bottom: 1rem;
   background: white;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   padding: 0;
}

.race-card img {
   width: 500px;
   height: auto;
   object-fit: cover;
}

.race-info {
   padding: 1.5rem 1.5rem 1.5rem 2.5rem;
}

.race-info h2 {
   margin: 0 0 0.5rem 0;
   font-size: 1.5rem;
   color: #121212;
}

/* Meta information */
.race-meta {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   flex-wrap: wrap;
   margin-bottom: 1rem;
   color: #666;
}

.race-meta span {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.race-meta img {
   width: 16px;
   height: 16px;
}

/* Action buttons */
.race-actions {
   display: flex;
   gap: 1rem;
}

.race-actions a {
   font-size: 18px;
   padding: 0.5rem 1rem;
   border-radius: 10px;
   text-decoration: none;
   font-weight: 400;
   border: none;
   font-family: Outfit;
}

.race-actions a.primary {
   background-color: #1619c8;
   color: white;
}

.race-actions a.primary:hover {
   background-color: #03057e;
}

.race-actions a.secondary {
   background-color: #c50c0c;
   color: white;
}

.race-actions a.secondary:hover {
   background-color: #980909;
}

.race-actions a.primary.disabled,
.race-actions a.secondary.disabled {
   background-color: #cccccc;
   color: #666666;
   cursor: not-allowed;
   pointer-events: none;
}

/* Rules and Regulations Section */
.rules {
   padding: 4rem 2rem;
   background: #fff;
}

.rules h2 {
   text-align: center;
   margin-bottom: 2rem;
   font-family: Rubik;
   font-weight: 700;
   color: #000;
}

.rules p {
   margin-bottom: 1.5rem;
   line-height: 1.6;
   color: #333;
}

.rules ul {
   list-style-type: disc;
   padding-left: 1.5rem;
   margin-bottom: 1.5rem;
}

.rules li {
   margin-bottom: 1rem;
   line-height: 1.5;
   color: #333;
}

.rules ul li a {
   color: #333;
   text-decoration: underline;
   transition: opacity 0.3s ease;
}

.rules ul li a:hover {
   opacity: 0.7;
}

/* Poredak */

#poredak,
#novosti {
   background: white;
}

.standings-table {
   width: 100%;
   border-collapse: collapse;
   margin: 1rem 0;
   background: white;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.standings-table th {
   background: #1a1cae;
   color: white;
   padding: 1rem;
   text-align: center;
   font-family: "Rubik", sans-serif;
   font-weight: 500;
   font-size: 0.7rem;
}

.standings-table td {
   padding: 1rem;
   text-align: center;
   border-bottom: 1px solid #eee;
   font-family: "Rubik", sans-serif;
}

.standings-table tbody tr:hover {
   background: #f8f9fa;
}

.standings-table tbody td {
   font-size: 15px;
}

/* Position change indicators */
.position-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   gap: 0.1rem;
}

.position-number {
   font-weight: 500;
   flex-shrink: 0;
}

.change-indicator {
   display: flex;
   align-items: center;
   gap: 0.1rem;
   font-size: 0.75rem;
   font-weight: 400;
   flex-shrink: 0;
}

.change-up {
   color: #22c55e; /* Green for moving up */
}

.change-down {
   color: #ef4444; /* Red for moving down */
}

.change-none {
   color: #9095a0; /* Gray for no change */
}

.chevron-icon {
   flex-shrink: 0;
}

.chevron-up {
   color: #22c55e;
}

.chevron-down {
   color: #ef4444;
}

.dash {
   color: #9095a0;
   font-weight: 500;
}

/* Ensure position cell has proper width */
.position-cell {
   min-width: 80px;
   width: 80px;
}

/* Novosti */
.news {
   background: #fff;
   margin-top: 1rem;
   padding: 0;
}

#novostiMain {
   padding: 0;
}

.news-card {
   transition: box-shadow 0.3s ease, transform 0.3s ease;
}

a.news-card-link {
   text-decoration: none;
   color: inherit;
   display: block;
}

.news-card:hover {
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
   transform: translateY(-2px);
}

.news-content p {
   color: #333;
}

/* Article specific styles */
header.article-header-be {
   background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      url("../img/balkan-expres.jpg") center/cover;
}

header.article-header-sk {
   background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      url("../img/slo24_koper-a.jpg") center/cover;
}

header.article-header-skr {
   background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      url("../img/slo12_kranj-a.jpg") center/cover;
}

header.article-header-bm {
   background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      url("../img/balkan-medalja.jpg") center/cover;
}

header.article-header-iau {
   background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      url("../img/iau.jpg") center/cover;
}

header.article-header-prog {
   background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      url("../img/proglasenje.jpg") center/cover;
}

header.article-header-poloj {
   background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      url("../img/polojska-news.jpg") center/cover;
}

.article-content {
   padding: 0rem 2rem;
   background: #fff;
}

.article-meta {
   text-align: center;
   margin-bottom: 2rem;
}

.article-date {
   color: #959393;
   font-family: Rubik;
   font-size: 16px;
   font-weight: 400;
}

.article-content p {
   max-width: 800px;
   margin: 0 auto 1.5rem auto;
   font-family: Rubik;
   font-size: 18px;
   line-height: 1.6;
   color: #333;
}

.article-content h4,
.article-content ol {
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
   font-family: Rubik;
   color: #333;
}

.article-content h4 {
   margin-bottom: 0.5rem;
}

.article-content ol {
   margin-bottom: 1.5rem;
   padding-left: 1.5rem;
}

.article-link {
   color: #1619c8;
   text-decoration: none;
   font-weight: 500;
   transition: color 0.3s ease;
}

.article-link:hover {
   color: #03057e;
}

.article-polojska-table {
   max-width: 350px;
   margin: left;
}

.article-polojska-table td {
   padding: 5px;
}

/* Responsive image for articles */
.article-polojska-image-container {
   width: 100%;
   margin: 2rem 0;
   text-align: center;
}

.responsive-article-polojska-image {
   max-width: 100%;
   height: auto;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Optional caption styling */
.article-polojska-image-caption {
   margin-top: 0.5rem;
   font-size: 0.9rem;
   color: #666;
   text-align: center;
}

/* Position change indicators */
.position-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   gap: 0.5rem;
}

.position-number {
   font-weight: 500;
   flex-shrink: 0;
}

.change-indicator {
   display: flex;
   align-items: center;
   gap: 0.2rem;
   font-size: 0.75rem;
   font-weight: 400;
   flex-shrink: 0;
}

.change-up {
   color: #22c55e; /* Green for moving up */
}

.change-down {
   color: #ef4444; /* Red for moving down */
}

.change-none {
   color: #6b7280; /* Gray for no change */
}

.chevron-icon {
   flex-shrink: 0;
}

.chevron-up {
   color: #22c55e;
}

.chevron-down {
   color: #ef4444;
}

.dash {
   color: #6b7280;
   font-weight: 500;
}

/* Ensure position cell has proper width */
.position-cell {
   min-width: 80px;
   width: 80px;
}

/* Desktop styles */
@media (min-width: 769px) {
   .race-logos {
      justify-content: space-between;
   }

   .race-logos img {
      height: 80px;
      object-fit: contain;
   }
}

/* Mobile Styles */
@media (max-width: 768px) {
   .language-switcher {
      margin-left: 0;
   }

   .language-switcher select {
      font-size: 20px;
      padding-right: 25px;
      padding-top: 5px;
   }

   .language-switcher::after {
      width: 24px;
      height: 24px;
   }

   nav.container-fluid {
      padding-left: 16px;
      padding-right: 16px;
   }

   .nav-brand {
      font-size: 1.5rem;
      white-space: nowrap;
      margin: 0;
      padding-top: 16px;
      padding-left: 0;
   }

   .nav-brand::after {
      content: "EX";
      position: absolute;
      color: #ec272e;
      left: 4.75em;
      font-size: 1.7rem;
      top: 0;
      padding-top: 13px;
   }

   .nav-brand-container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      position: relative;
      z-index: 200;
      padding: 0.5rem 0.5rem;
   }

   .hamburger {
      display: block;
      position: static;
      margin: 0;
      width: 36px;
   }

   .hamburger:focus {
      outline: none;
      box-shadow: none;
   }

   .hamburger:focus-visible {
      outline: none;
      box-shadow: none;
   }

   .nav-links {
      position: fixed;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100vh;
      background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      align-items: flex-start;
      padding: 8rem 1.5rem;
      transition: left 0.3s ease;
   }

   .nav-links.active {
      left: 0;
   }

   .nav-links a {
      font-size: 20px;
      opacity: 0;
      transform: translateX(-20px);
      transition: opacity 0.3s ease, transform 0.3s ease;
   }

   .nav-links.active a {
      opacity: 1;
      transform: translateX(0);
   }

   .nav-links.active a:nth-child(1) {
      transition-delay: 0.1s;
   }
   .nav-links.active a:nth-child(2) {
      transition-delay: 0.2s;
   }
   .nav-links.active a:nth-child(3) {
      transition-delay: 0.3s;
   }

   .hero h1 {
      font-size: 2rem;
      font-family: Rubik;
      margin-bottom: 0.1rem;
      line-height: 2.5rem;
   }

   .hero p {
      font-size: 1rem;
      margin-bottom: 0.8rem;
   }

   /* About */
   .about {
      background: none;
      padding: 0rem;
   }

   .about .container {
      padding: 0;
   }

   .about-content {
      padding: 2rem 2rem 0rem 2rem;
      margin-bottom: 0rem;
   }

   .mobile-map {
      width: 100%;
      height: auto;
      margin: 0;
      display: block;
   }

   .desktop-map {
      display: none;
   }

   .about-content h2 {
      font-size: 2rem;
   }

   .race-logos {
      overflow-x: auto;
      justify-content: flex-start;
      gap: 2rem;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 0;
   }

   .race-logos::-webkit-scrollbar {
      display: none;
   }

   .race-logos img {
      min-width: 150px;
      height: 80px;
      object-fit: contain;
      flex-shrink: 0;
   }

   /* News */
   .news-grid {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0rem;
   }

   .news-card {
      width: 100%;
      max-width: 400px;
   }

   /* Utrke */
   .race-list {
      max-width: 800px;
      margin: 0 auto;
      padding: 0rem;
   }

   .race-card {
      flex-direction: column;
   }

   .race-info {
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: start;
      text-align: center;
   }

   .race-meta {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
   }

   .race-meta span {
      font-size: 1rem;
   }

   .race-info h2 {
      font-size: 1.75rem;
      margin-bottom: 1rem;
   }

   .race-meta img {
      width: 20px;
      height: 20px;
      margin-right: 8px;
   }

   .race-actions {
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 1rem;
      padding: 0.5rem 1.5rem 1.5rem 1.5rem;
   }

   .race-actions a {
      min-width: 140px;
      padding: 0.75rem;
      font-size: 1rem;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 300;
   }

   .rules-mobile-container {
      padding: 0;
   }

   /* Poredak */
   .standings-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }

   .standings-table {
      min-width: 1000px;
   }

   .standings-table th,
   .standings-table td {
      padding: 0.75rem;
      font-size: 0.7rem;
   }

   /* Mobile position container - keep separation but smaller */
   .position-container {
      justify-content: space-between;
      gap: 0.3rem;
   }

   .change-indicator {
      font-size: 0.65rem;
   }

   .chevron-icon {
      width: 10px;
      height: 10px;
   }

   .position-cell {
      min-width: 70px;
      width: 70px;
   }

   /* Articles */
   .article-polojska-image-container {
      margin: 1.5rem 0;
   }
}

/* Small Mobile Styles */
@media (max-width: 374px) {
   .hero h1 {
      font-size: 2.5rem;
      font-family: Rubik;
      margin-bottom: 0.1rem;
   }
}

@media (max-width: 1024px) and (orientation: landscape) {
   /* Hide everything except the table */
   header,
   footer,
   nav {
      display: none !important;
   }

   body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      height: 100vh;
   }

   #poredak {
      height: 100vh;
      overflow: hidden;
   }

   #poredak main.container {
      margin: 0;
      padding: 0;
      height: 100vh;
      width: 100vw;
      max-width: none;
   }

   .standings-wrapper {
      height: 100vh;
      width: 100vw;
      overflow: auto;
      position: relative;
      margin: 0;
      padding: 0;
   }

   .standings-table {
      min-width: 1000px;
      position: relative;
      margin: 0;
      border-collapse: collapse;
   }

   /* Sticky header */
   .standings-table thead {
      position: sticky;
      top: 0;
      z-index: 2;
      background: #1a1cae;
   }

   /* Sticky first two columns */
   .standings-table th:nth-child(1),
   .standings-table th:nth-child(2) {
      position: sticky;
      left: 0;
      z-index: 3;
   }

   .standings-table th:nth-child(2) {
      left: 60px;
   }

   .standings-table td:nth-child(1),
   .standings-table td:nth-child(2) {
      position: sticky;
      left: 0;
      background: white;
      z-index: 1;
   }

   .standings-table td:nth-child(2) {
      left: 60px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100px;
   }

   /* Landscape position container - maintain separation */
   .position-container {
      justify-content: space-between;
      gap: 0.2rem;
   }

   .change-indicator {
      font-size: 0.6rem;
   }

   .position-cell {
      min-width: 60px;
      width: 60px;
   }
}

@media (max-width: 768px) and (orientation: portrait) {
   .standings-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }

   .standings-table {
      min-width: 1000px;
   }

   .standings-table th,
   .standings-table td {
      padding: 0.75rem;
      font-size: 0.7rem;
   }
}