/* ==========================================================================
   _ui.css - UI element styles (links, buttons, headings, horizontal menu)
   Extracted from styles.css / NewHomepage.css in phase 3
   (see scripts/move-ui-css.mjs). Loaded in _document.tsx after
   _photocards.css and before _application.css. Shared-Components.css keeps
   its own .ui-LinkGhostRounded (different icon path) which wins on the pages
   that load it.
   ========================================================================== */

section.ui-BorderedSection {
  border-top: 1px solid #e0e0e0;
  padding-top: 70px;
}

@media (min-width: 768px) {
  section.ui-BorderedSection {
    border-top: 1px solid #e0e0e0;
    padding-top: 70px;
  }
}

@media (min-width: 768px) {
  section[data-section].ui-BorderedSection {
    margin-bottom: 70px;
  }
}

.ui-TextGreen-l {
  font-family: AvenirNext-Bold;
  font-size: clamp(3.125rem, 2.0139rem + 5.5556vw, 5.3125rem);
  line-height: 1;
  color: #189970;
}

.ui-TextGreen-xl {
  font-family: AvenirNext-Bold;
  font-size: clamp(3.125rem, 1.7282rem + 6.9841vw, 5.875rem);
  line-height: 1.1092436975;
  color: #189970;
}

.ui-LargeUppercaseHeading {
  font-family: AvenirNext-Regular;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(2.1875rem, 0.3462rem + 9.2063vw, 5.8125rem);
  margin-bottom: 25px;
  max-width: 1100px;
}

[data-page=Location] .ui-LargeUppercaseHeading {
  margin-bottom: 60px;
}

[data-page=Academy] .ui-LargeUppercaseHeading {
  font-size: clamp(2.1875rem, 0.765rem + 5.836vw, 4.5rem);
  margin-bottom: 30px;
}

.ui-PrimaryLink, .ui-PrimaryLink:visited {
  position: relative;
  font-family: AvenirNext-DemiBold;
  position: relative;
  font-size: clamp(1.125rem, 0.888rem + 0.9722vw, 1.5625rem);
  color: #158561;
  text-decoration: none;
}

.ui-PrimaryLink:after, .ui-PrimaryLink:visited:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 2px solid #158561;
  border-radius: 2px;
  transform: scaleY(0);
}

.ui-PrimaryLink:hover:after, .ui-PrimaryLink:visited:hover:after {
  transform: scaleY(1);
}

.ui-LinkGhostRounded {
  height: 65px;
  background: #ffffff;
  border: 1px solid #d4d4d4;
  border-radius: 38px;
  font-family: AvenirNext-Regular;
  font-size: 20px;
  color: #282828;
  letter-spacing: 0;
  line-height: 25px;
  padding: 20px 30px;
  cursor: pointer;
  width: 100%;
  max-width: 460px;
  text-align: left;
  text-decoration: none;
  background-image: url(../Assets/Icons/UI/Chevron-Right.svg);
  background-repeat: no-repeat;
  background-position: center right 20px;
  transition: 0.15s ease-out background-position;
}

[data-page=Job] .ui-LinkGhostRounded {
  max-width: 100%;
}

.ui-LinkGhostRounded b {
  font-family: AvenirNext-Bold;
}

.ui-LinkGhostRounded:hover {
  border-color: #189970;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  background-position: center right 25px;
}

.ui-LinkGhostRounded:hover b {
  color: #158561;
}

.ui-LinkGhostRounded:hover strong {
  color: #158561 !important;
}

.ui-LinkGhostRounded + .ui-LinkGhostRounded {
  margin-top: 25px;
}

.ui-PlayButtonGreen {
  flex: 0 0 auto;
  position: relative;
  font-family: AvenirNext-DemiBold;
  /* 16 - 19 (390 - 1300) */
  font-size: clamp(1rem, 0.9196rem + 0.3297vw, 1.1875rem);
  background-color: rgba(24, 153, 112, 1);
  border: 0;
  color: #ffffff;
  text-align: center;
  min-width: 200px;
  height: 50px;
  border-radius: 25px;
  padding-left: 25px;
  padding-right: 25px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px;
  text-decoration: none;
}

.ui-PlayButtonGreen:hover {
  background-color: #00bb89;
}

/* Translucent variant - opt-in ADDITIONAL class for pages that render the
   play button with the early-careers look. Markup keeps the base class so
   descendant/compound rules (.pc-PhotoCard .ui-PlayButtonGreen etc.)
   continue to match; this class overrides only the differing properties.
   NOTE: the pre-consolidation style used backdrop-filter: invert(1) over a
   rgba(...,0.9) fill, which composited to a darker green and produced a
   faint dark edge at the anti-aliased corners. The fill below is that
   composited color frozen as a solid value so the button looks the same
   without the filter. */
.ui-PlayButtonGreen-trans {
  background-color: rgb(22, 139, 102);
  padding-left: 30px;
  gap: 15px;
}

.ui-HorizontalMenuScroller {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  overflow: hidden;
  overflow-x: scroll;
  width: 100%;
  margin-bottom: 25px;
}

.ui-HorizontalMenuScroller::-webkit-scrollbar {
  display: none;
}

.ui-HorizontalMenu {
  display: flex;
  flex-wrap: nowrap;
  gap: 50px;
  list-style-type: none;
}

.ui-HorizontalMenu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  white-space: wrap;
  font-family: AvenirNext-DemiBold;
  position: relative;
  font-size: clamp(1.125rem, 0.888rem + 0.9722vw, 1.5625rem);
  color: #158561;
  text-decoration: none;
  text-align: center;
  width: min-content;
}

.ui-HorizontalMenu a img {
  height: 65px;
  width: 65px;
  background-color: slateblue;
}

@media (min-width: 768px) {
    .ui-LargeUppercaseHeading {
      margin-bottom: 30px;
    }
}

[data-page='Location'] .ui-LargeUppercaseHeading {
  margin-bottom: 60px;
}

.ui-PlayButtonGreen[data-story-video]:before,
.ui-PlayButtonGreen-trans[data-story-video]:before {
  display: none;
}

[data-page='Graduates'] .ui-PlayButtonGreen[data-story-video]:before,
[data-page='Graduates'] .ui-PlayButtonGreen-trans[data-story-video]:before,
[data-page='Academies'] .ui-PlayButtonGreen[data-story-video]:before,
[data-page='Academies'] .ui-PlayButtonGreen-trans[data-story-video]:before {
  display: none;
}