/*
 * Web Summit Vancouver - Exact Reference Styles
 * Extracted from the original Next.js/React styled-components
 * This file contains ALL exact styles from the reference site
 */

/* ===================================
   CSS VARIABLES (EXACT FROM REFERENCE)
   =================================== */
:root {
    /* Brand Colors */
    --01-brand-accent: rgba(212, 60, 5, 1);
    --01-brand-primary: rgba(12, 20, 57, 1);
    --01-brand-secondary: rgba(10, 122, 166, 1);
    
    /* Core Neutrals */
    --02-core-00-white: rgba(255, 255, 255, 1);
    --02-core-50-palewhite: rgba(246, 246, 247, 1);
    --02-core-100-eeeeee: rgba(238, 238, 238, 1);
    --02-core-200-offwhite: rgba(229, 229, 229, 1);
    --02-core-300-d9d9d9: rgba(217, 217, 217, 1);
    --02-core-400-silver: rgba(204, 204, 204, 1);
    --02-core-500-lightgrey: rgba(146, 146, 147, 1);
    --02-core-600-grey: rgba(100, 100, 100, 1);
    --02-core-700-515151: rgba(81, 81, 81, 1);
    --02-core-800-darkgrey: rgba(51, 51, 51, 1);
    --02-core-900-offblack: rgba(19, 19, 19, 1);
    --02-core-1000-black: rgba(0, 0, 0, 1);
    --02-core-alpha: rgba(0, 0, 0, 0);
    
    /* Status Colors */
    --03-status-negative: rgba(213, 17, 59, 1);
    --03-status-neutral: rgba(100, 100, 100, 1);
    --03-status-positive: rgba(25, 135, 61, 1);
    --03-status-warning: rgba(255, 204, 0, 1);
    
    /* Support Colors */
    --04-support-blue: rgba(132, 174, 191, 1);
    --04-support-green: rgba(10, 122, 166, 1);
    --04-support-darkgreen: rgba(0, 132, 132, 1);
    --04-support-orange: rgba(242, 118, 73, 1);
    --04-support-pink: rgba(212, 60, 5, 1);
    --04-support-purple: rgba(2, 73, 89, 1);
    --04-support-rose: rgba(242, 236, 233, 1);
    --04-support-yellow: rgba(249, 156, 8, 1);
    
    /* Swatch Accent */
    --05-swatches-accent50: rgba(251, 232, 230, 1);
    --05-swatches-accent100: rgba(254, 202, 185, 1);
    --05-swatches-accent200: rgba(253, 168, 140, 1);
    --05-swatches-accent300: rgba(252, 134, 94, 1);
    --05-swatches-accent400: rgba(251, 107, 58, 1);
    --05-swatches-accent500: rgba(250, 80, 20, 1);
    --05-swatches-accent600: rgba(240, 74, 16, 1);
    --05-swatches-accent700: rgba(226, 67, 10, 1);
    --05-swatches-accent800: rgba(212, 60, 5, 1);
    --05-swatches-accent900: rgba(187, 46, 0, 1);
    
    /* Swatch Primary */
    --05-swatches-primary50: rgba(226, 227, 231, 1);
    --05-swatches-primary100: rgba(182, 185, 196, 1);
    --05-swatches-primary200: rgba(134, 138, 156, 1);
    --05-swatches-primary300: rgba(85, 91, 116, 1);
    --05-swatches-primary400: rgba(48, 55, 87, 1);
    --05-swatches-primary500: rgba(12, 20, 57, 1);
    --05-swatches-primary600: rgba(10, 18, 51, 1);
    --05-swatches-primary700: rgba(8, 2, 44, 1);
    --05-swatches-primary800: rgba(6, 11, 36, 1);
    --05-swatches-primary900: rgba(3, 6, 23, 1);
    
    /* Swatch Secondary */
    --05-swatches-secondary50: rgba(225, 245, 249, 1);
    --05-swatches-secondary100: rgba(180, 230, 241, 1);
    --05-swatches-secondary200: rgba(134, 213, 232, 1);
    --05-swatches-secondary300: rgba(91, 196, 224, 1);
    --05-swatches-secondary400: rgba(62, 183, 220, 1);
    --05-swatches-secondary500: rgba(35, 171, 217, 1);
    --05-swatches-secondary600: rgba(25, 158, 204, 1);
    --05-swatches-secondary700: rgba(10, 139, 185, 1);
    --05-swatches-secondary800: rgba(10, 122, 166, 1);
    --05-swatches-secondary900: rgba(0, 90, 133, 1);
}

