/*
Theme Name: Jash Marketing Theme
Theme URI: https://jashmarketing.com/
Author: Jash Marketing
Description: A high-performance, minimalist digital marketing studio theme converted from a custom React TSX application.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jash-marketing
*/

/* -------------------------------------------------------------------------- */
/* 1. FONTS & EXTERNAL DEPENDENCIES                                           */
/* -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Sora:wght@400;600;700;800;900&display=swap');

/* -------------------------------------------------------------------------- */
/* 2. DESIGN SYSTEM TOKENS (LIGHT MODE DEFAULT)                               */
/* -------------------------------------------------------------------------- */
:root {
  --radius: 0.75rem;
  
  /* Core Semantic Tokens */
  --background: oklch(0.99 0.005 250);
  --foreground: oklch(0.18 0.05 265);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.05 265);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.05 265);
  --primary: oklch(0.55 0.22 255);
  --primary-foreground: oklch(0.99 0 0);
  --primary-deep: oklch(0.22 0.08 265);
  --secondary: oklch(0.96 0.015 250);
  --secondary-foreground: oklch(0.22 0.08 265);
  --muted: oklch(0.96 0.01 250);
  --muted-foreground: oklch(0.48 0.03 257);
  --accent: oklch(0.65 0.2 250);
  --accent-foreground: oklch(0.99 0 0);
  --destructive: oklch(0.6 0.24 27);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.92 0.013 255);
  --input: oklch(0.92 0.013 255);
  --ring: oklch(0.55 0.22 255);
  
  /* Complex Assets & Effects */
  --gradient-brand: linear-gradient(135deg, oklch(0.22 0.08 265) 0%, oklch(0.55 0.22 255) 100%);
  --gradient-hero: linear-gradient(180deg, oklch(0.98 0.01 250) 0%, oklch(0.94 0.04 250) 100%);
  --gradient-glow: radial-gradient(circle at 50% 0%, oklch(0.55 0.22 255 / 0.18), transparent 60%);
  --shadow-elegant: 0 20px 60px -20px oklch(0.22 0.08 265 / 0.25);
  --shadow-glow: 0 10px 40px -10px oklch(0.55 0.22 255 / 0.45);
  
  /* Fonts */
  --font-display: "Sora", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;
}

/* -------------------------------------------------------------------------- */
/* 3. DESIGN SYSTEM TOKENS (DARK MODE VARIANT)                                */
/* -------------------------------------------------------------------------- */
.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);
  --card-foreground: oklch(0.984 0.003 247.858);
  --popover: oklch(0.208 0.042 265.755);
  --popover-foreground: oklch(0.984 0.003 247.858);
  --primary: oklch(0.929 0.013 255.508);
  --primary-foreground: oklch(0.208 0.042 265.755);
  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --accent: oklch(0.279 0.041 260.031);
  --accent-foreground: oklch(0.984 0.003 247.858);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);
}

