/**
 * colourmere.run — Site-specific styles
 * Copyright 2025 Vivian Voss. Licensed under the Apache License, Version 2.0.
 * SPDX-License-Identifier: Apache-2.0
 *
 * Only layout that colourmere.css does not provide.
 * Components, typography, forms — all from the framework.
 */

:root {
    --brand: #e74c3c;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    padding: calc(var(--unit) * 1.5) calc(var(--unit) * 3);
    background: var(--accent);
    color: var(--text-inv);
    text-decoration: none;
    z-index: 1000;

    &:focus {
        top: 0;
    }
}

/* Header */
header[role="banner"] {
    position: fixed;
    inset: 0 0 auto 0;
    height: calc(var(--unit) * 8);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding-inline: calc(var(--unit) * 3);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    z-index: 100;
}

.logo {
    display: block;
    height: calc(var(--unit) * 5);

    img {
        height: 100%;
        width: auto;
    }
}

.nav-toggle {
    display: grid;
    place-items: center;
    width: calc(var(--unit) * 5.5);
    height: calc(var(--unit) * 5.5);
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    justify-self: end;

    span {
        display: block;
        width: calc(var(--unit) * 2.5);
        height: 2px;
        background: var(--text);
        position: relative;

        &::before,
        &::after {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--text);
        }

        &::before {
            top: -6px;
        }
        &::after {
            bottom: -6px;
        }
    }

    @media (min-width: 960px) {
        display: none;
    }
}

nav[role="navigation"] {
    position: fixed;
    inset: calc(var(--unit) * 8) 0 0 auto;
    width: min(280px, 80vw);
    display: grid;
    gap: var(--unit);
    padding: calc(var(--unit) * 3);
    background: var(--surface);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.2s;

    &.open {
        transform: translateX(0);
    }

    a {
        display: block;
        padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
        border-radius: calc(var(--unit) * 1.25);
        color: var(--text);
        text-decoration: none;

        &:hover {
            background: var(--control);
        }
    }

    .nav-link {
        margin-top: auto;
        width: 100%;
    }

    @media (min-width: 960px) {
        position: static;
        width: auto;
        display: flex;
        gap: calc(var(--unit) * 2);
        padding: 0;
        background: none;
        border: none;
        transform: none;
        justify-self: end;

        a {
            padding: var(--unit) calc(var(--unit) * 1.5);
        }

        .nav-link {
            margin-top: 0;
            width: auto;
            padding: var(--unit) calc(var(--unit) * 2);
        }
    }
}

/* Main */
main {
    margin-top: calc(var(--unit) * 8);
}

/* Sections */
section {
    display: grid;
    justify-items: center;
    padding: calc(var(--unit) * 8) calc(var(--unit) * 3);

    > * {
        width: 100%;
        max-width: 900px;
    }

    &:nth-of-type(even) {
        background: var(--surface);
    }

    h2 {
        text-align: center;
        margin-bottom: calc(var(--unit) * 4);
    }
}

.section-intro {
    text-align: center;
    color: var(--muted);
    margin-bottom: calc(var(--unit) * 4);
}

.section-note {
    text-align: center;
    color: var(--muted);
    font-size: 0.875rem;
    margin-top: calc(var(--unit) * 3);
}

/* Hero */
.hero {
    text-align: center;
    padding: calc(var(--unit) * 12) calc(var(--unit) * 3);

    h1 {
        font-size: clamp(2.5rem, 8vw, 4rem);
        font-weight: 700;
        margin-bottom: var(--unit);

        span {
            color: var(--brand);
        }
    }

    .bytes {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--brand);
        margin-bottom: calc(var(--unit) * 2);
    }

    .tagline {
        font-size: 1.25rem;
        margin-bottom: var(--unit);
    }

    .claim {
        color: var(--muted);
        margin-bottom: calc(var(--unit) * 4);
    }

    .cta {
        display: flex;
        gap: calc(var(--unit) * 2);
        justify-content: center;
        flex-wrap: wrap;

        a {
            display: inline-block;
            padding: calc(var(--unit) * 2) calc(var(--unit) * 4);
            background: var(--accent);
            color: var(--text-inv);
            text-decoration: none;
            border-radius: calc(var(--unit) * 1.5);
            font-weight: 500;

            &:hover {
                filter: brightness(1.1);
            }

            &.is-secondary {
                background: var(--control);
                color: var(--text);
            }
        }
    }
}

