/**
 * Coderoad Olivero Theme - Custom Styles
 * Additional styling specific to the Coderoad AI Maturity Model
 * Colors and design based on the Coderoad AI Maturity Model screenshot
 */

/* Coderoad Brand Colors - Screenshot Accurate */
:root {
  /* Primary Colors from Screenshot */
  --coderoad-header-bg: #000000;           /* Dark purple header/footer */
  --coderoad-step-active: #2f0286;         /* Active step color */
  --coderoad-step-inactive: #e4dbeb;       /* Inactive step circles */
  --coderoad-form-border: #2f0286;         /* Form field borders */
  --coderoad-button-bg: #9309f7;           /* Button background */
  --coderoad-text-primary: #181E26;        /* Primary text color */
  --coderoad-text-secondary: #4a5568;      /* Secondary text (navigation) */
  --coderoad-bg-white: #ffffff;            /* Pure white background */
  
  /* Supporting Colors */
  --coderoad-primary: #9309f7;             /* Vibrant Purple */
  --coderoad-deep-indigo: #2f0286;         /* Dark Purple */
  --coderoad-rich-purple: #4806aa;         /* Medium Dark Purple */
  --coderoad-grey-purple: #8e93a9;         /* Grey Purple */
  --coderoad-medium-purple: #673fa4;       /* Medium Purple */
  --coderoad-muted-purple: #7e5abb;        /* Muted Purple */
  --coderoad-pale-lavender: #9f83cb;       /* Pale Lavender */
  --coderoad-very-pale-purple: #e4dbeb;    /* Very Pale Purple */
  
  /* Typography Scale */
  --coderoad-font-size-xs: 0.75rem;        /* 12px */
  --coderoad-font-size-sm: 0.875rem;       /* 14px */
  --coderoad-font-size-base: 1rem;         /* 16px */
  --coderoad-font-size-lg: 1.125rem;       /* 18px */
  --coderoad-font-size-xl: 1.25rem;        /* 20px */
  --coderoad-font-size-2xl: 1.5rem;        /* 24px */
  --coderoad-font-size-3xl: 1.875rem;      /* 30px */
  --coderoad-font-size-4xl: 2.25rem;       /* 36px */
  
  /* Font Family */
  --font-primary: aeonik, ui-sans-serif, Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Font Weights */
  --coderoad-font-weight-light: 300;
  --coderoad-font-weight-normal: 400;
  --coderoad-font-weight-medium: 500;
  --coderoad-font-weight-semibold: 600;
  --coderoad-font-weight-bold: 700;
  
  /* Spacing */
  --coderoad-spacing-xs: 0.25rem;          /* 4px */
  --coderoad-spacing-sm: 0.5rem;           /* 8px */
  --coderoad-spacing-md: 1rem;             /* 16px */
  --coderoad-spacing-lg: 1.5rem;           /* 24px */
  --coderoad-spacing-xl: 2rem;             /* 32px */
  --coderoad-spacing-2xl: 3rem;            /* 48px */
  
  /* Border Radius */
  --coderoad-radius-sm: 4px;
  --coderoad-radius-md: 8px;
  --coderoad-radius-lg: 12px;
  --coderoad-radius-full: 9999px;
  
  /* Shadows */
  --coderoad-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --coderoad-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --coderoad-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --coderoad-shadow-purple: 0 4px 20px rgba(47, 2, 134, 0.15);
}

/* Enhanced Typography - Set font-family on html and body for proper inheritance */
html {
  font-family: var(--font-primary);
}

body {
  font-family: var(--font-primary);
  line-height: 1.6;
  color: var(--coderoad-text-primary);
}

/* Ensure all elements inherit font-family from body unless explicitly overridden */
/* This overrides base theme's explicit font-family declarations */
/* body *:not(code):not(pre):not(kbd):not(samp):not(tt) {
  font-family: inherit;
} */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--coderoad-font-weight-bold);
  color: var(--coderoad-text-primary);
  line-height: 1.2;
  margin-bottom: var(--coderoad-spacing-md);
}

h1 {
  font-size: var(--coderoad-font-size-4xl);
  font-weight: var(--coderoad-font-weight-bold);
}

h2 {
  font-size: var(--coderoad-font-size-3xl);
  font-weight: var(--coderoad-font-weight-semibold);
}

h3 {
  font-size: var(--coderoad-font-size-2xl);
  font-weight: var(--coderoad-font-weight-semibold);
}

/* Coderoad Branding Elements */
.site-branding__text {
  display: flex;
  gap: 5px;
  font-size: 16px;
  font-weight: 400;
  color: white;
}

/* Coderoad Header Styling - Screenshot Accurate */
.region-header,
.site-header {
  background: transparent;
  color: var(--coderoad-bg-white);
  /* box-shadow: var(--coderoad-shadow-lg); */
}

.site-header {
  height: 100px;
}

/* Site Header Initial Element */
.site-header__initial,
.block-system-branding-block,
.site-header__inner {
  background: transparent;
}

.main-content__container.container {
  max-width: 100%;
}

/* Coderoad Hero Section - Screenshot Style */
.region-hero {
  background: linear-gradient(135deg, var(--coderoad-header-bg) 0%, var(--coderoad-rich-purple) 100%);
  color: var(--coderoad-bg-white);
  padding: var(--coderoad-spacing-2xl) 0;
  text-align: center;
}

.region-hero h1 {
  font-size: var(--coderoad-font-size-4xl);
  font-weight: var(--coderoad-font-weight-light);
  margin-bottom: var(--coderoad-spacing-md);
  color: var(--coderoad-bg-white);
}

.region-hero p {
  font-size: var(--coderoad-font-size-lg);
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
  color: var(--coderoad-bg-white);
}

