/* style.css - full site styling with Nunito, dark contrast, lively accents */

/* Variables */
:root{
  --accent:#22c55e;
  --accent-2:#34d399;
  --accent-dark:#16a34a;
  --bg:#071017;
  --card:#071722;
  --text:#f8fafc;
  --muted:#94a3b8;
  --glass: rgba(255,255,255,0.03);
  --shadow: rgba(2,6,23,0.6);
}

/* Base */
*{box-sizing:border-box;}
[hidden] {
  display: none !important;
}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Nunito',sans-serif;
  background:#071017;
  color:var(--text);
  /* Povečana osnovna velikost pisave za namizje */
  font-size:22px; 
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Global Links (enaka zelena barva kot naslovi) */
.section a:not(.cta):not(.drawer-nav a){
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: color .2s;
}
.section a:not(.cta):not(.drawer-nav a):hover{
  color: var(--accent-2);
  text-decoration: underline;
}

/* Container */
.container{max-width:1100px;margin:0 auto;padding:0 20px;}

/* Header */
.site-header{
  position:fixed;top:0;left:0;right:0;
  background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.4));
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px var(--shadow);
  z-index:100;
  transition:transform .35s,opacity .35s;
}
.site-header.hidden{transform:translateY(-110%);opacity:0;}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;}
.brand{display:flex;align-items:center;gap:14px;}
.logo{width:68px;height:auto;}
.brand-text h1{margin:0;font-size:22px;color:var(--accent);letter-spacing:1px;}
.tag{margin:0;color:var(--muted);font-size:14px;}

/* Controls, Hamburger, Drawer */
.controls{display:flex;align-items:center;gap:12px;}
.lang-select{display:flex;align-items:center;}
.lang-btn{
  padding:10px 16px;border-radius:999px;
  background:#0a2b1f;
  color:#f8fafc;
  border:2px solid #34d399;
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;cursor:pointer;font-size:16px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6), inset 0 -2px 0 rgba(255,255,255,0.02);
  transition:transform .18s ease, background .18s;
}
.lang-btn:hover{transform:translateY(-2px);background:linear-gradient(180deg,#0b2b1f,#062016);}
.hamburger{
  width:48px;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:#041012;
  border:none;border-radius:12px;
  padding:8px;cursor:pointer;
  box-shadow:0 6px 20px rgba(2,6,23,0.6);
}
.hamburger span{
  display:block;width:26px;height:3px;background:#22c55e;border-radius:3px;transition:transform .28s,opacity .28s;
}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.drawer{
  position:fixed;top:0;right:-360px;width:360px;height:100vh;background:#071722;
  padding:36px 24px;
  transition:right .36s;
  z-index:300;
}
.drawer.open{right:0;}
.drawer-inner{display:flex;flex-direction:column;height:100%;}
.drawer-close{align-self:flex-end;background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;padding:6px;}
.drawer-nav{display:flex;flex-direction:column;gap:12px;margin-top:12px;padding-top:8px;}
.drawer-nav a{color:var(--text);text-decoration:none;font-weight:700;padding:12px 10px;border-radius:8px;}
.drawer-nav a:hover{background:rgba(34,197,94,0.06);color:var(--accent-2);transform:translateX(6px);}
.drawer-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.5);
  z-index:250;
}

