/* =========================================
   sysadmin.solutions
   Main stylesheet
   ========================================= */


/* ---------- Base ---------- */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: #111;
    color: #d8d8d8;

    font-family:
        "Courier New",
        Courier,
        monospace;

    line-height: 1.6;
}


/* ---------- Layout ---------- */

.container {
    width: min(900px, 100%);
    margin: 0 auto;

    padding: 60px 25px;
}


/* ---------- Header ---------- */

header {
    padding-bottom: 30px;
    margin-bottom: 45px;

    border-bottom: 1px solid #444;
}

.terminal {
    margin-bottom: 15px;

    color: #777;
    font-size: 14px;
}

h1 {
    margin: 0;

    color: #eee;

    font-size: clamp(32px, 7vw, 64px);
    font-weight: 700;

    letter-spacing: 4px;
}

.tagline {
    margin-top: 10px;

    color: #888;

    font-size: 16px;
}


/* ---------- Sections ---------- */

section {
    margin-bottom: 50px;
}

h2 {
    margin-bottom: 20px;

    padding-left: 12px;

    border-left: 3px solid #888;

    color: #eee;

    font-size: 18px;
    letter-spacing: 2px;
}

p {
    max-width: 700px;

    color: #aaa;
}


/* ---------- Project List ---------- */

.project-list {
    display: flex;
    flex-direction: column;

    gap: 14px;
}


/* ---------- Project Cards ---------- */

.project {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 20px;

    background: #151515;

    border: 1px solid #333;

    color: inherit;
    text-decoration: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* ---------- Project Hover ---------- */

.project:hover {
    background: #161916;

    border-color: #777;

    color: inherit;
    text-decoration: none;

    transform: translateX(4px);

    animation: project-pulse 2s ease-in-out infinite;
}


/* ---------- Project Glow Animation ---------- */

@keyframes project-pulse {

    0% {
        box-shadow:
            0 0 0 rgba(0, 255, 100, 0);
    }

    50% {
        box-shadow:
            0 0 8px rgba(0, 255, 100, 0.18),
            0 0 18px rgba(0, 255, 100, 0.08);
    }

    100% {
        box-shadow:
            0 0 0 rgba(0, 255, 100, 0);
    }

}


/* ---------- Project Title ---------- */

.project h3 {
    margin-top: 0;
    margin-bottom: 8px;

    color: #ddd;

    font-size: 16px;

    transition: color 0.2s ease;
}


/* ---------- Project Description ---------- */

.project p {
    margin-bottom: 0;

    font-size: 14px;
}


/* ---------- Project Arrow ---------- */

.project-arrow {
    flex-shrink: 0;

    color: #666;

    font-size: 22px;
    line-height: 1;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.project:hover .project-arrow {
    color: #00ff66;

    transform: translateX(5px);
}

.project:hover h3 {
    color: #eee;
}


/* ---------- Keyboard Focus ---------- */

.project:focus {
    outline: none;
}

.project:focus-visible {
    outline: 1px solid #00ff66;
    outline-offset: 3px;

    box-shadow:
        0 0 8px rgba(0, 255, 100, 0.2),
        0 0 18px rgba(0, 255, 100, 0.08);
}


/* ---------- Normal Links ---------- */

a:not(.project) {
    color: #ccc;

    text-decoration: none;

    border-bottom: 1px dotted #777;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

a:not(.project):hover {
    color: #fff;

    border-color: #fff;
}


/* ---------- Status ---------- */

.status {
    margin-top: 30px;
    margin-bottom: 35px;

    color: #666;

    font-size: 13px;
}

.status span {
    color: #aaa;
}


/* ---------- Footer ---------- */

footer {
    padding-top: 25px;

    border-top: 1px solid #333;

    color: #666;

    font-size: 13px;
}

footer span {
    margin: 0 5px;
}


/* ---------- Mobile ---------- */

@media (max-width: 600px) {

    .container {
        padding: 40px 20px;
    }

    h1 {
        font-size: 34px;

        letter-spacing: 2px;
    }

    .project {
        padding: 16px;

        gap: 15px;
    }

    .project-arrow {
        font-size: 20px;
    }

}


/* ---------- Reduced Motion ---------- */

@media (prefers-reduced-motion: reduce) {

    .project {
        transition: none;
    }

    .project:hover {
        animation: none;
        transform: none;
    }

}

/* ---------- Guide and site navigation ---------- */
.navigation { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 44px; padding-bottom: 15px; border-bottom: 1px solid #333; font-size: 13px; }
.navigation a[aria-current="page"] { color: #00ff66; border-color: #00ff66; }
.guide-step.project { display: block; margin-bottom: 28px; }
.guide-step.project:hover { transform: none; animation: none; background: #151515; border-color: #444; box-shadow: none; }
.guide-step h3 { margin-top: 0; }
.guide-step p, .guide-step li { overflow-wrap: anywhere; }
.technical-note { padding: 14px 16px; border-left: 2px solid #49865d; background: #171c18; color: #b7c5bb; }
pre { max-width: 100%; overflow-x: auto; padding: 16px; border: 1px solid #333; background: #0c0e0c; color: #c3d4c6; white-space: pre; font-size: 13px; line-height: 1.45; }
code { overflow-wrap: anywhere; }
.page-bottom-links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 44px; }
@media (max-width: 600px) { .navigation { gap: 10px 16px; } .guide-step.project { padding: 16px; } pre { font-size: 11px; } }

/* Readable documentation layout: not interactive project cards */
.guide-panel { display:block; padding:22px; background:#151515; border:1px solid #333; margin:20px 0; min-width:0; }
.guide-panel h3 { margin-top:0; font-size:16px; color:#ddd; }
.guide-step.project { padding:24px 28px; }
.guide-step.project > h3 { color:#eeeeee; border-bottom:1px solid #333; padding-bottom:14px; line-height:1.5; }
.guide-step.project p { max-width:100%; }
.guide-step li { margin:8px 0; }
.guide-step ul,.guide-step ol,.guide-panel ul,.guide-panel ol { padding-left:24px; }
.guide-panel pre,.guide-step pre { overflow-x:auto; width:100%; max-width:100%; }
pre { tab-size:4; white-space:pre; }
@media(max-width:600px) { .guide-step.project {padding:18px;} .guide-panel {padding:16px;} }