/*
Theme Name: MediaPiston
Description: Professional digital marketing agency WordPress theme with conversion-focused design, featuring SEO optimization, PPC advertising, social media marketing, content marketing, web design, and web development services. Built with modern responsive design and optimized for lead generation. Version 2.0 includes collaboration image in hero section.
Author: MediaPiston Team
Version: 2.0.0
License: GPL v2 or later
Text Domain: mediapiston
Tags: business, marketing, agency, responsive, professional, conversion-optimized
*/

/* CSS Variables for Brand Colors */
:root {
    --primary-navy: #1E3A8A;
    --professional-blue: #3B82F6;
    --success-green: #10B981;
    --action-orange: #F97316;
    --text-gray: #6B7280;
    --dark-gray: #374151;
    --light-gray: #F3F4F6;
    --white: #FFFFFF;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--dark-gray);
    background-color: var(--white);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Styles */
.site-header {
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    min-height: 80px;
}

/* Logo Styles */
.logo {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo-text {
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1;
}

.logo-text .med {
    color: var(--text-gray);
}

.logo-text .i-accent {
    color: var(--action-orange);
    font-weight: 600;
}

.logo-text .apiston {
    color: var(--text-gray);
}

.logo-tagline {
    font-size: 11px;
    color: var(--action-orange);
    font-weight: 300;
    letter-spacing: 0.5px;
    margin-top: -2px;
}

/* Navigation Styles */
.main-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-item {
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    color: var(--white);
}

.nav-item.home {
    background-color: var(--professional-blue);
}

.nav-item.services {
    background-color: var(--action-orange);
}

.nav-item.contact {
    background-color: #8B5CF6;
}

.nav-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Phone Number */
.header-phone {
    background-color: var(--action-orange);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    margin-left: 1rem;
    transition: all 0.3s ease;
}

.header-phone:hover {
    background-color: #EA580C;
    transform: translateY(-2px);
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--professional-blue) 50%, var(--success-green) 100%);
    color: var(--white);
    padding: 120px 0 80px;
    margin-top: 80px;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero-text .gradient-text {
    background: linear-gradient(45deg, var(--success-green), #34D399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-text p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

/* CTA Button */
.cta-button {
    background-color: var(--action-orange);
    color: var(--white);
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-block;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.cta-button:hover {
    background-color: #EA580C;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.3);
}

/* Lead Form */
.lead-form {
    background: var(--white);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--dark-gray);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--professional-blue);
}

/* Trust Badges */
.trust-badges {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
    align-items: center;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--white);
    font-weight: 500;
}

.trust-badge .icon {
    width: 20px;
    height: 20px;
    background-color: var(--success-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Hero Right Section */
.hero-right {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Collaboration Image */
.collaboration-image {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 0 auto 2rem;
}

.collaboration-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Floating Testimonial */
.floating-testimonial {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    max-width: 280px;
    color: var(--dark-gray);
}

.floating-testimonial p {
    font-style: italic;
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.floating-testimonial .testimonial-author {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.floating-testimonial .stars {
    color: #FCD34D;
    font-size: 0.9rem;
}

/* Stats Section */
.stats-section {
    background-color: var(--action-orange);
    color: var(--white);
    padding: 4rem 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
}

.stat-item h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.stat-item .reviews {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Services Section */
.services-section {
    padding: 5rem 0;
    background-color: var(--light-gray);
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.25rem;
    color: var(--text-gray);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.service-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border-top: 4px solid;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.service-card.seo {
    border-top-color: var(--professional-blue);
}

.service-card.ppc {
    border-top-color: var(--action-orange);
}

.service-card.social {
    border-top-color: var(--success-green);
}

.service-card.content {
    border-top-color: #8B5CF6;
}

.service-card.web-design {
    border-top-color: var(--professional-blue);
}

.service-card.web-dev {
    border-top-color: var(--success-green);
}

.service-card .icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 24px;
    color: var(--white);
}

.service-card.seo .icon {
    background-color: var(--professional-blue);
}

.service-card.ppc .icon {
    background-color: var(--action-orange);
}

.service-card.social .icon {
    background-color: var(--success-green);
}

.service-card.content .icon {
    background-color: #8B5CF6;
}

.service-card.web-design .icon {
    background-color: var(--professional-blue);
}

.service-card.web-dev .icon {
    background-color: var(--success-green);
}

.service-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-navy);
    margin-bottom: 1rem;
}

.service-card p {
    color: var(--text-gray);
    line-height: 1.6;
}

/* Testimonials Section */
.testimonials-section {
    padding: 5rem 0;
    background: var(--white);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    background: var(--light-gray);
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
}

.testimonial-card .quote {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--dark-gray);
    margin-bottom: 1.5rem;
}

.testimonial-card .author {
    font-weight: 600;
    color: var(--primary-navy);
}

.testimonial-card .stars {
    color: #FCD34D;
    margin-bottom: 1rem;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--professional-blue) 0%, var(--primary-navy) 100%);
    color: var(--white);
    padding: 5rem 0;
    text-align: center;
}

.cta-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-section p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

/* Footer */
.site-footer {
    background-color: var(--primary-navy);
    color: var(--white);
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: var(--white);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 1rem;
    text-align: center;
    color: rgba(255,255,255,0.7);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .hero-text h1 {
        font-size: 2.5rem;
    }
    
    .main-nav {
        display: none;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* WordPress Specific Styles */
.wp-block-group {
    margin: 0;
}

.alignwide {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
}

.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* Admin Bar Adjustment */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* Certifications Section */
.certifications-section {
    background: #ff7e42 !important; /* Full-width orange background */
    padding: 40px 0 !important; /* Add some padding top/bottom */
    margin: 0;
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: none !important;
}

.certifications-image-container {
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: 1200px; /* Limit image container width */
    margin: 0 auto; /* Center the container */
}

.certifications-image {
    width: auto !important; /* Don't stretch the image */
    max-width: 1200px !important; /* Maximum width to prevent pixelation */
    height: auto;
    display: block;
    margin: 0 auto; /* Center the image */
    padding: 0;
    vertical-align: top;
}

/* For smaller screens, allow some scaling */
@media (max-width: 1200px) {
    .certifications-image {
        width: 90% !important;
        max-width: 90% !important;
    }
}

/* Remove bottom margin/padding from hero section */
.hero-section,
.hero,
section.hero {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove the exact padding causing the white gap */
section[style*="background"] {
    padding-bottom: 0 !important;
}

.certifications-section {
    padding-top: 0 !important;
}

/* Alternative - target by position if above doesn't work */
body > section:first-of-type {
    padding-bottom: 0 !important;
}

/* Make sure there's no margin either */
section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Disable scroll transform on hero section */
.hero-section {
    transform: none !important;
    will-change: auto !important;
}

/* Alternative - if you want to keep some transform but prevent the gap */
.hero-section {
    transform: translateY(0px) !important;
}

/* Completely disable all transforms and transitions on hero */
.hero-section {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
    animation: none !important;
}

/* Ensure sections stay in place during scroll */
section {
    transform: none !important;
}

/* Move CTA form up without creating gaps between sections */
.hero-section form,
.hero-section .form-container,
.hero-section .cta-form {
    transform: translateY(-30px) !important;
    margin-bottom: 0 !important;
}

/* Alternative approach - use negative margin */
.hero-section form,
.hero-section .form-container {
    margin-top: -20px !important;
    margin-bottom: 0 !important;
}

/* Remove any padding we added that created the white gap */
.hero-section {
    padding-bottom: 0 !important;
}

.certifications-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure sections remain connected */
.hero-section + .certifications-section {
    margin-top: 0 !important;
}