/* ==========================================================================
   SERVICE RECOMMENDATION QUIZ - SITE-SPECIFIC THEME (theme.css)
   Version: 0.2.0
   Order: Variables -> Modal Base -> Typography -> Buttons -> Progress -> Chips
   ========================================================================== */

/* --- Font Import --- DELETE THIS! */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:ital,wght@0,100..900;1,100..900&family=Geist:ital,wght@0,100..900;1,100..900&display=swap');

/* --- 1. Global Theme Variables --- */
:root {
  /* Core Theme Colors */
  --primary: #0C1B25;
  --primary-light: color-mix(in srgb, #fff 25%, var(--primary));
  --secondary: #2E6479;

  --danger: #DFB35B;
  --danger-light: color-mix(in srgb, #fff 25%, var(--danger));

  --info: #3B95AC;
  --info-light: color-mix(in srgb, #fff 25%, var(--info));

  --warning: #abc5bd;
  --success: #f7f1dd;

  --dark: #3C525C;
  --light: #F0F5F7;
  --light-darker: color-mix(in srgb, #000 25%, var(--light));
  --light-darkest: color-mix(in srgb, #000 50%, var(--light));

  --white: white;
  --black: black;

  /* Quiz-Specific Color Mapping */
  --sqe-modal-background: #1D2B33;
  --sqe-pill-incomplete: #94a7b0;
  --sqe-pill-current: #8a6a34;
  --sqe-pill-completed: #deb05b;
  --sqe-er: #e4695b;
}

/* --- 2. Modal Base Styling --- */
#sqeQuizModal .modal-content {
  color: var(--light-darker);
  font-family: 'Geist', sans-serif;
  background-color: var(--sqe-modal-background);
  border-color: var(--sqe-modal-background);
}

/* --- 3. Typography Overrides --- */

/* Question Headings */
#sqe-quiz-container h2,
#sqe-quiz-container legend.h4 {
  color: var(--light) !important;
  font-family: "Alaska", sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.625rem;
}

/* Intro Content Text (Overrides Bootstrap utilities like .lead and .text-muted) */
.sqe-intro-text p.lead,
.sqe-intro-text p.text-muted {
  font-size: 1rem !important;
  color: var(--light-darker) !important;
  font-style: normal !important;
  font-weight: normal !important;
  margin-bottom: 1rem;
}

/* --- 4. Action Buttons --- */

/* Primary Action Buttons */
#sqe-quiz-container .btn-primary {
  color: var(--primary);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  background-color: var(--danger);
  border-color: var(--danger);
}

#sqe-quiz-container .btn-primary:focus,
#sqe-quiz-container .btn-primary:hover,
#sqe-quiz-container .btn-primary:active {
  color: var(--primary);
  background-color: var(--danger-light);
  border-color: var(--danger-light);
}

/* Secondary Action Buttons */
#sqe-quiz-container .btn-outline-secondary {
  color: var(--light);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  background-color: var(--primary);
  border-color: var(--danger);
}

#sqe-quiz-container .btn-outline-secondary:focus,
#sqe-quiz-container .btn-outline-secondary:hover,
#sqe-quiz-container .btn-outline-secondary:active {
  color: var(--primary);
  background-color: var(--danger-light);
  border-color: var(--danger-light);
}

/* Results Screen Reset Link */
.sqe-reset-container .btn-link {
    font-family: 'Geist Mono', sans-serif;
    color:var(--light) !important;
    text-transform:uppercase;
}

/* --- 5. Progress Tracker --- */

/* Progress Text Base (Steps 1-6 & Results) */
#sqe-progress-text {
  font-family: 'Geist Mono', sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--light-darker);
  font-size: 0.875rem;
  letter-spacing: 10%;
  transition: color 0.3s ease; /* Smooth fade when color changes */
}

/* Step 0 Specific Text Color */
#sqe-progress-text.sqe-intro-progress {
    color: var(--light) !important;
}

/* Progress Pill Color Assignments */
.sqe-pill-incomplete { background-color: var(--sqe-pill-incomplete); }
.sqe-pill-current    { background-color: var(--sqe-pill-current); }
.sqe-pill-completed  { background-color: var(--sqe-pill-completed); }

/* --- 6. Choice Chips (Question Options) --- */

/* Default State */
.sqe-choice-chip {
  color: var(--light-darker);
  font-size: 0.875rem;
  background-color: var(--primary);
  border-color: var(--secondary);
}

/* Hover State */
.sqe-choice-chip:hover .sqe-chip-label {
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--danger) !important;
}

/* Checked/Selected State */
.sqe-input:checked ~ .sqe-chip-label {
  color: var(--primary);
  font-weight: 400;
  background-color: var(--danger);
  border-color: var(--danger) !important;
}

/* Accessibility Focus Ring */
.sqe-input:focus-visible ~ .sqe-chip-label {
  outline: 3px solid var(--danger) !important;
  outline-offset: 2px;
}

/* --- 7. Emergency Chip Specifics --- */

/* Add specific styling here if you ever want the ER chips to look distinct from normal chips */
.sqe-emergency:hover .sqe-chip-label {}

.sqe-input:checked ~ .sqe-emergency .sqe-chip-label,
.sqe-emergency .sqe-input:checked ~ .sqe-chip-label {}


/* --- 8. Modal Close Button Styling --- */
#sqeQuizModal .btn-close {
    /* Create the square border wrapper */
    border: 2px solid var(--light-darker);
    border-radius: 4px; /* Square with slightly softened corners */
    background-color: transparent;
    padding: 0.5rem;

    /* Recolor the default black SVG 'X' to match --light-darker (~#a1afb6). */
    filter: invert(72%) sepia(10%) saturate(677%) hue-rotate(160deg) brightness(91%) contrast(92%);

    opacity: 1; /* Remove Bootstrap's default 0.5 opacity */
    transition: all 0.2s ease-in-out;
}

#sqeQuizModal .btn-close:hover {
    /* Solid background on hover */
    background-color: var(--light-darker);
    border-color: var(--light-darker);

    /* Turn the X white (or off-white) so it contrasts against the solid background */
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

/* Ensure focus ring matches your theme */
#sqeQuizModal .btn-close:focus {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--light-darker) 25%, transparent);
}


/* --- 9. Results --- */

#sqe-result-title {
    width: fit-content;
    padding: 0.5rem 1rem;

    color: var(--info);
    text-transform: uppercase;
    font-size: 1rem;
    font-weight:600;
    font-family:"Geist", sans-serif;

     border:1px solid var(--info);
}

#sqe-primary-result {
  font-family:"Alaska", sans-serif;
  color: var(--light);
  text-transform:uppercase;
}

#sqe-primary-description {
  color: var(--light-darker);
}

#sqe-secondary-wrapper {
    background-color: var(--primary);
}

#sqe-secondary-wrapper .text-muted {
    font-family:"Geist Mono", sans-serif;
    text-transform:uppercase;
}

#sqe-secondary-result {
    font-family:"Alaska", sans-serif;
    color: var(--light);
    text-transform:uppercase;
}

#sqe-secondary-description {
  color: var(--light-darker);
}

/* Emergency State Override for Result Title */
#sqe-result-title.sqe-er-title {
    color: var(--sqe-er) !important;
    background-color: transparent !important;
    border-color: var(--sqe-er) !important;
}