/* Design Style System - Shared by demo.html and index.html */

/* ===== SWISS MINIMALIST ===== */
.style-swiss main * { letter-spacing: -0.01em; }
.style-swiss section:not(.hero-pattern) { border-radius: 0 !important; border: none !important; border-top: 1px solid rgba(0,0,0,0.1) !important; padding: 60px 0 !important; }
.style-swiss h1, .style-swiss h2, .style-swiss h3 { font-weight: 300; line-height: 1.1; margin: 0; letter-spacing: -0.03em; }
.style-swiss h1 { font-size: 3.5rem; }
.style-swiss #hero-logo, .style-swiss #nav-logo { background: none !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; }

.style-swiss .hero-pattern a[href="#contact"],
.style-swiss .hero-pattern a[href="#action"] { 
    border-radius: 0 !important; 
    border: 2px solid currentColor !important; 
    font-weight: 600; 
    padding: 14px 20px; 
    transition: all 0.2s; 
    box-shadow: none !important; 
}
.style-swiss .hero-pattern a[href="#contact"]:hover,
.style-swiss .hero-pattern a[href="#action"]:hover { 
    opacity: 0.8;
}

.style-swiss #hero-phone { 
    border-radius: 0 !important; 
    border: 2px solid currentColor !important; 
    font-weight: 600; 
    padding: 14px 20px; 
    transition: all 0.2s; 
    box-shadow: none !important; 
}
.style-swiss #hero-phone:hover { 
    opacity: 0.8;
}

.style-swiss section .bg-white { border: none !important; border-top: 1px solid rgba(0,0,0,0.1) !important; border-radius: 0 !important; box-shadow: none !important;}
.style-swiss section button:not(.demo-panel button) { border-radius: 0 !important; border: 1px solid currentColor !important; font-weight: 400; padding: 14px 20px; transition: all 0.2s; }
.style-swiss section button:not(.demo-panel button):hover { opacity: 0.8; }
.style-swiss section > .container { max-width: 1200px; }

/* ===== ANTI-DESIGN / IMPERFECT ===== */
.style-antidesign section:not(.hero-pattern) { transform: rotate(-0.5deg); border: 3px solid currentColor; border-radius: 0; }
.style-antidesign section .bg-white { transform: rotate(0.3deg); border: 2px dashed currentColor !important; box-shadow: 5px 5px 0 rgba(0,0,0,0.2) !important; }
.style-antidesign h2 { font-family: 'Courier New', monospace !important; text-decoration: underline wavy; }
.style-antidesign h1 { font-family: 'Courier New', monospace !important; position: relative; }
.style-antidesign section button:not(.demo-panel button) { border-radius: 0 !important; border: 3px solid currentColor !important; transform: skew(-2deg); box-shadow: 4px 4px 0 #ff6; font-weight: 700; }
.style-antidesign main img { filter: contrast(1.2) saturate(1.3); }

/* ===== BRUTALIST / BOLD BLOCKS ===== */
.style-brutalist section:not(.hero-pattern) { border: 4px solid currentColor !important; border-radius: 0 !important; box-shadow: 8px 8px 0 currentColor !important; }
.style-brutalist section .bg-white { border: 3px solid currentColor !important; border-radius: 0 !important; box-shadow: 6px 6px 0 currentColor !important; }
.style-brutalist h1, .style-brutalist h2, .style-brutalist h3 { font-weight: 900; text-transform: uppercase; letter-spacing: -1px; line-height: 0.9; }

/* Hero section buttons - consistent vertical alignment */
.style-brutalist .hero-pattern a[href="#contact"],
.style-brutalist .hero-pattern a[href="#action"],
.style-brutalist #hero-phone,
.style-brutalist .hero-pattern button,
.style-brutalist .hero-pattern a.cc_loylopen { 
    border: 4px solid currentColor !important; 
    border-radius: 0 !important; 
    font-weight: 900; 
    font-size: 18px; 
    padding: 20px 20px !important; 
    box-shadow: 6px 6px 0 rgba(0,0,0,0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.style-brutalist section button:not(.demo-panel button) { border: 4px solid currentColor !important; border-radius: 0 !important; font-weight: 900; font-size: 18px; padding: 20px 20px; box-shadow: 6px 6px 0 rgba(0,0,0,0.3); }
.style-brutalist .bg-purple-600, .style-brutalist .bg-purple-700 { filter: brightness(0.9) contrast(1.2); }

/* ===== MOTION & ANIMATIONS ===== */
.style-motion section:not(.hero-pattern) { transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.style-motion section:not(.hero-pattern):hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.style-motion section .bg-white { transition: all 0.3s ease; animation: float 3s ease-in-out infinite; }
.style-motion section .bg-white:hover { transform: scale(1.05) rotate(1deg); box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important; }
.style-motion section button:not(.demo-panel button) { transition: all 0.3s ease; position: relative; overflow: hidden; }
.style-motion section button:not(.demo-panel button):hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ===== ACTIVE SPORTS / OUTDOOR ===== */
.style-active section:not(.hero-pattern) { 
    position: relative;
    /* Let theme control background color - design style only adds shape/borders */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
    padding-bottom: 60px !important;
    border-left: 6px solid var(--theme-primary, #4a5568);
    box-shadow: 12px 12px 0 var(--theme-shadow, rgba(0, 0, 0, 0.1));
}

.style-active section .bg-white:not(button):not(a) { 
    /* Let theme control background and text color - design style only adds borders/transforms */
    border-left: 4px solid var(--theme-primary, #4a5568) !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 var(--theme-shadow, rgba(0, 0, 0, 0.1)) !important; 
    transform: skew(-2deg);
    transition: all 0.3s ease;
}
.style-active section .bg-white:not(button):not(a):hover {
    transform: skew(-2deg) translateX(4px);
    box-shadow: 12px 12px 0 var(--theme-shadow, rgba(0, 0, 0, 0.15)) !important;
}

.style-active h1 { 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 2px;
    line-height: 0.95;
    position: relative;
    display: inline-block;
}
.style-active h1::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100px;
    height: 6px;
    background: var(--theme-primary, #4a5568);
    transform: skew(-20deg);
}

.style-active h2, .style-active h3 { 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 1.5px;
    text-shadow: 2px 2px 0 var(--theme-shadow, rgba(0, 0, 0, 0.1));
}

.style-active section button:not(.demo-panel button),
.style-active .hero-pattern a[href="#contact"],
.style-active .hero-pattern a[href="#action"],
.style-active #hero-phone,
.style-active #action,
.style-active .faq-question {
    border-radius: 0 !important;
    border: 3px solid var(--theme-primary, #4a5568) !important;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 32px;
    box-shadow: 6px 6px 0 var(--theme-shadow, rgba(0, 0, 0, 0.15));
    transition: all 0.2s ease;
    transform: skew(-2deg);
    /* Use CSS variables so themes can override button colors */
    background: var(--active-sports-button-bg, white) !important;
    color: var(--active-sports-button-color, var(--theme-primary, #4a5568)) !important;
}

.style-active section button:not(.demo-panel button):hover,
.style-active .hero-pattern a[href="#contact"]:hover,
.style-active .hero-pattern a[href="#action"]:hover,
.style-active #action:hover,
.style-active .faq-question:hover {
    transform: skew(-2deg) translateX(2px) translateY(-2px);
    box-shadow: 8px 8px 0 var(--theme-shadow, rgba(0, 0, 0, 0.2));
}

/* Yext post read more buttons - ensure dark text */
.style-active .yext-post-card button,
.style-active .yext-post-card button * {
    color: #000 !important;
}