@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');
:root {
  --uva-blue-alt-400: #e6f2f7; /* new color */
  --uva-blue-alt-300: #BFE7F7;
  --uva-blue-alt-200: #91D8F2;
  --uva-blue-alt-100: #55C4EC;
  --uva-blue-alt: #007BAC;
  --uva-blue-alt-a: #005679;
  --uva-blue-alt-b: #141E3C;

  --uva-brand-orange-300: #FFEAD6;
  --uva-brand-orange-200: #FFC999;
  --uva-brand-orange-100: #FFB370;
  --uva-brand-orange: #E57200;
  --uva-brand-orange-a: #B35900;
  --uva-brand-orange-b: #854200;

  --uva-brand-blue-300: #87B9D9;
  --uva-brand-blue-200: #3395D4;
  --uva-brand-blue-100: #0370B7;
  --uva-brand-blue: #232D4B;

  --uva-teal-200: #C8F2F4;
  --uva-teal-100: #5BD7DE;
  --uva-teal: #25CAD3;
  --uva-teal-a: #1DA1A8;
  --uva-teal-b: #16777C;

  --uva-green-200: #DDEFDC;
  --uva-green-100: #89CC74;
  --uva-green: #62BB46;
  --uva-green-a: #4E9737;

  --uva-grey-200: #F1F1F1;
  --uva-grey-100: #DADADA;
  --uva-grey-50: #ADADAD;
  --uva-grey: #808080;
  --uva-grey-a: #4F4F4F;
  --uva-grey-b: #2B2B2B;

  /* Spacing */
  --spacing-xs: .5rem;  /* Extra Small */
  --spacing-sm: 1rem;   /* Small */
  --spacing-md: 1.5rem; /* Medium */
  --spacing-lg: 2rem;   /* Large */
  --spacing-xl: 3rem;   /* Extra Large */

  --card-bg-green: var(--uva-green-200);
  --card-bg-orange: var(--uva-brand-orange-300);
  --card-bg-teal: var(--uva-teal-200);
  --card-bg-blue: var( --uva-blue-alt-400);
  --card-bg-brand-blue: var( --uva-brand-blue);

   /* Global readable line-width for body text */
   --content-line-width: 80ch;

   /* border radius */
   --border-radius-sm: 5px;
   --border-radius-md: 10px;
   --border-radius-img-sm:50px;
   --border-radius-img-sm:100px;
}

  /* ---- Global: every paragraph is capped at 60ch, no class needed ---- */
  p {
    max-width: var(--content-line-width);
  }
  

  /* =========================================================
     1. assessment intro
     ========================================================= */

  /* ---- assessment-intro layout: 1/3 text, 2/3 image ---- */
  .assessment-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
  }

  /* ---- Text column ---- */

  h2.alt-header {
  font-family: "Libre Caslon Text", serif !important;
  font-weight: 600;
	}

	p.large-text {
	font-size:1.25rem !important;
	}

  /* ---- Image column with offset accent blocks ---- */
  .assessment-intro-image-wrap {
    position: relative;
    /* reserve space so the offset accents aren't clipped by the grid */
    padding-right:5%;
    padding-bottom:5%;
    max-width:500px;
    margin:0 auto;
  }

  .assessment-intro-image-wrap img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius:var(--border-radius-img-sm) var(--border-radius-sm);
  }

  /* Solid color block, offset behind bottom-right of the image */
  .assessment-intro-accent-fill {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 90%;
    height: 90%;
    border: 2px solid var(--uva-brand-orange);
    border-radius: var(--border-radius-img-sm) var(--border-radius-sm);
    z-index: 0;
  }

    /* Short orange accent line, sitting just below the image's left edge */
  .assessment-intro-accent-line {
    position: absolute;
    bottom: 0;
    left: 12%;
    width: 60px;
    height: 4px;
    background-color: var(--uva-brand-orange);
    border-radius: 2px;
    z-index: 2;
  }

  /* =========================================================
     Shared components
     ========================================================= */

  /* ---- Shared card grid ---- */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    padding: 0;
    list-style: none;
  }

  /* fixes: (1) .card-grid itself is the <ul> — targeting a nested "ul"
     never matched anything, so the global ul margin-left kept winning
     (2) grid stretches the <li> to equal height, but that height
     doesn't pass down to the card div inside it without this */
  .card-grid li {
    margin: 0;
    padding: 0;
    height: 100%;
  }

  .card-grid li .static-text-card {
    height: 100%;
  }

  /* =========================================================
     Shared arrow icon — used by both link-card and color-link-card
     ========================================================= */
  .card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--uva-blue-alt-a);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .card-arrow svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
    display: block;
  }

  .link-card:hover .card-arrow,
  .color-link-card:hover .card-arrow {
    transform: translateX(7px);
  }

  .color-link-card h3 {
  	margin: 0;
  	padding:1rem 0;
  }

  /* =========================================================
     2. what do we do
     ========================================================= */
  .static-text-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--uva-grey-100);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-lg);
    gap:var(--spacing-sm);
  }

  /* =========================================================
     3. dashboard
     ========================================================= */
  .link-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: center;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .link-card:hover {
    box-shadow: 0 0 20px 0 var(--uva-grey-100);
    z-index: 2;
    transform: translateY(-2px);
  }

  .link-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .link-card-image.bg-green  { background-color: var(--card-bg-green); }
  .link-card-image.bg-orange { background-color: var(--card-bg-orange); }
  .link-card-image.bg-teal   { background-color: var(--card-bg-teal); }
  .link-card-image.bg-brand-blue   { background-color: var(--card-bg-brand-blue); }

  .link-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--spacing-sm);
  }

  .link-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--uva-grey-100);

  }

  .link-card-title-row h3 {
    margin: 0;
  }

  .link-card-body p {
  	padding:var(--spacing-sm) 0;
  }

  .card-link {
    text-decoration:none !important;  	
  }

  /* =========================================================
     4. principles
     ========================================================= */

