/*
Theme Name: Ctrl Alt Go IT Consulting
Description: Professional IT consulting website for Ctrl Alt Go
Version: 1.1
Author: Ctrl Alt Go
*/

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin-bottom: 1rem;
    color: #2c3e50;
}

h1 {
    font-size: 3rem;
    line-height: 1.2;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 2rem;
}

p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.site-header {
    background: #2c3e50;
    color: white;
    padding: 1rem 0;
    /* Sticky, not fixed: it still pins to the top when you scroll, but it keeps
       its place in the layout, so the page below it starts underneath rather
       than behind it. Fixed removed the header from the flow, which is why the
       top of every page was hidden. */
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
    margin: 0;
    outline: none;
}

.header-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-title {
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: none;
    color: white;
}

.site-title:hover {
    color: #e8f4f8;
}

.site-header img {
    height: 90px !important;
    width: 90px !important;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.site-header img:hover {
    opacity: 0.8;
}

/* Navigation */
.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.main-navigation a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.main-navigation a:hover {
    color: #e8f4f8;
}

/* Main Content */
.site-main {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

/* Hero Section */
.hero {
    background: #2c3e50;
    color: white;
    padding: 120px 0 80px;
    text-align: center;
    /* The 78px top margin that used to be here was compensating for the fixed
       header by hand. It only helped the front page, and it was short of the
       header's real height anyway. A sticky header needs no such offset. */
    margin: 0;
    border: none;
    outline: none;
}

.hero h1 {
    color: white;
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-button {
    display: inline-block;
    background: #e74c3c;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background 0.3s ease;
    font-size: 1.1rem;
}

.cta-button:hover {
    background: #c0392b;
    color: white;
}

/* Section Titles */
.section-title {
    text-align: center;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 3rem;
}

/* Services Section */
.services {
    padding: 80px 0;
    background: white;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.service-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.service-card h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

/* About Section */
.about {
    padding: 80px 0;
    background: #f8f9fa;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.about-text h2 {
    color: #2c3e50;
    margin-bottom: 1.5rem;
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.stat-item {
    text-align: center;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    display: block;
}

.stat-label {
    color: #666;
    font-size: 0.9rem;
}

/* Contact Section */
.contact {
    padding: 80px 0;
    background: white;
}

.contact-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.contact-info h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.contact-info p {
    margin-bottom: 1.5rem;
}

.contact-info a {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 500;
}

.contact-info a:hover {
    color: #34495e;
    text-decoration: underline;
}

.contact-form {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #2c3e50;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #2c3e50;
}

.form-group textarea {
    height: 120px;
    resize: vertical;
}

.submit-btn {
    background: #2c3e50;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.submit-btn:hover {
    background: #34495e;
}

/* Footer */
.site-footer {
    background: #2c3e50;
    color: white;
    padding: 2rem 0;
    text-align: center;
}

/* Blog/Archive Styles */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.post-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.post-card:hover {
    transform: translateY(-5px);
}

.post-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-content {
    padding: 1.5rem;
}

.post-title a {
    color: #2c3e50;
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 600;
}

.post-title a:hover {
    color: #2c3e50;
}

.post-meta {
    color: #666;
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.post-excerpt {
    margin: 1rem 0;
    line-height: 1.6;
}

.read-more {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    margin-top: 1rem;
}

.read-more:hover {
    color: #34495e;
}

.page-header {
    text-align: center;
    margin: 2rem 0;
    padding: 2rem 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.page-title {
    color: #2c3e50;
    font-size: 2.5rem;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .main-navigation ul {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    .about-content {
        grid-template-columns: 1fr;
    }
    
    .contact-content {
        flex-direction: column;
    }
    
    .about-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .hero {
        padding: 100px 0 60px;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
}