/* ============================================================
   PLANINARSKI DNEVNIK — custom stylesheet
   Signatura: "oznaka staze" (krug u krugu, po uzoru na HPS oznake
   na stazama) koristi se dosljedno kao bullet / razdjelnik / hover znak.
   Mobile-first: bazni stilovi su za mobitel, širi ekrani dodaju se
   kroz media query-je prema gore.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* ---------- Design tokeni ---------- */
:root {
    /* boje */
    --boja-pozadina: #EDEFEA;      /* magla */
    --boja-pozadina-alt: #E1E5DA;  /* kamena, malo tamnija za kartice */
    --boja-tinta: #1F2A22;         /* tamna borova - glavni tekst */
    --boja-tinta-meka: #4B564C;    /* sekundarni tekst */
    --boja-borovina: #2F5233;      /* primarna zelena */
    --boja-borovina-tamna: #1D3620;/* hover / aktivno */
    --boja-rust: #B8432B;          /* crvena oznaka staze */
    --boja-rust-tamna: #97331F;
    --boja-kamen: #8B9186;         /* rubovi, tihi elementi */
    --boja-zlato: #C0932F;         /* istaknuti podaci (visina, datum) */
    --boja-bijela: #FFFFFF;
    --boja-greska: #B8432B;
    --boja-uspjeh: #2F5233;

    /* tipografija */
    --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    /* razmaci */
    --razmak-xs: 0.5rem;
    --razmak-sm: 0.875rem;
    --razmak-md: 1.5rem;
    --razmak-lg: 2.5rem;
    --razmak-xl: 4rem;

    /* ostalo */
    --radius: 6px;
    --sjena: 0 2px 10px rgba(31, 42, 34, 0.08);
    --sjena-jaka: 0 8px 24px rgba(31, 42, 34, 0.14);
    --sirina-sadrzaja: 1080px;
    --tranzicija: 160ms ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Baza ---------- */
body {
    background: var(--boja-pozadina);
    color: var(--boja-tinta);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

h1, h2, h3 {
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    color: var(--boja-tinta);
    line-height: 1.05;
    text-transform: uppercase;
}
h1 { font-size: clamp(2.4rem, 8vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
h3 { font-size: 1.25rem; letter-spacing: 0.03em; }

p { color: var(--boja-tinta-meka); }
p + p { margin-top: 0.85em; }

.podatak {
    font-family: var(--font-mono);
    font-weight: 600;
}

:focus-visible {
    outline: 3px solid var(--boja-zlato);
    outline-offset: 2px;
}

.container {
    width: 100%;
    max-width: var(--sirina-sadrzaja);
    margin-inline: auto;
    padding-inline: var(--razmak-md);
}

/* ---------- Signatura: oznaka staze ---------- */
.oznaka {
    --oznaka-velicina: 14px;
    display: inline-block;
    width: var(--oznaka-velicina);
    height: var(--oznaka-velicina);
    border-radius: 50%;
    background: var(--boja-pozadina);
    border: 3px solid var(--boja-rust);
    box-shadow: 0 0 0 2px var(--boja-borovina);
    flex-shrink: 0;
}
.oznaka--svijetla {
    background: var(--boja-bijela);
    box-shadow: 0 0 0 2px var(--boja-bijela);
}

.razdjelnik {
    display: flex;
    align-items: center;
    gap: var(--razmak-sm);
    color: var(--boja-kamen);
    margin-block: var(--razmak-lg);
}
.razdjelnik::before,
.razdjelnik::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--boja-kamen);
    opacity: 0.4;
}

.popis-oznake li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: var(--razmak-sm);
}
.popis-oznake li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--boja-pozadina);
    border: 2.5px solid var(--boja-rust);
    box-shadow: 0 0 0 2px var(--boja-borovina);
}

/* ---------- Header / navigacija ---------- */
.zaglavlje {
    background: var(--boja-bijela);
    border-bottom: 1px solid rgba(31, 42, 34, 0.08);
    position: sticky;
    top: 0;
    z-index: 50;
}
.zaglavlje .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--boja-borovina);
}

.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    padding: 0;
}
.hamburger span {
    display: block;
    height: 2px;
    background: var(--boja-tinta);
    border-radius: 2px;
    transition: transform var(--tranzicija), opacity var(--tranzicija);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-glavna {
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--boja-bijela);
    padding: var(--razmak-md);
    transform: translateX(100%);
    transition: transform var(--tranzicija);
    overflow-y: auto;
}
.nav-glavna.otvoren { transform: translateX(0); }
.nav-glavna ul { display: flex; flex-direction: column; gap: var(--razmak-xs); }
.nav-glavna a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 0.5rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(31, 42, 34, 0.06);
}
.nav-glavna a.aktivan { color: var(--boja-borovina); }
.nav-glavna a.aktivan::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--boja-rust); box-shadow: 0 0 0 2px var(--boja-borovina); }

