@layer walshmanufacturing.base, walshmanufacturing.core;

@layer heroicc.base {
    :root {
        --bg-color: #161716;
        --text-color: oklch(1 0 0);
        --text-color-soften: oklch(0.7 0 0);
        --accent-color: #66bbff;

        @media (prefers-color-scheme: light) {
            --bg-color: #f7f7f7;
            --text-color: oklch(0.3 0 0);
            --text-color-soften: oklch(0.7 0 0);
            --accent-color: #0088cc;
        }

        --font-step--2: clamp(0.6944rem, 0.6856rem + 0.0444vw, 0.72rem);
        --font-step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem);
        --font-step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
        --font-step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
        --font-step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);
        --font-step-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem);
        --font-step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem);
        --font-step-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem);

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

        min-height: 100dvh;

        background: var(--bg-color);

        body {
            --max-content-width: 800px;
            --padding-inline: 2em;
            --grid-columns: [full-width-start]
                minmax(var(--padding-inline), 1fr) [content-start]
                min(
                    var(--max-content-width),
                    (100% - (var(--padding-inline) * 2))
                )
                [content-end] minmax(var(--padding-inline), 1fr)
                [full-width-end];
            display: grid;
            gap: 1em;
            grid-template-columns: var(--grid-columns);
            grid-template-rows: 1fr auto;
            margin: 1em;
            justify-content: center;
            align-items: start;
            font-family:
                -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
                Helvetica, Arial, sans-serif;
            font-size: var(--font-step-0);
            line-height: 1.5;
            container-type: inline-size;
            min-height: inherit;
            color: var(--text-color);

            &:not(:has(main[id])) {
                min-height: calc(100dvh - 1em);
            }

            > :not(header, footer, .full-width) {
                grid-column: content;
            }

            &:has(> header) {
                grid-template-rows: auto 1fr auto;
            }

            > header,
            > footer,
            .full-width {
                width: 100vw;
                justify-self: center;
                display: grid;
                grid-template-columns: var(--grid-columns);
                grid-column: full-width;

                > *:not(.full-width) {
                    grid-column: content;
                }
            }

            header {
                h1 {
                    font-size: var(--font-step-4);
                    margin: 0;
                    font-weight: 500;
                    text-align: center;
                }
            }

            footer {
                margin-block-start: 4em;
                text-align: center;
                font-size: var(--font-step--1);
            }
        }
    }
}

@layer heroicc.core {
    a {
        color: var(--accent-color);
    }

    h2 {
        font-size: var(--font-step-2);
        font-weight: 300;
        color: var(--text-color-soften);
        text-shadow: 1px 1px oklch(from var(--text-color) l c h / 0.25);
    }

    hr {
        border-style: solid;
        border-color: oklch(from var(--text-color) l c h / 0.125);
    }

    walshmanufacturing-ar {
        display: grid;
        justify-content: center;
        margin-block: 2em;

        a {
            display: inline-block;
        }

        img {
            display: block;
            max-width: 300px;
            height: auto;
        }
    }

    ul:has(a[href$=".pdf"]) {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
        padding: 0;
        margin: 1em;

        li {
            list-style: none;

            a {
                display: inline-block;
                text-decoration: none;
                background: oklch(from var(--text-color) l c h / 0.0625);
                padding: 0.5em 1em;
                border-radius: 0.5em;
                transition: 0.25s ease-in-out background;

                &:hover {
                    background: oklch(from var(--text-color) l c h / 0.125);
                }

                em {
                    display: block;
                    font-size: var(--font-step--1);
                    font-style: normal;
                    font-weight: 300;
                    color: var(--text-color-soften);
                }
            }
        }
    }
}