@use 'pure';
@use 'grids-responsive';
/* The line above should remain empty */

/************************/
/** Very Common Things **/
/************************/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
    font-family: "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji";
    line-height: 1.5;
}

.pure-button-primary {
    background-color: #008ed4;
}

a, a:visited {
    text-decoration: none;
    color: #007bff;
}

a:hover, a:focus {
    text-decoration: underline;
}

/* So switching between scrollable and non-scrollable pages
   does not cause a 10px shift
*/
body {
    overflow-y: scroll;
}

.clear {
    clear: both;
}

.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/* Override pure.css; standard headers are too big */
h1 {
    font-size: 1.6rem;
}
$h2Size: 1.2rem;
h2 {
    font-size: $h2Size;
}

/***************************/
/** Part of Base template **/
/***************************/

body > div {
    padding-top: 2em;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

h1.brand-title {
    text-align: center;
}

h1.brand-title > a {
    color: #000;
    font-variant: small-caps;
    font-size: 3rem;
}

h1.brand-title > a:hover, h1.brand-title > a:focus {
    text-decoration: none;
}

$grey: #666;
h2.brand-subtitle {
    font-size: 1.6rem;
    text-align: center;
    color: $grey;
}

main {
    margin: 0 auto;
    max-width: 1000px;
    margin-top: 33px;
}

#header {
    margin-left: auto;
    margin-right: auto;
    background-color: #e6e6e6;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 10px;
    max-width: 1000px;
}

/*******************************/
/* Shared by a couple of pages */
/*******************************/

$featuresGutter: 1rem;
#page-index .leftright {
    padding-top: 1em;
    margin: 0 -$featuresGutter;

    /* Tiles are vertically center-aligned, top margin is unnecessary */
    h1 {
        margin-top: 0;
    }

    article {
        margin: 15px 0;
        padding: 0 $featuresGutter;
    }

}

@function svgarrow($color) {
    @return url("data:image/svg+xml;utf8,<svg width='19' height='10' xmlns='http://www.w3.org/2000/svg'><path d='M17.5 1.5l-8 7-8-7' stroke='%23" + $color +"' stroke-width='2' fill='none' fill-rule='evenodd'/></svg>");
}

#page-index #faq {
    margin: 4rem 0 8rem 0;
    border-bottom: 1px solid #a3a3a3;

    > article {
        border-top: 1px solid #a3a3a3;

        input {
            display: none;
        }

        $rotateTransition: transform .2s ease-in-out;
        $hideTransition: opacity .2s ease-out, max-height 0.2s ease-out;
        > div {
            max-height: 1000px;
            max-width: 768px;
            transition: $hideTransition;

            > div {
                padding-bottom: 30px;
            }
        }

        $labelMargin: 1.5rem;
        label {
            position: relative;

            > h2 {
                padding: $labelMargin 0;
                margin: 0;

                // FIXME: hide the pointer in netsurf, since the sections
                // are always expanded.
                cursor: pointer;
            }
        }

        $arrowHeight: 0.8rem;
        label::before {
            content: "";
            float: right;
            background-image: svgarrow("000");
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: contain;
            margin-top: $labelMargin + $h2Size - $arrowHeight;
            height: $arrowHeight;
            width: 1rem;
            transition: $rotateTransition;
            transform: rotate(0deg);
        }

        input:checked ~ div {
            overflow: hidden;
            max-height: 0;
            transition: $hideTransition;
            opacity: 0;
        }

        input:checked ~ label::before {
            transition: $rotateTransition;
            transform: rotate(180deg);
        }

    } /* > article */
} /* #faq */

/*******************/
/** Page-specific **/
/*******************/

#page-index {
    #subscribe-section {
        margin-top: 50px;
        background-color: #e6e6e6;
        padding: 1rem 2rem 2rem 2rem;
        border-radius: 10px;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;

        span.message-success, span.message-error {
            font-weight: bold;
            font-size: $h2Size - 0.2;
        }
        span.message-success {
            color: #181;
        }
        span.message-error {
            color: #e33;
        }

        input#email {
            width: 100%;
            text-align: center;
            margin-top: 1rem;
            margin-bottom: .5rem;
            border-radius: 3px;
        }

        button {
            width: 100%;
            text-align: center;
            border-radius: 3px;
        }

        > h2 {
            color: $grey;
        }
    }
} /* #page-index */

/**********************************/
/** Media Media Responsive Media **/
/**********************************/

@media (prefers-color-scheme: dark) {
    // these two should match
    $textColor: #ccc;
    $textColorStr: "ccc";
    $bgGrey: #313131;

    h1, h2, h2.brand-subtitle, h3, body {
        color: $textColor;
    }
    body {
        background-color: #222;
    }
    h1.brand-title > a {
        color: #ececec;
    }

    #header {
        background-color: $bgGrey;
    }

    #page-index {
        #subscribe-section {
            background-color: $bgGrey;
            > h2 {
                color: $textColor;
            }

            span.message-success {
                color: #9c9;
            }

            input {
                color: $textColor;
                border: 1px solid #555;
                box-shadow: none;
                -webkit-box-shadow: none;
                background-color: #222;
            }
        }
    }

    #page-index #faq > article {
        label::before {
            // difference from the default version: the color of the
            // shape is #ccc.
            background-image: svgarrow($textColorStr);
        }

    }
}