/*
Theme Name: LeanWP
Theme URI: https://leanwp.design
Author: Manas
Author URI: https://manas.me
Description: A minimalist design system for Gutenberg-only WordPress sites.
Version: 0.3.3
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.4
Text Domain: leanwp
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

LeanWP is a block-based theme designed to be a foundation for multiple high-performance demos.
*/

/* =========================================
   1. GLOBAL LAYOUT FIXES
   ========================================= */

main.wp-block-group {
    width: 100%;
    max-width: 100% !important;
    overflow-x: hidden;
}

.alignfull {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

.alignwide {
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--primary);
}

/* Remove default WordPress block spacing that creates gaps */
:root :where(.is-layout-constrained)>* {
    margin-block-start: 0 !important;
    margin-block-end: 0;
}

:root :where(.is-layout-flow)>* {
    margin-block-start: 0 !important;
    margin-block-end: 0;
}

:where(.wp-site-blocks)>* {
    margin-block-start: 0 !important;
    margin-block-end: 0;
}

/* Neutralize default WP group padding when background is set */
:where(.wp-block-group.has-background) {
    padding: 0;
}

/* =========================================
   2. MOBILE OPTIMIZATIONS
   ========================================= */

@media (max-width: 782px) {

    /* Padding & Edges */
    .wp-block-columns {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .wp-block-group.alignfull {
        /* padding-top: 48px !important; */
        padding-bottom: 48px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Ensure content has breathing room */
    .wp-block-column p,
    .wp-block-column h1,
    .wp-block-column h2,
    .wp-block-column h3,
    .wp-block-column h4 {
        padding-left: 0;
        padding-right: 0;
    }

    /* Header Mobile Adjustments */
    header .wp-block-buttons {
        display: none !important;
        /* HIde "Book a Call" on mobile */
    }

    header {
        padding-top: 12px !important;
        /* padding-bottom: 12px !important; */
    }

    header .wp-block-site-logo {
        margin-left: 16px;
    }

    /* Hero Typing Text (Mobile Only) */
    .hero-title {
        font-size: 32px !important;
        min-height: 120px;
    }

    /* Subtext Sizing (Corrected) */
    .wp-block-paragraph.has-large-font-size {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    /* Hero Buttons - Equal Width */
    .hero-buttons .wp-block-buttons {
        flex-direction: column;
        width: 100%;
        gap: 16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero-buttons .wp-block-button {
        width: 100% !important;
        /* Make buttons properly full width within container */
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex;
    }

    .hero-buttons .wp-block-button__link {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Reverse Process Order */
    .reverse-on-mobile {
        flex-direction: column-reverse !important;
    }

    .reverse-on-mobile .wp-block-column:first-child {
        margin-top: 32px;
    }

    /* Blog Grid Stack Fix */
    /* Ensure the query loop grid collapses properly */
    .wp-block-post-template {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .wp-block-post-template li {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    .wp-block-post-template .wp-block-post-featured-image {
        margin-bottom: 16px;
    }
}

/* =========================================
   3. COMPONENTS
   ========================================= */

/* CLIENTS SLIDER (Marquee) */
.client-logo-slider {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.client-logo-track {
    display: flex;
    width: max-content;
    /* Force track to be wide enough for all items */
    animation: scroll 30s linear infinite;
    gap: 64px;
    padding-left: 64px;
    align-items: center;
}

/* Ensure images don't shrink */
.client-logo-track img {
    flex-shrink: 0;
    height: 40px;
    width: auto;
    filter: grayscale(100%) opacity(0.7);
    transition: all 0.3s ease;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* Move half way (assuming duplicated content) */
}


/* SERVICES ICONS */
.service-icon-wrapper {
    background: transparent;
    margin-right: 16px;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.service-icon-wrapper svg {
    width: 32px;
    height: 32px;
    color: var(--wp--preset--color--accent);
}

/* HERO */
.hero-title {
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
}

/* TYPEWRITER CURSOR */
.typing-cursor::after {
    content: '|';
    animation: blink 1s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* PROCESS NUMBERS */
.process-number {
    font-size: 48px !important;
    font-weight: 800 !important;
    color: var(--wp--preset--color--accent) !important;
    line-height: 1 !important;
    margin: 0 !important;
    display: inline-block !important;
    white-space: nowrap !important;
    text-align: left !important;
}

/* TESTIMONIALS */
.testimonial-quote {
    color: var(--wp--preset--color--primary);
}

.testimonial-name {
    color: #000000 !important;
    font-weight: 700;
}

/* BLOG FIXES */
/* Ensure images in grid cover area */
.wp-block-post-featured-image img {
    object-fit: cover;
    width: 100%;
    height: 250px;
    /* Fixed height for consistency */
    border-radius: 12px;
}

/* CONTACT FORM 7 STYLING */
.wp-block-contact-form-7 .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 20px;
}

.wp-block-contact-form-7 input[type="text"],
.wp-block-contact-form-7 input[type="email"],
.wp-block-contact-form-7 input[type="tel"],
.wp-block-contact-form-7 textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 0px !important;
    font-family: inherit !important;
    font-size: 16px !important;
    background: #F8FAFC !important;
    transition: all 0.3s ease !important;
    outline: none !important;
}

.wp-block-contact-form-7 input:focus,
.wp-block-contact-form-7 textarea:focus {
    border-color: var(--wp--preset--color--accent) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
}

.wp-block-contact-form-7 .wpcf7-submit {
    background: var(--wp--preset--color--accent) !important;
    color: #ffffff !important;
    padding: 16px 32px !important;
    border-radius: 12px !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    margin-top: 12px !important;
}

.wp-block-contact-form-7 .wpcf7-submit:hover {
    background: var(--wp--preset--color--primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

.wp-block-contact-form-7 .wpcf7-spinner {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

/* Success/Error messages */
.wpcf7-response-output {
    margin: 20px 0 0 0 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    border: 2px solid transparent !important;
}

.wpcf7-mail-sent-ok {
    background: #f0fdf4 !important;
    border-color: #22c55e !important;
    color: #15803d !important;
}

.wpcf7-validation-errors {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #b91c1c !important;
}

/* Contact Form Styling */
.wpcf7-form-control-wrap {
    display: block !important;
    margin-bottom: 0px !important;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    font-size: 16px !important;
    color: #1e293b !important;
    width: 100% !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important;
    outline: none !important;
}

.wpcf7 label {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #64748b !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.wpcf7-submit {
    background-color: #6366f1 !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 16px 32px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
    width: 100% !important;
    margin-top: 16px !important;
}

.wpcf7-submit:hover {
    background-color: #4f46e5 !important;
    transform: translateY(-1px) !important;
}

.wpcf7-not-valid-tip {
    font-size: 13px !important;
    color: #ef4444 !important;
    margin-top: 4px !important;
}

.wpcf7-response-output {
    border-radius: 12px !important;
    padding: 16px !important;
    margin-top: 24px !important;
    font-size: 14px !important;
    border: none !important;
    background: #f0fdf4 !important;
    color: #166534 !important;
}

.wpcf7-validation-errors {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #b91c1c !important;
}

/* =========================================
   4. FOOTER STYLES
   ========================================= */
footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Back to Top Button */
.back-to-top-btn a:hover {
    background-color: #ffffff !important;
    color: #0F172A !important;
    border-color: #ffffff !important;
}

/* Social Icons in Footer */
.footer-socials .wp-block-social-link-anchor {
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.3s ease;
}

.footer-socials .wp-block-social-link-anchor:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
}

.footer-socials .wp-block-social-links {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

footer .wp-block-columns {
    margin-bottom: 0 !important;
}

/* Headings */
footer h6 {
    font-size: 13px !important;
    font-weight: 700 !important;
    opacity: 0.9;
    margin-bottom: 24px !important;
    letter-spacing: 1.5px !important;
}

/* Lists */
footer ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

footer li {
    margin-bottom: 14px !important;
    list-style-type: none !important;
    /* Force remove bullets */
}

/* Links */
footer li a {
    font-size: 15px !important;
    color: #cbd5e1 !important;
    opacity: 0.7;
    transition: all 0.2s ease;
    display: inline-block;
    text-decoration: none !important;
}

footer li a:hover {
    opacity: 1;
    color: #ffffff !important;
    transform: translateX(4px);
}

/* Copyright border */
footer hr.wp-block-separator {
    opacity: 0.1 !important;
    margin-top: 64px !important;
}

/* Hide on Mobile Utility */
@media (max-width: 782px) {
    .hide-on-mobile {
        display: none !important;
    }
}

/* Mobile Footer Tweaks */
@media (max-width: 782px) {
    footer {
        padding-top: 64px !important;
        padding-bottom: 32px !important;
        text-align: left !important;
    }

    footer .wp-block-columns {
        gap: 0 !important;
        /* Remove horizontal gap */
        display: block !important;
        /* Stack columns */
    }

    footer .wp-block-column {
        margin-bottom: 48px !important;
        /* Add vertical spacing */
        width: 100% !important;
        flex-basis: 100% !important;
    }

    /* Adjust Logo Column */
    footer .wp-block-column:first-child {
        margin-bottom: 64px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding-bottom: 32px;
    }
}

/* Contact Info Section Modernization */
.contact-info-column .wp-block-heading {
    letter-spacing: -1px;
    margin-bottom: 24px !important;
}

.contact-info-column .contact-hero-subtitle {
    font-weight: 500;
    margin-top: 16px !important;
    opacity: 0.9;
}

/* Contact Links (Email/Phone) */
.contact-info-column .wp-block-group {
    transition: transform 0.2s ease;
}

.contact-info-column a,
.contact-info-column p.has-primary-color {
    font-weight: 600;
    font-size: 18px;
    text-decoration: none !important;
}

.contact-info-column svg {
    color: var(--wp--preset--color--accent);
    min-width: 24px;
}

/* Hover effects for contact items */
.contact-info-column>.wp-block-group>.wp-block-group:hover {
    transform: translateX(8px);
    opacity: 0.8;
}

/* Mobile Tweaks for Contact Info */
@media (max-width: 782px) {
    .contact-info-column {
        padding-right: 0 !important;
        margin-bottom: 48px !important;
        text-align: left;
        /* Keep left align as per design, but ensure safe area */
    }

    .contact-info-column .wp-block-heading {
        font-size: 42px !important;
        /* Scale down from 48px */
    }

    .contact-info-column .contact-hero-subtitle {
        font-size: 18px !important;
        /* Slightly smaller on mobile */
    }

    /* Ensure icons don't get squashed */
    .contact-info-column .wp-block-group {
        flex-wrap: nowrap !important;
    }
}