/*
 * @file
 * Provides component styles for the UVA Programs module.
 *
 * Covers: program page overrides, layout, sidebar section menu, hero banner,
 * heading paragraph, requirements paragraph, section accordion, and section
 * year plan activity grid.
 *
 * Corner radius: 4px on all card and panel surfaces. Pill-shaped controls
 * keep their own radius, and full-bleed elements stay square because their
 * corners run past the viewport edge.
 *
 * Color tokens used throughout:
 *   #232d4b  UVA navy
 *   #e57200  UVA orange (decorative/graphic use only — never as text color)
 *   #009fdf  UVA cyan (accent rules, heading motif)
 *   #25cad3  UVA teal (heading motif)
 *   #62bb46  UVA green (heading motif)
 *   #ffffff  white
 *   #444444  mid-gray (body text, quotes)
 *   #ebeef3  brand mediumgray (callout surfaces)
 *   #dadada  light gray (borders, backgrounds)
 */

/* ============================================================
   Program directory landing grid
   Overrides the default Views grid float/clearfix layout with
   CSS grid, and turns each column into a card. Inner content
   (eyebrow, heading, child links) is unstyled here pending the
   actual field markup.
   ============================================================ */

.views-view-grid.horizontal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  clear: both;
}

@media (max-width: 1024px) {
  .views-view-grid.horizontal {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .views-view-grid.horizontal {
    grid-template-columns: 1fr;
  }
}

.pro-row.views-row {
  display: contents;
}

.pro-col.views-col {
  width: auto !important;
  background: #ffffff;
  min-height: 175px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding: 1.5rem;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.05);
  transition:
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.pro-col.views-col:hover {
  box-shadow:
    0 10px 30px rgba(35, 45, 75, 0.08),
    0 2px 10px rgba(35, 45, 75, 0.06);
  transform: translateY(-2px);
}

.pro-col.views-col .hero__content {
  background: aliceblue;
  padding: 10px;
  margin-bottom: 10px;
}

.pro-row.views-row.clearfix::before,
.pro-row.views-row.clearfix::after {
  content: none !important;
  display: none !important;
}

/* ============================================================
   Program Page — global overrides
   ============================================================ */

.node-type--program_page .main-content .page-content {
  margin-top: 0;
  margin-bottom: 0;
}

.node-type--program_page hr {
  width: 80px;
  margin: 40px 0 20px;
  border: none;
  border-top: 3px solid #e57200;
}

.node-type--program_page
  .main-content
  .page-content
  .page-content--inner
  .page-content--content {
  margin-bottom: 0 !important;
}

/*
 * Colors every list marker on the program page orange.
 * Intentionally broad — applies to all lists within the page body.
 * Scope this further if specific lists need different treatment.
 */
.node-type--program_page ::marker {
  color: #e57200;
}

.node-type--program_page .field-field_quote_text {
  position: relative;
  font-size: 1.2rem;
  font-style: italic;
  padding: 1.5rem 2rem 0;
  margin: 2rem 0 0;
  color: #444444;
}

.node-type--program_page .field-field_quote_text::before {
  content: "\201c";
  position: absolute;
  top: 24px;
  left: -16px;
  font-size: 8rem;
  font-weight: 700;
  color: #e57200;
  opacity: 0.4;
  line-height: 1;
  z-index: 0;
  /* Named font first, then fallback stack ending with generic keyword. */
  font-family: "adobe-caslon-pro", georgia, serif;
}

.node-type--program_page .field-field_quote_author {
  font-weight: 700;
  color: #444444;
  margin-left: 2.1rem;
}

.node-type--program_page .field-field_quote_author::before {
  content: "\2014";
  display: inline;
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #444444;
  margin-right: 8px;
}

.node-type--program_page .field-field-program-links {
  margin: 3rem 0;
}

.node-type--program_page .field-field_content {
  margin-bottom: 3rem;
}

/* ============================================================
   Program Page — layout
   ============================================================ */

.uva-programs__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.25rem;
}

@media (max-width: 960px) {
  .uva-programs__layout {
    grid-template-columns: 1fr;
  }
}

