/* LindsayFierce ~ custom.css
   Layered over the Evenings template styles.
   Accent pink stays the template's #ff3e91 throughout. */


/* ~~~~~~~~ hero ~~~~~~~~ */

.intro .introduction h1 {
letter-spacing: 2px;
}

.intro-tagline {
display: block;
font-family: 'LeagueGothicRegular', sans-serif;
font-size: 22px;
letter-spacing: 6px;
text-transform: uppercase;
color: #fff;
padding: 0 10px;
}

.hero-ctas {
margin: 42px 0 0 0;
padding: 0;
text-align: center;
}

.hero-ctas a {
display: inline-block;
font-family: 'BebasNeueRegular', sans-serif;
font-size: 20px;
letter-spacing: 3px;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.55);
padding: 12px 28px 9px 28px;
margin: 6px 8px;
text-decoration: none;
background: rgba(0, 0, 0, 0.25);
transition: all 0.25s ease;
}

.hero-ctas a:hover,
.hero-ctas a:focus-visible {
border-color: #ff3e91;
color: #ff3e91;
background: rgba(0, 0, 0, 0.55);
}

.hero-ctas a.cta-primary {
border-color: #ff3e91;
background: #ff3e91;
color: #fff;
}

.hero-ctas a.cta-primary:hover,
.hero-ctas a.cta-primary:focus-visible {
background: rgba(0, 0, 0, 0.55);
color: #ff3e91;
}


/* ~~~~~~~~ social icons ~ inline SVG replaces the template PNGs ~~~~~~~~ */

ul.social-icons li a {
display: inline-block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
opacity: 0.85;
transition: opacity 0.2s ease, transform 0.2s ease;
}

ul.social-icons li a svg {
width: 20px;
height: 20px;
fill: #fff;
vertical-align: middle;
}

ul.social-icons li a:hover {
opacity: 1;
transform: translateY(-2px);
}

ul.social-icons li a:hover svg {
fill: #ff3e91;
}


/* ~~~~~~~~ countdown ~ next stream ~~~~~~~~ */

#countdown-label {
font-family: 'BebasNeueRegular', sans-serif;
font-size: 18px;
letter-spacing: 3px;
text-transform: uppercase;
text-align: right;
text-shadow: 1px 1px 2px #000;
margin: 0;
padding: 0 2px 2px 0;
}

#countdown-label a {
color: #fff;
text-decoration: none;
}

#countdown-label a .stream-name,
#countdown-label a:hover {
color: #ff3e91;
}

#countdown-wrap.is-live #countdown-label a {
color: #ff3e91;
animation: livepulse 1.6s ease-in-out infinite;
}

@keyframes livepulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}

ul#countdown li span {
color: #fff;
text-shadow: 1px 1px 2px #000;
}


/* ~~~~~~~~ lower page shared ~~~~~~~~ */

.lower-page {
display: none;
}

.upper-page {
display: block;
}

.panel-note {
font-family: 'LeagueGothicRegular', sans-serif;
font-size: 20px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
text-align: center;
margin: 0;
padding: 6px 10px 22px 10px;
}

.panel-note a,
.lower-content p a {
color: #ff3e91;
text-decoration: none;
}

.panel-note a:hover,
.lower-content p a:hover {
text-decoration: underline;
}

.accent {
color: #ff3e91;
}


/* ~~~~~~~~ listen ~ mixcloud embeds ~~~~~~~~ */

.set-card {
margin: 0 0 26px 0;
padding: 0 10px;
text-align: center;
}

.set-card h2 {
padding-bottom: 4px;
}

.set-card .set-genre {
display: block;
font-family: 'LeagueGothicRegular', sans-serif;
font-size: 17px;
letter-spacing: 3px;
text-transform: uppercase;
color: #ff3e91;
padding: 0 0 12px 0;
}

.set-card iframe {
width: 100%;
max-width: 720px;
height: 120px;
border: 0;
display: block;
margin: 0 auto;
}


/* ~~~~~~~~ watch ~ twitch embed ~~~~~~~~ */

.twitch-embed {
position: relative;
width: 100%;
max-width: 880px;
margin: 0 auto 26px auto;
padding-top: 0;
}

.twitch-embed iframe {
width: 100%;
height: 480px;
border: 0;
display: block;
}

@media only screen and (max-width: 767px) {
.twitch-embed iframe { height: 240px; }
}


/* ~~~~~~~~ events ~ credit list ~~~~~~~~ */

.credit-list {
list-style: none;
margin: 0 auto;
padding: 0 10px;
max-width: 640px;
text-align: center;
}

.credit-list li {
font-family: 'LeagueGothicRegular', sans-serif;
font-size: 26px;
letter-spacing: 2px;
text-transform: uppercase;
color: #fff;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.credit-list li:last-child {
border-bottom: none;
}

.credit-list li span {
display: block;
font-size: 15px;
letter-spacing: 3px;
color: rgba(255, 255, 255, 0.55);
padding-top: 2px;
}


/* ~~~~~~~~ booking form ~~~~~~~~ */

#booking-form {
max-width: 640px;
margin: 0 auto;
padding: 0 10px;
text-align: left;
}

#booking-form label {
display: block;
font-family: 'BebasNeueRegular', sans-serif;
font-size: 16px;
letter-spacing: 3px;
color: #fff;
padding: 14px 0 6px 0;
}

