/* styles.css — zajednički moderni stil */
@font-face{font-family:Inter;src:local('Inter'), local('Inter UI');font-display:swap}
:root{
  --bg:#eef2f6;
  --paper:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --brand:#003366;
  --brand-2:#004c99;
  --line:#e5e7eb;
  --note-bg:#fef9c3;
  --note-accent:#facc15;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
}
header.site{
  background:var(--brand);
  color:#fff;
  text-align:center;
  padding:1.2rem 1rem;
}
.layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 120px);}
@media (max-width:991px){.layout{grid-template-columns:1fr}aside.sidebar{display:none}}
aside.sidebar{background:var(--paper);border-right:1px solid var(--line);padding:1rem .75rem;}

/* MENU LINKS — apply in both sidebar and offcanvas */
.menu{display:block}
.menu a{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem .9rem;
  margin:.35rem 0;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--brand);
  font-weight:600;
  text-decoration:none;
  min-height:48px; /* touch target */
  transition:transform .05s ease, background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.menu a:hover{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 4px 10px rgba(0,0,0,.06)}
.menu a:active{transform:scale(.98)}
.menu a.active{background:var(--brand-2);color:#fff;border-color:var(--brand-2)}
/* Optional icons support when using <i> inside links */
.menu a i{font-size:1rem;opacity:.85}

/* keep legacy sidebar hover still nice */
.sidebar .menu a:hover{background:var(--brand);color:#fff}

/* Paper */
main.paper{
  background:var(--paper);
  border-radius:12px;
  box-shadow:0 3px 12px rgba(0,0,0,.05);
  padding:2rem;
  max-width:1000px;
  margin:2rem;
}
h2{color:var(--brand);font-weight:600;font-size:1.35rem;margin:0 0 .8rem 0;border-bottom:2px solid var(--line);padding-bottom:.4rem;}
h3{color:var(--brand-2);font-weight:600;font-size:1.05rem;margin-top:1.2rem;margin-bottom:.5rem;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:.3rem;}
p,li{font-size:1rem;margin-bottom:0.5rem;line-height:1.45}
ul{margin-bottom:.8rem}

/* Buttons */
.cta{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.25rem}
.btn{display:inline-block;padding:.55rem 1.3rem;border-radius:4px;font-weight:500;text-decoration:none;text-align:center;border:1px solid transparent;font-size:1rem;transition:background .2s,color .2s,border .2s;}
.btn-primary{background:#0d6efd;border-color:#0d6efd;color:#fff;}
.btn-primary:hover{background:#0b5ed7;border-color:#0a58ca;}
.btn-outline{background:#fff;color:#0d6efd;border:1px solid #0d6efd;}
.btn-outline:hover{background:#0d6efd;color:#fff;border-color:#0d6efd;}

/* Callouts */
.note{background:var(--note-bg);border-left:4px solid var(--note-accent);padding:1rem 1.25rem;border-radius:8px;}
.alert-box{background:#ffe5e5;border-left:4px solid #ff0000;color:#660000;padding:1rem 1.25rem;border-radius:8px;margin-top:1rem;font-weight:500;}

/* Footer */
footer.site{background:#f9fafb;text-align:center;padding:1rem;font-size:.9rem;color:#555;}

/* Registracija MER gumb i blink (serverless) */
.menu a.registracija{
  background:#ffc107; color:#000; border:1px solid #e0a800; font-weight:600; text-align:center;
}
.menu a.registracija:hover{ background:#e0a800; color:#000; border-color:#d39e00; }
@keyframes regBlink{0%,100%{filter:none}50%{filter:brightness(1.15)}}
.menu a.registracija.blink{ animation: regBlink 1.2s infinite; }
@media (prefers-reduced-motion:reduce){ .menu a.registracija.blink{ animation:none; } }