/*  --------------------------------

    GLOBAL PROPERTIES

--------------------------------  */

    /*  --------------------------------

        FONT STYLES

    --------------------------------  */

        @font-face {
            font-family: 'Barlow';
            font-weight: 400;
            src: url('../media/fonts/barlow-regular-webfont.woff2') format('woff2'),
                url('../media/fonts/barlow-regular-webfont.woff') format('woff');
        }

    /*  --------------------------------

        ASTERISK STYLES

    --------------------------------  */

        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
        }

    /*  --------------------------------

        HTML STYLES

    --------------------------------  */

        html {
            scroll-behavior: smooth;
        }

    /*  --------------------------------

        BODY STRUCTURE

    --------------------------------  */

        body {
            padding: 30px 30px 141px 30px;
        }

        /*  --------------------------------

            BODY STYLES

        --------------------------------  */

            body {
                font-family: 'Barlow', sans-serif;
                font-size: 100%;
                font-weight: 400;
                line-height: 1.32;
            }

            .light,
            :root:has(#light:checked) {

                body {
                    background: linear-gradient(
                    to bottom,
                    #EBEBEB,
                    #FBFBFB
                    );
                }

                body {
                    color: #0B0B0B;
                }

            }

            .dark,
            :root:has(#dark:checked) {

                body {
                    background: linear-gradient(
                    to bottom,
                    #0B0B0B,
                    #1B1B1B
                    );
                }

                body {
                    color: #FBFBFB;
                }

            }

    /*  --------------------------------

        ANCHOR STYLES

    --------------------------------  */

        a:link,
        a:visited {
            position: relative;
            text-decoration-line: underline;
            text-decoration-thickness: 2px;
            text-decoration-color: #0B0B0B;
            text-underline-offset: 3px;
            color: #0B0B0B;
        }

        a:hover,
        a:active,
        a:focus {
            position: relative;
            text-decoration: none;
            background: #0B0B0B;
            color: #FBFBFB;
        }

        .dark,
        :root:has(#dark:checked) {

            a:link,
            a:visited {
                text-decoration-color: #FBFBFB;
                color: #FBFBFB;
            }

            a:hover,
            a:active,
            a:focus {
                background: #FBFBFB;
                color: #0B0B0B;
            }

        }



    /*  --------------------------------

        MEDIA STRUCTURE

    --------------------------------  */

        img {
            display: block;
        }

        /*  --------------------------------

            MEDIA STYLES

        --------------------------------  */

            img {
                width: 100%;
                border: none;
            }

    /*  --------------------------------

        HEADING STYLES

    --------------------------------  */

        h1, h2, h3, h4, h5 {
            text-wrap: balanced;
            font-weight: 400;
            text-transform: uppercase;
        }

            h1 {
                font-size: clamp(2.25rem, 1.9688rem + 1.4063vw, 3.375rem);
            }

            h2,
            h3,
            h4,
            h5 {
                font-size: clamp(1.5rem, 1.3125rem + 0.9375vw, 2.25rem);
            }

    /*  --------------------------------

        PARGRAPH STYLES

    --------------------------------  */

        p {

            font-size: clamp(1rem, 0.875rem + 0.625vw, 1.5rem);
            text-wrap: pretty;
        }

            p small {
                font-size: clamp(0.875rem, 0.8125rem + 0.3125vw, 1.125rem);
            }

    /*  --------------------------------

        DETAILS STYLES

    --------------------------------  */

        summary {
            list-style: none;
            font-size: clamp(1rem, 0.875rem + 0.625vw, 1.5rem);
            text-wrap: pretty;
        }

    /*  --------------------------------

        FORM STYLES

    --------------------------------  */

        label,
        input,
        select,
        textarea,
        button {
            font-family: 'Barlow', sans-serif;
            font-weight: 400;
            font-size: clamp(1rem, 0.875rem + 0.625vw, 1.5rem);
        }

    /*  --------------------------------

        TABLE STYLES

    --------------------------------  */

        table {
            border-collapse: collapse;
        }

        th,
        td {
            font-family: 'Barlow', sans-serif;
            font-weight: 400;
            font-size: clamp(1rem, 0.875rem + 0.625vw, 1.5rem);
        }

        th {
            text-align: left;
        }

        .light,
        :root:has(#light:checked) {

            label {
                color: #0B0B0B;
            }

            input,
            textarea,
            button {
                color: #0B0B0B;
            }

        }

        .dark,
        :root:has(#dark:checked) {

            label {
                color: #FBFBFB;
            }

            input,
            textarea,
            button {
                color: #FBFBFB;
            }

        }

    /*  --------------------------------

        LIST STYLES

    --------------------------------  */

        ul,
        ol,
        dl{
            list-style-position: inside;
            list-style-type: none;
        }

            li,
            dt,
            dd {
                font-size: clamp(1rem, 0.875rem + 0.625vw, 1.5rem);
            }

