/* ===== /start page styles ===== */
/* Builds on top of ../css/styles.css design system */

/* Header */
.start-header {
  padding-top: calc(var(--nav-height) + var(--space-12));
  padding-bottom: var(--space-8);
  text-align: center;
}

.start-header h1 {
  font: var(--text-h1);
  margin-bottom: var(--space-3);
}

.start-header__sub {
  font: var(--text-body-lg);
  color: var(--color-text-secondary);
  max-width: 540px;
  margin-inline: auto;
}

/* Two-column layout */
.start-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-16);
  max-width: 1000px;
  margin-inline: auto;
}

/* Form column */
.start-form {
  min-width: 0;
}

/* Step titles */
.step__title {
  font: var(--text-h3);
  color: var(--color-text);
  margin-bottom: var(--space-6);
  padding: 0;
  border: none;
}

/* Step visibility */
.step {
  display: none;
  border: none;
  padding: 0;
  margin: 0;
}

.step--active {
  display: block;
}

/* Progress bar */
.start-progress {
  margin-bottom: var(--space-8);
}

.start-progress__label {
  display: flex;
  justify-content: space-between;
  font: var(--text-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.start-progress__bar {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}

.start-progress__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Resume banner */
.start-resume {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}

.start-resume p {
  font: var(--text-body);
  font-weight: 500;
  margin-bottom: var(--space-3);
}

.start-resume__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Small button variant */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font: var(--text-small);
  font-weight: 500;
  min-height: 36px;
}

/* Form navigation */
.start-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-6);
  gap: var(--space-4);
}

.start-nav .btn-primary,
.start-nav .btn-accent {
  margin-left: auto;
}

/* Radio & checkbox groups */
.radio-group,
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--text-body);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color 0.15s;
}

.radio-option:hover,
.checkbox-option:hover {
  background: var(--color-surface);
}

.radio-option input,
.checkbox-option input {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Checkbox label within form-group */
.form-label--checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font: var(--text-body);
}

