@import "./shared.css";
@import "./page-grid.css";
@import "./help-shared.css";

h2 {
    margin: 2rem 0 1rem 0;
}

.help-header-logo {
    text-indent: -999rem;
}

.intro::first-letter {
    font-size: 150%;
    font-weight: bold;
}

.page-grid-inside {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    max-width: 36rem;
}

/*
.page-grid-inside darkreader-pay-tiers {
    display: none;
}

.android .page-grid-inside darkreader-pay-tiers {
    display: block;
}
*/

.page-grid-inside darkreader-backers-header {
    display: none;
}

.android .page-grid-inside darkreader-backers-header,
.android darkreader-ios-static,
.android darkreader-ios-side,
.android darkreader-backers-top-short,
.android article darkreader-pay-tiers {
    display: none;
}

.page-grid-content darkreader-backers-header,
.page-grid-content darkreader-support-us {
    display: none;
}

.page-grid-ios {
    left: calc(50vw - 10rem);
}

.page-grid-left {
    display: none;
    grid-area: left;
    position: fixed;
    width: 16rem;
}

.page-grid-left > darkreader-ios-static {
    position: absolute;
    transform: translateY(10rem);
    transition: transform 500ms;
}

.page-grid-left > darkreader-ios-static.ios__show-up {
    transform: translateY(2.5rem);
}

.page-grid-left > darkreader-ios-static.ios__scroll-down {
    transform: translateY(1rem);
}

.page-grid-left > darkreader-ios-static.ios__scroll-up {
    transform: translateY(4.5rem);
}

article > h1:first-child {
    display: none;
}

.page-grid-inside darkreader-backers-top-short {
    margin-top: 1rem;
}

html[data-p="p"] .page-grid-inside darkreader-mobile-top-short {
    display: none;
}

html:not([data-p="p"]) darkreader-backers-top-short {
    display: none;
}

.android darkreader-mobile-top-short {
    display: none;
}

.page-grid-ios {
    display: none;
}

@media screen and (min-width: 74rem) {
    .page-grid-body {
        grid:
            "v2 v2 v2" auto
            "left header side" auto
            "left inside side" auto
            "left content side" auto
            "left footer side" auto
            / 16rem auto 16rem;
        max-width: 74rem;
    }

    .page-grid-side {
        right: calc(50% - 37rem);
    }

    .page-grid-left {
        display: unset;
    }

    .list-copied {
        display: none;
    }
}

@media screen and (min-width: 57rem) {
    .page-grid-side darkreader-backers-side {
        opacity: 0;
        pointer-events: none;
        transition: opacity 500ms;
    }
    
    .page-grid-side--visible darkreader-backers-side {
        opacity: 1;
        pointer-events: all;
    }
    
    .page-grid-side--visible::before darkreader-backers-side {
        background-color: var(--color-bg);
        content: "";
        height: 2rem;
        position: absolute;
        top: -2rem;
        width: 100%;
    }

    .page-grid-side darkreader-mobile-side {
        opacity: 1;
        pointer-events: all;
        transition: opacity 500ms;
    }
    
    .page-grid-side--visible darkreader-mobile-side {
        opacity: 0;
        pointer-events: none;
    }
}

.small-pie-logo {
    background-image: url(/images/pie-logo-white.svg), url(/images/pie-badge.svg);
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: 65% auto, contain;
    display: block;
    float: left;
    height: 4rem;
    margin-right: 1rem;
    position: relative;
    text-indent: -999rem;
    width: 4rem;
}

.small-pie-logo::after {
    background-image: url(/images/pie-logo-color.svg), url(/images/pie-badge-light.svg);
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: 65% auto, contain;
    content: "";
    display: inline-block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: 250ms;
    width: 100%;
}

.small-pie-logo:hover::after {
    opacity: 1;
}

blockquote:has(.small-pie-logo) {
    min-height: 4rem;
}

html:not([data-p="p"]) .pie-help {
    display: none;
}

.pie-help {
    color: #baa2f0;
}

.pie-help a:not(:hover) {
    color: #baa2f0;
}

darkreader-mobile-side {
    left: 0;
    position: absolute;
    top: 0;
    width: 16rem;
    z-index: -1;
}

.android darkreader-mobile-side {
    display: none;
}

iframe {
    max-width: calc(100vw - 2rem);
}

#video + ul li {
    list-style-type: "▶️";
    padding-left: 0.5rem;
}