/* Pill-shaped by design — not part of the 4px card radius. */
.uva-programs__links a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0.25rem 0.25rem 0;
  border: 1px solid #dadada;
  border-radius: 999px;
  text-decoration: none;
}

.uva-programs__pdf--desktop {
  display: block;
}

.uva-programs__pdf--mobile {
  display: none;
}

@media (max-width: 960px) {
  .uva-programs__pdf--desktop {
    display: none;
  }

  .uva-programs__pdf--mobile {
    display: block;
  }
}

/* ============================================================
   Sidebar section menu — .aside-wrapper in the layout aside region.

   Markup comes from global_theme/templates/menu.html.twig:

     nav > ul.block-menu
       > li.expanded
         > span.has-subnav          header row
             > a.is-active          section title ("Undergraduate Program")
             > button.menu-subnav-toggle
         > ul#menu-subnav-child-N   the section links

   The top-level link doubles as the panel heading. The collapse toggle is
   hidden here: the panel is short enough that collapsing has no value, and
   the submenu is expanded by default.

   Selectors run through li.expanded to outrank the theme's own
   .block-menu > li padding, which is otherwise tall enough to push the
   list well past the fold. Link rows use negative horizontal margin equal
   to the card padding so hover fills span the full card width. Any change
   to that padding must be mirrored in the negative margin.
   ============================================================ */

.node-type--program_page .aside-wrapper {
  position: sticky;
  top: 2rem;
  margin-left: clamp(1.5rem, 4vw, 4rem);
  border-left: 3px solid #232d4b;
  padding: 1.5rem 1.25rem 1.25rem;
  border-radius: 4px;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.05);
}

.node-type--program_page .aside-wrapper nav,
.node-type--program_page .aside-wrapper ul.block-menu,
.node-type--program_page .aside-wrapper ul.block-menu ul {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
}

.node-type--program_page .aside-wrapper ul.block-menu li,
.node-type--program_page .aside-wrapper nav ul.block-menu li.expanded,
.node-type--program_page
  .aside-wrapper
  nav
  ul.block-menu
  li.expanded
  > ul
  > li {
  margin: 0;
  padding: 0;
  border-top: none;
  border-bottom: none;
  list-style: none;
}

/* Header row: section title only. */
.node-type--program_page .aside-wrapper ul.block-menu span.has-subnav {
  display: block;
  margin: 0 0 0.875rem;
  padding: 0 0 0.875rem;
  border-bottom: 1px solid #dadada;
}

.node-type--program_page .aside-wrapper ul.block-menu span.has-subnav > a,
.node-type--program_page
  .aside-wrapper
  ul.block-menu
  span.has-subnav
  > a.is-active {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: #232d4b !important; /* !important to override theme's link color */
  text-decoration: none;
  font-family: "franklin-gothic-urw-cond", helvetica, sans-serif;
}

/* Collapse toggle is not used in this panel. */
.node-type--program_page .aside-wrapper ul.block-menu .menu-subnav-toggle {
  display: none;
}

/* Section links. Left square: the rows bleed to the panel edges via negative
   margin, so a radius here would cut into the panel's own corner. */
.node-type--program_page
  .aside-wrapper
  nav
  ul.block-menu
  li.expanded
  > ul
  > li
  > a {
  display: block;
  padding: 0.5rem 1.25rem;
  margin: 0 -1.25rem;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.4;
  color: #232d4b;
  text-decoration: none;
  box-shadow: inset 0 0 0 0 #232d4b;
  transition:
    background-color 0.15s,
    box-shadow 0.15s;
}

/* Hover: full-width fill with a navy bar sliding in at the left edge. */
.node-type--program_page
  .aside-wrapper
  nav
  ul.block-menu
  li.expanded
  > ul
  > li
  > a:hover {
  background: #f1f4f8;
  box-shadow: inset 3px 0 0 0 #232d4b;
}

.node-type--program_page
  .aside-wrapper
  nav
  ul.block-menu
  li.expanded
  > ul
  > li
  > a:focus-visible {
  outline: 2px solid #232d4b;
  outline-offset: -2px;
}

