/* =========================================================
   Piratenkanjers Pro Skin 2026
   Doel: moderne hoofdsite zonder bestaande functies te breken.
   Deze file wordt als laatste geladen en overschrijft alleen de presentatie.
========================================================= */
:root{
  --pk-bg:#020817;
  --pk-panel:rgba(6,14,28,.78);
  --pk-panel-strong:rgba(4,10,20,.92);
  --pk-line:rgba(255,215,0,.22);
  --pk-line-strong:rgba(255,215,0,.55);
  --pk-text:#f8fbff;
  --pk-muted:#b9c8da;
  --pk-gold:#ffd700;
  --pk-cyan:#18e7ff;
  --pk-green:#22c55e;
  --pk-pink:#db2777;
  --pk-radius:22px;
  --pk-shadow:0 24px 80px rgba(0,0,0,.48);
  --pk-soft-shadow:0 14px 38px rgba(0,0,0,.34);
}

html{background:var(--pk-bg);}
body{
  min-height:100vh;
  color:var(--pk-text);
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 18% 10%, rgba(24,231,255,.12), transparent 26%),
    radial-gradient(circle at 78% 0%, rgba(255,215,0,.09), transparent 24%),
    linear-gradient(180deg, rgba(1,6,18,.40), rgba(1,6,18,.78)),
    url('/assets/img/background.jpg') center top/cover fixed no-repeat;
}
body::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.26)),
    radial-gradient(circle at 50% 0%, rgba(24,231,255,.09), transparent 42%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.50), transparent 72%);
}

a{transition:color .18s ease, transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;}

/* Header */
.site-header{
  width:min(1280px, calc(100% - 32px));
  margin:22px auto 0;
  padding:18px 22px 16px;
  border:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid var(--pk-line-strong);
  border-radius:0 0 28px 28px;
  background:linear-gradient(135deg, rgba(3,10,23,.84), rgba(3,10,23,.58));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--pk-shadow);
}
.header-top{
  gap:26px;
}
.logo img{
  height:auto !important;
  width:min(680px, 62vw) !important;
  max-height:170px;
  object-fit:contain;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.42));
}
@media (min-width:769px){
  .header-top{grid-template-columns:1fr auto 1fr;}
}
#pkLiveWrap{align-self:center;}
.main-nav{margin-top:16px;}
.main-nav ul{
  gap:12px;
  align-items:center;
}
.main-nav ul li a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:46px;
  padding:10px 17px;
  border-radius:14px;
  color:#f7fbff;
  background:linear-gradient(180deg, rgba(255,215,0,.16), rgba(255,215,0,.06));
  border:1px solid rgba(255,215,0,.27);
  box-shadow:0 10px 24px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.05);
}
.main-nav ul li a:hover,
.main-nav ul li a:focus-visible{
  color:#071120;
  background:linear-gradient(180deg, #fff2a8, var(--pk-gold));
  border-color:rgba(255,255,255,.55);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(255,215,0,.17), 0 16px 34px rgba(0,0,0,.30);
}
.nav-icon{filter:drop-shadow(0 0 8px rgba(255,215,0,.24));}
.persistent-player{
  margin:18px -22px -16px;
  border-top:1px solid rgba(255,215,0,.32);
  background:rgba(0,0,0,.36);
  overflow:hidden;
  border-radius:0 0 26px 26px;
}
.persistent-player iframe{height:96px;border-radius:0;}

/* Layout */
.container{
  width:min(1280px, calc(100% - 32px));
  max-width:none;
  margin:24px auto 48px;
  gap:24px;
}
.content{
  background:linear-gradient(180deg, rgba(4,10,20,.70), rgba(4,10,20,.50));
  border:1px solid rgba(255,255,255,.08);
  border-top-color:rgba(255,215,0,.28);
  border-radius:var(--pk-radius);
  box-shadow:var(--pk-shadow);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:28px;
}
.sidebar{max-width:350px;}
.widget,
.card,
.nowplaying-box,
.program-today,
.playing-request-box,
#next-request-container > *{
  background:linear-gradient(180deg, rgba(4,10,20,.78), rgba(4,10,20,.56));
  border:1px solid rgba(255,255,255,.08);
  border-left:1px solid rgba(255,215,0,.42);
  border-radius:20px;
  box-shadow:var(--pk-soft-shadow);
}
.widget{padding:18px;}
.widget h3,
.content h1,
.content h2,
.content h3{
  letter-spacing:.01em;
}
.content h1{font-size:clamp(2rem, 3.8vw, 4rem);line-height:1.05;margin:0 0 18px;}
.content h2{font-size:clamp(1.35rem, 2vw, 2rem);margin:26px 0 14px;}
.accent, .widget h3, .content h2 .accent{color:var(--pk-gold);}

