@font-face {
    font-family: 'Roboto';
    src: url('./assets/fonts/Roboto/Roboto-VariableFont_wdth\,wght.ttf')
        format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@layer reset {
    /* https://piccalil.li/blog/a-more-modern-css-reset/ */

    /* Box sizing rules */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* Prevent font size inflation */
    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    /* Remove default margin in favour of better control in authored CSS */
    body,
    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote,
    dl,
    dd {
        margin-block: 0;
    }

    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
    ul[role='list'],
    ol[role='list'] {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Set core body defaults */
    body {
        margin: 0;
        min-height: 100vh;
        line-height: 1.5;
    }

    /* Balance text wrapping on headings */
    h1,
    h2,
    h3,
    h4 {
        line-height: 1;
        text-wrap: balance;
    }

    /* A elements that don't have a class get default styles */
    a:not([class]) {
        text-decoration-skip-ink: auto;
        color: currentColor;
    }

    /* Make images easier to work with */
    img,
    picture {
        max-width: 100%;
        display: block;
    }

    /* Inherit fonts for inputs and buttons */
    input,
    button,
    textarea,
    select {
        font-family: inherit;
        font-size: inherit;
    }

    /* Make sure textareas without a rows attribute are not tiny */
    textarea:not([rows]) {
        min-height: 10em;
    }

    /* Anything that has been anchored to should have extra scroll margin */
    :target {
        scroll-margin-block: 5ex;
    }
}

@layer base {
    :root {
        /* colors */
        --clr-white: hsl(0, 0%, 100%);
        --clr-grey: hsl(0, 0%, 58%);

        --clr-blue-700: hsl(235, 18%, 26%);
        --clr-blue-800: hsl(234, 29%, 20%);

        --clr-red-100: hsl(2, 100%, 95%);
        --clr-red: hsl(4, 100%, 67%);

        --clr-gradient-from: hsl(15, 100%, 61%);
        --clr-gradient-to: hsl(346, 100%, 66%);

        /* font family */
        --ff-base: 'Roboto', sans-serif;

        /* font sizes */
        --fs-100: 0.6875rem;
        --fs-300: 0.75rem;
        --fs-400: 1rem;
        --fs-900: 2.5rem;

        @media (min-width: 31.25rem) {
            --fs-900: 3.5rem;
        }

        /* font weights */
        --fw-regular: 400;
        --fw-bold: 700;
    }

    body {
        font-family: var(--ff-base);
        font-size: var(--fs-400);
        font-weight: var(--fw-regular);
        color: var(--clr-blue-800);
    }

    input {
        padding-block: 1rem;
        padding-inline: 1.5rem;
        border-radius: 0.5rem;
        font: inherit;
        font-size: var(--fs-400);
        font-weight: var(--fw-regular);
        border: 1px solid var(--clr-blue-800);
    }

    input:not(:focus):invalid {
        background-color: var(--clr-red-100);
        border: 1px solid var(--clr-red);
        color: var(--clr-red);
    }

    input::placeholder {
        color: var(--clr-grey);
    }

    @media (min-width: 31.25rem) {
        body {
            display: grid;
            place-content: center;
            background-color: var(--clr-blue-700);
        }

        main:first-of-type {
            padding: 2.5rem;
            border-radius: 2.25rem;
            background-color: var(--clr-white);
        }

        main:last-of-type {
            max-width: 31.5rem;
            max-height: 32.5rem;
            border-radius: 2.25rem;
            background-color: var(--clr-white);
            padding: 4rem;
        }
    }

    @media (min-width: 62.5rem) {
        main:first-of-type {
            padding: 2rem;
            max-width: 56.5rem;
        }
    }
}

@layer components {
    .newsletter-cta {
        display: grid;
        gap: 2.5rem;
        background-color: var(--clr-white);
    }

    .newsletter-cta img {
        width: 100%;
    }

    .newsletter-cta .wrapper {
        display: grid;
        gap: 1.5rem;
        padding-inline: 1.5rem;
    }

    .newsletter-cta .title {
        font-size: var(--fs-900);
        font-weight: var(--fw-bold);
    }

    .checkmark-list {
        display: grid;
        gap: 0.5rem;
    }

    .checkmark-list li {
        display: grid;
        grid-template-columns: 1.3125rem auto;
        gap: 1rem;
    }

    .checkmark-list li::before {
        content: url('./assets/images/icon-list.svg');
    }

    .newsletter-cta form {
        display: grid;
        gap: 1.5rem;
        margin-block-start: 1rem;
    }

    .newsletter-cta:has(:not(:focus):invalid) .button {
        pointer-events: none;
        opacity: 0.5;
        background-image: none;
    }

    .form-group {
        display: grid;
        gap: 0.5rem;
        font-size: var(--fs-300);
        font-weight: var(--fw-bold);
    }

    .form-group > .error {
        grid-row: 1;
        grid-column: 2;
        text-align: end;
        color: var(--clr-red);
        display: none;
    }

    .form-group > :not(:focus):invalid + .error {
        display: block;
    }

    .form-group.with-error-field {
        grid-template-columns: 1fr 1fr;
    }

    .form-group.with-error-field > input {
        grid-column: 1 / -1;
    }

    .button {
        position: relative;
        z-index: 1;
        padding-block: 1rem;
        font-weight: var(--fw-bold);
        background-color: var(--clr-blue-800);
        color: var(--clr-white);

        border-radius: 0.5rem;
    }

    .button::before {
        content: '';
        z-index: -1;
        position: absolute;
        border-radius: 0.5rem;
        inset: -2px;
        background-image: linear-gradient(
            var(--clr-gradient-from),
            var(--clr-gradient-to)
        );
        border-color: transparent;
        transition: opacity 0.25s linear;
        opacity: 0;
    }
    
    .button:where(:hover, :focus-visible)::before {
        opacity: 1;
    }

    .attribution {
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: -999;
        color: var(--clr-white);
        font-size: var(--fs-100);
        text-align: center;
    }
    .attribution a {
        color: var(--clr-red);
    }

    .success-message h1 {
        font-size: var(--fs-900);
    }

    .success-message button:where(:hover, :focus-visible)::before {
        box-shadow: 0 1rem 2rem 0 hsl(4, 100%, 67%, 50%);
    }

    .success-message span {
        font-weight: var(--fw-bold);
    }

    @media (max-width: 31.24999rem) {
        .attribution {
            color: #000;
        }

        .success-message {
            padding-inline: 1.5rem;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
    
        .success-message img {
            margin-block-start: 9.3125rem;
            align-self: flex-start;
        }
    
        .success-message button {
            margin-block-start: auto;
            margin-block-end: 4.375rem;
        }
    } 

    @media (min-width: 31.25rem) {
        .newsletter-cta form {
            margin-block-start: unset;
        }

        .newsletter-cta .wrapper {
            padding-inline: unset;
        }

        .newsletter-cta form {
            gap: 1rem;
        }

        .success-message {
            display: grid;
            gap: 2rem;
        }
    }

    @media (min-width: 62.5rem) {
        .newsletter-cta {
            grid-template-columns: 1fr max-content;
            gap: 4rem;
            place-items: center;
        }

        .newsletter-cta .wrapper {
            gap: 2rem;
        }

        .newsletter-cta > picture {
            /* width: 100%; */
            grid-column: 2;
            justify-self: center;
        }

        .newsletter-cta > *:not(picture) {
            grid-column: 1;
            grid-row: 1;
        }

        .newsletter-cta > form {
            align-self: end;
        }

        .newsletter-cta form {
            gap: 1.5rem;
        }
    }
}

@layer utilities {
    .hide {
        display: none;
    }
}