:root {
  --default-width: 960px;
  --banner-height: 275px;
  --color-hayes-white: #ffffff;
  --color-harriman-blue: #002f56;
  --color-ub-blue: #005bbb;
  --color-baird-point: #e4e4e4;
  --color-bronze-buffalo: #ad841f;
  --color-capen-brick: #990000;
  --color-solar-strand: #ffc72c;
  --color-olmsted-green: #6da04b;
  --color-victor-e-blue: #2f9fd0;
  --color-greiner-green: #e1e000;
  --color-letchworth-autumn: #e56a54;
  --color-lake-lasalle: #00a69c;
  --color-niagara-whirlpool: #006570;
  --color-nav-orange: #da3c28;
  --color-nav-green: #427d10;
  --color-townsend-gray: #666666;

  --grad-color-stop1: black;
  --grad-color-stop2: white;

  --color-hero-banner: var(--color-harriman-blue);
  --color-text-icons: var(--color-victor-e-blue);
  --color-lines: var(--color-victor-e-blue);
  --hero-banner-image: url(/content/dam/www/undergrad-programs/home-hero-students.png);

  --color-eng-banner: var(--color-letchworth-autumn);
  /*--color-eng-banner-overlay: rgba(229, 106, 84, .75);*/
  --color-eng-text-icons: var(--color-ub-blue);
  --color-eng-lines: var(--color-solar-strand);

  --color-cas-social-banner: var(--color-lake-lasalle);
  /*--color-cas-social-banner-overlay: rgba(0, 62, 81, 1.0);*/
  --color-cas-social-text-icons: var(--color-harriman-blue);
  --color-cas-social-lines: var(--color-victor-e-blue);

  --color-cas-natural-banner: var(--color-lake-lasalle);
  --color-cas-natural-text-icons: var(--color-niagara-whirlpool);
  --color-cas-natural-lines: var(--color-letchworth-autumn);

  --color-cas-arts-banner: var(--color-lake-lasalle);
  --color-cas-arts-text-icons: var(--color-niagara-whirlpool);
  --color-cas-arts-lines: var(--color-greiner-green);

  --color-law-banner: var(--color-bronze-buffalo);
  /*--color-law-banner-overlay: rgba(173, 132, 31, 1.0);*/
  --color-law-text-icons: var(--color-harriman-blue);
  --color-law-lines: var(--color-townsend-gray);

  --color-ap-banner: var(--color-harriman-blue);
  /*--color-ap-banner-overlay: rgba(0, 199, 177, .45);*/
  --color-ap-text-icons: var(--color-ub-blue);
  --color-ap-lines: var(--color-greiner-green);

  --color-som-banner: var(--color-victor-e-blue);
  /*--color-som-banner-overlay: rgba(65, 182, 230, .75);*/
  --color-som-text-icons: var(--color-harriman-blue);
  --color-som-lines: var(--color-greiner-green);

  --color-nurse-banner: var(--color-capen-brick);
  /*--color-nurse-banner-overlay: rgba(153, 0, 0, 1.0);*/
  --color-nurse-text-icons: var(--color-harriman-blue);
  --color-nurse-lines: var(--color-townsend-gray);

  --color-pharm-banner: var(--color-olmsted-green);
  --color-pharm-text-icons: var(--color-niagara-whirlpool);
  --color-pharm-lines: var(--color-victor-e-blue);

  --color-health-banner: var(--color-niagara-whirlpool);
  --color-health-text-icons: var(--color-ub-blue);
  --color-health-lines: var(--color-victor-e-blue);

  --color-jsmbs-banner: var(--color-harriman-blue);
  --color-jsmbs-text-icons: var(--color-niagara-whirlpool);
  --color-jsmbs-lines: var(--color-lake-lasalle);
}

.som {
  --color-hero-banner: var(--color-som-banner);
  --color-text-icons: var(--color-som-text-icons);
  --color-lines: var(--color-som-lines);
  --hero-banner-image: url(/content/dam/www/undergrad-programs/ugap-banner-victor-blue.png);
}

