/*
 * Styles for Cleanfeed brand and all web content
 */


/* latin-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url(fonts/roboto-300-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url(fonts/roboto-300-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Oswald';
    font-weight: 600;
    src: url(fonts/Oswald-SemiBold.woff2) format('woff2');
}

@font-face {
    font-family: 'Oswald';
    font-weight: 200;
    src: url(fonts/Oswald-Light.woff2) format('woff2');
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #333;
    background-color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: normal;
}

.verbatim {
    font-size: 80%;
    padding: 1px 3px 1px 3px;
    font-weight: bold;
    background-color: #f0f0f0;
}

/*
 * Cleanfeed Pro logo
 */

.pro {
    display: inline-block;
    height: 15px;
    width: 30px;
    margin-left: 5px;
    background-color: #333;
    -webkit-mask-image: url(img/pro-icon.svg);
    mask-image: url(img/pro-icon.svg);
}

/*
 * Quotations; inline or block
 */

blockquote,
q {
    font-style: italic;
}

a {
    color: #0096bc;
    text-decoration-color: unset;
    transition: text-decoration-color 0.2s;
}

a:not(:hover) {
    text-decoration-color: transparent;
}

:focus {
    outline: 1px dotted;
}

/*
 * Registered (R) sign which is less obtrusive
 */

span.reg::after {
    position: relative;
    content: '\00ae';
    font-size: 60%;
    margin-left: 0.1em;
    top: -0.5em;
    line-height: normal;  /* prevent pushing the next line on Firefox */
}

/*
 * Stylised text for use in headings
 */

body {
    --blocky-background: #025;
}

.blocky {
    font-family: Oswald, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: white;
    line-height: 1;
}

.blocky > span {
    display: inline;

    line-height: 1.05;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;  /* Chromium */

    background-image: linear-gradient(var(--blocky-background), var(--blocky-background));
    background-size: 100% 84%;
    background-repeat: no-repeat;
    background-position-y: 70%;

    padding-left: 0.12em;
    padding-right: 0.14em;
}

.blocky > span.cutout {
    --blocky-background: white;
    color: #0009;  /* slightly darken background */
    mix-blend-mode: hard-light;
}

.blocky .secondary {
    font-weight: 200;
}