/* Inflation & Retirement Calculator - layout and styling */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.c-matter--article .c-matter__body {
  width: 1000px;
}
@media (max-width: 1200px) {
  .c-matter--article .c-matter__body {
      width: 100%;
  }
}

/* Theme colors */
.irc-body {
  --irc-accent: #0d6b5c;
  --irc-accent-light: #e8f2f1;
  --irc-accent-dark: #084a41;
  --irc-surface: #f8faf9;
  --irc-surface-elevated: #fff;
  --irc-border: #c5d5d2;
  --irc-border-focus: #0d6b5c;
  --irc-text: #1b302c;
  --irc-text-muted: #4a6561;
  --irc-years-green: #0d8050;
  --irc-years-yellow: #ae780d;
  --irc-years-red: #b52c26;
  min-height: 100vh;
  /* padding: 1rem; */
  color: var(--irc-text);
}

.irc-introduction {
  text-align: center;;
}

@media (min-width: 769px) {
  .irc-body {
    /* padding: 2rem; */
  }
}

.irc-container {
  max-width: 1170px;
  margin: 0 auto;
  position: relative;
}

.irc-header {
  margin-bottom: 1.5rem;
}

.irc-header h1 {
  margin-bottom: 0.5rem;
  color: var(--irc-text);
}

.irc-header p {
  color: var(--irc-text-muted);
}

.irc-calculator-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 1025px) {
  .irc-calculator-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

/* Input section (left on desktop) */
.irc-input-section {
  padding: 1.5rem;
  background: var(--irc-surface-elevated);
  border: 1px solid var(--irc-border);
  border-radius: 12px;
}

.irc-input-section, .irc-results-section {
  background: #f7fafc;
  border: 2px solid #f3f4f6;
  border-radius: 8px;
  padding: 24px;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  height: fit-content;
}

@media (min-width: 769px) {
  .irc-input-section {
    padding: 2rem;
  }
}
.irc-input-section h2, .irc-results-section h2 {
  margin-top: 0;
}
.irc-input-section h2 {
  margin-bottom: 1rem;
  color: var(--irc-accent-dark);
}

.irc-disclaimer {
  margin-bottom: 1.25rem;
  opacity: 0.85;
  color: var(--irc-text-muted);
}

.irc-slider-header label {
  color: var(--irc-text);
}

.irc-input-group {
  margin-bottom: 2.5rem;
}

.irc-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.irc-slider-header label {
  flex: 1;
  min-width: 0;
}

.irc-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--irc-border);
  border-radius: 4px;
  min-width: 6rem;
  text-align: center;
  width: 30%;
  background: var(--irc-surface);
  color: var(--irc-text);
}

.irc-input::placeholder {
  color: var(--irc-text-muted);
  opacity: 0.6;
}

.irc-input:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-color: var(--irc-border-focus);
}

.irc-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--irc-border);
  -webkit-appearance: none;
  appearance: none;
  margin: 0.5rem 0;
}

.irc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--irc-accent);
  cursor: pointer;
  margin-top: 0;
}

.irc-slider::-webkit-slider-thumb:hover {
  background: var(--irc-accent-dark);
}

.irc-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--irc-accent);
  cursor: pointer;
  border: none;
}

.irc-slider::-moz-range-thumb:hover {
  background: var(--irc-accent-dark);
}

.irc-slider-labels {
  display: flex;
  justify-content: space-between;
  opacity: 0.8;
  margin-top: 0.25rem;
  color: var(--irc-text-muted);
}

/* Results section (right on desktop) */

@media (min-width: 769px) {
  .irc-results-section {
    padding: 2rem;
  }
}

.irc-results-section h2 {
  margin-bottom: 1rem;
  color: var(--irc-accent-dark);
}

.irc-result-block {
  margin-top: 1.25rem;
  /* padding-left: 0.75rem; */
  padding: .25rem 0.75rem;
  border-radius: 8px;
  /* border: 2px solid #f3f4f6; */
  border-left: 5px solid var(--irc-accent-light);
  background: #fff;
  
}

.irc-result-block:first-of-type {
  margin-top: 0;
}

.irc-result-block.irc-years-green {
  border-left-color: var(--irc-years-green);
  background-color: #e9fff6;
}

.irc-result-block.irc-years-yellow {
  border-left-color: var(--irc-years-yellow);
  background-color: #fff1d5;
}

.irc-result-block.irc-years-red {
  border-left-color: var(--irc-years-red);
  background-color: #fff4f4;
}

/* Years result block: background image with tinted overlay */
.irc-result-block-years {
  position: relative;
  background-image: url('https://fmg-websites-custom.s3.amazonaws.com/calculators/inflationAndRetirement/images/calendar-comp-2.jpg');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  background-color: transparent;
}

.irc-result-block-years.irc-years-green {
  background-color: transparent;
}

.irc-result-block-years.irc-years-yellow {
  background-color: transparent;
}

.irc-result-block-years.irc-years-red {
  background-color: transparent;
}

.irc-result-block-years::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 8px;
  pointer-events: none;
  background-color: #fff;
  opacity: 0.85;
}

.irc-result-block-years.irc-years-green::before {
  background-color: #e9fff6;
  opacity: 0.85;
}

.irc-result-block-years.irc-years-yellow::before {
  background-color: #fff1d5;
  opacity: 0.85;
}

.irc-result-block-years.irc-years-red::before {
  background-color: #fff4f4;
  opacity: 0.85;
}

.irc-result-block-years .irc-headline,
.irc-result-block-years .irc-headline-value {
  position: relative;
  z-index: 1;
}

.irc-headline {
  margin-bottom: 0.25rem;
  color: var(--irc-text-muted);
  font-size: 1rem;
}

.irc-headline-value {
  margin-bottom: 0.5rem;
  /* color: var(--irc-text); */
  color: var(--irc-accent);
  font-size: 2rem;
  font-weight: bold;
  margin-top: 0;
}

.irc-years-value.irc-years-green {
  color: var(--irc-years-green);
}

.irc-years-value.irc-years-yellow {
  color: var(--irc-years-yellow);
}

.irc-years-value.irc-years-red {
  color: var(--irc-years-red);
}

.irc-interpretation {
  margin-bottom: 0.75rem;
  opacity: 0.9;
  color: var(--irc-text-muted);
}

.irc-results-message {
  margin-top: 1.5rem;
  margin-bottom: 0;
  opacity: 0.9;
  color: var(--irc-text-muted);
  border-left: 5px solid var(--irc-accent);
  padding: 1rem;
  background: #fff;
}

.irc-actions {
  margin-top: 2rem;
  display: flex;
  /* flex-wrap: wrap; */
  gap: 0.75rem;
  width: 100%;
}

.irc-actions .irc-btn {
  flex: 1 1 0;
  min-width: 0;
}

.irc-btn:focus {
  outline: 2px solid var(--irc-border-focus);
  outline-offset: 2px;
}

.irc-btn-primary {
  background: var(--irc-accent);
  border-color: var(--irc-accent);
  color: #fff;
}

.irc-btn-secondary {
  background: transparent;
  border-color: var(--irc-accent);
  color: var(--irc-accent);
}

/* Error state for inputs */
.irc-input.irc-error {
  border-color: var(--irc-years-red);
  background: rgba(181, 44, 38, 0.06);
}

.irc-error-msg {
  margin-top: 0.25rem;
  color: var(--irc-years-red);
}