/* -------------------------------------------------------------------------- */
/* 4. BASE LAYER ASSIGNMENTS                                                  */
/* -------------------------------------------------------------------------- */
* {
  border-color: var(--border);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* -------------------------------------------------------------------------- */
/* 5. WORDPRESS STANDALONE COMPONENT UTILITIES                                */
/* -------------------------------------------------------------------------- */

/* Custom Gradients Mapping - FIXED TO background-image */
.bg-gradient-brand { background-image: var(--gradient-brand) !important; }
.bg-gradient-hero { background-image: var(--gradient-hero) !important; }
.bg-gradient-glow { background-image: var(--gradient-glow) !important; }

/* Structural Deep Elements */
.bg-primary-deep { background-color: var(--primary-deep) !important; }

/* Custom Shadows Mapping */
.shadow-elegant { box-shadow: var(--shadow-elegant) !important; }
.shadow-glow { box-shadow: var(--shadow-glow) !important; }

/* Text Utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

/* -------------------------------------------------------------------------- */
/* 6. BACKGROUND PATTERNS (Consolidated from templates)                       */
/* -------------------------------------------------------------------------- */
.bg-pattern-grid {
  background-image: 
    linear-gradient(to right, rgba(150, 150, 150, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(150, 150, 150, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
}
.bg-pattern-dots-dark {
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}
.bg-pattern-cross {
  background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 30px 30px;
}
.bg-pattern-diagonal {
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0, rgba(0,0,0,0.02) 2px, transparent 2px, transparent 10px);
}

/* -------------------------------------------------------------------------- */
/* 7. ANIMATIONS (Consolidated from templates)                                */
/* -------------------------------------------------------------------------- */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes marqueeLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes marqueeRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
@keyframes logoTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.animate-marquee, .animate-infinite-marquee, .animate-logo-ticker, .animate-marquee-left, .animate-marquee-right {
  display: flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  width: max-content;
}
.animate-marquee { animation: marquee 40s linear infinite; }
.animate-infinite-marquee { animation: marquee 35s linear infinite; }
.animate-logo-ticker { animation: logoTicker 35s linear infinite; }
.animate-marquee-left { animation: marqueeLeft 45s linear infinite; }
.animate-marquee-right { animation: marqueeRight 45s linear infinite; }

.animate-logo-ticker:hover, .image-ticker:hover .animate-infinite-marquee {
  animation-play-state: paused;
}

/* -------------------------------------------------------------------------- */
/* 8. DYNAMIC GRID/MASONRY FILTERING (Case Studies)                           */
/* -------------------------------------------------------------------------- */
.case-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.case-card.hidden-card {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}

/* -------------------------------------------------------------------------- */
/* 9. WORDPRESS PAGINATION STYLES                                             */
/* -------------------------------------------------------------------------- */
.wp-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 4rem;
}
.wp-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    min-width: 2.5rem;
    padding: 0 1rem;
    border-radius: 9999px;
    background-color: transparent;
    border: 1px solid rgba(150, 150, 150, 0.2);
    color: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    transition: all 0.3s ease;
    outline: none;
}
.wp-pagination .page-numbers:focus-visible {
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
}
.wp-pagination .page-numbers:hover {
    background-color: rgba(150, 150, 150, 0.1);
    border-color: rgba(150, 150, 150, 0.4);
}
.wp-pagination .page-numbers.current {
    background-color: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}
.wp-pagination .dots {
    border: none;
    background: transparent;
}

/* -------------------------------------------------------------------------- */
/* 10. EDITORIAL & LEGAL TYPOGRAPHY (.prose)                                  */
/* -------------------------------------------------------------------------- */
.prose-content, .prose-legal { color: var(--foreground); }
.prose-content h2, .prose-legal h2 { font-size: 2rem; font-weight: 800; letter-spacing: -0.025em; margin-top: 3rem; margin-bottom: 1.5rem; color: var(--foreground); }
.prose-content h3, .prose-legal h3 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; color: var(--foreground); }
.prose-content p, .prose-legal p { margin-bottom: 1.5rem; line-height: 1.8; font-size: 1.125rem; color: color-mix(in srgb, var(--foreground) 85%, transparent); }
.prose-content ul, .prose-legal ul, .prose-content ol { margin-bottom: 1.5rem; padding-left: 1.5rem; font-size: 1.125rem; line-height: 1.8; color: color-mix(in srgb, var(--foreground) 85%, transparent); }
.prose-content ul, .prose-legal ul { list-style-type: disc; }
.prose-content ol { list-style-type: decimal; }
.prose-content li, .prose-legal li { margin-bottom: 0.5rem; }
.prose-legal li::marker { color: var(--primary); }
.prose-content strong, .prose-legal strong { color: var(--foreground); font-weight: 700; }

.prose-content a, .prose-legal a {
    color: var(--primary); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--primary) 30%, transparent); text-underline-offset: 4px; transition: all 0.3s ease; padding: 0 2px; outline: none;
}
.prose-content a:hover, .prose-legal a:hover { color: var(--primary-deep); text-decoration-color: var(--primary-deep); background-color: color-mix(in srgb, var(--primary) 10%, transparent); border-radius: 4px; }
.prose-content a:focus-visible, .prose-legal a:focus-visible { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary); border-radius: 4px; }

.prose-content blockquote {
    border-left: 4px solid var(--primary); padding-left: 1.5rem; margin: 2rem 0; font-style: italic; font-size: 1.25rem; color: var(--foreground); background: color-mix(in srgb, var(--secondary) 30%, transparent); padding: 1.5rem; border-radius: 0 1rem 1rem 0;
}
.prose-content img { border-radius: 1.5rem; margin: 2.5rem 0; width: 100%; height: auto; border: 1px solid rgba(150,150,150,0.2); }
.prose-content figcaption { text-align: center; font-size: 0.875rem; color: color-mix(in srgb, var(--foreground) 60%, transparent); margin-top: 0.75rem; }