/* Current page: the hover state held permanently, plus a weight shift, so
   position is carried by more than color alone. */
.node-type--program_page
  .aside-wrapper
  nav
  ul.block-menu
  li.expanded
  > ul
  > li
  > a.is-active {
  background: #f1f4f8;
  box-shadow: inset 3px 0 0 0 #232d4b;
  font-weight: 500;
}

/* Third level, if a section link has children of its own. */
.node-type--program_page .aside-wrapper nav ul.block-menu li.expanded ul ul a {
  padding-left: 2.25rem;
  font-size: 0.9375rem;
  color: #334155;
}

@media (prefers-reduced-motion: reduce) {
  .node-type--program_page
    .aside-wrapper
    nav
    ul.block-menu
    li.expanded
    > ul
    > li
    > a {
    transition-duration: 0.01ms;
  }
}

/* Below the layout breakpoint the aside stacks under the content, where
   sticky positioning and a left margin both work against it. */
@media screen and (max-width: 39.99em) {
  .node-type--program_page .aside-wrapper {
    position: static;
    margin-left: 0;
  }
}

/* ============================================================
   Hero banner — paragraph--type--hero scoped to Program Page.
   Background image passed via --hero-bg custom property set
   inline in Twig. Deep overlay renders the image as a watermark.

   Stays square: the banner is full bleed, so its corners are
   outside the viewport.
   ============================================================ */

.hero--program {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 220px;
  overflow: hidden;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center 40%;
}

.hero--program::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 60, 0.92);
  pointer-events: none;
}

.hero--program .hero__content {
  position: relative;
  z-index: 2;
  padding: 3rem 0;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.hero--program .hero__eyebrow {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 0.5rem;
  font-family: "franklin-gothic-urw-cond", sans-serif;
}

.hero--program .hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.75rem;
  max-width: 640px;
  font-family: inherit;
}

.hero--program .hero__divider {
  width: 60px;
  height: 3px;
  background: #e57200;
  margin-top: 20px;
}

/* Full bleed breakout from the page container. */
.layout__region--hero .hero--program {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

@media (max-width: 639px) {
  .hero--program .hero__content {
    text-align: center;
    padding: 2rem 1rem;
  }

  .hero--program .hero__title {
    font-size: 2rem;
    max-width: 100%;
  }

  .hero--program .hero__divider {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   Overview PDF field
   ============================================================ */

.node-type--program_page .field-field_overview_pdf {
  max-width: 70%;
  margin: 0 auto;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 5px 5px 0 #eceff4;
  transition: all 0.6s ease;
  border: 1px solid #eeeeee;
  background: #ffffff;
}

.node-type--program_page .field-field_overview_pdf:hover {
  box-shadow: 5px 5px 0 #b6c3c8;
}

.node-type--program_page .field-thumbnail.quickedit-field {
  margin-bottom: 20px;
}

/* Pill-shaped by design — not part of the 4px card radius. */
.node-type--program_page .field-field_overview_pdf a.pdf-icon {
  display: inline-block;
  border: 1px solid; /* intentionally inherits currentColor */
  border-radius: 30px;
  padding: 5px 20px;
  margin-top: 15px;
  /* 1vw is unreadably small on mobile — use rem with a minimum via clamp. */
  font-size: clamp(0.875rem, 1vw, 1.1rem);
  text-decoration: none;
  white-space: nowrap;
  width: fit-content;
}

.node-type--program_page .field-field_overview_pdf a.pdf-icon:hover {
  background: #232d4b;
  color: #ffffff;
}

.node-type--program_page .field-field_overview_pdf a.pdf-icon::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f1c1";
  margin-left: 0.4em;
  /* Orange applied to decorative icon glyph only, not text. */
  color: #e57200;
  pointer-events: none;
}

/* Heading paragraph. Full bleed, so no radius.
   Concentric ring motif: four hairlines at constant 1px weight.
   A glow travels outward ring to ring, brightening toward white
   and shifting hue as it passes. Navy shadow values mask the
   inside of each colored disc and must match the bar background. */

.node-type--program_page .paragraph--heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #ffffff;
  padding: 1.1rem 1rem 1.3rem;
  margin: 2.5rem 0;
  isolation: isolate;
  overflow: hidden;
  font-size: 2em;
  font-family: "franklin-gothic-urw-cond", helvetica, sans-serif;
  text-align: center;
  background: #232d4b;
  margin-left: -150%;
  padding-left: 150%;
}

.node-type--program_page .paragraph--heading::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 4rem;
  z-index: -1;
  width: 150px;
  height: 150px;
  margin-top: 30px;
  border-radius: 50%;
  background: none;
  transform: translateX(50%);
  animation: uva-programs-ring-glow 24s linear infinite;
  pointer-events: none;
}

