/*
Theme Name: Elevated Lite Child
Template: elevated-lite
Version: 1.0.1
*/

/* Bars */
.soundbars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    width: 40px;
    height: 20px;
    margin: 12px auto;
}

.soundbar {
    display: block;
    background-color: #70f1ff;
    width: 3px;
    height: 3px;
    animation: soundbar-bounce 400ms -800ms linear infinite alternate;
}

.soundbar:nth-child(1)  { animation-duration: 474ms; }
.soundbar:nth-child(2)  { animation-duration: 433ms; }
.soundbar:nth-child(3)  { animation-duration: 407ms; }
.soundbar:nth-child(4)  { animation-duration: 458ms; }
.soundbar:nth-child(5)  { animation-duration: 400ms; }
.soundbar:nth-child(6)  { animation-duration: 427ms; }
.soundbar:nth-child(7)  { animation-duration: 441ms; }
.soundbar:nth-child(8)  { animation-duration: 419ms; }
.soundbar:nth-child(9)  { animation-duration: 487ms; }
.soundbar:nth-child(10) { animation-duration: 442ms; }

@keyframes soundbar-bounce {
    0%   { opacity: .35; height: 3px; }
    100% { opacity: 1;   height: 20px; }
}


/* The base state (standard look) */
.wp-block-button.fill-on-hover .wp-block-button__link {
    transition: all 0.3s ease; /* Makes the animation smooth */
}

/* The hover state */
.wp-block-button.fill-on-hover .wp-block-button__link:hover {
    /* 70% opacity of accent color */
    background-color: rgba(112, 241, 255, 0.70);
    color: #ffffff !important;           /* Text color */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Customize AGE GATE button styles */
.agp__buttonType__button {
    border: none !important;
}

.agp__buttonType__button:hover {
    border: none;
}


/* Ensure the FAQ question remains white even when opened (the plugin doesnt expose this).  */
.wpt-faq-accordion ul.wpt-faq-accordion-list li div.wpt-faq-item[data-wpt-faq-state="open"] .wpt-faq-question-text {
    color: rgb(255, 255, 255);
}

.wp-block-post-template > li:last-child .wp-block-separator {
    display: none;
}

/* Style age verification buttons to match WP outline buttons */
.agp__rowInner {
    padding: 100px !important;
}

.agp__buttonType__button, .agp__retryButton {
    /* Reset inline styles */
    color: inherit !important;
    background-color: transparent !important;

    /* Match outline button style */
    display: inline-block;
    border: 2px solid currentColor !important;
    border-radius: 0;
    padding: 0.667em 1.333em;
    font-weight: 400;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Match your theme's "fill-on-hover" behavior */
.agp__buttonType__button:hover, .agp__retryButton:hover {
    /* 70% opacity of accent color */
    background-color: rgba(112, 241, 255, 0.70) !important;
    color: #ffffff !important;           /* Text color */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Remove default form/input styling */
.agp__buttonType__buttonContainer {
    margin: 0 !important;
}

.agp__buttonType__container {
    display: flex;
    justify-content: center;
    gap: 1em;
    flex-wrap: wrap;
}

.team-overlay:before {
    pointer-events: none !important;
}

/* Styling the menu */

.header-col {
    flex: 1 1 0 !important;
    min-width: 0;
}

.header-col--center {
    display: flex !important;
    justify-content: center !important;
}

.header-col--right {
    display: flex !important;
    justify-content: flex-end !important;
}


.dead-link > a {
    pointer-events: none;
    cursor: default;
}

/* Desktop: front-page tweaks */
@media (min-width: 769px) {
    .banner-title {
        font-size: 110px;
    }
}

/* Mobile: front-page tweaks */
@media (max-width: 768px) {
    .banner-title {
        font-size: 50px;
    }
    .friends-image {
        width: 70%;
    }
}

/* Desktop: show left/right, hide mobile burger */
@media (min-width: 769px) {
    .menu-left { display: flex !important; }
    .menu-right { display: flex !important; }
    .menu-mobile { display: none !important; }
}

/* Mobile: hide left/right, show mobile burger */
@media (max-width: 768px) {
    .menu-left { display: none !important; }
    .menu-right { display: none !important; }
    .menu-mobile { display: flex !important; }
}

/**
 * Override parent theme "slide-in" effect from the modal menu that causes weird flickers.
 */
@media screen and (max-width: 600px) {
    .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container {
        display: none;
    }
    .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
        display: block;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
        padding-top: 5rem;
    }
    .wp-block-navigation__responsive-container-close {
        padding-top: 20px;
    }
}

/** Ensure the site logo is always big enough (would get shrunk on mobile otherwise) */
.header-col--center .wp-block-site-logo img {
  min-width: 202px;
}

h1 {
    line-height: 1.1;
}

/** Avoid weird margin-top above the footer (which is the last wp-site-block) */
:where(.wp-site-blocks) > :last-child {
    margin-block-start: 0;
}

/** Site-wide buttons */
.wp-block-button.is-style-outline .wp-block-button__link {
    border-width: 2px;
    border-radius: 0;
}

.wp-block-button.fill-on-hover .wp-block-button__link:hover {
    /* 70% opacity of accent color */
    background-color: rgba(112, 241, 255, 0.70) !important;
}

/**
 * Custom membership stuff
 */
.kk-perks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

.kk-perks li {
    font-size: 0.85em;
    opacity: 0.55;
    padding-left: 14px;
    position: relative;
    line-height: 1.5;
}

.kk-perks li::before { content: '–'; position: absolute; left: 0; opacity: 0.6; }
.kk-perk--strong     { opacity: 0.9 !important; }
.kk-perk--sep        { border-top: 1px solid rgba(128,128,128,0.15); padding-top: 8px; margin-top: 2px; }

/** Paid Memberships Pro customization */
.pmpro .pmpro_card {
    border: 1px solid rgba(128,128,128,0.18);
    background: rgba(255,255,255,0.04);
    box-shadow: none;
}

.pmpro .pmpro_btn:hover {
    /* 70% opacity of accent color */
    background-color: rgba(112, 241, 255, 0.70);
}

.pmpro .pmpro_btn {
    border: none !important;
}

/**
 * Elevated lite parent theme falls back to "cursive" which means
 * that the site looks very weird/ugly if the font is slow to load.
 */
:root {
    --wp--preset--font-family--bebas-neue: "Bebas Neue", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
}