/*
Theme Name: Karmanya Theme
Theme URI: https://karmanya.co/
Author: Karmanya
Author URI: https://karmanya.co/
Description: A modern Full Site Editing (FSE) block theme for Karmanya Consulting. Features a professional Red & Black color palette with scroll animations.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: karmanya-theme
Tags: full-site-editing, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, wide-blocks
*/

/* ========================================
   CSS Variables - Red/Black Brand Colors
   ======================================== */
:root {
    --karmanya-primary: #990000;
    --karmanya-primary-dark: #1f2732;
    --karmanya-secondary: #111111;
    --karmanya-white: #FFFFFF;
    --karmanya-gray: #555555;
    --karmanya-gray-light: #f5f5f5;
    --karmanya-border: #e5e7eb;
}

/* ========================================
   Base Styles
   ======================================== */

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

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

/* Typography - Playfair Display for Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    line-height: 1.3;
    color: var(--karmanya-secondary);
}

a {
    color: var(--karmanya-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--karmanya-secondary);
}

/* ========================================
   Scroll Reveal Animations
   ======================================== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-child {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.reveal.active .reveal-child {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   Button Styles
   ======================================== */
.wp-block-button__link {
    background: var(--karmanya-primary);
    border-radius: 50px;
    padding: 16px 32px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border: none;
}

.wp-block-button__link:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(153, 0, 0, 0.3);
}

/* White button with red text (for CTA sections) */
.wp-block-button__link[style*="background-color:#fff"],
.wp-block-button__link[style*="background-color: #fff"],
.wp-block-button__link[style*="background-color:#ffffff"],
.wp-block-button__link[style*="background-color: #ffffff"] {
    color: var(--karmanya-primary) !important;
}

.wp-block-button__link[style*="background-color:#fff"]:hover,
.wp-block-button__link[style*="background-color:#ffffff"]:hover {
    background-color: #f0f0f0 !important;
}

/* Red background buttons */
.wp-block-button__link[style*="background-color:#990000"],
.wp-block-button__link[style*="background-color: #990000"] {
    color: #ffffff !important;
}

.wp-block-button__link[style*="background-color:#990000"]:hover {
    background-color: #770000 !important;
}

/* Black background buttons */
.wp-block-button__link[style*="background-color:#111111"],
.wp-block-button__link[style*="background-color: #111111"] {
    color: #ffffff !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid var(--karmanya-white);
    color: var(--karmanya-white) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--karmanya-white);
    color: var(--karmanya-primary) !important;
}

/* ========================================
   Card Styles with Hover Lift
   ======================================== */
