/*
Theme Name: Ljubavne slike
Theme URI: https://ljubavne.com
Author: Aurora (för Kaptenen)
Description: Toplina i mörker — draken i entrén, Iris som utgivare, galleriet under /slike.
             Färgerna är mätta ur Kaptenens valda bilder, inte gissade: 2 = entrén,
             4 = sektionernas band (drake + hjärta + filigran).
Version: 1.70
Requires at least: 6.0
Tested up to: 7.1
License: GPL-2.0-or-later
Text Domain: ljubavne
*/

/* ── Färgerna: mätta ur bilderna, inte gissade ─────────────────────────────
   Kaptenen 21/9: "ja och färjer för siten" — sektionernas band är bild 4, och
   dess botten är jämn (mätt i hörnen: rgb(28..31, 32..35, 35..38), alltså en
   osynlig variation på tre steg). Därför kan bandet läggas ovanpå en yta med
   exakt samma ton och smälta in helt — ingen kant, inget "klistrat på".

   Mätt ur bild 4:   #B5492A  elden/lågorna (mest mättad färg)
                     #D39B67  guldfiligranet
                     #DEBD8C  filigranets ljusaste del
                     #1D2023  botten (hörnen)
   Det som INTE kommer från bilden: --rose, som färgar namnet Iris.            */
:root{
  --bakgrund:#1D2023;        /* bild 4:s botten — sajtens bakgrund */
  --bakgrund-alt:#24272A;    /* panel, en aning ljusare än botten */
  --panel:#27292D;
  --kant:rgba(211,155,103,.18);
  --glod:#B5492A;            /* elden — länkar, knappar */
  --glod-ljus:#E0956B;       /* hover, varm glans */
  --guld:#D39B67;            /* filigranet — emblem, avdelare, detaljer */
  --guld-ljus:#DEBD8C;
  --rose:#C06F8E;            /* mjuk accent (Iris-namnet) — inte från bilden */
  --text:#F4EDE9;            /* varm vit */
  --text-dov:#C9AFA6;        /* sekundär */
  --radie:16px;
  --max:1100px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Foten ska ligga vid botten även när sidan är nästan tom (Kaptenen 21/9).
   Utan detta hamnar den mitt på skärmen på /slike/ när inget innehåll finns än. */
body{min-height:100vh;display:flex;flex-direction:column}
/* Foten trycks till botten med automarginal — det fungerar även när innehållet
   ligger i en egen omslutning (entrén), inte bara i .wrap. Uppmätt 21/9: entrén
   hade 194 px död yta under foten med den första lösningen. */
.sida-fot{margin-top:auto}
body{
  margin:0;
  background:var(--bakgrund);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:600;
  line-height:1.15;
  letter-spacing:.01em;
}
a{color:var(--glod-ljus);text-decoration:none}
a:hover{color:var(--guld-ljus)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* ── Huvud ─────────────────────────────────────────────────────────────── */
.plats{
  position:sticky;top:0;z-index:20;
  background:rgba(29,32,35,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--kant);
}
.plats .wrap{display:flex;align-items:center;gap:14px;min-height:62px}
.plats .emblem{width:34px;height:34px;border-radius:50%;flex:0 0 auto}
.plats .namn{font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;letter-spacing:.02em}
.plats nav{margin-left:auto;display:flex;gap:18px;font-size:15px}
.plats nav a{color:var(--text-dov)}
.plats nav a:hover{color:var(--guld)}

/* ── Entrén (ljubavne.com/) ────────────────────────────────────────────── */
.entre{
  position:relative;
  min-height:calc(100vh - 62px);
  display:flex;align-items:center;
  background-image:url("assets/entre-2.webp");
  background-size:cover;
  background-position:center right;
  background-color:var(--bakgrund);
}
.entre::after{ /* mörk toning så texten alltid bär */
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(29,32,35,.94) 0%,rgba(29,32,35,.78) 42%,rgba(29,32,35,.15) 100%);
}
.entre .innehall{position:relative;z-index:2;padding:64px 0;max-width:620px}
.entre .over{
  font-size:13px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--guld);margin:0 0 18px;
}
.entre h1{font-size:clamp(42px,9vw,76px);margin:0 0 10px;color:var(--text)}
.entre .utgivare{
  font-size:15px;color:var(--text-dov);margin:0 0 26px;
}
.entre .utgivare b{color:var(--rose);font-weight:600}
.entre p.ingang{font-size:19px;color:var(--text-dov);margin:0 0 34px}

