/* Base Styling for IT Services Website (PROFESSIONAL DARK MODE) */

:root {
    --primary-color: #00bcd4; /* Bright Cyan/Aqua Accent for links/buttons */
    --secondary-color: #263238; /* Dark, deep slate for the header/hero background */
    --text-color: #fff4e0; /* NEW: Yellowish Off-White for body text */
    --background-color: #1e1e1e; /* Very dark gray for the main background */
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); /* Darker shadow for depth on dark background */
}

/* --- Font Definitions --- */
/* Apply Lora (Serif) to the entire body for reading text */
body {
    font-family: 'Lora', serif; 
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--text-color);
}

/* Apply Inter (Sans-serif) to all structural elements, headings, and CTA buttons */
h1, h2, h3, .main-nav, .header-branding h1, .cta-button, .detail-item strong {
    font-family: 'Inter', sans-serif;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0;
}

/* --- Header and Navigation (Dark Background, Light Text) --- */
.header-branding {
    max-width: 1100px; 
    margin: 0 auto; 
    background-color: var(--secondary-color);
    padding: 10px 0 5px; 
    border-bottom: 2px solid var(--primary-color);
}

/* Limit the logo size within the header */
.header-branding img {
    max-height: 400px; /* Adjust this value (e.g., 80px, 100px) if 120px is still too big */
    width: auto;
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.main-nav li {
    margin: 0 15px;
}

.main-nav a {
    color: var(--text-color); /* CHANGED from 'white' to use the yellowish off-white variable */
    text-decoration: none;
    font-weight: bold;
    padding: 5px 0;
    transition: color 0.3s;
}

.main-nav a:hover {
    color: var(--primary-color); 
}


/* --- Hero Section (Dark Background, Light Text) --- */
.hero {
    max-width: 1100px;
    margin: 0 auto;
    background-color: var(--secondary-color);
    color: var(--text-color); 
    padding: 60px 0;
    text-align: center;
}

.hero h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.cta-button {
    display: inline-block;
    background-color: var(--primary-color); 
    color: var(--secondary-color); 
    padding: 10px 25px;
    margin-top: 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #008c9f; 
}

/* --- Status Widget Section Styling --- */
.status-widget {
    padding: 20px 0;
    text-align: center; 
    background-color: var(--secondary-color);
    border-bottom: 2px solid var(--primary-color);
}

/* --- Services Section --- */
.services-overview {
    padding: 40px 0;
    text-align: center;
    background-color: var(--background-color);
}

.service-cards {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
}

.card {
    background: var(--secondary-color); 
    padding: 20px;
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    flex: 1;
    text-align: left;
}

.card h3 {
    color: var(--primary-color); 
    margin-top: 0;
}

/* --- Map Section Styling (Dark Background) --- */
.map-container {
    padding: 40px 0;
    text-align: center;
    background-color: var(--background-color);
}

.map-container h2 {
    margin-bottom: 5px;
}

.map-container p {
    margin-bottom: 25px;
    color: var(--text-color);
}

.map-container .container iframe {
    max-width: 550px; 
    width: 100%; 
    display: block;
    margin: 0 auto;
}

/* --- Contact CTA Footer (Primary Color Background) --- */
.contact-cta {
    background-color: var(--primary-color); 
    color: var(--secondary-color); 
    padding: 40px 0;
    text-align: center;
    margin-top: 40px;
}

.contact-cta h3 {
    margin-top: 0;
}

.contact-cta .secondary {
    background-color: white;
    color: var(--primary-color);
    border: 2px solid white;
}

/* --- Blog List Styling (Uses Card Styling) --- */
.post-summary {
    background: var(--secondary-color); 
    padding: 20px;
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    margin-bottom: 30px;
    text-align: left;
}

.post-summary h2 {
    margin-top: 0;
    color: var(--primary-color); 
}

.post-summary h2 a {
    text-decoration: none;
    color: var(--primary-color);
}

.post-summary h2 a:hover {
    color: var(--text-color);
}

/* --- Contact Page Styling --- */
.contact-page {
    padding: 60px 0;
    text-align: center;
}

.contact-page h1 {
    color: var(--primary-color);
}

.contact-details {
    margin: 40px auto;
    padding: 20px;
    background-color: var(--secondary-color); 
    max-width: 500px;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
}

.detail-item {
    font-size: 1.2em;
    margin: 15px 0;
}

.detail-item a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: normal;
}

.detail-item a:hover {
    text-decoration: underline;
}

/* --- Floating Status Widget Styling --- */
/* Target the widget wrapper specifically for precise positioning */
#floating-status-widget {
    position: fixed;
    top: 20px;          /* 20px from the top edge */
    right: 20px;        /* 20px from the right edge */
    left: unset;        /* Ensure left property is cleared */
    bottom: unset;      /* Ensure bottom property is cleared */
    z-index: 1000;      /* Ensure it sits above all other content */
    opacity: 0.9;
    cursor: pointer;
}