@keyframes uva-programs-ring-glow {
  0% {
    box-shadow:
      0 0 0 26px #232d4b,
      0 0 0 27px rgba(214, 243, 255, 0.85),
      0 0 0 50px #232d4b,
      0 0 0 51px rgba(37, 202, 211, 0.34),
      0 0 0 78px #232d4b,
      0 0 0 79px rgba(98, 187, 70, 0.22),
      0 0 0 108px #232d4b,
      0 0 0 109px rgba(239, 63, 107, 0.34);
  }

  12.5% {
    box-shadow:
      0 0 0 26px #232d4b,
      0 0 0 27px rgba(120, 210, 240, 0.55),
      0 0 0 50px #232d4b,
      0 0 0 51px rgba(150, 230, 235, 0.55),
      0 0 0 78px #232d4b,
      0 0 0 79px rgba(98, 187, 70, 0.26),
      0 0 0 108px #232d4b,
      0 0 0 109px rgba(239, 63, 107, 0.26);
  }

  25% {
    box-shadow:
      0 0 0 26px #232d4b,
      0 0 0 27px rgba(0, 159, 223, 0.34),
      0 0 0 50px #232d4b,
      0 0 0 51px rgba(219, 250, 252, 0.85),
      0 0 0 78px #232d4b,
      0 0 0 79px rgba(98, 187, 70, 0.34),
      0 0 0 108px #232d4b,
      0 0 0 109px rgba(239, 63, 107, 0.22);
  }

  37.5% {
    box-shadow:
      0 0 0 26px #232d4b,
      0 0 0 27px rgba(0, 159, 223, 0.26),
      0 0 0 50px #232d4b,
      0 0 0 51px rgba(150, 230, 235, 0.55),
      0 0 0 78px #232d4b,
      0 0 0 79px rgba(180, 225, 165, 0.55),
      0 0 0 108px #232d4b,
      0 0 0 109px rgba(239, 63, 107, 0.26);
  }

  50% {
    box-shadow:
      0 0 0 26px #232d4b,
      0 0 0 27px rgba(0, 159, 223, 0.22),
      0 0 0 50px #232d4b,
      0 0 0 51px rgba(37, 202, 211, 0.34),
      0 0 0 78px #232d4b,
      0 0 0 79px rgba(226, 245, 218, 0.85),
      0 0 0 108px #232d4b,
      0 0 0 109px rgba(239, 63, 107, 0.34);
  }

  62.5% {
    box-shadow:
      0 0 0 26px #232d4b,
      0 0 0 27px rgba(0, 159, 223, 0.26),
      0 0 0 50px #232d4b,
      0 0 0 51px rgba(37, 202, 211, 0.26),
      0 0 0 78px #232d4b,
      0 0 0 79px rgba(180, 225, 165, 0.55),
      0 0 0 108px #232d4b,
      0 0 0 109px rgba(246, 155, 180, 0.55);
  }

  75% {
    box-shadow:
      0 0 0 26px #232d4b,
      0 0 0 27px rgba(0, 159, 223, 0.34),
      0 0 0 50px #232d4b,
      0 0 0 51px rgba(37, 202, 211, 0.22),
      0 0 0 78px #232d4b,
      0 0 0 79px rgba(98, 187, 70, 0.34),
      0 0 0 108px #232d4b,
      0 0 0 109px rgba(252, 223, 231, 0.85);
  }

  87.5% {
    box-shadow:
      0 0 0 26px #232d4b,
      0 0 0 27px rgba(120, 210, 240, 0.55),
      0 0 0 50px #232d4b,
      0 0 0 51px rgba(37, 202, 211, 0.26),
      0 0 0 78px #232d4b,
      0 0 0 79px rgba(98, 187, 70, 0.26),
      0 0 0 108px #232d4b,
      0 0 0 109px rgba(246, 155, 180, 0.55);
  }

  100% {
    box-shadow:
      0 0 0 26px #232d4b,
      0 0 0 27px rgba(214, 243, 255, 0.85),
      0 0 0 50px #232d4b,
      0 0 0 51px rgba(37, 202, 211, 0.34),
      0 0 0 78px #232d4b,
      0 0 0 79px rgba(98, 187, 70, 0.22),
      0 0 0 108px #232d4b,
      0 0 0 109px rgba(239, 63, 107, 0.34);
  }
}

