/*
Theme Name: GOTIK
Theme URI: https://www.roddobrevolje.si/
Author: Jus in Dren
Author URI: https://www.roddobrevolje.si/
Description: GOTIK SITE
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: GOTIK
*/
@import url('https://fonts.googleapis.com/css2?family=Nosifer&display=swap');

:root {
  /* Primary in secondary */
  --primary: #A20607;
  --primary-container: #3D0001;
  --on-primary: #FFFFFF;
  --secondary: #E85D5D;
  
  /* Surface */
  --surface-dim: #0D0D0D;
  --surface-bright: #333333;
  --surface: #1F1F1F;
  --surface-high: #282828;
  --surface-highest: #333333;
  --on-surface: #E8E8E8;
  --on-surface-variant: #C8C8C8;
  
  /* Outline */
  --outline: #444444;
  
  /* Elevation */
  --elevation-1: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.5);
  --elevation-2: 0 2px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.5);
  --elevation-3: 0 4px 12px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.5);
  
  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --transition-medium: 250ms cubic-bezier(0.4,0,0.2,1);
}

/* Base */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 62.5%; scroll-behavior: smooth; }

body {
  font-size: 1.6rem;
  line-height: 1.6;
  font-family: "Roboto", "Open Sans", sans-serif;
  background: var(--surface-dim);
  color: var(--on-surface);
}

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;

  box-shadow: 
    inset -10px 0 20px -10px rgba(162,6,7,0.2),
    inset 10px 0 20px -10px rgba(162,6,7,0.2),
    0 0 30px rgba(162,6,7,0.15);
}
.column { width: 100%; }

@media (min-width: 550px) {
  .container { width: 85%; }
  .column { margin-left: 4%; }
  .column:first-child { margin-left: 0; }
  .one-half.column { width: 48%; }
}

/* stili */
h2 { font-size: 4.5rem; font-weight: 400; margin-bottom: 2.4rem; }
h3 { font-size: 3.6rem; font-weight: 400; margin-bottom: 1.6rem; }
h4 { font-size: 2.8rem; font-weight: 500; color: var(--primary); margin-bottom: 1.2rem; }
h5 { font-size: 2.2rem; font-weight: 500; color: var(--primary); margin-bottom: 1.6rem; }
p { margin-bottom: 2rem; color: var(--on-surface-variant); }

@media (max-width: 768px) {
  h2 { font-size: 3.2rem; }
  h3 { font-size: 2.8rem; }
  h4 { font-size: 2.4rem; }
  h5 { font-size: 2rem; }
}

/* Linki in gumbi */
a { color: var(--secondary); text-decoration: none; transition: color var(--transition-fast); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 24px;
  color: var(--on-primary);
  font-size: 1.4rem;
  font-weight: 500;
  background: var(--surface-high);
  border: 1px solid var(--outline);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-medium);
  box-shadow: var(--elevation-1);
}

.button:hover {
  background: var(--surface-highest);
  box-shadow: var(--elevation-2);
  transform: translateY(-2px);
}

.button-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

.button-primary:hover {
  background: var(--secondary) !important;
  border-color: var(--secondary) !important;
}

.nav-buttons .button {
  margin-bottom: 0;
  padding: 8px 16px;
  min-height: 36px;
  font-size: 1.3rem;
}

/* Header in footer */
.header-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: var(--surface-bright);
  border-radius: var(--radius-xl);
  margin-bottom: 2.4rem;
  box-shadow: var(--elevation-2);
}


.logo-section { display: flex; align-items: center; gap: 16px; }

.nav-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.header-container img:not(.gotik-logo) {
  width: 50px;
  height: 50px;
  transition: transform var(--transition-medium);
}

.logo-section img:hover:not(.gotik-logo) { transform: scale(1.05);}

/* Footer */
footer {
  margin-top: 4rem;
  width: 100%;
  background: transparent;
}
.gotik-logo {
  width: auto;
  max-width: 100%;
  align-items: center;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 6px 12px var(--primary))
}

footer .header-container {
  width: 85%;
  max-width: 1200px;
  margin: 0 auto !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: var(--surface-bright);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-2);
  box-sizing: border-box;
}

footer span {
  color: var(--on-surface-variant);
  font-size: 1.4rem;
  padding-left: 4px;
}


@media (max-width: 768px) {
  footer .header-container {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    width: 90%;
  }
  
  footer span {
    padding-left: 0;
    text-align: center;
  }
}