/* ===================================
   BODY & BASE STYLES (EXACT)
   =================================== */
body {
    background-color: white;
    margin: 0;
    padding: 0;
    font-family: 'Inter', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.5rem;
}

/* ===================================
   TYPOGRAPHY (EXACT FROM REFERENCE)
   =================================== */
h1 {
    font-family: 'Inter', 'Verdana', serif;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -0.25px;
    line-height: 2.5rem;
    text-transform: normal;
}

@media only screen and (min-width: 36rem) {
    h1 {
        font-size: 2.5rem;
        letter-spacing: 0;
        line-height: 3rem;
    }
}

@media only screen and (min-width: 62rem) {
    h1 {
        font-size: 3.5rem;
        letter-spacing: 0;
        line-height: 4.0625rem;
    }
}

h2 {
    font-family: 'Inter', 'Verdana', serif;
    font-weight: 600;
    font-size: 1.75rem;
    letter-spacing: 0;
    line-height: 2.25rem;
    text-transform: normal;
}

@media only screen and (min-width: 36rem) {
    h2 {
        font-size: 2rem;
        letter-spacing: 0;
        line-height: 2.5rem;
    }
}

@media only screen and (min-width: 62rem) {
    h2 {
        font-size: 2.5rem;
        letter-spacing: 0.25px;
        line-height: 3rem;
    }
}

h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.75rem;
    letter-spacing: 0.25px;
    line-height: 2.25rem;
}

@media only screen and (min-width: 36rem) {
    h3 {
        font-size: 1.75rem;
        letter-spacing: 0.25px;
        line-height: 2.25rem;
    }
}

@media only screen and (min-width: 62rem) {
    h3 {
        font-size: 2.0625rem;
        letter-spacing: 0.25px;
        line-height: 2.5rem;
    }
}

h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 2rem;
}

@media only screen and (min-width: 36rem) {
    h4 {
        font-size: 1.5rem;
        letter-spacing: 0;
        line-height: 2rem;
    }
}

@media only screen and (min-width: 62rem) {
    h4 {
        font-size: 1.625rem;
        letter-spacing: 0.15px;
        line-height: 2rem;
    }
}

h5 {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.1875rem;
    letter-spacing: 0.15px;
    line-height: 1.5rem;
}

@media only screen and (min-width: 36rem) {
    h5 {
        font-size: 1.1875rem;
        letter-spacing: 0.15px;
        line-height: 1.5rem;
    }
}

@media only screen and (min-width: 62rem) {
    h5 {
        font-size: 1.1875rem;
        letter-spacing: 0.15px;
        line-height: 1.5rem;
    }
}

h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.5rem;
}

@media only screen and (min-width: 36rem) {
    h6 {
        font-size: 1rem;
        letter-spacing: 0;
        line-height: 1.5rem;
    }
}

@media only screen and (min-width: 62rem) {
    h6 {
        font-size: 1rem;
        letter-spacing: 0;
        line-height: 1.5rem;
    }
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
}

p a, p a:visited {
    color: inherit;
}

/* ===================================
   BUTTONS (EXACT STYLED-COMPONENTS)
   =================================== */
.btn-primary-ws {
    font-family: 'Inter', serif;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    line-height: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(12, 20, 57, 1);
    cursor: pointer;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(12, 20, 57, 1);
    border-radius: 0.25rem;
    padding: 1rem 1.5rem;
    text-decoration: none;
    transition: 0.25s ease-out;
}

@media only screen and (min-width: 48rem) {
    .btn-primary-ws {
        width: auto;
        display: inline-flex;
    }
}

.btn-primary-ws i {
    display: block;
}

.btn-primary-ws span {
    white-space: nowrap;
}

.btn-primary-ws:hover {
    border: 1px solid rgba(3, 6, 23, 1);
    background-color: rgba(3, 6, 23, 1);
    color: rgba(255, 255, 255, 1);
}

