/*
Theme Name: Fimpa nu
Theme URI: https://fimpanu.com
Author: Aurora (för Kaptenen)
Description: Mörk, stilla — rök som tunnas ut när man scrollar, glöd i "nu.". Egna klick-att-spela-kort för YouTube i integritetsläge: inget laddas förrän man trycker play.
Version: 4.2
Requires at least: 6.0
Tested up to: 7.1
License: GPL-2.0-or-later
Text Domain: fimpanu
*/

:root{
  --ash:#0a0a0d; --ash2:#12121a; --text:#eceaf5; --muted:#8b8ba3;
  --ember:#ffb86c; --ember-dim:#a86a3a;
  --kant:rgba(255,255,255,.07);
  --logo:300px;          /* loggans storlek i hjälten — en enda rad att skruva på */
  --logo-radie:14px;     /* 0 = knivskarpt fyrkantig */
  --logo-topp:10vh;      /* hur långt ner loggan sitter i hjälten (texten står stilla) */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ash); color:var(--text);
  font:17px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}
a{color:var(--ember); text-decoration:none}
a:hover{text-decoration:underline}

/* ── röken ── */
#fy-smoke{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
       opacity:.95; transition:opacity .3s linear}
/* Vinjetten låg tidigare med 75–100 % mörk aska i nedre halvan och slukade röken.
   Nu: mjuk, bara kanterna mörknar. */
.fy-vignette{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(135% 105% at 50% 0%, transparent 45%, rgba(10,10,13,.30) 78%, rgba(10,10,13,.72) 100%)}
main{position:relative; z-index:2}

/* ── flikarna: fastklistrade i toppen med en mjuk dimma bakom ── */
.fy-nav{position:sticky; top:0; z-index:20; display:flex; gap:1.4rem; justify-content:center;
  align-items:center; padding:1rem 6vw; font-size:.82rem; letter-spacing:.06em;
  background:linear-gradient(180deg, rgba(10,10,13,.95) 0%, rgba(10,10,13,.78) 65%, rgba(10,10,13,0) 100%);
  backdrop-filter:saturate(1.1) blur(12px); -webkit-backdrop-filter:saturate(1.1) blur(12px)}
.fy-nav a{color:var(--muted)}
.fy-nav a:hover{color:var(--text)}
/* menyn är en riktig WordPress-meny: <li> utan <ul> — nollställ listmarkeringen */
.fy-nav ul,.fy-nav li{margin:0; padding:0; list-style:none}
.fy-nav .current-menu-item > a{color:var(--text)}

/* ── hjälten: loggan UPPTILL, texten ankrad NEDTILL (möter Musiken-blocket) ── */
header.fy-hero{min-height:86svh; display:grid; align-items:stretch; justify-items:center;
  text-align:center; padding:4vh 6vw 2vh}
.fy-hero > div{display:flex; flex-direction:column; align-items:center; width:100%}
/* margin-top:auto trycker rubrik + lede + scroll nedåt — loggan stannar där den är */
.fy-kicker{margin-top:auto; letter-spacing:.42em; text-transform:uppercase; font-size:.68rem;
  color:var(--muted); margin-bottom:.7rem}
.fy-hero h1{font-size:clamp(3rem,13vw,8.5rem); line-height:.92; margin:0; font-weight:650; letter-spacing:-.035em}
.fy-hero h1 .nu{color:var(--ember); text-shadow:0 0 44px rgba(255,184,108,.35)}
.fy-lede{max-width:34ch; margin:.9rem auto 0; color:#c9c7dc; font-size:clamp(1rem,2.4vw,1.18rem)}
.fy-scroll{margin-top:1rem; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted)}
.fy-scroll::after{content:""; display:block; width:1px; height:22px; margin:.45rem auto 0;
                  background:linear-gradient(var(--muted), transparent)}

/* ── sektioner ── */
.fy-section{padding:5.5vh 7vw; max-width:1100px; margin:0 auto; scroll-margin-top:4.5rem}
.fy-section h2{font-size:clamp(1.5rem,4.4vw,2.4rem); margin:0 0 .6rem; letter-spacing:-.02em}
.muted{color:var(--muted)}
.fy-emberline{width:56px; height:2px; background:var(--ember); opacity:.75; margin:0 0 1.2rem}
.fy-grid{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:1.3rem}
.fy-card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
      border:1px solid var(--kant); border-radius:16px; padding:1.5rem 1.6rem;
      transition:transform .35s ease, border-color .35s ease}