@media (prefers-reduced-motion: reduce) {
  .node-type--program_page .paragraph--heading::before {
    animation: none;
    box-shadow:
      0 0 0 26px #232d4b,
      0 0 0 27px rgba(0, 159, 223, 0.34),
      0 0 0 50px #232d4b,
      0 0 0 51px rgba(37, 202, 211, 0.34),
      0 0 0 78px #232d4b,
      0 0 0 79px rgba(98, 187, 70, 0.34),
      0 0 0 108px #232d4b,
      0 0 0 109px rgba(239, 63, 107, 0.34);
  }
}

@media (max-width: 767px) {
  .node-type--program_page .paragraph--heading::before {
    display: none;
  }
}

/* ============================================================
   Two-column content paragraph
   ============================================================ */

.node-type--program_page
  .paragraph--type--two-column-content
  .field-field_column_1,
.node-type--program_page
  .paragraph--type--two-column-content
  .field-field_column_2 {
  border: none;
  text-align: left;
  font-weight: normal;
  line-height: 1.75;
  padding: 0;
}

/* ============================================================
   Three-column content paragraph
   ============================================================ */

.node-type--program_page
  .paragraph--type--three-column-content
  .field-field_column_1,
.node-type--program_page
  .paragraph--type--three-column-content
  .field-field_column_2,
.node-type--program_page
  .paragraph--type--three-column-content
  .field-field_column_3 {
  border: 0.5px solid #bbb;
  border-radius: 4px;
  text-align: center;
  font-family: "franklin-gothic-urw-cond", sans-serif;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  position: relative;
  padding: 20px 40px;
  font-size: 1.2em;
  margin: 1em;
  background: #ffffff;
  box-shadow: 5px 5px 0 #eceff4;
  transition: all 0.6s ease;
}

.node-type--program_page
  .paragraph--type--three-column-content
  .field-field_column_1:hover,
.node-type--program_page
  .paragraph--type--three-column-content
  .field-field_column_2:hover,
.node-type--program_page
  .paragraph--type--three-column-content
  .field-field_column_3:hover {
  box-shadow: 5px 5px 0 #b6c3c8;
  border: 1px solid #e57200;
}

.node-type--program_page
  .paragraph--type--three-column-content
  .field-field_column_1
  .gradient-line,
.node-type--program_page
  .paragraph--type--three-column-content
  .field-field_column_2
  .gradient-line,
.node-type--program_page
  .paragraph--type--three-column-content
  .field-field_column_3
  .gradient-line {
  margin: 0 20%;
}

/* On mobile the cards stack full-width. Remove horizontal margin to prevent
   overflow, and tighten vertical padding so cards aren't excessively tall. */
@media (max-width: 767px) {
  .node-type--program_page
    .paragraph--type--three-column-content
    .field-field_column_1,
  .node-type--program_page
    .paragraph--type--three-column-content
    .field-field_column_2,
  .node-type--program_page
    .paragraph--type--three-column-content
    .field-field_column_3 {
    margin: 0 0 1rem;
    padding: 1.5rem 1rem;
  }
}