/* Tre dörrar */
.dorrar{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dorr{
  display:block;padding:20px 18px;
  background:rgba(36,39,42,.62);
  border:1px solid var(--kant);border-radius:var(--radie);
  color:var(--text);transition:border-color .2s,transform .2s,background .2s;
}
.dorr:hover{border-color:var(--glod);transform:translateY(-2px);background:rgba(48,40,42,.85);color:var(--text)}
.dorr .t{font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;color:var(--guld-ljus)}

/* Čestitke — den stora dörren överst (Kaptenen 24/9).
   Rutnätet är tre kolumner; .stor täcker hela bredden och står först. */
.dorr.stor{
  grid-column:1/-1;
  padding:28px 24px;
  background:rgba(44,40,42,.78);
  border-color:rgba(222,189,140,.42);
  text-align:center;
}
.dorr.stor .t{font-size:clamp(30px,5vw,42px)}

@media(max-width:720px){
  /* Kaptenens öga, 21/9: draken STOR överst, texten under.
     Bilden 1901×672 vid 300 % bredd blir 106 vw hög (~413 px på en 390 px telefon).
     Tre fixar efter mobilskärmbilden 18:55:
       1. bildens nederkant tonar ut i bakgrunden i stället för att sluta i en hård linje
       2. texten närmare bilden och mindre luft mellan raderna — dörrarna ska synas
       3. sidhuvudets meny får egen rad i stället för att klämmas mot högerkanten */
  .entre{
    min-height:auto;
    align-items:flex-end;
    background-image:
      linear-gradient(180deg,rgba(29,32,35,0) 62%,rgba(29,32,35,.28) 82%,rgba(29,32,35,.78) 96%,var(--bakgrund) 100%),
      url("assets/entre-2.webp");
    background-size:100% 93vw,300% auto;
    /* Bilden (1901×672, 2/10): 0–17 % svart remsa, 17–58 % tomt,
       60–77 % hjärtat och elden, 78–100 % DRAKEN. Remsan lades till vänster
       med 20 % bredd så att draken inte kläms på mobilen; procenttalen är
       räknade om för den nya bredden.
       Vid 300 % ryms bara en tredjedel — därför 100 % (högerkanten), så draken syns.
       background-position 0 % = vänsterkanten (tomt), 50 % = mitten (tomt), 100 % = draken.
       Ut-toningen (första lagret) börjar först vid 62 % så att motivet inte äts upp —
       mätt 21/9: renderingen var 9,7 % ljus med den hårda toningen, motivet självt 21 %. */
    background-position:center top,100% top;
    background-repeat:no-repeat,no-repeat;
  }
  .entre::after{background:linear-gradient(180deg,rgba(29,32,35,0) 0%,rgba(29,32,35,0) 46%,rgba(29,32,35,.55) 72%,rgba(29,32,35,.92) 100%)}
  .entre .innehall{padding:calc(93vw - 22px) 0 30px}
  .entre h1{font-size:clamp(36px,11vw,54px)}
  .entre .utgivare{margin-bottom:16px}
  .entre p.ingang{font-size:17px;margin-bottom:20px}
  .dorrar{grid-template-columns:1fr;gap:10px}
  /* Sidhuvudet: varumärket mindre och menyn på samma rad — annars blev det två rader
     som åt 89 px av skärmen. Radbrytning finns kvar som skydd på mycket smala skärmar. */
  .plats .wrap{flex-wrap:wrap;min-height:auto;padding:10px 0;gap:10px}
  .plats .namn{font-size:17px}
  .plats nav{margin-left:auto;gap:12px;font-size:13.5px}
}

/* ── Sektionernas topp (emblemet) ──────────────────────────────────────── */
.sektion-topp{
  padding:46px 0 26px;border-bottom:1px solid var(--kant);
  display:flex;align-items:flex-end;gap:18px;
}
.sektion-topp .emblem{width:88px;height:88px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 40px rgba(181,73,42,.34);border:2px solid var(--bakgrund)}

/* ── Sektionssidornas breda huvud (Kaptenen 21/9) ──────────────────────── */
/* Bilden är Kaptenens val 4: draken som ringar hjärtat med guldfiligran åt
   båda sidor, centrerad i ett brett format (1584×672). Därför "contain" och
   inte "cover" — hela motivet ska med, ingen del av filigranet ska skäras bort.
   Ytan runt omkring fylls av --bakgrund, som är mätt ur just den här bildens
   botten, så att bandet inte har någon synlig kant. Det var därför Kaptenen
   ville ha bildens färger på sajten. */
.sektion-band{
  width:100vw;margin-left:calc(50% - 50vw);margin-bottom:-44px;
  height:clamp(170px,26vw,300px);
  background-color:var(--bakgrund);
  background-image:url("assets/sektion-band-5.webp");
  background-size:contain;background-position:center;background-repeat:no-repeat;
}
.sektion-band::after{content:"";display:block;height:100%;
  background:linear-gradient(180deg,rgba(29,32,35,0) 45%,rgba(29,32,35,.88) 100%)}

@media(max-width:720px){
  .sektion-band{height:34vw;margin-bottom:-30px}
  .sektion-topp{gap:12px}
  .sektion-topp .emblem{width:64px;height:64px}
}
.sektion-topp h1{font-size:clamp(32px,6vw,50px);margin:0}
/* Betamärket i sidhuvudet (Kaptenen 23/9: "I header ska vi ha beta verzija eller så").
   Litet och ärligt — det ska synas, inte skrika. Färgen är sidans egen varma accent. */
.sektion-topp h1 .beta{
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;
  margin-left:10px;padding:3px 11px;border-radius:999px;
  border:1px solid rgba(181,73,42,.5);color:#b5492a;
  font-family:Georgia,serif;font-weight:400;white-space:nowrap;
}
.sektion-topp .under{color:var(--text-dov);margin:4px 0 0;font-size:16px}

/* ── Galleriet ─────────────────────────────────────────────────────────── */
.galleri{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:34px 0 40px}
@media (max-width:1100px){.galleri{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.galleri{grid-template-columns:repeat(2,1fr);gap:12px}}
.sidor{padding:0 0 74px;text-align:center;color:var(--text-dov)}
.sidor .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin:0 5px;border:1px solid var(--kant);border-radius:50%;
  color:var(--text);text-decoration:none;font-size:20px;line-height:1}
.sidor .page-numbers.current{background:var(--glod);border-color:var(--glod);color:#1a1208;
  font-weight:600;box-shadow:0 0 0 4px rgba(211,155,103,.20)}
.sidor .page-numbers:hover{border-color:var(--glod);color:var(--glod)}
.sidor .page-numbers.first,.sidor .page-numbers.last,.sidor .prev.page-numbers,
.sidor .next.page-numbers{font-size:22px;opacity:.9}
@media (max-width:680px){.sidor .page-numbers{width:40px;height:40px;margin:0 3px;font-size:18px}
  .sidor .page-numbers.first,.sidor .page-numbers.last,.sidor .prev.page-numbers,
  .sidor .next.page-numbers{font-size:19px}}
.kort{
  display:block;background:var(--bakgrund-alt);
  border:1px solid var(--kant);border-radius:var(--radie);overflow:hidden;
  color:var(--text);transition:border-color .2s,transform .2s;
}
.kort:hover{border-color:var(--glod);transform:translateY(-3px);color:var(--text)}
.kort img{aspect-ratio:4/5;object-fit:cover;width:100%}
.kort .text{padding:14px 16px}
.kort .text h2{font-size:21px;margin:0 0 4px;color:var(--guld-ljus)}
.kort .text p{margin:0;font-size:14px;color:var(--text-dov)}
@media(max-width:900px){.galleri{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:520px){.galleri{grid-template-columns:repeat(2,1fr);gap:10px}.kort .text{padding:10px 12px}.kort .text h2{font-size:17px}}

/* ── Bildkortet i galleriet (steg 2, 21/9) ─────────────────────────────────
   Kortet är samma .kort som sektionerna använde, men innehållet är nu en egen
   innehållstyp med kategori, nyckelord och högtid. Kategorierna är egna länkar
   UTANFÖR bildlänken — en länk inuti en länk är ogiltig HTML.                */
.kort .text .praznik{margin:6px 0 0;font-size:13px;color:var(--guld)}

/* Kategorimärkena. Sedan 23/9 finns de bara på en enskild bilds sida —
   rutnätet visar bilden och titeln, inget mer. */
.kat{display:flex;flex-wrap:wrap;gap:7px;margin:0;font-size:13px;line-height:1}
.kat a{
  padding:5px 11px;border-radius:999px;
  background:rgba(211,155,103,.12);border:1px solid var(--kant);
  color:var(--guld-ljus);transition:background .2s,color .2s,border-color .2s;
}
.kat a:hover{background:rgba(181,73,42,.3);color:var(--text)}
/* Nyckelorden är tystare än kategorin: kategorin är vad bilden ÄR,
   nyckelorden är vad den HANDLAR om. Två olika sorters upplysning. */
.kat a.tema{background:none;border-color:transparent;color:var(--text-dov)}
.kat a.tema:hover{color:var(--guld-ljus);border-color:transparent}
.kat.oppen{margin:22px 0 0;font-size:14px}

/* Högtiden på en enskild bilds sida: namnet i guld, traditionen som ett tyst märke. */
.praznik-rad{margin:0 0 16px;font-size:16px;color:var(--guld)}
.praznik-rad .trad{
  display:inline-block;margin-left:8px;padding:3px 10px;border-radius:999px;
  background:rgba(211,155,103,.12);border:1px solid var(--kant);
  font-size:12px;color:var(--text-dov);
}

/* ── Nedladdning (Kaptenen 21/9: "kan vi ha en ladda ner funktion?") ──────
   Ingen serverväg: bilden ligger på samma domän som sidan, så webbläsarens
   eget download-attribut räcker. Filnamnet följer med i länken och blir
   "Ljubavne-ruza.png" i stället för "ruza-1024x1280.png".                   */
/* Den stora knappen på bildsidan — samma form som .lat, men i guld och utan
   fyllning, så att "Poslušaj pjesmu" fortsätter vara den starkare av de två. */
a.preuzmi{
  display:inline-flex;align-items:center;gap:9px;
  margin:26px 14px 0 0;padding:13px 20px;border-radius:999px;
  border:1px solid var(--guld);color:var(--guld-ljus);
  font-size:15px;font-weight:600;
  transition:background .2s,color .2s,border-color .2s;
}
a.preuzmi:hover{background:rgba(211,155,103,.16);color:var(--text);border-color:var(--guld-ljus)}
/* Den tysta .spara-ikonen i kortets rad togs bort 23/9 — nedladdningen bor bara
   på bildsidan, som den stora knappen a.preuzmi ovan. */
@media(max-width:520px){a.preuzmi{margin:20px 10px 0 0;padding:11px 16px;font-size:14px}}

/* ── Hjärtan: rösta på en bild (Kaptenen 22/9: "stjärnor dvs hjärtan") ────
   Fem hjärtan i ett vanligt formulär — ingen JavaScript. Medelvärdet står
   före, så den som kommer in ser vad andra tyckt innan hon röstar.          */
.glas{margin:22px 0 0;padding:14px 17px;border:1px solid var(--kant);border-radius:var(--radie);background:var(--bakgrund-alt)}
/* EN hjärtrad i båda lägena (Kaptenen 22/9: "Blir två rader när man röstat").
   Före röst: hjärtana är knappar. Efter röst: samma hjärtan, fyllda i guld.
   Siffran står bredvid, inte på en egen rad.                              */
.glas-facit,.glas-forma{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0}
.glas-medel{font-size:20px;font-weight:700;color:var(--guld);font-variant-numeric:tabular-nums;line-height:1}
/* Kaptenen 22/9 kväll: tomt hjärta i textens färg, fyllt i guld — "lite
   upplyft". Guldhjärtat lyfts en pixel och får en svag glöd, så att det reser
   sig ur raden i stället för att bara byta färg.                          */
.glas-visa{display:inline-flex;color:var(--text-dov)}
.glas-visa.fylld{color:var(--guld);transform:translateY(-1px);
  filter:drop-shadow(0 0 5px rgba(211,155,103,.45))}
.glas-text{font-size:13px;color:var(--text-dov)}
.glas-fraga{font-size:14px;color:var(--text-dov)}
.glas-knappar{display:inline-flex;align-items:center;gap:3px}
.srce-knapp{background:none;border:0;padding:3px;cursor:pointer;color:var(--text-dov);line-height:0;border-radius:9px;transition:color .18s,transform .18s}
.srce-knapp:hover,.srce-knapp:focus-visible{color:var(--guld);transform:translateY(-1px) scale(1.12);outline:none}
.srce-knapp:hover svg path,.srce-knapp:focus-visible svg path{fill:currentColor;stroke:none}
.srce-knapp:hover svg,.srce-knapp:focus-visible svg{filter:drop-shadow(0 0 5px rgba(211,155,103,.45))}
.glas-tak{margin:8px 0 0;font-size:13px;color:var(--guld-ljus)}

/* ── Sökningen (Kaptenen 22/9: "vi saknar sök på slike") ───────────────────
   Husets mönster: ett vanligt GET-formulär, ingen JavaScript. Formuläret står
   öppet i menyn — se avsnittet nedan. Här står bara resultatsidans egna rader. */
.sok-ingress{font-size:14px;color:var(--text-dov);margin:6px 0 14px}
.sok-kategorije{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.sok-kategorije a{padding:7px 13px;border:1px solid var(--kant);border-radius:999px;
  background:var(--bakgrund-alt);color:var(--text);text-decoration:none;font-size:14px}
.sok-kategorije a:hover{border-color:var(--guld);color:var(--guld-ljus);text-decoration:none}

/* ── Menyn: sökfältet öppet, och husets hopfällning i mobilen (Kaptenen 22/9) ──
   Kaptenen: "sökrutan ska vara öppe i menyn som på dvadima" och "meny ska falla
   ihop på mobilen som på dvadima". Husets egen kommentar i dvadimas style.css
   (17 september): "Kapten: 'menyn blir två rader i mobilen, hur löser vi det.'
   Skrivbordet är oförändrat. I mobilen: ☰ + sökrutan på samma rad, punkterna
   fälls ut." Samma sak här — koden är husets, klasserna är våra.              */
.plats nav{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.meny-knapp{display:none}
.meny-innhold{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.plats nav .sok{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.plats nav .sok input[type=search]{background:rgba(255,255,255,.06);border:1px solid var(--kant);
  border-radius:999px;color:var(--text);font:inherit;font-size:.9rem;padding:9px 16px;min-width:12rem}
.plats nav .sok input[type=search]::placeholder{color:var(--text-dov)}
.plats nav .sok input[type=search]:focus{outline:none;border-color:var(--guld)}
.plats nav .sok button{background:var(--glod);border:0;border-radius:999px;color:#fff;font:inherit;
  font-size:.9rem;font-weight:600;padding:9px 17px;cursor:pointer;transition:background .18s}
.plats nav .sok button:hover{background:var(--glod-ljus)}

@media(max-width:720px){
  /* Kaptenen 22/9: "Meni är över, sökrutan för stor". Raden får aldrig brista —
     husets mobilregel är nowrap, och sökrutan får en fast, liten bredd i stället
     för att växa tills raden tar slut. ☰ + sökfältet delar alltid rad.        */
  .plats nav{flex-wrap:nowrap}
  .meny-knapp{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;font:inherit;font-size:13.5px;
    letter-spacing:.06em;color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--kant);
    border-radius:10px;padding:8px 12px;cursor:pointer}
  .meny-knapp .meny-ikon{font-size:1rem;line-height:1}
  .meny-knapp[aria-expanded=true]{border-color:var(--glod);color:var(--guld)}
  .meny-innhold{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;padding:4px 0 12px;background:rgba(29,32,35,.97);
    border-bottom:1px solid var(--kant);z-index:30}
  .meny-innhold.meny-apen{display:flex}
  .meny-innhold a{display:block;padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.07);font-size:15px}
  .plats nav .sok{order:0;width:auto;flex:0 1 auto;margin:0;justify-content:flex-end;gap:6px;min-width:0}
  .plats nav .sok input[type=search]{min-width:0;flex:0 1 8rem;max-width:8rem;padding:7px 11px;font-size:.82rem}
  .plats nav .sok button{padding:7px 12px;font-size:.82rem;flex:0 0 auto}
}
@media(max-width:520px){.glas{padding:13px 14px;margin-top:18px}.glas-medel{font-size:18px}.glas-fraga{font-size:13px}}

/* ── Vägen vidare mellan bilderna ─────────────────────────────────────────
   Samma form som på dvadima (Kaptenen 22/9: "Navigation framåt bakåt för
   bilder som på dvadima"): föregående · alla · nästa, etiketten i små
   bokstäver och titeln i guld.                                           */
.slika-nav{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 8px}
.slika-nav-lank{flex:1 1 7rem;display:flex;flex-direction:column;gap:3px;
  padding:13px 16px;border:1px solid var(--kant);border-radius:var(--radie);
  background:var(--bakgrund-alt);color:var(--text);text-decoration:none;
  transition:border-color .18s,background .18s}
.slika-nav-lank span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dov)}
.slika-nav-lank strong{font-weight:600;color:var(--guld-ljus)}
.slika-nav-lank:hover{border-color:var(--guld);background:rgba(211,155,103,.07);text-decoration:none}
.slika-nav-lank.alla{flex:0 0 auto;text-align:center}
/* Kaptenen 22/9: "sljedeca ska vara överst eller till höger. Det blir konstigt när
   man ändrar bredden, du hadde en lösning för dvadima." Rätt — lösningen är hans
   egen från 20/9 och står i dvadimas style.css. På bred skärm ligger
   Föregående | Sve slike | Sljedeća i en rad. På smalare skärm vänds ordningen:
   Nästa ÖVERST, galleriet i mitten, Föregående nederst.
   Mätt 22/9: bildsidans textspalt är 434 px vid 1280 px fönster (raden får plats)
   men bara 342 px vid 900 px — då gick "Sljedeća" ner på egen rad och såg ut som
   ett misstag. Därför vänds ordningen redan vid 1000 px, inte vid 700 px som på
   dvadima (där hela låtsidan är en spalt och aldrig blir så smal).            */
@media(max-width:1000px){
  .slika-nav{flex-direction:column;gap:9px;margin:24px 0 6px}
  .slika-nav-lank{flex:0 0 auto;width:100%;padding:12px 15px}
  .slika-nav-lank.nasta{order:1}
  .slika-nav-lank.alla{order:2}
  .slika-nav-lank.forra{order:3}
}

/* ── Kommentarer (Kaptenen 22/9: "kommentarfält på varje bild sida") ──────
   Samma upplägg som på dvadima: listan som kort, formuläret i husets färger,
   och raden om att allt granskas synlig.                                   */
.komentari{margin-top:34px;border-top:1px solid var(--kant);padding-top:22px}
.komentari-naslov{font-size:1.05rem;margin:0 0 14px;color:var(--guld-ljus)}
.komentari-lista{list-style:none;padding:0;margin:0 0 24px}
.komentari-lista li{border:1px solid var(--kant);border-radius:12px;padding:14px 16px;
  margin-bottom:10px;background:var(--bakgrund-alt)}
.komentari-lista li li{margin-top:10px;background:transparent}
.komentari .comment-meta{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dov);margin-bottom:7px}
.komentari .comment-author img{border-radius:50%;margin-right:8px;vertical-align:middle}
.komentari .comment-content{color:var(--text);line-height:1.7}
.komentari .comment-content p:first-child{margin-top:0}
.komentari .comment-respond h3{font-size:1.05rem;margin:0 0 14px;color:var(--guld-ljus)}
.komentar-polje{display:flex;flex-direction:column;gap:5px;margin:0 0 12px}
.komentar-polje label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dov)}
.komentar-polje input,.komentar-polje textarea{background:var(--bakgrund-alt);border:1px solid var(--kant);
  border-radius:10px;padding:11px 13px;color:var(--text);font:inherit;width:100%;box-sizing:border-box}
