/* jimreeves.eu — blokken op de startpagina: gezochte cd's, Disc-Covery en de promo voor de collectie */
.home-band { border-top: 1px solid #e9e6df; }
.home-wanted { background: #fff8f3; }
.home-cijfers { background: #f7f9fc; }
.cij-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cij-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .1rem;
  padding: 1.1rem .8rem; background: #fff; border: 1px solid #e3e6ec; border-radius: 10px;
  text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; }
.cij-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); border-color: #ff5500;
  text-decoration: none; color: inherit; }
.cij-naam { font-weight: 700; color: #2a2a2a; margin-bottom: .35rem; }
.cij-groot { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: #ff5500; font-variant-numeric: tabular-nums; }
.cij-klein { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #8a8a8a; }
.cij-rest { font-size: .85rem; color: #6c757d; margin-top: .4rem; }
@media (max-width: 767px) { .cij-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .cij-grid { grid-template-columns: 1fr; } }
.home-disc { background: #f5f7fb; }
.band-title { font-size: 1.35rem; text-align: center; margin: 0 0 .3rem; }
.band-flag { display: inline-block; background: #ff5500; color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .2rem .6rem; border-radius: 4px; vertical-align: .18em; margin-right: .5rem; }
.band-flag.dc { background: #2a6cc4; }
.band-sub { text-align: center; color: #6c757d; margin: 0 0 1.25rem; }
.band-sub a { color: #ff5500; font-weight: 600; }
.band-more { text-align: center; margin: 1.1rem 0 0; }

/* gezochte cd's */
.hw-grid, .hd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 1000px; margin: 0 auto; }
.hw-card { position: relative; display: block; background: #fff; border: 1px solid #e3e0d8; border-radius: 10px; overflow: hidden;
  text-decoration: none; color: inherit; box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: transform .25s ease, box-shadow .25s ease; }
.hw-card:hover, .hd-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.hw-card img, .hd-card img { display: block; width: 100%; height: auto; }
.hw-title { display: block; padding: .55rem .7rem .8rem; font-size: .85rem; font-weight: 600; line-height: 1.3; }
/* het schuine lint in de hoek */
.hw-ribbon { position: absolute; top: 14px; left: -34px; z-index: 2; width: 130px; transform: rotate(-45deg);
  background: #d33; color: #fff; text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .22rem 0; box-shadow: 0 2px 6px rgba(0,0,0,.35); }

/* Disc-Covery */
.hd-card { position: relative; display: block; border: 1px solid #dfe3ea; border-radius: 10px; overflow: hidden; background: #fff;
  transition: transform .25s ease, box-shadow .25s ease; }
.hd-date { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); color: #fff; font-size: .78rem;
  font-weight: 600; text-align: center; padding: .3rem 0; }
/* Twee hoesjes in plaats van vier, dus een smaller raster: anders worden ze op een breed scherm
   onnodig groot. (Rolf 30-9-2026, ticket 88.) */
.hd-grid { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
/* De knop naar alle vondsten moet opvallen; hij stond in de rustige omlijnde vorm en werd
   overgeslagen. (Eimbert: "Als je de knop All discoveries helder rood maakt … valt die beter op".) */
.btn-dc { display: inline-block; padding: .6rem 1.6rem; border: 0; border-radius: 6px;
  background: #d33; color: #fff; font-weight: 700; text-decoration: none; letter-spacing: .01em;
  box-shadow: 0 2px 10px rgba(221,51,51,.35); transition: background .2s ease, transform .2s ease; }
.btn-dc:hover, .btn-dc:focus { background: #b82727; color: #fff; text-decoration: none; transform: translateY(-1px); }
@media (max-width: 575px) { .hd-grid { max-width: none; } }

/* promo voor de collectie */
.home-promo { background: #1c1c1c; color: #fff; }
.promo-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; max-width: 1100px; margin: 0 auto; }
.promo-count { color: #ff5500; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .9rem; margin: 0 0 .2rem; }
.promo-count strong { font-size: 1.6rem; margin-right: .3rem; }
.promo-text h2 { color: #fff; margin: 0 0 .6rem; }
.promo-text p { color: #ccc; }
.promo-buttons { margin: 1.2rem 0 0; }
.promo-buttons .btn i { margin-right: .5rem; }
.promo-art { display: flex; align-items: center; justify-content: center; }
.promo-art img { width: 32%; max-width: 180px; height: auto; align-self: center; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6); border: 2px solid #2a2a2a; }
.promo-art img:nth-child(1) { transform: rotate(-8deg); margin-right: -16px; z-index: 1; }
.promo-art img:nth-child(2) { transform: translateY(-12px); z-index: 3; }
.promo-art img:nth-child(3) { transform: rotate(8deg); margin-left: -16px; z-index: 2; }

@media (max-width: 991px) {
  .hw-grid, .hd-grid { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
  .promo-inner { grid-template-columns: 1fr; text-align: center; }
  .promo-art { order: -1; margin-bottom: 1rem; }
}
@media (max-width: 420px) {
  .band-title { font-size: 1.15rem; }
  .hw-grid, .hd-grid { gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) { .hw-card, .hd-card { transition: none; } .hw-card:hover, .hd-card:hover { transform: none; } }

/* Tijdelijk balkje in de kop voor de 500ste uitzending (zie js/countdown.js).
   Overal !important, want de opmaak van het thema (d-inline-block, w-100) wint anders. */
#hero-500[hidden], #hero-live[hidden], #hero-label[hidden], #hero-promo[hidden] { display: none !important; }
.hero-500 { background: linear-gradient(180deg, #f3d488, #d9a531); color: #4a3308;
            font-weight: 700; font-size: 1.5rem; letter-spacing: .04em; border-radius: 4px;
            white-space: nowrap; box-shadow: 0 3px 12px rgba(0,0,0,.45); }
/* Het balkje komt een seconde na het laden van boven inzakken: je oog valt erop juist omdat het
   er eerst niet was (Rolf 24-9-2026). Tot die tijd is het er niet, ook niet doorzichtig. */
.hero-500.komt-eraan { animation: hero500-in .7s cubic-bezier(.22,.9,.3,1.1) 1s both; }
/* Op de dag zelf: een paar tellen een lichtstreep over het goud, daarna weer rustig.
   Drie keer 1,6 seconde is samen ongeveer vijf seconden. (Rolf 25-9-2026.) */
.hero-500.vandaag { position: relative; overflow: hidden; }
.hero-500.vandaag::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 62%);
  transform: translateX(-130%); animation: hero500-glans 1.6s ease-in-out 1.6s 3 both; }
@keyframes hero500-glans { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .hero-500.vandaag::after { animation: none; opacity: 0; } }
@keyframes hero500-in {
  from { opacity: 0; transform: translateY(-1.1rem) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-500.komt-eraan { animation: none; } }
/* de klok meteen onder het gouden balkje; de oude plek onderaan blijft leeg */
.hero-klok-boven { margin: .6rem 0 0; font-size: 1.05rem; color: #fff;
                   text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.hero-klok-boven[hidden] { display: none !important; }
.hero-countdown.hero-klok-weg { display: none !important; }
/* de tekst staat op een foto: een schaduw houdt hem leesbaar */
.hero-schaduw { text-shadow: 0 2px 10px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6); }
#hero-live { width: auto !important; background: #fff; color: #c0392b; border: 0; font-weight: 600; }
#hero-live:hover { background: #f4f2ec; color: #a5281c; }
#hero-live.aan { background: #c0392b; color: #fff; }
/* op een telefoon staat alles gecentreerd; dan oogt de kop rustiger */
@media (max-width: 767px) {
  .hero-500 { font-size: 1.15rem; white-space: normal; }
  #hero-500, #hero-label, .hero-klok-boven, .display-3.hero-schaduw, #hero-when { text-align: center; }
  #hero-500, #hero-label { display: block !important; }
  .hero-klok-boven { text-align: center; }
}
@media (max-width: 575px) {
  .hero-500 { font-size: 1rem; }
  #hero-live { width: 100% !important; }
}

/* De knop in de hero tijdens de uitzending: oranje, zelfde maat als de promoknop ernaast.
   (Rolf 25-9-2026: tien minuten voor de uitzending een Live-knop.) */
.hero-live-500 { background: #ff5500; border: 0; color: #fff; font-weight: 700; }
.hero-live-500:hover, .hero-live-500:focus { background: #e04b00; color: #fff; }
.hero-live-500 i { margin-right: .45rem; }

/* Rondje met een pijl op de rand van de hero (Rolf 25-9-2026, net als op de Elvis-pagina).
   Het blokje eromheen is nul hoog, zodat het rondje half over de hero hangt zonder de pagina
   op te schuiven; het blok eronder krijgt daarom wat extra ruimte bovenin. */
.jr-knopje { position: relative; height: 0; z-index: 5; }
.jr-knopje + #episodes .container { padding-top: 3.6rem !important; }
.naar-shows { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%; border: 2px solid #ff5500; background: #1c1c1c;
  color: #ff5500; font-size: 1.3rem; line-height: 1; cursor: pointer;
  box-shadow: 0 5px 16px rgba(0,0,0,.45); transition: background .15s, border-color .15s, color .15s; }
.naar-shows:hover, .naar-shows:focus-visible { background: #ff5500; color: #fff; outline: 0; }
.naar-shows i { display: block; animation: naar-shows-wip 2.4s ease-in-out infinite; }
@keyframes naar-shows-wip { 0%, 72%, 100% { transform: translateY(0); } 84% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .naar-shows i { animation: none; } }
@media (max-width: 575px) { .naar-shows { width: 48px; height: 48px; font-size: 1.1rem; } }

/* ---------------------------------------------------------------------------
   Toevoeging voor WordPress (14-10-2026). Op de website zitten deze stroken in
   een .snippet met Bootstrap-klassen voor de binnenruimte (py-4) en een
   .container voor de breedte. Die klassen zijn hier niet: Elementor bepaalt de
   breedte van het blok, dus de ruimte eromheen zetten we zelf. De rest van dit
   bestand is letterlijk de opmaak van de website.
   --------------------------------------------------------------------------- */
.jr-band.home-band { padding: 1.5rem 0; }

/* 🔴 Deze stroken zetten hun eigen tekstkleur, niet alleen hun eigen achtergrond. Op de website
   staan ze op een witte pagina met donkere letters (body #272727). In WordPress staat het thema nu
   nog op het donkere palet van Extra Elvis, en dan vallen de koppen in lichte letters weg op een
   lichte band — onleesbaar. Met deze regels klopt de strook op elke site, wat het thema ook doet. */
.jr-band.home-band, .jr-klok { color: #272727; }
.jr-band.home-band .band-title, .jr-klok h2, .jr-klok p { color: #272727; }
.jr-band.home-band .band-sub { color: #6c757d; }
/* De titel onder een hoesje erft op de website de kleur van de pagina. Hier is het een link, en de
   eigen css van het thema (die als <style> ná ons stijlblad in de pagina staat) wint van een gewone
   .hw-card-regel. Vandaar a.hw-card: dat is specifieker. */
.jr-band.home-band a.hw-card, .jr-band.home-band a.hw-card:hover, .jr-band.home-band a.hw-card:focus { color: #272727; }
.jr-klok .timer, .jr-klok .timer div { color: #fff; }
.jr-klok .timer .smalltext { color: #272727; }
/* Extra Elvis staat op een donkere pagina; daar valt #272727 weg. Met de css-klasse elvis-klok op
   het blok krijgt de kop het goud van die website (Fred, 20-10-2026: "een feller kleurtje"). */
.elvis-klok .jr-klok h2, .jr-klok.elvis-klok h2 { color: #D8B45A; }
.elvis-klok .jr-klok, .elvis-klok .jr-klok p { color: #D7D2C8; }

.jr-band.home-band > .jr-band-binnen { max-width: 1140px; margin: 0 auto; padding: 0 15px; }

/* ---------------------------------------------------------------------------
   De aftelklok naar de volgende uitzending. Op de website staat deze opmaak in
   een <style> in index.html zelf, met twee kleuren uit Bootstrap: de vakjes zijn
   .bg-primary (#3687ef) en de kleine letters .text-dark (#272727). Bootstrap
   laden we hier niet, dus die twee staan er hieronder zelf bij.
   --------------------------------------------------------------------------- */
.jr-klok { text-align: center; }
.jr-klok .next-when { margin: .6rem 0 0; color: #6c757d; font-size: .95rem; }
.jr-klok .live-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #fff;
  margin-right: .45rem; vertical-align: .05em; animation: live-pulse 1.4s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .jr-klok .live-dot { animation: none; } }

.jr-klok .timer { margin: 0 0 45px; font-family: sans-serif; color: #fff; display: inline-block;
  font-weight: 100; text-align: center; font-size: 30px; }
.jr-klok .timer div { padding: 10px; border-radius: 3px; background: #3687ef; display: inline-block;
  font-family: Oswald; font-size: 26px; font-weight: 400; width: 80px; }
.jr-klok .timer .smalltext { color: #272727; font-size: 12px; font-family: Poppins; font-weight: 500;
  display: block; padding: 0; width: auto; }
.jr-klok .timer #time-up { margin: 8px 0 0; text-align: left; font-size: 14px; font-style: normal;
  color: #000; font-weight: 500; letter-spacing: 1px; background: none; }

.jr-klok .timer.on-air > div { display: none; }
.jr-klok .timer.on-air #time-up { display: block; background: #d33; color: #fff; font-weight: 700;
  font-size: 1.15rem; padding: .6rem 1.2rem; border-radius: 8px; margin: 0 auto; max-width: 30rem; text-align: center; }
.jr-klok .timer.on-air #time-up a { color: #fff; text-decoration: underline; }
.jr-klok .timer.on-air #time-up .live-dot { background: #fff; }

/* op een smal scherm blijven de vier vakjes op één regel */
@media (max-width: 600px) {
  .jr-klok .timer { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: .35rem;
    width: 100%; max-width: 420px; margin: 0 auto 30px; }
  .jr-klok .timer #time-up { flex: 1 0 100%; text-align: center; }
  .jr-klok .timer > div { width: auto; flex: 1 1 0; min-width: 0; padding: 8px 2px; font-size: 20px; }
  .jr-klok .timer .smalltext { font-size: 10px; letter-spacing: 0; }
  .jr-klok .timer.on-air { display: block; }
}

/* De knop onder de regel kaarten op de startpagina. Op de website is dat
   .btn.btn-primary.btn-lg van Bootstrap (#3687ef); hier staat hij zelf. */
.jr-band .episodes-all { margin: 1.25rem 0 0; text-align: center; }
.jr-band .episodes-all .btn-jr { display: inline-block; padding: .7rem 1.8rem; border-radius: 6px;
  background: #3687ef; color: #fff; font-weight: 600; font-size: 1.05rem; text-decoration: none;
  transition: background .2s ease; }
.jr-band .episodes-all .btn-jr:hover, .jr-band .episodes-all .btn-jr:focus { background: #126ce0; color: #fff; text-decoration: none; }
.jr-band .episodes-all .btn-jr i { margin-right: .5rem; }

/* ---------------------------------------------------------------------------
   De hero bovenaan de startpagina. Op de website is dit een .snippet met een
   achtergrondfoto en een Bootstrap-raster; de maten en kleuren hieronder zijn
   die van daar: de titel is .display-3.text-secondary (3.375rem, #fc665e), de
   knop .btn-secondary (wit op #fc665e), het label .bg-dark (#272727) en de
   regel eronder .lead.text-light (1.3125rem, #f5f5f5).
   De kaart links wordt door episodes.js gevuld (#hero-card), net als op de
   website — dus de hero hoort op een pagina te staan waar ook een kaartenblok
   van dezelfde show staat.
   --------------------------------------------------------------------------- */
.jr-hero { position: relative; overflow: hidden; background-size: cover; background-position: center;
  background-repeat: no-repeat; background-color: #1c1c1c; padding: 1.5rem 15px 2.5rem; }
.jr-hero-binnen { max-width: 1140px; margin: 0 auto; display: flex; flex-wrap: wrap;
  align-items: center; gap: 1.5rem; }
.jr-hero .hero-kaartkolom { flex: 0 0 38%; max-width: 38%; }
.jr-hero .hero-tekstkolom { flex: 1 1 0; min-width: 0; padding: 1.5rem 0; }

.jr-hero .hero-label { display: inline-block; margin: 0; background: #272727; color: #fff;
  text-transform: uppercase; padding: .25rem 1rem; font-size: 1.5rem; font-weight: 500; }
.jr-hero .hero-titel { margin: .5rem 0 0; font-size: 3.375rem; font-weight: 700; line-height: 1.2; color: #fc665e; }
.jr-hero .hero-when { margin: 1rem 0 0; font-size: 1.3125rem; font-weight: 300; color: #f5f5f5; }
.jr-hero .hero-knoppen { margin: 1.25rem 0 0; }
.jr-hero .btn-hero { display: inline-block; padding: .75rem 1.6rem; border-radius: 6px; background: #fc665e;
  color: #fff; font-size: 1.15rem; font-weight: 500; text-decoration: none; transition: background .2s ease; }
.jr-hero .btn-hero:hover, .jr-hero .btn-hero:focus { background: #fb3f35; color: #fff; text-decoration: none; }

.jr-hero .hero-logo { position: absolute; right: 20px; bottom: 20px; width: 150px; height: auto;
  animation: hero-logo-in 1.1s cubic-bezier(.22,.9,.3,1.2) .35s both; transform-origin: 70% 80%; }
@keyframes hero-logo-in {
  0%   { opacity: 0; transform: translateY(40px) scale(.6) rotate(-8deg); }
  70%  { opacity: 1; transform: translateY(-6px) scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

.jr-hero .hero-rij[data-kaart="rechts"] { flex-direction: row-reverse; }
.jr-hero .hero-rij[data-kaart="niet"] .hero-kaartkolom { display: none; }
.jr-hero .hero-rij[data-kaart="niet"] .hero-tekstkolom { flex: 0 0 100%; max-width: 100%; }

#hero-card { max-width: 320px; margin-left: auto; margin-right: auto; }
#hero-card .card { box-shadow: 0 8px 30px rgba(0,0,0,.45); animation: hero-card-in .9s cubic-bezier(.22,.9,.3,1.1) both; }
#hero-card .card-img-top { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #ece9e2; }
@keyframes hero-card-in {
  0%   { opacity: 0; transform: translateX(-48px) scale(.94); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .jr-hero .hero-logo, #hero-card .card { animation: none; } }

/* de aftelregel onder de knoppen; gevuld door home-klok.js */
.jr-hero .hero-countdown { margin: 1rem 0 0; color: #fff; font-size: 1.05rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.jr-hero .hero-countdown i { margin-right: .45rem; color: #ff5500; }
.jr-hero .hero-countdown strong { font-variant-numeric: tabular-nums; background: rgba(0,0,0,.45);
  border-radius: 6px; padding: .15rem .55rem; }
.jr-hero .hero-countdown.on-air strong { background: #d33; }
.jr-hero .hero-countdown[hidden] { display: none !important; }
.jr-hero .hero-schaduw { text-shadow: 0 2px 10px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6); }

@media (max-width: 767px) {
  .jr-hero .hero-kaartkolom, .jr-hero .hero-tekstkolom { flex: 0 0 100%; max-width: 100%; }
  .jr-hero .hero-titel { font-size: 2.25rem; }
  .jr-hero .hero-label, .jr-hero .hero-titel, .jr-hero .hero-when, .jr-hero .hero-knoppen { text-align: center; }
  .jr-hero .hero-label { display: block; }
  .jr-hero .hero-logo { display: none; }
}

/* ---- De aftelregel los in een Elementor-blok ----------------------------------------------
   De hero van /jimreeves/ is op 18-10-2026 opnieuw opgebouwd met de eigen widgets van Elementor.
   De regel "Next broadcast in …" staat daar in een html-blok en heeft dus geen .jr-hero meer
   boven zich. Dezelfde opmaak, nu zonder dat voorvoegsel. */
.hero-countdown { margin: 0; color: #fff; font-size: 1.05rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.hero-countdown i { margin-right: .45rem; color: #ff5500; }
.hero-countdown strong { font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, .45);
  border-radius: 6px; padding: .15rem .55rem; }
.hero-countdown.on-air strong { background: #d33; }
.hero-countdown[hidden] { display: none !important; }