/* Coderoad Button Styles - Screenshot Accurate */
.button--primary,
.btn--primary,
.form-submit {
  background: var(--coderoad-button-bg);
  color: var(--coderoad-bg-white);
  border: none;
  border-radius: var(--coderoad-radius-md);
  padding: var(--coderoad-spacing-md) var(--coderoad-spacing-lg);
  font-weight: var(--coderoad-font-weight-semibold);
  font-size: var(--coderoad-font-size-base);
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--coderoad-spacing-sm);
}

.button--primary:hover,
.btn--primary:hover,
.form-submit:hover {
  background: #1a0152;
  transform: translateY(-2px);
  box-shadow: var(--coderoad-shadow-purple);
}

.button--primary:focus,
.btn--primary:focus,
.form-submit:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 2, 134, 0.3);
}

/* Coderoad Form Enhancements - Screenshot Accurate */
.form-text,
.form-email,
.form-textarea,
.form-select {
  border: 2px solid var(--coderoad-form-border);
  border-radius: var(--coderoad-radius-md);
  padding: var(--coderoad-spacing-md);
  background: var(--coderoad-bg-white);
  font-size: var(--coderoad-font-size-base);
  transition: all 0.3s ease;
  width: 100%;
}

.form-text:focus,
.form-email:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--coderoad-step-active);
  box-shadow: 0 0 0 3px rgba(47, 2, 134, 0.1);
  outline: none;
}

.form-text::placeholder,
.form-email::placeholder,
.form-textarea::placeholder {
  color: var(--coderoad-grey-purple);
  opacity: 0.7;
}

.form-item label::after {
  content: " *";
  color: #e53e3e;
  font-weight: var(--coderoad-font-weight-bold);
}

/* Coderoad Navigation Accents */
.primary-menu .menu-item a:hover {
  color: var(--coderoad-text-primary);
}

.primary-menu .menu-item a.is-active {
  color: var(--coderoad-text-primary);
  border-bottom-color: var(--coderoad-bg-white);
}

/* Coderoad Footer Styling - Screenshot Accurate */
.region-footer-bottom,
.site-footer {
  background: var(--coderoad-header-bg);
  color: var(--coderoad-bg-white);
  padding: var(--coderoad-spacing-lg) 0;
}

.region-footer-bottom a,
.site-footer a {
  color: var(--coderoad-pale-lavender);
  text-decoration: none;
}

.region-footer-bottom a:hover,
.site-footer a:hover {
  color: var(--coderoad-bg-white);
}

/* Coderoad Content Highlights */
.highlighted {
  background: var(--coderoad-very-pale-purple);
  border-left: 4px solid var(--coderoad-step-active);
  padding: var(--coderoad-spacing-md);
  margin: var(--coderoad-spacing-xl) 0;
  border-radius: var(--coderoad-radius-md);
}

/* Coderoad Card Styling */
.card {
  border: 1px solid var(--coderoad-very-pale-purple);
  border-radius: var(--coderoad-radius-lg);
  box-shadow: var(--coderoad-shadow-sm);
  background: var(--coderoad-bg-white);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--coderoad-shadow-purple);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

.card-header {
  background: var(--coderoad-very-pale-purple);
  padding: var(--coderoad-spacing-md);
  border-bottom: 1px solid var(--coderoad-pale-lavender);
}

.card-body {
  padding: var(--coderoad-spacing-md);
}

.card-footer {
  background: var(--coderoad-very-pale-purple);
  padding: var(--coderoad-spacing-md);
  border-top: 1px solid var(--coderoad-pale-lavender);
}

/* Coderoad Typography Enhancements */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
  text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: var(--coderoad-primary);
}

/* Coderoad Link Styling */
a {
  color: var(--coderoad-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Coderoad Alert Styling */
.messages--status {
  border-left-color: var(--coderoad-step-active);
  background: rgba(47, 2, 134, 0.05);
}

.messages--warning {
  border-left-color: var(--coderoad-muted-purple);
  background: rgba(126, 90, 187, 0.05);
}

.messages--error {
  border-left-color: var(--coderoad-rich-purple);
  background: rgba(72, 6, 170, 0.05);
}

/* Coderoad Progress Bars */
.progress__bar {
  background: var(--coderoad-step-active);
  border-radius: var(--coderoad-radius-full);
}

.progress__percentage {
  color: var(--coderoad-text-primary);
  font-weight: var(--coderoad-font-weight-semibold);
}

/* Coderoad Search Results */
.search-results .search-result__title a {
  color: var(--coderoad-step-active);
  font-weight: var(--coderoad-font-weight-semibold);
}

.search-results .search-result__title a:hover {
  color: var(--coderoad-deep-indigo);
}

/* Coderoad Breadcrumb Styling */
.breadcrumb__item a {
  color: var(--coderoad-muted-purple);
  font-weight: var(--coderoad-font-weight-medium);
}

.breadcrumb__item a:hover {
  color: var(--coderoad-step-active);
}

.breadcrumb__item:last-child {
  color: var(--coderoad-text-primary);
  font-weight: var(--coderoad-font-weight-semibold);
}

/* Coderoad Pagination */
.pager__item a {
  color: var(--coderoad-step-active);
  border-color: var(--coderoad-very-pale-purple);
  border-radius: var(--coderoad-radius-md);
  padding: var(--coderoad-spacing-sm) var(--coderoad-spacing-md);
  transition: all 0.3s ease;
}

.pager__item a:hover {
  background: var(--coderoad-step-active);
  color: var(--coderoad-bg-white);
  border-color: var(--coderoad-step-active);
}

.pager__item.is-active a {
  background: var(--coderoad-step-active);
  color: var(--coderoad-bg-white);
  border-color: var(--coderoad-step-active);
}

/* Coderoad Table Styling */
table th {
  background: var(--coderoad-very-pale-purple);
  color: var(--coderoad-text-primary);
  font-weight: var(--coderoad-font-weight-semibold);
  padding: var(--coderoad-spacing-md);
}

table tr:hover {
  background: rgba(47, 2, 134, 0.05);
}

/* Coderoad Code Styling */
code {
  background: var(--coderoad-very-pale-purple);
  color: var(--coderoad-text-primary);
  padding: var(--coderoad-spacing-xs) var(--coderoad-spacing-sm);
  border-radius: var(--coderoad-radius-sm);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

pre {
  background: var(--coderoad-very-pale-purple);
  border: 1px solid var(--coderoad-pale-lavender);
  border-radius: var(--coderoad-radius-md);
  padding: var(--coderoad-spacing-md);
  overflow-x: auto;
}

/* Coderoad Block Styling */
.block__title {
  color: var(--coderoad-text-primary);
  border-bottom: 2px solid var(--coderoad-very-pale-purple);
  padding-bottom: var(--coderoad-spacing-sm);
  font-weight: var(--coderoad-font-weight-semibold);
}

/* Coderoad Comment Styling */
.comment__title a {
  color: var(--coderoad-step-active);
  font-weight: var(--coderoad-font-weight-semibold);
}

.comment__title a:hover {
  color: var(--coderoad-deep-indigo);
}

/* Coderoad User Profile Styling */
.user__name {
  color: var(--coderoad-step-active);
  font-weight: var(--coderoad-font-weight-semibold);
}

.user__name:hover {
  color: var(--coderoad-deep-indigo);
}

/* Coderoad Responsive Enhancements */
@media (max-width: 768px) {
  .region-hero h1 {
    font-size: var(--coderoad-font-size-3xl);
  }
  
  .region-hero p {
    font-size: var(--coderoad-font-size-base);
  }
  
  .button--primary,
  .btn--primary,
  .form-submit {
    padding: var(--coderoad-spacing-sm) var(--coderoad-spacing-md);
    font-size: var(--coderoad-font-size-sm);
  }
}

/* Coderoad Print Styles */
@media print {
  .region-hero {
    background: var(--coderoad-bg-white) !important;
    color: var(--coderoad-text-primary) !important;
  }
  
  .button--primary,
  .btn--primary {
    background: var(--coderoad-bg-white) !important;
    color: var(--coderoad-text-primary) !important;
    border: 1px solid var(--coderoad-text-primary) !important;
  }
}

/* Coderoad Progress Stepper Component - Screenshot Accurate */
.progress-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--coderoad-spacing-xl) 0;
  padding: var(--coderoad-spacing-lg) 0;
  position: relative;
}

.progress-stepper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--coderoad-step-inactive);
  z-index: 1;
}

