/* ========== Osnovne nastavitve ========== */
:root{
  --bg: #0f1115;
  --panel: #161a22;
  --ink: #e8e8ea;
  --muted: #a9afbc;
  --brand: #468499;
  --brand-ink: #111;
  --border: #262a33;
  --maxw: 1080px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{ box-sizing: border-box }
html,body{ height:100% }
html{ scroll-behavior: smooth }
body{
  margin:0;
  font: 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color: var(--ink);
  background: /*
              radial-gradient(1000px 700px at 10% -10%, #1a1f2b 0, transparent 60%),
              radial-gradient(800px 600px at 110% 10%, #1a1f2b 0, transparent 55%), 
              */

              /*background: linear-gradient(180deg, #0f1115 0%, #141821 10%); */
              var(--bg);
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration: none }
a:hover, a:focus{ text-decoration: underline }

/* Skip link za dostopnost */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:16px; top:16px; width:auto; height:auto;
  background: var(--brand); color: var(--brand-ink);
  padding:8px 12px; border-radius: 8px; z-index:9999;
}

/* ========== Layout ========== */
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 20px }

/* Header / navigacija */
header{
  position: sticky; top:0; z-index:50;
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700 }
.brand img{ width:32px; height:32px }
.menu{ display:flex; gap:18px; list-style:none; margin:0; padding:0 }
.menu a{ padding:8px 10px; border-radius:10px }
.menu a:focus{ outline:3px solid #2d3350 }

/* Sekcije */
.section{ padding: 56px 0 }
.hero{ padding-top: 72px }
.hero-grid{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:28px; align-items:center;
}
.hero h1{ line-height:1.15; font-size: clamp(28px, 3.6vw, 44px); margin: 0 0 10px }
.hero p{ color: var(--muted); margin: 0 0 18px }
.hero-aside{
  background: var(--panel); border:1px solid var(--border); border-radius: var(--radius);
  padding: 16px;
}

/* Gumbi */
.btn{
  display:inline-block; padding:12px 16px; border-radius:999px;
  border:1px solid var(--border); background:transparent; color:var(--ink); font-weight:700;
}
.btn:focus{ outline:3px solid #2d3350 }
.btn-primary{
  background: var(--brand); color: var(--brand-ink); border: none;
}

/* Kartice storitev */
.cards-3{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;
}
.card{
  background: var(--panel); border:1px solid var(--border); border-radius: var(--radius);
  padding:18px; box-shadow: var(--shadow);
}
.card h3{ margin:0 0 8px; font-size:20px }
.card p{ margin:0; color: var(--muted) }

/* O nas */
.about{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:22px; align-items:start;
}
.about figure{ margin:0 }
.about figcaption{ color: var(--muted); font-size: 14px; margin-top:8px }

/* Kontakt */
.contact-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:24px;
}
address{ font-style: normal; color: var(--muted) }

/*
.map iframe{
  width:100%; height:260px; border:0; border-radius: 12px;
}
*/
.map {
    margin-top: 20px;  /* malo razmaka nad iframe */
}

.map iframe {
    width: 100%;
    height: 260px;
    border: 0;
    border-radius: 12px;
    display: block;
}


/* Obrazec */
.field{ display:grid; gap:6px; margin: 12px 0 }
label{ font-weight:700; font-size:14px }
input, textarea{
  width:100%; padding:10px 12px; border-radius: 10px;
  border:1px solid #2b2f3a; background:#0d1016; color: var(--ink);
}
input:focus, textarea:focus{ outline:3px solid #2d3350 }
button{ padding:12px 16px; border-radius:12px; border:0; cursor:pointer }
button[type="submit"]{ background: var(--brand); color: var(--brand-ink); font-weight:800 }
.hp{ position:absolute !important; left:-9999px !important }

/* Fiksna velikost polja za sporočilo */
textarea#f-msg {
    resize: none;        /* onemogoči spreminjanje velikosti */
    height: 180px;       /* fiksna višina – po želji spremeni */
    min-height: 180px;
    max-height: 180px;
}


/* Povratna sporočila (JS) */
.form-msg{
  margin-top:10px; font-size:14px; padding:10px 12px; border-radius: 10px;
  border:1px solid var(--border); background: #121722; color: var(--ink);
}
.form-msg.error{ border-color:#7a2a2a; background:#2a1717 }
.form-msg.success{ border-color:#2a7a47; background:#172a1f }

/* Footer */
footer{ border-top:1px solid var(--border); padding: 28px 0; color: var(--muted) }
.footer-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:center }
.legal{ text-align:right }

/* Gumb “na vrh” */
#toTop{
  position: fixed; right: 16px; bottom: 16px; z-index: 80;
  display:none; padding:10px 12px; border-radius:999px; border:0;
  background: var(--brand); color: var(--brand-ink); font-weight:800; cursor:pointer;
  box-shadow: var(--shadow);
}
#toTop:focus{ outline:3px solid #2d3350 }

/* ========== Odzivnost ========== */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr }
  .about{ grid-template-columns: 1fr }
  .contact-grid{ grid-template-columns: 1fr }
  .cards-3{ grid-template-columns: 1fr }
  .footer-grid{ grid-template-columns: 1fr }
  .legal{ text-align:left }
  .menu{ gap:12px }
}