/* ============================================================
   Requirements paragraph

   Neutral mediumgray surface with a cyan accent rule on the left edge.
   The surface is deliberately gray rather than a secondary-palette tint:
   the sidebar section menu already occupies the pale-blue register, and
   colored callouts inside gray chrome read more clearly than the reverse.

   Row layout is left-aligned, not space-between. The internal pill and the
   external link sit together as one control group, separated by a hairline
   rule carried on the external link's left border. align-items: stretch
   gives that rule the full row height without needing a divider element in
   the Twig, so the template stays unchanged.

   Once the row wraps at narrow widths the rule becomes a stray mark above
   the external link, so the mobile query removes it.
   ============================================================ */

/*
 * field-field_requirements_links renders as a <ul>. Row spacing is
 * handled by margin-bottom on each __row — no gap needed on the list.
 */
.paragraph--type--requirements {
  background: #ebeef3;
  padding: 30px;
  border-left: 4px solid #009fdf;
  border-radius: 4px;
}

.paragraph--type--requirements .field-field_requirements_links {
  display: flex;
  flex-direction: column;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.paragraph--type--requirements .requirements__row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 0;
  margin-bottom: 1rem;
}

.paragraph--type--requirements .requirements__row:last-child {
  margin-bottom: 0;
}

/* Pill-shaped by design — not part of the 4px card radius. */
.paragraph--type--requirements .requirements__link--internal {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 5rem;
  border: 1px solid #232d4b;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #232d4b;
  text-decoration: none;
  background-color: #ffffff;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.paragraph--type--requirements .requirements__link--internal:hover,
.paragraph--type--requirements .requirements__link--internal:focus {
  background-color: #232d4b;
  color: #ffffff;
}

/* Left border is the row divider. Underline is held back to the hover state
   so the resting weight matches the pill beside it. */
.paragraph--type--requirements .requirements__link--external {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 1.25rem;
  border-left: 1px solid rgba(35, 45, 75, 0.3);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #232d4b;
  text-decoration: none;
}

.paragraph--type--requirements .requirements__link--external::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f35d";
  font-size: 0.85em;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.paragraph--type--requirements .requirements__link--external:hover,
.paragraph--type--requirements .requirements__link--external:focus {
  background: rgb(251.1, 233.85, 216.75);
  border-radius: 4px;
  padding-right: 2rem;
}

.paragraph--type--requirements .requirements__link--external:hover::after,
.paragraph--type--requirements .requirements__link--external:focus::after {
  transform: translateX(4px);
  font-size: 1rem;
  color: #e57200;
}

.paragraph--type--requirements .requirements__link--external:focus-visible {
  outline: 2px solid #232d4b;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .paragraph--type--requirements {
    padding: 1.25rem 1.25rem 1.25rem 1rem;
  }

  .paragraph--type--requirements .requirements__link--external {
    padding-left: 0;
    border-left: none;
  }
}

/* ============================================================
   Section paragraph — accordion wrapper and title pill
   ============================================================ */

.paragraph--type--section .field-field_section_title {
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background: rgba(35, 45, 75, 0.15);
  margin-top: -2.75rem;
}

.paragraph--type--section .uva-programs-accordion__summary {
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2rem 1rem;
  cursor: pointer;
  position: relative;
}

/* ============================================================
   Accordion — shared across section paragraphs

   Rows carry a bottom border only, so no radius: rounding a
   single-sided border tapers the line at its ends.
   ============================================================ */

.uva-programs-accordion__item {
  border-bottom: 1px solid #dadada;
}

.uva-programs-accordion__summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Remove the default disclosure triangle in WebKit/Blink. */
.uva-programs-accordion__summary::-webkit-details-marker {
  display: none;
}

