/* Section 1 */
.c-program-banner {
    padding: var(--space-l-xl) var(--space-l-3xl) 0;
    --background-image:url("../assets/loan-programs/top-banner.png");
}

.c-program-banner__title span {
    display: block;
}
.c-program-banner__subtitle {
    margin-block-start:var(--space-xs);
}

.c-program-banner__wrapper {
    display: flex;
    box-sizing: border-box;
    border-radius: 20px;
    background-size: cover;
    align-items: flex-end;
    background-size: cover;
    background-position:center center;
    background-image: var(--background-image);
    --gutter:var(--space-m-xl);
    min-height: min(570px, 50vh);
}

.c-program-banner__columns {
    padding-block: var(--space-m-xl);
    min-width:min(450px, 100%);
    box-sizing: border-box;
}

@media(max-width: 768px) {
    .c-program-banner__columns {
        flex-basis:auto;
        margin-inline:auto;
    }

    .c-program-banner__wrapper {
        --color-overlay: rgba(71,119,61,.75);
        background-image: linear-gradient( var(--color-overlay), var(--color-overlay) ), var(--background-image);
        background-blend-mode: overlay;
    }
}

/* Section 2 */
.c-program-intro {
    padding-block:var(--space-xl);
}

.c-program-intro__column--2 {
    padding:var(--space-m);
    background:var(--powder);
    border-radius: var(--space-2xs);
    filter:drop-shadow(var(--drop-shadow));
}

.c-program-intro__buttons {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-content: center;
    column-gap: var(--space-m);
    row-gap:var(--space-xs);
    margin-block-end: var(--space-xs);
}

/* Green BG Component */
.c-background-color {
    padding:var(--space-s-m);
    border-radius: var(--space-2xs);
    margin-block:var(--space-l);
    filter:drop-shadow(var(--drop-shadow));
}
.c-background-color--green {
    background:var(--corporategreen);
    color:var(--white);
}

/* Titles */
.c-program-section h2 {
    color:var(--fire);
    margin-block:var(--space-l);
}
#c-program-section--2 h2:first-of-type {
    margin-block-start:0;
}
.c-program-section h4 {
    font-family: var(--libre);
    font-weight:700;
    color:var(--pine);
    margin-block-start:var(--space-l);
}

.c-program-section div + ul {
    margin-block-start:var(--space-s);
}

.c-program-section ol li::marker {
    font-weight:700;
}

/* Form */
.c-program-intro-form {
    overflow-x:auto;
    margin:0 auto;
    position:relative;
    display: flex;
    flex-direction: column;

    /* https://isellsoap.net/articles/overview-css-scrolling-shadows-and-content-fading-techniques/ */
    --mask-height:var(--space-s);
    --direction:right;
    mask-image: linear-gradient(
        to var(--direction, bottom),
        transparent,
        #000 var(--mask-height),
        #000 calc(100% - var(--mask-height)),
        transparent
    );
    mask-repeat: no-repeat;
    mask-size: 100% 100%;

    /* test thoroughly */
    height:max-content;
}
/* inherit privacy form stylings */
.c-program-intro-form__form {
    height: auto;
    width: 100%;
    padding-block:0;
    padding-inline:var(--space-s);
}

@media (max-width: 500px) {
    
    .c-program-intro-form {
        padding-inline:calc(var(--mask-height) - var(--space-s));
    }

}

.c-program-intro-form__checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:var(--space-xs);
  row-gap: var(--space-3xs); /* or even 4px for tighter layout */
  margin-block-end:var(--space-s);
}

.c-program-intro-form--checkbox {
    background: unset;
    border-radius: unset;
    box-shadow: unset;
    margin-block:var(--space-3xs);
}

