/* ============================================================
   Poroka pa roka — porokaparoka.si
   Statična stran (HTML + CSS + JS, brez WordPressa).

   1. tokeni + pisave   2. osnova   3. glava   4. bloki (domov)
   5. gumbi   6. podstrani + kontaktni obrazec   7. noga   8. odzivnost   9. dostopnost
   ============================================================ */

/* 1. Tokeni + pisave ----------------------------------------- */
:root{
  --rumena:#fff200;          /* gumb »kdo smo?« */
  --rumena-glava:#f5ee31;    /* gumb »Ponudba« v glavi */
  --rumena-hover:#dab200;
  --rumena-link:#ffd936;     /* e-poštne povezave v besedilu */
  --crna:#000;
  --naslov:#1e1e1e;
  --besedilo:rgba(0,0,0,.75);
  --zelena:#536942;          /* Instagram ikona */
  --bela:#fff;
  --siva:#eaeaea;

  --font:'Abhaya Libre',Georgia,'Times New Roman',serif;
  --font-dm:'DM Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  --vsebina:1200px;          /* širina vsebine */
  --glava-h:111px;           /* višina glave */
  --blok-h:800px;            /* višina foto/video blokov */
  --blok-besedilo-h:400px;   /* višina besedilnih blokov */
}

/* Abhaya Libre (samostojno gostovana; latin + latin-ext za č š ž) */
@font-face{font-family:'Abhaya Libre';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/abhaya-libre-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Abhaya Libre';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/abhaya-libre-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Abhaya Libre';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/abhaya-libre-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Abhaya Libre';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/abhaya-libre-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Abhaya Libre';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/abhaya-libre-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Abhaya Libre';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/abhaya-libre-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* DM Sans — samo naslovi na strani Piškotki */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/dm-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/dm-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 2. Osnova --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bela);
  color:var(--besedilo);
  font-family:var(--font);
  font-size:16px;
  line-height:1.7;
  overflow-x:clip;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font);font-weight:400;color:var(--naslov);line-height:1.3;margin:0 0 20px}
p{margin:0 0 30px}
strong{font-weight:700;color:var(--crna)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--rumena);color:var(--crna);padding:8px 14px;text-decoration:none}
.skip:focus{left:8px}

