/* Import Montserrat and Open Sans fonts (ensure these are in header.php or linked directly) */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&family=Open+Sans:wght@300;400;600&display=swap'); */

body {
    font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa; /* Lighter and more modern background */
    color: #343a40; /* Softer black for text */
    line-height: 1.6; /* Improved line spacing */
    font-size: 16px; /* Base font size */
}

.container {
    width: 85%; /* Slightly wider */
    max-width: 1200px; /* Max width */
    margin: auto;
    overflow: hidden; /* Clear floats, contain margins */
    padding-left: 15px; /* Gutters */
    padding-right: 15px; /* Gutters */
}

header {
    background: #ffffff; /* White header */
    color: #333; /* Default text color for header content */
    padding-top: 15px;
    padding-bottom: 15px;
    min-height: auto; /* Let content define height */
    border-bottom: 1px solid #e0e0e0; /* Softer border */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
    position: sticky; /* Sticky header */
    top: 0;
    z-index: 1000; /* Ensure header stays on top */
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping for language switcher and nav on smaller screens */
}

header h1 { /* Site Title */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin: 0;
    font-size: 28px;
    color: #0779e4; /* Brand color for the title */
}

header nav {
    /* Navigation container */
}

header nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center; /* Vertically align nav items with language switcher */
}

header nav ul li {
    margin-left: 15px; /* Spacing between nav items */
}

header nav ul li:first-child {
    margin-left: 0;
}

header nav ul li a {
    color: #333; /* Nav link color */
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid transparent; /* For consistent spacing on hover */
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    border-radius: 4px;
}

header nav ul li a:hover,
header nav ul li a.active { /* You might need JS to add 'active' class to current page link */
    color: #fff;
    background-color: #0779e4;
    border-color: #0779e4;
}

/* Language Switcher */
.language-switcher {
    margin-left: 20px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
}

.language-switcher a {
    color: #333;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 3px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.language-switcher a:hover {
    background-color: #f0f0f0;
    text-decoration: none;
}

.language-switcher a.active-lang {
    font-weight: bold;
    color: #0779e4; /* Accent color for active language */
}


/* Hero Section */
.hero {
    height: calc(100vh - 70px); /* Adjust height based on header, or use min-height */
    min-height: 500px; /* Minimum height for content visibility */
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Replace with your actual hero image */
    background: linear-gradient(rgba(51, 51, 51, 0.7), rgba(51, 51, 51, 0.7)), url('your-hero-image.jpg') no-repeat center center/cover;
    background-color: #333; /* Fallback color */
    padding: 0 20px; /* Padding for content within hero if viewport is very narrow */
}

.hero-content {
    max-width: 700px;
}

.hero h1 {
    font-size: 52px;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

.hero p {
    font-size: 22px;
    margin-bottom: 30px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

/* Buttons */
.btn {
    padding: 12px 28px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease;
    border-radius: 5px;
    letter-spacing: 0.5px;
    display: inline-block; /* Ensure proper spacing and layout */
    text-decoration: none; /* Remove underline from <a> tags styled as buttons */
}

.btn:hover {
    transform: translateY(-2px); /* Subtle lift effect */
}

.btn-primary {
    background-color: #0779e4;
    color: #fff;
    margin-right: 10px; /* Retained margin from original CSS, adjust if needed */
}

.btn-primary:hover {
    background-color: #055fb2; /* Darker shade on hover */
}

.btn-secondary {
    background-color: #6c757d; /* A more modern secondary button color (grey) */
    color: #fff;
}

.btn-secondary:hover {
    background-color: #5a6268; /* Darker grey on hover */
}

/* Sections Defaults */
section { /* For sections like services-home, about-home */
    padding: 60px 0;
}

section h2 { /* Main section titles (e.g., "Our Key Services" on homepage) */
    font-size: 38px;
    margin-bottom: 40px; /* Increased space after title */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-align: center;
    color: #333;
}

/* Specific section styling */
#services-home, #about-home { /* Sections on the homepage */
    background-color: #ffffff; /* White background for these sections */
}

#services-home .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
    gap: 30px; /* Space between grid items */
    margin-bottom: 30px;
}

#services-home .service, .service-box { /* .service-box can be used on services.php for consistency */
    background: #fff;
    padding: 30px; /* Increased padding */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Softer, more diffused shadow */
    text-align: center;
    border-radius: 8px; /* Rounded corners */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#services-home .service:hover, .service-box:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* Enhanced shadow on hover */
}

