/*
  Darko Tevanović – pesniška zbirka

  Ta datoteka definira osnovne stile za minimalistično, temno
  oblikovano spletno stran pesniške zbirke. Glavni poudarek je na
  berljivosti poezije, z zračnimi presledki in tihimi barvami.

  Uporablja prilagodljive CSS spremenljivke za barve in dimenzije,
  kar omogoča enostavne spremembe akcentov in kontrasta po celotni
  strani. Vse strani te zbirke vključujejo ta stil prek povezave
  <link rel="stylesheet" href="style.css"/>
*/
/* Uvoz Google pisav za elegantno in berljivo poezijo */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Playfair+Display:wght@400;600;700&display=swap');

/* Barvne spremenljivke */
:root {
  /* Temno ozadje, nekoliko toplejše od popolne črnine */
  --bg-color: #0c0d12;
  /* Primarna barva besedila – toplo belo, ki ne utrudi oči */
  --text-color: #e9e4d8;
  /* Sekundarna barva za metapodatke in subtilne elemente */
  --muted-color: #b3a998;
  /* Barva za mejne črte in nežne obrobe */
  --line-color: #262730;
  /* Akcentna barva za povezave in hover stanja – nežno zlata */
  --accent-color: #d7c08a;
  /* Maksimalna širina vsebinskih kontejnerjev */
  --max-width: 900px;
}

/* Splošne nastavitve */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
  /* Za osnovno besedilo uporabimo Lora, ki je mehka serifa za berljivost */
  font-family: 'Lora', serif;
  line-height: 1.8;
  letter-spacing: 0.2px;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

a:hover {
  border-bottom-color: var(--accent-color);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 20px;
}

/* Navigacijska vrstica */
header {
  position: sticky;
  top: 0;
  background: rgba(12, 13, 18, 0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-color);
  z-index: 10;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  /* Naslov blagovne znamke v Playfair Display za bolj poetičen občutek */
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  letter-spacing: 0.6px;
  font-weight: 600;
}

.menu {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.menu a {
  color: var(--muted-color);
  padding: 4px 0;
}

.menu a.active {
  color: var(--text-color);
  border-bottom-color: var(--accent-color);
}

/* Hero odsek (naslovna stran) */
.hero {
  padding: 100px 0 80px;
  text-align: left;
}

h1, h2, h3 {
  /* Naslovi so v Playfair Display, ki doda eleganco in kontrast */
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-top: 0;
}

h1 {
  font-size: 48px;
  line-height: 1.2;
  margin-bottom: 24px;
}

h2 {
  font-size: 32px;
  margin-bottom: 16px;
}

.lead {
  color: var(--muted-color);
  font-size: 18px;
  max-width: 60ch;
  margin-bottom: 36px;
}

/* Poudarjen verz/pesem na prvi strani */
.verse {
  margin: 32px 0 40px;
  padding-left: 16px;
  border-left: 2px solid var(--line-color);
  /* Poudarjen verz/pesem uporablja Playfair Display za izraznost */
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  line-height: 1.7;
}

/* Gumb za akcijo */
.btn {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid var(--line-color);
  border-radius: 12px;
  color: var(--text-color);
  font-size: 16px;
  transition: border-color 0.2s ease;
}

.btn:hover {
  border-color: var(--accent-color);
}

/* Sekcije z razdelki */
.section {
  padding: 40px 0;
  border-top: 1px solid var(--line-color);
}

/* Mreža za seznam pesmi in ciklov */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.item {
  padding: 16px 14px;
  border: 1px solid var(--line-color);
  border-radius: 12px;
  transition: border-color 0.2s ease;
}

.item:hover {
  border-color: rgba(215, 192, 138, 0.5);
}

.meta {
  color: var(--muted-color);
  font-size: 13px;
  margin-top: 6px;
}

/* Stran pesmi */
.poem {
  padding: 50px 0 40px;
}

.poem h1 {
  font-size: 40px;
  margin-bottom: 8px;
}

.poem .meta {
  margin: 8px 0 24px;
}

.poem pre {
  margin: 0;
  white-space: pre-wrap;
  /* Besedilo pesmi je v Lora za izboljšano berljivost in skladnost */
  font-family: 'Lora', serif;
  font-size: 21px;
  line-height: 1.8;
  color: var(--text-color);
}

/* Navigacija med pesmimi */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line-color);
  color: var(--muted-color);
}

/* Noga */
footer {
  color: var(--muted-color);
  border-top: 1px solid var(--line-color);
  padding: 20px 0 30px;
  font-size: 13px;
}

/* Večje zaslone */
@media (min-width: 720px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
  h1 {
    font-size: 56px;
  }
  .poem h1 {
    font-size: 48px;
  }
}