/* Feature grid */
.feature-grid {
    display: grid;
    gap: calc(var(--unit) * 2);

    @media (min-width: 560px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 768px) {
        grid-template-columns: repeat(3, 1fr);
    }

    .as-card {
        text-align: center;

        header {
            font-size: 1.25rem;
            border-bottom: none;
            padding-bottom: 0;
        }

        p {
            margin: 0;
            color: var(--muted);
            font-size: 0.875rem;
        }

        code {
            font-size: 0.75rem;
        }
    }
}

/* Prefix grid */
.prefix-grid {
    display: grid;
    gap: calc(var(--unit) * 2);

    @media (min-width: 560px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 768px) {
        grid-template-columns: repeat(5, 1fr);
    }

    .as-card {
        text-align: center;

        header {
            border-bottom: none;
            padding-bottom: 0;

            code {
                font-size: 1.5rem;
                color: var(--accent);
                background: none;
                padding: 0;
            }
        }

        p {
            margin: 0 0 var(--unit);
            font-size: 0.875rem;
        }

        small {
            display: block;
            font-size: 0.75rem;
            color: var(--muted);

            code {
                font-size: 0.7rem;
            }
        }
    }
}

.example-box {
    margin-top: calc(var(--unit) * 4);
    padding: calc(var(--unit) * 3);
    background: var(--control);
    border-radius: calc(var(--unit) * 2);
    border: 2px dashed var(--border);
    text-align: center;

    p {
        margin: 0 0 var(--unit);
        color: var(--muted);
    }

    > code {
        display: block;
        margin-bottom: var(--unit);
    }

    strong {
        color: var(--accent);
    }
}

/* Start options */
.start-options {
    display: grid;
    gap: calc(var(--unit) * 2);
    margin-top: calc(var(--unit) * 4);

    @media (min-width: 560px) {
        grid-template-columns: repeat(2, 1fr);
    }

    a.as-card {
        text-decoration: none;
        transition:
            transform 0.15s,
            box-shadow 0.15s;

        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px var(--shadow-sm);
        }

        header {
            border-bottom: none;
            padding-bottom: 0;
        }

        p {
            margin: 0;
            color: var(--muted);
            font-size: 0.875rem;
        }
    }
}

/* Comparison bars */
.bars {
    display: grid;
    gap: calc(var(--unit) * 2);
}

.bar {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: calc(var(--unit) * 2);
    align-items: center;

    .label {
        font-size: 0.875rem;
        text-align: right;
    }

    .track {
        height: calc(var(--unit) * 4);
        background: var(--control);
        border-radius: calc(var(--unit) * 0.5);
        overflow: hidden;
    }

    .fill {
        height: 100%;
        width: var(--size);
        background: var(--muted);
        display: grid;
        align-items: center;
        padding-left: calc(var(--unit) * 1.5);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-inv);
    }

    &.accent .fill {
        background: var(--accent);
    }
}

/* Footer */
footer {
    padding: calc(var(--unit) * 6) calc(var(--unit) * 3);
    text-align: center;
    border-top: 1px solid var(--border);

    .min2max {
        font-size: 0.875rem;
        color: var(--muted);
        margin-bottom: calc(var(--unit) * 2);

        a {
            color: var(--text);
        }
    }

    .tech-stack {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--unit);
        margin-bottom: calc(var(--unit) * 2);
    }

    .dogfood {
        font-size: 0.75rem;
        font-style: italic;
        color: var(--muted);
        margin-bottom: calc(var(--unit) * 2);
    }

    .contact {
        font-size: 0.875rem;

        a {
            color: var(--muted);
        }
    }
}

/* Dialog */
dialog {
    width: min(400px, calc(100vw - var(--unit) * 4));

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: calc(var(--unit) * 3);

        h2 {
            margin: 0;
            font-size: 1.25rem;
        }
    }

    .close-dialog {
        width: calc(var(--unit) * 4);
        height: calc(var(--unit) * 4);
        padding: 0;
        font-size: 1.5rem;
        line-height: 1;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--muted);

        &:hover {
            color: var(--text);
        }
    }

    form {
        display: grid;
        gap: calc(var(--unit) * 3);
    }

    button[type="submit"] {
        justify-self: end;
        width: auto;
        padding: calc(var(--unit) * 1.5) calc(var(--unit) * 4);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}