.eng {
  --color-hero-banner: var(--color-eng-banner);
  --color-text-icons: var(--color-eng-text-icons);
  --color-lines: var(--color-eng-lines);
  --hero-banner-image: url(/content/dam/www/undergrad-programs/ugap-banner-autumn.png);
}

.cas-social {
  --color-hero-banner: var(--color-cas-social-banner);
  --color-text-icons: var(--color-cas-social-text-icons);
  --color-lines: var(--color-cas-social-lines);
  --hero-banner-image: url(/content/dam/www/undergrad-programs/ugap-banner.png);
}

.cas-natural {
  --color-hero-banner: var(--color-cas-natural-banner);
  --color-text-icons: var(--color-cas-natural-text-icons);
  --color-lines: var(--color-cas-natural-lines);
  --hero-banner-image: url(/content/dam/www/undergrad-programs/ugap-banner.png);
}

.cas-arts {
  --color-hero-banner: var(--color-cas-arts-banner);
  --color-text-icons: var(--color-cas-arts-text-icons);
  --color-lines: var(--color-cas-arts-lines);
  --hero-banner-image: url(/content/dam/www/undergrad-programs/ugap-banner-lake-lasalle.png);
}

.ap {
  --color-hero-banner: var(--color-ap-banner);
  --color-text-icons: var(--color-ap-text-icons);
  --color-lines: var(--color-ap-lines);
  --hero-banner-image: url(/content/dam/www/undergrad-programs/ugap-banner-lake-lasalle.png);
}

.law {
  --color-hero-banner: var(--color-law-banner);
  --color-text-icons: var(--color-law-text-icons);
  --color-lines: var(--color-law-lines);
  --hero-banner-image: url(/content/dam/www/undergrad-programs/ugap-banner-bronze.png);
}

.nurse {
  --color-hero-banner: var(--color-nurse-banner);
  --color-text-icons: var(--color-nurse-text-icons);
  --color-lines: var(--color-nurse-lines);
  --hero-banner-image: url(/content/dam/www/undergrad-programs/ugap-banner-nurse.png);
}

.pharm {
  --color-hero-banner: var(--color-pharm-banner);
  --color-text-icons: var(--color-pharm-text-icons);
  --color-lines: var(--color-pharm-lines);
  --hero-banner-image: url(/content/dam/www/undergrad-programs/ugap-banner-olmsted-green.png);
}

.health {
  --color-hero-banner: var(--color-health-banner);
  --color-text-icons: var(--color-health-text-icons);
  --color-lines: var(--color-health-lines);
  --hero-banner-image: url(/content/dam/www/undergrad-programs/ugap-banner-whirlpool.png);
}

.jsmbs {
  --color-hero-banner: var(--color-jsmbs-banner);
  --color-text-icons: var(--color-jsmbs-text-icons);
  --color-lines: var(--color-jsmbs-lines);
  --hero-banner-image: url(/content/dam/www/undergrad-programs/ugap-banner-victor-blue.png);
}

.bg-baird-point,
.bgBairdPoint {
  background-color: var(--color-baird-point);
}

.defaultWidth {
  width: 100%;
  display: flex;
  flex-direction: column;

  .reference,
  .columns-wrapper {
    max-width: var(--default-width);
    font-size: 18px;
    line-height: 26px;
    margin: 25px auto;

    .reference {
      margin: 0;
      padding: 0;
    }

    p,
    li,
    b {
      font-size: 18px;
      line-height: 26px;
    }

    .icons {
      .aem-Grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 1em;

        .aem-GridColumn {
          flex: 1 1 auto;

          .reference {
            width: auto;
          }
        }

        @media (max-width: 460px) {
          flex-direction: column;
          flex-wrap: wrap;
        }
      }

      /* /.aem-Grid */

      figure {
        display: flex;
        flex-direction: column;
        place-items: center;
      }

      figure figcaption {
        margin-top: 1em;
        font-weight: bold;
        font-size: 1.25em;
      }

      figcaption {
        text-align: center;
      }

      svg {
        width: 128px;
        height: 128px;
      }

      @media (max-width: 460px) {
        .reference,
        .columns-wrapper {
          max-width: 100%;
          margin: 0 auto;
        }
      }
    } /* /.icons */

    @media (max-width: 460px) {
      padding: 0 1em;
    }
  } /* /.reference */
}