/* 3. Glava ---------------------------------------------------- */
.glava{position:absolute;top:0;left:0;right:0;z-index:99}
.glava__vrstica{
  max-width:var(--vsebina);
  margin:0 auto;
  min-height:var(--glava-h);
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.glava__logo{display:block;padding-right:1em;line-height:0}
.glava__logo img{width:214px;height:auto}
.glava__desno{display:flex;align-items:center;gap:.4em}
/* preklop jezika (EN / SL) — enaka barva kot Instagram, stoji tik pred njim */
.jezik{display:inline-flex;align-items:center;padding:0 .5em;margin:6px 0 6px .4em;color:var(--zelena);font-family:var(--font);font-size:18px;line-height:1;letter-spacing:.08em;text-decoration:none;font-variant:small-caps;font-variant-caps:small-caps;transition:color .2s}   /* zapisano z malimi črkami (en/sl), kapitelke naredi font-variant */
.jezik:hover,.jezik:focus-visible{color:var(--rumena)}
.ig{display:inline-flex;align-items:center;padding:0 .4em;margin:6px 0 6px .4em;color:var(--zelena);line-height:0}
.ig svg{width:18px;height:18px;fill:none;stroke:currentColor}   /* obrisna ikona (Feather »instagram«) */
.ig:hover,.ig:focus-visible{color:var(--rumena)}

/* 4. Bloki (domov) -------------------------------------------- */
/* Vsak blok je celozaslonska »kartica«: video / fotografija / besedilo. */
.blok{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:var(--blok-h);
  overflow:hidden;
}
.blok__ozadje{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:53% 59%;     /* enak izrez kot na WordPress strani */
}
.blok--video{background:#111}
.blok--video .blok__ozadje{object-position:50% 50%}
.blok--nizek{min-height:350px}
.blok--nizek .blok__ozadje{object-position:53% 50%}
.blok--besedilo{min-height:var(--blok-besedilo-h)}
.blok--kontakt{min-height:var(--blok-h)}
.blok__vsebina{
  position:relative;
  width:100%;
  max-width:var(--vsebina);
  margin:0 auto;
  display:flex;
  justify-content:center;
}
/* besedilni okvir (naslov + odstavek), na namizju 50 % širine = 600 px */
.besedilo{width:100%;max-width:50%;color:var(--naslov)}
.besedilo h1,.besedilo h2{font-size:30px;line-height:1.3;margin:0 0 20px;color:inherit}
.besedilo p{font-size:16px;line-height:1.7;margin:0 0 30px;color:inherit}
.besedilo a{color:var(--rumena-link);text-decoration:none}
.besedilo a:hover,.besedilo a:focus-visible{text-decoration:underline}
.blok--kontakt .besedilo h2{color:#050505}
.blok--kontakt .besedilo p{color:var(--crna)}

/* Poročni film – Vimeo/YouTube se naloži šele ob kliku na gumb (glej js/main.js) */
.blok--film{background:#000}
.blok--film .blok__ozadje{object-position:50% 50%}
.film__okvir{position:absolute;inset:0;display:none}
.film__okvir iframe{width:100%;height:100%;border:0;display:block}
.film__gumb{
  position:relative;
  display:inline-flex;align-items:center;gap:12px;
  background:var(--rumena);color:var(--crna);
  border:0;padding:16px 28px;
  font-family:var(--font);font-size:18px;line-height:1;
  cursor:pointer;transition:background .2s;
}
.film__gumb svg{width:20px;height:20px;fill:currentColor}
.film__gumb:hover,.film__gumb:focus-visible{background:var(--rumena-hover)}
.blok--film.is-playing{min-height:0;aspect-ratio:16/9}
.blok--film.is-playing .film__okvir{display:block}
.blok--film.is-playing .film__gumb,.blok--film.is-playing .blok__ozadje{display:none}

/* 5. Gumbi ---------------------------------------------------- */
.gumb-glava{
  display:inline-block;
  background:var(--rumena-glava);
  color:var(--crna);
  font-family:var(--font);
  font-size:18px;
  line-height:1;
  padding:15px 25px;
  text-decoration:none;
  border:0;
  white-space:nowrap;
  transition:background .2s;
}
.gumb-glava:hover,.gumb-glava:focus-visible{background:var(--rumena-hover)}
.gumb{
  display:inline-block;
  background:var(--rumena);
  color:var(--crna) !important;
  font-family:var(--font);
  font-size:14px;
  line-height:1;
  padding:10px 20px;
  text-decoration:none !important;
  border:0;
  transition:background .2s;
}
.gumb:hover,.gumb:focus-visible{background:var(--rumena-hover)}

/* 6. Podstrani ------------------------------------------------ */
/* Ponudba – trije osnovni paketi (Foto / Video / Oboje) kot kartice */
.ponudba{max-width:1140px;margin:0 auto;padding:60px 20px 100px}
.ponudba__glava{max-width:600px;margin:0 0 40px}
.ponudba__glava h1{font-size:30px;margin:0 0 10px;color:var(--crna)}
.ponudba__glava p{margin:0;color:var(--besedilo)}
.ponudba__mreza{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:0 0 70px}
.paket{display:flex;flex-direction:column}
.paket__slika{width:100%;aspect-ratio:4/5;object-fit:cover;margin:0 0 22px;background:#111}   /* slika ali video (kartica Video) */
.paket__oznaka{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--besedilo);margin:0 0 2px}
.paket h2{font-size:30px;margin:0 0 12px;color:var(--crna)}
.paket__seznam{list-style:none;margin:0 0 26px;padding:0;font-size:16px;line-height:1.7;color:var(--crna)}
.paket__seznam li::before{content:"• "}
/* cena (trenutno ni v uporabi – glej README) */
.paket__cena{font-size:26px;line-height:1.2;color:var(--crna);margin:0 0 22px}
.paket__cena-stara{font-size:18px;color:var(--besedilo);text-decoration:line-through;margin-right:6px}
.paket .gumb{align-self:flex-start;margin-top:auto;font-size:16px;padding:12px 22px}   /* gumb vedno na dnu kartice */
.ponudba__opomba{max-width:600px;font-size:16px;line-height:1.7;color:var(--crna)}
.ponudba__opomba p{margin:0 0 1.2em}
.ponudba__opomba a{color:var(--crna);text-decoration:underline}

/* Kdo smo */
.kdo{
  max-width:var(--vsebina);
  min-height:1000px;
  margin:0 auto;
  padding:calc(var(--glava-h) + 20px) 20px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.kdo__slika{width:496px;max-width:100%;height:auto;margin:0 0 40px}
.besedilo--kdo{
  max-width:50%;
  padding:50px 50px 50px 78px;
  font-size:14px;
  line-height:1.77;
  color:var(--besedilo);
}
.besedilo--kdo h1{font-size:30px;margin:0 0 20px;color:var(--crna)}
.besedilo--kdo p{font-size:14px;line-height:1.77;margin:0;color:var(--besedilo)}
.besedilo--kdo a{color:var(--crna);text-decoration:underline}

/* Piškotki (in 404) — navadna besedilna stran */
.stran{
  max-width:var(--vsebina);
  margin:0 auto;
  padding:calc(var(--glava-h) + 30px) 20px 60px;
  font-size:14.6px;
  line-height:1.7;
}
.stran h1,.stran h2{
  font-family:var(--font-dm);
  font-size:25px;
  font-weight:400;
  line-height:1.3;
  color:var(--crna);
  margin:0 0 20px;
}
.stran h2{margin-top:1.5em}
.stran p{margin:0 0 1.75em}
.stran ul{margin:0 0 1.75em;padding-left:1.25em}
.stran li{margin-bottom:.5em}
.stran a{color:var(--crna);text-decoration:underline}
.stran a:hover{color:var(--zelena)}
.tabela{overflow-x:auto;margin:0 0 1.75em}
.stran table{border-collapse:collapse;width:100%;max-width:820px}
.stran td{border:1px solid var(--besedilo);padding:.5em;vertical-align:top}

/* Kontakt – stranski obrazec (<dialog class="kontakt"> na dnu vsake strani; odpira ga js/main.js) */
.kontakt{
  position:fixed;inset:0 0 0 auto;           /* namizje: panel ob desnem robu */
  width:min(480px,100%);height:100%;
  max-width:none;max-height:none;
  margin:0;padding:0;border:0;
  background:var(--bela);color:var(--crna);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .3s ease;
}
.kontakt::backdrop{background:rgba(0,0,0,.55);opacity:0;transition:opacity .3s ease}
.kontakt.is-odprt{transform:none}
.kontakt.is-odprt::backdrop{opacity:1}
html.kontakt-odprt{overflow:hidden}
.kontakt__okno{min-height:100%;padding:64px 40px 40px;outline:0}
.kontakt__zapri{
  position:absolute;top:12px;right:12px;
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;color:var(--crna);cursor:pointer;
  transition:background .2s;
}
.kontakt__zapri svg{width:22px;height:22px;fill:currentColor}
.kontakt__zapri:hover,.kontakt__zapri:focus-visible{background:var(--rumena)}
.kontakt h2{font-size:30px;line-height:1.3;margin:0 0 10px;color:var(--crna)}
.kontakt p{font-size:16px;line-height:1.7;margin:0 0 20px;color:var(--crna)}
.kontakt .kontakt__uvod{margin-bottom:28px}
.kontakt__obrazec{margin:0}
.polje{display:block;margin:0 0 18px;padding:0;border:0;min-width:0}
.polje__ime{display:block;padding:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--besedilo);margin:0 0 6px}
.polje input,.polje textarea{
  width:100%;
  font:inherit;font-size:16px;line-height:1.4;   /* 16 px = brez samodejnega zooma na iPhonu */
  color:var(--crna);background:var(--bela);
  border:1px solid rgba(0,0,0,.3);border-radius:0;
  padding:11px 12px;
  -webkit-appearance:none;appearance:none;
}
.polje input:focus,.polje textarea:focus{border-color:var(--crna)}
.polje input::placeholder,.polje textarea::placeholder{color:rgba(0,0,0,.4)}
.polje textarea{resize:vertical;min-height:110px}
.paketi{display:flex;flex-wrap:wrap;gap:8px}
.paketi__izbira{position:relative;cursor:pointer}
.paketi__izbira input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.paketi__izbira span{
  display:inline-block;padding:10px 18px;
  border:1px solid rgba(0,0,0,.3);
  font-size:16px;line-height:1;
  transition:background .2s,border-color .2s;
}
.paketi__izbira:hover span{border-color:var(--crna)}
.paketi__izbira input:checked+span{background:var(--rumena);border-color:var(--rumena)}
.paketi__izbira input:focus-visible+span{outline:2px solid var(--crna);outline-offset:3px}
.kontakt__poslji{font-size:16px;padding:12px 22px;margin-top:6px;cursor:pointer}
.kontakt__poslji[disabled]{opacity:.6;cursor:default}
.kontakt__past{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.kontakt .kontakt__napaka{font-size:15px;line-height:1.5;color:#b3261e;margin:14px 0 0}
.kontakt .kontakt__napaka a{color:inherit}
.kontakt .kontakt__opomba{font-size:14px;line-height:1.6;color:var(--besedilo);margin:28px 0 0}
.kontakt a{color:var(--crna);text-decoration:underline}
.kontakt a:hover,.kontakt a:focus-visible{color:var(--zelena)}
/* dva gumba v kontaktnem bloku na domači strani */
.besedilo .gumbi{display:flex;flex-wrap:wrap;gap:12px;margin:0}
/* enako veliki kot gumbi v glavi (.gumb-glava) — tudi v medijskih poizvedbah spodaj */
.besedilo .gumbi .gumb{font-size:18px;padding:15px 25px}

/* 7. Noga ----------------------------------------------------- */
.noga{color:var(--crna);font-size:16px;line-height:1.7}
.noga__glavna{
  max-width:var(--vsebina);
  margin:0 auto;
  padding:50px 20px 30px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:center;
  gap:20px;
  text-align:center;
}
.noga__glavna p{margin:0}
.noga__glavna p a{text-decoration:none}                       /* povezava Piškotki ob letnici */
.noga__glavna p a:hover,.noga__glavna p a:focus-visible{text-decoration:underline}
.noga__logo{display:inline-block;line-height:0}
.noga__logo img{width:212px;height:auto;margin:0 auto}

/* 8. Odzivnost ------------------------------------------------ */
@media (max-width:921px){
  :root{--glava-h:84px}
  .glava__logo img{width:clamp(150px,42vw,214px)}
  .gumb-glava,.besedilo .gumbi .gumb{font-size:16px;padding:12px 18px}
  .besedilo{max-width:100%;padding:40px 20px}
  .besedilo--kdo{max-width:100%;padding:40px 20px}
  .ponudba{padding:40px 20px 60px}
  .ponudba__mreza{gap:20px;margin-bottom:50px}
  .kdo{min-height:auto;padding-bottom:20px}
  .noga__glavna{grid-template-columns:1fr;gap:12px}
}
@media (max-width:767px){
  /* na telefonih so foto/video bloki nižji (na WordPressu so bili 800 px) */
  :root{--blok-h:max(420px,70vh);--blok-besedilo-h:auto}
  :root{--blok-h:max(420px,70svh)}
  .blok--kontakt{min-height:max(420px,70vh);min-height:max(420px,70svh)}
  .blok--nizek{min-height:260px}
  .ponudba__mreza{grid-template-columns:1fr;gap:44px}
  .paket__slika{aspect-ratio:3/2}
  .glava__logo{padding-right:0}
}
@media (max-width:767px){
  /* na telefonu se kontaktni obrazec dvigne od spodaj */
  .kontakt{inset:auto 0 0 0;width:100%;height:auto;max-height:92vh;max-height:92dvh;transform:translateY(100%)}
  .kontakt__okno{padding:56px 20px 32px}
}
@media (max-width:560px){
  /* glava z dvema gumboma (Ponudba, Kontakt) + Instagram mora stati v eno vrsto */
  .glava__logo img{width:clamp(118px,37vw,214px)}
  .glava__desno{gap:.3em}
  .gumb-glava,.besedilo .gumbi .gumb{font-size:15px;padding:10px 13px}
  .ig{margin-left:0;padding:0 .25em}
  .jezik{font-size:16px;margin-left:.2em;padding:0 .3em}
}
@media (max-width:380px){
  .glava__vrstica{padding:0 12px}
  .gumb-glava,.besedilo .gumbi .gumb{padding:10px 11px}
}
@media (max-width:340px){
  .glava .ig{display:none}   /* Instagram je tudi v kontaktnem obrazcu in na strani Kdo smo */
  .jezik{padding:0 .2em}
}

/* 9. Dostopnost ----------------------------------------------- */
:focus-visible{outline:2px solid var(--crna);outline-offset:3px}
.glava :focus-visible,.blok :focus-visible{outline:2px solid var(--crna);box-shadow:0 0 0 5px var(--bela)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gumb,.gumb-glava,.ig,.jezik,.film__gumb,.kontakt,.kontakt::backdrop,.kontakt__zapri,.paketi__izbira span{transition:none}
}
@media print{
  .glava,.blok--video,.blok--foto,.kontakt{display:none}
  .blok{min-height:0}
}