/* ====================
   Stafford Calculators
   ==================== */

/* Wrapper + design tokens (override these to theme) */
.calculator {
  /* Layout */
  --calc-max-width: 980px;
  --calc-gap: 1.6rem;
  --calc-section-gap: 1.6rem;

  /* Surfaces + borders */
  --calc-surface: #fff;
  --calc-surface-muted: rgba(0, 0, 0, 0.02);
  --calc-border-color: rgba(0, 0, 0, 0.12);
  --calc-border-color-strong: rgba(0, 0, 0, 0.16);
  --calc-border-color-hover: rgba(0, 0, 0, 0.28);
  --calc-border-style-muted: 1px dashed rgba(0, 0, 0, 0.18);

  /* Radius */
  --calc-radius: 16px;
  --calc-radius-input: 8px;
  --calc-radius-pill: 999px;

  /* Spacing */
  --calc-section-padding: 2.4rem;
  --calc-subsection-padding: 1.6rem;
  --calc-field-gap: 0.8rem;
  --calc-field-margin-top: 0.8rem;

  /* Typography */
  --calc-title-size: 2.4rem;
  --calc-subheading-size: 1.8rem;
  --calc-results-title-size: 2.4rem;
  --calc-body-size: 1.7rem;
  --calc-description-size: 1.5rem;
  --calc-help-size: 1.5rem;
  --calc-line-height: 1.8;
  --calc-help-opacity: 0.8;
  --calc-description-opacity: 0.85;

  /* Inputs */
  --calc-input-padding-y: 0.8rem;
  --calc-input-padding-x: 1.6rem;
  --calc-input-max-width: 520px;
  --calc-input-bg: #fff;
  --calc-input-border: 1px solid var(--calc-border-color-strong);

  /* Focus */
  --calc-focus-ring: 2px solid rgba(0, 0, 0, 0.5);
  --calc-focus-offset: 2px;

  /* Buttons (primary action button) */
  --calc-button-bg: #111;
  --calc-button-color: #fff;
  --calc-button-radius: var(--calc-radius);
  --calc-button-padding-y: 0.8rem;
  --calc-button-padding-x: 1.1rem;
  --calc-button-hover-brightness: 1.08;

  /* Affix (e.g. £ symbol pill) */
  --calc-affix-bg: rgba(0, 0, 0, 0.06);
  --calc-affix-padding-y: 0.25rem;
  --calc-affix-padding-x: 0.5rem;

  /* Button radios */
  --calc-radio-btn-padding-y: 0.55rem;
  --calc-radio-btn-padding-x: 0.8rem;
  --calc-radio-btn-bg: var(--calc-surface);
  --calc-radio-btn-bg-active: var(--calc-button-bg);
  --calc-radio-btn-color-active: var(--calc-button-color);

  /* Highlighted values in results */
  --calc-highlight-weight: 800;

  width: 100%;
  max-width: var(--calc-max-width);
  margin: 0 auto;
  font-size: var(--calc-body-size);
}

/* Form layout grid (sections + actions + results) */
.calculator__form {
  display: grid;
  gap: var(--calc-gap);
}

/* Primary section card wrapper */
.calculator__section {
  border: 1px solid var(--calc-border-color);
  border-radius: var(--calc-radius);
  padding: var(--calc-section-padding);
  background: var(--calc-surface);
}

