/* ==========================================================================
   INDEX BASE
   Reset, typography, and base styles for index.html
   ========================================================================== */

/* ==========================================================================
   CSS RESET
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    min-height: 100%;
}

body {
    font-family: var(--index-font-primary) !important;
    line-height: 1.6 !important;
    color: var(--index-charcoal) !important;
    background: linear-gradient(135deg, var(--index-cream) 0%, #F9F3EB 100%) !important;
    overflow-x: hidden !important;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--index-font-serif) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--index-charcoal) !important;
    margin-bottom: 1rem !important;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4.2rem) !important;
    letter-spacing: -0.02em !important;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    letter-spacing: -0.01em !important;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
}

h4 {
    font-size: 1.4rem !important;
}

h5 {
    font-size: 1.2rem !important;
}

h6 {
    font-size: 1rem !important;
}

p {
    margin-bottom: 1.5rem !important;
    line-height: 1.7 !important;
    color: rgba(44, 38, 37, 0.9) !important;
}

/* ==========================================================================
   ANIMATION FIXES & DEBUG
   ========================================================================== */

/* Fix for animation issues - make sure elements are visible */
.fade-in-up {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.hover-lift {
    opacity: 1 !important;
}

/* DEBUG: Force visibility */
.hero-content {
    display: block !important;
    visibility: visible !important;
}

.hero-main {
    display: block !important;
    visibility: visible !important;
}

.hero-benefits-grid {
    display: grid !important;
    visibility: visible !important;
}

.benefit-card {
    display: block !important;
    visibility: visible !important;
}

.container {
    display: block !important;
    visibility: visible !important;
}

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.container {
    max-width: var(--index-container-max);
    margin: 0 auto;
    padding: 0 var(--index-container-padding);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.section {
    padding: 3.5rem 2.3rem 3rem 1.8rem;
    position: relative;
}

.section:nth-child(even) {
    background: var(--index-primary-05);
}

/* Override section padding for path sections */
.path-section.section {
    padding: 0.5rem 2rem 4rem 2rem !important;
}