/* ==========================================================================
   Base: design tokens, fonts, element defaults, shared components
   and utilities
   ========================================================================== */


/* Design tokens
   Change a value here and it changes everywhere it's used.
   ========================================================================== */

:root {
    /* Colors */
    --red-bright: #FF463A;
    --red-light: #FFF6F5;
    --red-dark: #E50000;
    --grey-text: #323232;

    /* Case-study colors. Each project overrides these with an inline
       style on its <article> (see work/_entry.twig). */
    --article_dark: var(--red-dark);
    --article_light: var(--red-light);

    /* Shadows */
    --shadow-color: 0deg 0% 70%;
    --shadow-small:
        0.5px 0.5px 1px hsl(var(--shadow-color) / 0.7);
    --shadow-medium:
        1px 1px 2px hsl(var(--shadow-color) / 0.333),
        2px 2px 4px hsl(var(--shadow-color) / 0.333),
        3px 3px 6px hsl(var(--shadow-color) / 0.333);
    --shadow-large:
        1px 1px 2px hsl(var(--shadow-color) / 0.2),
        2px 2px 4px hsl(var(--shadow-color) / 0.2),
        4px 4px 8px hsl(var(--shadow-color) / 0.2),
        8px 8px 16px hsl(var(--shadow-color) / 0.2),
        16px 16px 32px hsl(var(--shadow-color) / 0.2);

    /* Font stacks */
    --font-body: "PostGrotesk", "Arial Narrow", Arial, sans-serif;
    --font-headline: "Adieu-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Type scale (formerly the LESS mixins of the same names) */
    --giant-size: 9vw;                      /* heads-giant */
    --giant-space: 5vw;
    --giant-mobile-size: 14vw;              /* heads-giant-mobile */
    --giant-mobile-space: 6vw;
    --big-size: calc(18px + 5vw);           /* heads-big */
    --big-leading: calc(20px + 5.5vw);
    --big-space: 2.5vw;
    --medium-size: calc(18px + 2vw);        /* heads-medium */
    --txt-big-size: 2rem;                   /* txt-big */
    --txt-big-leading: 4rem;
    --txt-med-size: 1.5rem;                 /* txt-med */
    --txt-med-leading: 3rem;

    /* One column of the 12-column desktop grid */
    --column: calc((100vw - 22vw - 200px) / 12);

    /* Hover transition */
    --fade: all 0.15s ease;
}


/* Fonts
   ========================================================================== */

@font-face {
    font-family: "Adieu-Regular";
    src: url("../fonts/Adieu-Regular.woff2") format("woff2"),
         url("../fonts/Adieu-Regular.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "PostGrotesk";
    src: url("../fonts/PostGrotesk-Light.woff2") format("woff2"),
         url("../fonts/PostGrotesk-Light.woff") format("woff");
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "PostGrotesk";
    src: url("../fonts/PostGrotesk-LightItalic.woff2") format("woff2"),
         url("../fonts/PostGrotesk-LightItalic.woff") format("woff");
    font-display: swap;
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "PostGrotesk";
    src: url("../fonts/PostGrotesk-Bold.woff2") format("woff2"),
         url("../fonts/PostGrotesk-Bold.woff") format("woff");
    font-display: swap;
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "PostGrotesk";
    src: url("../fonts/PostGrotesk-BoldItalic.woff2") format("woff2"),
         url("../fonts/PostGrotesk-BoldItalic.woff") format("woff");
    font-display: swap;
    font-weight: bold;
    font-style: italic;
}


/* Element defaults
   ========================================================================== */

@layer base {

    html {
        font-size: 100%;
        height: 100%;
    }

    body {
        -webkit-font-smoothing: antialiased;
        color: var(--red-dark);
        font-family: var(--font-body);
        font-size: 1.25rem;
        line-height: 2.5rem;
    }

    /* The width/height attributes in the HTML set each image's shape;
       this lets it scale with its width */
    img {
        height: auto;
    }

    main {
        p {
            margin-bottom: 2rem;
        }
        a {
            color: var(--red-dark);
            text-decoration: underline;
        }
        /* Section headings, and the subtitles inside <hgroup> that used to be <h2>s */
        h2,
        hgroup .subtitle {
            color: var(--red-bright);
            font-family: var(--font-headline);
            font-size: var(--big-size);
            line-height: var(--big-leading);
            margin-bottom: var(--big-space);
        }
    }

} /* end base */


/* Shared components
   ========================================================================== */

@layer components {

    /* "Check it out" link with the tick illustration (home page) */
    .check-it {
        background: url('../ui/check-it.svg') right center no-repeat;
        margin-right: var(--column);
        padding-right: 4rem;
        text-align: right;
        &:hover {
            margin-right: calc(var(--column) - 1rem);
            padding-right: 6rem;
            transition: var(--fade);
        }
        a {
            background: linear-gradient(to bottom, rgb(255 70 58 / 0.2) 100%, rgb(255 70 58 / 0.2) 100%);
            background-position: 0 100%;
            background-repeat: repeat-x;
            background-size: 10px 10px;
            text-decoration: none;
        }
    }

} /* end components */


/* Utilities
   ========================================================================== */

@layer utilities {

    /* Hide visually, keep readable by screen readers */
    .visually-hidden {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }

} /* end utilities */