/* Carsten Creates - custom CSS (child theme yootheme_joomill)
   Alleen signatuur-onderdelen; de rest via Customizer en elementopties. */

/* ---------- Vinyl-plaat: klasse cc-vinyl op het Image-element ---------- */
.cc-vinyl{position:relative;width:min(100%,500px);aspect-ratio:1;border-radius:50%;margin-inline:auto;
  box-shadow:0 34px 60px -28px rgba(0,0,0,.55)}
.cc-vinyl::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle,#141414 0 34%,transparent 34.2%),
    radial-gradient(circle,transparent 0 47%,#161616 47.3% 48.6%,transparent 48.9%),
    conic-gradient(from 210deg,rgba(255,255,255,0) 0 8%,rgba(255,255,255,.16) 12%,rgba(255,255,255,0) 18% 58%,rgba(255,255,255,.10) 62%,rgba(255,255,255,0) 68%),
    repeating-radial-gradient(circle,#0B0B0B 0 2px,#1C1C1C 2px 3px,#101010 3px 5px);
  box-shadow:inset 0 0 0 9px #050505,inset 0 0 0 10px #2A2A2A}
.cc-vinyl img{position:absolute;z-index:1;left:25%;top:25%;width:50%!important;height:50%!important;max-width:none;object-fit:cover;border-radius:50%;box-shadow:0 0 0 3px #0B0B0B,0 0 0 4px #2A2A2A}
@media (prefers-reduced-motion:no-preference){
  .cc-vinyl::before{transition:transform 1.4s cubic-bezier(.2,.7,.2,1);animation:cc-vinyl-spin 2.2s cubic-bezier(.3,.1,.2,1) .2s both}
  .cc-vinyl:hover::before{transform:rotate(25deg)}
}
@keyframes cc-vinyl-spin{from{rotate:0deg}to{rotate:180deg}}
@keyframes cc-vinyl-counter{from{rotate:0deg}to{rotate:-180deg}}

@media (max-width:959px){.cc-vinyl{width:min(100%,380px)}}

/* ---------- Penseel-C uit het logo: klasse cc-brush, cc-brush-page of cc-brush-cta op de sectie ---------- */
.cc-brush,.cc-brush-page,.cc-brush-cta{position:relative;overflow:hidden}
.cc-brush::before,.cc-brush-page::before,.cc-brush-cta::before{content:"";position:absolute;z-index:0;pointer-events:none;aspect-ratio:582/835;background:url(../../../images/carsten/brush-c.png) no-repeat center/contain}
.cc-brush>*,.cc-brush-page>*,.cc-brush-cta>*{position:relative;z-index:1}
.cc-brush::before{width:min(46vw,620px);right:max(-6vw,-90px);top:-20px;opacity:.22;transform:rotate(-14deg)}
.cc-brush-page::before{width:420px;right:-110px;top:-150px;opacity:.13;transform:rotate(10deg)}
.cc-brush-cta::before{background-image:url(../../../images/carsten/brush-c-wit.png);width:400px;right:-60px;top:-55%;opacity:.25;transform:rotate(18deg)}
@media (max-width:959px){
  .cc-brush::before{width:115vw;right:-45vw;top:auto;bottom:-40px}
  .cc-brush-page::before{width:260px;right:-120px;top:-90px}
  .cc-brush-cta::before{width:260px;right:-110px;top:auto;bottom:-90px}
}

/* ---------- Markeerstreep in H1: klasse cc-mark op de Headline, woord tussen <em> ---------- */
.cc-mark em{font-style:normal;padding-inline:.05em;background:linear-gradient(rgba(20,184,184,.45),rgba(20,184,184,.45)) no-repeat 0 92%/100% 30%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (prefers-reduced-motion:no-preference){
  .cc-mark em{background-size:0% 30%;animation:cc-mark-in .9s cubic-bezier(.65,0,.35,1) .5s forwards}
}
@keyframes cc-mark-in{to{background-size:100% 30%}}

/* ---------- Logo's grijs: klasse cc-logos op het Grid-element ---------- */
.cc-logos .el-item{background:#fff;border:1px solid #D6E7E6;border-radius:12px;aspect-ratio:16/9;display:grid;place-items:center;padding:14px 18px}
.cc-logos .el-image{max-height:60px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter .25s,opacity .25s}
.cc-logos .el-item:hover .el-image{filter:none;opacity:1}

/* ---------- Namen als pills: klasse cc-names op Text-element ---------- */
.cc-names{display:flex;flex-wrap:wrap;gap:.5rem}
.cc-names span{border:1px solid #D6E7E6;border-radius:999px;padding:.45rem .95rem;font-weight:500;font-size:.9375rem}

/* ---------- Cijfers: klasse cc-stats op het Grid-element in een Secondary sectie ---------- */
.cc-stats .el-title{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(2rem,1.4rem + 2vw,3rem);font-weight:800;color:#14B8B8;line-height:1;font-variant-numeric:tabular-nums}
.cc-stats .el-content{font-size:.9375rem;line-height:1.35}

/* ---------- Audio ---------- */
.cc-audio{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.25rem;border-radius:16px;background:#EEF7F6}
.cc-audio b{font-size:.9375rem}
.cc-audio audio{width:100%}

/* ---------- On-air-stip in eyebrow: <span class="cc-onair"></span> ---------- */
.cc-onair{display:inline-block;width:8px;height:8px;border-radius:50%;background:#FF5442;margin-right:.5rem;vertical-align:middle}

/* ---------- Typografie-correcties op de UIkit-basisstijl ---------- */
em{color:inherit}
h1,h2,h3,h4,h5,h6,.uk-h1,.uk-h2,.uk-h3,.uk-h4,.uk-h5,.uk-h6,[class*="uk-heading-"]{font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.uk-heading-xlarge,.uk-heading-large,.uk-heading-2xlarge{font-weight:800;letter-spacing:-.035em;line-height:1.02}
.uk-button,.uk-navbar-nav>li>a,.uk-text-meta{text-transform:none}
.uk-button{font-weight:600;font-size:.9375rem}
.uk-navbar-nav>li>a{font-weight:600;font-size:.9375rem}
.uk-text-meta{font-size:.8125rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.uk-section-secondary .uk-text-meta,.uk-section-secondary .uk-text-primary{color:#14B8B8!important}
.uk-section-primary a{color:#0F1F20;text-decoration:underline;text-underline-offset:3px}

/* ---------- Laatste menu-item (Contact) als knop in de navbar ---------- */
.tm-header .uk-navbar-nav>li:last-child>a{min-height:0!important;height:auto;line-height:1.2;align-self:center;margin-left:.5rem;padding:.6rem 1.25rem;border-radius:999px;background:#14B8B8;color:#0F1F20;transition:background .2s,color .2s}
.tm-header .uk-navbar-nav>li:last-child>a:hover,.tm-header .uk-navbar-nav>li.uk-active:last-child>a{background:#0F1F20;color:#fff}
.tm-header .uk-navbar-nav>li{display:flex}

/* ---------- Nadruk in koppen (statement) ---------- */
h1 strong,h2 strong,.uk-h2 strong{font-weight:800;color:#087271}
.tm-header .uk-navbar-nav>li{align-items:center}
.tm-header .uk-navbar-container:not(.uk-navbar-transparent),.tm-header-mobile .uk-navbar-container{background:#fff}