/* ==========================================================================
   ESTIMATED CALCULATOR TEMPLATE
   Reuses: .container, .theme-ribbon-title, .ribbon-title (color variants)
   Theme vars: --brand, --brand-yellow, --serif, --sans, --sans-condensed, --sans-alt

   Figma palette used:
   - field border         #BFBFBF
   - field bg             #FFFFFF
   - dollar prefix color  var(--brand)
   - totals row border    #BFBFBF
   - highlight total bg   #F4F3B8 (yellow-light)
   - final total bg       var(--brand) with white text
   ========================================================================== */

.estimated-calculator {
  padding: clamp(56px, 60px, 96px) 0 0;
  background: #FFFFFF;
}

.estimated-calculator__title {
  font-family: var(--serif);
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--brand);
  margin: 0 0 clamp(32px, 3.5vw, 56px);
}

/* ==========================================================================
   TABS — ribbon-style (pointed right edge), Full Year = blue, Semester = orange
   Inactive tab has reduced opacity.
   ========================================================================== */
.calc-tabs {
  display: flex;
  gap: clamp(48px, 20px, 80px); /* gap absorbs the pointed extension */
  flex-wrap: wrap;
  margin: 0 0 60px;
}
.calc-tab {
  position: relative;
  appearance: none;
  border: 0;
  margin: 0;
  padding: clamp(14px, 1.4vw, 20px) clamp(24px, 2vw, 28px);
  font-family: var(--sans-condensed);
  color: #FFFFFF;
  background: #037ABF;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity .2s ease;
  clip-path: polygon(100% 0, 100% 65%, 95% 100%, 0 100%, 0 0);
  font-size: 62px;
  font-style: normal;
  font-weight: 700;
  line-height: 126%; /* 78.12px */
  letter-spacing: 1.86px;
  text-transform: uppercase;
}
.calc-tab::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% - 1px);
  width: clamp(32px, 3.5vw, 56px);
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 10% 100%, 0 100%);
}

/* Per-tab colors */
.calc-tab[data-tab="full"]     { background: #037ABF; }
.calc-tab[data-tab="semester"] { background: #F26836; }

/* States */
.calc-tab.is-active { opacity: 1; }
.calc-tab:hover     { opacity: 0.75; }
.calc-tab.is-active:hover { opacity: 1; }

.calc-tab:focus-visible {
  outline: 2px solid var(--brand-yellow);
  outline-offset: 3px;
}

.theme-ribbon-title {
  padding-top: 0
}

/* ==========================================================================
   PANELS
   ========================================================================== */
.calc-panel { display: none; }
.calc-panel.is-active { display: block; }

/* ==========================================================================
   SECTION WRAPPER
   Overrides default .theme-ribbon-title spacing to better fit the calculator.
   ========================================================================== */
.calc-section.theme-ribbon-title {
}
.calc-section .ribbon-title {
  letter-spacing: 2.5px;
  max-width: 800px;
}

.calc-section__intro {
  font-family: var(--sans-alt);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--brand);
  margin: 0 0 60px;
  

/* MSSF H3 */
  font-size: 32px;
  font-style: normal;
  font-weight: var(--font-weight-500, 500);
  line-height: 150%; /* 63px */
}

/* ==========================================================================
   FIELDS — single column; each field stacks its label on top, input below
   ========================================================================== */
.calc-form {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 32px);
  margin-bottom: 100px;
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calc-field__label {
  font-family: var(--sans);
  color: var(--brand);
  

/* MSSF H3 */
  font-size: 28px;
  font-style: normal;
  font-weight: var(--font-weight-500, 500);
  line-height: 150%; /* 63px */
}

.calc-field__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.calc-field__prefix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans-condensed);
  color: #F26836;
  pointer-events: none;
  :;ektorat Text var";
  font-size: var(--font-size-42, 42px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 63px */
}
.calc-field__input {
  width: 100%;
  padding: 12px 34px 12px 14px;
  font-family: var(--sans);
  :;
  d);
  background: #FFFFFF;
  border: 2px solid #BFBFBF;
  border-radius: 4px;
  line-height: 1.2;
  text-align: left;
  transition: border-color .2s ease;
  font-size: 25px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 63px */
}
.calc-field__input::placeholder {
  color: #9A9A9A;
  font-weight: 400;
}
.calc-field__input:focus {
  outline: none;
  border-color: var(--brand);
}

/* Composite field: one rounded container with a name input + a value input ($) */
.calc-field--composite .calc-field__composite {
  display: flex;
  align-items: stretch;
  background: #FFFFFF;
  border: 2px solid #BFBFBF;
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .2s ease;
}
.calc-field--composite .calc-field__composite:focus-within {
  border-color: var(--brand);
}
.calc-field--composite .calc-field__input {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.calc-field--composite .calc-field__input:focus { border: 0; }
.calc-field--composite .calc-field__input--name {
  flex: 1 1 auto;
  min-width: 0;
}
.calc-field--composite .calc-field__value-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: clamp(160px, 28%, 240px);
  border-left: 2px solid #BFBFBF;
}
.calc-field--composite .calc-field__input--value {
  width: 100%;
  padding: 12px 34px 12px 14px;
  text-align: left;
}
.calc-field--composite .calc-field__prefix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans-condensed);
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 700;
  pointer-events: none;
}

/* ==========================================================================
   ADD BUTTON (Scholarship / Grant) — full-width, light bg, + after text.
   Color of text + plus follows the active panel (blue for full, orange for semester).
   ========================================================================== */
