/*
Theme Name: RadioFLR Tema
Theme URI: https://radioflr.dk
Author: RadioFLR
Description: Brugerdefineret WordPress-tema til RadioFLR — lyst design, fast bundafspiller med split-flap sang-skift, og native IRC-chat. Byg selve sideindholdet i Elementor; header, footer og afspiller kommer fra temaet.
Version: 1.4.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: radioflr
*/

:root{
  --bg: #f7f8fc;
  --bg-2: #eef0f7;
  --navy: #0f1830;
  --orange: #ff7a1a;
  --orange-text: #a64a06;
  --blue: #3a7bff;
  --link: #1d5fd1;
  --text: #141a2c;
  --text-dim: #5b6478;
  --red: #e0304a;
  --red-light: #c81f3d;
  --amber: #ffb74d;
  --blue-light: #64b5f6;
  --surface-1: rgba(20,26,44,.035);
  --surface-2: rgba(20,26,44,.06);
  --border-1: rgba(20,26,44,.10);
  --border-2: rgba(20,26,44,.16);
}
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:'Hanken Grotesk', sans-serif; overflow-x:hidden; }

.aurora{ position: fixed; inset:0; z-index:0; overflow:hidden; }
.blob{ position:absolute; border-radius:50%; filter: blur(90px); will-change: transform; }
.blob-1{ width:52vw; height:52vw; left:38%; top:-14%; background: radial-gradient(circle at 40% 40%, rgba(255,122,26,.5), rgba(255,122,26,0) 70%); }
.blob-2{ width:46vw; height:46vw; left:58%; top:28%; background: radial-gradient(circle at 60% 60%, rgba(58,123,255,.42), rgba(58,123,255,0) 70%); }
.blob-3{ width:38vw; height:38vw; left:30%; top:46%; background: radial-gradient(circle at 50% 50%, rgba(255,122,26,.22), rgba(255,122,26,0) 70%); }

.noise{
  position: fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

header{
  position: fixed; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 5vw;
  background: linear-gradient(to bottom, rgba(247,248,252,0.85), transparent);
  backdrop-filter: blur(6px);
}
.logo-img{ height: 42px; width: auto; display:block; }

nav{ display:flex; gap:2.2rem; align-items:center; }
nav a{ color: var(--text-dim); text-decoration:none; font-size:.92rem; font-weight:500; transition: color .2s; }
nav a:hover{ color: var(--text); }
nav a.is-current{ color: var(--text); }

/* ---- Mobile nav toggle (hidden on desktop) ---- */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:38px; height:38px; background:none; border:none; padding:0; margin:0; cursor:pointer; flex:none;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition: transform .25s ease, opacity .2s ease; }

@media (max-width:860px){
  .nav-toggle{ display:flex; }

  header nav{
    position:fixed; inset:0 0 0 auto; height:100vh; width:min(78vw, 320px);
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0;
    padding: 100px 2.2rem 2rem; background:var(--bg); border-left:1px solid var(--border-1);
    box-shadow: -24px 0 60px rgba(20,26,44,.14);
    transform: translateX(105%); transition: transform .32s ease; z-index:50;
  }
  header.nav-open nav{ transform: translateX(0); }
  header nav a{ width:100%; padding:.95rem 0; font-size:1.05rem; border-bottom:1px solid var(--border-1); }

  header.nav-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  header.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  footer nav{ flex-wrap:wrap; row-gap:.8rem; }
}

.dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px var(--orange); animation: pulse 1.4s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(.7); } }

/* ---- Sticky bottom player ---- */
.sticky-player{
  position: fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; justify-content:center; pointer-events:none;
}
.sticky-player__inner{
  pointer-events:auto;
  display:flex; align-items:center; gap:1.4rem; width:min(100%, 900px);
  background: linear-gradient(135deg, var(--orange) 0%, #b1436a 35%, #4a3f8f 65%, var(--blue) 100%);
  border-radius:18px 18px 0 0; padding:.95rem 1.6rem;
  box-shadow: 0 -12px 40px rgba(20,26,44,.2);
}

.player-pill{
  display:flex; align-items:center; gap:1.1rem; flex:1; min-width:0;
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  font-family:'Hanken Grotesk', sans-serif; color:#fff; appearance:none;
}

.play-btn{
  position:relative; width:52px; height:52px; border-radius:50%; flex:none;
  background:#fff; display:flex; align-items:center; justify-content:center; overflow:visible;
  box-shadow: 0 4px 14px rgba(20,26,44,.25);
}
.play-btn .ring{
  position:absolute; inset:-2px; border-radius:50%; border:1.5px solid rgba(255,255,255,.7);
  opacity:0; transform:scale(1);
}
.player-pill.is-playing .ring{ animation: ring-pulse 1.8s ease-out infinite; }
@keyframes ring-pulse{
  0%{ opacity:.55; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.5); }
}

.tri{ width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:14px solid var(--orange-text); margin-left:4px; transition: opacity .2s ease, transform .2s ease; }
.pause{ display:flex; gap:5px; opacity:0; position:absolute; transform: scale(.6); transition: opacity .2s ease, transform .2s ease; }
.pause i{ width:5px; height:17px; background:var(--orange-text); border-radius:1px; display:block; }
.player-pill.is-playing .tri{ opacity:0; transform: scale(.6); }
.player-pill.is-playing .pause{ opacity:1; transform: scale(1); }