.step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--coderoad-spacing-sm);
  flex: 1;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--coderoad-font-weight-bold);
  font-size: var(--coderoad-font-size-base);
  color: var(--coderoad-bg-white);
  border: 3px solid var(--coderoad-bg-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.step.active .step-circle {
  background: var(--coderoad-step-active);
  box-shadow: 0 4px 16px rgba(47, 2, 134, 0.3);
}

.step.inactive .step-circle {
  background: var(--coderoad-step-inactive);
  color: var(--coderoad-text-primary);
}

.step.completed .step-circle {
  background: var(--coderoad-step-active);
  box-shadow: 0 2px 8px rgba(47, 2, 134, 0.2);
}

.step-label {
  font-size: var(--coderoad-font-size-sm);
  font-weight: var(--coderoad-font-weight-medium);
  color: var(--coderoad-text-primary);
  text-align: center;
  max-width: 120px;
  line-height: 1.2;
}

.step.active .step-label {
  font-weight: var(--coderoad-font-weight-semibold);
  color: var(--coderoad-step-active);
}

/* Step Connectors */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  width: calc(100% - 40px);
  height: 2px;
  background: var(--coderoad-step-inactive);
  z-index: 1;
}

.step.completed:not(:last-child)::after {
  background: var(--coderoad-step-active);
}

/* Responsive Progress Stepper */
@media (max-width: 768px) {
  .progress-stepper {
    flex-direction: column;
    gap: var(--coderoad-spacing-md);
  }
  
  .progress-stepper::before {
    display: none;
  }
  
  .step:not(:last-child)::after {
    display: none;
  }
  
  .step-circle {
    width: 32px;
    height: 32px;
    font-size: var(--coderoad-font-size-sm);
  }
  
  .step-label {
    font-size: var(--coderoad-font-size-xs);
    max-width: 100px;
  }
}

/* Progress Stepper Animation */
.step-circle {
  animation: stepPulse 0.6s ease-out;
}

@keyframes stepPulse {
  0% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.step.active .step-circle {
  animation: activeStepPulse 2s ease-in-out infinite;
}

@keyframes activeStepPulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(47, 2, 134, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(47, 2, 134, 0.5);
  }
}

/* Progress Stepper Variants */
.progress-stepper--compact {
  margin: var(--coderoad-spacing-md) 0;
}

.progress-stepper--compact .step-circle {
  width: 32px;
  height: 32px;
  font-size: var(--coderoad-font-size-sm);
}

.progress-stepper--compact .step-label {
  font-size: var(--coderoad-font-size-xs);
}

.progress-stepper--large {
  margin: var(--coderoad-spacing-2xl) 0;
}

.progress-stepper--large .step-circle {
  width: 48px;
  height: 48px;
  font-size: var(--coderoad-font-size-lg);
}

.progress-stepper--large .step-label {
  font-size: var(--coderoad-font-size-base);
}

/* Progress Stepper with Icons */
.step-circle .step-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.step.active .step-circle .step-icon {
  animation: iconBounce 0.6s ease-out;
}

@keyframes iconBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-4px);
  }
  60% {
    transform: translateY(-2px);
  }
}

/* Progress Stepper Status Indicators */
.step-status {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--coderoad-bg-white);
  border: 2px solid var(--coderoad-step-active);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--coderoad-font-size-xs);
  font-weight: var(--coderoad-font-weight-bold);
  color: var(--coderoad-step-active);
}

.step.completed .step-status {
  background: var(--coderoad-step-active);
  color: var(--coderoad-bg-white);
}

/* Progress Stepper Tooltips */
.step {
  position: relative;
}

