/**
 * Manus Site Exact Styling Override
 * This file ensures WordPress theme matches Manus site exactly
 * Loaded last to override any parent theme conflicts
 */

/* ============================================
   FULL-WIDTH PAGES
   ============================================ */
.kp-hero,
.kp-questions,
.kp-cta-section,
.kp-ministry-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Container inside sections maintains readable width */
.kp-hero .container,
.kp-questions .container,
.kp-cta-section .container,
.kp-ministry-section .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

/* ============================================
   FONTS - EXACT MATCH
   ============================================ */
body,
body *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.kp-nav-logo-text,
.kp-hero h2,
.kp-cta h3,
.kp-ministry-section h3,
.kp-questions h3 {
    font-family: 'Manrope', Georgia, serif !important;
    font-weight: 700 !important;
}

/* Ensure body text is readable, not typewriter-like */
body {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #1a1a2e !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Fix any monospace/code font issues */
input, textarea, select, button {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Ensure correct color variables */
:root {
    --kp-purple: #7c3aed !important;
    --kp-purple-dark: #6b21a8 !important;
    --kp-yellow: #facc15 !important;
    --kp-text: #1a1a2e !important;
    --kp-cream: #faf8f3 !important;
}

/* ============================================
   REMOVE ALL UNDERLINES
   ============================================ */
a,
.kp-btn,
.kp-btn-primary,
.kp-btn-outline,
.kp-btn-green {
    text-decoration: none !important;
}

a:hover,
.kp-btn:hover,
.kp-btn-primary:hover,
.kp-btn-outline:hover,
.kp-btn-green:hover {
    text-decoration: none !important;
}

/* ============================================
   HERO SECTION
   ============================================ */
.kp-hero h2 {
    font-size: 3.5rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important;
}

.kp-hero h2 span {
    color: #7c3aed !important;
}

/* ============================================
   COMMUNITY CTA - GREEN BUTTON
   ============================================ */
.kp-btn-green {
    background-color: #22c55e !important;
    color: #000 !important;
    border: none !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.kp-btn-green:hover {
    background-color: #16a34a !important;
    color: #000 !important;
    text-decoration: none !important;
}

/* Community CTA heading */
.kp-cta-section h3,
.kp-cta h3 {
    font-size: 3rem !important;
    line-height: 1.2 !important;
}

/* Got Questions heading - match CTA size */
.kp-questions h3 {
    font-size: 3rem !important;
    line-height: 1.2 !important;
}

/* Responsive heading sizes */
@media (min-width: 768px) {
    .kp-questions h3,
    .kp-cta h3,
    .kp-cta-section h3 {
        font-size: 3.5rem !important;
    }
}

@media (min-width: 1024px) {
    .kp-questions h3,
    .kp-cta h3,
    .kp-cta-section h3 {
        font-size: 4rem !important;
    }
}

.kp-cta-section h3 span {
    color: #facc15 !important;
}

/* ============================================
   GOT QUESTIONS - CARD STYLING
   ============================================ */
.kp-questions {
    background: #faf8f3 !important;
}

.kp-questions-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 2rem !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

.kp-questions-input-wrap {
    display: flex !important;
    gap: 0.75rem !important;
    align-items: center !important;
    margin-bottom: 0 !important;
}

.kp-questions-input {
    flex: 1 !important;
    padding: 1rem 1.5rem !important;
    padding-right: 1.5rem !important;
    font-size: 1rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #f3f4f6 !important;
    outline: none !important;
    transition: all 0.2s !important;
    font-family: 'Manrope', sans-serif !important;
}

.kp-questions-input:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
    background: #ffffff !important;
}

.kp-questions-input::placeholder {
    color: #9ca3af !important;
}

#kp-qa-submit {
    padding: 1rem 1.75rem !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
    background: #7c3aed !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

#kp-qa-submit:hover {
    background: #6d28d9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3) !important;
}

.kp-questions-try {
    margin-top: 1.5rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid #e5e7eb !important;
}

.kp-questions-try p {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    margin-bottom: 0.75rem !important;
    font-weight: 400 !important;
    display: block !important;
}

.kp-questions-samples {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.kp-questions-sample {
    display: inline-block !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    background: #ffffff !important;
    border: 1px solid rgba(124, 58, 237, 0.3) !important;
    border-radius: 9999px !important;
    color: #7c3aed !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-family: 'Manrope', sans-serif !important;
}

.kp-questions-sample:hover {
    background: rgba(124, 58, 237, 0.05) !important;
    border-color: rgba(124, 58, 237, 0.4) !important;
}

/* ============================================
   MINISTRY CARDS - PURPLE BACKGROUND
   ============================================ */
.kp-ministry-section {
    background: linear-gradient(135deg, #6b21a8 0%, #7c3aed 100%) !important;
    padding: 4rem 0 !important;
}

.kp-ministry-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    margin-top: 2rem !important;
}

.kp-ministry-card {
    background: rgba(243, 232, 255, 0.95) !important;
    border-radius: 1rem !important;
    padding: 2rem !important;
    transition: transform 0.2s !important;
}

.kp-ministry-card:hover {
    transform: translateY(-4px) !important;
}

.kp-ministry-card-icon {
    width: 3.5rem !important;
    height: 3.5rem !important;
    border-radius: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* Prayer Wall - Pink with white outlined heart */
.kp-ministry-card-icon.icon-prayer {
    background: #ec4899 !important;
    color: #fff !important;
}

/* Podcast - Purple */
.kp-ministry-card-icon.icon-podcast {
    background: #7c3aed !important;
    color: #fff !important;
}

/* Blog - Blue */
.kp-ministry-card-icon.icon-blog {
    background: #3b82f6 !important;
    color: #fff !important;
}

/* Community - Teal */
.kp-ministry-card-icon.icon-community {
    background: #14b8a6 !important;
    color: #fff !important;
}

/* Support - Orange */
.kp-ministry-card-icon.icon-support {
    background: #f97316 !important;
    color: #fff !important;
}

/* Bible - Cyan */
.kp-ministry-card-icon.icon-bible {
    background: #06b6d4 !important;
    color: #fff !important;
}

.kp-ministry-card h4 {
    color: #1a1a2e !important;
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
}

.kp-ministry-card p {
    color: #4a5568 !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
}

.kp-ministry-card a {
    color: #7c3aed !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.kp-ministry-card a:hover {
    color: #6b21a8 !important;
    text-decoration: none !important;
}

/* ============================================
   BUTTON STYLES
   ============================================ */
.kp-btn-primary {
    background: #7c3aed !important;
    color: #ffffff !important;
    font-family: 'Manrope', sans-serif !important;
    text-decoration: none !important;
}

.kp-btn-primary:hover {
    background: #6d28d9 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.kp-btn-outline {
    background: transparent !important;
    border: 2px solid #1a1a2e !important;
    color: #1a1a2e !important;
    text-decoration: none !important;
}

.kp-btn-outline:hover {
    background: #1a1a2e !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .kp-hero h2 {
        font-size: 2.5rem !important;
    }
    
    .kp-cta-section h3 {
        font-size: 2rem !important;
    }
    
    .kp-ministry-grid {
        grid-template-columns: 1fr !important;
    }
    
    .kp-questions-card {
        padding: 1.5rem !important;
    }
    
    .kp-questions-input-wrap {
        flex-direction: column !important;
    }
    
    #kp-qa-submit {
        width: 100% !important;
    }
}

/* Ensure proper text rendering */
* {
    text-rendering: optimizeLegibility !important;
}

/* ============================================
   FULL-SCREEN LAYOUT
   ============================================ */
html, body {
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   NAVIGATION - SINGLE LINE LAYOUT
   ============================================ */
.kp-nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2rem !important;
}

.kp-nav-logo {
    flex-shrink: 0 !important;
    text-decoration: none !important;
}

.kp-nav-logo-text {
    text-decoration: none !important;
}

.kp-nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 2rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
    justify-content: center !important;
}

.kp-nav-links li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kp-nav-links a {
    color: var(--kp-text) !important;
    font-weight: 500 !important;
    font-size: 0.9375rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.kp-nav-links a:hover {
    color: var(--kp-purple) !important;
}

/* Give & Tithe button styling */
.kp-nav-links .kp-nav-give,
.kp-nav-links a[href*="/give/"] {
    background: var(--kp-purple) !important;
    color: #fff !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.kp-nav-links .kp-nav-give:hover,
.kp-nav-links a[href*="/give/"]:hover {
    background: var(--kp-purple-dark) !important;
    color: #fff !important;
}

/* Hide hamburger on desktop */
.kp-hamburger {
    display: none !important;
}

/* Mobile responsive */
@media (max-width: 1024px) {
    .kp-nav-links {
        display: none !important;
    }
    
    .kp-hamburger {
        display: block !important;
    }
}