.komentar-polje input:focus,.komentar-polje textarea:focus{outline:none;border-color:var(--guld)}
/* Cookie-raden: WordPress skriver den engelsk och som en egen rad. Kaptenen 22/9
   ville ha den på bosniska — här får den också sin form: kryssrutan först,
   texten i läsbar stil (inte versaler som fältetiketterna).                  */
.komentar-pristanak label{display:flex;align-items:flex-start;gap:9px;
  font-size:13px;line-height:1.5;letter-spacing:normal;text-transform:none;color:var(--text-dov)}
.komentar-pristanak input{margin:2px 0 0;flex:0 0 auto;accent-color:var(--guld)}
.komentar-pristanak input:focus{outline:2px solid var(--guld);outline-offset:2px}
.komentari-napomena{font-size:13px;color:var(--text-dov);margin:0 0 16px}
.komentari .posalji,.komentari .submit{background:var(--glod);color:#fff;border:0;border-radius:10px;
  padding:11px 22px;font:inherit;font-weight:600;cursor:pointer;transition:background .18s}
.komentari .posalji:hover,.komentari .submit:hover{background:var(--glod-ljus)}
.comment-awaiting-moderation{font-size:13px;color:var(--guld-ljus);font-style:italic;margin:6px 0 0}
.komentari .comment-reply-link{color:var(--guld-ljus)}
@media(max-width:520px){.komentari{margin-top:26px;padding-top:18px}}