/*  --------------------------------

    PHONE PROPERTIES

--------------------------------  */

    /*  --------------------------------

        GDPR STRUCTURE

    --------------------------------  */

        .gdpr {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-areas:
                'notice notice notice notice'
                'accept accept decline decline';
            gap: 0px 30px;
            max-width: 1600px;
            margin-inline: auto;
        }

            .gdpr .notice {
                grid-area: notice;
            }

            .gdpr .accept {
                grid-area: accept;
            }

            .gdpr .decline {
                grid-area: decline;
            }

            /*  --------------------------------

                GDPR STYLES

            --------------------------------  */

                .gdpr .notice {
                    margin: 0 0 30px 0;
                    padding: 26px 30px 24px 30px;
                }

                .gdpr .accept {
                    cursor: pointer;
                    margin: 0 0 90px 0;
                    padding: 27px 30px 25px 30px;
                    border: none;
                }

                .gdpr .decline {
                    cursor: pointer;
                    margin: 0 0 90px 0;
                    padding: 27px 30px 25px 30px;
                    border: none;
                }


                .light,
                :root:has(#light:checked) {
                    .gdpr .notice {
                        background: #FBB75B;
                    }

                    .gdpr .accept,
                    .gdpr .decline {
                        background: #0B0B0B;
                        color: #FBFBFB;
                    }
                }

                .dark,
                :root:has(#dark:checked) {
                    .gdpr .notice {
                        background: #FBB75B;
                        color: #0B0B0B;
                    }

                    .gdpr .accept,
                    .gdpr .decline {
                        background: #FBFBFB;
                        color: #0B0B0B;
                    }
                }

    /*  --------------------------------

        HEADER STRUCTURE

    --------------------------------  */

        .header {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-areas: 'brand brand brand theme';
            gap: 0px 30px;
            max-width: 1600px;
            margin-inline: auto;
        }

            .header .brand {
                grid-area: brand;
            }

            .header .lightswitch {
                grid-area: theme;
            }

                .header .lightswitch fieldset {
                    border: none;
                }

                .header .lightswitch fieldset label {
                    position: absolute;
                    clip: rect(0 0 0 0);
                    clip-path: inset(50%);
                    overflow: hidden;
                    white-space: nowrap;
                    width: 1px;
                    height: 1px;
                }

                .header .lightswitch fieldset input[type="radio"] {
                    appearance: none;
                    box-sizing: border-box;
                    border-radius: 50%;
                }

        /*  --------------------------------

            HEADER STYLES

        --------------------------------  */

            .header .brand {
                margin-bottom: 5.25rem;
                padding-top: 1.6rem;
                text-transform: uppercase;
            }

            .header .lightswitch {
                margin-bottom: 5.25rem;
                padding-top: clamp(1.625rem, 1.5625rem + 0.3125vw, 1.875rem);
            }

                .header .lightswitch fieldset input[type="radio"] {
                    cursor: pointer;
                    margin-right: 11px;
                    width: clamp(0.6875rem, 0.6094rem + 0.3906vw, 1rem);
                    height: clamp(0.6875rem, 0.6094rem + 0.3906vw, 1rem);
                }

                    .header .lightswitch fieldset input[type="radio"]#light {
                        background: #FBFBFB;
                    }

                    .header .lightswitch fieldset input[type="radio"]#dark {
                        background: #0B0B0B;
                    }

                        .header .lightswitch fieldset input[type="radio"]#light:checked {
                            background: #FB7B5B;
                        }

                        .header .lightswitch fieldset input[type="radio"]#dark:checked {
                            background: #FB5B7B;
                        }


            .light,
            :root:has(#light:checked) {
                .header .brand,
                .header .lightswitch {
                    border-top: 2px solid #0B0B0B;
                }
            }

            .dark,
            :root:has(#dark:checked) {
                .header .brand,
                .header .lightswitch {
                    border-top: 2px solid #FBFBFB;
                }
            }

    /*  --------------------------------

        CONTENT STRUCTURE

    --------------------------------  */

        .content {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-areas:
                'tagline tagline tagline tagline'
                'logo logo logo logo'
                'statistics statistics statistics statistics'
                'pane pane pane pane'
                'advert advert advert advert'
                'recaps recaps recaps recaps'
                'questions questions questions questions'
                'moderators moderators moderators moderators';
            gap: 0px 30px;
            max-width: 1600px;
            margin-inline: auto;
        }

            .content .tagline {
                grid-area: tagline;
                overflow: hidden;
            }

            .content .logo {
                grid-area: logo;
            }

                .content .logo img {
                    width: 100%;
                    display: block;
                    margin-left: auto;
                    margin-right: auto;
                }

            .content .statistics {
                grid-area: statistics;
            }

                .content .statistics ul {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-template-areas:
                        'pitches pitches'
                        'impressions impressions';
                    gap: 0px 30px;
                    max-width: 1600px;
                    margin-inline: auto;
                }

                .content .statistics .pitches {
                    grid-area: pitches;
                }

                .content .statistics .impressions {
                    grid-area: impressions;
                }

            .content .pane {
                grid-area: pane;
            }

            .content .advert {
                grid-area: advert;
            }

            .content .recaps {
                grid-area: recaps;
            }

                .content .recaps ul {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-template-areas:
                        'magazine magazine';
                    gap: 0px 30px;
                    max-width: 1600px;
                    margin-inline: auto;
                }

                .content .recaps .magazine {
                    grid-area: magazine;
                }

            .content .questions {
                grid-area: questions;
            }

            .content .moderators {
                grid-area: moderators;
            }

        /*  --------------------------------

            CONTENT STYLES

        --------------------------------  */

            .content .tagline {
                padding: 21px 0 16px 0;
            }

            .content .logo {
                margin: 0 0 90px 0;
                padding: 90px;
                border-radius: 0 90px 0 90px;
            }

            .content .statistics {
                margin: 0 0 60px 0;
            }

                .content .statistics h2 {
                    padding: 24px 0 20px 0;
                }

                .content .statistics .pitches {
                    margin: 0 0 30px 0;
                }

                .content .statistics .impressions {
                    margin: 0 0 30px 0;
                }

                    .content .statistics .pitches,
                    .content .statistics .impressions {
                        border-radius: 0 60px 0 60px;
                        padding: 56px 60px 53px 60px;
                        text-align: center;
                        text-transform: uppercase;
                    }

            .content .pane {
                margin: 0 0 60px 0;
            }

                .content .pane h2 {
                    padding: 24px 0 20px 0;
                }

                .content .pane details {
                    margin: 0 0 30px 0;
                }

                .content .pane summary {
                    cursor: pointer;
                    padding: 26px 30px 26px 30px;
                }

                .content .pane details span::after {
                    content: '+';
                    float: right;
                }

                    .content .pane details[open] span::after {
                        content: '-';
                        float: right;
                    }

                        .content .pane .data {
                            padding: 25px 30px 3px 30px;
                        }

                            .content .pane .data h3 {
                                margin: 0 0 5px 0;
                                font-size: clamp(1rem, 0.875rem + 0.625vw, 1.5rem);
                                font-weight: 700;
                                text-transform: capitalize;
                            }

                            .content .pane .data p {
                                margin: 0 0 20px 0;
                            }

            .content .advert {
                margin: 0 0 87px 0;
            }

                .content .advert h2 {
                    padding: 24px 0 20px 0;
                }

                .content .advert ul li {
                    margin: 0 0 25px 0;
                }

                    .content .advert ul li a:link,
                    .content .advert ul li a:visited {
                        filter: grayscale(0%);
                    }

                    .content .advert ul li a:hover,
                    .content .advert ul li a:active,
                    .content .advert ul li a:focus {
                        filter: grayscale(0%);
                    }

                        .content .advert ul li a img {
                            border-radius: 0 60px 0 60px;
                        }

                .content .advert p {
                    text-align: center;
                }

            .content .recaps {
                margin: 0 0 60px 0;
            }

                .content .recaps h2 {
                    padding: 24px 0 20px 0;
                }

                .content .recaps .magazine {
                    margin: 0 0 30px 0;
                    padding: 56px 60px 53px 60px;
                    border-radius: 0 60px 0 60px;
                    text-align: center;
                    text-transform: uppercase;
                }

            .content .questions {
                margin: 0 0 60px 0;
            }

                .content .questions h2 {
                    padding: 24px 0 20px 0;
                }

                .content .questions details {
                    margin: 0 0 30px 0;
                }

                .content .questions summary {
                    cursor: pointer;
                    padding: 26px 30px 23px 30px;
                }

                .content .questions details span::after {
                    content: '+';
                    float: right;
                }

                    .content .questions details[open] span::after {
                        content: '-';
                        float: right;
                    }

                    .content .questions details div {
                        padding: 26px 30px 7px 30px;
                    }

                        .content .questions details div p {
                            margin: 0 0 19px 0;
                        }

            .content .moderators {
                margin: 0 0 76px 0;
            }

                .content .moderators h2 {
                    padding: 24px 0 16px 0;
                }

                .content .moderators ul li {
                    margin: 0 0 10px 0;
                }


            .light,
            :root:has(#light:checked) {
                .content h1,
                .content h2 {
                    border-top: 2px solid #0B0B0B;
                }

                .content details {
                    border-left: 30px solid #0B0B0B;
                }

                .content details[open] {
                    border-left: none;
                }

                .content .recaps .magazine a:link,
                .content .recaps .magazine a:visited {
                    text-decoration-color: #FBFBFB;
                }

                .content .logo {
                    background: #FB7B5B;
                }

                .content .statistics .pitches,
                .content .statistics .impressions,
                .content details[open] summary,
                .content .recaps .magazine {
                    background: #0B0B0B;
                }

                .content summary,
                .content .questions details div,
                .content .recaps .magazine a:hover,
                .content .recaps .magazine a:active,
                .content .recaps .magazine a:focus {
                    background: #FBFBFB;
                }

                .content .pane details .data {
                    background: #FBB75B;
                }

                .content .statistics .pitches,
                .content .statistics .impressions,
                .content details[open] summary,
                .content .pane details[open] span::after,
                .content .questions details[open] span::after,
                .content .recaps .magazine,
                .content .recaps .magazine a:link,
                .content .recaps .magazine a:visited {
                    color: #FBFBFB;
                }

                .content summary,
                .content .pane details span::after,
                .content .questions details span::after,
                .content .recaps .magazine a:hover,
                .content .recaps .magazine a:active,
                .content .recaps .magazine a:focus {
                    color: #0B0B0B;
                }
            }

            .dark,
            :root:has(#dark:checked) {
                .content h1,
                .content h2 {
                    border-top: 2px solid #FBFBFB;
                }

                .content details {
                    border-left: 30px solid #FBFBFB;
                }

                .content details[open] {
                    border-left: none;
                }

                .content .recaps .magazine a:link,
                .content .recaps .magazine a:visited {
                    text-decoration-color: #0B0B0B;
                }

                .content .logo {
                    background: #FB5B7B;
                }

                .content .statistics .pitches,
                .content .statistics .impressions,
                .content details[open] summary,
                .content .recaps .magazine {
                    background: #FBFBFB;
                }

                .content .recaps .magazine a:hover,
                .content .recaps .magazine a:active,
                .content .recaps .magazine a:focus {
                    background: #0B0B0B;
                }

                .content summary,
                .content .questions details div {
                    background: #1B1B1B;
                }

                .content .pane details .data {
                    background: #FB5B7B;
                }

                .content .statistics .pitches,
                .content .statistics .impressions,
                .content details[open] summary,
                .content .pane details[open] span::after,
                .content .questions details[open] span::after,
                .content .recaps .magazine,
                .content .recaps .magazine a:link,
                .content .recaps .magazine a:visited {
                    color: #0B0B0B;
                }

                .content summary,
                .content .pane details span::after,
                .content .questions details span::after,
                .content .recaps .magazine a:hover,
                .content .recaps .magazine a:active,
                .content .recaps .magazine a:focus {
                    color: #FBFBFB;
                }
            }

    /*  --------------------------------

        FOOTER STRUCTURE

    --------------------------------  */

        .footer {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-areas:
                'interact interact interact interact'
                'disclaimer disclaimer disclaimer disclaimer'
                'footprint footprint footprint rights';
            gap: 0px 30px;
            max-width: 1600px;
            margin-inline: auto;
        }

            .footer .interact {
                grid-area: interact;
            }

            .footer .disclaimer {
                grid-area: disclaimer;
            }

            .footer .footprint {
                grid-area: footprint;
            }

            .footer .rights {
                grid-area: rights;
            }

        /*  --------------------------------

            FOOTER STYLES

        --------------------------------  */

            .footer .interact {
                margin: 0 0 78px 0;
            }

                .footer .interact h2 {
                    padding: 24px 0 16px 0;
                }

                .footer .interact ul li {
                    margin: 0 0 10px 0;
                }

                    .footer .interact ul li span {
                        cursor: pointer;
                    }

                    .footer .interact ul li span > span:nth-child(1)::after {
                        content: 'at';
                    }

                    .footer .interact ul li span > span:nth-child(2)::after {
                        content: 'dot';
                    }

                        .footer .interact ul li span {
                            text-decoration-line: underline;
                            text-decoration-thickness: 2px;
                            text-decoration-color: #0B0B0B;
                            text-underline-offset: 3px;
                        }

                        .footer .interact ul li span:hover {
                            background: #0B0B0B;
                            color: #FBFBFB;
                        }

                        .footer .interact ul li span > span:nth-child(1),
                        .footer .interact ul li span > span:nth-child(2) {
                            text-decoration-line: underline;
                            text-underline-offset: 3px;
                        }

            .footer .disclaimer {
                margin: 0 0 88px 0;
            }

                .footer .disclaimer h2 {
                    padding: 24px 0 16px 0;
                }

                .footer .disclaimer p {
                    margin: 0 0 0 0;
                }

            .footer .footprint {
                padding: 30px 0 30px 0;
            }

            .footer .rights {
                padding: 30px 0 30px 0;
            }


            .light,
            :root:has(#light:checked) {
                .footer .interact h2,
                .footer .disclaimer h2,
                .footer .footprint,
                .footer .rights {
                    border-top: 2px solid #0B0B0B;
                }
            }

            .dark,
            :root:has(#dark:checked) {
                .footer .interact h2,
                .footer .disclaimer h2,
                .footer .footprint,
                .footer .rights {
                    border-top: 2px solid #FBFBFB;
                }

                .footer .interact ul li span {
                    text-decoration-color: #FBFBFB;
                }

                .footer .interact ul li span:hover {
                    background: #FBFBFB;
                    color: #0B0B0B;
                }
            }