/* Nieuwe homepage hero */
.pk-pro-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,.72fr);
  gap:24px;
  align-items:stretch;
  padding:32px;
  margin-bottom:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:28px;
  background:
    radial-gradient(circle at 20% 20%, rgba(24,231,255,.14), transparent 28%),
    radial-gradient(circle at 76% 0%, rgba(255,215,0,.14), transparent 24%),
    linear-gradient(135deg, rgba(5,16,34,.96), rgba(3,7,15,.82));
  box-shadow:0 30px 90px rgba(0,0,0,.46);
}
.pk-pro-hero::after{
  content:"";
  position:absolute;
  inset:auto -15% -38% 18%;
  height:200px;
  background:radial-gradient(ellipse, rgba(24,231,255,.20), transparent 68%);
  transform:rotate(-5deg);
  pointer-events:none;
}
.pk-pro-hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;}
.pk-pro-kicker{
  display:inline-flex;
  width:fit-content;
  margin-bottom:12px;
  padding:7px 12px;
  color:#071120;
  background:linear-gradient(180deg, #fff2a8, var(--pk-gold));
  border-radius:999px;
  font-weight:950;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.pk-pro-hero h1{
  margin:0;
  max-width:820px;
  font-size:clamp(2.35rem, 5vw, 5.7rem);
  line-height:.96;
  text-wrap:balance;
  text-shadow:0 12px 40px rgba(0,0,0,.42);
}
.pk-pro-hero p{
  max-width:720px;
  margin:18px 0 0;
  color:var(--pk-muted);
  font-size:clamp(1.05rem, 1.5vw, 1.25rem);
}
.pk-pro-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.pk-pro-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.07);
  text-decoration:none;
  font-weight:900;
}
.pk-pro-btn:hover{transform:translateY(-2px);border-color:rgba(255,215,0,.55);}
.pk-pro-btn-primary{color:#071120;background:linear-gradient(180deg,#fff2a8,var(--pk-gold));}
.pk-pro-hero-card{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:24px;
  border:1px solid rgba(255,215,0,.26);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,.18));
  text-align:center;
}
.pk-pro-hero-card img{
  width:150px;
  height:150px;
  border-radius:22px;
  object-fit:cover;
  border:2px solid var(--pk-gold);
  box-shadow:0 0 0 8px rgba(255,215,0,.05), 0 18px 40px rgba(0,0,0,.42);
}
.pk-pro-hero-card strong{font-size:1.35rem;color:#fff;}
.pk-pro-hero-card small{color:var(--pk-muted);}
.pk-pro-live-label{color:var(--pk-gold);font-weight:950;text-transform:uppercase;font-size:.76rem;letter-spacing:.12em;}

/* Oude welkomsttekst als nette introkaart */
.welcome.hero-section{
  padding:24px;
  border-radius:22px;
  background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.08);
}
.welcome.hero-section h1{font-size:clamp(1.8rem,3vw,3rem);}
.welcome.hero-section p{color:#dce8f8;font-size:1.05rem;}

/* Knoppen/panels */
button,
.button,
.pk-listener-btn,
.pk-share-listener-btn,
.pk-globe-btn,
.pk-top-requests-btn,
.request-btn,
.form-popup-button{
  border-radius:999px !important;
  font-weight:900 !important;
}
.pk-listener-popup-wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;margin-top:16px;}
.pk-listener-popup-wrap > button{margin-top:0;}
.pk-listener-popup,
.pk-top-requests-popup{
  flex:1 1 100%;
  border-radius:18px;
  background:rgba(3,10,20,.88);
}

/* Programma/team */
.team-card,
.partner-card,
.program-card,
.program-day,
.program-day-card,
.schedule-card,
.pk-today-embed-wrap{
  border-radius:22px !important;
  border-color:rgba(255,215,0,.24) !important;
  box-shadow:var(--pk-soft-shadow) !important;
}
.team-card:hover,
.partner-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,215,0,.56) !important;
  box-shadow:0 22px 55px rgba(0,0,0,.42) !important;
}
.team-card img,
.team-avatar{border-radius:18px !important;}

/* Footer */
.site-footer,
footer{
  width:min(1280px, calc(100% - 32px));
  margin:0 auto 24px;
  border-radius:24px;
  border:1px solid rgba(255,215,0,.18);
  background:rgba(3,10,20,.72);
  box-shadow:var(--pk-soft-shadow);
}

/* Mobile */
@media (max-width:980px){
  .site-header,.container,footer,.site-footer{width:min(100% - 20px,1280px);}
  .container{flex-direction:column;}
  .content,.sidebar{width:100%;max-width:none;}
  .pk-pro-hero{grid-template-columns:1fr;padding:24px;}
  .pk-pro-hero-card{align-items:flex-start;text-align:left;}
  .pk-pro-hero-card img{width:112px;height:112px;}
}
@media (max-width:768px){
  .site-header{margin-top:10px;padding:14px;}
  .logo img{width:min(92vw,520px) !important;max-height:110px;}
  .nav-toggle{display:flex;}
  .main-nav ul li a{width:100%;justify-content:center;}
  .main-nav.open{display:block;}
  .persistent-player{margin-left:-14px;margin-right:-14px;}
  .content{padding:18px;}
  .pk-pro-hero{padding:20px;border-radius:22px;}
  .pk-pro-actions{flex-direction:column;}
  .pk-pro-btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition:none !important;}
}