.uva-programs-accordion__summary::after {
  content: "+";
  /* Orange applied to decorative icon glyph only, not text. */
  color: #e57200;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  display: inline-block;
  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

.uva-programs-accordion__item[open] .uva-programs-accordion__summary::after {
  transform: rotate(45deg);
}

/*
 * Content wrapper — height is driven by JS (accordion.js) which sets
 * inline height values to enable the open/close transition. overflow: hidden
 * is required for the height tween to clip the content correctly.
 */
.uva-programs-accordion__content {
  overflow: hidden;
  transition: height 1s ease;
}

@media (prefers-reduced-motion: reduce) {
  .uva-programs-accordion__summary::after,
  .uva-programs-accordion__content {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

/* ============================================================
   Section year plan paragraph — Life of the Major activity cards.
   Pairs with paragraph--type--section-year-plan.html.twig.

   Each activity is a card with a colored top rule and a label
   underlined in the same color. 2 up on desktop, stacked on
   mobile. Two columns rather than auto-fit: the sidebar leaves
   roughly 55rem of content width, which auto-fit would resolve
   to three columns and leave an orphan card on row two.

   Label text is navy on white in every phase. The phase color
   is carried entirely by the top rule and the label underline,
   so no text sits on a colored fill and contrast is uniform.

   --bar-color drives both accents. The __banner div is retained
   in the Twig but hidden here — the chevron flag it drew is no
   longer part of the design.
   ============================================================ */

.section-year-plan__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
}

.section-year-plan__item {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem 1.5rem;
  background: #ffffff;
  border: none;
  border-top: 6px solid var(--bar-color);
  border-radius: 4px;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Chevron banner is retired. Left in the Twig to avoid a template change. */
.section-year-plan__banner {
  display: none;
}

/* Was a two-column row with a negative top offset. Now a simple stack. */
.section-year-plan__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-top: 0;
  position: static;
  top: auto;
}

/* No radius: the accent is a bottom border only, and rounding it would
   taper the ends of the line. */
.section-year-plan__label {
  align-self: flex-start;
  width: auto;
  padding: 0 0 0.4rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #232d4b;
  background: white;
  border-radius: 0;
  padding: 5px 8px;
}

.section-year-plan__content {
  padding-top: 0;
}

.section-year-plan__content p,
.section-year-plan__content li {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  line-height: 1.5;
}

.section-year-plan__content ul,
.section-year-plan__content ol {
  margin: 0;
  padding-left: 1.125rem;
}

.section-year-plan__content > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .section-year-plan__list {
    grid-template-columns: 1fr;
  }
}

/* Year plan cards
   Each modifier sets --bar-color for the decorative rules and a matching
   background tinted to 15% of that color over white. If the bar color
   changes, recalculate the background to match. */

/* Advance, UVA navy */
.section-year-plan__item--advance {
  --bar-color: #232d4b;

  background-color: #dee0e4;
}

/* Explore, burnt orange. Decorative rules only, never as text color. */
.section-year-plan__item--explore {
  --bar-color: #c85f00;

  background-color: #f7e7d9;
}

/* Build, medium blue */
.section-year-plan__item--build {
  --bar-color: #155080;

  background-color: #dce5ec;
}

/* Prepare, gold. Darkened from the PDF yellow so the rules stay visible
   against white. */
.section-year-plan__item--prepare {
  --bar-color: #fdda24;

  background-color: #fff9de;
}

/* ============================================================
   Hero badges — program_link paragraphs in 'badge' view mode
   ============================================================ */

.hero--program .hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.hero--program .hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
}

.hero--program .hero-badge--ba,
.hero--program .hero-badge--bs,
.hero--program .hero-badge--cert {
  color: #232d4b;
  background: #ffffff;
}

.hero--program .hero-badge--ba:hover,
.hero--program .hero-badge--bs:hover,
.hero--program .hero-badge--cert:hover {
  background: #f1f4f8;
}

.hero--program .hero-badge--ba {
  border-bottom: 3px solid #62bb46;
}

.hero--program .hero-badge--bs {
  border-bottom: 3px solid #009fdf;
}

.hero--program .hero-badge--cert {
  border: 1.5px solid #25cad3;
}

.hero--program .hero-badge--minor {
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.hero--program .hero-badge--minor:hover,
.hero--program .hero-badge--minor:focus {
  border-color: rgba(255, 255, 255, 0.85);
}