.calc-add {
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #EDF3F9;
  border: 1px solid #D8E4EF;
  border-radius: 6px;
  padding: 16px 22px;
  font-family: var(--sans);
  color: #037ABF;
  cursor: pointer;
  margin-bottom: 100px;
  transition: background .2s ease;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 63px */
}
.calc-add:hover {
  background: #DCE8F2;
}
.calc-add__plus {
  display: inline-block;
  background: transparent;
  color: inherit;
  font-family: var(--sans);
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1;
}

/* ==========================================================================
   TOTALS
   Regular totals: yellow band with dark-green uppercase condensed label/value.
   ========================================================================== */
.calc-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  padding: 30px 20px;
  background: #F4F3B8;
  border-top: 0;
  margin-top: 60px;
}
.calc-total__label {
  font-family: var(--sans-condensed);
  color: var(--brand);
  line-height: 1.3;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 25px; /* 54.348% */
  letter-spacing: 3.68px;
  text-transform: uppercase;
}
.calc-total__value {
  font-family: var(--sans-condensed);
  color: var(--brand);
  line-height: 1.3;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 25px; /* 54.348% */
  letter-spacing: 3.68px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Summary block (Scholarships & Grants) — stack 3 totals with no gap
   All 3 totals share a light-green background with dark-green text. */
.calc-summary {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.calc-summary .calc-total {
  margin-top: 0;
  background: #CDE7CA;          /* light green */
  border-top: 0;
  padding: clamp(16px, 1.6vw, 24px) clamp(16px, 1.6vw, 24px);
}
.calc-summary .calc-total__label,
.calc-summary .calc-total__value {
  color: #004F42;               /* dark green */
}

/* Highlight total — emphasized row within the green summary */
.calc-summary .calc-total--highlight {
  padding: clamp(20px, 1.9vw, 28px) clamp(16px, 1.6vw, 24px);
}
.calc-summary .calc-total--highlight .calc-total__label {
  font-weight: 700;
}

/* Final total — brand background with white text */
.calc-total--final {
  background: var(--brand);
  border-top: 0;
  padding: clamp(22px, 2.2vw, 32px) clamp(20px, 2vw, 32px);
  margin-top: clamp(16px, 1.6vw, 24px);
}
.calc-total--final .calc-total__label {
  font-family: var(--sans-condensed);
  color: #FFF;
  font-size: 46px;
  font-style: normal;
  font-weight: 700;
  line-height: 25px; /* 54.348% */
  letter-spacing: 3.68px;
  text-transform: uppercase;
}
.calc-total--final .calc-total__value {
  font-size: clamp(28px, 2.8vw, 44px);
  color: #fff;
}

/* ==========================================================================
   PANEL COLOR THEMING
   Dollar signs ($), the Add button tint, and the final total band follow the
   tab colors: Full Year = blue (#037ABF), Semester = orange (#F26836).
   Regular totals keep their shared yellow band regardless of panel.
   ========================================================================== */

/* --- FULL YEAR (blue) --- */
.calc-panel[data-panel="full"] .calc-field__prefix { color: #037ABF; }

.calc-panel[data-panel="full"] .calc-add {
  background: #EDF3F9;
  border-color: #D8E4EF;
  color: #037ABF;
}
.calc-panel[data-panel="full"] .calc-add:hover { background: #DCE8F2; }

.calc-panel[data-panel="full"] .calc-total--final { background: #037ABF; }

/* --- SEMESTER (orange) --- */
.calc-panel[data-panel="semester"] .calc-field__prefix { color: #F26836; }

.calc-panel[data-panel="semester"] .calc-add {
  background: #FCF0EB;
  border-color: #F7D8C7;
  color: #F26836;
}
.calc-panel[data-panel="semester"] .calc-add:hover { background: #F9E3D3; }

.calc-panel[data-panel="semester"] .calc-total--final { background: #F26836; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
.calc-questions { margin: 60px 0 0; }
@media (max-width: 1600px) {
  .calc-summary { gap: 60px }
  .calc-tab {
    font-size: 4vw
  }
  .calc-field__label,
  .calc-field__input,
  .calc-total__label,
  .calc-total__value,
  .calc-add,
  .calc-total--final .calc-total__label,
  .calc-section__intro {font-size: 24px;}
  .calc-questions { margin: 40px 0 0; }
}
@media (max-width: 1200px) {
  .calc-summary { gap: 40px }
  .calc-tabs {
    justify-content: center;
    gap: 20px;
  }
  .calc-tab {
    font-size: 3vw
  }
  .calc-field__label,
  .calc-field__input,
  .calc-total__label,
  .calc-total__value,
  .calc-add,
  .calc-total--final .calc-total__label,
  .calc-section__intro { font-size: 22px; }
  .calc-section__intro { margin: 0 0 30px; }
  .calc-questions {  font-size: 22px; }
}
@media (max-width: 768px) {
  .calc-summary { gap: 20px }
  .calc-total__label,
  .calc-total__value,
  .calc-add,
  .calc-field__input {font-size: 18px;}
  .calc-field__input {margin: 0 0 10px;}
  .calc-section__intro {font-size: 18px;margin: 0 0 30px;}
  .calc-tabs {
    margin: 0 0 20px
  }
  .calc-tab {
    font-size: 2vw
  }
  .calc-section.theme-ribbon-title {
    padding: 0 0 40px;
  }
  .calc-section .ribbon-title {
    max-width: 100%;
    margin-bottom: 24px;
    font-size: 26px;
  }
  .calc-questions { margin: 30px 0 0; }
}

@media (max-width: 640px) {
  .estimated-calculator { padding: 40px 0 0; }
  .calc-tabs {
    gap: 10px;
  }
  .calc-tab {
    padding: 12px 18px;
    letter-spacing: 0;
    font-size: 14px;
  }
  .calc-form {
    gap: 16px;
    margin: 0 0 40px;
  }
  .calc-total {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 30px 0 0;
  }
  .calc-total--final {
    padding: 20px;
  }
}