/* ---- Boxed grid: 3 columns x 2 rows, table-like borders via CSS only ---- */

.card-grid-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0; /* explicit — any leftover gap value creates uneven double-thick lines */
  align-items: stretch; /* every cell fills the full height of its row */
  border-top: 1px solid var(--uva-grey-100);
  border-left: 1px solid var(--uva-grey-100);
  margin: var(--spacing-lg) 0;
  padding: 0;
  list-style: none;
}

/* the <li> is the actual grid cell — border and full-height sizing
   belong here, not on the inner div, or the lines won't line up
   with the true cell boundaries */
.card-grid-table li {
  margin: 0;
  padding: 0;
  height: 100%;
  border-right: 1px solid var(--uva-grey-100);
  border-bottom: 1px solid var(--uva-grey-100);
}

/* ---- icon-text-item component ---- */
.icon-text-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  height: 100%;
  padding: var(--spacing-md);
}

.icon-text-icon {
  flex: 0 0 auto;
  width: 7rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--uva-brand-orange);
}

.icon-text-icon svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  fill: currentColor;
  display: block;
}

  /* =========================================================
     5. color-link-card (colored block w/ title, text, label + arrow)
     ========================================================= */
.color-link-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--uva-grey-100);
    border-left: 4px solid var(--uva-brand-orange);
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--border-radius-sm);
  }
  .color-link-card:hover {
    box-shadow: 0 0 20px 0 var(--uva-grey-100);
    z-index: 2;
    transform: translateY(-2px);
  }
  .color-link-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
  }

  .color-link-carad-content h3 {
      margin-top:0 !important;
  }
  .color-link-card-content.bg-brand-blue {background-color: var(--card-bg-brand-blue);}
  .color-link-card-link-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: auto;
    text-decoration:underline;
    font-weight:600;
  }

  a .color-link-card {
      text-decoration: none;
  }

  /* =========================================================
     6.contact us
     ========================================================= */
  .talk-banner {
  position: relative;
  background-color: var(--uva-brand-blue);
  color: #FFFFFF !important;
  border-radius: var(--border-radius-sm);
  margin: var(--spacing-xl) 0;
  overflow: hidden;
}

  .talk-banner a {
  color: #FFFFFF !important;
}

.talk-banner-content {
  position: relative;
  z-index: 1;
  margin: var(--spacing-xl);
}

