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

@font-face { font-family: InterDisplay; font-style: normal; font-weight: 100; font-display: block; src: url("fonts/inter/InterDisplay-Thin.woff2") format("woff2"); }
@font-face { font-family: InterDisplay; font-style: normal; font-weight: 200; font-display: block; src: url("fonts/inter/InterDisplay-ExtraLight.woff2") format("woff2"); }
@font-face { font-family: InterDisplay; font-style: normal; font-weight: 300; font-display: block; src: url("fonts/inter/InterDisplay-Light.woff2") format("woff2"); }
@font-face { font-family: InterDisplay; font-style: normal; font-weight: 400; font-display: block; src: url("fonts/inter/InterDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: InterDisplay; font-style: normal; font-weight: 500; font-display: block; src: url("fonts/inter/InterDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family: InterDisplay; font-style: normal; font-weight: 600; font-display: block; src: url("fonts/inter/InterDisplay-SemiBold.woff2") format("woff2"); }
@font-face { font-family: InterDisplay; font-style: normal; font-weight: 700; font-display: block; src: url("fonts/inter/InterDisplay-Bold.woff2") format("woff2"); }
@font-face { font-family: InterDisplay; font-style: normal; font-weight: 800; font-display: block; src: url("fonts/inter/InterDisplay-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: InterDisplay; font-style: normal; font-weight: 900; font-display: block; src: url("fonts/inter/InterDisplay-Black.woff2") format("woff2"); }
@font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 400; font-display: block; src: url("fonts/RobotoMono-Regular.woff2") format("woff2"); }

/*
 * Languages and localisation
 */

:root[lang=en] .dialect > :not([lang=en]) {
    display: none;
}

:root[lang=en-US] .dialect > :not([lang=en-US]) {
    display: none;
}

:root {
    font-family: InterDisplay, Helvetica, Arial, sans-serif;
    font-size: 18.01px;  /* workaround macOS wrong aspect ratio */

    --rounded-space: 24px;
    --rounded-small: 8px;
    --rounded-normal: 16px;
    --rounded-large: 24px;
    --rounded-circular: 99em;
}

body {
    line-height: 1.5;
    color: #333;
    background-color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2 {
    font-weight: 200;
    line-height: 1.3;
}

h1 { font-size: clamp(3rem, 5vw, 5rem)}
h2 { font-size: clamp(2rem, 3vw, 2.2rem)}
h3, h4, h5, h6 { font-size: 1.1rem }
h3 { font-weight: bold }
h4 { font-weight: 600 }
h5, h6 { font-weight: 500 }

.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: normal;
    font-weight: 600;
}

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

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

:focus {
    outline: 1px dotted;
}

em {
    font-style: normal;  /* Inter font italics are too friendly */
    font-weight: bold;
}

/*
 * 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-weight: 300;
    letter-spacing: -0.03em;
    color: white;
    line-height: 1.2;
}

.blocky > span {
    display: inline;

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

    background-image: linear-gradient(var(--blocky-background), var(--blocky-background));
    background-size: 32px 80%;
    background-repeat: repeat-x;
    background-position-y: 63%;

    padding: 0.21em;
}

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

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