/* style.css */

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

body.overflow-hidden {
    overflow: hidden;
}

/* ---Navbar Styles --- */
/* Tailwind classes handle most navbar styling */

/* Logo Styling in Navbar (specific to header) */
/* This is handled by inline styles in index.html for .logo-pinnacle-green and .logo-aisolutions-blue */

/* Hamburger Icon Styling (for mobile) */
.hamburger { /* Tailwind md:hidden handles visibility */
    padding: 10px; /* For touch target */
    margin: -10px; /* Offset padding */
    box-sizing: content-box;
}
    .hamburger span {
        display: block;
        width: 100%; /* Tailwind w-8 */
        height: 2px; /* Tailwind h-1 */
        background-color: #fff; /* Tailwind bg-white */
        transition: all 0.3s ease-in-out; /* Tailwind transition-all */
        transform-origin: center;
    }

/*Navbar Menu (Desktop) handled by inline styles in index.html */
/* Mobile Menu Overlay handled by inline styles in index.html */

.nav-link-mobile {
    text-decoration: none;
    transition: color 0.3s ease;
}

.btn-base {
    padding: 0.6rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

.btn-primary-mobile, .btn-secondary-mobile {
    width: 91.666667%;
    max-width: 20rem;
}

.close-mobile-menu {
    transition: color 0.3s ease;
}

/* --- Hero Section Styles --- */
/* @keyframes fadeInUp is defined in inline styles in index.html */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}
    .animate-fade-in-up.delay-200 { animation-delay: 0.2s; }
    .animate-fade-in-up.delay-400 { animation-delay: 0.4s; }

/* --- Contact Section Styles --- */
textarea.form-input { /* General form-input, specific override for #contact below */
    min-height: 8rem; /* Custom style for textarea */
}

/* --- Footer Styles --- */
/* Handled by Tailwind and inline styles */


/* Media Queries for Responsiveness */
@media (max-width: 767px) { /* Below md breakpoint */
    /* Responsive adjustments for navbar handled by inline styles */
}

/* === STYLES FOR CONTACT SECTION VISIBILITY WITH CODEPEN BACKGROUND === */

#contact {
    position: relative; /* For containing the absolute canvas */
    /* Tailwind bg-gray-800 utility class provides base dark background */
    overflow: hidden; /* Recommended to contain the canvas */
}

#codepenCanvasContactBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind content */
    pointer-events: none; /* Allow clicks to pass through to content */
}

#contact .contact-content-wrapper {
    position: relative;
    z-index: 1; /* Ensures this wrapper is above the canvas */
}

/* Style the "Get In Touch" header block */
#contact .section-header {
    background-color: rgba(17, 24, 39, 0.9); /* Tailwind gray-900 with 90% opacity for better contrast */
    padding: 1.5rem; /* Tailwind p-6 */
    border-radius: 0.75rem; /* Tailwind rounded-xl */
    margin-bottom: 4rem; /* Tailwind mb-16, ensure it's applied or re-add */
    position: relative;
    z-index: 2;
}
/* Ensure header text is light and readable on the new dark semi-transparent background */
#contact .section-header h2 {
    /* Uses .text-gradient from inline styles which is fine. Ensure it stands out. */
    /* If gradient isn't enough, override color: var(--color-text-light); */
}
#contact .section-header p {
    color: var(--color-text-light); /* Tailwind gray-200 (light gray) */
}

/* Style the form container on the left */
#contact .contact-form {
    /* Tailwind classes: p-8 bg-gray-900 rounded-xl shadow-xl border border-gray-700 */
    /* The existing bg-gray-900 is good for the form block background. */
    background-color: rgba(17, 24, 39, 0.95); /* Slightly more opaque gray-900 */
    position: relative;
    z-index: 2;
}

/* Style form input fields and textarea for high contrast */
#contact .form-input { /* This overrides the general .form-input from inline styles for #contact section */
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: rgba(229, 231, 235, 0.95); /* Tailwind gray-200 with 95% opacity (light background) */
    color: #111827; /* Tailwind gray-900 (dark text) for input text */
    border: 1px solid rgba(107, 114, 128, 0.7); /* Tailwind gray-500 border */
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
#contact .form-input::placeholder {
    color: #4b5563; /* Tailwind gray-600 for placeholder */
}
#contact .form-input:focus {
    background-color: #ffffff; /* Fully white on focus */
    color: #030712; /* Tailwind gray-950 for darker text on focus */
    border-color: var(--color-primary-blue);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.3);
    outline: none;
}
/* Ensure form labels are light and readable on the .contact-form's dark background */
#contact .contact-form .form-group label {
    color: var(--color-text-light); /* Tailwind gray-200 or similar */
}

/* Style the contact information block on the right */
#contact .contact-info {
    background-color: rgba(17, 24, 39, 0.9); /* Tailwind gray-900 with 90% opacity, matches section-header */
    padding: 2rem; /* Tailwind p-8 */
    border-radius: 0.75rem; /* Tailwind rounded-xl */
    position: relative;
    z-index: 2;
}
/* Ensure text within contact info items is light and readable */
#contact .contact-info h4 {
    color: #ffffff; /* White for better emphasis */
}
#contact .contact-info p {
    color: var(--color-text-light); /* Tailwind gray-200 (light gray) */
}
/* The info-icons (.info-icon) already have distinct, colorful backgrounds from Tailwind. */

/* Hide dummy CodePen editor/control elements if not already handled by JS */
#codeEditorContactBg, #errorContactBg, #indicatorContactBg, #controlsContactBg {
    display: none !important;
    visibility: hidden !important;
}