/* Raden under rutnätet: vägen tillbaka och tomrummet när inget finns. */
.tillbaka{margin:4px 0 60px;font-size:15px}
.tomt{padding:56px 0 96px;color:var(--text-dov);font-size:18px}

/* ── Panelen och kalendern (steg 3, 21/9) ─────────────────────────────────
   Kaptenen: "Kalender ja … starta med kalendern". Panelen står till höger om
   rutnätet på bred skärm och fälls ut ovanför rutnätet på mobil — med
   <details>, alltså utan ett enda JavaScript. Dotsen markerar de dagar som
   faktiskt har en bild; högtiderna är framräknade, aldrig hårdkodade.        */
.s-panel{display:grid;grid-template-columns:1fr 302px;gap:30px;align-items:start}
.panel{border:1px solid var(--kant);border-radius:var(--radie);background:var(--bakgrund-alt);padding:15px 17px 17px}
.panel>summary{display:none}
.panel-indre>p:first-child{margin-top:0}
/* Rutnätet sju dagar i samma bredd. table-layout:fixed hindrar veckodagarna från
   att sätta tabellens minsta bredd — utan det låste kalendern hela sidan på 396 px
   och mobilen gick att dra i sidled (mätt 22/9: 6 px vid 390, 36 px vid 360, 76 px
   vid 320). Kaptenens kalender, bara krympbar — inget annat ändrat. */