/* .defaultWidth */

/***** What Can I Do Outside of Class *****/

#whatCanIDoOutsideOfClass figure {
  fill: var(--color-text-icons);
  color: var(--color-text-icons);
}

/***** NextGen Fixes *****/

.next-gen-header {
  background-color: rgba(255, 255, 255, 0.0) !important;
}

.ub-content-wrapper {
  margin: -36px 0 0 0;
  padding-bottom: 0;
  max-width: 100%;

  .content-section {
    padding: 0;
  }
}

/* /NextGen Fixes */


/***** Banner & Title *****/

.title:has(#bannerTitle) {
  height: 275px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: end;
  background-size: cover;
  background-color: var(--color-hero-banner);
  background-image: var(--hero-banner-image);
  border-bottom: 15px solid var(--color-lines);

  h1 {
    position: relative;
    width: var(--default-width);
    font: 56px/1.2 'Sofia', Arial, sans-serif;
    color: var(--color-hayes-white);
    text-align: left;
    margin: 0 auto .5em auto;

    @media (max-width: 460px) {
      padding-left: .25em;
    }
  }
}

/***** Program Menu *****/

#ugapProgramMenu {
  border-bottom: 2px solid var(--color-lines);

  >.aem-Grid {
    max-width: var(--default-width);
    padding: 25px 0;
    margin: 0 auto;

    .aem-GridColumn {
      p {
        margin: 0;
      }

      .reference {
        margin-bottom: .75em;
      }

      @media (max-width: 460px) {
        margin: 0 0 1em 0;
      } /* @media (max-width: 460px) */
    }
  } /* >.aem-Grid */
}

@media (max-width: 767px) {
  /* 1. Ensure the container allows for vertical stacking (already handled by AEM grid) */
  
  /* 2. Style the header (H3) to look like a button */
  #ugapProgramMenu {
    .title {
      h3 {
        cursor: pointer;
        padding: 15px 0;
        margin: 0;
        border-bottom: 1px solid var(--color-townsend-gray);
        position: relative;
        background-color: var(--color-baird-point);

        &::after {
          content: '+';
          position: absolute;
          right: 20px;
        }

        &.active::after {
          content: '-';
        }
      } /* h3 */
    } /* .title */
  } /* #ugapProgramMenu */

  /* 4. Collapse the content by default on mobile (animatable) */
  #ugapProgramMenu .aem-GridColumn .cmp-container > *:not(.title) {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
  }

  /* Inner wrapper must be present so 0fr/1fr can clip its child */
  #ugapProgramMenu .aem-GridColumn .cmp-container > *:not(.title) > * {
    min-height: 0;
  }

  /* 5. Reveal content when active */
  #ugapProgramMenu .aem-GridColumn.active .cmp-container > *:not(.title) {
    grid-template-rows: 1fr;
    opacity: 1;
    padding: .5em 0;
  }
} /* @media (max-width: 767px) */

/***** Anthem *****/

#ugapAnthem {
  max-width: var(--default-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  place-items: center;
  justify-content: center;
  margin-top: 2.5em;

  .introtext {
    max-width: var(--default-width);
    margin: 0 auto;

    b {
      font-size: 1.5em;
      color: var(--color-text-icons);
    }
  }

  p {
    line-height: 2em !important;
  }

  @media (max-width: 460px) {
    padding: 0 1em;
  }
}

/***** Arrow Transition *****/

#ugapPageArrow {
  width: 100vw;
  background-color: var(--color-baird-point);

  #top-triangle,
  .page-transition-container #top-triangle {
    fill: var(--color-hayes-white);
  }
  #accent-triangle,
  .page-transition-container #accent-triangle {
    fill: var(--color-lines);
  }
}

/***** Action Buttons *****/

#actionButtons {
  background-color: var(--color-ub-blue);
  width: 100%;

  .reference {
    margin: 0 auto;

    .cta-button {
      white-space: nowrap;
      padding: 0.5em 1em;
    }

    @media (max-width: 460px) {
      margin: 0;
    }
  }
}