footer .header-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: var(--surface-bright);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-2);
  box-sizing: border-box;
}
footer span { color: var(--on-surface-variant); font-size: 1.4rem; padding-left: 4px; }

@media (max-width: 768px) {
  footer .header-container {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    width: 90%;
  }
  footer span {
    padding-left: 0;
    text-align: center;
  }
}

.ozadjeslika {
  position: relative;
  background-image: url(../images/ozadje.png); /* to se kasneje zamenja s sliko iz gotika */
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-xl);
  padding: 3.2rem 1.6rem;
  margin: 2.4rem 0;
  box-shadow: var(--elevation-3);
  isolation: isolate;
}
.ozadjeslika > * {
  position: relative;
  z-index: 2;
}

.ozadjeslika > * {
  position: relative;
  z-index: 2;
}

.separator {
  border: none;
  height: 4px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--primary), 
    var(--secondary),
    var(--primary), 
    transparent);
  margin: 4rem auto;
  box-shadow: 0 0 15px var(--primary);
  opacity: 0.9;
}
.separator2 {
  border: none;
  height: 1px;
  background: var(--secondary);
  margin: 2rem auto;
  opacity: 0.5;
}

.obvestilo {
  padding: 1.6rem 2rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--primary);
  box-shadow: var(--elevation-1);
  margin: 2rem auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 3.2rem;
}

.row > .column { flex: 1; min-width: 280px; }

/* tabele */
table {
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--elevation-1);
  border-collapse: separate;
  border-spacing: 0;
}

th, td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--outline);
}

th {
  background: var(--surface-high);
  font-weight: 500;
  color: var(--on-surface);
  font-size: 1.3rem;
}

tr:last-child td { border-bottom: none; }
.table-responsive { overflow-x: auto; margin-bottom: 2rem; }

/* Lists */
ul { list-style: none; padding-left: 0; }

ul li {
  margin-bottom: 1.2rem;
  padding-left: 2.8rem;
  position: relative;
}

ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(162,6,7,0.3);
}

.u-full-width { width: 100%; background: var(--surface); }
.center-text { text-align: center; }
.small { font-size: 1.2rem; color: var(--on-surface-variant); }

/* status prijav */
.zaprteprijave, .odprteprijave, .polneprijave { 
  display: none; 
  margin-bottom: 20px; 
}

body.body-zaprteprijave .zaprteprijave,
body.body-odprteprijave .odprteprijave,
body.body-polneprijave .polneprijave { 
  display: block; 
}
/* Staff link */
.staff-link {
  position: fixed;
  left: 2px;
  top: 2px;
  z-index: 1000;
  background: var(--primary-container);
  color: var(--on-primary);
  padding: 8px 16px;
  border-radius: var(--radius-xl);
  font-size: 1.4rem;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
  .header-container { flex-direction: column; gap: 16px; padding: 16px; }
  .nav-buttons { justify-content: center; width: 100%; }
  .row { flex-direction: column; }
  .row > .column { width: 100%; margin-left: 0; }
  .ozadjeslika { padding: 3.2rem 1.6rem; }
  th, td { padding: 12px; }
}

@media (max-width: 480px) {
  .nav-buttons { flex-direction: column; width: 100%; }
  .nav-buttons .button { width: 100%; text-align: center; }
  .gotik-title { font-size: 2rem; }
}

*:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }


/* KARTICE*/
.card {
  background: var(--primary-container);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--elevation-2);
  border: 2px solid rgba(255,255,255,0.2);
  transition: all var(--transition-medium);
}


.card .card-title {
  background: transparent;
  color: white !important;
  padding: 0;
  margin-bottom: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 2.4rem;
  border: none;
  box-shadow: none;
}

.card .card-title img {
  filter: brightness(0) invert();
  width: 24px;
  height: 24px;
}

/* VSEBINA KARTICE */
.card-content {
  color: white;
}

.card-content a:hover {
  text-decoration: underline;
  opacity: 0.9;
}

@media (max-width: 768px) {
  .card {
    padding: 1.6rem;
  }
  
  .card .card-title {
    font-size: 2rem;
  }
}

.card-content a {
  color: white !important;
  text-decoration: underline !important;
  font-weight: 600;
}
.card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--elevation-3);
  border-color: rgba(255,255,255,0.4);
  background: var(--primary);
}

.vnos{
  background: var(--primary-container);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--elevation-1);
  border: 2px solid rgba(255,255,255,0.2);
  color: var(--on-primary)
}