@media(max-width:1000px){
  .s-panel{grid-template-columns:1fr;gap:20px}
  /* Bilderna först, kalendern under (Kaptenen 24/9: "på mobilen ska bilder komma
     först och kalender under"). Ordningen i koden är rutnätet först, så det räcker
     att inte längre lyfta panelen — på bred skärm styr rutnätets kolumner. */
  .panel>summary{display:block;cursor:pointer;font-weight:600;color:var(--guld);margin:-2px 0 2px;list-style-position:inside}
  .panel[open]>summary{margin-bottom:12px}
}

/* ── En bild ───────────────────────────────────────────────────────────── */
.bild-sida{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;padding:40px 0 70px;align-items:start}
.bild-sida .bild{border-radius:var(--radie);overflow:hidden;border:1px solid var(--kant)}
.bild-sida h1{font-size:clamp(30px,5vw,46px);margin:0 0 14px}
.bild-sida .text-ur{font-size:19px;color:var(--text)}
.lat{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  padding:14px 22px;border-radius:999px;
  background:linear-gradient(120deg,var(--glod),var(--guld));
  color:#211009;font-weight:600;font-size:16px;
}
.lat:hover{color:#211009;filter:brightness(1.08)}
.utgivare-rad{margin-top:26px;padding-top:18px;border-top:1px solid var(--kant);color:var(--text-dov);font-size:15px}
.utgivare-rad b{color:var(--rose)}
@media(max-width:860px){.bild-sida{grid-template-columns:1fr;gap:22px}}

/* ── Sidfot ────────────────────────────────────────────────────────────── */
.sida-fot{border-top:1px solid var(--kant);padding:34px 0 50px;color:var(--text-dov);font-size:15px}
.sida-fot .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.sida-fot img{width:26px;height:26px;border-radius:50%;opacity:.9}
.sida-fot .hoger{margin-left:auto;color:#8a7a75}
.sida-fot a{color:var(--text-dov)}
.sida-fot a:hover{color:var(--guld)}
.sida-fot .fot-mreze{padding-top:16px;font-size:14px}
.sida-fot .fot-marker{display:block;text-align:center;padding-top:14px;font-size:12.5px;letter-spacing:.08em;color:#a2958f}

/* ── Supportformuläret i sidfoten ─────────────────────────────────────── */
.sida-fot .fot-podrska{flex:0 0 auto}
.fot-podrska[open]{flex-basis:100%}
.fot-znak{display:flex;align-items:center;gap:16px;margin-left:auto}
.fot-znak .hoger{margin-left:0}
.fot-podrska summary{cursor:pointer;color:var(--guld);letter-spacing:.05em;list-style:none;font-size:14.5px}
.fot-podrska summary::-webkit-details-marker{display:none}
.fot-podrska summary::after{content:" ↓";color:var(--text-dov)}
.fot-podrska details[open] summary::after{content:" ↑"}
.fot-podrska form{display:grid;gap:10px;max-width:560px;margin-top:16px}
.fot-podrska input[type=text],.fot-podrska input[type=email],.fot-podrska textarea{
  background:var(--bakgrund-alt);border:1px solid var(--kant);border-radius:10px;
  color:var(--text);font:inherit;padding:10px 12px;width:100%}
.fot-podrska input:focus,.fot-podrska textarea:focus{outline:none;border-color:var(--guld)}
.fot-podrska input::placeholder,.fot-podrska textarea::placeholder{color:var(--text-dov)}
.fot-podrska textarea{resize:vertical;min-height:92px}
.fot-podrska button{justify-self:start;background:var(--glod);border:0;border-radius:999px;
  color:#fff;font:inherit;padding:10px 24px;cursor:pointer}
.fot-podrska button:hover{background:var(--glod-ljus)}
.fot-podrska-svar{color:var(--guld-ljus);font-size:14px}

/* ── Juridikraden i sidfoten (Kaptenen 2/10-2026) ────────────────────────
   Kaptenen: „vi har ingenstans … Terms of use, privacy policy … folk brukar
   leta efter det för att se att sajten är legitim."  Raden står under
   nätverkslänkarna och över märket. Den säger varför det inte finns någon
   cookie-ruta, och länkar de tre sidorna.

   Texten säger „Bez praćenja", inte „Bez kolačića": sajten sätter visserligen
   inga kakor för en vanlig besökare, men två funktionella kakor finns — den
   som minns din röst ett dygn och den som minns namn och e-post om du själv
   kryssar för det i kommentarsfältet. Sidan /kolacici/ säger det rakt ut. */
.sida-fot .fot-pravno{
  display:block;text-align:center;padding-top:18px;margin-top:18px;
  border-top:1px solid var(--kant);font-size:13.5px;line-height:1.9}
.sida-fot .fot-bez{display:block;color:var(--guld);letter-spacing:.02em}
.sida-fot .fot-lankovi{display:block;color:#a2958f}
.sida-fot .fot-pravno a{color:var(--text-dov)}
.sida-fot .fot-pravno a:hover{color:var(--guld)}

/* ── De juridiska sidornas text ──────────────────────────────────────────
   Allt ligger under .juridik, alltså bara på de tre nya sidorna. Temats
   artikelsidor (.kal-sida .text-ur) rörs inte alls. */
.juridik{max-width:760px}
.juridik .uvod{font-size:19px}
.juridik h2{margin:34px 0 10px;font-size:24px}
.juridik h2:first-of-type{margin-top:20px}
.juridik p{margin:10px 0}
.juridik ul{margin:10px 0 0;padding-left:22px}
.juridik li{margin-bottom:9px}
.juridik code{background:var(--bakgrund-alt);border:1px solid var(--kant);
  border-radius:6px;padding:1px 6px;font-size:15px}
.juridik .mali{margin-top:34px;padding-top:14px;border-top:1px solid var(--kant);
  font-size:13.5px;color:#a2958f}