/* ============================================================
   COLUMBIA MICROLEARNING — PROFESSIONAL COMPASS
   microlearning.columbia.ca
   File: professional-compass.css
   Load via: functions.php (see enqueue snippet)

   Styles for the Professional Compass assessment tool.
   Theme agnostic — identical to Kadence version.
   One syntax error from original fixed: letter-spacing in
   #gform_wrapper_2 submit button was missing its value.
============================================================ */


/* ── Pillar headers ────────────────────────────────────────── */

.cp-pillar-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 6px !important;
    margin-top: 24px !important;
}

.cp-pillar-header > * + * {
    margin-left: 8px !important;
}

.cp-pillar-number {
    font-family: "Raleway", Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    letter-spacing: 2px !important;
    color: #A0A2A4 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.cp-pillar-title {
    font-family: "Raleway", Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    color: #003258 !important;
}

.cp-header-spacer {
    flex: 1 !important;
}


/* ── Info button ───────────────────────────────────────────── */

.gform_wrapper .cp-info-btn,
.cp-info-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 50% !important;
    border: 1.5px solid #A0A2A4 !important;
    background: transparent !important;
    color: #A0A2A4 !important;
    font-family: "Raleway", Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

.gform_wrapper .cp-info-btn:hover,
.cp-info-btn:hover {
    background: #D12329 !important;
    border-color: #D12329 !important;
    color: #fff !important;
}


/* ── Score badge ───────────────────────────────────────────── */

.gform_wrapper .cp-score-badge,
.cp-score-badge {
    display: inline-block !important;
    font-family: "Raleway", Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    color: #fff !important;
    background-color: #D12329 !important;
    white-space: nowrap !important;
    transition: background-color 0.2s !important;
}

.cp-pillar-idea {
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 13px !important;
    color: #666 !important;
    margin-bottom: 18px !important;
}


/* ── Slider ────────────────────────────────────────────────── */

.gform_wrapper .cp-slider,
.cp-slider,
input[type="range"].cp-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 8px !important;
    border-radius: 4px !important;
    outline: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Slider background controlled entirely by compass-slider.js */
.gform_wrapper.gravity-theme input[type="range"].cp-slider,
.gform_wrapper input[type="range"].cp-slider {
    /* background intentionally omitted — set by compass-slider.js */
}

.gform_wrapper .cp-slider::-webkit-slider-thumb,
.cp-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: #003258 !important;
    border: 3px solid #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    cursor: pointer !important;
}

.gform_wrapper .cp-slider::-moz-range-thumb,
.cp-slider::-moz-range-thumb {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: #003258 !important;
    border: 3px solid #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    cursor: pointer !important;
}

.gform_wrapper .cp-slider::-moz-range-track,
.cp-slider::-moz-range-track {
    height: 8px !important;
    border-radius: 4px !important;
    background: #e0e0e0 !important;
    border: none !important;
}

.cp-score-label {
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 12px !important;
    color: #666 !important;
    font-style: italic !important;
    text-align: right !important;
    margin-top: 6px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid #e8e8e8 !important;
}


/* ── CTA / landing ─────────────────────────────────────────── */

.cp-almost-photo {
    width: 110px !important;
    height: 110px !important;
    min-width: 110px !important;
}

.cp-landing-cta a:hover,
a.cp-begin-btn:hover {
    opacity: 0.82 !important;
    background: #D12329 !important;
    color: #fff !important;
}

.cp-res-course-cta:hover,
.cp-res-summary-cta:hover {
    background: #D12329 !important;
    color: #fff !important;
    opacity: 0.85 !important;
}


/* ── Modal ─────────────────────────────────────────────────── */

.cp-modal-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,50,88,0.72) !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.cp-modal-overlay.cp-open {
    display: flex !important;
}

.cp-modal {
    background: #fff !important;
    border-radius: 10px !important;
    max-width: 480px !important;
    width: 100% !important;
    padding: 36px 32px 28px !important;
    position: relative !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
    animation: cpModalIn 0.2s ease !important;
}

@keyframes cpModalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cp-modal-pill {
    display: inline-block !important;
    font-family: "Raleway", Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    background: #D12329 !important;
    color: #fff !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    margin-bottom: 12px !important;
}

.cp-modal h3 {
    font-family: "Raleway", Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    color: #003258 !important;
    margin: 0 0 14px !important;
    line-height: 1.25 !important;
}

.cp-modal p {
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #333 !important;
    margin: 0 0 20px !important;
}

.cp-modal-close {
    display: inline-block !important;
    font-family: "Raleway", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #fff !important;
    background: #003258 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 9px 22px !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    box-shadow: none !important;
}

.cp-modal-close:hover {
    background: #D12329 !important;
}

