/*
Theme Name: Elst Radio
Theme URI: https://www.radioautomationrve.com
Author: René van Elst
Description: Donker studiothema voor Elst Radio, met een rode on-air accentkleur.
Version: 1.0.1
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: elstradio
*/

/* Kop blijft bovenaan staan */
.er-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(13,15,19,.86)!important;border-bottom:1px solid #2a2f38}
.admin-bar .er-header{top:32px}
@media (max-width:782px){.admin-bar .er-header{top:46px}}

/* Rode on-air-stip voor de sitetitel */
.er-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:#ef3b2d;box-shadow:0 0 12px #ef3b2d;animation:erpulse 2.4s infinite;flex:none}
@keyframes erpulse{50%{box-shadow:0 0 2px #ef3b2d;opacity:.7}}
@media (prefers-reduced-motion:reduce){.er-dot{animation:none}}

/* Gloed achter de openingsfoto */
.er-hero{position:relative;overflow:hidden}
.er-hero::before{content:"";position:absolute;inset:-180px -10% auto;height:620px;background:radial-gradient(ellipse at 50% 30%,rgba(239,59,45,.20),transparent 62%);pointer-events:none}
.er-hero > *{position:relative}

/* ON AIR-label */
.er-onair{display:block}

/* Schermafbeeldingen: rand en schaduw */
.wp-block-image.er-shot img{border:1px solid #2a2f38;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.55)}

/* Kaarten */
.er-card{border:1px solid #2a2f38;transition:transform .15s,border-color .15s}
.er-card:hover{transform:translateY(-2px);border-color:#3a414d}

/* Knoppen */
.wp-element-button,.wp-block-button__link{transition:transform .15s,background-color .15s}
.wp-element-button:hover,.wp-block-button__link:hover{transform:translateY(-1px)}
.wp-block-button.is-style-outline .wp-block-button__link{border-color:#2a2f38;color:#e9ecf1}

/* Navigatie op mobiel */
.wp-block-navigation__responsive-container.is-menu-open{background:#0d0f13!important;color:#e9ecf1!important}

/* Lijsten met vinkjes */
ul.er-ticks{list-style:none;padding-left:0}
ul.er-ticks li{position:relative;padding-left:30px;margin-bottom:.45em}
ul.er-ticks li::before{content:"";position:absolute;left:4px;top:.55em;width:12px;height:7px;border-left:2px solid #2fbf71;border-bottom:2px solid #2fbf71;transform:rotate(-45deg)}

/* Tabel in contactblok */
.wp-block-table td{border-color:#2a2f38!important;padding:.45em .6em}
.wp-block-table td:first-child{color:#9aa3b2}
/* Menu en taalkeuze in de kop */
.er-nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.er-nav a{color:#e9ecf1;text-decoration:none;font-size:.95rem}
.er-nav a:hover,.er-nav a[aria-current]{color:#ff8a7f}
.er-lang{position:relative}
.er-lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid #2a2f38;border-radius:8px;color:#e9ecf1;font:600 .85rem/1 ui-monospace,Consolas,monospace;letter-spacing:.06em;user-select:none}
.er-lang summary::-webkit-details-marker{display:none}
.er-lang summary::after{content:"";width:6px;height:6px;border-right:2px solid #9aa3b2;border-bottom:2px solid #9aa3b2;transform:rotate(45deg) translateY(-2px);margin-left:2px}
.er-lang summary:hover,.er-lang[open] summary{border-color:#ef3b2d;background:#16191f}
.er-lang ul{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;margin:0;padding:6px;list-style:none;background:#16191f;border:1px solid #2a2f38;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.55);z-index:60}
.er-lang li a{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:8px;color:#e9ecf1;text-decoration:none;font-size:.95rem}
.er-lang li a b{font:700 .78rem/1 ui-monospace,Consolas,monospace;color:#9aa3b2;width:22px}
.er-lang li a:hover{background:#1f232b}
.er-lang li a[aria-current]{color:#ff8a7f}
.er-lang li a[aria-current] b{color:#ef3b2d}
.er-lang .er-mob{display:none}
.er-lang .er-sep{border-top:1px solid #2a2f38;margin:6px 4px}
@media (max-width:700px){.er-nav{display:none}.er-lang .er-mob{display:block}.er-header .wp-block-button__link{padding:7px 10px!important}}

/* Veilig-installeren-blok bij de downloadknop */
p.er-safe{margin:18px 0 20px;padding:14px 18px;border:1px solid rgba(47,191,113,.45);border-left:4px solid #2fbf71;border-radius:12px;background:rgba(47,191,113,.08);font-size:.95rem;line-height:1.55;color:#e9ecf1}
p.er-safe strong:first-child{color:#2fbf71;font-size:1rem}

/* Webwinkel: bestelformulier met PayPal-knop */
.er-shop{margin:28px 0;padding:26px 28px;border:1px solid #2a2f38;border-radius:18px;background:linear-gradient(160deg,#16191f 0%,#111419 60%);max-width:560px}
.er-shop h3{margin:0 0 16px}
.er-shop-form label{display:block;font-size:.9rem;color:#9aa3b2;margin-bottom:12px}
.er-shop-form input,.er-shop-form select{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:10px 12px;border-radius:9px;border:1px solid #2a2f38;background:#0d0f13;color:#e9ecf1;font-size:1rem}
.er-shop-form input:focus,.er-shop-form select:focus{outline:none;border-color:#ef3b2d}
.er-shop-price{display:flex;flex-direction:column;gap:3px;margin:6px 0 10px;color:#c8ced8}
.er-shop-price s{color:#9aa3b2;margin-left:6px}
.er-shop-price #erBulk{color:#f5b021;font-size:.9rem}
.er-shop-price b{font-size:1.25rem;color:#fff;margin-top:4px}
.er-shop-note{font-size:.88rem;color:#9aa3b2;margin:8px 0 16px}
.er-shop-err{color:#ff8a7f;font-weight:600;margin:4px 0 12px}
.er-shop-done h3{color:#2fbf71}
.er-code{display:flex;gap:8px;margin:8px 0}
.er-code textarea{flex:1;font:13px/1.4 ui-monospace,Consolas,monospace;background:#0d0f13;color:#e9ecf1;border:1px solid #2a2f38;border-radius:9px;padding:8px;resize:none}
.er-code button{padding:0 14px;border-radius:9px;border:1px solid #2fbf71;background:#1f6b43;color:#fff;cursor:pointer}

.er-pay{display:block;width:100%;padding:14px 18px;border:0;border-radius:10px;background:#ef3b2d;color:#fff;font-size:1.05rem;font-weight:700;cursor:pointer}
.er-pay:hover{background:#ff5a4a}.er-pay:disabled{opacity:.6;cursor:wait}
.er-shop-test{background:#3a2a05;color:#f5b021;border:1px solid #f5b021;border-radius:8px;padding:6px 10px;font:700 .8rem/1.2 ui-monospace,Consolas,monospace;margin:-6px 0 14px}

/* Contactformulier */
.er-contact textarea{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:10px 12px;border-radius:9px;border:1px solid #2a2f38;background:#0d0f13;color:#e9ecf1;font:inherit;font-size:1rem;resize:vertical}
.er-contact textarea:focus{outline:none;border-color:#ef3b2d}
.er-contact .ec-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.er-contact .ec-cap{display:flex;align-items:center;gap:10px;margin:4px 0 10px;flex-wrap:wrap}
.er-contact .ec-cap img{border-radius:9px;border:1px solid #2a2f38;background:#f0f2f5;width:210px;height:64px}
.er-contact .ec-new{padding:8px 12px;border-radius:9px;border:1px solid #2a2f38;background:#16191f;color:#c8ced8;cursor:pointer}
.er-contact .ec-code{letter-spacing:.3em;text-transform:uppercase;font-family:ui-monospace,Consolas,monospace;max-width:220px}