.c-program-intro-form__grid {
    display:grid;
    gap: var(--space-xs);
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow:row;
    align-items: flex-start;
}
.c-program-intro-form__row {
    background-color:var(--white);
    border-radius:5px;
    grid-column: span 4;
    padding-block-end:var(--space-3xs);
}
.c-program-intro-form__row--2 {
    grid-column: span 2;
}
.o-privacy-form__label {
    color:#9D9D9C;
    font-size:var(--step--2);
    margin-inline-start: var(--space-xs);
    margin-block-end:var(--space-xs);
    font-style: italic;
    font-weight: 900;
}
.o-privacy-form__label span,
.c-program-intro-form--checkbox span {
    color:red;
}
.o-privacy-form__input, .o-privacy-form__select {
    border:none;
    outline:none;
    padding:0;
}
.o-privacy-form__input-wrapper {
    display:flex;
    align-items: center;
    flex-wrap:wrap;
    padding:var(--space-2xs);
    padding-block-end:0;
}
form input[type="radio"], form input[type="checkbox"], .c-program-intro-form--checkbox {
    margin-inline-start:var(--space-xs);
}
form input[type="radio"] {
    width:1em;
    height:1em;
    accent-color: var(--corporategreen);
}

.just-validate-error-label {
    margin-block-start:var(--space-3xs);
    font-style: italic;
}

#c-program-intro-form__button--submit {
    xpointer-events: none;
    font-style: italic;
}

.c-program-intro-form__label {
    margin-block:var(--space-2xs) 0;
    grid-column: span 4;
    text-wrap:unset;
}

.o-privacy-form__button {
    margin-inline:auto 0;
}

.o-privacy-form__dislaimer {
    margin-block-start:var(--space-2xs);
    font-size:var(--step--2);
}

.c-program-intro-form__label--checklist {
  margin:0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  grid-column: span 1;
  font-size:var(--step-0);
}

@media (max-width: 768px) {
    
}

/* Section 3 */
.c-program-body__wrapper {
    align-items: stretch;
}

.c-program-body__column--1 {
    flex-basis: calc( 30% - var(--space-l) );
    min-width: min(250px, 100%);
}
.c-program-body__column--2 {
    flex-basis: calc( 70% - var(--space-l) );
}

/* Table Stylings */
.c-program-chart {
    max-width:100%;
    margin-block:var(--space-m);
    overflow-x:auto;
}
.c-program-chart table {
    border-collapse: collapse;
    min-width:450px;
    /* TODO Make this a variable */
}
.c-program-chart th, 
.c-program-chart td {
    padding:var(--space-s);
    border:2px solid var(--pine);
}
.c-program-chart th {
    color:var(--white);
    background:var(--corporategreen);
}
.c-program-chart td {
    background:var(--powder);
}
.c-program-chart .c-program-chart__highlight {
    background:var(--medallion);
}

/* List Styling */
.c-program__list--checkmark {
    list-style-type:'✓';
}
.c-program__list--checkmark li {
    padding-left:10px;
}

.c-program__list--large li::marker,
.c-program__list--large li b {
    font-size:var(--step-1);
}
.c-program__list--large li b {
    display: block;
}

/* Section Menu */
.c-program-menu {
    position: relative;
    padding-inline-end: var(--space-s);
}
.c-program-menu::before {
    content: '';
    position: absolute;
    top:0;
    right:0;
    width:2px;
    background:var(--corporategreen);
    min-height: 100%;
}

.c-program-menu__heading {
  --stroke-size:.5em;
  font-weight:700;
  cursor: pointer;

  background-size: 0 var(--stroke-size);
  background-image: linear-gradient(180deg,currentColor 25%,transparent 0);
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: right;
  display: block;
  padding-top: 5px;
  padding-bottom: var(--stroke-size);
  margin-bottom:calc( var(--stroke-size) * -1);
  position: relative;
  transition: background-size .3s;

  max-width:max-content;
}


@media (hover: hover) {
    .c-program-menu__heading:hover {
        xtext-decoration: underline;
        background-image: linear-gradient(180deg,currentColor 25%,transparent 0);
        background-size: 100% var(--stroke-size);
        background-position-x: left;
        background-position-y: bottom;
    }
}

/* Section 4*/
.c-program-author {
    padding-block:var(--space-m) var(--space-l-3xl);
}
.c-program-author__wrapper {
    display:grid;
    gap:var(--space-2xs-m);
    grid-template-areas:
    "headshot name bio";
    grid-template-columns: 1fr 1.5fr 5fr;
    align-items: center;
    max-width: calc( var(--wrapper-max-width-s) + var(--gutter-wrapper-inline,var(--gutter)) );
}
.c-program-author__col--headshot {
    grid-area:headshot;
}
.c-program-author__col--name {
    grid-area:name;
}
.c-program-author__col--bio {
    grid-area:bio;
}