.talk-banner-content h3 {
  font-family: "Libre Caslon Text", serif !important;
  color: var(--uva-brand-orange) !important;
  font-weight: 600;
}

.talk-banner-divider {
  border: none;
  border-top: 1px solid white;
  margin: 0 0 1rem;
  width: 70%;
}

.talk-banner-privacy {
  font-style: italic;
}

/* Decorative background icon — sits behind the text, never affects layout */
.talk-banner-icon {
  position: absolute;
  top: 50%;
  right: var(--spacing-xl);
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  opacity:20%;
}

.talk-banner-icon svg {
  width: 250px;
  height: 250px;
  fill: var(--uva-blue-alt-400);
  display: block;
}

  /* =========================================================
     7.reports
     ========================================================= */
/* ---- report-columns: 3 across, responsive ---- */
.report-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
}

/* Category heading, sits above each column's list */
.report-section-heading {
	border-left:5px solid var(--uva-brand-orange);
	padding-left: var(--spacing-md);
}

/* ---- report-link-list wrapper ---- */
.report-link-list {
  display: flex;
  flex-direction: column;
  margin: var(--spacing-md) 0 0 var(--spacing-md);
  padding: 0;
  text-decoration: none;
}

/* the <li> holds two separate children (the standalone tag + the link),
   so it needs to lay them out side by side and center them itself */
.report-link-list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* ---- report-link-row component ---- */
.report-link-row {
  display: flex;
  align-items: inherit;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex: 1;
  padding: var(--spacing-sm) 0;
  text-decoration: none;
  color: var(--uva-grey-b);
  border-bottom: 1px solid var(--uva-grey-100);
}
.report-link-row:last-child {
  border-bottom: none;
}

.report-link-text:hover {
  text-decoration: underline;
}
/* NEW: groups the pill tag + title together on the left side of the row */
.report-link-main {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
/* NEW: Pill tag — style is generic, just type the type as text (PDF, DOC, etc.) */
.report-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs);
  border-radius: var(--border-radius-md);
  font-weight: 700;
  background-color: var(--uva-brand-orange-300);
  color: var(--uva-brand-orange-b);
  text-decoration: none !important; /* guards against underline in any state — hover, parent link, etc. */
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
  color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.report-link-row:hover .report-tag {
  background-color: var(--uva-brand-orange-b);
  color: #ffffff;
}
.report-link-icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--uva-blue-alt-a);
}
.report-link-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
  display: block;
}

  /* =========================================================
     MEDIA QUERIES — consolidated to 2 breakpoints, matching
     the SCSS $tablet-max ($lg - 1 = 991px) and $mobile ($md - 1 = 767px)
     ========================================================= */

  /* ---- Tablet and below (max-width: 991px) ---- */
  @media (max-width: 991px) {
    .card-grid,
    .card-grid-table,
    .report-columns {
      grid-template-columns: repeat(2, 1fr);
    }

    .assessment-intro {
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    .assessment-intro-image-wrap {
      margin: 0 auto;
      order: 1;
    }

    .assessment-intro-content {
      order: 2;
    }
  }
  
  /*psuedo css*/

		/* =========================================================
		   Expand card click target to the whole card
		   Pattern: stretched link (Roselli / Bootstrap .stretched-link)
		   Scope: .link-card and .color-link-card only — each has one <a>
		   ========================================================= */
		
		/* 1. Make each card the positioning context for the overlay.
		      (Side effect: the cards' existing :hover { z-index:2 } will now
		      actually take effect, since z-index needs a positioned element —
		      verify the hover glow still looks right.) */
		.link-card,
		.color-link-card {
		  position: relative;
		}
		
		/* 2. Stretch an invisible overlay from the card's single link
		      across the entire card. inset:0 = fill 100% at any size/zoom. */
		.link-card .card-link::after,
		.color-link-card .card-link::after {
		  content: "";
		  position: absolute;
		  inset: 0;
		  z-index: 1;
		}
  /* ---- Mobile (max-width: 767px) ---- */
  @media (max-width: 767px) {
    .card-grid,
    .card-grid-table,
    .report-columns {
      grid-template-columns: 1fr;
    }

    .icon-text-item {
    	padding: var(--spacing-xs);
    }
  }