.step-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--coderoad-text-primary);
  color: var(--coderoad-bg-white);
  padding: var(--coderoad-spacing-sm) var(--coderoad-spacing-md);
  border-radius: var(--coderoad-radius-md);
  font-size: var(--coderoad-font-size-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 10;
  margin-bottom: var(--coderoad-spacing-sm);
}

.step-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--coderoad-text-primary);
}

.step:hover .step-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Progress Stepper Accessibility */
.step-circle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 2, 134, 0.3);
}

.step[aria-current="step"] .step-circle {
  box-shadow: 0 0 0 3px rgba(47, 2, 134, 0.5);
}

/* Progress Stepper Print Styles */
@media print {
  .progress-stepper::before {
    background: #000;
  }
  
  .step-circle {
    border-color: #000;
    color: #000;
  }
  
  .step.active .step-circle,
  .step.completed .step-circle {
    background: #000;
    color: #fff;
  }
  
  .step-label {
    color: #000;
  }
}

/* Coderoad Assessment Form Styling - Screenshot Accurate */
.assessment-form {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--coderoad-spacing-xl);
  background: var(--coderoad-bg-white);
  border-radius: var(--coderoad-radius-lg);
  box-shadow: var(--coderoad-shadow-md);
}

.assessment-title {
  font-size: var(--coderoad-font-size-3xl);
  font-weight: var(--coderoad-font-weight-bold);
  color: var(--coderoad-text-primary);
  text-align: center;
  margin-bottom: var(--coderoad-spacing-xl);
}

/* Form Field Groups */
.form-item {
  margin-bottom: var(--coderoad-spacing-lg);
}

/* .form-item label {
  font-weight: var(--coderoad-font-weight-semibold);
  color: white;
  margin-bottom: var(--coderoad-spacing-sm);
  display: block;
  font-size: var(--coderoad-font-size-base);
} */

.form-item label::after {
  content: " *";
  color: #e53e3e;
  font-weight: var(--coderoad-font-weight-bold);
}

/* Enhanced Input Fields */
.form-text,
.form-email,
.form-textarea,
.form-select {
  border: 2px solid var(--coderoad-form-border);
  border-radius: var(--coderoad-radius-md);
  padding: var(--coderoad-spacing-md);
  background: var(--coderoad-bg-white);
  font-size: var(--coderoad-font-size-base);
  transition: all 0.3s ease;
  width: 100%;
  font-family: inherit;
}

.form-text:focus,
.form-email:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--coderoad-step-active);
  box-shadow: 0 0 0 3px rgba(47, 2, 134, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.form-text::placeholder,
.form-email::placeholder,
.form-textarea::placeholder {
  color: var(--coderoad-grey-purple);
  opacity: 0.7;
}

/* Form Validation States */
.form-item--error .form-text,
.form-item--error .form-email,
.form-item--error .form-textarea,
.form-item--error .form-select {
  border-color: #e53e3e;
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
}

.form-item--error label {
  color: #e53e3e;
}

.form-item--error .form-item--error-message {
  color: #e53e3e;
  font-size: var(--coderoad-font-size-sm);
  margin-top: var(--coderoad-spacing-xs);
  font-weight: var(--coderoad-font-weight-medium);
}

/* Form Success States */
.form-item--success .form-text,
.form-item--success .form-email,
.form-item--success .form-textarea,
.form-item--success .form-select {
  border-color: #38a169;
  box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.1);
}

/* Form Field Sizes */
.form-text--small,
.form-email--small,
.form-textarea--small,
.form-select--small {
  padding: var(--coderoad-spacing-sm);
  font-size: var(--coderoad-font-size-sm);
}

.form-text--large,
.form-email--large,
.form-textarea--large,
.form-select--large {
  padding: var(--coderoad-spacing-lg);
  font-size: var(--coderoad-font-size-lg);
}

/* Form Field Variants */
.form-text--outline,
.form-email--outline,
.form-textarea--outline,
.form-select--outline {
  background: transparent;
  border-color: var(--coderoad-grey-purple);
}

.form-text--outline:focus,
.form-email--outline:focus,
.form-textarea--outline:focus,
.form-select--outline:focus {
  background: var(--coderoad-bg-white);
  border-color: var(--coderoad-step-active);
}

/* Form Field Icons */
.form-item--with-icon {
  position: relative;
}

.form-item--with-icon .form-icon {
  position: absolute;
  left: var(--coderoad-spacing-md);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--coderoad-grey-purple);
  pointer-events: none;
}

.form-item--with-icon .form-text,
.form-item--with-icon .form-email,
.form-item--with-icon .form-textarea,
.form-item--with-icon .form-select {
  padding-left: calc(var(--coderoad-spacing-md) * 2 + 20px);
}

.form-item--with-icon .form-text:focus + .form-icon,
.form-item--with-icon .form-email:focus + .form-icon,
.form-item--with-icon .form-textarea:focus + .form-icon,
.form-item--with-icon .form-select:focus + .form-icon {
  color: var(--coderoad-step-active);
}

/* Form Field Groups */
.form-item-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--coderoad-spacing-md);
  margin-bottom: var(--coderoad-spacing-lg);
}

.form-item-group .form-item {
  margin-bottom: 0;
}

/* Form Actions */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--coderoad-spacing-xl);
  padding-top: var(--coderoad-spacing-lg);
  border-top: 1px solid var(--coderoad-very-pale-purple);
}

.form-actions--center {
  justify-content: center;
  gap: var(--coderoad-spacing-md);
}

.form-actions--right {
  justify-content: flex-end;
  gap: var(--coderoad-spacing-md);
}

/* Enhanced Button Variants */
.button--secondary,
.btn--secondary {
  background: var(--coderoad-bg-white);
  color: var(--coderoad-text-primary);
  border: 2px solid var(--coderoad-form-border);
  border-radius: var(--coderoad-radius-md);
  padding: var(--coderoad-spacing-md) var(--coderoad-spacing-lg);
  font-weight: var(--coderoad-font-weight-semibold);
  font-size: var(--coderoad-font-size-base);
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--coderoad-spacing-sm);
}