/* Section header (title + description) */
.calculator__section-header {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Section title text */
.calculator__title {
  margin: 0;
  font-size: var(--calc-title-size);
  line-height: 1.2;
}

/* Section description text */
.calculator__description {
  margin: 0;
  font-size: var(--calc-description-size);
  line-height: 1.45;
  opacity: var(--calc-description-opacity);
  font-style: italic;
}

/* Fieldset reset (removes default browser chrome) */
.calculator__fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Fieldset legend text */
.calculator__legend {
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}

/* Repeatable subsections container (e.g. applicants) */
.calculator__subsections {
  display: grid;
  gap: var(--calc-section-gap);
  margin-top: 1rem;
}

/* Subsection card (e.g. applicant block) */
.calculator__subsection {
  border: var(--calc-border-style-muted);
  border-radius: var(--calc-radius);
  padding: var(--calc-subsection-padding);
  background: var(--calc-surface-muted);
}

/* Subsection heading */
.calculator__subheading {
  margin: 0 0 0.75rem;
  font-size: var(--calc-subheading-size);
}

/* Field wrapper (label + help + control) */
.calculator__field {
  margin-top: var(--calc-field-margin-top);
}

/* Field label text */
.calculator__label {
  display: block;
  font-weight: 600;
}

/* Field help/description text */
.calculator__help {
  margin: 0.35rem 0 0;
  font-weight: 400;
  font-size: var(--calc-help-size);
  line-height: 1.35;
  opacity: var(--calc-help-opacity);
}

/* Control wrapper (affix + input/select alignment) */
.calculator__control {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: var(--calc-field-gap);
}

/* Text inputs and selects */
.calculator__input,
.calculator__select {
  width: 100%;
  max-width: var(--calc-input-max-width);
  padding: var(--calc-input-padding-y) var(--calc-input-padding-x);
  border-radius: var(--calc-radius-input);
  border: var(--calc-input-border);
  background: var(--calc-input-bg);
  font: inherit;
}

/* Focus states for inputs and selects */
.calculator__input:focus,
.calculator__select:focus {
  outline: var(--calc-focus-ring);
  outline-offset: var(--calc-focus-offset);
  border-color: transparent;
}

/* Currency/affix pill (e.g. £) */
.calculator__affix {
  display: inline-block;
  width: fit-content;
  padding: var(--calc-affix-padding-y) var(--calc-affix-padding-x);
  border-radius: var(--calc-radius-pill);
  background: var(--calc-affix-bg);
  font-weight: 700;
  line-height: 1;
}

/* Actions row (Calculate/Recalculate button) */
.calculator__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-start;
}

/* Primary action button */
.calculator__button {
  appearance: none;
  border: 0;
  border-radius: var(--calc-button-radius);
  padding: var(--calc-button-padding-y) var(--calc-button-padding-x);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  background: var(--calc-button-bg);
  color: var(--calc-button-color);
}

/* Primary action hover */
.calculator__button:hover {
  filter: brightness(var(--calc-button-hover-brightness));
}

/* Primary action focus */
.calculator__button:focus {
  outline: var(--calc-focus-ring);
  outline-offset: var(--calc-focus-offset);
}

/* Results wrapper (output container) */
.calculator__results {
  border: 1px solid var(--calc-border-color);
  border-radius: var(--calc-radius);
  padding: var(--calc-section-padding);
  background: var(--calc-surface);
}

/* Results main heading */
.calculator__results-title {
  margin: 0 0 0.75rem;
  font-size: var(--calc-results-title-size);
  line-height: 1.2;
}

/* Results body text */
.calculator__results-text {
  margin: 0.5rem 0 0;
  line-height: var(--calc-line-height);
}

/* Secondary results panel (e.g. Maximum Loan Amount) */
.calculator__results-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--calc-border-color);
}

/* Secondary results panel title */
.calculator__results-panel-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

/* Highlighted values inside results copy */
.calculator .highlight {
  font-weight: var(--calc-highlight-weight);
  white-space: nowrap;
}

/* =========================================================
   Button Radios (native radio inputs, styled labels)
   - Used wherever you output input + label pairs
   ========================================================= */

/* Button radio group wrapper */
.calculator__radio-group--buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Visually hide the native radio but keep it accessible (keyboard/screen readers) */
.calculator__radio-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The visible "button" label for each radio */
.calculator__radio-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.5rem;
  padding: var(--calc-radio-btn-padding-y) var(--calc-radio-btn-padding-x);
  border-radius: var(--calc-radius-input);
  border: 1px solid var(--calc-border-color);
  background: var(--calc-radio-btn-bg);
  cursor: pointer;
  user-select: none;
  font-weight: 700;
}

/* Hover state for radio buttons */
.calculator__radio-button:hover {
  border-color: var(--calc-border-color-hover);
}

/* Selected state (driven by input:checked + label) */
.calculator__radio-input:checked + .calculator__radio-button {
  background: var(--calc-radio-btn-bg-active);
  color: var(--calc-radio-btn-color-active);
  border-color: transparent;
}

/* Focus state (keyboard focus is on the input; we display ring on the label) */
.calculator__radio-input:focus + .calculator__radio-button {
  outline: var(--calc-focus-ring);
  outline-offset: var(--calc-focus-offset);
}

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

/* Two-column subsection layout on medium+ screens (e.g. applicants) */
@media (min-width: 768px) {
  .calculator__subsections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calculator__input,
  .calculator__select {
    max-width: 100%;
  }
}

/* Slightly roomier cards on large screens */
@media (min-width: 1024px) {
  .calculator__section {
    padding: calc(var(--calc-section-padding) + 0.25rem);
  }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .calculator__button:hover {
    filter: none;
  }
}