.fy-card:hover{transform:translateY(-4px); border-color:rgba(255,184,108,.32)}
.fy-card h3{margin:.1rem 0 .5rem; font-size:1.06rem}
.fy-card p{margin:0; color:var(--muted); font-size:.94rem}
blockquote{margin:0; font-size:clamp(1.25rem,3.6vw,1.9rem); line-height:1.45; letter-spacing:-.015em}
blockquote span{color:var(--ember)}

/* ── videokorten (klick att spela) ── */
.fy-filmer{display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:1.3rem}
.fy-video{position:relative; display:block; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  background:#000; border:1px solid var(--kant); cursor:pointer;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease}
.fy-video:hover{transform:translateY(-3px); border-color:rgba(255,184,108,.4);
  box-shadow:0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,184,108,.12)}
.fy-video .fy-thumb{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.82) brightness(.72); transition:filter .45s ease, transform .6s ease}
.fy-video:hover .fy-thumb{filter:saturate(1) brightness(.86); transform:scale(1.02)}
.fy-play{position:absolute; inset:0; margin:auto; width:66px; height:66px; border-radius:50%;
  border:1.5px solid rgba(255,184,108,.75); background:rgba(10,10,13,.35); backdrop-filter:blur(2px);
  transition:transform .3s ease, background .3s ease}
.fy-play::after{content:""; position:absolute; inset:0; margin:auto; width:0; height:0;
  border-left:15px solid var(--ember); border-top:10px solid transparent; border-bottom:10px solid transparent;
  transform:translateX(3px)}
.fy-video:hover .fy-play{transform:scale(1.08); background:rgba(10,10,13,.55)}
.fy-video .fy-meta{position:absolute; left:0; right:0; bottom:0; padding:1.5rem 1.2rem .95rem;
  background:linear-gradient(transparent, rgba(6,6,9,.92))}
.fy-video .fy-meta h3{margin:0; font-size:1rem; font-weight:600}
.fy-video .fy-meta p{margin:.15rem 0 0; color:var(--muted); font-size:.82rem}
.fy-video iframe,.fy-iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.fy-video.fy-spelar .fy-play,.fy-video.fy-spelar .fy-thumb,.fy-video.fy-spelar .fy-meta{display:none}

