media/css/firefox/more/misinformation.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';
$brand-theme: 'firefox';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';

// -------------------------------------------------------------------------- //
// Page Hero

.c-hero {
    .mzp-c-logo {
        margin-right: auto;
        margin-left: auto;
    }

    .mzp-c-button-download-container {
        margin-bottom: 0;
    }

    @media #{$mq-md} {
        margin-bottom: $layout-lg;

        .mzp-c-logo {
            margin-right: 0;
            margin-left: 0;
        }

        .mzp-c-button-download-container {
            margin-top: $spacing-md;
        }
    }
}

// -------------------------------------------------------------------------- //
// Article styles

.misinformation-article-block-img {
    display: block;
    margin: $layout-lg auto;
    text-align: center;
}

// -------------------------------------------------------------------------- //
// Misinformation <details> section

.misinformation-help-details {
    margin: $layout-sm auto;

    @media #{$mq-md} {
        margin: $layout-lg auto;
    }
}

.misinformation-help-heading {
    display: block;
}

.misinformation-help-steps {
    counter-reset: step-counter;
    margin-top: $spacing-2xl;

    h3 {
        @include text-title-xs;
    }

    li {
        @include bidi(((padding-left, 3em, padding-right, 3em),));
        margin-bottom: $spacing-lg;
        position: relative;

        &::before {
            @include bidi(((left, 0, right, 0),));
            border-radius: 100%;
            border: 3px solid $color-marketing-gray-80;
            content: counter(step-counter);
            counter-increment: step-counter;
            display: block;
            font-weight: bold;
            height: 1.5em;
            position: absolute;
            text-align: center;
            top: 0;
            width: 1.5em;
        }
    }
}

// -------------------------------------------------------------------------- //
// How Firefox Helps section

.misinformation-firefox-helps {
    .mzp-c-split-container {
        max-width: $content-md;
        box-sizing: content-box;

        h2 {
            @include text-title-xs;
        }
    }

    .misinformation-firefox-helps-heading {
        max-width: $content-md;
        margin: $layout-xl auto $layout-sm;
        text-align: center;
    }

    .mzp-c-split-media {
        max-width: 100%;
    }

    .mzp-c-split-media-asset {
        margin: 0 auto;
        max-width: 320px;
    }

    @media #{$mq-lg} {
        .mzp-c-split-media {
            justify-self: stretch;
        }

        .mzp-c-split-media-asset {
            max-width: 100%;
            width: 100%;
        }
    }
}

// -------------------------------------------------------------------------- //
// Picto Cards

.misinformation-learn-more {
    background-color: $color-marketing-gray-10;

    .mzp-c-picto {
        margin: 0 auto;
        max-width: 500px;
    }

    .mzp-c-picto + .mzp-c-picto {
        padding-top: $spacing-md;
    }

    @media #{$mq-md} {
        .mzp-c-picto + .mzp-c-picto {
            padding-top: 0;
        }
    }
}

// -------------------------------------------------------------------------- //
// Call Out

.mzp-c-callout-compact.mzp-t-dark {
    background: $color-ink-80;
}