/* Modern CSS - Baseline Newly Available Features */

/* Cascade Layers for specificity control */
@layer reset, base, components, utilities;

/* Custom Properties with @property for animation support */
@property --bg-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #e8e6dc;
}

@property --txt-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #3a3a38;
}

@property --secondary-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #8f8f87;
}

:root {
    color-scheme: light dark;
    /* Try: "Bebas Neue", "Oswald", "Space Grotesk", "Playfair Display" */
    --logo-font: "Abril Fatface";

    /* Light Mode Colors (hex) */
    --clr-light-background: #e8e6dc;
    --clr-light-text: #3a3a38;
    --clr-light-secondary: #8f8f87;
    --clr-light-selection-bg: #9678b6;
    --clr-light-selection-text: #1f2330;

    /* Dark Mode Colors (hex) */
    --clr-dark-background: #151515;
    --clr-dark-text: #e8e6dc;
    --clr-dark-secondary: #C2C2C2;
    --clr-dark-selection-bg: #9678b6;
    --clr-dark-selection-text: #f3f6ff;

    /* Theme-aware variables (default to light) */
    --bg-color: var(--clr-light-background);
    --txt-color: var(--clr-light-text);
    --secondary-color: var(--clr-light-secondary);
    --logo-color-inverse: var(--clr-light-background);
    --selection-bg: var(--clr-light-selection-bg);
    --selection-text: var(--clr-light-selection-text);

    /* Spacing scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.25rem;

    /* Global side gutter: never let content touch viewport edges */
    --page-gutter: clamp(24px, 8vw, 80px);
}

/* Switch to dark theme values when user prefers dark (no-JS fallback) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg-color: var(--clr-dark-background);
        --txt-color: var(--clr-dark-text);
        --secondary-color: var(--clr-dark-secondary);
        --logo-color-inverse: var(--clr-light-background);
        --selection-bg: var(--clr-dark-selection-bg);
        --selection-text: var(--clr-dark-selection-text);
    }
}

/* JS-driven theme overrides */
:root[data-theme="light"] {
    --bg-color: var(--clr-light-background);
    --txt-color: var(--clr-light-text);
    --secondary-color: var(--clr-light-secondary);
    --logo-color-inverse: var(--clr-dark-background);
}

:root[data-theme="dark"] {
    --bg-color: var(--clr-dark-background);
    --txt-color: var(--clr-dark-text);
    --secondary-color: var(--clr-dark-secondary);
    --logo-color-inverse: var(--clr-light-background);
    --selection-bg: var(--clr-dark-selection-bg);
    --selection-text: var(--clr-dark-selection-text);
}

@media (prefers-reduced-motion: no-preference) {
    :root.theme-transition-ready body,
    :root.theme-transition-ready :where(h1, h2, h3, h4, h5, h6, p, a),
    :root.theme-transition-ready :where(hr, .logo, .theme-toggle, .color-main-text, .color-secondary-text, .border-top, .border-bottom) {
        transition:
            background-color 180ms ease,
            color 180ms ease,
            border-color 180ms ease,
            outline-color 180ms ease;
    }
}

