@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-400: #fcf2e7;
  --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 */
  --spacing-2l: 4rem;   /* XXLarge */
 
  --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: 50rem;
 
   /* 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);
  }
  
	.header-banner img {
	  width: 100% !important;
	  height: 300px;       /* pick whatever height reads as "shorter" for your design */
	  object-fit: cover;    /* crops overflow instead of distorting the image */
	  object-position: center; /* adjust if the focal point isn't centered */
	  display: block;
	}
 
  /* =========================================================
     Shared components used
     ========================================================= */
 
  /* ---- Shared card grid ---- */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin: var(--spacing-md) 0;
  }
 
  /* ---- Shared arrow icon ---- */
  .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);
  }
 
  /* ---- CTA link ---- */
	.cta-link {
	display: inline-flex;
	align-items: baseline;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) 0;
	color: var(--uva-blue-alt-a);
	text-decoration: underline;
	}
 
	.cta-link-arrow {
	fill: currentColor;
	flex-shrink: 0;
	transition: transform 0.2s ease;
	width:1.2rem;
	height:1.2rem;
	}
 
	.cta-link:hover .cta-link-arrow,
	.cta-link:focus-visible .cta-link-arrow {
	transform: translateX(0.5rem);
	/*text-decoration: underline;*/
	color: var(--uva-blue-alt-a);
	}
 
    /* ---- CTA link high affordance ---- */
  .cta-link--color {
  background-color: var(--uva-blue-alt);
  color: #fff;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  align-items: baseline;
}
 
.cta-link--color:hover,
.cta-link--color:focus-visible {
  background-color: var(--uva-blue-alt-a);
  color: #fff;
}
 
.cta-link--color:hover .cta-link-arrow,
.cta-link--color:focus-visible .cta-link-arrow {
  color: #fff;
}
 
  .dh-intro {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-lg);
    align-items: center;
    margin:var(--spacing-lg) 0;
  }
 
  /* ---- Text column ---- */
 
  h2.alt-header {
  font-family: "Libre Caslon Text", serif !important;
  font-weight: 700;
	}
	
	p.alt-type {
  font-family: "Libre Caslon Text", serif !important;
  font-weight: 400;
	}
 
	p.large-text {
	font-size:1.25rem !important;
	/*font-family: "Libre Caslon Text", serif !important;*/
 /* font-weight: 600;*/
	}
 
 .about-dh,
 .banner-dh {
 	margin:var(--spacing-md) 0;
 }
 
 
    /* =========================================================
     1. expertise grid
     ========================================================= */
  /* ---- Each group: icon in its own column, content in the other ---- */
  .expertise-group {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-sm);
    align-items: start;
    max-width: 600px;
  }
 
  /* ---- Icon column ---- */
  .expertise-icon {
    flex-shrink: 0;
    width: 3.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
 
  .expertise-icon svg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
  }
 
  /* Icon color classes */
  .bg-orange svg { fill: var(--uva-brand-orange); }
  .bg-green  svg { fill: var(--uva-green); }
  .bg-teal   svg { fill: var(--uva-teal); }
 
  /* ---- Content column: title, divider, items ---- */
  .expertise-content h3 {
    margin: 0 !important;
    min-height: 2.5rem; /* reserves space for 2 lines @ 1.1 line-height, even if this title only needs 1 */
  }
 
  .expertise-divider {
    border: none;
    border-top: 4px solid;
    margin: var(--spacing-sm) 0 var(--spacing-lg);
    width:90%;
  }
 
  .expertise-divider.bg-orange { border-color: var(--uva-brand-orange); }
  .expertise-divider.bg-green  { border-color: var(--uva-green); }
  .expertise-divider.bg-teal   { border-color: var(--uva-teal); }
 
  /* ---- Items: 2 columns within each group ---- */
  .expertise-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0 0 !important;
    padding: 0;
  }
 
  /* =========================================================
     1. consultation and training
     ========================================================= */
  /* ---- Content section two column  ---- */
  .two-column-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
    margin: var(--spacing-lg) 0;
  }
 
  /* ---- Image column with offset accent blocks ---- */
  .content-image-wrap {
    position: relative;
    /* reserve space so the offset accents aren't clipped by the grid */
    padding-right:5%;
    padding-bottom:5%;
    max-width:600px;
    margin:0 auto;
  }
 
  .content-image-wrap img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 550px;
    height: auto;
    border-radius:var(--border-radius-img-sm) var(--border-radius-sm);
  }
 
  /* Solid color block, offset behind bottom-right of the image */
  .content-image-accent-fill {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 90%;
    height: 90%;
    border-radius: var(--border-radius-img-sm) var(--border-radius-sm);
    z-index: 0;
  }
 
  .accent-orange {
  	border: 3px solid var(--uva-brand-orange);
  }
 
  .accent-teal {
  	border: 3px solid var(--uva-teal);
  }
 
    /* =========================================================
     5. color-link-card (colored block w/ title, text, label + arrow)
     ========================================================= */
  .link-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    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;
  }
 
  /* =========================================================
     6.contact us
     ========================================================= */
	  .talk-banner {
	  position: relative;
	  background-color: var(--uva-brand-blue);
	  color: white !important;
	  border-radius: var(--border-radius-sm);
	  margin: var(--spacing-xl) 0;
	  overflow: hidden;
		}
 
	  .talk-banner a {
	  color: white !important;
		}
 
		.talk-banner-content {
	  position: relative;
	  z-index: 1;
	  margin: var(--spacing-2l);
		}
 
		.talk-banner-content h2 {
	  font-family: "Libre Caslon Text", serif !important;
	  color: var(--uva-brand-orange) !important;
	  font-weight: 700;
		}
 
		.talk-banner-divider {
	  border: none;
	  border-top: 1px solid var(--uva-brand-orange);
	  margin: 0 0 1rem;
	  width: 70%;
		}
 