@media (min-width: 768px) {
    .hamburger { display: none; }
    .nav-glavna {
        position: static;
        inset: auto;
        transform: none;
        background: none;
        padding: 0;
        overflow: visible;
    }
    .nav-glavna ul { flex-direction: row; gap: var(--razmak-md); }
    .nav-glavna a { padding: 0.4rem 0; border-bottom: 2px solid transparent; }
    .nav-glavna a.aktivan { border-bottom-color: var(--boja-rust); }
    .nav-glavna a.aktivan::before { display: none; }
}

/* ---------- Gumbi ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius);
    border: 2px solid transparent;
    transition: background var(--tranzicija), color var(--tranzicija), transform var(--tranzicija);
    min-height: 48px;
}
.btn:active { transform: translateY(1px); }

.btn-primarni { background: var(--boja-borovina); color: var(--boja-bijela); }
.btn-primarni:hover { background: var(--boja-borovina-tamna); }

.btn-signpost {
    background: var(--boja-rust);
    color: var(--boja-bijela);
    clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
    padding-right: 2rem;
}
.btn-signpost:hover { background: var(--boja-rust-tamna); }

.btn-obris {
    background: transparent;
    border-color: var(--boja-borovina);
    color: var(--boja-borovina);
}
.btn-obris:hover { background: var(--boja-borovina); color: var(--boja-bijela); }

.btn-opasnost { background: var(--boja-rust); color: var(--boja-bijela); }
.btn-opasnost:hover { background: var(--boja-rust-tamna); }

.btn-blok { width: 100%; }

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    min-height: 38px;
}

.kartica-akcije {
    display: flex;
    gap: 0.5rem;
    margin-top: var(--razmak-sm);
    flex-wrap: wrap;
}
.kartica-akcije form { display: inline; }

/* ---------- Hero (naslovnica za goste) ---------- */
.hero {
    position: relative;
    padding-block: var(--razmak-xl) var(--razmak-lg);
    overflow: hidden;
    background: linear-gradient(180deg, #F4F5F0 0%, var(--boja-pozadina) 100%);
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/konture.svg') center/cover no-repeat;
    opacity: 0.16;
    pointer-events: none;
}
.hero .container { position: relative; }
.hero-oznaka { margin-bottom: var(--razmak-md); }
.hero p.uvod {
    font-size: 1.1rem;
    max-width: 42ch;
    margin-top: var(--razmak-sm);
}
.hero p.uvod-sitno {
    font-size: 0.88rem;
    color: var(--boja-tinta-meka);
    max-width: 42ch;
    margin-top: 0.6rem;
}
.hero p.uvod-sitno a {
    color: var(--boja-borovina);
    font-weight: 600;
    white-space: nowrap;
}
.hero p.uvod-sitno a:hover { color: var(--boja-borovina-tamna); }
.hero-akcije {
    display: flex;
    flex-wrap: wrap;
    gap: var(--razmak-sm);
    margin-top: var(--razmak-lg);
}

.hero-raspored {
    display: flex;
    flex-direction: column;
    gap: var(--razmak-lg);
}
.hero-slika {
    width: 160px;
    margin-inline: auto;
}
.hero-slika img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--sjena-jaka);
    border: 6px solid var(--boja-bijela);
    transform: rotate(-2deg);
}
@media (min-width: 768px) {
    .hero-raspored {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--razmak-xl);
    }
    .hero-tekst { flex: 1 1 auto; min-width: 0; }
    .hero-slika {
        width: 190px;
        flex: 0 0 190px;
        margin-inline: 0;
    }
}

/* ---------- Kartice (feature / vrh / obilazak) ---------- */
.mreza-kartica {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--razmak-md);
    margin-block: var(--razmak-lg);
}
@media (min-width: 640px) {
    .mreza-kartica { grid-template-columns: repeat(3, 1fr); }
}

.kartica {
    background: var(--boja-bijela);
    border-radius: var(--radius);
    padding: var(--razmak-md);
    box-shadow: var(--sjena);
}
.kartica h3 { margin-bottom: 0.4rem; }
.kartica .oznaka { margin-bottom: var(--razmak-sm); }

/* Kartica obilaska/vrha - koristi se i kao "redak" na mobitelu umjesto tablice */
.kartica-obilazak {
    background: var(--boja-bijela);
    border-radius: var(--radius);
    padding: var(--razmak-sm) var(--razmak-md);
    box-shadow: var(--sjena);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: var(--razmak-sm);
}
.kartica-obilazak .redak-gornji {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--razmak-sm);
}
.kartica-obilazak .naziv-vrha { font-weight: 700; }
.kartica-obilazak .visina { color: var(--boja-zlato); font-family: var(--font-mono); font-weight: 600; }
.kartica-obilazak .datum { color: var(--boja-tinta-meka); font-family: var(--font-mono); font-size: 0.9rem; }

