/* ==========================================================================
   1. Core Reset & Global Styles
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #1a1a1a;
    color: #e0e0e0;
    font-family: 'Courier New', Courier, monospace;
    padding: 40px 20px;
}

h1 {
    font-weight: normal;
    color: #00ff66;
    margin-bottom: 20px;
}

.status {
    color: #00ff66;
    font-weight: bold;
    margin: 40px 0;
    text-align: center; /* Centers the online status block */
    animation: blinker 1.5s linear infinite; /* Adds the blinking animation */
}

footer {
    font-size: 0.85rem;
    color: #666666;
    line-height: 1.6;
    margin-top: 40px;
    text-align: center; /* Centers all footer text */
}

.footer-tech {
    color: #555555;
    font-size: 0.8rem;
}

/* ==========================================================================
   2. Homepage Layout Component (.home-page)
   ========================================================================== */
.home-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 85vh;
}

.card {
    text-align: center;
    max-width: 600px;
}

.card h1 { font-size: 3.2rem; }
.contact a { color: #00ff66; text-decoration: none; border-bottom: 1px dashed #00ff66; }

/* ==========================================================================
   3. About Page Layout Component (.about-page)
   ========================================================================== */
.about-page {
    max-width: 1000px; /* Expands your page layout outwards */
    width: 100%;
    margin: 40px auto; /* Centers the whole container layout on the monitor */
    text-align: left !important;
}

.about-page h1 {
    font-size: 2.8rem;
    text-align: left !important;
    width: 100% !important;
}

.bio-section {
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

.profile-img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    flex-shrink: 0; /* Forces the browser to never squeeze or warp your image */
    border-radius: 50%;
    margin-top: 40px;    /* Higher number pushes the image further down */
    margin-right: 25px;  /* Adds clean breathing room between image and text */
}

.bio-text p {
    color: #b0b0b0;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 36px;
    text-align: left !important;
    flex-grow: 1;
}

.main-title {
    color: #00ff66;
    font-size: 2.8rem;
    font-weight: normal;
    margin-bottom: 5px;
    text-align: left !important;
}

.sub-title {
    color: #b0b0b0;
    font-size: 1.8rem;
    font-weight: normal;
    margin-bottom: 40px;
    text-align: left !important;
}

/* ==========================================================================
   3b. Services Page Layout Component (.services-page)
   ========================================================================== */
.services-page {
    max-width: 1000px;
    width: 100%;
    margin: 40px auto;
    text-align: left !important;
}

/* Generous spacing after the main intro paragraph */
.services-intro {
    color: #b0b0b0;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 60px; 
}

/* Spacing layout for the core services columns */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px; 
}

/* Individual service blocks */
.service-box {
    border: 1px dashed #666666;
    padding: 25px;
    background-color: #1e1e1e;
}

.service-box h3 {
    color: #00ff66; /* Green service titles */
    font-weight: normal;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.service-box p {
    color: #b0b0b0;
    line-height: 1.7;
    font-size: 1.05rem;
}

.service-box ul {
    list-style-type: none;
    padding-left: 0;
}

.service-box li {
    font-size: 1rem;
    line-height: 1.6;
}

.service-box li::before {
    content: "-> ";
    color: #00ff66;
}

/* Extra content sections spacing */
.services-extra {
    margin-top: 20px;
    margin-bottom: 60px;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #b0b0b0;
}

/* Green section titles with clear separation boundaries */
.services-extra h2 {
    color: #00ff66; /* Forces section titles to green */
    font-weight: normal;
    font-size: 1.6rem;
    margin-top: 50px; /* Clear breathing room above the title */
    margin-bottom: 20px; /* Clear spacing below the title */
    border-bottom: 1px dashed #333333;
    padding-bottom: 8px;
}

/* Spacing out the lists so the next section title feels distinct */
.services-extra ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 40px; 
}

.services-extra li {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 14px;
}

.services-extra li::before {
    content: "-> ";
    color: #00ff66;
}

.services-extra p {
    margin-bottom: 32px;
}


/* ==========================================================================
   3c. Cloud Page Layout Component (.cloud-section)
   ========================================================================== */

.cloud-section {
    margin-top: 65px;
    margin-bottom: 45px;
}

.cloud-section h2 {
    color: #00ff66;
    font-weight: normal;
    font-size: 1.6rem;
    margin-bottom: 20px;
    border-bottom: 1px dashed #333333;
    padding-bottom: 8px;
}

