/* Rockin' Doc Radio v1.0.15 — cinematic stage + branded DJ name + red / gold / chrome theme */
:root{
  --rdr-gold:#f5c20b;
  --rdr-gold-bright:#ffe65a;
  --rdr-gold-deep:#9d6d00;
  --rdr-red:#ef1717;
  --rdr-red-bright:#ff3a32;
  --rdr-red-deep:#8d0505;
  --rdr-chrome:#d7dde2;
  --rdr-black:#030303;
  --rdr-panel:#0b0b0b;
  --rdr-panel-2:#12100a;
  --rdr-line:#5e4b13;
  --rdr-muted:#b9b5a8;
  --cyan:var(--rdr-gold);
  --cyan2:var(--rdr-red);
  --rdr-cyan:var(--rdr-gold);
  --rdr-cyan-2:var(--rdr-red);
}

body.public-site.sketch-layout{
  background:
    radial-gradient(circle at 50% -10%,rgba(209,31,22,.16) 0,transparent 30%),
    radial-gradient(circle at 76% 16%,rgba(245,194,11,.09) 0,transparent 28%),
    linear-gradient(180deg,#090806 0,#030303 46%,#000 100%);
}

.radio-rail{
  background:linear-gradient(180deg,#120f08 0,#050504 52%,#020202 100%);
  border-right:1px solid #5b4510;
  box-shadow:9px 0 34px #000c, inset -1px 0 0 #e9b9131f;
}
.rail-toggle span{background:linear-gradient(90deg,#f6f6f6,#f5c20b);box-shadow:0 0 10px #f5c20b66}
.rail-toggle:hover{background:#1b1305;color:var(--rdr-gold);box-shadow:0 0 24px #f5c20b22}
.rail-nav a{color:#eee8d8}
.rail-nav a:hover,.rail-nav a.active{
  color:var(--rdr-gold-bright);
  background:linear-gradient(90deg,rgba(239,23,23,.13),rgba(245,194,11,.10));
  border-left-color:var(--rdr-gold);
  text-shadow:0 0 14px #f5c20b88;
  box-shadow:inset 0 0 30px #f5c20b0d;
}
.rail-login{color:#9e8b59}.rail-login:hover{color:var(--rdr-gold)}

.radio-shell{max-width:1540px}
.radio-hero-card{
  border:1px solid #8b6d18;
  background:#000;
  box-shadow:0 25px 80px #000d,0 0 36px rgba(245,194,11,.11);
}
.hero-brand-stage{
  background:
    radial-gradient(ellipse at center,rgba(126,85,0,.20) 0,rgba(0,0,0,.86) 58%,#000 100%);
}
.hero-brand-stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 0 35%,rgba(255,222,79,.045) 46%,transparent 57%);
}
.hero-brand-lockup.hero-brand-lockup-main{
  width:min(980px,74%);
  top:4px;
}
.hero-brand-lockup img{
  max-height:245px;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.45)) drop-shadow(0 0 16px rgba(245,194,11,.48)) drop-shadow(0 0 34px rgba(239,23,23,.19));
}
.hero-music-left,.hero-music-right{color:#f5c20b!important;text-shadow:0 0 20px #f5c20b99}
.hero-eq{filter:sepia(1) saturate(5) hue-rotate(351deg) brightness(1.08)}
.radio-live-status{color:#ffe3a0}
.live-dot{background:var(--rdr-red-bright);box-shadow:0 0 14px #ff2b21,0 0 28px #ff2b2175}
.radio-connection{color:#e6dcc5}

.radio-player-card{
  background:linear-gradient(145deg,#15120b,#090909 56%,#0c0907);
  border:1px solid #604a14;
  box-shadow:0 20px 58px #000b, inset 0 1px 0 #f5c20b0f;
}
.player-heading{color:var(--rdr-gold-bright);text-shadow:0 0 12px #f5c20b55}
.record-square{
  border-color:#7f651a;
  color:var(--rdr-gold-bright);
  background:radial-gradient(circle,#251b08 0,#111 58%,#070707 100%);
  box-shadow:inset 0 0 26px #f5c20b0d;
}
.track-copy h2{color:#fff}.track-copy p{color:#d8cfba}.track-copy small{color:#9f9784}
.stream-live-pill{
  background:linear-gradient(90deg,#7f0909,#b80d0d 55%,#d61a12);
  color:#fff1b9;
  border:1px solid #e9b91388;
  box-shadow:inset 0 0 18px #ffbf001b,0 0 20px #d00b0b33;
}
.fake-progress{background:#352d1d}.fake-progress span{background:linear-gradient(90deg,var(--rdr-red),var(--rdr-gold-bright))}
.volume-control input{accent-color:var(--rdr-gold)}
.round-control{border-color:#5f5230;background:#0b0a08}
.play-control{border-color:var(--rdr-gold);color:var(--rdr-gold-bright);box-shadow:0 0 22px #f5c20b36}
.play-control:hover,.play-control.is-playing{background:#2a1c05;box-shadow:0 0 30px #f5c20b55}
.player-tools{color:#e9d59a}

.public-footer{
  border-top:1px solid #4d3b10;
  background:linear-gradient(180deg,#050504,#000);
}
.footer-logo{
  width:245px;
  max-height:70px;
  filter:drop-shadow(0 0 8px #f5c20b42);
}
.footer-nav a{color:#c8bea6}.footer-nav a:hover{color:var(--rdr-gold-bright)}.footer-nav span{color:#685923}
.social-row span{background:linear-gradient(145deg,#f5c20b,#c99404);color:#130d00;box-shadow:0 0 12px #f5c20b22}

.chat-tab{
  border-color:var(--rdr-gold);
  background:linear-gradient(180deg,#281a04,#100b03);
  color:var(--rdr-gold);
  box-shadow:0 0 28px #f5c20b38;
}
.chat-cloud{background:#f5c20b;box-shadow:0 0 12px #f5c20b77}.chat-cloud::after{border-color:transparent transparent transparent #f5c20b}
.chat-drawer{
  background:linear-gradient(180deg,#130f07,#070604 48%,#030303);
  border-left:1px solid #8b6d18;
  box-shadow:-25px 0 65px #000d;
}
body.chat-open .chat-tab{background:#6d0b08;box-shadow:0 0 34px #ef171755}
.chat-head{border-bottom:1px solid #4b3a10;background:#090704}
.chat-logo{width:335px;height:126px;filter:drop-shadow(0 0 11px #f5c20b52)}
.chat-close{color:#ffe89a}.chat-close:hover{color:#ff4037}
.chat-title-row{border-color:#4b3a10}.chat-title-row span{color:var(--rdr-red-bright)}
.cbox-frame-wrap{background:#060503}.cbox-placeholder{color:#b7ad94}.cbox-placeholder code{color:var(--rdr-gold-bright)}
.chat-powered{border-top-color:#4b3a10;color:#e6dbc0}.chat-footer{color:var(--rdr-gold-bright);border-top-color:#4b3a10}.chat-footer span{color:#a21b14}

@media(max-width:1200px){.hero-brand-lockup.hero-brand-lockup-main{width:min(850px,72%)}}
@media(max-width:900px){
  .rail-nav a.active{border-bottom-color:var(--rdr-gold)}
  .hero-brand-lockup.hero-brand-lockup-main{width:82%;top:8px}
  .hero-brand-lockup img{max-height:205px}
  .footer-logo{width:220px}
}
@media(max-width:560px){
  .hero-brand-lockup.hero-brand-lockup-main{width:92%;top:12px}
  .hero-brand-lockup img{max-height:168px}
  .chat-logo{max-width:300px;height:110px}
}


/* v1.0.14 — replace the simple side notes/equalizer with cinematic speaker + waveform art */
.hero-brand-stage{
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 24%,rgba(124,84,0,.22) 0,rgba(0,0,0,.74) 40%,rgba(0,0,0,.96) 76%),
    linear-gradient(180deg,#070603 0,#020202 74%,#000 100%);
}
.hero-brand-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,rgba(245,194,11,.025) 1px,transparent 1px),
    linear-gradient(180deg,rgba(245,194,11,.018) 1px,transparent 1px);
  background-size:74px 74px;
  opacity:.65;
  pointer-events:none;
}
.hero-stage-decor{
  position:absolute;
  top:0;
  bottom:0;
  z-index:2;
  height:100%;
  width:auto;
  max-width:42%;
  object-fit:cover;
  pointer-events:none;
  user-select:none;
  opacity:.96;
  filter:saturate(1.08) contrast(1.06) brightness(.92) drop-shadow(0 0 22px rgba(245,194,11,.14));
}
.hero-stage-decor-left{left:0;object-position:left center}
.hero-stage-decor-right{right:0;object-position:right center}
.hero-stage-glow{
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 17%,rgba(255,210,45,.13),transparent 36%),
    radial-gradient(ellipse at 18% 46%,rgba(226,20,14,.08),transparent 27%),
    radial-gradient(ellipse at 82% 46%,rgba(226,20,14,.08),transparent 27%),
    linear-gradient(180deg,transparent 0 62%,rgba(0,0,0,.30) 79%,rgba(0,0,0,.70) 100%);
}
.hero-brand-lockup.hero-brand-lockup-main{z-index:5}
.brand-only-hero .hero-live-copy{z-index:6}

/* suppress the old v1.0.12 note/bar artwork if an old template is cached */
.hero-music-left,.hero-music-right,.hero-eq{display:none!important}

@media(max-width:1200px){
  .hero-stage-decor{max-width:44%;opacity:.88}
}
@media(max-width:900px){
  .hero-stage-decor{max-width:47%;opacity:.72}
  .hero-stage-glow{background:linear-gradient(180deg,transparent 0 57%,rgba(0,0,0,.42) 78%,rgba(0,0,0,.82) 100%)}
}
@media(max-width:560px){
  .hero-stage-decor{max-width:49%;opacity:.46;filter:saturate(1.05) brightness(.76)}
  .hero-stage-decor-left{left:-8%}
  .hero-stage-decor-right{right:-8%}
}

/* v1.0.15 — DJ name styled as part of the Rockin' Doc Radio brand lockup */
.brand-only-hero .hero-live-copy{
  bottom:24px;
  width:min(820px,92%);
}
.brand-only-hero .hero-live-copy h1{
  display:inline-block;
  position:relative;
  margin:12px 0 8px;
  padding:2px 18px 7px;
  font-family:Impact,"Arial Black",Haettenschweiler,sans-serif;
  font-size:clamp(2.75rem,4.35vw,4.9rem);
  line-height:.98;
  font-weight:900;
  letter-spacing:.01em;
  text-transform:none;
  color:#ef1717;
  background:linear-gradient(180deg,#fff3ef 0%,#ff5d54 9%,#ff1e18 29%,#c90808 58%,#ff3c32 79%,#7d0000 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:2px rgba(255,225,111,.95);
  filter:drop-shadow(0 2px 0 #050505) drop-shadow(0 4px 0 #3a0900) drop-shadow(0 0 8px rgba(255,40,25,.70)) drop-shadow(0 0 18px rgba(245,194,11,.34));
}
.brand-only-hero .hero-live-copy h1::before,
.brand-only-hero .hero-live-copy h1::after{
  content:"";
  position:absolute;
  top:52%;
  width:clamp(28px,5vw,78px);
  height:2px;
  background:linear-gradient(90deg,transparent,#f5c20b,#fff0a8,#f5c20b);
  box-shadow:0 0 8px #f5c20b,0 0 16px rgba(239,23,23,.55);
}
.brand-only-hero .hero-live-copy h1::before{right:100%;margin-right:5px}
.brand-only-hero .hero-live-copy h1::after{left:100%;margin-left:5px;transform:scaleX(-1)}
.brand-only-hero .radio-live-status{
  color:#ffe692;
  text-shadow:0 0 8px rgba(245,194,11,.62),0 2px 3px #000;
}
.brand-only-hero .radio-connection{
  color:#f3dfad;
  font-weight:600;
  letter-spacing:.015em;
  text-shadow:0 2px 4px #000,0 0 10px rgba(245,194,11,.18);
}
@media(max-width:900px){
  .brand-only-hero .hero-live-copy h1{font-size:clamp(2.35rem,7vw,4rem);-webkit-text-stroke:1.6px rgba(255,225,111,.95)}
  .brand-only-hero .hero-live-copy h1::before,
  .brand-only-hero .hero-live-copy h1::after{width:clamp(18px,4vw,42px)}
}
@media(max-width:560px){
  .brand-only-hero .hero-live-copy{bottom:18px}
  .brand-only-hero .hero-live-copy h1{font-size:2.35rem;padding-left:8px;padding-right:8px;-webkit-text-stroke:1.25px rgba(255,225,111,.95)}
  .brand-only-hero .hero-live-copy h1::before,
  .brand-only-hero .hero-live-copy h1::after{display:none}
}


/* v1.0.28 — one chat launcher only.
   The old design visually rendered both the tab container and an inner bubble,
   which looked like two overlapping chat buttons. Keep one gold speech bubble
   while preserving the same drawer hit target and behavior. */
.chat-tab{
  width:64px!important;
  height:64px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
}
.chat-tab .chat-cloud{
  position:relative!important;
  display:block!important;
  width:48px!important;
  height:36px!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#ffe65a,#d9a700)!important;
  box-shadow:0 0 18px #f5c20b66!important;
}
.chat-tab .chat-cloud::after{
  content:""!important;
  position:absolute!important;
  right:7px!important;
  bottom:-8px!important;
  width:0!important;
  height:0!important;
  border-style:solid!important;
  border-width:9px 0 0 11px!important;
  border-color:transparent transparent transparent #d9a700!important;
}
body.chat-open .chat-tab{
  width:52px!important;
  height:52px!important;
  border-radius:50%!important;
  background:#6d0b08!important;
  color:#ffe89a!important;
  box-shadow:0 0 24px #ef171755!important;
}
body.chat-open .chat-tab::after{content:none!important}
@media(max-width:560px){.chat-tab{width:56px!important;height:56px!important}.chat-tab .chat-cloud{width:42px!important;height:32px!important}}


/* v1.0.29 — chat belongs in the navigation, not over the hero artwork. */
.chat-tab{display:none!important}
.rail-nav a#chatNavLink.chat-active{
  color:var(--rdr-gold-bright)!important;
  background:linear-gradient(90deg,rgba(245,194,11,.14),rgba(245,194,11,.03))!important;
  border-color:var(--rdr-gold)!important;
}

/* v1.0.31 — seamless hero side artwork. Both sides are cropped from one continuous
   master image and softly feather into the live center, eliminating hard vertical seams. */
.hero-brand-stage::before{display:none!important}
.hero-stage-decor{
  max-width:38%;
  opacity:1;
  filter:saturate(1.04) contrast(1.02) brightness(.92);
}
.hero-stage-decor-left{
  left:0;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 70%,rgba(0,0,0,.82) 82%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 70%,rgba(0,0,0,.82) 82%,transparent 100%);
}
.hero-stage-decor-right{
  right:0;
  -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 70%,rgba(0,0,0,.82) 82%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 0%,#000 70%,rgba(0,0,0,.82) 82%,transparent 100%);
}
.hero-stage-glow{
  background:
    radial-gradient(ellipse at 50% 15%,rgba(255,210,45,.16),transparent 38%),
    linear-gradient(90deg,transparent 0 26%,rgba(0,0,0,.08) 36%,rgba(0,0,0,.16) 50%,rgba(0,0,0,.08) 64%,transparent 74%),
    linear-gradient(180deg,transparent 0 62%,rgba(0,0,0,.24) 80%,rgba(0,0,0,.58) 100%);
}
@media(max-width:1200px){.hero-stage-decor{max-width:41%;opacity:.94}}
@media(max-width:900px){.hero-stage-decor{max-width:45%;opacity:.78}}
@media(max-width:560px){.hero-stage-decor{max-width:50%;opacity:.52}.hero-stage-decor-left{left:-6%}.hero-stage-decor-right{right:-6%}}


/* v1.0.32 — use the isolated transparent Rockin' Doc Radio logo without a rectangular image field. */
.hero-brand-lockup.hero-brand-lockup-main{background:transparent!important;}
.hero-brand-lockup.hero-brand-lockup-main img{background:transparent!important;object-fit:contain;}

/* v1.0.47 current-song album artwork */
.record-square{overflow:hidden;position:relative}
.record-square .album-art{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.record-square .album-art[hidden]{display:none!important}
.record-square .album-art-fallback{width:100%;height:100%;display:grid;place-items:center;font-size:3.25rem}
.record-square .album-art-fallback[hidden]{display:none!important}
@media(max-width:560px){.record-square .album-art-fallback{font-size:2.4rem}}