/* V2 */

.page-grid-header {
    display: none;
}

.page-grid-inside {
    display: none;
}

.page-grid-side {
    align-self: start;
    position: sticky;
    top: 0;
}

.page-grid-left {
    align-self: start;
    position: sticky;
    top: 0;
}

.v2-help-body {
    grid-area: v2;
}

.v2-help-header {
    align-items: center;
    column-gap: 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.5rem;
}

.v2-help-header-wrapper {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: flex-start;
}

.v2-help-logo-link {
    background-image: url(/images/darkreader-type.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 1rem;
    text-decoration: none;
    text-indent: -999rem;;
    width: 10rem;
}

.v2-help-title {
    color: var(--color-highlight);
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1;
    text-transform: uppercase;
}

.v2-help-header-nav {
    align-items: center;
    column-gap: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.5rem;
}

.v2-list-copied {
    display: none;
}

.v2-help-header-link {
    border-bottom: 0.0625rem solid transparent;
    color: var(--color-text);
    display: inline-block;
    text-decoration: none;
    transition: all 250ms;
}

.v2-help-header-link:hover {
    border-bottom-color: white;
    color: white;
}

.v2-help-tiers {
    --color-bg: #0f1319;
    align-items: center;
    background-color: var(--color-bg);
    border-radius: 2rem;
    display: flex;
    justify-content: center;
    padding: 1rem 0 1.5rem 0;
}

.v2-secondary-banners {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.v2-secondary-banner {
    --color-bg: #0f1319;
    align-items: center;
    background-color: var(--color-bg);
    border-radius: 2rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    min-height: 8rem;
    padding: 1rem;
    width: 50%;
}

.v2-banner-pie {
    --color-bg: #1f2342;
    --color-text: #a3b7ff;

    darkreader-backers-top-short {
        --color-bg: #653fa0;
        --pie-gradient: none;
    }
}

html:not([data-p="p"]) .v2-banner-pie {
    display: none;
}

html:not([data-p="p"]) .v2-banner-mobile {
    width: 100%;
}

.v2-banner-mobile {
    --color-bg: #213042;
    --color-text: #bbddff;
    flex: none;
    overflow: hidden;
    padding-bottom: 0;
}

html:not([data-p="p"]) .v2-banner-pie {
    display: none;
}

html:not([data-p="p"]) .v2-banner-mobile {
    width: 100%;
}

.android .v2-secondary-banner {
    display: none;
}

.v2-help-banners {
    display: grid;
    gap: 1rem;
    grid: "large large" auto "left right" auto / auto auto;
    margin: 1rem 0;
}

.v2-help-tiers {
    grid-area: large;
    width: 100%;
}

.v2-banner-mobile {
    grid-area: right;
    width: 100%;
}

.v2-banner-pie {
    grid-area: left;
    width: 100%;
}

html:not([data-p="p"]) .v2-help-banners {
    grid: "large" auto "right" auto / auto;
}

/* V2.1 */

.v2-banner-mobile,
.v2-help-tiers {
    display: none;
}

.v2-help-banners {
    grid: "left" auto / auto;
    margin-bottom: 0;
}

.page-grid-inside {
    display: flex;
    margin-top: 1rem;
}

.page-grid-inside darkreader-mobile-top-short {
    display: none;
}

html[data-p="p"] .page-grid-inside > :not(darkreader-pay-tiers) {
    display: none;
}

.page-grid-side {
    margin-top: 0;
}

@media screen and (max-width: 74rem) {
    .page-grid-inside {
        max-width: 100%;
        width: 100%;
    }
}

html:not(.android) .intro {
    display: none;
}

.v2-banner-safari {
    --color-text: #5ea7d5;
    background-color: #182636;
    background-image: linear-gradient(to top, #131d2e 0%, #151a28 20%, black);
    display: none;
    grid-area: large;
    padding: 3rem 2rem;
    width: 100%;
}

html:not([data-p="p"])[data-o="mac"] .v2-banner-safari {
    display: none;
}

html:not([data-p="p"]) .v2-banner-jump {
    display: block;
}

.v2-banner-jump {
    --color-text: #5ea7d5;
    background-color: #182636;
    background-image: linear-gradient(to top, #131d2e 0%, #151a28 20%, black);
    display: none;
    grid-area: large;
    padding: 3rem 2rem;
    width: 100%;
}