.btn-primary-ws:focus {
    outline: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 1);
}

.btn-primary-ws:disabled {
    background-color: rgba(238, 238, 238, 1);
    color: rgba(100, 100, 100, 1);
    border-color: rgba(229, 229, 229, 1);
    cursor: not-allowed;
    pointer-events: none;
}

.btn-accent-ws {
    font-family: 'Inter', serif;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    line-height: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 60, 5, 1);
    cursor: pointer;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(212, 60, 5, 1);
    border-radius: 0.25rem;
    padding: 1rem 1.5rem;
    text-decoration: none;
    transition: 0.25s ease-out;
}

@media only screen and (min-width: 48rem) {
    .btn-accent-ws {
        width: auto;
        display: inline-flex;
    }
}

.btn-accent-ws i {
    display: block;
}

.btn-accent-ws span {
    white-space: nowrap;
}

.btn-accent-ws:hover {
    border: 1px solid rgba(226, 67, 10, 1);
    background-color: rgba(226, 67, 10, 1);
    color: rgba(255, 255, 255, 1);
}

.btn-accent-ws:focus {
    outline: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 1);
}

.btn-accent-ws:disabled {
    background-color: rgba(238, 238, 238, 1);
    color: rgba(100, 100, 100, 1);
    border-color: rgba(229, 229, 229, 1);
    cursor: not-allowed;
    pointer-events: none;
}

.btn-secondary-ws {
    font-family: 'Inter', serif;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    line-height: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(10, 122, 166, 1);
    cursor: pointer;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(10, 122, 166, 1);
    border-radius: 0.25rem;
    padding: 1rem 1.5rem;
    text-decoration: none;
    transition: 0.25s ease-out;
}

@media only screen and (min-width: 48rem) {
    .btn-secondary-ws {
        width: auto;
        display: inline-flex;
    }
}

.btn-secondary-ws i {
    display: block;
    color: rgba(255, 255, 255, 1);
}

.btn-secondary-ws span {
    white-space: nowrap;
}

.btn-secondary-ws:hover {
    border: 1px solid rgba(0, 90, 133, 1);
    background-color: rgba(0, 90, 133, 1);
    color: rgba(255, 255, 255, 1);
}

.btn-secondary-ws:focus {
    outline: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 1);
}

.btn-secondary-ws:disabled {
    background-color: rgba(238, 238, 238, 1);
    color: rgba(100, 100, 100, 1);
    border-color: rgba(229, 229, 229, 1);
    cursor: not-allowed;
    pointer-events: none;
}

.btn-secondary-ws:disabled i {
    color: rgba(100, 100, 100, 1);
}

/* ===================================
   CONTAINER & LAYOUT (EXACT)
   =================================== */
.container-ws {
    max-width: 86rem;
    margin: 0 auto;
    padding: 0 1rem;
}

@media only screen and (min-width: 48rem) {
    .container-ws {
        padding: 0 0;
    }
}

.container-ws-narrow {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1rem;
}

@media only screen and (min-width: 48rem) {
    .container-ws-narrow {
        max-width: 46.875rem;
        padding: 0 1rem;
    }
}

@media only screen and (min-width: 62rem) {
    .container-ws-narrow {
        max-width: 64rem;
    }
}

/* ===================================
   SECTIONS (EXACT SPACING)
   =================================== */
.section-ws {
    padding: 3rem 0;
}

@media only screen and (min-width: 48rem) {
    .section-ws {
        padding: 4rem 0;
    }
}

@media only screen and (min-width: 62rem) {
    .section-ws {
        padding: 5rem 0;
    }
}

.section-ws-lg {
    padding: 4rem 0;
}

@media only screen and (min-width: 48rem) {
    .section-ws-lg {
        padding: 5rem 0;
    }
}

@media only screen and (min-width: 62rem) {
    .section-ws-lg {
        padding: 7rem 0;
    }
}

.section-ws-sm {
    padding: 2rem 0;
}

@media only screen and (min-width: 48rem) {
    .section-ws-sm {
        padding: 3rem 0;
    }
}