#booking-form input[type="text"],
#booking-form input[type="email"],
#booking-form input[type="date"],
#booking-form select,
#booking-form textarea {
width: 100%;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.45);
border: 1px solid rgba(255, 255, 255, 0.35);
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 14px;
padding: 11px 12px;
outline: none;
transition: border-color 0.2s ease;
}

#booking-form select option {
background: #111;
color: #fff;
}

#booking-form input:focus,
#booking-form select:focus,
#booking-form textarea:focus {
border-color: #ff3e91;
}

#booking-form .field-error {
border-color: #ff3e91;
box-shadow: 0 0 0 1px #ff3e91;
}

#booking-form .form-row {
display: flex;
gap: 18px;
}

#booking-form .form-row > div {
flex: 1;
}

@media only screen and (max-width: 600px) {
#booking-form .form-row { display: block; }
}

#booking-form button[type="submit"] {
display: block;
margin: 28px auto 0 auto;
font-family: 'BebasNeueRegular', sans-serif;
font-size: 22px;
letter-spacing: 4px;
color: #fff;
background: #ff3e91;
border: 1px solid #ff3e91;
padding: 13px 44px 10px 44px;
cursor: pointer;
transition: all 0.25s ease;
}

#booking-form button[type="submit"]:hover,
#booking-form button[type="submit"]:focus-visible {
background: rgba(0, 0, 0, 0.55);
color: #ff3e91;
}

#booking-error {
display: none;
color: #ff3e91;
font-family: 'BebasNeueRegular', sans-serif;
font-size: 18px;
letter-spacing: 2px;
text-align: center;
padding-top: 16px;
}

#booking-thanks {
display: none;
}


/* ~~~~~~~~ press kit ~~~~~~~~ */

.press-bio {
max-width: 680px;
margin: 0 auto;
}

.press-facts {
list-style: none;
margin: 0 auto;
padding: 10px;
max-width: 560px;
text-align: center;
}

.press-facts li {
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: rgba(255, 255, 255, 0.85);
padding: 6px 0;
}

.press-facts li strong {
font-family: 'BebasNeueRegular', sans-serif;
font-weight: normal;
font-size: 16px;
letter-spacing: 2px;
color: #ff3e91;
padding-right: 8px;
}


/* ~~~~~~~~ footer credit ~~~~~~~~ */

.credits .address a:hover {
color: #ff3e91;
}


/* ~~~~~~~~ reduced motion ~~~~~~~~ */

@media (prefers-reduced-motion: reduce) {
#countdown-wrap.is-live #countdown-label a { animation: none; }
.hero-ctas a, ul.social-icons li a { transition: none; }
}


/* ~~~~~~~~ mobile menu ~ 7 items stack vertically, tap toggle ~~~~~~~~ */

.menu-mobile li.open ul {
display: block;
width: auto;
}

.menu-mobile li ul li,
.menu-mobile li ul li a {
float: none;
display: block;
text-align: left;
}

.menu-mobile li ul li {
margin: 0;
padding: 0;
height: auto;
}

.menu-mobile li ul li a {
padding: 6px 14px;
height: auto;
}


/* ~~~~~~~~ countdown steps aside on mobile while a panel is open ~~~~~~~~ */

@media only screen and (max-width: 767px) {
body.panel-open #countdown-wrap {
display: none;
}
}


/* ~~~~~~~~ panel art ~ banners + set thumbs from the brand artwork ~~~~~~~~ */

.panel-banner {
width: 100%;
max-width: 880px;
margin: 0 auto 30px auto;
padding: 0 10px;
box-sizing: border-box;
}

.panel-banner img {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
border: 1px solid rgba(255, 62, 145, 0.35);
}

.set-card {
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
max-width: 880px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

.set-card .set-thumb {
flex: 0 0 130px;
}

.set-card .set-thumb img {
width: 130px;
height: 130px;
object-fit: cover;
display: block;
border: 1px solid rgba(255, 62, 145, 0.35);
}

.set-card .set-body {
flex: 1;
min-width: 0;
}

.set-card .set-body h2 {
text-align: left;
padding: 0 0 2px 0;
}

.set-card .set-genre {
text-align: left;
}

.set-card iframe {
margin: 0;
max-width: 100%;
}

@media only screen and (max-width: 600px) {
.set-card { display: block; text-align: center; }
.set-card .set-thumb { margin: 0 auto 14px auto; }
.set-card .set-thumb img { margin: 0 auto; }
.set-card .set-body h2, .set-card .set-genre { text-align: center; }
.panel-banner img { height: 100px; }
}


/* ~~~~~~~~ press kit ~ artwork download tiles ~~~~~~~~ */

.art-grid {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
max-width: 720px;
margin: 0 auto;
padding: 0 10px;
}

.art-grid a {
flex: 0 0 calc(50% - 7px);
display: block;
position: relative;
}

.art-grid a img {
width: 100%;
height: 130px;
object-fit: cover;
display: block;
border: 1px solid rgba(255, 255, 255, 0.25);
transition: border-color 0.2s ease;
}

.art-grid a:hover img {
border-color: #ff3e91;
}

.art-grid a span {
position: absolute;
right: 8px;
bottom: 8px;
font-family: 'BebasNeueRegular', sans-serif;
font-size: 13px;
letter-spacing: 2px;
color: #fff;
background: rgba(0, 0, 0, 0.65);
padding: 4px 9px 2px 9px;
}

@media only screen and (max-width: 600px) {
.art-grid a { flex: 0 0 100%; }
}