.cloud-section p {
    color: #b0b0b0;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.cloud-section ul {
    list-style-type: none;
    padding-left: 0;
}

.cloud-section li {
    color: #e0e0e0;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 14px;
}

.cloud-section li::before {
    content: "-> ";
    color: #00ff66;
}

/* Command prompt style CTA box */
.services-cta {
    margin-top: 60px;
    margin-bottom: 60px;
    border: 1px solid #00ff66;
    padding: 35px;
    text-align: center;
}

.services-cta h3 {
    color: #00ff66; /* Green CTA Title */
    font-weight: normal;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.services-cta p {
    color: #b0b0b0;
    margin-bottom: 25px;
}

.services-cta a {
    color: #1a1a1a;
    background-color: #00ff66;
    text-decoration: none;
    padding: 12px 24px;
    display: inline-block;
    font-weight: bold;
}

.services-cta a:hover {
    background-color: #e0e0e0;
}

/* ==========================================================================
   4. Mobile Adaptation
   ========================================================================== */
@media (max-width: 768px) {
    .bio-section { flex-direction: column; align-items: center; text-align: center; }
}

/* ==========================================================================
   5. Animations
   ========================================================================== */
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* ==========================================================================
   6. TUI Navigation Menu
   ========================================================================== */

.tui-header {
    max-width: 1000px;
    margin: 0 auto 40px auto;
    border-bottom: 1px dashed #444444;
    padding-bottom: 15px;
    font-size: 1.2rem;
}

.tui-menu {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
}

.tui-item {
    color: #666666;
    white-space: nowrap;
}

.tui-item::before {
    content: "--> ";
    color: #888888;
}

.tui-item a {
    color: #00ff66;
    text-decoration: none;
    font-weight: bold;
}

.tui-item a:hover {
    color: #1a1a1a;
    background-color: #00ff66;
}

.tui-num {
    color: #888888;
}

/* ==========================================================================
   7. Blog Components (List & Single)
   ========================================================================== */
.blog-list-container {
    margin-top: 50px;
    margin-bottom: 60px;
    font-family: monospace;
}

.blog-entry {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 35px; /* Cleaned up spacing between entries */
}

.blog-entry-prompt {
    color: #666666;
    font-weight: bold;
    font-size: 1.45rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.blog-entry-body {
    flex: 1;
}

/* TARGETED FIX: Forces text to stay green even if you have clicked it before */
.blog-entry-body a,
.blog-entry-body a:visited,
.blog-entry-body a:link {
    color: #00ff66 !important;
    text-decoration: none;
    font-size: 1.45rem;
    line-height: 1.3;
    font-weight: bold;
    display: inline-block;
}

.blog-entry-body a:hover {
    color: #1a1a1a !important;
    background-color: #00ff66;
}

.blog-entry-meta {
    color: #888888;
    font-size: 1.05rem;
    margin-top: 8px; /* Pushes the date down a bit for breathing room */
}

/* ==========================================================================
   8. Single Blog Article Layout
   ========================================================================== */

.article-body {
    max-width: 100%;
    color: #e0e0e0;
    font-size: 1.1rem;
    line-height: 1.8;
}

.article-body p {
    margin-bottom: 24px;
}

.article-body h2 {
    color: #00ff66;
    font-size: 1.7rem;
    font-weight: normal;
    margin-top: 50px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #333333;
    padding-bottom: 10px;
}

.article-body h3 {
    color: #00ff66;
    font-size: 1.3rem;
    font-weight: normal;
    margin-top: 35px;
    margin-bottom: 15px;
}

.article-body ul,
.article-body ol {
    margin-left: 30px;
    margin-bottom: 30px;
}

.article-body li {
    margin-bottom: 10px;
}

.article-body pre {
    background-color: #222222;
    border-left: 4px solid #00ff66;
    padding: 15px 20px;
    margin: 25px 0;
    overflow-x: auto;
}

.article-body code {
    color: #00ff66;
}

.article-body blockquote {
    border-left: 4px solid #444444;
    padding-left: 20px;
    margin: 25px 0;
    color: #b0b0b0;
}

.enterprise-intro {
    color: #b0b0b0;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 60px;
}

.enterprise-intro p {
    margin-bottom: 32px;
}

.enterprise-intro p:last-child {
    margin-bottom: 0;
}