@media only screen and (min-width: 62rem) {
    .section-ws-sm {
        padding: 4rem 0;
    }
}

/* Background Colors */
.bg-ws-white {
    background-color: rgba(255, 255, 255, 1);
}

.bg-ws-palewhite {
    background-color: rgba(246, 246, 247, 1);
}

.bg-ws-primary {
    background-color: rgba(12, 20, 57, 1);
    color: rgba(255, 255, 255, 1);
}

.bg-ws-accent {
    background-color: rgba(212, 60, 5, 1);
    color: rgba(255, 255, 255, 1);
}

.bg-ws-secondary {
    background-color: rgba(10, 122, 166, 1);
    color: rgba(255, 255, 255, 1);
}

/* Text Colors */
.text-ws-primary {
    color: rgba(12, 20, 57, 1);
}

.text-ws-accent {
    color: rgba(212, 60, 5, 1);
}

.text-ws-secondary {
    color: rgba(10, 122, 166, 1);
}

.text-ws-grey {
    color: rgba(100, 100, 100, 1);
}

.text-ws-darkgrey {
    color: rgba(51, 51, 51, 1);
}

/* ===================================
   HERO SECTIONS (EXACT)
   =================================== */
.hero-ws {
    background-color: rgba(12, 20, 57, 1);
    color: rgba(255, 255, 255, 1);
    padding: 3rem 0;
    text-align: center;
}

@media only screen and (min-width: 48rem) {
    .hero-ws {
        padding: 4rem 0;
    }
}

@media only screen and (min-width: 62rem) {
    .hero-ws {
        padding: 5rem 0 6rem 0;
    }
}

.hero-ws h1 {
    margin-bottom: 1.5rem;
}

.hero-ws .lead {
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-bottom: 2rem;
}

@media only screen and (min-width: 48rem) {
    .hero-ws .lead {
        font-size: 1.25rem;
        line-height: 2rem;
    }
}

/* ===================================
   CARDS (EXACT WEB SUMMIT STYLE)
   =================================== */
.card-ws {
    background: rgba(255, 255, 255, 1);
    border-radius: 0.5rem;
    border: 1px solid rgba(229, 229, 229, 1);
    padding: 2rem;
    transition: all 0.3s ease;
}

.card-ws:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.card-ws-header {
    background-color: rgba(12, 20, 57, 1);
    color: rgba(255, 255, 255, 1);
    padding: 1.5rem 2rem;
    border-radius: 0.5rem 0.5rem 0 0;
    margin: -2rem -2rem 2rem -2rem;
}

/* ===================================
   BADGE STYLES (EXACT)
   =================================== */