#services-home .service h3, .service-box h3 { /* Service item titles on homepage or services page */
    font-size: 24px;
    margin-bottom: 15px;
    color: #0779e4; /* Accent color for service titles */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

#services-home .service p, .service-box p {
    font-size: 16px;
    color: #555;
    line-height: 1.7;
}

/* Styling for generic content pages (about.php, services.php, contact.php, calculator.php) */
.container > h1 { /* Main page titles (e.g., "About Us" on about.php, "Our Services" on services.php) */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 40px;
    margin-top: 20px; /* Space from header if sticky */
    margin-bottom: 30px; /* Space after title */
    color: #333;
    text-align: center;
    padding-top: 20px; /* If header isn't sticky, this gives space */
}

.container > h2 { /* Sub-headings on content pages (e.g., service names on services.php) */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 28px;
    margin-top: 40px;
    margin-bottom: 15px;
    color: #0779e4; /* Accent color for subheadings */
}
.container > p, .container > ul > li, .container > div > p { /* General paragraph styling within content pages */
    margin-bottom: 15px;
    font-size: 17px;
    color: #495057;
}
.container p strong { /* For "Why it's important:" type text */
    color: #343a40;
    font-weight: 600;
}

/* Contact Page Specifics */
.contact-info {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-top: 30px;
}
.contact-info h2 { /* Specific "Fernandez CPA..." title */
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    color: #0779e4;
    margin-bottom: 20px;
    text-align: left; /* Override default center for this specific H2 */
    margin-top: 0; /* Reset margin-top if it's the first element */
}
.contact-info p {
    font-size: 17px;
    margin-bottom: 10px;
}
.contact-info p a {
    color: #0779e4;
    text-decoration: none;
}
.contact-info p a:hover {
    text-decoration: underline;
}

/* Footer */
footer {
    background: #343a40; /* Darker footer for contrast */
    color: #ced4da; /* UPDATED: Softer white for footer text */
    text-align: center;
    padding: 30px 0;
    margin-top: 40px; /* More space before footer */
}

footer p {
    margin: 0;
    font-family: 'Montserrat', sans-serif; /* UPDATED: Font */
    font-size: 14px; /* UPDATED: Font size */
    font-weight: 400; /* UPDATED: Font weight (normal) */
}

/* Calculator Page Styles */
.calculator-disclaimer { /* NEW */
    background-color: #fff3cd; /* Light yellow background */
    border: 1px solid #ffeeba; /* Yellow border */
    color: #856404; /* Dark yellow text */
    padding: 15px;
    margin: 20px 0 30px 0; /* Add some margin below it */
    border-radius: 4px;
    font-size: 0.9em;
}
.calculator-disclaimer p {
    margin: 0; /* Remove default paragraph margin if it's inside */
    color: #856404; /* Ensure paragraph text also gets the color */
}


.calculator-tabs {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}

.calculator-tabs button.tab-link {
    background-color: #f1f1f1;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: background-color 0.3s, color 0.3s;
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
    margin-right: 2px; /* Small gap between tabs */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #333; /* Default text color for tabs */
}

.calculator-tabs button.tab-link:hover {
    background-color: #ddd;
}

.calculator-tabs button.tab-link.active {
    background-color: #0779e4; /* Use primary color */
    color: white;
}

.tab-content { /* Container for each calculator tab's content */
    padding: 25px 20px;
    border: 1px solid #e0e0e0; /* Softer border */
    border-top: none;
    background-color: #ffffff; /* White background for content */
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07); /* Softer shadow */
    margin-bottom: 30px; /* Space below tab content */
}

.tab-content h2 { /* Titles like "Corporations", "Individuals" within tabs */
    margin-top: 0;
    text-align: left; /* Override default centered page H1 styling */
    font-size: 28px; /* Consistent with other sub-headings on pages */
    color: #0779e4; /* Primary color for emphasis */
    margin-bottom: 20px;
}
.tab-content h3 { /* "Calculation Results" heading */
    margin-top: 25px;
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.tab-content h4 { /* "Contribution Computation" heading */
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    color: #0779e4; /* Primary color for emphasis */
}

#corpCalculatorForm div, 
#indCalculatorForm div { /* Spacing for label-input groups */
    margin-bottom: 18px;
}