/* ---------- Forme ---------- */
.forma-omot {
    max-width: 440px;
    margin-inline: auto;
    background: var(--boja-bijela);
    border-radius: var(--radius);
    padding: var(--razmak-lg) var(--razmak-md);
    box-shadow: var(--sjena);
}
.forma-omot h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); margin-bottom: var(--razmak-xs); }
.forma-omot .podnaslov { margin-bottom: var(--razmak-md); color: var(--boja-tinta-meka); }

.polje { margin-bottom: var(--razmak-md); }
.polje label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    letter-spacing: 0.01em;
}
.polje input,
.polje textarea,
.polje select {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1.5px solid var(--boja-kamen);
    border-radius: var(--radius);
    background: var(--boja-pozadina);
    font-size: 1rem;
    min-height: 48px;
    transition: border-color var(--tranzicija);
}
.polje textarea { min-height: 120px; resize: vertical; }
.polje input:focus,
.polje textarea:focus,
.polje select:focus {
    border-color: var(--boja-borovina);
    outline: none;
}

.polje-lozinka { position: relative; }
.polje-lozinka input { padding-right: 4.75rem; }
.prikazi-lozinku {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--boja-borovina);
    cursor: pointer;
    padding: 0.4rem 0.5rem;
}
.prikazi-lozinku:hover { color: var(--boja-borovina-tamna); text-decoration: underline; }
.polje small { display: block; margin-top: 0.35rem; color: var(--boja-tinta-meka); font-size: 0.82rem; }
.polje.greska input,
.polje.greska textarea { border-color: var(--boja-greska); }
.poruka-greske {
    color: var(--boja-rust-tamna);
    font-weight: 700;
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.forma-podnozje {
    display: flex;
    flex-direction: column;
    gap: var(--razmak-sm);
    margin-top: var(--razmak-md);
}
.forma-podnozje .poveznica { text-align: center; font-size: 0.9rem; color: var(--boja-tinta-meka); }
.forma-podnozje .poveznica a { color: var(--boja-borovina); font-weight: 600; }

/* ---------- Poruke (flash) ---------- */
.poruka {
    padding: var(--razmak-sm) var(--razmak-md);
    border-radius: var(--radius);
    margin-bottom: var(--razmak-md);
    font-weight: 500;
    border-left: 4px solid;
}
.poruka-uspjeh { background: #EAF1EA; border-color: var(--boja-uspjeh); color: var(--boja-borovina-tamna); }
.poruka-greska { background: #F7E9E5; border-color: var(--boja-rust); color: var(--boja-rust-tamna); font-weight: 700; }
.poruka-info { background: #FBF3E3; border-color: var(--boja-zlato); color: #6B4F16; }

/* ---------- Tablica ---------- */
.tablica-omot {
    overflow-x: auto;
    margin-block: var(--razmak-md);
    border-radius: var(--radius);
    box-shadow: var(--sjena);
}
.tablica { width: 100%; border-collapse: collapse; background: var(--boja-bijela); }
.tablica th, .tablica td {
    padding: 0.65rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid rgba(31, 42, 34, 0.08);
    font-size: 0.9rem;
    white-space: nowrap;
}
.tablica th {
    background: var(--boja-pozadina);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--boja-tinta-meka);
}
.tablica td.prelama { white-space: normal; }
.tablica tbody tr:last-child td { border-bottom: none; }
.tablica tbody tr:hover { background: var(--boja-pozadina); }

/* ---------- Profil ---------- */
.profil-zaglavlje {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--razmak-sm);
    margin-bottom: var(--razmak-lg);
}
.profil-slika {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--boja-bijela);
    box-shadow: 0 0 0 3px var(--boja-borovina);
}
@media (min-width: 640px) {
    .profil-zaglavlje { flex-direction: row; text-align: left; }
}

/* ---------- Footer ---------- */
.podnozje {
    background: var(--boja-tinta);
    color: #C9D0C8;
    padding-block: var(--razmak-lg);
    margin-top: var(--razmak-xl);
}
.podnozje .container {
    display: flex;
    flex-direction: column;
    gap: var(--razmak-sm);
    align-items: center;
    text-align: center;
}
.podnozje a { color: var(--boja-bijela); }
.podnozje small { color: #8B9683; font-family: var(--font-mono); font-size: 0.8rem; }

/* ---------- Praznina / prazno stanje ---------- */
.prazno-stanje {
    text-align: center;
    padding: var(--razmak-xl) var(--razmak-md);
    color: var(--boja-tinta-meka);
}
.prazno-stanje .oznaka { margin-bottom: var(--razmak-sm); --oznaka-velicina: 20px; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-lg { margin-top: var(--razmak-lg); }
.mb-lg { margin-bottom: var(--razmak-lg); }
.samo-desktop { display: none; }
@media (min-width: 768px) { .samo-desktop { display: initial; } }