.button--secondary:hover,
.btn--secondary:hover {
  background: var(--coderoad-very-pale-purple);
  border-color: var(--coderoad-step-active);
  transform: translateY(-1px);
}

.button--outline,
.btn--outline {
  background: transparent;
  color: var(--coderoad-step-active);
  border: 2px solid var(--coderoad-step-active);
  border-radius: var(--coderoad-radius-md);
  padding: var(--coderoad-spacing-md) var(--coderoad-spacing-lg);
  font-weight: var(--coderoad-font-weight-semibold);
  font-size: var(--coderoad-font-size-base);
  transition: all 0.3s ease;
  cursor: pointer;
}

.button--outline:hover,
.btn--outline:hover {
  background: var(--coderoad-step-active);
  color: var(--coderoad-bg-white);
  transform: translateY(-1px);
}

/* Button with Icons */
.button--with-icon,
.btn--with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--coderoad-spacing-sm);
}

.button--with-icon .button-icon,
.btn--with-icon .btn-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Button Sizes */
.button--small,
.btn--small {
  padding: var(--coderoad-spacing-sm) var(--coderoad-spacing-md);
  font-size: var(--coderoad-font-size-sm);
}

.button--large,
.btn--large {
  padding: var(--coderoad-spacing-lg) var(--coderoad-spacing-xl);
  font-size: var(--coderoad-font-size-lg);
}

/* Button States */
.button:disabled,
.btn:disabled,
.form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.button--loading,
.btn--loading,
.form-submit--loading {
  position: relative;
  color: transparent;
}

.button--loading::after,
.btn--loading::after,
.form-submit--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: buttonSpin 1s linear infinite;
}

@keyframes buttonSpin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Form Layout Variants */
.form--inline .form-item {
  display: inline-block;
  margin-right: var(--coderoad-spacing-md);
  margin-bottom: var(--coderoad-spacing-md);
}

.form--stacked .form-item {
  display: block;
  margin-bottom: var(--coderoad-spacing-lg);
}

.form--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--coderoad-spacing-lg);
}

/* Form Field Help Text */
.form-item__description {
  font-size: var(--coderoad-font-size-sm);
  color: var(--coderoad-grey-purple);
  margin-top: var(--coderoad-spacing-xs);
  font-style: italic;
}

/* Form Field Required Indicator */
.form-item__required {
  color: #e53e3e;
  font-weight: var(--coderoad-font-weight-bold);
  margin-left: var(--coderoad-spacing-xs);
}

/* Form Field Character Count */
.form-item__char-count {
  font-size: var(--coderoad-font-size-xs);
  color: var(--coderoad-grey-purple);
  text-align: right;
  margin-top: var(--coderoad-spacing-xs);
}

.form-item__char-count--warning {
  color: #d69e2e;
}

.form-item__char-count--error {
  color: #e53e3e;
}

/* Form Field Autocomplete */
.form-text[autocomplete],
.form-email[autocomplete] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e93a9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--coderoad-spacing-md) center;
  background-size: 16px;
  padding-right: calc(var(--coderoad-spacing-md) * 2 + 16px);
}

/* Form Field Search */
.form-text[type="search"] {
  border-radius: var(--coderoad-radius-full);
  padding-left: var(--coderoad-spacing-lg);
  padding-right: var(--coderoad-spacing-lg);
}

/* Form Field File Upload */
.form-file {
  position: relative;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
}

.form-file input[type="file"] {
  position: absolute;
  left: -9999px;
  opacity: 0;
  cursor: pointer;
}

.form-file__label {
  display: inline-block;
  padding: var(--coderoad-spacing-md) var(--coderoad-spacing-lg);
  background: var(--coderoad-very-pale-purple);
  color: var(--coderoad-text-primary);
  border: 2px dashed var(--coderoad-form-border);
  border-radius: var(--coderoad-radius-md);
  cursor: pointer;
  transition: all 0.3s ease;
}

.form-file__label:hover {
  background: var(--coderoad-pale-lavender);
  border-color: var(--coderoad-step-active);
}

.form-file__label::before {
  content: "📁 ";
  margin-right: var(--coderoad-spacing-sm);
}

/* Form Field Checkbox and Radio Enhancements */
.form-checkbox,
.form-radio {
  display: flex;
  align-items: center;
  gap: var(--coderoad-spacing-sm);
  margin-bottom: var(--coderoad-spacing-sm);
}

.form-checkbox input[type="checkbox"],
.form-radio input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--coderoad-step-active);
}

.form-checkbox label,
.form-radio label {
  margin-bottom: 0;
  cursor: pointer;
  font-weight: var(--coderoad-font-weight-medium);
}

.form-checkbox label::after,
.form-radio label::after {
  content: none;
}

/* Form Field Select Enhancements */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232f0286' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--coderoad-spacing-md) center;
  background-size: 16px;
  padding-right: calc(var(--coderoad-spacing-md) * 2 + 16px);
}

/* Form Field Textarea Enhancements */
.form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.form-textarea--large {
  min-height: 200px;
}

.form-textarea--small {
  min-height: 80px;
}

/* Form Responsive Design */
@media (max-width: 768px) {
  .assessment-form {
    padding: var(--coderoad-spacing-md);
    margin: var(--coderoad-spacing-md);
  }
  
  .form-item-group {
    grid-template-columns: 1fr;
  }
  
  .form-actions {
    flex-direction: column;
    gap: var(--coderoad-spacing-md);
  }
  
  .form-actions .button,
  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }
  
  .form--inline .form-item {
    display: block;
    margin-right: 0;
    margin-bottom: var(--coderoad-spacing-md);
  }
  
  .form--grid {
    grid-template-columns: 1fr;
  }
}