/* Reset Layer */
@layer reset {
    :where(*, *::before, *::after) {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    :where(html, body) {
        block-size: 100%;
    }
}

/* Base Layer */
@layer base {
    ::selection {
        background-color: var(--selection-bg);
        color: var(--selection-text);
    }

    ::-moz-selection {
        background-color: var(--selection-bg);
        color: var(--selection-text);
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: var(--secondary-color) transparent;
    }

    html {
        scrollbar-gutter: stable;
    }

    body {
        background-color: var(--bg-color);
        font-family: Arial;
        min-block-size: 100dvh;
        block-size: auto;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        inline-size: 100%;
        padding-inline: var(--page-gutter);
    }

    /* Typography with text-wrap: balance for headings */
    :where(h1, h2, h3, h4, h5, h6, p, a) {
        color: var(--txt-color);
        overflow-wrap: break-word;
        line-height: 1.6;
    }

    :where(h1, h2, h3, h4, h5, h6) {
        text-wrap: balance;
    }

    h1 {
        font-size: clamp(2rem, 4vw, 2.25rem);
    }

    @media (max-width: 480px) {
        h1 {
            font-size: clamp(1.5rem, 4vw, 2.25rem);
        }
    }

    h2 {
        font-size: clamp(1.5rem, 3vw, 1.75rem);
    }

    h3 {
        font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    }

    p {
        font-size: 1rem;
        text-wrap: pretty;
    }

    a {
        text-decoration: underline;
        font-size: 1rem;
        text-wrap: pretty;

        &:focus-visible {
            outline: 2px solid var(--txt-color);
            outline-offset: 2px;
        }

        &:hover {
            text-decoration-thickness: 2px;
        }
    }

    .abril-fatface {
        font-family: "Abril Fatface", cursive;
    }

    hr {
        border: none;
        border-block-start: 1px solid var(--secondary-color);
    }

    .color-main-text {
        color: var(--txt-color);
    }

    .color-secondary-text {
        color: var(--secondary-color);
    }
}

/* Components Layer */
@layer components {
    nav {
        display: flex;
        align-items: center;
        position: relative;
        user-select: none;
        pointer-events: none;
        margin-top: 20px;
    }

    .nav-inner {
        display: flex;
        align-items: center;
        inline-size: 100%;
        max-inline-size: 1200px;
        margin-inline: auto;
        gap: clamp(1.25rem, 3vw, 2.5rem);
    }

    .nav-actions {
        margin-inline-start: auto;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .nav-link {
        pointer-events: auto;
        color: var(--txt-color);
        text-decoration: none;
    }

    .nav-link:hover,
    .nav-link:focus-visible {
        text-decoration: underline;
    }

    .logo {
        color: var(--logo-color-inverse);
        text-decoration: none;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;

        pointer-events: auto;
    }

    .logo-svg {
        width: clamp(72px, 11vw, 110px);
        height: auto;
        display: block;
    }

    .logo:focus-visible {
        outline: 2px solid var(--txt-color);
        outline-offset: 4px;
    }

    .theme-toggle {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--txt-color);
        padding: var(--space-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
        border-radius: 6px;
        transition: opacity 0.2s ease;
    }

    .theme-toggle:hover {
        opacity: 0.7;
    }

    .theme-toggle:focus-visible {
        outline: 2px solid var(--txt-color);
        outline-offset: 2px;
    }

    /* Border utilities for nav/footer */
    .border-bottom {
        border-block-end: 1px solid var(--secondary-color);
    }

    .border-top {
        border-block-start: 1px solid var(--secondary-color);
    }

    .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        background-color: var(--selection-bg);
        box-shadow: 0 5px 0px var(--selection-text);
        color: var(--selection-text);
        font-size: 1rem;
        transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;

        &:active {
            transform: translateY(4px);
            box-shadow: 0 2px 0px var(--selection-text);
        }
    }

    /* Main Content */
    main {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-block-end: 55px;
        inline-size: 100%;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .content {
        inline-size: 100%;
        max-inline-size: 1200px;
        margin-block-start: calc((100dvh / 3 - 0.25rem) / 4);
    }

    .title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        flex-wrap: nowrap;
        box-sizing: border-box;
    }

    .title-row h1 {
        margin: 0;
        font-weight: 700;
    }

    .title-links {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--secondary-color);
        font-size: 0.95rem;
        white-space: nowrap;
        margin-inline-start: auto;
    }

    .title-link {
        color: var(--txt-color);
        text-decoration: none;
        padding-inline: 0.25rem;
    }

    .title-link:hover,
    .title-link:focus {
        text-decoration: underline;
    }

    /* Separator styling */
    .sep {
        color: var(--secondary-color);
        opacity: 0.8;
        user-select: none;
    }

    @media (max-width: 680px) {
        .title-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.25rem;
        }

        .title-links {
            white-space: normal;
            font-size: 0.9rem;
            margin-inline-start: 0;
        }
    }

    .container {
        inline-size: 100%;
        max-inline-size: 1200px;
        margin-inline: auto;
        padding-inline: var(--space-lg);
    }

    /* Footer */
    footer {
        padding-block: 15px;
        padding-inline: 0;
        text-align: center;
        position: fixed;
        inset-block-end: 0;
        inset-inline: var(--page-gutter);
        inline-size: auto;
    }

    /* Buttons */
    .button {
        background-color: var(--secondary-color);
        padding-block: 12px;
        padding-inline: 24px;
        border-radius: 12px;
        display: inline-block;
        color: var(--txt-color);
        text-decoration: none;
        border: none;
        cursor: pointer;
        font-size: 1rem;
        transition: scale 0.25s ease;

        &:hover {
            scale: 1.02;
        }

        &:focus-visible {
            outline: 2px solid var(--txt-color);
            outline-offset: 2px;
        }
    }

    /* Spacer */
    .spacer {
        block-size: 10px;
    }

    /* Typewriter Output */
    .output {
        text-align: center;
        color: var(--txt-color);

        & h1 {
            font-size: 30px;
        }
    }

    /* ASCII Art (status code error pages) */
    .ascii-art {
        font-family: monospace;
        white-space: pre;
        font-size: clamp(0.4rem, 1.5vw, 0.9rem);
        line-height: 1.2;
        margin-block-end: 1rem;
        overflow-x: auto;
        color: var(--txt-color);
    }
}

/* Utilities Layer */
@layer utilities {
    .text-left {
        text-align: start;
    }

    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: end;
    }

    .mt-3 {
        margin-block-start: var(--space-md);
    }

    .mb-2 {
        margin-block-end: var(--space-sm);
    }

    .py-5 {
        padding-block: var(--space-xl);
    }

    .px-4 {
        padding-inline: var(--space-lg);
    }

    .gap-4 {
        gap: var(--space-lg);
    }

    :where(a, button, .button, .theme-toggle, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]):hover {
        cursor: pointer;
    }
}