.form-label--checkbox input {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Nested fieldsets for radio/checkbox groups */
.form-group--radio,
.form-group--checkbox,
.form-group--vibe {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
}

/* Form hint */
.form-hint {
  font: var(--text-small);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* ===== Vibe Picker ===== */
.start-vibe-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.start-vibe-card {
  position: relative;
  cursor: pointer;
}

.start-vibe-card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.start-vibe-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  min-height: 120px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  text-align: center;
}

.start-vibe-card:hover .start-vibe-card__inner {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.start-vibe-card input:focus-visible + .start-vibe-card__inner {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.start-vibe-card input:checked + .start-vibe-card__inner {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.start-vibe-card__name {
  font: var(--text-small);
  font-weight: 600;
  color: var(--color-text);
}

.start-vibe-card__sample {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

/* Individual vibe card styles */
.start-vibe-card--modern .start-vibe-card__inner {
  background: #ffffff;
  border-color: #E0E0E0;
}
.start-vibe-card--modern .start-vibe-card__sample {
  font-family: var(--font-sans);
  color: #333;
  letter-spacing: -0.02em;
}

.start-vibe-card--bold .start-vibe-card__inner {
  background: #1a1a2e;
  border-color: #1a1a2e;
}
.start-vibe-card--bold .start-vibe-card__name {
  color: #ffffff;
}
.start-vibe-card--bold .start-vibe-card__sample {
  color: #ffffff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.start-vibe-card--warm .start-vibe-card__inner {
  background: #FFF5EE;
  border-color: #F5D5C5;
  border-radius: 16px;
}
.start-vibe-card--warm .start-vibe-card__sample {
  color: var(--color-accent);
}

.start-vibe-card--earthy .start-vibe-card__inner {
  background: #E8EDE5;
  border-color: #C5D1BF;
}
.start-vibe-card--earthy .start-vibe-card__sample {
  color: #3D5A3A;
}

.start-vibe-card--classic .start-vibe-card__inner {
  background: #F0F0F0;
  border-color: #CCCCCC;
}
.start-vibe-card--classic .start-vibe-card__name {
  color: #2C3E50;
}
.start-vibe-card--classic .start-vibe-card__sample {
  font-family: Georgia, 'Times New Roman', serif;
  color: #2C3E50;
  letter-spacing: 0.02em;
}

.start-vibe-card--creative .start-vibe-card__inner {
  background: linear-gradient(135deg, #FFF5F5 0%, #F0F0FF 100%);
  border-color: #D4B5FF;
  position: relative;
  overflow: hidden;
}
.start-vibe-card--creative .start-vibe-card__inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF6B6B, #A855F7, #3B82F6);
}
.start-vibe-card--creative .start-vibe-card__sample {
  color: #A855F7;
  font-style: italic;
}

/* Checked states preserve vibe-specific backgrounds */
.start-vibe-card--bold input:checked + .start-vibe-card__inner {
  background: #1a1a2e;
  border-color: var(--color-primary);
}
.start-vibe-card--warm input:checked + .start-vibe-card__inner {
  background: #FFF5EE;
  border-color: var(--color-primary);
}
.start-vibe-card--earthy input:checked + .start-vibe-card__inner {
  background: #E8EDE5;
  border-color: var(--color-primary);
}
.start-vibe-card--classic input:checked + .start-vibe-card__inner {
  background: #F0F0F0;
  border-color: var(--color-primary);
}
.start-vibe-card--creative input:checked + .start-vibe-card__inner {
  background: linear-gradient(135deg, #FFF5F5 0%, #F0F0FF 100%);
  border-color: var(--color-primary);
}

/* ===== Calendly Sidebar ===== */
.start-call {
  order: 2;
}

.start-call__card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.start-call__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
  color: var(--color-primary);
  margin: 0 auto var(--space-4);
}

.start-call__card h3 {
  font: var(--text-h4);
  margin-bottom: var(--space-2);
}

.start-call__card p {
  font: var(--text-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.start-call__btn {
  width: 100%;
}

.start-call__note {
  font: var(--text-small);
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
}

.start-call__note a {
  font-weight: 500;
}


/* ===== Thank You ===== */
.start-thankyou {
  text-align: center;
  padding: calc(var(--nav-height) + var(--space-12)) var(--space-6) var(--space-12);
}

.start-thankyou__inner {
  max-width: 480px;
  margin-inline: auto;
}

.start-thankyou svg {
  color: var(--color-primary);
  margin: 0 auto var(--space-4);
}

.start-thankyou h2 {
  font: var(--text-h2);
  margin-bottom: var(--space-3);
}

.start-thankyou p {
  font: var(--text-body-lg);
  color: var(--color-text-secondary);
}

/* ===== Slim Footer ===== */
.start-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-6) 0;
  text-align: center;
  font: var(--text-small);
  color: var(--color-text-secondary);
}

.start-footer .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.start-footer a {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.start-footer a:hover {
  color: var(--color-primary);
}

/* ===== Form submit error (same as contact form) ===== */
.form-submit-error {
  font: var(--text-small);
  color: var(--color-error);
  margin-top: var(--space-2);
  display: none;
}

/* ===== Responsive ===== */

/* Vibe picker: 3 columns at 480px+ */
@media (min-width: 480px) {
  .start-vibe-picker {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet: two-column layout */
@media (min-width: 768px) {
  .start-layout {
    grid-template-columns: 1fr 320px;
    gap: var(--space-8);
  }

  .start-call {
    order: 0;
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
    align-self: start;
  }

}

/* Desktop: comfortable max-width */
@media (min-width: 1024px) {
  .start-layout {
    max-width: 1000px;
  }
}

/* Mobile: show divider, reorder */
@media (max-width: 767px) {
  .start-call {
    order: 2;
  }

}