.mini-eq{ display:flex; align-items:flex-end; gap:2px; height:16px; flex:none; }
.mini-eq i{ width:3px; background:#fff; border-radius:2px; height:3px; display:block; }

.mini-np{
  font-size:.95rem; color:#fff; opacity:.9; flex:1; min-width:0; max-width:none;
  overflow:hidden; white-space:nowrap; display:flex; align-items:baseline;
  perspective: 240px;
}
.player-pill.is-playing .mini-np{ opacity:1; }
.flap-char{ display:inline-block; white-space:pre; }

.sp-volume{ display:flex; align-items:center; gap:.6rem; flex:none; color:#fff; }
.sp-mute{ background:none; border:none; padding:.2rem; color:#fff; cursor:pointer; display:flex; opacity:.85; }
.sp-mute:hover{ opacity:1; }
.sp-mute-icon--off{ display:none; }
.sp-mute.is-muted .sp-mute-icon--on{ display:none; }
.sp-mute.is-muted .sp-mute-icon--off{ display:block; }

.sp-volume-slider{
  -webkit-appearance:none; appearance:none; width:90px; height:4px; border-radius:99px; outline:none; cursor:pointer;
  background: linear-gradient(to right, #fff var(--vol, 80%), rgba(255,255,255,.3) var(--vol, 80%));
}
.sp-volume-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.sp-volume-slider::-moz-range-thumb{ width:13px; height:13px; border-radius:50%; background:#fff; border:none; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.sp-volume-slider::-moz-range-track{ height:4px; border-radius:99px; background:rgba(255,255,255,.3); }

@media (max-width:520px){ .sp-volume{ display:none; } }

main{ position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding: 0 5vw; }

h1{
  font-family:'Bricolage Grotesque', sans-serif; font-weight:800;
  font-size: clamp(2.8rem, 8vw, 6.4rem); line-height:0.98; letter-spacing:-0.02em;
  margin: 0 0 1.6rem 0; max-width: 14ch;
}
h1 .line{ overflow:hidden; }
h1 .line span{ display:inline-block; will-change: transform; }
h1 .accent{ color: var(--orange-text); font-style:italic; }

.sub{ font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--text-dim); max-width: 42ch; margin-bottom: 2.6rem; line-height:1.5; }

.btn{
  position:relative; display:inline-flex; align-items:center; gap:.7rem;
  background: var(--orange); color:#100800; font-weight:700; font-size:.95rem;
  padding: 1rem 1.7rem; border-radius: 999px; text-decoration:none; border:none; cursor:pointer;
  font-family:'Hanken Grotesk', sans-serif;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.45); }

section{ position:relative; z-index:2; padding: 7vw 5vw; }

.mission{ display:flex; justify-content:center; padding-top:2vw; padding-bottom:6vw; }
.mission p{
  font-family:'Bricolage Grotesque', sans-serif; font-weight:600;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height:1.35; letter-spacing:-0.01em;
  max-width: 24ch; text-align:center; margin:0;
}
.mission .accent{ color: var(--orange-text); }

.feature-row{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 1.8rem; padding-top:0; }
@media (max-width: 860px){ .feature-row{ grid-template-columns: 1fr; } }
.feature-row--solo{ grid-template-columns: 1fr; }

.card{
  position:relative; border-radius: 22px; padding: 2.2rem 2.4rem; border:1px solid var(--border-1);
  background: var(--surface-1); backdrop-filter: blur(8px);
}
.card h2{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:1.7rem; margin: 0 0 .6rem 0; }
.card p{ color: var(--text-dim); font-size:1rem; line-height:1.55; margin: 0 0 1.4rem 0; max-width:38ch; }
.card-link{ color: inherit; text-decoration:none; font-weight:600; font-size:.92rem; display:inline-flex; align-items:center; gap:.4rem; transition: gap .2s ease; }
.card-link:hover{ gap:.65rem; }

.kickstart{ background: linear-gradient(155deg, rgba(255,122,26,.16), rgba(255,122,26,.02)); border-color: rgba(255,122,26,.25); }
.kickstart .card-link{ color: var(--orange-text); }

/* Forsidens programkort (inc/program-kort.php): som Kickstart-kortet, skifter program */
.program-kort-indhold{ transition: opacity .35s ease, transform .35s ease; }
.program-kort-indhold.er-skjult{ opacity:0; transform: translateY(6px); }
.program-kort .program-kort-titel{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sponsor{ border-style:dashed; padding-top: 3.6rem; }
.sponsor .card-link{ color: var(--link); }
.ad-badge{
  position:absolute; top:1.4rem; right:1.6rem;
  font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color: var(--text-dim); border:1px solid var(--border-2); border-radius:999px;
  padding:.25rem .65rem;
}

/* ---- Page header (non-hero pages, e.g. Chat) ---- */
.page-head{ position:relative; z-index:2; padding: 9vw 5vw 2vw; }
.page-head h1{ font-size: clamp(2.4rem, 5.5vw, 3.6rem); max-width: none; margin-bottom: .8rem; }
.page-head .sub{ margin-bottom: 0; }

/* ---- Native IRC chat ---- */
.chat-shell{
  position:relative; z-index:2; margin: 2vw 5vw 6vw;
  display:grid; grid-template-columns: 1fr 280px; gap:1.4rem;
  height: 70vh; min-height:520px;
}
@media (max-width: 780px){ .chat-shell{ grid-template-columns: 1fr; height:auto; } }

/* ---- Chat page: fill viewport between header and footer ---- */
body.chat-page{ display:flex; flex-direction:column; height:100vh; overflow:hidden; }
body.chat-page header{ position:relative; }
body.chat-page .chat-shell{ flex:1; margin:0 0 90px; height:auto; min-height:0; }
body.chat-page .chat-main, body.chat-page .chat-sidebar{ border-radius:0; }

.chat-main, .chat-sidebar{
  border-radius:20px; border:1px solid var(--border-1); background: var(--surface-1);
  display:flex; flex-direction:column; overflow:hidden;
}

.chat-tabs{ display:flex; gap:.4rem; padding:.9rem 1rem 0; }
.chat-tab{
  display:flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:10px 10px 0 0;
  font-size:.85rem; color:var(--text-dim); cursor:pointer; background:transparent;
}
.chat-tab.active{ background: var(--surface-2); color:var(--text); }
.chat-tab .tab-close{ opacity:.6; }
.chat-tab .tab-close:hover{ opacity:1; }

.chat-messages{ flex:1; overflow-y:auto; padding: 1rem 1.2rem; display:none; }
.chat-messages.active{ display:block; }

.chat-msg{ display:flex; gap:.7rem; margin-bottom:1rem; }
.chat-avatar{
  flex:none; width:30px; height:30px; border-radius:50%; border:2px solid var(--text-dim);
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700;
}
.chat-msg-head{ display:flex; align-items:baseline; gap:.5rem; margin-bottom:.15rem; }
.chat-nick{ font-weight:700; font-size:.9rem; }
.chat-time{ font-size:.72rem; color:var(--text-dim); }
.chat-msg-text{ font-size:.92rem; line-height:1.5; word-break:break-word; }
.chat-msg-text a{ color:var(--link); }

.chat-role-pill{
  font-size:.65rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#0b0d12; border-radius:999px; padding:.1rem .5rem;
}

.chat-system{ color:var(--text-dim); font-size:.85rem; font-style:italic; margin-bottom:.7rem; }
.chat-system a{ color:var(--link); }
.chat-onair{ color:var(--red-light); font-weight:600; font-size:.88rem; margin-bottom:.7rem; }
.chat-action{ color:var(--text-dim); font-size:.88rem; font-style:italic; margin-bottom:.7rem; }
.chat-action .chat-nick{ font-size:.88rem; }

.chat-input-row{ display:flex; gap:.7rem; padding:1rem 1.2rem; border-top:1px solid var(--border-1); }
.chat-input-row input{
  flex:1; background: var(--surface-1); border:1px solid var(--border-1); border-radius:999px;
  padding:.7rem 1.1rem; color:var(--text); font-family:'Hanken Grotesk', sans-serif; font-size:.9rem;
}
.chat-input-row input:disabled{ opacity:.5; }
.chat-input-row input::placeholder{ color:var(--text-dim); }
.chat-input-row .btn{ padding:.7rem 1.3rem; font-size:.88rem; }
.chat-input-row .btn:disabled{ opacity:.5; cursor:default; transform:none; box-shadow:none; }

.chat-sidebar-head{
  padding:1rem 1.2rem .8rem; font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim); border-bottom:1px solid var(--border-1);
}
.chat-userlist{ flex:1; overflow-y:auto; padding: .6rem 0; }
.chat-role-group{ padding: .5rem 1.2rem; }
.chat-role-title{ font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:.5rem; }
.chat-user-row{ display:flex; align-items:center; gap:.6rem; padding:.35rem 0; cursor:pointer; font-size:.88rem; }
.chat-user-row:hover{ color:var(--orange-text); }
.chat-user-row .chat-avatar{ width:24px; height:24px; font-size:.68rem; }

.nick-modal{
  position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background: rgba(247,248,252,.75); backdrop-filter: blur(6px);
}
.nick-box{
  width: min(90vw, 380px); border-radius:22px; padding:2.2rem; text-align:center;
  border:1px solid rgba(255,122,26,.3); background: linear-gradient(155deg, rgba(255,122,26,.14), rgba(247,248,252,.96));
  box-shadow: 0 20px 60px rgba(20,26,44,.12);
}
.nick-box h2{ font-family:'Bricolage Grotesque', sans-serif; font-size:1.5rem; margin:0 0 .6rem; }
.nick-box p{ color:var(--text-dim); font-size:.9rem; margin:0 0 1.4rem; line-height:1.5; }
.nick-box input{
  width:100%; background: var(--surface-2); border:1px solid var(--border-2); border-radius:12px;
  padding:.8rem 1rem; color:var(--text); font-family:'Hanken Grotesk', sans-serif; font-size:.95rem;
  margin-bottom:1rem; text-align:center;
}
.nick-box .btn{ width:100%; justify-content:center; }

footer{
  position:relative; z-index:2; padding: 4vw 5vw calc(2.4vw + 90px); margin-top:2vw;
  border-top:1px solid var(--border-1);
  display:flex; flex-wrap:wrap; gap:2.2rem; align-items:center; justify-content:space-between;
}
footer .logo-img{ height:34px; }
footer nav{ gap:1.6rem; }
footer nav a{ font-size:.85rem; }
.socials a{ color: var(--text-dim); text-decoration:none; font-size:.85rem; font-weight:500; }
.socials a:hover{ color: var(--text); }
.foot-meta{ width:100%; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; padding-top:1.6rem; color: var(--text-dim); font-size:.78rem; }
.foot-meta a{ color: inherit; text-decoration:none; }
.foot-meta a:hover{ color: var(--text); }
.foot-legal{ width:100%; color: var(--text-dim); font-size:.72rem; opacity:.75; padding-top:.4rem; }

/* ---- Plain WordPress page fallback (page.php / index.php) — content not built in Elementor ---- */
.wp-page-content{ position:relative; z-index:2; padding: 140px 5vw 80px; max-width: 900px; margin: 0 auto; }
.wp-page-content h1{ font-size: clamp(2rem, 5vw, 3.2rem); max-width:none; }

/* ---- Programplan: interactive weekly schedule ---- */
.sched-wrap{ position:relative; z-index:2; padding: 140px 5vw 120px; max-width: 760px; margin: 0 auto; }
.sched-head h1{ font-size: clamp(2.2rem, 5vw, 3.2rem); max-width:none; margin-bottom:.6rem; }
.sched-head .sub{ margin-bottom:0; }

/* All 7 days always stay on one row, at every screen size — each tab flexes
   to share the row equally rather than scrolling or wrapping. */
.sched-tabs{ display:flex; gap:.4rem; margin: 2.2rem 0 1.6rem; flex-wrap:nowrap; }
.sched-tab{
  flex:1 1 0; min-width:0;
  padding:.55rem .4rem; border-radius:999px; border:1px solid var(--border-1); background:var(--surface-1);
  color:var(--text-dim); font-weight:600; font-size:.82rem; cursor:pointer; font-family:'Hanken Grotesk',sans-serif;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.sched-tab-abbr{ display:none; }
.sched-tab:hover{ transform: translateY(-1px); color:var(--text); }
.sched-tab.active{
  background: linear-gradient(135deg, var(--orange) 0%, #b1436a 35%, #4a3f8f 65%, var(--blue) 100%);
  color:#fff; border-color:transparent; box-shadow: 0 6px 18px rgba(20,26,44,.18);
}

/* Below ~560px, default to showing only today — tapping it reveals the full
   picker row (abbreviated so all 7 fit), tapping a day there selects it and
   collapses back down to just that day. */
@media (max-width:560px){
  .sched-tab{ padding:.5rem .2rem; font-size:.74rem; }
  .sched-tab-full{ display:none; }
  .sched-tab-abbr{ display:inline; }

  .sched-tabs:not(.is-open) .sched-tab:not(.active){ display:none; }
  .sched-tabs:not(.is-open) .sched-tab.active{
    flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:.35rem;
    padding:.65rem 1rem; font-size:.86rem;
  }
  .sched-tabs:not(.is-open) .sched-tab.active .sched-tab-full{ display:inline; }
  .sched-tabs:not(.is-open) .sched-tab.active .sched-tab-abbr{ display:none; }
  .sched-tabs:not(.is-open) .sched-tab.active::after{ content:'▾'; font-size:.75em; opacity:.85; }
}

.sched-day-name{
  display:flex; overflow:hidden; perspective:280px;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:.02em;
  font-size: clamp(1.4rem, 3.6vw, 2.1rem); color:var(--orange-text); margin-bottom:1.6rem; min-height:1.3em;
}

.sched-timeline{ position:relative; margin-left:54px; border-left:1px solid var(--border-1); }
.sched-hour-mark{ position:absolute; left:-54px; width:44px; font-size:.68rem; color:var(--text-dim); transform: translateY(-50%); text-align:right; }
.sched-hour-mark::after{ content:''; position:absolute; right:-9px; top:50%; width:6px; height:1px; background:var(--border-2); }

.sched-block{
  position:absolute; left:12px; right:0; border-radius:14px; padding:.55rem .95rem; box-sizing:border-box;
  display:block; width:calc(100% - 12px); text-align:left; font-family:inherit; cursor:pointer;
  -webkit-appearance:none; appearance:none; margin:0;
  transition: translate .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sched-block.flagship, .sched-block.filler{
  background: var(--surface-2); border:1px solid var(--border-1); border-left:4px solid var(--orange-text);
}
.sched-block.onair{ border-left-color: var(--blue); box-shadow: 0 6px 20px rgba(58,123,255,.18); }
.sched-block:hover{ translate: 3px 0; box-shadow: 0 6px 18px rgba(20,26,44,.1); border-color: var(--border-2); }
.sched-block.coming-soon{ cursor:default; }
.sched-block.coming-soon:hover{ translate:none; box-shadow:none; border-color: var(--border-1); }
.sched-block .time{ font-size:.68rem; color:var(--text-dim); font-weight:600; letter-spacing:.02em; }
.sched-block .title-row{ display:flex; align-items:center; gap:.5rem; }
.sched-block .title{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1rem; }
.sched-block .onair-badge{
  font-size:.62rem; font-weight:700; letter-spacing:.04em; color:#fff; background:var(--blue);
  border-radius:999px; padding:.1rem .5rem; text-transform:uppercase;
}
.sched-block-hint{
  display:block; font-size:.72rem; font-weight:600; color:var(--orange-text); margin-top:.3rem;
  opacity:0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease;
}
.sched-block:hover .sched-block-hint{ opacity:1; transform:none; }

/* "Coming soon" teaser — ported 1:1 from the live radioflr.dk schedule
   (verified against its actual computed styles/keyframes): a blurred dark
   overlay over the card, a pulsing banner note, and a marquee-scrolled label. */
.sched-block.coming-soon{ overflow:hidden; }
.sched-block-teaser{
  position:absolute; inset:0; z-index:20; border-radius:inherit;
  display:flex; align-items:center; justify-content:center; padding:16px;
  background: linear-gradient(rgba(15,23,42,.55), rgba(15,23,42,.75));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events:auto; cursor:default;
}
.sched-block-teaser-banner{
  background: linear-gradient(135deg, #fbbf24, #f97316);
  color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  font-size:.9rem; line-height:1.3; padding:.55rem 1rem; border-radius:6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); transform: rotate(-4deg);
  text-align:center; max-width:90%;
  animation: schedTeaserPulse 1.8s ease-in-out infinite;
}
.sched-block-teaser-viewport{
  display:inline-block; overflow:hidden; max-width:160px; white-space:nowrap; vertical-align:middle;
}
.sched-block-teaser-text{
  display:inline-block; white-space:nowrap; padding-left:100%;
  animation: schedTeaserMarquee 5s linear infinite;
}
@keyframes schedTeaserPulse{
  0%, 100% { transform: rotate(-4deg) scale(1); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
  50% { transform: rotate(-4deg) scale(1.06); box-shadow: 0 10px 32px rgba(0,0,0,.55); }
}
@keyframes schedTeaserMarquee{
  0% { transform: translateX(0); }
  100% { transform: translateX(-200%); }
}

/* ---- Programplan: click-to-open info box ---- */
.sched-modal-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:5vw; background:rgba(20,17,12,.45); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.sched-modal-overlay.is-open{ opacity:1; pointer-events:auto; }
body.sched-modal-lock{ overflow:hidden; }
.sched-modal{
  position:relative; width:min(100%, 560px); max-height:80vh; overflow-y:auto;
  background:var(--surface-1); border-radius:20px; padding:2.2rem 2.4rem; box-shadow:0 24px 60px rgba(20,26,44,.35);
}
.sched-modal-close{
  position:absolute; top:1rem; right:1rem; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--border-1); background:var(--surface-2); color:var(--text-dim);
  font-size:1.2rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, color .2s ease;
}
.sched-modal-close:hover{ background:var(--border-1); color:var(--text); }
.sched-modal-meta{ font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--orange-text); margin-bottom:.5rem; }
.sched-modal-title{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.6rem; margin:0 0 1rem; max-width:none; }
.sched-modal-text{ font-size:1rem; line-height:1.65; color:var(--text); margin:0; white-space:pre-line; }

.sched-now-line{ position:absolute; left:0; right:0; height:2px; background:var(--orange-text); z-index:5; }
.sched-now-dot{
  position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%;
  background:var(--orange-text); box-shadow:0 0 0 4px rgba(166,74,6,.22); animation: pulse 1.4s infinite;
}

/* ---- Værter: collective archive + individual host pages ---- */
.vaert-wrap{ position:relative; z-index:2; padding: 140px 5vw 120px; max-width: 1100px; margin: 0 auto; }
.vaert-hero{ text-align:center; margin-bottom: 3rem; }
.vaert-hero h1{ font-size: clamp(2.2rem, 5vw, 3.2rem); max-width:none; margin: 0 auto .6rem; }
.vaert-hero .sub{ max-width: 46ch; margin: 0 auto; }

.vaert-avatar{
  position:relative; border-radius:50%; overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; color:#fff;
}
.vaert-avatar img{ width:100%; height:100%; object-fit:cover; }
.vaert-avatar--sm{ width:88px; height:88px; font-size:2.1rem; margin-bottom:1.1rem; }
.vaert-avatar--lg{ width:168px; height:168px; font-size:4rem; margin: 0 auto 1.4rem; box-shadow: 0 14px 34px rgba(20,26,44,.22); }

.vaert-tone-1{ background: linear-gradient(135deg, var(--orange) 0%, #b1436a 100%); }
.vaert-tone-2{ background: linear-gradient(135deg, #b1436a 0%, #4a3f8f 100%); }
.vaert-tone-3{ background: linear-gradient(135deg, #4a3f8f 0%, var(--blue) 100%); }

.vaert-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:1.4rem; }
.vaert-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  border-radius:22px; padding:2.2rem 1.6rem; border:1px solid var(--border-1);
  background:var(--surface-1); text-decoration:none; color:inherit;
  transition: translate .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.vaert-card:hover{ translate: 0 -4px; box-shadow: 0 14px 34px rgba(20,26,44,.12); border-color: var(--border-2); }
.vaert-card-name{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.15rem; margin-bottom:.5rem; }
.vaert-card-excerpt{ color:var(--text-dim); font-size:.88rem; line-height:1.5; margin-bottom:1.2rem; }
.vaert-card-link{ color:var(--orange-text); font-weight:600; font-size:.86rem; display:inline-flex; align-items:center; gap:.4rem; transition: gap .2s ease; margin-top:auto; }
.vaert-card:hover .vaert-card-link{ gap:.65rem; }

.vaert-single{ max-width: 720px; }
.vaert-back{ display:inline-block; color:var(--text-dim); text-decoration:none; font-size:.9rem; font-weight:600; margin-bottom:2.2rem; transition: color .2s ease; }
.vaert-back:hover{ color:var(--text); }
.vaert-single-head{ text-align:center; margin-bottom:2rem; }
.vaert-single-head h1{ max-width:none; margin:0; font-size: clamp(2rem, 4.5vw, 2.8rem); }
.vaert-single-body{ font-size:1.05rem; line-height:1.7; color:var(--text); }
.vaert-single-body p{ margin: 0 0 1.2em; }


/* =====================================================================
 * 1.3.0 — soft navigation, persistent player/chat, pop-out chat
 * ===================================================================== */

/* The swappable page region must not add a box of its own (the chat page lays
   its children out with flexbox directly on <body>). */
#flr-side{ display:contents; }

/* Thin progress bar while the next page loads */
.flr-nav-bar{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:100; pointer-events:none;
  background: linear-gradient(90deg, var(--orange), var(--blue));
  opacity:0; transition: width .25s ease, opacity .3s ease;
}
.flr-nav-bar.is-active{ width:70%; opacity:1; transition: width 8s cubic-bezier(.1,.6,.2,1), opacity .2s ease; }

/* Chat link in the menu: green dot while connected, count of unread messages */
nav a[data-nav="chat"]{ position:relative; display:inline-flex; align-items:center; gap:.35rem; }
nav a.chat-forbundet::before{
  content:''; width:7px; height:7px; border-radius:50%; background:#1f9d55; box-shadow:0 0 0 3px rgba(31,157,85,.15);
}
.nav-badge{
  min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--orange); color:#fff;
  font-size:.68rem; font-weight:700; line-height:18px; text-align:center;
}

/* "Continue listening" after a full reload */
.player-pill.is-resume .mini-np::before{ content:'Tryk for at fortsætte · '; font-weight:700; white-space:pre; }
.player-pill.is-resume .play-btn .ring{ animation: ring-pulse 1.8s ease-out infinite; }

/* ---- Chat page: header row with tabs + pop-out button ---- */
.chat-topbar{ display:flex; align-items:flex-end; gap:.6rem; padding-right:1rem; }
.chat-topbar .chat-tabs{ flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
.chat-topbar .chat-tabs::-webkit-scrollbar{ display:none; }
.chat-popout{
  flex:none; display:inline-flex; align-items:center; gap:.4rem; margin-bottom:.15rem;
  background:none; border:1px solid var(--border-2); border-radius:99px; padding:.4rem .8rem;
  font: 500 .8rem 'Hanken Grotesk', sans-serif; color:var(--text-dim); cursor:pointer;
  transition: color .2s, border-color .2s;
}
.chat-popout:hover{ color:var(--text); border-color:var(--text-dim); }

/* User list heading is a button (it folds the list on small screens) */
.chat-sidebar-head{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; border-bottom:1px solid var(--border-1); text-align:left; font-family:inherit; cursor:default;
}
.chat-sidebar-caret{ display:none; transition: transform .2s ease; }

/* ---- Sticky player docked at the bottom of the user list ---- */
.chat-player-slot{ flex:none; }
.chat-player-slot:empty{ display:none; }
.sticky-player.is-docked{ position:static; display:block; pointer-events:auto; z-index:auto; }
.sticky-player.is-docked .sticky-player__inner{
  width:100%; border-radius:0; padding:.85rem 1rem; gap:.7rem .9rem; flex-wrap:wrap; box-shadow:none;
}
.sticky-player.is-docked .player-pill{ flex:1 1 100%; gap:.8rem; }
.sticky-player.is-docked .play-btn{ width:44px; height:44px; }
.sticky-player.is-docked .mini-np{ font-size:.88rem; }
.sticky-player.is-docked .sp-volume{ flex:1 1 100%; display:flex; }
.sticky-player.is-docked .sp-volume-slider{ flex:1; width:auto; }
body.chat-player-docked.chat-page .chat-shell{ margin-bottom:0; }

/* ---- Chat page fits the screen on every size ---- */
body.chat-page{ height:100vh; height:100dvh; }
@media (max-width: 780px){
  body.chat-page .chat-shell{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; gap:.6rem; }
  .chat-sidebar-head{ cursor:pointer; padding:.75rem 1rem; }
  .chat-sidebar-caret{ display:inline; }
  .chat-shell.users-open .chat-sidebar-caret{ transform: rotate(180deg); }
  .chat-shell .chat-userlist{ display:none; }
  .chat-shell.users-open .chat-userlist{ display:block; max-height:38vh; }
  .sticky-player.is-docked .player-pill{ flex:1 1 auto; }
  .sticky-player.is-docked .sp-volume{ flex:0 1 160px; }
  .chat-popout span{ display:none; }
  .chat-input-row{ padding:.7rem; gap:.5rem; }
}
@media (max-width: 520px){
  .sticky-player.is-docked .sp-volume{ display:none; }
}

/* ---- "The chat is running in its own window" notice ---- */
.chat-shell{ position:relative; }
.chat-handover{
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:1rem;
  background: rgba(247,248,252,.8); backdrop-filter: blur(6px);
}
.chat-handover[hidden]{ display:none; }
.chat-handover .btn{ width:100%; justify-content:center; }
.chat-handover-her{
  margin-top:.9rem; background:none; border:none; color:var(--link); font: 500 .88rem 'Hanken Grotesk', sans-serif;
  cursor:pointer; text-decoration:underline;
}

/* ---- Pop-out chat window (/chat/?vindue=1): chat + player only ---- */
body.chat-vindue header, body.chat-vindue .aurora, body.chat-vindue .noise{ display:none; }
body.chat-vindue .chat-shell{ margin:0; gap:0; }
body.chat-vindue .chat-main{ border-width:0 1px 0 0; }
body.chat-vindue .chat-sidebar{ border-width:0; }
@media (max-width: 780px){
  body.chat-vindue .chat-main{ border-width:0 0 1px 0; }
}

/* ---- Nyheder: "Nyt fra Faxe" from Lokalavisen Faxe ---- */
.nyheder-side{ max-width: 1040px; }
.nyheder-egne{ max-width: 760px; }
.lokalnyt{ padding:0; margin-top: 4.5rem; }
.lokalnyt-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.4rem 1.2rem; margin-bottom:1.6rem; padding-bottom:.9rem; border-bottom:1px solid var(--border-1); }
.lokalnyt-head h2{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin:0; }
.lokalnyt-head p{ margin:0; color:var(--text-dim); font-size:.92rem; }
.lokalnyt-head a, .lokalnyt-kilde a, .lokalnyt-tom a{ color:var(--link); }
.lokalnyt-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1.2rem; }
.lokalnyt-kort{
  display:flex; flex-direction:column; text-decoration:none; color:inherit; overflow:hidden;
  border-radius:18px; border:1px solid var(--border-1); background: rgba(255,255,255,.55);
  /* Hover lift uses the separate "translate" property, so it never fights the
     GSAP entrance animation, which animates "transform". */
  transition: translate .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lokalnyt-kort:hover{ translate: 0 -3px; box-shadow: 0 14px 34px rgba(20,26,44,.10); border-color: rgba(255,122,26,.35); }
.lokalnyt-kort:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.lokalnyt-billede{ display:block; aspect-ratio: 4/3; background: var(--surface-2); overflow:hidden; }
/* All image areas are the same size (4:3 suits the paper's mostly square photos);
   any trimming is taken mainly from the bottom, so heads and faces stay in view */
.lokalnyt-billede img{ width:100%; height:100%; object-fit:cover; object-position:50% 25%; display:block; }
.lokalnyt-tekst{ display:flex; flex-direction:column; gap:.55rem; padding:1.1rem 1.2rem 1.25rem; flex:1; }
.lokalnyt-meta{ display:flex; align-items:center; gap:.6rem; font-size:.74rem; color:var(--text-dim); }
.lokalnyt-kat{ font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--orange-text); }
.lokalnyt-titel{ font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:1.12rem; line-height:1.28; }
.lokalnyt-uddrag{ font-size:.9rem; line-height:1.5; color:var(--text-dim); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.lokalnyt-link{ margin-top:auto; padding-top:.3rem; font-size:.84rem; font-weight:600; color:var(--link); }
.lokalnyt-kort.uden-billede{ background: linear-gradient(160deg, rgba(255,122,26,.07), rgba(255,255,255,.55) 55%); }
/* The newest story gets a wide card */
.lokalnyt-kort--top{ grid-column: span 2; }
.lokalnyt-kort--top .lokalnyt-titel{ font-size: clamp(1.3rem, 2.4vw, 1.65rem); }
.lokalnyt-kort--top:not(.uden-billede){ flex-direction:row; }
.lokalnyt-kort--top:not(.uden-billede) .lokalnyt-billede{ flex:0 0 50%; aspect-ratio:auto; }
/* Landscape photo in the top card: photo across the full width, text below */
.lokalnyt-kort--top.lokalnyt-kort--liggende{ flex-direction:column; }
.lokalnyt-kort--top.lokalnyt-kort--liggende .lokalnyt-billede{ flex:none; aspect-ratio:16/9; }
.lokalnyt-kilde{ margin:1.4rem 0 0; font-size:.9rem; }
.lokalnyt-tom{ color:var(--text-dim); }
@media (max-width: 900px){
  .lokalnyt-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .lokalnyt-grid{ grid-template-columns: 1fr; }
  .lokalnyt-kort--top{ grid-column:auto; }
  .lokalnyt-kort--top:not(.uden-billede){ flex-direction:column; }
  .lokalnyt-kort--top:not(.uden-billede) .lokalnyt-billede{ flex:none; aspect-ratio:4/3; }
  .lokalnyt-kort--top.lokalnyt-kort--liggende .lokalnyt-billede{ aspect-ratio:16/9; }
}

/* ---- Programplan: the timeline scrolls in its own box, opening at the current hour ---- */
.sched-scroll{
  position:relative; height: min(60vh, 560px); overflow-y:auto; overscroll-behavior:contain;
  padding: 12px 6px 12px 0; margin-right:-6px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
  scrollbar-width: thin;
}
.sched-hour-mark.minor{ opacity:.55; }
@media (max-width:560px){ .sched-scroll{ height: 58vh; } }

/* The nickname box covers only the chat column, so the user list and the docked player stay usable. */
.chat-main{ position:relative; }
.chat-main .nick-modal{ position:absolute; z-index:6; padding:1rem; }
.chat-main .nick-box{ width:min(100%, 380px); }

/* Pop-out opened from a connected chat: never flash the nickname box. */
.chat-auto .nick-modal{ display:none !important; }

/* Restored chat history: a quiet label above the earlier messages */
.chat-divider{
  display:flex; align-items:center; gap:.7rem; margin:0 0 1rem; color:var(--text-dim);
  font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.chat-divider::after{ content:''; flex:1; height:1px; background:var(--border-1); }

/* =====================================================================
 * RadioFLR-profil: login, profile, menu link (data from flr-users)
 * ===================================================================== */
.nav-konto{ display:inline-flex; align-items:center; gap:.45rem; }
.nav-konto:not(.is-inde){
  border:1px solid var(--border-2); border-radius:99px; padding:.35rem .9rem; color:var(--text);
}
.nav-konto:not(.is-inde):hover{ border-color: var(--orange); }
.nav-konto-billede{
  width:26px; height:26px; border-radius:50%; overflow:hidden; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--orange), var(--blue)); color:#fff; font-size:.75rem; font-weight:700;
}
.nav-konto-billede img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:860px){ header nav .nav-konto:not(.is-inde){ border:none; padding:.95rem 0; border-radius:0; border-bottom:1px solid var(--border-1); } }

.konto-wrap{ position:relative; z-index:2; padding: 140px 5vw 140px; max-width: 520px; margin: 0 auto; }
.konto-wrap--profil{ max-width: 640px; }
.konto-head h1, .profil-navn{ font-size: clamp(2.1rem, 5vw, 3rem); max-width:none; margin-bottom:.5rem; }
.konto-head .sub{ margin-bottom:1.8rem; }
.konto-kort{
  border-radius:22px; padding:1.8rem; border:1px solid var(--border-1);
  background: rgba(255,255,255,.6); backdrop-filter: blur(8px); box-shadow: 0 14px 40px rgba(20,26,44,.06);
}
.konto-kort + .konto-kort{ margin-top:1.2rem; }
.konto-kort h2{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:1.25rem; margin:0 0 .8rem; }
.konto-login .btn, .konto-logget .btn{ width:100%; justify-content:center; }
.konto-passkey{ gap:.6rem; }
.konto-hint{ color:var(--text-dim); font-size:.88rem; line-height:1.5; margin:.7rem 0 0; }
.konto-eller{ display:flex; align-items:center; gap:.8rem; margin:1.6rem 0 1.2rem; color:var(--text-dim); font-size:.8rem; }
.konto-eller::before, .konto-eller::after{ content:''; flex:1; height:1px; background:var(--border-1); }
.konto-form{ display:flex; flex-direction:column; gap:.55rem; }
.konto-form label{ font-size:.85rem; font-weight:600; }
.konto-form input, .konto-form textarea{
  font: 500 1rem 'Hanken Grotesk', sans-serif; color:var(--text);
  padding:.85rem 1rem; border-radius:14px; border:1px solid var(--border-2); background:#fff; outline:none; width:100%; box-sizing:border-box;
}
.konto-form textarea{ resize:vertical; min-height:84px; }
.konto-form input:focus, .konto-form textarea:focus{ border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,26,.18); }
#kontoKode{ font-size:1.5rem; letter-spacing:.4em; text-align:center; }
.konto-form .btn{ margin-top:.4rem; justify-content:center; }
.konto-btn-sekundaer{ background:#fff; color:var(--text); border:1px solid var(--border-2); box-shadow:none; }
.konto-btn-sekundaer:hover{ border-color:var(--orange); box-shadow:none; }
.konto-link{
  background:none; border:none; padding:.3rem 0; color:var(--link); cursor:pointer;
  font: 500 .88rem 'Hanken Grotesk', sans-serif; text-decoration:underline; align-self:center;
}
.konto-fejl{ margin:1rem 0 0; padding:.8rem 1rem; border-radius:12px; background:rgba(224,48,74,.08); color:var(--red-light); font-size:.9rem; line-height:1.45; }
.konto-ny{ color:var(--text-dim); font-size:.88rem; line-height:1.55; margin-top:1.4rem; }
.konto-henter{ color:var(--text-dim); padding-top:2rem; }
.btn.is-busy, .btn:disabled{ opacity:.6; cursor:progress; transform:none; }
.konto-raekke{ display:flex; align-items:center; flex-wrap:wrap; gap:.8rem 1.4rem; }
.konto-gemt{ color:#1f9d55; font-weight:600; font-size:.9rem; }

.profil-top{ display:flex; align-items:center; gap:1.4rem; margin-bottom:1.8rem; }
.profil-top .profil-navn{ margin:0 0 .2rem; font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
.profil-mail{ margin:0; color:var(--text-dim); font-size:.92rem; word-break:break-all; }
.profil-rolle{ display:inline-block; margin-top:.5rem; padding:.15rem .6rem; border-radius:99px; background:var(--blue); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.profil-billede{
  position:relative; width:96px; height:96px; border-radius:50%; flex:none; overflow:hidden; padding:0; cursor:pointer;
  border:3px solid #fff; box-shadow: 0 8px 24px rgba(20,26,44,.15);
  background: linear-gradient(135deg, var(--orange), var(--blue));
}
.profil-billede img{ width:100%; height:100%; object-fit:cover; display:block; }
.profil-initial{ color:#fff; font: 800 2.4rem 'Bricolage Grotesque', sans-serif; }
.profil-billede-skift{
  position:absolute; inset:auto 0 0; padding:.3rem 0 .4rem; background:rgba(15,24,48,.6); color:#fff;
  font-size:.66rem; font-weight:600; opacity:0; transition:opacity .2s;
}
.profil-billede:hover .profil-billede-skift, .profil-billede:focus-visible .profil-billede-skift{ opacity:1; }
.profil-billede.is-busy{ opacity:.6; cursor:progress; }
.profil-noegler{ list-style:none; margin:1rem 0; padding:0; }
.profil-noegler li{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0; border-top:1px solid var(--border-1); }
.profil-noegler li:last-child{ border-bottom:1px solid var(--border-1); }
.profil-noegle-tekst{ display:flex; flex-direction:column; gap:.15rem; font-size:.9rem; }
.profil-noegle-tekst span{ color:var(--text-dim); font-size:.8rem; }
.profil-noegle-tom{ color:var(--text-dim); font-size:.9rem; }
@media (max-width:520px){
  .konto-wrap{ padding-top:110px; }
  .konto-kort{ padding:1.3rem; }
  .profil-billede{ width:76px; height:76px; }
}

.nick-konto{ margin:1.1rem 0 0 !important; font-size:.84rem !important; }
.nick-konto a{ color:var(--link); font-weight:600; }

/* [hidden] must win over the display rules above */
.konto-wrap [hidden], .konto-wrap[hidden]{ display:none !important; }

/* Visible to screen readers and search engines only */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- Kontakt ---- */
.kontakt-side{ max-width: 980px; }
.kontakt-side .sub{ max-width: 52ch; }
.kontakt-intro{ max-width: 680px; }
.kontakt-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1.2rem; margin-top:2rem; }
.kontakt-kort{
  display:flex; flex-direction:column; gap:.45rem; padding:1.5rem 1.6rem; border-radius:20px; text-decoration:none; color:inherit;
  border:1px solid var(--border-1); background: rgba(255,255,255,.6); transition: translate .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kontakt-kort:hover{ translate: 0 -3px; box-shadow: 0 14px 34px rgba(20,26,44,.1); border-color: rgba(255,122,26,.35); }
.kontakt-label{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-text); }
.kontakt-vaerdi{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:1.35rem; word-break:break-word; }
.kontakt-tekst{ color:var(--text-dim); font-size:.92rem; line-height:1.5; }
.kontakt-kort--annonce{ border-style:dashed; }
.kontakt-adresse{ margin-top:2rem; color:var(--text-dim); font-size:.9rem; }
@media (max-width: 640px){ .kontakt-grid{ grid-template-columns: 1fr; } }

/* ---- Single news post ---- */
.artikel{ max-width: 760px; }
.artikel-meta{ color:var(--text-dim); font-size:.85rem; margin: 1.6rem 0 .3rem; }
.artikel-billede{ margin: 1.4rem 0; }
.artikel-billede img{ width:auto; max-width:100%; height:auto; border-radius:18px; display:block; margin:0 auto; }
.artikel-indhold{ font-size:1.05rem; line-height:1.7; }
.artikel-indhold img{ max-width:100%; height:auto; border-radius:12px; }

/* Own news (Nyt fra RadioFLR) reuse the Lokalavisen cards */
.egnenyt{ margin-top: 3rem; }
.egnenyt + .lokalnyt{ margin-top: 4rem; }

/* Own news without a photo: a RadioFLR brand panel that fills the whole image area */
.egnenyt-brand{
  display:flex; align-items:center; justify-content:center; padding:1.6rem;
  background:
    radial-gradient(circle at 78% 18%, rgba(255,122,26,.42), rgba(255,122,26,0) 58%),
    radial-gradient(circle at 18% 92%, rgba(58,123,255,.30), rgba(58,123,255,0) 55%),
    linear-gradient(135deg, #fbf3ec, #eef1fb);
}
.lokalnyt-billede.egnenyt-brand img{ width:min(76%, 340px); height:auto; object-fit:contain; filter: drop-shadow(0 6px 18px rgba(20,26,44,.10)); }
.lokalnyt-kort:hover .egnenyt-brand img{ transform: scale(1.03); transition: transform .3s ease; }
/* A logo, banner or small graphic: shown whole on the brand panel instead of cropped */
.lokalnyt-billede.egnenyt-hel img{ width:auto; height:auto; max-width:min(84%, 420px); max-height:80%; }

/* ---- Cookie banner (inc/cookies.php): a cookie with headphones and a bite out ---- */
.cookie-banner{
  position:fixed; z-index:60; left:1rem; bottom:104px; width:min(440px, calc(100vw - 2rem));
  display:grid; grid-template-columns:auto 1fr; column-gap:.9rem; align-items:center;
  padding:1.2rem 1.25rem 1.05rem; border-radius:18px; border:1px solid var(--border-1); border-top:3px solid var(--orange);
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  box-shadow: 0 22px 60px rgba(20,26,44,.22);
  opacity:0; transform: translateY(24px) scale(.96); transition: opacity .3s ease, transform .45s cubic-bezier(.2,.9,.3,1.25);
}
.cookie-banner.is-synlig{ opacity:1; transform:none; }
.cookie-banner[hidden]{ display:none; }
.cookie-kage{ width:88px; height:88px; animation: kage-vip 3.2s ease-in-out .6s infinite; transform-origin: 50% 70%; }
.cookie-krummer circle{ animation: kage-krumme 3.2s ease-in-out .6s infinite; }
.cookie-krummer circle:nth-child(2){ animation-delay:.75s; }
.cookie-krummer circle:nth-child(3){ animation-delay:.9s; }
.cookie-boelger path{ animation: kage-boelge 1.6s ease-in-out infinite; }
@keyframes kage-vip{ 0%,62%,100%{ transform: rotate(0); } 70%{ transform: rotate(-9deg); } 78%{ transform: rotate(7deg); } 86%{ transform: rotate(-4deg); } }
@keyframes kage-krumme{ 0%,60%{ transform:none; opacity:1; } 90%{ transform: translateY(14px); opacity:0; } 100%{ opacity:0; } }
@keyframes kage-boelge{ 0%,100%{ opacity:.15; } 50%{ opacity:.9; } }
.cookie-indhold{ min-width:0; }
.cookie-titel{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:1.18rem; line-height:1.15; margin:0; }
.cookie-tekst{ font-size:.86rem; line-height:1.5; color:var(--text-dim); margin:.5rem 0 0; }
.cookie-tekst a{ color:var(--link); font-weight:600; }
.cookie-valg{ display:grid; gap:.55rem; margin:.9rem 0 0; padding:.8rem; border-radius:10px; background:var(--bg); border:1px solid var(--border-1); }
.cookie-valg[hidden]{ display:none; }
.cookie-valg label{ display:flex; gap:.6rem; align-items:flex-start; font-size:.84rem; line-height:1.4; color:var(--text-dim); cursor:pointer; }
.cookie-valg strong{ display:block; color:var(--text); }
.cookie-valg input{ accent-color: var(--orange); width:1.05rem; height:1.05rem; margin-top:.1rem; flex:none; }
.cookie-knapper{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-top:1rem; }
.cookie-knap{
  font: 700 .86rem 'Hanken Grotesk', sans-serif; border:none; border-radius:999px; padding:.8rem .7rem; cursor:pointer; white-space:nowrap;
  background: var(--orange); color:#100800; transition: translate .2s ease, box-shadow .2s ease;
}
.cookie-knap:hover{ translate: 0 -1px; box-shadow: 0 6px 16px rgba(255,122,26,.35); }
.cookie-knap--gem, .cookie-knap--hel{ grid-column:1 / -1; }
.cookie-knap[hidden], .cookie-tilpas[hidden]{ display:none; }
.cookie-tilpas{ grid-column:1 / -1; justify-self:center; background:none; border:0; padding:.2rem; cursor:pointer; font: 600 .82rem 'Hanken Grotesk', sans-serif; color:var(--text-dim); text-decoration:underline; }
.cookie-tilpas:hover{ color:var(--text); }
body.chat-player-docked .cookie-banner{ bottom:16px; }
@media (max-width: 640px){
  .cookie-banner{ left:.75rem; right:.75rem; width:auto; bottom:92px; }
  .cookie-kage{ width:68px; height:68px; }
  .cookie-titel{ font-size:1.05rem; }
  .cookie-knap{ white-space:normal; }
}
@media (prefers-reduced-motion: reduce){ .cookie-banner, .cookie-kage, .cookie-krummer circle, .cookie-boelger path{ animation:none !important; transition:none !important; } }

/* ---- Cookie page ---- */
.cookie-side{ max-width: 860px; }
.cookie-side h2{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; margin:2.2rem 0 .5rem; }
.cookie-side p, .cookie-liste{ line-height:1.6; }
.cookie-dit-valg{ margin-left:.8rem; color:var(--text-dim); font-size:.88rem; }
.cookie-tabel-wrap{ overflow-x:auto; }
.cookie-tabel{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:520px; }
.cookie-tabel th, .cookie-tabel td{ text-align:left; padding:.65rem .7rem; border-bottom:1px solid var(--border-1); vertical-align:top; }
.cookie-tabel th{ font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); }
.cookie-tabel td:first-child{ font-family: ui-monospace, Consolas, monospace; font-size:.82rem; }
.cookie-side a:not(.btn){ color:var(--link); }

/* Host page: the programmes they host */
.vaert-avatar img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.vaert-programmer{ margin-top:2.6rem; }
.vaert-programmer h2{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:1.4rem; margin:0 0 .9rem; }
.vaert-programmer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.vaert-programmer a{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; padding:.9rem 1.1rem; border-radius:14px;
  border:1px solid var(--border-1); background: rgba(255,255,255,.6); color:inherit; text-decoration:none; transition: translate .2s ease, border-color .2s ease;
}
.vaert-programmer a:hover{ translate: 3px 0; border-color: rgba(255,122,26,.4); }
.vaert-programmer span{ color:var(--text-dim); font-size:.88rem; }

/* The login/profile link belongs in the header only */
footer .nav-konto{ display:none; }

/* =====================================================================
 * 1.4.0 — Følg programmer og værter + notifikationer (same as the app)
 * ===================================================================== */
.folg-knap{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  padding:.5rem 1rem .5rem .8rem; border-radius:999px; border:1px solid var(--border-2);
  background:#fff; color:var(--text); font: 700 .88rem 'Hanken Grotesk', sans-serif;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.folg-knap[hidden]{ display:none; }
.folg-knap:hover{ border-color:var(--orange); }
.folg-knap:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.folg-knap[aria-pressed="true"]{ background:var(--orange); border-color:var(--orange); color:#100800; }
.folg-ikon{ width:1.1em; text-align:center; font-weight:800; }
.folg-ikon::before{ content:'+'; }
.folg-knap[aria-pressed="true"] .folg-ikon::before{ content:'✓'; }

/* Host overview: the button sits in the card's corner (outside the link) */
.vaert-kort{ position:relative; display:flex; }
.vaert-kort > .vaert-card{ flex:1; }
.folg-knap--hjoerne{ position:absolute; top:.8rem; right:.8rem; padding:.35rem .8rem .35rem .6rem; font-size:.8rem; }
.vaert-single-head .folg-knap{ margin-top:1rem; }

/* Programplan: info box button + mark on followed programmes */
.sched-modal-folg:not(:empty){ margin-top:1.4rem; }
.sched-fulgt{ color:var(--orange-text); font-size:.85em; margin-left:.35rem; }

/* Profile: switches and choices */
.notif-intro{ margin:0 0 1rem; }
.notif-gruppe{ padding:1rem 0; border-top:1px solid var(--border-1); }
.notif-gruppe:last-of-type{ padding-bottom:.4rem; }
.notif-skift{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.45rem 0; cursor:pointer; }
.notif-tekst{ display:flex; flex-direction:column; gap:.15rem; font-size:.95rem; }
.notif-tekst span{ color:var(--text-dim); font-size:.82rem; }
.notif-skift input[role="switch"]{
  appearance:none; -webkit-appearance:none; flex:none; margin:0; cursor:pointer;
  width:44px; height:26px; border-radius:99px; background:var(--border-2); position:relative; transition: background .2s ease;
}
.notif-skift input[role="switch"]::after{
  content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(20,26,44,.3); transition: translate .2s ease;
}
.notif-skift input[role="switch"]:checked{ background:var(--orange); }
.notif-skift input[role="switch"]:checked::after{ translate:18px 0; }
.notif-skift input[role="switch"]:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.notif-skift input[role="switch"]:disabled{ opacity:.45; cursor:not-allowed; }
.notif-skift input.is-busy{ opacity:.6; }
.notif-under{ margin-left:1rem; padding-left:1rem; border-left:2px solid var(--border-1); }
.notif-gruppe.is-slukket .notif-under{ opacity:.45; }
.notif-gruppe.is-slukket .notif-under .folg-knap{ pointer-events:none; }
.folg-vaelg{ margin-top:.6rem; }
.folg-vaelg h3{ font-size:.92rem; margin:0; }
.folg-vaelg .konto-hint{ margin:.15rem 0 .7rem; }
.notif-gruppe.is-alle .folg-vaelg{ opacity:.55; }
.folg-liste{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.folg-knap--chip{ padding:.4rem .8rem; font-weight:600; font-size:.85rem; }
.folg-knap--chip .folg-ikon{ order:2; }
.folg-foto{
  width:26px; height:26px; margin-left:-.4rem; border-radius:50%; overflow:hidden; flex:none;
  display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; color:#fff;
  background: linear-gradient(135deg, var(--orange), var(--blue));
}
.folg-foto img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Small message after following (konto.js) */
.flr-toast{
  position:fixed; left:50%; bottom:110px; z-index:300; width:min(92vw, 460px);
  translate:-50% 12px; opacity:0; pointer-events:none;
  padding:.9rem 1.1rem; border-radius:14px; background:var(--navy); color:#fff; font-size:.9rem; line-height:1.45;
  box-shadow:0 14px 40px rgba(15,24,48,.35); transition: opacity .25s ease, translate .25s ease;
}
.flr-toast.is-vist{ opacity:1; translate:-50% 0; pointer-events:auto; }
.flr-toast a{ color:var(--amber); font-weight:700; }
@media (prefers-reduced-motion: reduce){ .flr-toast, .folg-knap, .notif-skift input[role="switch"], .notif-skift input[role="switch"]::after{ transition:none; } }