/* Form Print Styles */
@media print {
  .assessment-form {
    box-shadow: none;
    border: 1px solid #000;
  }
  
  .form-actions {
    display: none;
  }
  
  .form-text,
  .form-email,
  .form-textarea,
  .form-select {
    border-color: #000;
    background: transparent;
  }
}

/* Coderoad Layout & Spacing Enhancements - Final Phase */
.page-content {
  background: var(--coderoad-bg-white);
  min-height: 100vh;
}

.main-content {
  margin: auto;
}
@media (min-width: 75rem) {
  .main-content {
    width: 100%;
    margin: 0 !important;
    padding-inline: 0; /* optional, if padding also needs to go */
  }
}

.region-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--coderoad-spacing-lg);
}

/* Coderoad Section Spacing */
.region-section {
  padding: var(--coderoad-spacing-2xl) 0;
}

.region-section--compact {
  padding: var(--coderoad-spacing-lg) 0;
}

.region-section--large {
  padding: var(--coderoad-spacing-2xl) 0;
}

/* Coderoad Container System */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0;
}

.container--small {
  max-width: 800px;
}

.container--large {
  max-width: 1400px;
}

.container--fluid {
  max-width: none;
} 

/* Coderoad Grid System */
.grid {
  display: grid;
  gap: var(--coderoad-spacing-lg);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid--auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Coderoad Flexbox Utilities */
.flex {
  display: flex;
}

.flex--column {
  flex-direction: column;
}

.flex--wrap {
  flex-wrap: wrap;
}

.flex--center {
  justify-content: center;
  align-items: center;
}

.flex--between {
  justify-content: space-between;
  align-items: center;
}

.flex--around {
  justify-content: space-around;
  align-items: center;
}

.flex--start {
  justify-content: flex-start;
  align-items: center;
}

.flex--end {
  justify-content: flex-end;
  align-items: center;
}

/* Coderoad Spacing Utilities */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--coderoad-spacing-xs); }
.mt-2 { margin-top: var(--coderoad-spacing-sm); }
.mt-3 { margin-top: var(--coderoad-spacing-md); }
.mt-4 { margin-top: var(--coderoad-spacing-lg); }
.mt-5 { margin-top: var(--coderoad-spacing-xl); }
.mt-6 { margin-top: var(--coderoad-spacing-2xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--coderoad-spacing-xs); }
.mb-2 { margin-bottom: var(--coderoad-spacing-sm); }
.mb-3 { margin-bottom: var(--coderoad-spacing-md); }
.mb-4 { margin-bottom: var(--coderoad-spacing-lg); }
.mb-5 { margin-bottom: var(--coderoad-spacing-xl); }
.mb-6 { margin-bottom: var(--coderoad-spacing-2xl); }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--coderoad-spacing-xs); }
.ml-2 { margin-left: var(--coderoad-spacing-sm); }
.ml-3 { margin-left: var(--coderoad-spacing-md); }
.ml-4 { margin-left: var(--coderoad-spacing-lg); }
.ml-5 { margin-left: var(--coderoad-spacing-xl); }
.ml-6 { margin-left: var(--coderoad-spacing-2xl); }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--coderoad-spacing-xs); }
.mr-2 { margin-right: var(--coderoad-spacing-sm); }
.mr-3 { margin-right: var(--coderoad-spacing-md); }
.mr-4 { margin-right: var(--coderoad-spacing-lg); }
.mr-5 { margin-right: var(--coderoad-spacing-xl); }
.mr-6 { margin-right: var(--coderoad-spacing-2xl); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--coderoad-spacing-xs); }
.pt-2 { padding-top: var(--coderoad-spacing-sm); }
.pt-3 { padding-top: var(--coderoad-spacing-md); }
.pt-4 { padding-top: var(--coderoad-spacing-lg); }
.pt-5 { padding-top: var(--coderoad-spacing-xl); }
.pt-6 { padding-top: var(--coderoad-spacing-2xl); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--coderoad-spacing-xs); }
.pb-2 { padding-bottom: var(--coderoad-spacing-sm); }
.pb-3 { padding-bottom: var(--coderoad-spacing-md); }
.pb-4 { padding-bottom: var(--coderoad-spacing-lg); }
.pb-5 { padding-bottom: var(--coderoad-spacing-xl); }
.pb-6 { padding-bottom: var(--coderoad-spacing-2xl); }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: var(--coderoad-spacing-xs); }
.pl-2 { padding-left: var(--coderoad-spacing-sm); }
.pl-3 { padding-left: var(--coderoad-spacing-md); }
.pl-4 { padding-left: var(--coderoad-spacing-lg); }
.pl-5 { padding-left: var(--coderoad-spacing-xl); }
.pl-6 { padding-left: var(--coderoad-spacing-2xl); }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: var(--coderoad-spacing-xs); }
.pr-2 { padding-right: var(--coderoad-spacing-sm); }
.pr-3 { padding-right: var(--coderoad-spacing-md); }
.pr-4 { padding-right: var(--coderoad-spacing-lg); }
.pr-5 { padding-right: var(--coderoad-spacing-xl); }
.pr-6 { padding-right: var(--coderoad-spacing-2xl); }

/* Coderoad Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.text-primary { color: var(--coderoad-text-primary); }
.text-secondary { color: var(--coderoad-text-secondary); }
.text-white { color: var(--coderoad-bg-white); }
.text-muted { color: var(--coderoad-grey-purple); }

.text-xs { font-size: var(--coderoad-font-size-xs); }
.text-sm { font-size: var(--coderoad-font-size-sm); }
.text-base { font-size: var(--coderoad-font-size-base); }
.text-lg { font-size: var(--coderoad-font-size-lg); }
.text-xl { font-size: var(--coderoad-font-size-xl); }
.text-2xl { font-size: var(--coderoad-font-size-2xl); }
.text-3xl { font-size: var(--coderoad-font-size-3xl); }
.text-4xl { font-size: var(--coderoad-font-size-4xl); }

.font-light { font-weight: var(--coderoad-font-weight-light); }
.font-normal { font-weight: var(--coderoad-font-weight-normal); }
.font-medium { font-weight: var(--coderoad-font-weight-medium); }
.font-semibold { font-weight: var(--coderoad-font-weight-semibold); }
.font-bold { font-weight: var(--coderoad-font-weight-bold); }

/* Coderoad Display Utilities */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }

/* Coderoad Position Utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Coderoad Border Utilities */
.border { border: 1px solid var(--coderoad-very-pale-purple); }
.border-0 { border: 0; }
.border-t { border-top: 1px solid var(--coderoad-very-pale-purple); }
.border-b { border-bottom: 1px solid var(--coderoad-very-pale-purple); }
.border-l { border-left: 1px solid var(--coderoad-very-pale-purple); }
.border-r { border-right: 1px solid var(--coderoad-very-pale-purple); }

.border-primary { border-color: var(--coderoad-step-active); }
.border-secondary { border-color: var(--coderoad-very-pale-purple); }

.rounded { border-radius: var(--coderoad-radius-md); }
.rounded-sm { border-radius: var(--coderoad-radius-sm); }
.rounded-lg { border-radius: var(--coderoad-radius-lg); }
.rounded-full { border-radius: var(--coderoad-radius-full); }

/* Coderoad Shadow Utilities */
.shadow { box-shadow: var(--coderoad-shadow-sm); }
.shadow-md { box-shadow: var(--coderoad-shadow-md); }
.shadow-lg { box-shadow: var(--coderoad-shadow-lg); }
.shadow-purple { box-shadow: var(--coderoad-shadow-purple); }
.shadow-none { box-shadow: none; }

/* Coderoad Background Utilities */
.bg-white { background-color: var(--coderoad-bg-white); }
.bg-primary { background-color: var(--coderoad-step-active); }
.bg-secondary { background-color: var(--coderoad-very-pale-purple); }
.bg-transparent { background-color: transparent; }

/* Coderoad Width & Height Utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-screen { width: 100vw; }

.h-full { height: 100%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }

.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }

/* Coderoad Overflow Utilities */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-scroll { overflow-x: scroll; }

.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-scroll { overflow-y: scroll; }

/* Coderoad Z-Index Utilities */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Coderoad Cursor Utilities */
.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-help { cursor: help; }
.cursor-not-allowed { cursor: not-allowed; }

/* Coderoad User Select Utilities */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

/* Coderoad Responsive Utilities */
@media (max-width: 640px) {
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  .sm\:flex { display: flex; }
  .sm\:grid { display: grid; }
}

@media (max-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:grid { display: grid; }
  
  .md\:grid--2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid--3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid--4 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:grid { display: grid; }
  
  .lg\:grid--2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid--3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid--4 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1280px) {
  .xl\:hidden { display: none; }
  .xl\:block { display: block; }
  .xl\:flex { display: flex; }
  .xl\:grid { display: grid; }
}

/* Coderoad Print Utilities */
@media print {
  .print\:hidden { display: none; }
  .print\:block { display: block; }
  .print\:text-black { color: #000; }
  .print\:bg-white { background-color: #fff; }
}

/* Coderoad Focus Utilities */
.focus\:outline-none:focus { outline: none; }
.focus\:ring:focus { box-shadow: 0 0 0 3px rgba(47, 2, 134, 0.3); }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(47, 2, 134, 0.3); }
.focus\:ring-4:focus { box-shadow: 0 0 0 4px rgba(47, 2, 134, 0.3); }

/* Coderoad Hover Utilities */
.hover\:bg-primary:hover { background-color: var(--coderoad-step-active); }
.hover\:text-white:hover { color: var(--coderoad-bg-white); }
.hover\:shadow-lg:hover { box-shadow: var(--coderoad-shadow-lg); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:translate-y-1:hover { transform: translateY(-0.25rem); }

/* Coderoad Transition Utilities */
.transition { transition: all 0.3s ease; }
.transition-all { transition: all 0.3s ease; }
.transition-colors { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }
.transition-opacity { transition: opacity 0.3s ease; }
.transition-shadow { transition: box-shadow 0.3s ease; }
.transition-transform { transition: transform 0.3s ease; }

/* Coderoad Animation Utilities */
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bounce { animation: bounce 1s infinite; }
.animate-spin { animation: spin 1s linear infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Coderoad Accessibility Utilities */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Coderoad High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --coderoad-step-active: #000000;
    --coderoad-text-primary: #000000;
    --coderoad-bg-white: #ffffff;
    --coderoad-very-pale-purple: #f0f0f0;
  }
  
  .button--primary,
  .btn--primary,
  .form-submit {
    border: 2px solid #000000;
  }
  
  .form-text,
  .form-email,
  .form-textarea,
  .form-select {
    border: 2px solid #000000;
  }
}

/* Coderoad Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .step-circle {
    animation: none;
  }
  
  .button--primary:hover,
  .btn--primary:hover,
  .form-submit:hover {
    transform: none;
  }
}

/* Coderoad Dark Mode Support (Future Enhancement) */
@media (prefers-color-scheme: dark) {
  /* Dark mode styles can be added here in the future */
}

/* Coderoad Print Optimizations */
@media print {
  .page-content {
    background: white;
    color: black;
  }
  
  .region-header,
  .region-footer-bottom {
    background: white !important;
    color: black !important;
  }
  
  .button--primary,
  .btn--primary,
  .form-submit {
    background: white !important;
    color: black !important;
    border: 1px solid black !important;
  }
  
  .progress-stepper::before {
    background: black !important;
  }
  
  .step-circle {
    border-color: black !important;
    color: black !important;
  }
  
  .step.active .step-circle,
  .step.completed .step-circle {
    background: black !important;
    color: white !important;
  }
}

.progress-step.is-active .progress-marker::before {
  background-color: #9309f7;
}

.webform-options-display-buttons input:checked + label.webform-options-display-buttons-label {
 border-color:  #9309f7; 
}

.fieldset__legend {
  background-color: #000; 
  font-weight: 400;
}

.page-wrapper {
  max-width: 100%;
}

.webform-options-display-buttons-title {
  font-weight: 700;
  padding-bottom: 20px;
}

.fieldset__label.fieldset__label--group strong {
  text-transform: uppercase;
}

/* Disable word-wrap and hyphens for webform options description */
section p,
.complete-intro,
.webform-options-display-buttons-description {
  word-wrap: normal;
  hyphens: none;
}

.webform-options-display-buttons-description * {
  word-wrap: normal;
  hyphens: none;
}

.site-branding__inner {
  display: block
}

.site-branding__logo {
  padding: 10px 10px;
}

/* @media (min-width: 75rem) {
  .site-branding__inner {
      height: 230px;
  }
} */

.messages-list {
  background: var(--coderoad-primary);
}

label.form-item__label::after {
  content: "";
}

.form-item__label.form-required::after,
.fieldset__label.form-required::after,
.required-mark::after {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline: 0.3em;
  content: "";
  vertical-align: text-top;
  /* Use a background image to prevent screen readers from announcing the text. */
  background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23FF0000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 0.5rem 0.5rem;
}

/* .ai-journey inherits font-family from body */
/* .ai-journey {
  font-family: var(--font-primary);
} */

/* .ai-journey::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.15;
  z-index: 0;
} */

.ai-journey .content {
  width: 530px;
}

.ai-journey h1 {
  font-size: 2.5rem;
  font-weight: 400;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.ai-journey h1 span {
  color: #a66bff; /* purple accent */
}

.ai-journey p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: white;
}

.primary-nav__menu {
  list-style: none;
}

a.primary-nav__menu-link,
a.cta-btn {
  display: inline-block;
  background: #9F32FF;
  color: #fff;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 30px;
  transition: background 0.3s ease;
  box-shadow: none;
}

a.primary-nav__menu-link:hover,
a.cta-btn:hover {
  background: #9F32EE;
  box-shadow: none;
  text-decoration: none;
  color: #181E26;
}

/* .block__content {
  background-image: url('assets/background.png');
} */

.header-nav {
  margin-block-start: 0 !important;
  background: transparent;
}

.path-frontpage #page {
  background-image: url('../assets/background.png');
  background-color: #181E26;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.path-frontpage #header {
  background: transparent;
}

