/* Cardinals AI Training Presentation - Squarespace Custom CSS */

/* CSS Variables */
:root {
    --cardinals-red: #c41e3a;
    --cardinals-navy: #0c2340;
    --brand-gold: #FFC100;
}

/* Force full width and height for the presentation container */
.cardinals-presentation {
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Reset any Squarespace container constraints */
.cardinals-presentation * {
    box-sizing: border-box !important;
}

/* Base Slide Container */
.slide-container {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Animated Background */
.background-animation {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.hexagon {
    position: absolute !important;
    width: 60px !important;
    height: 60px !important;
    background: var(--brand-gold) !important;
    opacity: 0.1 !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    animation: float 20s infinite linear !important;
}

.hexagon:nth-child(1) { top: 10% !important; left: 10% !important; animation-delay: 0s !important; transform: scale(0.8) !important; }
.hexagon:nth-child(2) { top: 20% !important; right: 15% !important; animation-delay: -5s !important; transform: scale(1.2) !important; }
.hexagon:nth-child(3) { bottom: 30% !important; left: 20% !important; animation-delay: -10s !important; transform: scale(0.6) !important; }
.hexagon:nth-child(4) { bottom: 15% !important; right: 25% !important; animation-delay: -15s !important; transform: scale(1.0) !important; }
.hexagon:nth-child(5) { top: 40% !important; left: 50% !important; animation-delay: -8s !important; transform: scale(1.1) !important; }

@keyframes float {
    0% { transform: translateY(0px) rotate(0deg) !important; opacity: 0.1 !important; }
    50% { opacity: 0.3 !important; }
    100% { transform: translateY(-20px) rotate(360deg) !important; opacity: 0.1 !important; }
}

/* Glass Effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border-radius: 1.5rem !important;
}

.glass-dark {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Content Overlay */
.content-overlay {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 1rem !important;
}

/* Colors */
.cardinals-red { color: var(--cardinals-red) !important; }
.cardinals-navy { color: var(--cardinals-navy) !important; }
.brand-gold { color: var(--brand-gold) !important; }

/* Typography */
.responsive-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
}

.responsive-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.5rem) !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

.responsive-text {
    font-size: clamp(0.875rem, 2vw, 1rem) !important;
    line-height: 1.6 !important;
}

/* Grid */
.responsive-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
}

@media (min-width: 768px) {
    .responsive-grid { grid-template-columns: 1fr 1fr !important; gap: 3rem !important; }
    .content-overlay { padding: 2rem !important; }
}

@media (min-width: 1024px) {
    .content-overlay { padding: 3rem !important; }
    .responsive-grid { gap: 4rem !important; }
}

/* Cards */
.enhanced-card {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
    margin-bottom: 1rem !important;
}

.enhanced-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Timeline */
.timeline-item {
    border-left: 3px solid var(--cardinals-red) !important;
    padding-left: 1rem !important;
    margin-left: 1rem !important;
    position: relative !important;
    margin-bottom: 1rem !important;
}

.timeline-item::before {
    content: '' !important;
    position: absolute !important;
    left: -6px !important;
    top: 0 !important;
    width: 12px !important;
    height: 12px !important;
    background: var(--cardinals-red) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.3) !important;
}

/* Images */
.logo-image { width: clamp(60px, 8vw, 80px) !important; height: clamp(60px, 8vw, 80px) !important; }
.logo-small { width: clamp(40px, 6vw, 48px) !important; height: clamp(40px, 6vw, 48px) !important; }
.responsive-image { width: 100% !important; height: auto !important; max-width: 100% !important; object-fit: cover !important; }

/* Mobile */
@media (max-width: 767px) {
    .mobile-stack { flex-direction: column !important; }
    .mobile-center { text-align: center !important; }
    .mobile-spacing { margin-bottom: 1.5rem !important; }
    .slide-container { min-height: auto !important; padding: 2rem 0 !important; }
}

