:root {
  --page-blue:  #344464;
  --nav-anthra: rgba(35, 31, 32, 1);
  --highlight: #0098d8;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--page-blue);
  color: #fff;
}

/* Potisni vsebino pod fixed navbar */
body {
  padding-top: 0px;
  font-variant: small-caps;
}
/* HERO SECTION with local image */
.hero-section {
  position: relative;
  height: 80vh;
  min-height: 400px;
  /* parallax: fiksno ozadje, centrirano in pokrito */
  background-image: url('files/2149434237.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;    /* ključ za parallax */
}
.hero-section .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.hero-section .text-highlight {
  color: var(--highlight);

}
.hero-section .btn-light {
  font-weight: 600;
  border-radius: 5px;
}

/* FOOTER */
footer {
  background-color: var(--nav-anthra);
  width:100%;
}
/* NAVBAR */
/* NAVBAR privzeto brez ozadja, brez blura */
#mainNav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background-color: transparent;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  padding: 0.5rem 0;
  transition: all 0.35s ease-in-out;
}

/* Po scrollu: polprosojno page-blue + blur */
#mainNav.navbar-shrink {
  background-color: rgba(52, 68, 100, 0.75); /* = #344464 @85% alpha */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0;
}

/* Container v navbaru */
#mainNav .container {
  max-width: none !important;
  width: 100%;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 0;
}

/* LEVI in DESNI blok tik ob logotipu */
.nav-left {
  display: flex;
  gap: 1rem;
  margin-right: 0.5rem;
}
.nav-right {
  display: flex;
  gap: 1rem;
  margin-left: 0.5rem;
}

/* LOGO */
#mainNav .navbar-brand img {
  width: 200px !important;
  height: auto !important;
  transition: width 0.3s ease;
}
#mainNav.navbar-shrink .navbar-brand img {
  width: 100px !important;
  height: auto !important;
}

/* NAV-LINKI: small-caps + cyan animacija */
#mainNav .nav-link {
  position: relative;
  display: inline-block;
  color: #fff !important;
  padding: 0;
  text-decoration: none;
  font-variant: small-caps;
  font-size: 20px;
}
#mainNav .nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: white;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
#mainNav .nav-link:hover::after,
#mainNav .nav-link:focus::after,
#mainNav .nav-link.active::after {
  transform: scaleX(1);
}

/* Hamburger (≤991px) skrije desktop linke */
@media (max-width: 991px) {
  .nav-left,
  .nav-right {
    display: none !important;
  }
}

/* Hamburger ikona bela */
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22' /%3E%3C/svg%3E");
}

/* OFFCANVAS styling */
.offcanvas.text-bg-dark {
  background-color: var(--nav-anthra);
}
.offcanvas .nav-link {
  color: #fff;
  padding: 0.75rem 1rem;
}
.offcanvas .nav-link:hover {
  background-color: rgba(255,255,255,0.1);
}

/* Glavna vsebina pod navbarjem */
.content-placeholder {
  min-height: 100vh;
  padding: 2rem;
}

/* Mobile defaults: pomanjšan logo in layout */
@media (max-width: 991px) {
  /* logo na mobilnem */
  #mainNav .navbar-brand img {
    width: 120px !important;
    height: auto !important;
  }
  /* poravnava: logo levo, toggle desno */
  #mainNav .container {
    justify-content: space-between !important;
  }
}

/* Mobile-shrink: samo background in border, brez spreminjanja logotipa */
@media (max-width: 991px) {
  #mainNav.navbar-shrink {
    /* ob scrollu na mobilnem spreminja samo background */
    background-color: var(--page-blue) !important;
    /* border ostane, logo ne spreminja velikosti */
  }
  #mainNav.navbar-shrink .navbar-brand img {
    width: 100px !important;
    height: auto !important;
  }
}

/* Odstrani border in outline od hamburger gumba */
.navbar-toggler {
  border: none !important;
}
.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Registracijska sekcija */
#registrationSection {
  border-top: 4px solid #fff;
}
/* scroll-padding-top za registracijo */
html.scrolled-to-registration {
  scroll-padding-top: 80px;
}
/* Prekliči invert filter samo za inline SVG hamburger */
.navbar-toggler svg {
  filter: none !important;
}
.sc {
  font-variant: small-caps;
}
.anth {
    background-color: var(--nav-anthra);
}
@media (max-width: 991px) {
  .content-placeholder .container { padding-left: 0; padding-right: 0; }
  .anth {
    /* razširi širino za en gutter (1.5rem), */
    /* da se raztegne čez negative margin row-ja */
    width: calc(100% + 1.5rem);
    margin-left: -0.75rem;
    margin-right: -0.75rem;

    /* ohrani notranji padding, da besedilo ni ob robu */
    padding: 1rem !important;

    /* zbriši zaobljene robove, če hočeš */
    border-radius: 0 !important;
  }

  /* gumb naj zasede vse razpoložljive širine */
  .anth .btn-success {
    width: 100%;
    border-radius: 0.25rem;
  }
}
/* styling za korake */
.form-step {
  transition: opacity 0.3s ease;
}
fieldset {
  border: 0px;
}
legend {
  font-size: 0.8rem;
  font-weight: 600;
}
#step2 {
  /* višina navbarja + malo rezerve */
  scroll-margin-top: 150px;
}
@media (max-width: 767px) {
  .hero-section {
    background-attachment: scroll;
  }
}
html {
  /* povsod upoštevaj 80px pri anchor pomikih */
  scroll-padding-top: 80px;
  scroll-behavior: smooth; /* opcijsko za gladko pomikanje */
}

/* Če na mobilnem uporabljaš drugačno višino navbarja, lahko omejiš: */
@media (max-width: 991px) {
  html {
    /* recimo, če je navbar na mobilnem 60px visok */
    scroll-padding-top: 60px;
  }
}
/* Osnovna barva vseh linkov */
a {
  color: white;           /* vaša non-default barva */
    font-weight: bold;
}


/* Barva ob hover ali focus */
a:hover,
a:focus {
  color: green;           /* malo temnejša varianta za efekt */
  text-decoration: underline;

}
.invalid-feedback {
  font-size:20px;
  color: red;
  background-color: white;
  border-radius: 5px;
  border:1px solid red;
  padding: 3px;
}
p strong {
  font-weight: 700;
}

.language-switcher a {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.language-switcher a:hover {
  opacity: 1;
}
#card-A, #card-B, #card-C, #card-D, #card-E, #card-F {
  transition: all 0.2s ease;
}

#card-A:hover,
#card-B:hover,
#card-C:hover,
#card-D:hover,
#card-E:hover,
#card-F:hover {
  transform: scale(1.05);
  color:black;
}
.group-card {
  color: white;
  transition: color 0.2s ease;
}

.group-card:hover {
  color: #222; /* ali #000 za povsem črno */
}


/* Phone input (intl-tel-input) should stretch to full width */
.iti { width: 100% !important; }

/* Fallback unified country code + number group */
.phone-cc-group { width: 100%; position: relative; }
/* visible flag + code badge when closed */
.phone-cc-group .cc-display { width: 160px; max-width: 160px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* phone text input */
.phone-cc-group .form-control { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* transparent select overlay to open dropdown and change selection */
.phone-cc-group .cc-select { position: absolute; left: 0; top: 0; height: 100%; width: 160px; opacity: 0; cursor: pointer; z-index: 2; }