/* No background image on purpose — the goal here is to read as an error
   page, not another marketing page. general.css's shared .page-header is
   built around a tall banner image (min-height, flex-end alignment,
   generous h1 margin-top to sit over the image); with no image, that
   geometry is overridden below to make the header compact instead. */

main.page-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.page-header {
    min-height: 0;
    justify-content: center;
    background-color: transparent;
    padding-top: 0;
}

.page-header h1 {
    margin-top: 0;
    font-size: 2.5rem;
    background-color: transparent;
}

.page-header::before, .page-header h1::after {
    display: none;
}

.error-content-wrapper {
    background-color: var(--extra-light);
    margin: 20px;
    margin-top: calc(var(--nav-bar-height) + 20px);
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px 50px;
}

.not-found-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.not-found-content p {
    max-width: 500px;
    font-size: 1.1rem;
    color: var(--gray);
}