/*
  MDC Website v2.0 — Sprint 8 UI, Accessibility & Form Polish
  Purpose: improve visible borders, accessible focus states, QA cards, and launch-readiness pages.
*/

:root {
  --mdc-input-border: #6b7a90;
  --mdc-input-border-strong: #0b5d6c;
  --mdc-input-bg: #ffffff;
  --mdc-input-shadow: 0 0 0 1px rgba(8, 44, 74, 0.08), 0 8px 22px rgba(8, 44, 74, 0.06);
  --mdc-input-focus-ring: 0 0 0 4px rgba(11, 93, 108, 0.18);
  --mdc-danger: #b42318;
  --mdc-success: #087443;
}

/* Stronger form visibility — requested fix for general enquiry form boxes */
.intake-form input,
.intake-form select,
.intake-form textarea,
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  border: 2px solid var(--mdc-input-border) !important;
  background: var(--mdc-input-bg) !important;
  box-shadow: var(--mdc-input-shadow);
  min-height: 48px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .2s ease;
}

.intake-form textarea,
textarea {
  min-height: 150px;
  line-height: 1.55;
}

.intake-form label,
.form-label {
  color: var(--color-primary);
}

.intake-form label span,
.required-note {
  color: var(--mdc-danger);
  font-weight: 800;
}

.intake-form input:hover,
.intake-form select:hover,
.intake-form textarea:hover,
input:hover,
select:hover,
textarea:hover {
  border-color: var(--mdc-input-border-strong) !important;
}

.intake-form input:focus,
.intake-form select:focus,
.intake-form textarea:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--color-secondary) !important;
  box-shadow: var(--mdc-input-focus-ring), var(--mdc-input-shadow) !important;
  background: #ffffff !important;
}

.intake-form input:required:valid,
.intake-form textarea:required:valid,
.intake-form select:required:valid {
  border-color: rgba(8, 116, 67, .8) !important;
}

.intake-form input:user-invalid,
.intake-form textarea:user-invalid,
.intake-form select:user-invalid {
  border-color: var(--mdc-danger) !important;
}

.form-status-panel {
  border: 2px solid rgba(11, 93, 108, .28);
  background: #eef8f7;
}

.form-status-panel.is-success {
  border-color: rgba(8, 116, 67, .55);
  color: var(--mdc-success);
  background: #eefaf3;
}

.form-status-panel.is-error {
  border-color: rgba(180, 35, 24, .55);
  color: var(--mdc-danger);
  background: #fff1f0;
}

/* More visible cards and panels */
.route-card,
.sidebar-box,
.partner-card,
.package-card,
.process-step,
.publication-card,
.project-card,
.course-card,
.service-card,
.value-card,
.team-card {
  border-color: rgba(8, 44, 74, .18) !important;
}

.route-card:hover,
.partner-card:hover,
.package-card:hover,
.process-step:hover,
.project-card:hover,
.course-card:hover,
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(8, 44, 74, .12);
}

/* Sprint 8 QA pages */
.qa-hero {
  background: radial-gradient(circle at top right, rgba(216,166,74,.18), transparent 35%), linear-gradient(135deg, var(--color-primary), #0b5d6c);
  color: #fff;
}

.qa-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.qa-card {
  background: #fff;
  border: 1.5px solid rgba(8, 44, 74, .16);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.qa-card h3 { color: var(--color-primary); }
.qa-card p, .qa-card li { color: var(--color-text-muted); }
.qa-card ul { padding-left: 1.2rem; }

.checklist {
  display: grid;
  gap: .85rem;
}

.check-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  padding: 1rem;
  border: 1.5px solid rgba(8, 44, 74, .16);
  border-radius: var(--radius-lg);
  background: #fff;
}

.check-mark {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(11, 93, 108, .1);
  color: var(--color-secondary);
  font-weight: 900;
}

.visual-swatch-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.visual-swatch {
  min-height: 120px;
  border-radius: var(--radius-xl);
  padding: 1rem;
  display: flex;
  align-items: end;
  font-weight: 900;
  border: 1px solid rgba(8, 44, 74, .15);
}

.swatch-primary { background: var(--color-primary); color:#fff; }
.swatch-secondary { background: var(--color-secondary); color:#fff; }
.swatch-gold { background: var(--color-gold); color:var(--color-primary); }
.swatch-soft { background: var(--color-soft); color:var(--color-primary); }
.swatch-white { background:#fff; color:var(--color-primary); }

/* Keyboard accessibility */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 4px solid rgba(216, 166, 74, .75);
  outline-offset: 4px;
}

@media (max-width: 1000px) {
  .qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visual-swatch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .qa-grid, .visual-swatch-grid { grid-template-columns: 1fr; }
  .intake-card { padding: 1.1rem; }
  .intake-form input, .intake-form select, .intake-form textarea { font-size: 1rem; }
}