/* ============================================================
   Illinois Paycheck Calculator — style.css
   ============================================================ */

/* ---- Smooth scrolling ---- */
html {
  scroll-behavior: smooth;
}

/* ---- Number / text inputs ---- */
.numinput {
  width: 100%;
  border: 1px solid #dde1e8;
  background: #fff;
  border-radius: 0.625rem;
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  color: #11284a;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.numinput:focus {
  border-color: #2f5f9a;
  box-shadow: 0 0 0 3px rgba(47, 95, 154, 0.25);
}

.with-prefix .numinput {
  padding-left: 1.75rem;
}

/* ---- Segmented Control (Radio Buttons) ---- */
.segmented-control {
  display: flex;
  background: #eef0f4; /* ink-100 */
  padding: 0.25rem;
  border-radius: 0.75rem;
  gap: 0.25rem;
}

.segmented-control label {
  flex: 1;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.segmented-control input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.segmented-control .sc-label {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #5a6373; /* ink-500 */
  transition: all 0.2s ease;
}

.segmented-control input[type="radio"]:checked + .sc-label {
  background: #fff;
  color: #11284a; /* navy-800 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.segmented-control input[type="radio"]:focus-visible + .sc-label {
  outline: 2px solid #2f5f9a;
  outline-offset: 2px;
}

/* ---- Input Group Transitions ---- */
.input-group {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
}

.input-group.active {
  grid-template-rows: 1fr;
  opacity: 1;
}

.input-group-inner {
  min-height: 0;
}

/* ---- Deductions Table (Alternating Rows) ---- */
.deductions-list > div:nth-child(even) {
  background-color: #f7f8fa; /* ink-50 */
}
.deductions-list > div {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  border-radius: 0.5rem;
}

/* ---- FAQ accordion ---- */
details > summary {
  list-style: none;
  cursor: pointer;
}

details > summary::-webkit-details-marker {
  display: none;
}

details[open] .faq-icon {
  transform: rotate(45deg);
}

.faq-icon {
  transition: transform 0.2s ease;
}

/* ---- Gradient utilities ---- */
.gradient-success {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.gradient-primary {
  background: linear-gradient(135deg, #0b1b33 0%, #1f4880 100%); /* Deepened the navy */
}

/* ---- Premium Shadows ---- */
.shadow-premium {
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.12), 0 4px 12px -5px rgba(15, 23, 42, 0.08);
}
.shadow-premium-hover:hover {
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.15), 0 8px 16px -8px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}