/* ==========================================================================
   THE WALK - STYLESHEET
   ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   01. Base & resets         - Global defaults, typography base
   02. Layout & geometry     - Structural classes, geometry clips
   03. Components            - Accordions, forms
   04. Utilities             - Gradients, brand patterns
   05. Vendor integrations   - Material icons, etc.
   ========================================================================== */

/* ==========================================================================
   01. BASE & RESETS
   ========================================================================== */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: proxima-nova, sans-serif;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    font-family: proxima-nova, sans-serif;
    font-weight: 800;
    letter-spacing: -0.025em;
    /* tracking-tight */
}

/* ==========================================================================
   02. LAYOUT & GEOMETRY
   ========================================================================== */
/* Symmetrical trapezoidal/mirrored transitions inspired by 'W' geometry */

/* Hero: flat top, bottom slopes right-to-left */
.hero-clip {
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}

/* Section 1 & 3: Top slopes right-to-left, Bottom slopes left-to-right (Mirrored) */
.section-1-clip,
.section-3-clip {
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%);
}

/* Section 2 & 4: Top slopes left-to-right, Bottom slopes right-to-left (Mirrored) */
.section-2-clip,
.section-4-clip {
    clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
}

/* CTA: Top slopes right-to-left, Bottom flat */
.cta-clip {
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
}

/* ==========================================================================
   03. COMPONENTS
   ========================================================================== */
/* Details and Accordions */
details>summary {
    list-style: none;
}

details>summary::-webkit-details-marker {
    display: none;
}

/* ==========================================================================
   04. UTILITIES
   ========================================================================== */
/* Gradients with Walk pattern */
.primary-gradient {
    background: linear-gradient(135deg, #a63b00 0%, #f26522 100%);
}

.hero-gradient {
    background: linear-gradient(90deg, #852882 0%, #f26522 100%);
}

.cta-gradient {
    background: linear-gradient(135deg, #47555b 0%, #9c867a 100%);
}

/* ==========================================================================
   05. VENDOR INTEGRATIONS
   ========================================================================== */
/* Material Icons */
.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}