/* 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-brand-blue-400);
		  display: block;
		}
		
	/*view	setting*/
 
 .dh-spolight {
 	gap:2rem;
 	margin: 2rem !important;
 }
 .dh-spotlight h3 {
 	font-size: 1.44rem !important;
 }
 .views-view-responsive-grid--horizontal {
 	display:flex;
 }
 .dh-spotlight img {
 	max-width: 150px !important;
 }
 .view-footer,
 .events-see-all {
 	text-align: right;
 }
 
   /* =========================================================
     7. featured text (icon left, text right)
     ========================================================= */
	  .featured-text {
	  display: flex;
	  align-items: center;
	  gap: var(--spacing-md);
	  max-width: 50rem; 
	  /*max-width:600px;*/
	  background-color: var(--uva-brand-orange-300);
	  /*color: white !important;*/
	  border-radius: var(--border-radius-sm);
	  margin: var(--spacing-lg) 0;
	  padding: var(--spacing-lg);
		}
 
	 /* .featured-text a {*/
	 /* color: white !important;*/
		/*}*/
 
		.featured-text-content {
	  flex: 1;
		}
 
		.featured-text-divider {
	  border: none;
	  border-top: 1px solid var(--uva-brand-orange);
	  margin: 0 0 1rem;
	  width: 70%;
		}
 
		/* Icon — foreground element on the left, not a background watermark */
		.featured-text-icon {
		  flex-shrink: 0;
		  width: 70px;
		  height: 70px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		}
 
		.featured-text-icon svg {
		  width: 100%;
		  height: 100%;
		  fill: var(--uva-brand-orange);
		  display: block;
		}
		
		
		/* === CKEditor accordion look ported onto .basic-accordion / details / summary ===
   Colors from the main_css UVA override; chevron geometry from the plugin stylesheet. */

/* Header pill */
.ckeditor-accordion-container .basic-accordion summary {
  display: block;
  padding: 10px 15px 10px 50px;   /* 50px left = chevron gutter */
  background-color: #fff;
  color: #2B2B2B;
  border-radius: 0.3rem;
  cursor: pointer;
  position: relative;
  list-style: none;                        /* remove default triangle (Chrome/Firefox) */
  transition: background-color 300ms;
}
.ckeditor-accordion-container .basic-accordion summary::-webkit-details-marker {
  display: none;                           /* remove default triangle (Safari) */
}
.ckeditor-accordion-container .basic-accordion details {
  padding: 0 !important;
  margin: 0 !important;
}

/* Hover + open state */
.ckeditor-accordion-container .basic-accordion summary:hover,
.ckeditor-accordion-container .basic-accordion details[open] > summary {
  background-color: #BFE7F7;
  color: #2B2B2B;
}

/* Keyboard focus — summary is NOT an <a>, so it won't inherit the site link focus */
.ckeditor-accordion-container .basic-accordion summary:focus-visible {
  outline: 2px solid #333;
  outline-offset: 2px;
}

/* Chevron — reproduces the plugin's two-bar caret (down closed, up open) */
.ckeditor-accordion-container .basic-accordion summary::before,
.ckeditor-accordion-container .basic-accordion summary::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1px;                        /* vertical centre (half of 2px) */
  width: 10px;
  height: 2px;
  background: #2B2B2B;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.ckeditor-accordion-container .basic-accordion summary::after  { left: 18px; transform: rotate(-135deg); }
.ckeditor-accordion-container .basic-accordion summary::before { left: 24px; transform: rotate(135deg); }
.ckeditor-accordion-container .basic-accordion details[open] > summary::after  { transform: rotate(-45deg); }
.ckeditor-accordion-container .basic-accordion details[open] > summary::before { transform: rotate(45deg); }

.details {
	padding:0 !important;
}
 

  /* =========================================================
     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,
    .report-columns {
      grid-template-columns: repeat(2, 1fr);
    }
 
    .two-column-content {
      grid-template-columns: 1fr;
      gap: 1rem;
      margin:var(--spacing-sm) var(--spacing-lg);
    }
  }
 
  /* ---- Tablet and below (max-width: 991px) ---- */
  @media (max-width: 991px) {
    .two-column-content {
      grid-template-columns: 1fr;
      gap: 1rem;
      margin:var(--spacing-sm) var(--spacing-lg);
    }
    
  /* ---- Mobile (max-width: 767px) ---- */
  @media (max-width: 767px) {
    .card-grid,
    .dh-intro {
      grid-template-columns: 1fr;
    }
 
    .expertise-items {
      grid-template-columns: 1fr;
    }
		.views-view-responsive-grid--horizontal {
			display:flex;
			flex-wrap:wrap;
		}
  }