/* ── innehåll (inlägg, sidor, block) ── */
.fy-content{max-width:70ch; margin:0 auto; padding:12vh 7vw}
.fy-content h1{font-size:clamp(2rem,6vw,3.2rem); letter-spacing:-.03em; margin:0 0 1.4rem}
.fy-content h2{font-size:clamp(1.3rem,3.6vw,1.9rem); letter-spacing:-.02em; margin:2.6rem 0 .8rem}
.fy-content h3{font-size:1.15rem; margin:2rem 0 .6rem}
.fy-content p{margin:0 0 1.2rem}
.fy-content ul{padding-left:1.25rem; margin:0 0 1.4rem}
.fy-content li{margin:.5rem 0; color:#c9c7dc}
.fy-content a{text-decoration:underline; text-underline-offset:3px}
.fy-content strong{color:var(--text)}
.fy-content .fy-faq{margin:0 0 2rem}
.fy-content .fy-faq dt{font-weight:600; color:var(--text); margin:1.6rem 0 .35rem}
.fy-content .fy-faq dd{margin:0; color:var(--muted)}
.fy-content figure{margin:2rem 0}
.fy-content img{border-radius:14px}
.alignwide{max-width:1100px; margin-left:auto; margin-right:auto}
.alignfull{width:100vw; max-width:100vw; margin-left:calc(50% - 50vw)}

/* ── fot ── */
footer.fy-foot{padding:4.5vh 7vw 6vh; text-align:center; color:var(--muted); font-size:.82rem}
footer.fy-foot code{color:#b9b7cf}
footer.fy-foot a{color:var(--muted)}

/* ── väljaren (stil, språk, längd) ── */
.fy-filter{margin:1.4rem 0 0}
.fy-filter-rad{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:.65rem}
.fy-filter-etikett{font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); min-width:4.6rem}
.fy-chips{display:flex; flex-wrap:wrap; gap:.45rem}
.fy-chip{font:inherit; font-size:.82rem; color:#c9c7dc; background:rgba(255,255,255,.045);
  border:1px solid var(--kant); border-radius:999px; padding:.34rem .85rem; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease}
.fy-chip:hover{border-color:rgba(255,184,108,.35); color:var(--text)}
.fy-chip-pa{background:rgba(255,184,108,.14); border-color:rgba(255,184,108,.55); color:var(--ember)}
.fy-filter-status{display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  margin:1rem 0 0; font-size:.84rem; color:var(--muted)}
.fy-lank{font:inherit; font-size:.82rem; color:var(--muted); background:none; border:0; padding:0;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.fy-lank:hover{color:var(--text)}
.fy-knapp{font:inherit; font-size:.85rem; color:var(--ash); background:var(--ember); border:0;
  border-radius:999px; padding:.5rem 1.15rem; cursor:pointer; font-weight:600;
  transition:transform .2s ease, box-shadow .2s ease}
.fy-knapp:hover{transform:translateY(-1px); box-shadow:0 8px 26px rgba(255,184,108,.28)}
.fy-mix-spelare{margin-top:1.4rem; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  border:1px solid var(--kant); background:#000; position:relative}

/* ── loggan ── */
.fy-logo{width:var(--logo); height:var(--logo); border-radius:var(--logo-radie); display:block;
  margin:var(--logo-topp,10vh) auto .8rem; object-fit:cover;
  border:1px solid rgba(255,184,108,.28);
  box-shadow:0 0 60px rgba(255,184,108,.18), 0 18px 50px rgba(0,0,0,.6)}
.fy-logo-sm{width:28px; height:28px; border-radius:6px; vertical-align:-8px; margin-right:.55rem;
  opacity:.9; object-fit:cover; border:1px solid rgba(255,255,255,.10)}

/* mindre skärmar: en mindre logga, lite mindre tomrum */
@media (max-width:700px){
  :root{--logo:200px; --logo-topp:5vh}
  header.fy-hero{padding:3vh 6vw 2vh; min-height:74svh}
  .fy-hero h1{font-size:clamp(2.6rem,14vw,4.6rem)}
  .fy-section{padding:4.5vh 6vw}
  .fy-filter-rad{flex-direction:column; gap:.35rem}
  .fy-filter-etikett{min-width:0}
}

/* ── WordPress-standard ── */
.screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* WordPress adminraden ligger fast överst — menyn lägger sig under den i stället för bakom */
.admin-bar .fy-nav{top:32px}
@media (max-width:782px){ .admin-bar .fy-nav{top:46px} }
@media (prefers-reduced-motion:reduce){
  #fy-smoke{opacity:.35}
  .fy-video:hover{transform:none}
}

/* ── DIN VÄG: skriv, spara hos dig själv, eller skicka in anonymt ── */
.fy-dinvag h1{margin-bottom:.6rem}
.fy-honung{position:absolute; left:-9999px; height:0; overflow:hidden}
.fy-skriv-block,.fy-mitt,.fy-andras{margin-top:3.2rem}
.fy-skriv{display:flex; flex-direction:column; gap:1.05rem; margin-top:1.3rem}
.fy-falt{display:block}
.fy-falt-namn{display:block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.45rem}
.fy-skriv input[type=text],.fy-skriv textarea{
  width:100%; font:inherit; color:var(--text); background:rgba(255,255,255,.035);
  border:1px solid var(--kant); border-radius:14px; padding:.85rem 1rem; resize:vertical;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease}
.fy-skriv textarea{min-height:11rem; line-height:1.65}
.fy-skriv input[type=text]:focus,.fy-skriv textarea:focus{
  outline:none; border-color:rgba(255,184,108,.5); background:rgba(255,255,255,.055);
  box-shadow:0 0 0 3px rgba(255,184,108,.09)}
.fy-skriv ::placeholder{color:#5c5c72}
.fy-raknare{margin:-.35rem 0 0; font-size:.74rem; color:var(--muted); text-align:right}
.fy-skriv-rad{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap}
.fy-knapp-tonad{background:transparent; color:var(--ember); border:1px solid rgba(255,184,108,.45)}
.fy-knapp-tonad:hover{background:rgba(255,184,108,.10); box-shadow:none}
.fy-kvitto{font-size:.85rem; color:var(--ember)}
.fy-fint{font-size:.85rem; color:var(--muted); margin:0}
.fy-kvitto-ruta{border:1px solid var(--kant); border-left:2px solid var(--ember); border-radius:12px;
  padding:.9rem 1.1rem; background:rgba(255,184,108,.06); font-size:.92rem; margin:1.8rem 0 0}
.fy-kvitto-fel{border-left-color:#e0806a; background:rgba(224,128,106,.07)}
.fy-mina-lista{display:grid; gap:1rem; margin:1.3rem 0 0}
.fy-mina-rad{display:flex; gap:1.3rem; flex-wrap:wrap; margin:1.1rem 0 0}
.fy-berattelser{display:grid; gap:1.1rem; margin-top:1.3rem}
.fy-berattelse{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--kant); border-radius:16px; padding:1.3rem 1.5rem}
.fy-berattelse p{margin:0 0 .8rem}
.fy-berattelse p:last-child{margin-bottom:0}
.fy-nar{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.fy-av{color:var(--ember); font-size:.88rem}
.fy-min-text{color:#c9c7dc}
.fy-andras .fy-berattelse{background:linear-gradient(180deg,rgba(255,184,108,.055),rgba(255,255,255,.012))}
/* hennes egen berättelse: uppe direkt, märkt som hennes egen */
.fy-mina-berattelser{margin-top:3.2rem}
.fy-berattelse.fy-egen{border-color:rgba(255,184,108,.34);
  background:linear-gradient(180deg,rgba(255,184,108,.08),rgba(255,255,255,.012))}
.fy-berattelse .fy-status{margin:.9rem 0 0; padding-top:.8rem; border-top:1px solid var(--kant);
  font-size:.78rem; color:var(--muted)}
.fy-berattelse.fy-klar .fy-status{color:var(--ember)}
a.fy-card{display:block; color:inherit; text-decoration:none}
a.fy-card:hover{text-decoration:none}
a.fy-card h3{color:var(--text)}

/* sidfotens YouTube-länk (2026-09-15) */
footer.fy-foot p.fy-yt{margin:.5rem 0 0}
footer.fy-foot a.fy-yt-lank{color:var(--ember); text-decoration:none}
footer.fy-foot a.fy-yt-lank:hover{text-decoration:underline}

/* ── "Först här" — släpp och navigering (2026-09-15, Aurora) ─────────────────────── */
.fy-slapp{max-width:52rem}
.fy-slapp-meta{color:var(--muted); font-size:.9rem; letter-spacing:.02em; margin:-.4rem 0 1.4rem}
.fy-slapp-bild{margin:0 0 1.6rem; border-radius:14px; overflow:hidden; border:1px solid var(--kant)}
.fy-slapp-bild img{display:block; width:100%; height:auto}
.fy-slapp-spelare{margin:0 0 1.2rem}
.fy-slapp-spelare audio{width:100%}
.fy-slapp-hjalp{font-size:.78rem; margin:.5rem 0 0}
.fy-slapp-status{background:rgba(255,184,108,.08); border:1px solid rgba(255,184,108,.25);
  border-radius:12px; padding:.85rem 1.05rem; margin:0 0 1.6rem; font-size:.92rem}
.fy-slapp-status.fy-klar{background:rgba(255,255,255,.04); border-color:var(--kant)}
.fy-slapp-om{opacity:.92; margin-bottom:1.6rem}
.fy-slapp-text h2{font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin:2rem 0 .8rem}
.fy-slapp-text p{margin:.15rem 0; line-height:1.55; color:#dcd9ea}
.fy-slapp-nav{display:flex; gap:.8rem; flex-wrap:wrap; margin:2.4rem 0 1rem}
.fy-slapp-nav-lank{flex:1 1 12rem; display:flex; flex-direction:column; gap:.2rem;
  padding:.9rem 1.1rem; border:1px solid var(--kant); border-radius:12px;
  background:rgba(255,255,255,.03); color:var(--text)}
.fy-slapp-nav-lank span{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.fy-slapp-nav-lank strong{font-weight:600}
.fy-slapp-nav-lank:hover{border-color:var(--ember); text-decoration:none}
.fy-slapp-nav-lank.alla{flex:0 0 auto; text-align:center}
.fy-slapp-kommentarer{margin-top:2.6rem; border-top:1px solid var(--kant); padding-top:1.6rem}
.fy-slapp-kommentarer h2,.fy-slapp-kommentarer h3{font-size:1.05rem; margin-bottom:.6rem}
.fy-slapp-kommentarer .comment-list{list-style:none; padding:0; margin:0 0 1.6rem}
.fy-slapp-kommentarer .comment-list li{border:1px solid var(--kant); border-radius:12px;
  padding:.9rem 1.1rem; margin-bottom:.8rem; background:rgba(255,255,255,.03)}
.fy-slapp-kommentarer .comment-meta{font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.4rem}
.fy-kommentar-not{font-size:.82rem; color:var(--muted)}
.fy-slapp-kommentarer input[type=text],.fy-slapp-kommentarer input[type=email],
.fy-slapp-kommentarer input[type=url],.fy-slapp-kommentarer textarea{
  width:100%; background:rgba(255,255,255,.05); border:1px solid var(--kant); border-radius:10px;
  color:var(--text); padding:.7rem .9rem; font:inherit; margin-bottom:.6rem}
.fy-slapp-kommentarer .submit,.fy-slapp-kommentarer input[type=submit]{
  background:var(--ember); color:#1a1206; border:0; border-radius:999px;
  padding:.7rem 1.6rem; font:inherit; font-weight:600; cursor:pointer}
.fy-slapp-nat{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));
  margin-top:1.6rem}
.fy-slapp-kort{display:block; border:1px solid var(--kant); border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,.03); color:var(--text)}
.fy-slapp-kort:hover{border-color:var(--ember); text-decoration:none}
.fy-slapp-kort img{display:block; width:100%; height:auto}
.fy-slapp-kort-meta{padding:.9rem 1rem 1.1rem}
.fy-slapp-kort-meta h3{margin:0 0 .3rem; font-size:1.05rem}
.fy-slapp-kort-status{font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ember); margin:.5rem 0 0}
.fy-slapp-sidor{margin-top:1.6rem}

/* ── Sökruta i menyn (2026-09-15) ─────────────────────────────────────────────── */
.fy-nav .fy-sok{display:inline-flex;align-items:center;gap:.4rem;margin-left:auto}
.fy-nav .fy-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:.45rem 1rem;min-width:13rem}
.fy-nav .fy-sok input[type=search]::placeholder{color:var(--muted)}
.fy-nav .fy-sok input[type=search]:focus{outline:none;border-color:var(--ember);background:rgba(255,255,255,.1)}
.fy-nav .fy-sok button{
  background:var(--ember);color:#1a1206;border:0;border-radius:999px;padding:.45rem 1rem;
  font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
@media (max-width:700px){
  .fy-nav .fy-sok{width:100%;margin:.6rem 0 0}
  .fy-nav .fy-sok input[type=search]{min-width:0;flex:1}
}

/* ── Sökrutan, rättad för mobil (2026-09-15): i menyn, ovanför länkarna, till höger ───────── */
@media (max-width:700px){
  .fy-nav{flex-wrap:wrap}
  .fy-nav .fy-sok{
    order:-1; width:100%; justify-content:flex-end;
    margin:0 0 .55rem 0; gap:.35rem;
  }
  .fy-nav .fy-sok input[type=search]{
    min-width:0; width:auto; flex:0 1 11rem; padding:.4rem .85rem;
  }
  .fy-nav .fy-sok button{padding:.4rem .9rem}
}

/* ── Sökresultat: klickbara kort (2026-09-15) ─────────────────────────────────────── */
.fy-arkiv .fy-slapp-lista{display:grid;gap:1rem;margin:1.5rem 0}
.fy-arkiv .fy-slapp-kort{
  display:grid;grid-template-columns:180px 1fr;gap:1.1rem;align-items:center;
  padding:.7rem;border:1px solid var(--kant);border-radius:14px;
  background:rgba(255,255,255,.03);text-decoration:none;color:inherit;
  transition:background .15s,border-color .15s,transform .15s}
.fy-arkiv .fy-slapp-kort:hover,.fy-arkiv .fy-slapp-kort:focus{
  background:rgba(255,255,255,.07);border-color:var(--ember);transform:translateY(-1px)}
.fy-arkiv .fy-slapp-kort-bild img{width:100%;height:auto;border-radius:9px;display:block}
.fy-arkiv .fy-slapp-kort-text h2{margin:0 0 .3rem;font-size:1.15rem;line-height:1.25}
.fy-arkiv .fy-sok-rad{margin:.15rem 0 .35rem;color:var(--text);opacity:.85;font-style:italic;font-size:.95rem}
.fy-arkiv .fy-slapp-kort-meta{margin:0;color:var(--muted);font-size:.85rem}
@media (max-width:620px){
  .fy-arkiv .fy-slapp-kort{grid-template-columns:1fr}
  .fy-arkiv .fy-slapp-kort-bild img{max-height:180px;object-fit:cover}
}

/* sidfotens Facebook-länk (2026-09-16) */
footer.fy-foot p.fy-fb{margin:.5rem 0 0}
footer.fy-foot a.fy-fb-lank{color:var(--ember); text-decoration:none}
footer.fy-foot a.fy-fb-lank:hover{text-decoration:underline}
/* ⭐ Stjärnorna — lyssnarnas röst (lagt till 2026-09-17) ───────────────────── */
.fy-stjarnor{
  margin:1.4rem 0 .4rem; padding:1rem 1.1rem;
  background:var(--ash2); border:1px solid var(--kant); border-radius:12px;
}
.fy-stjarnor-fraga{ margin:0 0 .5rem; font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--muted) }
.fy-stjarnor-rad{ display:flex; gap:.35rem; align-items:center }
.fy-stjarna{
  background:none; border:0; padding:0 .12rem; cursor:pointer; line-height:1;
  font-size:2.1rem; color:rgba(255,255,255,.18);
  transition:color .15s ease, transform .12s ease;
}
.fy-stjarna span[aria-hidden]{ display:inline-block }
.fy-stjarna:hover, .fy-stjarna:focus-visible{ color:var(--ember-dim); transform:translateY(-2px) }
.fy-stjarna.fy-tand{ color:var(--ember) }
.fy-stjarna.fy-tand span[aria-hidden]{ text-shadow:0 0 14px rgba(255,184,108,.35) }
.fy-stjarna:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; border-radius:4px }
.fy-stjarnor-svar{ margin:.6rem 0 0; color:var(--text) }
.fy-stjarnor-svar strong{ color:var(--ember); font-size:1.15rem }
.fy-din{ color:var(--muted) }
.fy-stjarnor-hjalp{ margin:.35rem 0 0; font-size:.82rem }
.fy-stjarnor-kort{ margin:.35rem 0 0; color:var(--muted); font-size:.85rem }
.fy-stjarnor-kort .fy-stjarnor-tecken{ color:var(--ember); letter-spacing:.12em }
/* Länken på låtkorten till låtens egen sida (texten + noterna) */
.fy-kort-lank{ display:inline-block; margin-top:.5rem; color:var(--ember); font-size:.88rem;
  text-decoration:none; border-bottom:1px solid rgba(255,184,108,.35); position:relative; z-index:2 }
.fy-kort-lank:hover{ border-bottom-color:var(--ember) }
.fy-video .fy-stjarnor-kort{ font-size:.82rem; margin-top:.4rem }
@media (max-width:520px){
  .fy-stjarna{ font-size:1.8rem }
}

/* ── Foten: länkar som knappar (Kapten 2026-09-18) ─────────────────────────────────
   "länkarna blir mycket små på min mobil och då har jag svårt att klicka med fingret.
    Så kan du göra länkarna som knappar så de är större på mobilen."
   Regeln: minst 44 px träffyta (48 px i mobil), full bredd och staplade på smala skärmar. */
footer.fy-foot .fy-sprak{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:center}
footer.fy-foot .fy-sprak > strong{flex:1 1 100%}
footer.fy-foot .fy-yt,
footer.fy-foot .fy-fb{margin:.6rem 0 0}

footer.fy-foot a.fy-yt-lank,
footer.fy-foot a.fy-fb-lank,
footer.fy-foot .fy-sprak a{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:44px; padding:.65rem 1.15rem;
  border:1px solid var(--kant); border-radius:.7rem;
  background:rgba(255,255,255,.03);
  color:var(--ember); text-decoration:none; font-size:1rem; line-height:1.2;
}
footer.fy-foot a.fy-yt-lank:hover,
footer.fy-foot a.fy-fb-lank:hover,
footer.fy-foot .fy-sprak a:hover{
  border-color:var(--ember); background:rgba(255,184,108,.08); text-decoration:none;
}

@media (max-width:600px){
  footer.fy-foot .fy-sprak{display:grid; grid-template-columns:1fr; gap:.6rem}
  footer.fy-foot a.fy-yt-lank,
  footer.fy-foot a.fy-fb-lank,
  footer.fy-foot .fy-sprak a{
    width:100%; min-height:48px; padding:.9rem 1rem; font-size:1.05rem;
  }
}

/* ── Mobilmeny (2026-09-17) ────────────────────────────────────────────────────────
   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. */
.fy-meny-knapp{display:none}
.fy-meny-innhold{display:flex; align-items:center; justify-content:center; gap:1.4rem;
  flex-wrap:wrap; flex:1 1 auto}
.fy-meny-innhold > li{margin:0; padding:0; list-style:none}

@media (max-width:700px){
  .fy-nav{flex-wrap:nowrap; align-items:center; gap:.5rem; padding:.7rem 4vw}
  .fy-meny-knapp{display:inline-flex; align-items:center; gap:.45rem; flex:0 0 auto; font:inherit;
    font-size:.82rem; letter-spacing:.06em; color:var(--text); background:rgba(255,255,255,.05);
    border:1px solid var(--kant); border-radius:.6rem; padding:.45rem .75rem; cursor:pointer}
  .fy-meny-knapp .fy-meny-ikon{font-size:1rem; line-height:1}
  .fy-meny-knapp[aria-expanded="true"]{border-color:var(--ember); color:var(--text)}
  .fy-meny-innhold{display:none; position:absolute; left:0; right:0; top:100%; flex:0 0 auto;
    flex-direction:column; align-items:stretch; gap:0; padding:.35rem 4vw .9rem;
    background:rgba(10,10,13,.97); border-bottom:1px solid var(--kant);
    backdrop-filter:saturate(1.1) blur(12px); -webkit-backdrop-filter:saturate(1.1) blur(12px)}
  .fy-meny-innhold.fy-apen{display:flex}
  .fy-meny-innhold > li{width:100%}
  .fy-meny-innhold > li > a{display:block; padding:.8rem 0; border-bottom:1px solid rgba(255,255,255,.07)}
  .fy-nav .fy-sok{order:0; width:auto; flex:1 1 auto; margin:0; justify-content:flex-end}
  .fy-nav .fy-sok input[type=search]{min-width:0; width:auto; flex:1 1 6rem; padding:.45rem .8rem}
  .fy-nav .fy-sok button{padding:.45rem .8rem}
}

/* Mobile order: next on top, all in the middle, previous at the bottom (Captain 2026-09-20).
   Desktop stays: previous | all | next in one row. */
@media (max-width:700px){
  .fy-slapp-nav{flex-direction:column}
  .fy-slapp-nav-lank{flex:0 0 auto; width:100%}
  .fy-slapp-nav-lank.nasta{order:1}
  .fy-slapp-nav-lank.alla{order:2}
  .fy-slapp-nav-lank.forra{order:3}
}

/* Länken ovanför loggan — "How it works" i rubrikstil (2026-09-21) */
.fy-over-logo{margin:.4rem 0 1.15rem}
.fy-over-logo a{color:var(--text); text-decoration:none; font-size:clamp(1.15rem,5vw,1.4rem);
  font-weight:600; letter-spacing:.01em; line-height:1.25}
.fy-over-logo a:hover{color:var(--ember)}
.fy-over-logo a span{display:block; margin-top:.3rem; font-size:.84rem; font-weight:400;
  letter-spacing:.02em; color:var(--muted)}


/* ── submenu (Premieres → …, About → My story) · Captain 27 Sep 2026 ── */
.fy-meny-innhold li{position:relative}
.fy-meny-innhold li.menu-item-has-children > a::after{content:"▾"; margin-left:.35em; opacity:.55; font-size:.75em}
.fy-meny-innhold .sub-menu{position:absolute; top:100%; left:0; display:none; flex-direction:column; gap:.3rem;
  min-width:210px; margin-top:.25rem; padding:.55rem .8rem; border-radius:12px; z-index:30;
  background:rgba(10,10,13,.97); border:1px solid var(--kant); box-shadow:0 14px 40px rgba(0,0,0,.5)}
/* bridge: fills the gap between parent and panel, otherwise the pointer loses the menu on the way down */
.fy-meny-innhold .sub-menu::before{content:""; position:absolute; left:0; right:0; top:-.6rem; height:.6rem}
.fy-meny-innhold li:hover > .sub-menu,
.fy-meny-innhold li:focus-within > .sub-menu{display:flex}
@media (max-width:900px){
  .fy-meny-innhold .sub-menu{position:static; display:flex; min-width:0; margin:.3rem 0 .2rem 1rem;
    padding:.2rem 0 .2rem .8rem; border:0; border-left:1px solid var(--kant); border-radius:0;
    background:none; box-shadow:none}
  .fy-meny-innhold li.menu-item-has-children > a::after{content:""}
}

/* ── the days panel · right column · 28.09.2026 ─────────────────────────── */
.fy-kal-layout{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:2.4rem;
               align-items:start; max-width:1100px; margin:0 auto; padding:12vh 7vw 0}
.fy-kal-layout .fy-content{margin:0; padding:0; max-width:none}
.fy-kal-panel{border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:1.05rem 1.15rem;
              background:rgba(255,255,255,.028)}
.fy-kal-panel h2{font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
                 margin:0 0 .72rem; font-weight:600}
.fy-kal-lista{list-style:none; margin:0; padding:0}
.fy-kal-rad{display:flex; gap:.75rem; padding:.42rem 0; border-bottom:1px solid rgba(255,255,255,.06);
            font-size:.95rem; line-height:1.35; margin:0}
.fy-kal-rad:last-child{border-bottom:0}
.fy-kal-dag{flex:0 0 3.2rem; color:var(--muted); font-variant-numeric:tabular-nums}
.fy-kal-namn{color:#e9e7f2}
.fy-kal-kalla{margin:.7rem 0 0; font-size:.7rem; color:var(--muted)}
.fy-kal-lista a, .fy-kal-arlista a{color:inherit; text-decoration:none;
                                   border-bottom:1px solid rgba(255,255,255,.16)}
.fy-kal-lista a:hover, .fy-kal-arlista a:hover{color:var(--ember); border-bottom-color:var(--ember);
                                              text-decoration:none}
@media (max-width:820px){
  .fy-kal-layout{grid-template-columns:1fr; gap:1.4rem; padding:10vh 7vw 0}
  .fy-kal-panel{order:2}
}
/* ── the whole year on its own page ─────────────────────────────────────── */
.fy-kal-ar{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1.8rem 2.4rem; margin-top:2rem}
.fy-kal-manad h2{font-size:1.05rem; letter-spacing:.01em; margin:0 0 .55rem; color:var(--text)}
.fy-kal-arlista{list-style:none; margin:0; padding:0}
.fy-kal-arlista li{display:flex; gap:.6rem; padding:.22rem 0; margin:0;
                   border-bottom:1px solid rgba(255,255,255,.05); font-size:.92rem; line-height:1.35}
.fy-kal-arlista-dag{flex:0 0 1.9rem; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums}
.fy-kal-arlista-namn{color:#dcdae7}
.fy-kal-helgdag .fy-kal-arlista-namn,
.fy-kal-helgdag .fy-kal-namn{color:var(--muted); font-style:italic}

/* Share row on a release page (2026-10-02) */
.fy-dela{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin:1.4rem 0 1.6rem}
.fy-dela-knapp{display:inline-flex; align-items:center; gap:.45rem; padding:.72rem 1.05rem;
  border:1px solid var(--kant); border-radius:12px; background:rgba(255,255,255,.03);
  color:var(--text); font:inherit; font-size:.92rem; cursor:pointer; text-decoration:none}
.fy-dela-knapp:hover{border-color:var(--ember); text-decoration:none}
.fy-dela-knapp.fb{border-color:rgba(255,205,0,.35); color:var(--ember)}
.fy-dela-done{font-size:.82rem; color:var(--muted)}

/* Legal links in the footer (2026-10-02) */
footer.fy-foot p.fy-juridisk{margin:1.2rem 0 0; font-size:.78rem}
footer.fy-foot p.fy-juridisk a{color:var(--muted); text-decoration:none}
footer.fy-foot p.fy-juridisk a:hover{color:var(--ember); text-decoration:underline}

.fy-dela-falt{flex:1 1 100%; padding:.6rem .8rem; border:1px solid var(--kant); border-radius:12px;
  background:rgba(255,255,255,.04); color:var(--text); font:inherit; font-size:.85rem}