#corpCalculatorForm label, 
#indCalculatorForm label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600; /* Bolder labels */
    font-family: 'Montserrat', sans-serif;
    color: #444; /* Slightly softer than pure black */
    font-size: 16px;
}

#corpCalculatorForm input[type="text"],
#indCalculatorForm input[type="text"],
#indCalculatorForm select {
    width: 100%;
    padding: 12px; /* Increased padding for better touch/click */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* So padding doesn't expand width beyond 100% */
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#corpCalculatorForm input[type="text"]:focus,
#indCalculatorForm input[type="text"]:focus,
#indCalculatorForm select:focus {
    border-color: #0779e4; /* Highlight focus with primary color */
    outline: none;
    box-shadow: 0 0 0 2px rgba(7, 121, 228, 0.2); /* Subtle glow */
}

.results p {
    font-size: 17px; /* Slightly larger result text */
    color: #333;
    line-height: 1.7;
    margin-bottom: 8px; /* Space between result lines */
}
.results p strong { /* For result labels like "Total Contribution:" */
    font-family: 'Montserrat', sans-serif;
    color: #0779e4;
    font-weight: 700; /* Explicitly bold */
}
.results span { /* For the calculated values */
    font-weight: bold;
    color: #2a2a2a; /* Darker for emphasis */
    background-color: #f0f8ff; /* Very light blue background for values */
    padding: 2px 5px;
    border-radius: 3px;
}

.computation-breakdown { /* For individual tax computation details */
    background-color: #f9f9f9;
    border: 1px solid #e7e7e7;
    padding: 15px;
    font-family: 'Courier New', Courier, monospace; /* Monospace for clarity */
    font-size: 15px; /* Slightly larger for readability */
    line-height: 1.6;
    margin-top: 10px;
    border-radius: 4px;
    white-space: pre-line; /* Respects line breaks from JS (\n and <br>), wraps long lines */
    color: #444;
}


/* Responsive Adjustments */
@media (max-width: 992px) { /* Adjust breakpoint for nav/lang switcher earlier if needed */
    header .container {
        /* May need to adjust justify-content if items wrap awkwardly */
    }
    header nav {
       /* Could add margin-top if it wraps below logo before full column layout */
    }
     #corpCalculatorForm input[type="text"],
    #indCalculatorForm input[type="text"],
    #indCalculatorForm select {
        max-width: 100%; /* Full width on smaller tablets */
    }
}


@media (max-width: 768px) {
    header .container {
        flex-direction: column;
        text-align: center;
    }

    header h1 { /* Site Title */
        margin-bottom: 15px;
    }

    header nav {
        width: 100%; /* Make nav take full width */
        margin-top: 15px;
    }

    header nav ul {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    header nav ul li {
        margin-left: 0;
        margin-bottom: 10px;
        width: 90%; /* Control width of nav items for better centering/appearance */
    }
    header nav ul li a {
        display: block; /* Make links full width blocks */
        text-align: center;
    }

    .language-switcher {
        margin-left: 0; /* Remove left margin when stacked */
        margin-top: 15px; /* Space when it's below nav */
        justify-content: center; /* Center the language links */
    }

    .hero {
        height: auto; /* Auto height for hero on small screens */
        min-height: 400px;
        padding-top: 60px; /* More padding on mobile */
        padding-bottom: 60px;
    }

    .hero h1 {
        font-size: 36px;
    }

    .hero p {
        font-size: 18px;
    }

    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    section h2 { /* Main section titles on homepage */
        font-size: 30px;
    }
    .container > h1 { /* Page titles like "About Us", "Our Services" */
        font-size: 32px;
    }
    .container > h2 { /* Sub-headings on content pages like service names */
        font-size: 24px;
    }

    #services-home .services-grid {
        grid-template-columns: 1fr; /* Stack service boxes */
    }

    /* Calculator specific responsive adjustments */
    .calculator-tabs button.tab-link {
        font-size: 15px; /* Slightly smaller tab text on mobile */
        padding: 12px 10px;
    }
     #corpCalculatorForm input[type="text"],
    #indCalculatorForm input[type="text"],
    #indCalculatorForm select {
        max-width: 100%; /* Ensure full width inside tabs on mobile */
    }

    .calculator-disclaimer {
        margin: 15px 0 20px 0;
        font-size: 0.85em;
    }
}