#header {
  background-color:#181E26;
}

.social-bar, .site-header__initial {
  display: none;
}

#block-coderoad-olivero-whatyoullgain {
  margin-block-end: 0;
}

.ai-scorecard {
  background-color: #16181d;
  color: #ddd;
  font-family: "Inter", sans-serif;
  padding: 80px 20px;
}
.ai-scorecard .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  gap: 80px;
}
.scorecard-left {
  flex: 1 1 48%;
}
.scorecard-left img {
  width: 100%;
  border-radius: 10px;
}
.scorecard-right {
  flex: 1 1 45%;
}
.scorecard-right h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
}
.benefits {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
  margin-left: 0;
}
.benefits li {
  display: block;
  margin-bottom: 1.5rem;
  position: relative;
  padding-left: 0;
}
.benefits li > p:first-child {
  position: absolute;
  left: -50px;
  top: 0;
  width: 80px;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transform: translateX(-50%);
}
.benefits li > p:first-child img {
  width: auto;
  height: auto;
  max-width: none;
  display: block;
}
.benefits li > p:last-child {
  margin: 0;
  padding: 0;
  padding-left: 0;
  text-align: left;
}
.benefits p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
  color: white;
}

@media (max-width: 900px) {
  .ai-scorecard .container {
    flex-direction: column;
  }
  .scorecard-left,
  .scorecard-right {
    flex: 1 1 100%;
  }
  .scorecard-right {
    text-align: left;
  }
}

#block-coderoad-olivero-completeyourmaturitymap {
  margin-block-end: 0;
}

.progress-marker::before {
  content: none;
}
.progress-marker::after {
  content: none;
}

li.progress-step {
  background-color: #9F32FF19; 
  height: 10px;
  margin: 0 11px;
}
li.progress-step.is-complete,
li.progress-step.is-active {
  background-color: #9F32FF; 
  height: 10px;
  width: 152px;
  margin: 0 11px;
}

ul.webform-progress-tracker > li.progress-step:first-child {
  border-radius: 5px 0 0 5px;
}

ul.webform-progress-tracker > li.progress-step:last-child {
  border-radius: 0 5px 5px 0;
}


.webform-progress-tracker .progress-step .progress-text {
  padding: 16px 0;
}

.webform-confirmation .progress-step .progress-text {
  padding: 0;
}

.webform-progress__status {
  display: none;
}
ul.webform-progress-tracker {
  margin-top: 40px;
  margin-bottom: 80px;
}

.ai-roadmap-confirmation {
  background: #fff;
  color: #111;
  text-align: center;
  padding: 120px 20px;
}

.ai-roadmap-confirmation .content {
  max-width: 800px;
  margin: 0 auto;
}

.ai-roadmap-confirmation h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.ai-roadmap-confirmation p {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #333;
}

.ai-roadmap-confirmation strong {
  color: #7a3cff; /* Purple accent matching previous sections */
  font-weight: 600;
}

@media (max-width: 768px) {
  .ai-roadmap-confirmation h2 {
    font-size: 2rem;
  }

  .ai-roadmap-confirmation p {
    font-size: 1.05rem;
  }
}
.progress-tracker {
  display: flex;
  margin: 60px auto;
  padding: 0;
  list-style: none;
}

.progress-step {
  flex: 1 1 0%;
  margin: 0;
  padding: 0;
  min-width: 24px;
}

.progress-tracker--center {
  text-align: center;
}

.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
  border: solid 2px #181E26;
}

.webform-progress-tracker .progress-title[role="link"] {
  color: #181E26;
}