.badge-ws {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.badge-ws-primary {
    background-color: rgba(12, 20, 57, 1);
    color: rgba(255, 255, 255, 1);
}

.badge-ws-accent {
    background-color: rgba(212, 60, 5, 1);
    color: rgba(255, 255, 255, 1);
}

.badge-ws-secondary {
    background-color: rgba(10, 122, 166, 1);
    color: rgba(255, 255, 255, 1);
}

.badge-ws-light {
    background-color: rgba(246, 246, 247, 1);
    color: rgba(12, 20, 57, 1);
}

.badge-ws-warning {
    background-color: rgba(255, 204, 0, 1);
    color: rgba(19, 19, 19, 1);
}

.badge-ws-success {
    background-color: rgba(25, 135, 61, 1);
    color: rgba(255, 255, 255, 1);
}

/* ===================================
   UTILITIES (EXACT)
   =================================== */
.shadow-ws {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.shadow-ws-lg {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.rounded-ws {
    border-radius: 0.5rem;
}

.rounded-ws-sm {
    border-radius: 0.25rem;
}

.rounded-ws-lg {
    border-radius: 0.75rem;
}

/* Spacing Utilities */
.mb-ws-1 { margin-bottom: 0.5rem; }
.mb-ws-2 { margin-bottom: 1rem; }
.mb-ws-3 { margin-bottom: 1.5rem; }
.mb-ws-4 { margin-bottom: 2rem; }
.mb-ws-5 { margin-bottom: 3rem; }

.mt-ws-1 { margin-top: 0.5rem; }
.mt-ws-2 { margin-top: 1rem; }
.mt-ws-3 { margin-top: 1.5rem; }
.mt-ws-4 { margin-top: 2rem; }
.mt-ws-5 { margin-top: 3rem; }

.pt-ws-1 { padding-top: 0.5rem; }
.pt-ws-2 { padding-top: 1rem; }
.pt-ws-3 { padding-top: 1.5rem; }
.pt-ws-4 { padding-top: 2rem; }
.pt-ws-5 { padding-top: 3rem; }

.pb-ws-1 { padding-bottom: 0.5rem; }
.pb-ws-2 { padding-bottom: 1rem; }
.pb-ws-3 { padding-bottom: 1.5rem; }
.pb-ws-4 { padding-bottom: 2rem; }
.pb-ws-5 { padding-bottom: 3rem; }

/* ===================================
   RESPONSIVE VISIBILITY
   =================================== */
.d-ws-mobile-only {
    display: block;
}

@media only screen and (min-width: 48rem) {
    .d-ws-mobile-only {
        display: none;
    }
}

.d-ws-desktop-only {
    display: none;
}

@media only screen and (min-width: 48rem) {
    .d-ws-desktop-only {
        display: block;
    }
}

/* ===================================
   TRANSITIONS & ANIMATIONS
   =================================== */
.transition-ws {
    transition: all 0.25s ease-out;
}

.transition-ws-fast {
    transition: all 0.15s ease-out;
}

.transition-ws-slow {
    transition: all 0.5s ease-out;
}

/* Hover Lift Effect */
.hover-lift-ws {
    transition: all 0.3s ease;
}

.hover-lift-ws:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* ===================================
   FORMS (EXACT STYLING)
   =================================== */
.form-control-ws {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 0.3125rem;
    transition: all 0.2s ease;
}

.form-control-ws:focus {
    outline: none;
    border-color: rgba(12, 20, 57, 1);
    box-shadow: 0 0 0 3px rgba(12, 20, 57, 0.1);
}

.form-control-ws::placeholder {
    color: rgba(146, 146, 147, 1);
}

.form-label-ws {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 0.5rem;
}

/* ===================================
   OVERRIDE BOOTSTRAP TO MATCH WS
   =================================== */
.btn-primary {
    background-color: rgba(12, 20, 57, 1);
    border-color: rgba(12, 20, 57, 1);
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 0.75rem 1.5rem;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: rgba(3, 6, 23, 1);
    border-color: rgba(3, 6, 23, 1);
}

.btn-danger {
    background-color: rgba(212, 60, 5, 1);
    border-color: rgba(212, 60, 5, 1);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: rgba(226, 67, 10, 1);
    border-color: rgba(226, 67, 10, 1);
}

.btn-info {
    background-color: rgba(10, 122, 166, 1);
    border-color: rgba(10, 122, 166, 1);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: rgba(0, 90, 133, 1);
    border-color: rgba(0, 90, 133, 1);
}

.bg-light {
    background-color: rgba(246, 246, 247, 1) !important;
}

.text-muted {
    color: rgba(100, 100, 100, 1) !important;
}

/* ===================================
   LINK STYLES (EXACT)
   =================================== */
a {
    color: rgba(12, 20, 57, 1);
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover {
    color: rgba(212, 60, 5, 1);
}

a:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(12, 20, 57, 0.2);
    border-radius: 0.125rem;
}

/* ===================================
   PAGE-SPECIFIC OVERRIDES
   =================================== */

/* Hero Sections */
.hero-section {
    background-color: rgba(12, 20, 57, 1);
    color: rgba(255, 255, 255, 1);
}

/* Content Sections */
.content-section {
    background-color: rgba(255, 255, 255, 1);
}

.content-section-alt {
    background-color: rgba(246, 246, 247, 1);
}

/* CTA Sections */
.cta-section {
    background-color: rgba(12, 20, 57, 1);
    color: rgba(255, 255, 255, 1);
}

/* ===================================
   RESPONSIVE IMAGE HANDLING
   =================================== */
img {
    max-width: 100%;
    height: auto;
}

.img-ws-responsive {
    width: 100%;
    height: auto;
    display: block;
}

.img-ws-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-ws-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}