/* Base Styles for AAG Energy - Light Theme
    Created by AAG Gem (Senior UI/UX Designer)
    
    This file re-imagines the core styles for a light, professional, 
    and "green energy" focused aesthetic, based on our consultation.
*/

/* 1. Base Body & Typography */
body {
    background-color: #FFFFFF;
    color: #1F2937;
    /* Tailwind gray-800 */
    /* UPDATED FONT */
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    /* Default to regular weight */
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* UPDATED FONT */
    font-family: 'Montserrat', sans-serif;
    color: #111827;
    /* Tailwind gray-900 */
    font-weight: 700;
    /* Default headings to Bold */
}

/* Create more specific heading weights */
h1,
.text-7xl {
    font-weight: 800;
    /* Extra-Bold for main titles */
}

h2,
.text-5xl,
.text-4xl {
    font-weight: 700;
    /* Bold for section titles */
}

h3,
.text-2xl,
.text-xl {
    font-weight: 600;
    /* Semi-Bold for card titles and sub-headings */
}


.font-accent {
    /* This was already correct, no change needed */
    font-family: 'JetBrains Mono', monospace;
}

/* 2. AAG Green Accent
    - This color is kept as-is, as it works perfectly as a primary accent.
*/
.aag-green {
    color: #7FD957;
}

.bg-aag-green {
    background-color: #7FD957;
}

.border-aag-green {
    border-color: #7FD957;
}

.bg-white {
    background-color: #FFFFFF;
}

.text-green {
    color: #7FD957;
}


/* 3. Header */
header {
    background-color: rgba(255, 255, 255, 0.8);
    /* White with transparency */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #E5E7EB;
    /* Tailwind gray-200 */
}

header nav a {
    color: #374151;
    /* Tailwind gray-700 */
    /* UPDATED FONT */
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    /* Bold */
}

header nav a:hover {
    color: #7FD957;
}


/* 4. Hero Section
    - We remove the dark grid background from the original style.css.
    - A light, simple background is preferred.
*/
.hero-section {
    position: relative;
    background: #F9FAFB;
    /* Tailwind gray-50 */
    overflow: hidden;
}

/* REMOVED .hero-section::before grid animation */


/* 5. Glow Card (Re-imagined as "Lift Card")
    - This is the biggest change.
    - We switch to a white background, a subtle border, and a modern shadow.
    - The hover effect "lifts" the card with a stronger shadow and green border.
*/
.glow-card {
    background-color: #FFFFFF;
    border: 1px solid #F3F4F6;
    /* Very subtle border */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    /* Extremely subtle shadow */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /* Smoother bezier */
    position: relative;
    border-radius: 1rem;
    /* More rounded */
}

.glow-card:hover {
    transform: translateY(-4px);
    /* Smaller lift */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01);
    /* Soft elevated shadow */
    border-color: #A3E635;
    /* Lighter lime green */
}

/* 6. CTA Button */
/* 6. CTA Button - Softened */
.cta-button {
    background-color: #7FD957;
    /* Keep base green */
    color: #052e16;
    /* Dark green text for contrast */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    border-radius: 9999px;
    /* Pill shape */
}

.cta-button:hover {
    background-color: #8ce066;
    /* Slightly lighter on hover */
    transform: scale(1.02);
    /* Subtle scale */
    box-shadow: 0 10px 15px -3px rgba(127, 217, 87, 0.4);
}

/* 7. Form Inputs (for Contact Page)
    - Re-styled for a light theme.
*/
.form-input {
    background-color: #F9FAFB;
    /* Tailwind gray-50 */
    border: 1px solid #D1D5DB;
    /* Tailwind gray-300 */
    color: #111827;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: #7FD957;
    box-shadow: 0 0 0 2px rgba(127, 217, 87, 0.5);
}

/* 8. 3D Solar Block
    - These styles are mostly fine, but we'll ensure the faces
      have a light-theme-friendly background.
*/
.solar-block-container {
    perspective: 1000px;
    width: 250px;
    height: 250px;
}

.solar-block {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    box-shadow: 0 0 25px rgba(127, 217, 87, 0.6);
    border-radius: 12px;
}

.face {
    position: absolute;
    width: 250px;
    height: 250px;
    background-color: rgba(249, 250, 251, 0.8);
    /* Light bg */
    border: 2px solid #7FD957;
    opacity: 0.9;
    box-shadow: inset 0 0 10px #7FD957;
}

.front {
    transform: rotateY(0deg) translateZ(125px);
}

.back {
    transform: rotateY(180deg) translateZ(125px);
}

.left {
    transform: rotateY(-90deg) translateZ(125px);
}

.right {
    transform: rotateY(90deg) translateZ(125px);
}

.top {
    transform: rotateX(90deg) translateZ(125px);
}

.bottom {
    transform: rotateX(-90deg) translateZ(125px);
}

/* 9. Timeline (Services Page)
    - Adjusted for light theme.
*/
.timeline-item::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: rgba(127, 217, 87, 0.3);
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-dot {
    position: absolute;
    left: 6px;
    top: 5px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #FFFFFF;
    /* White background */
    border: 4px solid #7FD957;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: 'Manrope', sans-serif;
    z-index: 10;
    color: #111827;
}

/* 10. Hero Overlays (NEWLY ADDED)
    - This is for hero sections on inner pages (About, Services)
    - Ensures white text is readable on top of background images.
    - UPDATED to a dark green tint per our review.
*/
.overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    /* Neutral dark overlay */
    z-index: 1;
}

.hero-section-about,
.hero-section-services {
    position: relative;
    /* Needed for the overlay */
    background-size: cover;
    background-position: center;
}

/* 11. Light Green Background (NEWLY ADDED)
    - Per our review, for use on light-gray sections
      to enhance the "green" brand feel.
*/
/* 11. Light Green Background (NEWLY ADDED) */
.bg-light-green {
    background-color: #ECFCCB;
    /* Lime-100/50 mix - warmer soft green */
}

/* 12. New Utilities for Redesign */
.text-balance {
    text-wrap: balance;
}

.soft-gradient-bg {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}