/**
 * Template: 404 Error Page Styles
 * ==================================
 *
 * Full-page centered layout with warm beige background,
 * Xenopz cartoon-style illustration, teal headings and orange accents.
 *
 * Dependencies: custom-tokens.css, global-classes.css
 * Requirements: 25.1, 25.2
 *
 * @package Xenopz
 */

/* =========================================================================
   404 PAGE LAYOUT
   ========================================================================= */

/**
 * .x-404
 * Full-page section with warm beige background.
 * Uses min-height to fill viewport and centers content vertically.
 */
.x-404 {
    background: var(--x-bg-warm);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--x-space-2xl) 0;
}

/**
 * .x-404__container
 * Centered content column with constrained width for readability.
 */
.x-404__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 640px;
}

/* =========================================================================
   ILLUSTRATION
   ========================================================================= */

/**
 * .x-404__illustration
 * SVG illustration wrapper — generous spacing below.
 */
.x-404__illustration {
    margin-bottom: var(--x-space-lg);
}

.x-404__illustration svg {
    width: 100%;
    max-width: 320px;
    height: auto;
}

/* =========================================================================
   HEADING AND MESSAGE
   ========================================================================= */

/**
 * .x-404__heading
 * H1 in dark teal with the "(meer)" highlighted in orange.
 */
.x-404__heading {
    font-family: var(--x-font-heading);
    font-weight: 800;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.15;
    color: var(--x-teal-900);
    margin: 0 0 var(--x-space-sm) 0;
}

/**
 * .x-404__message
 * Brief friendly explanation text — muted color, comfortable line height.
 */
.x-404__message {
    font-family: var(--x-font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--x-muted);
    margin: 0 0 var(--x-space-lg) 0;
    max-width: 520px;
}

/* =========================================================================
   NAVIGATION BUTTONS
   ========================================================================= */

/**
 * .x-404__nav
 * Horizontal button group with wrap support for smaller screens.
 */
.x-404__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-space-sm);
    justify-content: center;
    align-items: center;
}

/* =========================================================================
   RESPONSIVE: MOBILE (< 768px)
   ========================================================================= */

@media (max-width: 767px) {
    .x-404 {
        padding: var(--x-space-xl) 0;
    }

    .x-404__illustration {
        margin-bottom: var(--x-space-md);
    }

    .x-404__illustration svg {
        max-width: 240px;
    }

    .x-404__nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .x-404__nav .x-btn-primary,
    .x-404__nav .x-btn-secondary {
        justify-content: center;
        text-align: center;
    }
}