.service-card,
.card-hover {
    background: var(--karmanya-white);
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    border: 1px solid var(--karmanya-border);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

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

/* Client logo uniform sizing */
.card-hover .wp-block-image {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-hover .wp-block-image img {
    max-height: 80px;
    max-width: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ========================================
   Navigation Styles
   ======================================== */
.wp-block-navigation a {
    font-weight: 500;
    transition: color 0.3s ease;
    color: var(--karmanya-secondary) !important;
}

.wp-block-navigation a:hover {
    color: var(--karmanya-primary) !important;
}

/* Mobile Navigation - Hamburger Menu */
.wp-block-navigation__responsive-container-open {
    color: var(--karmanya-secondary) !important;
}

.wp-block-navigation__responsive-container-open svg {
    width: 28px;
    height: 28px;
}

/* Mobile Menu Overlay - Glassmorphism Effect */
.wp-block-navigation__responsive-container.is-menu-open {
    background: rgba(17, 17, 17, 0.75) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 80px 30px 30px !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 20px;
    max-width: 400px;
    margin: 0 auto;
}

/* Mobile Menu Close Button */
.wp-block-navigation__responsive-container-close {
    color: var(--karmanya-white) !important;
    position: absolute;
    top: 25px;
    right: 25px;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50%;
    padding: 8px !important;
    transition: all 0.3s ease;
}

.wp-block-navigation__responsive-container-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

.wp-block-navigation__responsive-container-close svg {
    width: 24px;
    height: 24px;
}

/* Mobile Menu Links */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
    color: var(--karmanya-white) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    padding: 18px 0 !important;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    text-align: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child a {
    border-bottom: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
    color: var(--karmanya-primary) !important;
    background: rgba(255, 255, 255, 0.05);
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    gap: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* Ensure navigation is visible */
.wp-block-navigation {
    display: flex !important;
    visibility: visible !important;
}

.wp-block-navigation__container {
    display: flex !important;
    visibility: visible !important;
}

/* ========================================
   Stats Counter Styles
   ======================================== */
.stats-number {
    font-size: 56px;
    font-weight: 700;
    color: var(--karmanya-primary);
    font-family: 'Playfair Display', Georgia, serif;
    line-height: 1;
}

/* ========================================
   Footer Styles
   ======================================== */
.site-footer {
    background: var(--karmanya-secondary);
    color: var(--karmanya-white);
}

.site-footer a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: var(--karmanya-primary);
}

/* ========================================
   Form Styles
   ======================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    border: 1px solid var(--karmanya-border);
    border-radius: 6px;
    padding: 14px 18px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: var(--karmanya-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(153, 0, 0, 0.1);
}

/* Form with Red Top Border */
.form-red-border {
    border-top: 4px solid var(--karmanya-primary);
    padding-top: 30px;
}

/* ========================================
   Utility Classes
   ======================================== */
.bg-primary {
    background-color: var(--karmanya-primary) !important;
}

.bg-primary-dark {
    background-color: var(--karmanya-primary-dark) !important;
}

.bg-secondary {
    background-color: var(--karmanya-secondary) !important;
}

.bg-white {
    background-color: var(--karmanya-white) !important;
}

.bg-gray-light {
    background-color: var(--karmanya-gray-light) !important;
}

.text-primary {
    color: var(--karmanya-primary) !important;
}

.text-secondary {
    color: var(--karmanya-secondary) !important;
}

.text-white {
    color: var(--karmanya-white) !important;
}

.text-gray {
    color: var(--karmanya-gray) !important;
}

/* ========================================
   Red Icon Style
   ======================================== */
/* ========================================
   Gallery Placeholder Styles
   ======================================== */
.gallery-placeholder {
    background: #e5e5e5;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-placeholder::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 40px;
    z-index: 2;
    opacity: 0;
    transition: all 0.3s ease;
}

.gallery-placeholder::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.gallery-placeholder:hover::after {
    opacity: 1;
}

.gallery-placeholder:hover::before {
    opacity: 0;
}

.gallery-placeholder:hover p {
    opacity: 0;
}

.gallery-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-grid {
    gap: 20px;
}

/* Section heading red underline */
.wp-block-separator.is-style-wide {
    width: 60px !important;
    height: 4px !important;
    background: var(--karmanya-primary) !important;
    border: none !important;
    margin-left: 0 !important;
}

.icon-red {
    color: var(--karmanya-primary);
}

/* ========================================
   Responsive Adjustments
   ======================================== */

/* Tablet Styles (768px - 1024px) */
@media (max-width: 1024px) {
    .wp-block-columns {
        gap: 20px !important;
    }

    .wp-block-group[style*="padding:100px"] {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    h1 {
        font-size: 38px !important;
    }

    h2 {
        font-size: 32px !important;
    }
}

/* Mobile Styles (max-width: 782px) */
@media (max-width: 782px) {

    /* Typography */
    h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 20px !important;
    }

    h4,
    h5,
    h6 {
        font-size: 18px !important;
    }

    p {
        font-size: 15px !important;
    }

    /* Columns - Stack on Mobile */
    .wp-block-columns {
        flex-direction: column !important;
        gap: 25px !important;
    }

    .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    /* Section Padding */
    .wp-block-group[style*="padding:100px"],
    .wp-block-group[style*="padding: 100px"] {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .wp-block-cover[style*="padding:140px"],
    .wp-block-cover[style*="padding: 140px"] {
        padding-top: 100px !important;
    }

    .wp-block-cover[style*="min-height:280px"] {
        min-height: 220px !important;
    }

    /* Cards */
    .service-card,
    .card-hover {
        padding: 25px 20px;
        min-height: auto;
    }

    /* Stats */
    .stats-number {
        font-size: 36px;
    }

    /* Buttons */
    .wp-block-button__link {
        padding: 14px 28px !important;
        font-size: 14px !important;
    }

    /* Navigation */
    .wp-block-navigation {
        font-size: 14px;
    }

    /* Header Layout - Stack on Mobile */
    header .wp-block-group[style*="space-between"] {
        flex-direction: column !important;
        gap: 15px;
    }

    /* Logo sizing on mobile */
    header .wp-block-image img {
        max-width: 160px !important;
    }

    /* Mobile Menu Open State */
    .wp-block-navigation__responsive-container.is-menu-open {
        padding: 80px 25px 25px !important;
        background-color: #111111 !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        gap: 0 !important;
        flex-direction: column !important;
        width: 100%;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
        padding: 15px 0 !important;
        font-size: 16px !important;
        color: #ffffff !important;
        display: block;
    }

    /* Hamburger menu button */
    .wp-block-navigation__responsive-container-open {
        padding: 8px !important;
    }

    /* Ensure content is visible */
    .wp-block-cover__inner-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix any hidden content */
    .wp-block-group,
    .wp-block-cover,
    .wp-block-columns {
        overflow: visible !important;
    }

    /* Ensure text is readable */
    .wp-block-cover p,
    .wp-block-cover h1,
    .wp-block-cover h2 {
        max-width: 100% !important;
        word-wrap: break-word !important;
    }

    /* Footer */
    footer .wp-block-columns {
        text-align: center;
    }

    footer .wp-block-column {
        margin-bottom: 30px;
    }

    /* Forms */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        padding: 12px 14px;
        font-size: 16px !important;
        /* Prevents zoom on iOS */
    }

    /* Reveal Animations - Reduce movement */
    .reveal {
        transform: translateY(20px);
    }

    /* Gallery Grid */
    .gallery-grid {
        gap: 15px;
    }

    /* About Page - Founder Section */
    .wp-block-group[style*="padding:50px"] {
        padding: 25px !important;
    }

    /* Contact Page */
    .wp-block-group[style*="padding:60px"] {
        padding: 30px !important;
    }

    /* Client Logos */
    .card-hover .wp-block-image {
        height: 60px;
    }

    .card-hover .wp-block-image img {
        max-height: 60px;
        max-width: 140px;
    }

    /* Services Page - Pillars */
    .wp-block-group[style*="height:100%"] {
        height: auto !important;
    }

    /* Fix list spacing on mobile */
    ul,
    ol {
        padding-left: 20px !important;
    }

    ul li,
    ol li {
        margin-bottom: 8px;
    }
}

/* Small Mobile Styles (max-width: 480px) */
@media (max-width: 480px) {
    h1 {
        font-size: 26px !important;
    }

    h2 {
        font-size: 22px !important;
    }

    h3 {
        font-size: 18px !important;
    }

    /* Even smaller padding on very small screens */
    .wp-block-group[style*="padding:100px"],
    .wp-block-group[style*="padding: 100px"] {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .wp-block-cover[style*="padding:140px"],
    .wp-block-cover[style*="padding: 140px"] {
        padding-top: 80px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .wp-block-cover[style*="min-height:280px"] {
        min-height: 180px !important;
    }

    /* Cards even more compact */
    .service-card,
    .card-hover {
        padding: 20px 15px;
    }

    /* Stats */
    .stats-number {
        font-size: 30px;
    }

    /* Buttons */
    .wp-block-button__link {
        padding: 12px 24px !important;
        font-size: 13px !important;
        width: 100%;
        text-align: center;
    }

    .wp-block-buttons {
        flex-direction: column !important;
        width: 100%;
    }

    .wp-block-button {
        width: 100%;
    }

    /* Footer columns */
    footer .wp-block-column {
        flex-basis: 100% !important;
    }

    /* Values cards */
    .wp-block-group[style*="border-left:4px"] {
        padding: 20px 15px !important;
    }

    /* Client card height */
    .card-hover .wp-block-image {
        height: 50px;
    }

    .card-hover .wp-block-image img {
        max-height: 50px;
        max-width: 120px;
    }
}

/* Touch Device Improvements */
@media (hover: none) and (pointer: coarse) {

    .service-card:hover,
    .card-hover:hover {
        transform: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .wp-block-button__link:hover {
        transform: none;
    }

    /* Larger tap targets */
    .wp-block-navigation a {
        padding: 12px 16px !important;
    }
}

/* Landscape Phone Orientation */
@media (max-width: 782px) and (orientation: landscape) {
    .wp-block-cover[style*="min-height"] {
        min-height: 200px !important;
    }

    .wp-block-cover[style*="padding:140px"] {
        padding-top: 60px !important;
        padding-bottom: 40px !important;
    }
}

/* Print Styles */
@media print {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .wp-block-navigation,
    footer {
        display: none;
    }
}