.c-program-author__col--headshot {
    display:flex;
    align-items: center;
}

@media (max-width: 768px) {
    .c-program-author__wrapper{
        grid-template-areas:
        "headshot name"
        "bio bio";
        grid-template-columns: 1fr 2fr;
    }
}

/* FAQ */
.c-program-faq {
    padding-block-start:var(--space-l-3xl)
}
.c-program-faq__title {
    position: relative;
    width:100%;
    background: var(--powder);
    padding-block:var(--space-m-l);
}
.c-program-faq__wrapper--2 {
    margin-block:var(--space-l-3xl);
    align-items: unset;
    max-width:calc( var(--wrapper-max-width-s) + var(--gutter-wrapper-inline,var(--gutter)) );
}

.c-program-faq__column--1 {
    flex-basis: calc( 40% - var(--space-l) );
    min-width: min(325px, 100%);
}
.c-program-faq__column--2 {
    flex-basis: calc( 60% - var(--space-l) );
    align-self: center;
}

/* FAQ Menu */
.c-program-faq__menu {
    position: relative;
    padding-inline-end: var(--space-s);
}
.c-program-faq__menu::before {
    content: '';
    position: absolute;
    top:calc(-1 * var(--space-l));
    right:0;
    width:2px;
    background:var(--corporategreen);
    min-height: calc(100% + (2 * var(--space-l)));
}

.c-program-faq-menu__heading {
  --stroke-size:.5em;
  font-weight:700;
  cursor: pointer;
  padding-inline-start: 1.75em;

  background-size: 0 var(--stroke-size);
  background-image: linear-gradient(180deg,currentColor 25%,transparent 0);
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: right;
  display: inline-block;
  padding-top: 5px;
  padding-bottom: var(--stroke-size);
  margin-bottom:calc( var(--stroke-size) * -1);
  position: relative;
  transition: background-size .3s, transform .5s ease-in-out, color .5s ease-in-out;
}
.c-program-faq-menu__heading.js-is-selected {
    color:var(--fire);
}

.c-program-faq-menu__heading::before {
  content: "❓";
  position: absolute;
  left: 0;
  top: 0.25em;
}

@media (hover: hover) {
    .c-program-faq-menu__heading:hover {
        xtext-decoration: underline;
        background-image: linear-gradient(180deg,currentColor 25%,transparent 0);
        background-size: 100% var(--stroke-size);
        background-position-x: left;
        background-position-y: bottom;
    }
}

/* Scroll up arrow */
.c-arrow-up {
    position: fixed;
    display: flex;
    bottom:20px;
    left:20px;
    width:58px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:var(--peacock);
    padding:.5em;
    border: 3px solid var(--white);
    outline: 5px solid var(--peacock);
    cursor:pointer;
    filter:drop-shadow(3px 3px 20px rgba(0,0,0,0));
    transition: all .5s ease-in-out;
}
.c-arrow-up svg {
    width:100%;
    height:100%;
    fill:var(--white);
}

@media (max-width: 768px) {
    .c-arrow-up {
        width:42px;
    }
}

@media (hover: hover) {
    .c-arrow-up:hover {
        transform:scale(1.05);
        filter:drop-shadow(3px 3px 20px rgba(0,0,0,.5));
    }
}


/* LOAN CALCULATOR */
.c-calculator {
    margin-block-start:var(--space-m-l);
    padding:var(--space-s);
    --legend-text-size:var(--step--2);
    border-radius: 10px;
    filter:drop-shadow(var(--drop-shadow));
}
.calculator {
    margin-block:0;
    grid-template-columns: auto;
    grid-gap: var(--space-m);
}
.c-calculator__inputs {
    padding:0;
}
.c-calculator__disclaimer {
    margin-block-start:var(--space-2xs);
    line-height:1;
    font-size:var(--step--2);
}
.c-calculator__disclaimer > * + * {
  margin-block-start:var(--space-2xs);
}
.c-calculator__results {
    padding:var(--space-s) var(--space-2xs);
    text-align: center;
}
.c-calculator__chart {
    overflow: visible;
    min-height: 250px;
    margin-block:var(--space-s);
}
.c-calculator__monthly-value, .c-calculator-breakdown__total {
    margin-block: 0;
}