@charset "utf-8";
/* ================================================================
   style.css — Legacy Stylesheet for Home Server Project Site
   This is the "old browsers" version of the site.
   Uses float-based layout instead of CSS Grid/Flexbox for
   maximum compatibility with older browsers (IE8+, Firefox 3+, etc.)
   No animations, no CSS variables, no modern features.
   ================================================================ */

/* --- Base --- */
body {
    background-color: #0a0e27;
    color: #7d84a8;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Fixed-width centered wrapper */
#wrapper {
    width: 800px;
    margin: 0 auto;
}

/* --- Header --- */
.header {
    background: #0a0e27;
    color: #00d9ff;
    padding: 20px;
    text-align: center;
}

.header h1 {
    margin: 0;
    font-size: 24px;
}

.content {
    padding: 20px;
}

/* --- Typography --- */
h2, h3 {
    color: #00d9ff;
}

p {
    margin: 0 0 15px 0;
}

ul {
    margin: 10px 0 20px 20px;
    padding: 0;
}

ul li {
    margin-bottom: 8px;
}

/* Horizontal rule replacement */
.divider {
    border-top: 1px solid #7d84a8;
    height: 0;
    margin: 0;
    padding: 0;
}

/* --- Services grid: float-based 3-column layout --- */
.services-grid {
    width: 100%;
    margin: 20px 0;
    overflow: hidden;
}

/* Each card floats left, 240px wide */
.services-grid-item {
    float: left;
    width: 240px;
    margin: 0 10px 20px 0;
}

/* Remove right margin from every 3rd item */
.services-grid-item:nth-child(3n) {
    margin-right: 0;
}

/* IE6: override the nth-child removal above */
* html .services-grid-item {
    margin-right: 10px;
}

/* --- Service card --- */
.service-card {
    background: #1a1f3a;
    border: 1px solid #2a3150;
    padding: 20px 15px;
    text-align: center;
    height: 240px;
}

.service-card .service-icon {
    margin-bottom: 15px;
}

.service-card .service-icon img {
    width: 48px;
    height: 48px;
    border: 0;
}

.service-card h3 {
    color: #00d9ff;
    font-size: 20px;
    margin: 0 0 12px 0;
}

.service-card p {
    font-size: 11.5px;
    color: #7d84a8;
    margin: 0 0 15px 0;
    line-height: 1.5;
    text-align: left;
}

/* --- Service status indicator --- */
.service-status {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #2a3150;
    font-size: 14px;
    color: #7d84a8;
    text-align: center;
}

/* Colored dot: green = running */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.status-dot-warning {
    background: #fbbf24; /* yellow = warning */
}

.status-dot-on-demand {
    background: #a305f2; /* purple = on demand */
}

.status-dot-error {
    background: #ef4444; /* red = not running */
}

/* --- Gallery: inline-block for center alignment --- */
.gallery-note {
    font-size: 13px;
    color: #7d84a8;
    font-style: italic;
    text-align: center;
    margin: 10px 0 20px 0;
}

/* min-height:1px prevents IE collapse on empty content */
.gallery {
    width: 100%;
    min-height: 1px;
    overflow: hidden;
    text-align: center;
}

.gallery-item {
    display: inline-block;
    width: 230px;
    margin: 10px;
    border: 1px solid #999999;
    text-align: center;
    vertical-align: top;
    box-sizing: border-box;
}

.gallery-item a {
    text-decoration: none;
}

.gallery-item img {
    border: 0;
    margin-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;
}

/* Hide images with empty or missing src */
.gallery-item img[src=""],
.gallery-item img:not([src]) {
    display: none;
}

.gallery-item p {
    font-size: 13px;
    padding: 5px;
    color: #7d84a8;
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
}

/* --- Clearfix: classic float-clearing hack --- */
.clearfix {
    clear: both;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

/* Modern clearfix via :after — works IE8+ */
.gallery:after,
.services-grid:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* --- Footer --- */
.footer {
    text-align: center;
    padding: 20px;
    border-top: 1px solid #7d84a8;
}

.footer p {
    margin: 15px 0;
}

/* --- Utilities --- */
.link {
    color: #00d9ff;
    text-decoration: underline;
    font-weight: bold;
}

.link:hover {
    text-decoration: none;
}

.hero-subtitle {
    color: #7d84a8;
    font-size: 18px;
}

.specs-photo-legacy {
    text-align: center;
}

.specs-photo-legacy img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}