/*
Theme Name: Managed Services Theme
Theme URI: https://charis-dubai.online/
Author: ChatGPT
Author URI: https://openai.com/
Description: A modern, responsive WordPress theme rebuilt from the Managed Services HTML5 site.  The theme implements a bespoke design with custom templates for the home page, about page, services, solutions, resources, pricing, contact and technology features pages.  It follows WordPress coding standards and is designed to be extensible via custom post types and blocks.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: managed-services
Tags: custom-menu, custom-colors, one-column, two-columns, right-sidebar, responsive-layout, custom-logo, block-patterns
*/

/*
 * Basic theme styling variables.  These variables mirror the colors defined in the original HTML site.
 */
:root {
    --primary-color: #1a237e;
    --accent-color: #0d47a1;
    --accent2-color: #1565c0;
    --accent3-color: #1976d2;
    --accent4-color: #82b1ff;
    --dark-background-color: #0a192f;
    --light-background-color: #f7fafc;
    --dark-text-color: #1a202c;
    --gray-text-color: #718096;
    --primary-button-text-color: #ffffff;
    --primary-button-hover-bg-color: #0d47a1;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', 'Roboto', sans-serif;
    color: var(--dark-text-color);
    background-color: var(--light-background-color);
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    color: var(--accent4-color);
    text-decoration: underline;
}

header.site-header {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

header.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

footer.site-footer {
    background: var(--dark-background-color);
    color: #fff;
    padding: 2rem 1rem;
    text-align: center;
}

/* Responsive helper classes */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.hero {
    position: relative;
    background: linear-gradient(135deg, var(--dark-background-color) 0%, var(--primary-color) 100%);
    color: white;
    padding: 6rem 1rem;
    text-align: center;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.hero p {
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

.btn {
    display: inline-block;
    background: var(--accent4-color);
    color: var(--dark-text-color);
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: bold;
    transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.btn:hover {
    background: var(--accent3-color);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Content spacing */
.section {
    padding: 4rem 0;
}

/* Basic grid */
.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.grid > * {
    flex: 1 1 45%;
}

@media (min-width: 768px) {
    .hero h1 {
        font-size: 3rem;
    }
    .hero p {
        font-size: 1.25rem;
    }
    .grid > * {
        flex: 1 1 calc(33.333% - 2rem);
    }
}