.cp-modal-x {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    background: none !important;
    border: none !important;
    font-size: 20px !important;
    color: #A0A2A4 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 4px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.cp-modal-x:hover {
    color: #D12329 !important;
    background: none !important;
}


/* ── Form 2 — Register Your Interest (dark background) ──────── */

#gform_wrapper_2 {
    background: transparent !important;
}

#gform_wrapper_2 .gfield_label,
#gform_wrapper_2 .gform-field-label,
#gform_wrapper_2 legend.gfield_label {
    color: rgba(255,255,255,0.75) !important;
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

#gform_wrapper_2 input[type="text"],
#gform_wrapper_2 input[type="email"],
#gform_wrapper_2 select,
#gform_wrapper_2 textarea {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
}

#gform_wrapper_2 input[type="text"]:focus,
#gform_wrapper_2 input[type="email"]:focus,
#gform_wrapper_2 select:focus,
#gform_wrapper_2 textarea:focus {
    border-color: #D12329 !important;
    outline: none !important;
    background: rgba(255,255,255,0.12) !important;
}

#gform_wrapper_2 input::placeholder,
#gform_wrapper_2 textarea::placeholder {
    color: rgba(255,255,255,0.35) !important;
}

#gform_wrapper_2 select option {
    background: #003258 !important;
    color: #fff !important;
}

#gform_wrapper_2 .gform-field-label--type-sub {
    color: rgba(255,255,255,0.4) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

#gform_wrapper_2 .gfield_description {
    color: rgba(255,255,255,0.45) !important;
    font-size: 12px !important;
    font-style: italic !important;
}

#gform_wrapper_2 .gform_title {
    color: #fff !important;
    font-family: "Raleway", Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: 20px !important;
}

#gform_wrapper_2 .gform_description {
    color: rgba(255,255,255,0.55) !important;
    font-size: 14px !important;
}

/* Fixed: original had 'letter-spacing' with no value */
#gform_wrapper_2 .gform_button,
#gform_wrapper_2 input[type="submit"] {
    background: #D12329 !important;
    border: none !important;
    color: #fff !important;
    font-family: "Raleway", Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 14px 30px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: opacity 0.2s !important;
}

#gform_wrapper_2 .gform_button:hover,
#gform_wrapper_2 input[type="submit"]:hover {
    opacity: 0.85 !important;
}

#gform_wrapper_2 .gfield_error .gfield_label {
    color: #ff8080 !important;
}

#gform_wrapper_2 .validation_message {
    color: #ff8080 !important;
    font-size: 12px !important;
}


/* ── Form 1 — Compass Assessment ───────────────────────────── */

#gform_wrapper_1 {
    max-width: 860px !important;
    margin: 0 auto !important;
    padding: 0 40px 60px !important;
}

#gform_wrapper_1 .gform_title {
    font-family: "Raleway", Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 24px !important;
    color: #003258 !important;
}

#gform_wrapper_1 .gfield_label {
    font-family: "Raleway", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #003258 !important;
    letter-spacing: 0.03em !important;
}

#gform_wrapper_1 input[type="text"],
#gform_wrapper_1 input[type="email"],
#gform_wrapper_1 select,
#gform_wrapper_1 textarea {
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 6px !important;
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 14px !important;
    color: #1a1a1a !important;
    padding: 0 14px !important;
    height: 42px !important;
    line-height: 42px !important;
    background: #fff !important;
    transition: border-color 0.15s !important;
}

#gform_wrapper_1 input[type="text"]:focus,
#gform_wrapper_1 input[type="email"]:focus,
#gform_wrapper_1 select:focus,
#gform_wrapper_1 textarea:focus {
    border-color: #003258 !important;
    outline: none !important;
}

#gform_wrapper_1 .gf_progressbar_wrapper {
    margin-bottom: 32px !important;
}

#gform_wrapper_1 .gf_progressbar {
    background: #D12329 !important;
    border-radius: 4px !important;
}

#gform_wrapper_1 .gf_progressbar_title {
    font-family: "Raleway", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    color: #003258 !important;
    letter-spacing: 0.04em !important;
}

#gform_wrapper_1 .gform_next_button,
#gform_wrapper_1 .gform_button,
#gform_wrapper_1 input[type="submit"] {
    background: #D12329 !important;
    border: none !important;
    color: #fff !important;
    font-family: "Raleway", Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 13px 32px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: opacity 0.2s !important;
}

#gform_wrapper_1 .gform_next_button:hover,
#gform_wrapper_1 .gform_button:hover,
#gform_wrapper_1 input[type="submit"]:hover {
    opacity: 0.85 !important;
}

#gform_wrapper_1 .gform_previous_button {
    background: transparent !important;
    border: 2px solid #003258 !important;
    color: #003258 !important;
    font-family: "Raleway", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 11px 28px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

#gform_wrapper_1 .gform_previous_button:hover {
    background: #003258 !important;
    color: #fff !important;
}