/* Hero */
.hero{min-height:78vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:64px 20px;
  background:radial-gradient(circle at 30% 30%, #083b34 0%, rgba(4,8,12,0) 40%), linear-gradient(180deg,#082424 0%, #041018 100%);
  box-shadow: inset 0 0 120px rgba(0,0,0,0.2);
}
.hero h2{font-size:40px;margin:0 0 12px;color:#e6fff3;letter-spacing:0.2px;}
.hero p{margin:0 0 18px;color:var(--muted);max-width:820px;}
.cta{display:inline-block;background:var(--accent);color:#041017;padding:12px 28px;border-radius:999px;text-decoration:none;font-weight:800;box-shadow:0 12px 30px rgba(34,197,94,0.08);}

/* Sections */
.section{padding:72px 0;position:relative;overflow:hidden;}
.section.light{background:#071a1f;}
.section h3{text-align:center;color:var(--accent);margin-bottom:18px;font-size:28px;}
.section p{
  /* Povečan opisni tekst za namizje */
  max-width:900px;margin:0 auto 18px;text-align:center;
  color:var(--muted);
  font-size:18px; 
}

/* Grid */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.card,.product-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;box-shadow:0 12px 30px rgba(2,6,23,0.6);text-align:center;border-top:4px solid rgba(34,197,94,0.16);}
.card img,.product-card img{max-width:100%;height:180px;object-fit:cover;border-radius:10px;cursor:pointer;}

/* Products */
.product-card h4{margin:12px 0 8px;color:var(--accent-dark);font-size:18px;}
.product-card p{
  /* Povečana velikost opisa produkta za namizje */
  margin:0;color:var(--muted);
  font-size:17px;
}
.price{margin-top:10px;font-weight:800;color:var(--accent-2);font-size:16px;}

/* New products mystic */
.mystic{background:linear-gradient(180deg,#031218 0%,#052922 100%);color:#c8ffe7;position:relative;overflow:hidden;}
.printer-gallery{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;margin:20px 0;z-index:10;position:relative;}
.printer-item svg{filter:drop-shadow(0 6px 18px rgba(34,197,94,0.08));opacity:0.95;transition:transform .6s ease;}
.printer-item:nth-child(1) svg{transform-origin:center;animation:float 5s ease-in-out infinite;}
.printer-item:nth-child(2) svg{transform-origin:center;animation:float 4.4s ease-in-out infinite;animation-delay:.3s;}
.printer-item:nth-child(3) svg{transform-origin:center;animation:float 4.8s ease-in-out infinite;animation-delay:.6s;}
@keyframes float{0%{transform:translateY(0);}100%{transform:translateY(-10px);}}
.coming-soon{font-size:28px;font-weight:900;letter-spacing:3px;color:#e6fff3;text-shadow:0 0 12px rgba(34,197,94,0.18);animation:glow 3s linear infinite alternate;z-index:10;position:relative;}
@keyframes glow{from{text-shadow:0 0 8px rgba(34,197,94,0.12);}to{text-shadow:0 0 30px rgba(34,197,94,0.28);}}

/* Silhuete v ozadju v Mystic sekciji */
.bg-silhouette{
  position: absolute;
  width: 150px;
  height: 150px;
  color: var(--accent); 
  opacity: 0.03; 
  z-index: 1; 
}
.bg-silhouette.s-1{top: 10%; left: 5%; transform: rotate(10deg);}
.bg-silhouette.s-2{bottom: 15%; right: 10%; transform: rotate(180deg);}
.bg-silhouette.s-3{top: 60%; left: 80%; transform: rotate(-45deg);}


/* Gallery slideshow */
.slideshow-gallery .slide{display:none;}
.slideshow-gallery img{width:100%;height:220px;object-fit:cover;border-radius:10px;cursor:pointer;}

/* Overlay enlarged image (za povečavo slik) */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.86);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:400;
  display:none; 
}
.overlay.active{
  display:flex;
}
.overlay img.enlarged{
  max-width:92%;max-height:92%;border-radius:12px;
}

/* Footer */
.site-footer{padding:28px 0;text-align:center;background:#04121a;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02);}

/* Animations */
.fade-in{animation:fadeIn .9s ease both;}
@keyframes fadeIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

/* Responsive (Mobilne nastavitve) */
@media (max-width:900px){
  .header-inner{padding:12px;}
  .lang-btn{padding:8px 12px;font-size:14px;}
  .hamburger{width:44px;height:40px;}
  .drawer{width:92vw;right:-100vw;}
  .bg-silhouette{width:100px;height:100px;}
}
@media (max-width:520px){
  .hero h2{font-size:28px;}
  /* Osnovni tekst na mobilni napravi */
  body{font-size:18px;} 
  /* Opisni tekst na mobilni napravi */
  .section p{font-size:15px;}
  /* Opis produkta na mobilni napravi */
  .product-card p{font-size:14px;}
}

/* Force gallery to 3 columns */
.slideshow-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Designs hover and click enlarge effect */
.designs {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.design-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(2,6,23,0.6);
  text-align: center;
  padding: 16px;
  width: 30%;
  min-width: 280px;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease, z-index 0.4s ease;
  position: relative;
  z-index: 1;
}

.design-card:hover {
  transform: scale(1.1);
  z-index: 5;
  box-shadow: 0 18px 40px rgba(34,197,94,0.25);
}

.design-card.active {
  transform: scale(1.15);
  z-index: 10;
  box-shadow: 0 24px 60px rgba(34,197,94,0.35);
}

.design-gallery {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.design-gallery img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

/* Smooth transition for hover and active state */
.design-card,
.design-card:hover,
.design-card.active {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}