/* -------------------------------------------------------------------------- */
/* 11. CONTACT FORM 7 GLOBAL OVERRIDES                                        */
/* -------------------------------------------------------------------------- */
.jash-form-wrapper br, .newsletter-cf7-wrapper br, .jash-slide-form-wrapper br { display: none !important; }
.jash-form-wrapper p:empty, .newsletter-cf7-wrapper p:empty { display: none !important; }

/* Global Form Labels */
.jash-form-label { display: block !important; font-size: 0.875rem !important; font-weight: 600 !important; color: var(--foreground) !important; margin-bottom: 0.25rem !important; }
.jash-asterisk { color: var(--destructive); }

/* Standard Inputs & Textareas */
.wpcf7 .jash-custom-input, .wpcf7 .jash-custom-textarea, .wpcf7 .jash-custom-select, .jash-slide-input, .newsletter-cf7-wrapper input[type="email"] {
    width: 100% !important; background-color: var(--background) !important; border: 1px solid var(--border) !important; color: var(--foreground) !important; outline: none !important; transition: all 0.25s ease !important; margin: 0 !important; box-sizing: border-box !important;
}
.wpcf7 .jash-custom-input, .wpcf7 .jash-custom-select { height: 48px !important; border-radius: 12px !important; padding: 0 16px !important; font-size: 14px !important; margin-bottom: 4px !important; }
.wpcf7 .jash-custom-textarea { padding: 12px 16px !important; border-radius: 12px !important; font-size: 14px !important; margin-bottom: 4px !important; }
.jash-slide-input { height: 42px !important; border-radius: 12px !important; padding: 0 14px !important; font-size: 14px !important; }
.newsletter-cf7-wrapper input[type="email"] { height: 46px !important; border-radius: 0.75rem !important; padding: 0 1rem !important; font-size: 0.875rem !important; background-color: var(--card) !important; }

/* Input Focus States */
.wpcf7 .jash-custom-input:focus, .wpcf7 .jash-custom-textarea:focus, .wpcf7 .jash-custom-select:focus, .jash-slide-input:focus, .newsletter-cf7-wrapper input[type="email"]:focus {
    border-color: var(--primary) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent) !important;
}
.wpcf7 .jash-custom-input::placeholder, .wpcf7 .jash-custom-textarea::placeholder { color: var(--muted-foreground) !important; opacity: 0.6 !important; }

/* Standard Buttons */
.jash-custom-btn, .jash-slide-btn, .newsletter-cf7-wrapper input[type="submit"] {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: var(--primary) !important; color: #fff !important; font-weight: 700 !important; border: none !important; cursor: pointer !important; transition: all 0.25s ease !important; box-shadow: var(--shadow-glow) !important; box-sizing: border-box !important;
}
.jash-custom-btn { width: 100% !important; height: 52px !important; border-radius: 12px !important; font-size: 15px !important; margin-top: 12px !important; }
.jash-slide-btn { width: 100% !important; height: 42px !important; border-radius: 12px !important; font-size: 14px !important; padding: 0 20px !important; margin-top: 8px !important; }
.newsletter-cf7-wrapper input[type="submit"] { flex: 0 0 auto !important; height: 46px !important; border-radius: 0.75rem !important; font-size: 0.875rem !important; padding: 0 1.5rem !important; line-height: 1 !important; }

/* Button Hover States */
.jash-custom-btn:hover, .jash-slide-btn:hover { transform: translateY(-2px) !important; opacity: 0.95 !important; }
.newsletter-cf7-wrapper input[type="submit"]:hover { background-color: var(--primary-deep) !important; }

/* Loading State */
.wpcf7 form.submitting .jash-custom-btn, .wpcf7 form.submitting .jash-slide-btn, .wpcf7 form.submitting input[type="submit"] { opacity: 0.7 !important; cursor: wait !important; pointer-events: none !important; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Layout Adjustments */
.wpcf7-form-control-wrap { display: block !important; position: relative !important; }
.newsletter-cf7-wrapper .wpcf7 form p { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 0.5rem !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
.newsletter-cf7-wrapper .wpcf7-form-control-wrap { flex: 1 1 auto !important; display: block !important; width: 100% !important; margin: 0 !important; }

/* Validation & Responses */
.wpcf7-mail-sent-ok { display: none !important; }
.wpcf7-not-valid-tip { font-size: 12px !important; margin-top: 2px !important; color: var(--destructive) !important; font-weight: 600 !important; display: block !important; }
.wpcf7-response-output { border-radius: 8px !important; font-size: 13px !important; margin-top: 15px !important; padding: 10px !important; border: 1px solid var(--border) !important; background: var(--card) !important; color: var(--foreground) !important; display: block !important; }