/* Backgrounds */
.slide-1-bg { background: linear-gradient(135deg, var(--cardinals-navy) 0%, #1e3a8a 25%, var(--cardinals-red) 75%, #dc2626 100%) !important; }
.slide-2-bg { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, var(--cardinals-navy) 75%, var(--cardinals-red) 100%) !important; }
.slide-3-bg { background: linear-gradient(135deg, var(--cardinals-navy) 0%, var(--cardinals-red) 100%) !important; }
.slide-4-bg { background: linear-gradient(135deg, #1e40af 0%, var(--cardinals-navy) 50%, var(--cardinals-red) 100%) !important; }
.slide-5-bg { background: linear-gradient(135deg, var(--cardinals-red) 0%, #dc2626 50%, var(--cardinals-navy) 100%) !important; }
.slide-6-bg { background: linear-gradient(135deg, #059669 0%, var(--cardinals-navy) 50%, var(--cardinals-red) 100%) !important; }
.slide-7-bg { background: linear-gradient(135deg, var(--brand-gold) 0%, #f59e0b 25%, var(--cardinals-red) 100%) !important; }
.slide-8-bg { background: linear-gradient(135deg, #7c3aed 0%, var(--cardinals-navy) 50%, var(--cardinals-red) 100%) !important; }
.slide-9-bg { background: linear-gradient(135deg, #dc2626 0%, var(--cardinals-red) 50%, var(--cardinals-navy) 100%) !important; }
.slide-10-bg { background: linear-gradient(135deg, var(--cardinals-navy) 0%, var(--brand-gold) 50%, var(--cardinals-red) 100%) !important; }

.animated-gradient {
    background-size: 400% 400% !important;
    animation: gradientShift 15s ease infinite !important;
}

@keyframes gradientShift {
    0% { background-position: 0% 50% !important; }
    50% { background-position: 100% 50% !important; }
    100% { background-position: 0% 50% !important; }
}

/* Navigation */
.slide-nav {
    position: fixed !important;
    bottom: 2rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 100 !important;
    display: flex !important;
    gap: 0.5rem !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 0.5rem !important;
    border-radius: 2rem !important;
    backdrop-filter: blur(10px) !important;
}

.slide-nav button {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.5) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.slide-nav button.active {
    background: var(--brand-gold) !important;
    transform: scale(1.2) !important;
}

.slide { display: none !important; }
.slide.active { display: flex !important; }

.success-metric {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Close button */
.close-presentation {
    position: fixed !important;
    top: 2rem !important;
    right: 2rem !important;
    z-index: 101 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    cursor: pointer !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(10px) !important;
}

.close-presentation:hover {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Utility classes */
.text-center { text-align: center !important; }
.font-bold { font-weight: 700 !important; }
.font-semibold { font-weight: 600 !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-8 { margin-top: 2rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-6 { padding: 1.5rem !important; }
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-xl { border-radius: 0.75rem !important; }
.space-y-2 > * + * { margin-top: 0.5rem !important; }
.space-y-3 > * + * { margin-top: 0.75rem !important; }
.space-y-4 > * + * { margin-top: 1rem !important; }
.space-y-6 > * + * { margin-top: 1.5rem !important; }
.space-y-8 > * + * { margin-top: 2rem !important; }
.space-x-2 > * + * { margin-left: 0.5rem !important; }
.space-x-3 > * + * { margin-left: 0.75rem !important; }
.space-x-4 > * + * { margin-left: 1rem !important; }
.flex { display: flex !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-6 { gap: 1.5rem !important; }
.gap-8 { gap: 2rem !important; }
.text-sm { font-size: 0.875rem !important; }
.text-base { font-size: 1rem !important; }
.text-lg { font-size: 1.125rem !important; }
.text-xl { font-size: 1.25rem !important; }
.text-2xl { font-size: 1.5rem !important; }
.text-3xl { font-size: 1.875rem !important; }
.text-4xl { font-size: 2.25rem !important; }
.opacity-80 { opacity: 0.8 !important; }
.opacity-90 { opacity: 0.9 !important; }
.w-8 { width: 2rem !important; }
.h-8 { height: 2rem !important; }
.w-16 { width: 4rem !important; }
.h-16 { height: 4rem !important; }
.bg-green-100 { background-color: #dcfce7 !important; }
.bg-blue-100 { background-color: #dbeafe !important; }
.bg-purple-100 { background-color: #f3e8ff !important; }
.bg-red-50 { background-color: #fef2f2 !important; }
.bg-blue-50 { background-color: #eff6ff !important; }
.bg-green-50 { background-color: #f0fdf4 !important; }
.bg-purple-50 { background-color: #faf5ff !important; }
.text-green-600 { color: #16a34a !important; }
.text-blue-600 { color: #2563eb !important; }
.text-purple-600 { color: #9333ea !important; }
.text-orange-600 { color: #ea580c !important; }
.text-green-700 { color: #15803d !important; }
.text-blue-700 { color: #1d4ed8 !important; }
.text-purple-700 { color: #7c2d12 !important; }
.text-gray-600 { color: #4b5563 !important; }
.text-gray-700 { color: #374151 !important; }
.text-green-300 { color: #86efac !important; }
.text-blue-300 { color: #93c5fd !important; }
.text-purple-300 { color: #c4b5fd !important; }
.text-yellow-300 { color: #fde047 !important; }
.border-l-4 { border-left-width: 4px !important; }
.border-red-500 { border-color: #ef4444 !important; }
.border-blue-500 { border-color: #3b82f6 !important; }
.border-green-500 { border-color: #22c55e !important; }
.border-purple-500 { border-color: #a855f7 !important; }
.border-t { border-top-width: 1px !important; }
.border-gray-200 { border-color: #e5e7eb !important; }
.max-w-3xl { max-width: 48rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.text-white { color: #ffffff !important; }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2) !important; }
.bg-green-500\/20 { background-color: rgba(34, 197, 94, 0.2) !important; }
.bg-yellow-400 { background-color: #facc15 !important; }
.text-black { color: #000000 !important; }

/* Responsive adjustments for mobile */
@media (max-width: 767px) {
    .grid-cols-2 { grid-template-columns: 1fr !important; }
    .grid-cols-3 { grid-template-columns: 1fr !important; }
    .grid-cols-4 { grid-template-columns: 1fr !important; }
    .responsive-grid { grid-template-columns: 1fr !important; }
}