@media (min-width: 768px) {

/*  --------------------------------

    TABLET PROPERTIES

--------------------------------  */

    /*  --------------------------------

        CONTENT STRUCTURE

    --------------------------------  */

        .content {
            grid-template-areas:
            'tagline tagline tagline tagline'
            'logo logo logo logo'
            'statistics statistics statistics statistics'
            'pane pane pane pane'
            'advert advert advert advert'
            'recaps recaps recaps recaps'
            'questions questions questions questions'
            'moderators moderators moderators moderators';
        }

        .content .statistics ul {
            grid-template-areas:
            'pitches impressions';
        }

    /*  --------------------------------

        FOOTER STRUCTURE

    --------------------------------  */

        .footer {
            grid-template-areas:
            'interact interact interact interact'
            'disclaimer disclaimer disclaimer disclaimer'
            'footprint footprint footprint rights';
        }

}

@media (min-width: 1024px) {

/*  --------------------------------

    TABLET PROPERTIES

--------------------------------  */

    /*  --------------------------------

        CONTENT STRUCTURE

    --------------------------------  */

        .content {
            grid-template-areas:
            'tagline tagline tagline tagline'
            'logo logo logo logo'
            'statistics statistics statistics statistics'
            'pane pane advert advert'
            'recaps recaps recaps recaps'
            'moderators moderators questions questions';
        }

    /*  --------------------------------

        FOOTER STRUCTURE

    --------------------------------  */

        .footer {
            grid-template-areas:
            'interact interact disclaimer disclaimer'
            'footprint footprint footprint rights';
        }

}