/* ============================================================
   Summer 2026 Theme — Heroradio
   Sonne, Meer, Palmen, tropische Vibes
   ============================================================ */
.theme-summer {
  --bg:        #06283d;
  --bg-2:      #0a3d5f;
  --bg-3:      #1a5e83;
  --fg:        #fff8e1;
  --muted:     #b6d8ea;
  --primary:   #ffb703;
  --secondary: #023047;
  --accent:    #06d6a0;
  --danger:    #ff5a5f;
  --warning:   #ffb400;
  --success:   #06d6a0;
  --card:      rgba(10, 61, 95, .78);
  --card-border: rgba(255, 183, 3, .35);
}
.theme-summer body {
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(255,183,3,.30), transparent 60%),
    radial-gradient(1100px 700px at 10% 100%, rgba(6,214,160,.22), transparent 60%),
    linear-gradient(180deg, #4cc9f0 0%, #48cae4 25%, #00b4d8 55%, #023e58 100%);
  color: var(--fg);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
}
.theme-summer .bg-grain {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.25), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(255,183,3,.20), transparent 45%);
}

/* Header */
.theme-summer .site-header {
  background: linear-gradient(180deg, rgba(6,40,61,.92), rgba(10,61,95,.78));
  border-bottom: 1px solid rgba(255,183,3,.45);
  box-shadow: 0 4px 22px rgba(0,0,0,.35);
}
.theme-summer .brand-mark {
  background: linear-gradient(135deg, #ffb703, #ff8c42);
  box-shadow: 0 0 24px rgba(255,183,3,.6);
}
.theme-summer .brand-text strong {
  background: linear-gradient(90deg, #ffb703, #ffd166, #06d6a0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: .5px;
}
.theme-summer .site-nav a { color: #eaf6ff; }
.theme-summer .site-nav a:hover,
.theme-summer .site-nav a.active { color: #ffd166; text-shadow: 0 0 10px rgba(255,209,102,.6); }

/* Buttons */
.theme-summer .btn,
.theme-summer .btn-pill.primary {
  background: linear-gradient(135deg, #ffb703, #fb8500);
  color: #06283d; border: none;
  box-shadow: 0 6px 18px rgba(255,183,3,.4);
  font-weight: 700;
  transition: transform .15s, filter .2s, box-shadow .2s;
}
.theme-summer .btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 26px rgba(255,183,3,.6); }
.theme-summer .btn-pill.ghost { background: rgba(6,40,61,.55); color: #eaf6ff; border: 1px solid rgba(255,183,3,.5); }

/* Cards */
.theme-summer .card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.theme-summer h1, .theme-summer h2, .theme-summer h3 { color: #ffd166; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.theme-summer a { color: #a7f0d1; }
.theme-summer a:hover { color: #ffd166; }

.theme-summer .mini-player {
  background: linear-gradient(90deg, #023047, #0a3d5f);
  border: 1px solid rgba(255,183,3,.4);
}
.theme-summer .mp-status { color: #06d6a0; }

/* Sun */
.sm-sun {
  position: fixed; top: 40px; right: 60px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff7c2 0%, #ffd166 45%, #ff9500 100%);
  box-shadow:
    0 0 60px rgba(255,209,102,.65),
    0 0 120px rgba(255,149,0,.45);
  z-index: 2; pointer-events: none;
  animation: sm-sun-pulse 6s ease-in-out infinite;
}
@keyframes sm-sun-pulse {
  0%,100% { box-shadow: 0 0 60px rgba(255,209,102,.55), 0 0 120px rgba(255,149,0,.35); }
  50%     { box-shadow: 0 0 80px rgba(255,209,102,.85), 0 0 160px rgba(255,149,0,.55); }
}
/* Sun rays */
.sm-sun::before, .sm-sun::after {
  content: ""; position: absolute; inset: -30px; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255,209,102,.35) 0 3deg, transparent 3deg 30deg,
    rgba(255,209,102,.35) 30deg 33deg, transparent 33deg 60deg,
    rgba(255,209,102,.35) 60deg 63deg, transparent 63deg 90deg,
    rgba(255,209,102,.35) 90deg 93deg, transparent 93deg 120deg,
    rgba(255,209,102,.35) 120deg 123deg, transparent 123deg 150deg,
    rgba(255,209,102,.35) 150deg 153deg, transparent 153deg 180deg,
    rgba(255,209,102,.35) 180deg 183deg, transparent 183deg 210deg,
    rgba(255,209,102,.35) 210deg 213deg, transparent 213deg 240deg,
    rgba(255,209,102,.35) 240deg 243deg, transparent 243deg 270deg,
    rgba(255,209,102,.35) 270deg 273deg, transparent 273deg 300deg,
    rgba(255,209,102,.35) 300deg 303deg, transparent 303deg 330deg,
    rgba(255,209,102,.35) 330deg 333deg, transparent 333deg 360deg);
  animation: sm-rays-rot 40s linear infinite;
  filter: blur(1px);
}
.sm-sun::after { animation-duration: 60s; animation-direction: reverse; opacity: .55; }
@keyframes sm-rays-rot { to { transform: rotate(360deg); } }

/* Palms in bottom corners */
.sm-palm {
  position: fixed; bottom: 0; width: 260px; height: 320px; z-index: 3;
  pointer-events: none; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}
.sm-palm.left  { left: -30px; transform: scaleX(-1); }
.sm-palm.right { right: -30px; }

/* Floating clouds */
.sm-clouds { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.sm-clouds span {
  position: absolute; color: rgba(255,255,255,.85);
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.25));
  animation: sm-cloud linear infinite;
}
@keyframes sm-cloud {
  0%   { transform: translateX(-20vw); }
  100% { transform: translateX(120vw); }
}

/* Ocean wave strip at bottom */
.sm-waves {
  position: fixed; left: 0; right: 0; bottom: 0; height: 80px; z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(30px 12px at 10% 20%, #48cae4 40%, transparent 42%),
    radial-gradient(30px 12px at 30% 55%, #90e0ef 40%, transparent 42%),
    radial-gradient(30px 12px at 50% 30%, #48cae4 40%, transparent 42%),
    radial-gradient(30px 12px at 70% 60%, #90e0ef 40%, transparent 42%),
    radial-gradient(30px 12px at 90% 25%, #48cae4 40%, transparent 42%),
    linear-gradient(180deg, transparent, rgba(0,180,216,.55) 60%, rgba(0,119,182,.85));
  animation: sm-wave 5s ease-in-out infinite alternate;
}
@keyframes sm-wave {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 20px 0, -20px 0, 20px 0, -20px 0, 20px 0, 0 0; }
}

/* Summer banner */
.sm-banner {
  position: relative; background: linear-gradient(90deg, #ffb703, #06d6a0, #48cae4);
  color: #06283d; text-align: center; padding: 12px 16px;
  font-weight: 800; letter-spacing: .5px; z-index: 5;
  box-shadow: 0 4px 22px rgba(6,214,160,.35);
}

/* Content above deco */
.theme-summer .site-header, .theme-summer .container,
.theme-summer main, .theme-summer footer { position: relative; z-index: 10; }
.theme-summer .site-footer { background: linear-gradient(180deg, rgba(2,48,71,.85), rgba(2,48,71,.98)); border-top:1px solid rgba(255,183,3,.35); }

.theme-summer input, .theme-summer textarea, .theme-summer select {
  background: rgba(2,48,71,.85); color: var(--fg);
  border: 1px solid rgba(255,183,3,.4); border-radius: 10px;
}
.theme-summer input:focus, .theme-summer textarea:focus, .theme-summer select:focus {
  outline: none; border-color: #06d6a0; box-shadow: 0 0 0 3px rgba(6,214,160,.28);
}

@media (prefers-reduced-motion: reduce) {
  .sm-sun, .sm-clouds span, .sm-waves { animation: none !important; }
}