/* 5-Hour ENERGY landing page (template-5hourenergy.php). Values from Figma HFWVFfXRG19qEBVMOaU18i. */

.lp-5hr {
    /* clip, not hidden: hidden turns the wrapper into a scroll container (nested scrollbar + scroll trapping) */
    overflow-x: clip;
    background: #fff;
    padding-bottom: 60px; /* breathing room between bottom paper rip and global footer */
}

.lp-5hr img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}

.lp-5hr__sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Hero */
.lp-5hr__hero picture {
    display: block;
}

/* Intro */
.lp-5hr__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 1370px;
    margin: 0 auto;
    padding: 50px 20px 22px;
    text-align: center;
}

.lp-5hr__intro h1 {
    margin: 0;
    font-family: 'nexa-rust-sans-black-2', 'Nexa Rust Sans Black 1', 'NexaRustSans', sans-serif;
    font-weight: 900;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #000;
}

/* Buttons */
.lp-5hr__btn {
    display: inline-block;
    padding: 18px 40px; /* 18 + 31 + 18 = Figma's 67px height, but safe when text wraps */
    background: #AE2424;
    color: #fff;
    font-family: 'nexa-rust-sans-black-2', 'Nexa Rust Sans Black 1', 'NexaRustSans', sans-serif;
    font-weight: 900;
    font-size: 26px;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.lp-5hr__btn:hover {
    background: #000;
    color: #fff;
}

.lp-5hr__btn:focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
}

.lp-5hr__btn--white {
    background: #fff;
    color: #AE2424;
}

.lp-5hr__btn--white:focus-visible {
    outline-color: #fff;
}

/* FAQ band. Paper edges are 2200 wide art scaled to 100% width, so their height is 143/2200 and 133/2200 of the viewport. */
.lp-5hr__faq {
    position: relative;
    padding: calc(6.5vw + 60px) 20px calc(6.05vw + 70px);
    background-color: #AE2424;
    background-image: url('../images/5hourenergy/5hr-red-bg.jpg');
    background-image: image-set(url('../images/5hourenergy/5hr-red-bg.webp') type('image/webp'), url('../images/5hourenergy/5hr-red-bg.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: center top;
}

.lp-5hr__paper {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}

/* ponytail: -1px bleed hides subpixel red seams at fractional widths */
.lp-5hr__paper--top { top: -1px; }
.lp-5hr__paper--btm { bottom: -1px; }

.lp-5hr__faq-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    max-width: 1330px;
    margin: 0 auto;
}

.lp-5hr__faq h2 {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    color: #fff;
}

.lp-5hr__faq ul {
    align-self: stretch;
    margin: 0;
    padding: 0 0 0 1.1em;
    list-style: disc outside;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; /* Figma is Regular 400; header.php only loads 500/600/700 */
    font-size: 36px;
    line-height: 1.25;
    color: #fff;
}

.lp-5hr__faq li {
    margin: 0 0 12px;
    padding: 0;
    list-style: inherit;
}

.lp-5hr__faq li:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 980px) {
    .lp-5hr {
        padding-bottom: 40px;
    }

    .lp-5hr__intro {
        padding-top: 36px;
    }

    .lp-5hr__intro h1 {
        font-size: 28px;
    }

    .lp-5hr__btn {
        padding: 14px 28px;
        font-size: 20px;
    }

    .lp-5hr__faq {
        padding-top: calc(6.5vw + 36px);
        padding-bottom: calc(6.05vw + 44px);
    }

    .lp-5hr__faq-inner {
        gap: 30px;
    }

    .lp-5hr__faq h2 {
        font-size: 32px;
    }

    .lp-5hr__faq ul {
        font-size: 22px;
    }

    .lp-5hr__faq li {
        margin-bottom: 12px;
    }
}

@media screen and (max-width: 400px) {
    .lp-5hr__intro h1 {
        font-size: 22px;
    }

    .lp-5hr__btn {
        padding: 12px 20px;
        font-size: 17px;
    }

    .lp-5hr__faq h2 {
        font-size: 26px;
    }

    .lp-5hr__faq ul {
        font-size: 18px;
    }
}