/*
Theme Name: PRAVAS Theme
Theme URI: https://example.com/pravas-theme
Author: Your Name
Author URI: https://yourwebsite.com
Description: A custom WordPress theme for PRAVAS - Web Development Agency, based on the provided design.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pravas-theme
*/

/* Custom styles from the original HTML, ensuring consistent branding and layout. */
body { 
    font-family: 'Inter', sans-serif; 
    /* Ensures smooth scrolling for anchor links within the single page. */
    scroll-behavior: smooth; 
}

/* Color palette definitions for easy reference and consistency. */
.bg-dark { background-color: #1A1A1A; } /* Very dark gray for backgrounds (e.g., header, hero, footer) */
.bg-light-gray { background-color: #F5F5F5; } /* Soft off-white for alternating section backgrounds */
.text-main-dark { color: #333333; } /* Dark gray for primary text on light backgrounds */
.text-light { color: #CCCCCC; } /* Light gray for text on dark backgrounds */
.accent-blue { color: #1E75A9; } /* Primary accent color from the logo's compass icon */
.accent-orange { color: #E57300; } /* Secondary accent color from the logo's text and tagline */
.bg-accent-orange { background-color: #E57300; } /* Background for call-to-action elements */
.border-accent-orange { border-color: #E57300; } /* Border color using the accent orange */

/* Specific styling for chart containers to ensure responsiveness and proper sizing. */
.chart-container { 
    position: relative; 
    width: 100%; 
    max-width: 800px; /* Limits max width for readability on large screens */
    margin-left: auto; 
    margin-right: auto; /* Centers the chart container */
    height: 300px; /* Base height for charts */
    max-height: 400px; /* Maximum height to prevent excessive vertical space */
}

/* Media query for larger screens to adjust chart height for better visual balance. */
@media (min-width: 768px) { 
    .chart-container { 
        height: 400px; 
    } 
}

/* Styling for the PRAVAS logo section in the header and footer. */
.pravas-logo { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; /* Space between the compass icon and text */
}

/* Styling for the compass icon within the logo. */
.compass-icon { 
    font-size: 2rem; 
    line-height: 1; 
    color: #1E75A9; /* Uses the accent blue for the icon */
    font-weight: bold; 
}

/* Styling for the "PRAVAS" text part of the logo. */
.pravas-text { 
    font-size: 1.5rem; 
    font-weight: 800; 
    color: #E57300; /* Uses the accent orange for the text */
}

/* General styling for portfolio items */
.portfolio-item {
    cursor: pointer; /* Indicates that the item is clickable */
    transition: transform 0.2s ease-in-out; /* Smooth transition for hover effect */
}

/* Hover effect for portfolio items */
.portfolio-item:hover {
    transform: translateY(-5px); /* Lifts the item slightly on hover */
}

/* --- Contact Form 7 Specific Styles --- */
/* Ensure all form elements inherit box-sizing correctly to prevent overflow */
.wpcf7-form *,
.wpcf7-form *::before,
.wpcf7-form *::after {
    box-sizing: border-box; /* Use border-box for consistent sizing */
}

/* Target the label wrappers for individual fields to ensure they stack and take full width */
.wpcf7-form label {
    display: block; /* Each label and its content takes a new line */
    width: 100%; /* Ensure labels take full width */
    margin-bottom: 1rem; /* Space between form fields */
    color: #CCCCCC; /* Text color for labels */
    font-size: 0.95rem; /* Slightly smaller font for labels */
}

/* Target common Contact Form 7 input and textarea elements for full width and consistent styling */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea {
    width: 100%; /* Make inputs take full width */
    max-width: 100%; /* Prevent overflow */
    padding: 0.75rem; /* Consistent padding */
    border-radius: 0.375rem; /* Rounded corners */
    background-color: #333333; /* Dark background from theme */
    border: 1px solid #555555; /* Border from theme */
    color: #CCCCCC; /* Text color from theme */
    font-size: 1rem; /* Standard font size */
    display: block; /* Ensure inputs are block-level for stacking */
    float: none; /* Clear any floats */
    margin-top: 0.25rem; /* Small space between label text and input */
    font-family: 'Inter', sans-serif; /* Ensure consistent font */
}

/* Target the .wpcf7-form-control-wrap span which wraps inputs (for compatibility) */
.wpcf7-form .wpcf7-form-control-wrap {
    display: block; /* Ensure the wrapper itself is block-level */
    width: 100%; /* Make wrapper take full width */
    max-width: 100%; /* Prevent overflow */
    float: none; /* Clear any floats */
}

/* Focus styles for input fields */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form textarea:focus {
    outline: none; /* Remove default outline */
    border-color: #E57300; /* Accent orange border on focus */
    box-shadow: 0 0 0 2px rgba(229, 115, 0, 0.5); /* Subtle shadow on focus */
}

/* Styling for the submit button of Contact Form 7 */
.wpcf7-form input[type="submit"] {
    width: 100%; /* Full width button */
    padding: 0.75rem 2rem; /* Padding */
    border-radius: 0.375rem; /* Rounded corners */
    background-color: #E57300; /* Accent orange background */
    color: #FFFFFF; /* White text */
    font-size: 1.125rem; /* Larger font */
    font-weight: 600; /* Semi-bold */
    cursor: pointer; /* Pointer cursor */
    transition: opacity 0.2s ease-in-out; /* Smooth hover */
    border: none; /* No border */
    display: block; /* Block-level display */
    margin-top: 1rem; /* Top margin */
    font-family: 'Inter', sans-serif; /* Ensure consistent font */
}

/* Hover effect for the submit button */
.wpcf7-form input[type="submit"]:hover {
    opacity: 0.9; /* Slightly reduce opacity on hover */
}

/* General styling for form messages (success, error, etc.) */
.wpcf7-response-output {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    width: 100%; /* Ensure messages are responsive */
    max-width: 100%;
}

/* Specific styles for success message */
.wpcf7-response-output.wpcf7-mail-sent-ok {
    background-color: #4CAF50; /* Green for success */
    color: white;
}

/* Specific styles for error message */
.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-mail-sent-ng,
.wpcf7-response-output.wpcf7-aborted,
.wpcf7-response-output.wpcf7-spam {
    background-color: #F44336; /* Red for errors */
    color: white;
}

/* Target default CF7 paragraph wrappers to ensure they are also 100% width and stack */
/* This rule is simplified as labels are now primarily handling the block display */
.wpcf7-form p {
    width: 100%; /* Ensure full width */
    margin-bottom: 0; /* No extra margin from p, as labels handle it */
}

/* Adjust grid for two-column layout on larger screens if Contact Form 7 uses 'half' class */
/* This rule is simplified as labels are now primarily handling the block display */
@media (min-width: 641px) { /* Apply these styles from medium screens upwards */
    .wpcf7-form-control-wrap.half {
        width: 49% !important; /* Slightly less than 50% to account for margin/gap */
        display: inline-block !important; /* Allows side-by-side */
        vertical-align: top !important; /* Aligns them at the top */
        margin-right: 1% !important; /* Small gap between columns */
        float: left !important; /* Explicitly float left for two columns */
    }
    .wpcf7-form-control-wrap.half:nth-child(even) {
        margin-right: 0 !important; /* No margin on the last item in a row */
        margin-left: 1% !important; /* Adjust margin for the second column */
    }
    /* Ensure the labels inside these half-width wraps also conform */
    .wpcf7-form-control-wrap.half label {
        width: 100% !important;
        margin-bottom: 0 !important; /* Remove individual label margin here if wrapper handles it */
    }
}

/* Ensure half fields stack on small screens by resetting to full width and block display */
@media (max-width: 640px) {
    .wpcf7-form-control-wrap.half {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        float: none !important; /* Crucial: remove float on small screens */
        display: block !important; /* Ensure they stack vertically */
    }
}