/* Fontovi: Inter (tekst) + Ballet (script za imena i "veselimo se...") */
@import url('https://fonts.googleapis.com/css2?family=Waterfall&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&display=swap');

:root{
  --bg:#f6f6f6;
  --paper:#ffffff;
  --text:#2a2a2a;
  --muted:#7d7d7d;
  --accent-2:#3f3f3f;
  --border:#e6e6e6;
  --shadow:0 8px 24px rgba(0,0,0,.15);
}

*{ box-sizing:border-box }
html{ 
  scroll-behavior:smooth;
  background:
    url('assets/background.jpg') center center / cover no-repeat,
    var(--bg);
  min-height: 100%;
}

body{
  margin:0;
  background: transparent;
  color:var(--text);
  font:28px/1.65 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight:300;
  position:relative;
  min-height: 100dvh;
  min-height: 100svh;
}

main{ position:relative; z-index:1 }

.container{ width:min(1100px, 92%); margin-inline:auto }
.container.narrow{ width:min(840px, 92%) }

h1,h2{ 
  margin:0 0 .6rem 0; 
  line-height:1.15; 
  color:#222;
}
h1{
  font-size: clamp(5.2rem, 10vw, 8.2rem);
  font-weight:400;
  font-family:'Waterfall', cursive; /* Waterfall font za imena */
}
h2{
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight:400;
  font-family:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  color:#2a2a2a;
}

p{ margin:.2rem 0 1rem 0 }
.muted{ color:var(--muted) }

/* Hero */
.hero-inner{ 
  width:min(980px, 92%); 
  margin-inline:auto; 
  padding: clamp(40px, 6vw, 80px) 0; 
  text-align:center;
}
.hero .overline{ 
  letter-spacing:.2em; 
  text-transform:uppercase; 
  color:var(--muted); 
  font-weight:600;
  font-size:2rem;
}
.hero .names{ 
  font-size: clamp(5.2rem, 10vw, 8.2rem);
  font-weight:400;
  color:#222;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.hero .names span{ color:var(--accent-2); font-weight:400 }
.hero .date{ 
  font-weight:600; 
  color:#3a3a3a; 
  margin-bottom:1rem;
  font-size: clamp(1.6rem, 3.6vw, 3.6rem);
  letter-spacing:.01em;
}

/* Countdown */
.countdown{ 
  display:flex; 
  gap:12px; 
  justify-content:center; 
  margin:12px 0 24px;
}
.countdown div{ 
  background: transparent;
  border:1px solid var(--border); 
  padding:10px 14px; 
  border-radius:12px; 
  box-shadow:var(--shadow); 
  min-width:70px;
}
.countdown span{ 
  display:block; 
  font-weight:600; 
  font-size:2.2rem;
  color:#242424;
}
.countdown small{
  color:#8a8a8a;
  font-size:1.4rem;
}

/* Timeline */
.timeline{ 
  list-style:none; 
  padding:0; 
  margin:0 auto;
  display:inline-block;
  text-align:left;
}
.timeline li{ 
  display:grid; 
  grid-template-columns:72px 16px 1fr; 
  gap:12px; 
  padding:6px 0;
}
.timeline .time{ font-weight:600; color:#4a4a4a }
.timeline .dot{ 
  width:12px; 
  height:12px; 
  background:#9a9a9a; 
  border-radius:50%; 
  margin-top:8px;
  box-shadow:0 0 0 1px #e5e5e5 inset;
}
.timeline .event{ color:#2b2b2b }

/* Sekcije */
.section{ padding: clamp(24px, 5vw, 28px) 0; text-align:center }

/* Veselimo se... — također Ballet */
#welcome p{
  font-family:'Waterfall', cursive;
  font-size: 3.8rem;
  font-weight: 200;
  color:#2b2b2b;
  margin: 1rem 0 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

#info p{
  margin: 0.2rem 0 0.5rem 0;
  line-height: 1.45;
  color:#2f2f2f;
}

/* Ilustracijska sekcija bez frame-a */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.section.illustration{
  padding: clamp(24px, 5vw, 28px) 0;
  text-align:center;
}
.central-illustration{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0 auto;
  background:transparent;
}

/* Linkovi */
a{ color:#2f2f2f; text-decoration-thickness:.08em }
a:hover{ text-decoration:underline }