.cards-lightest-gray .card__clickable {
	background-color:#F2F5F4;
	color: #000;
  --fg-l: var(--uowdf-OFF);
  --fg-d: var(--uowdf-ON);
  --context-background-color: #F2F5F4;
  --bg-pw-light: var(--uowdf-OFF);
  --bg-pw-med: var(--uowdf-OFF);
  --bg-pw-dark: var(--uowdf-ON);
}

.card__clickable {
  transition: box-shadow 0.3s ease;
  position: relative;
	transition-duration: 500ms;
}

.card__clickable.es-template {
  transition: revert;
  position: revert;
}

.palette-bg-lightest-gray {
	/*this is copying the UOs background code*/
	background-color:#F2F5F4;
	color: #000;
  --fg-l: var(--uowdf-OFF);
  --fg-d: var(--uowdf-ON);
  --context-background-color: #F2F5F4;
  --bg-pw-light: var(--uowdf-OFF);
  --bg-pw-med: var(--uowdf-OFF);
  --bg-pw-dark: var(--uowdf-ON);
}

.card__clickable > p {
	margin:0;
}

.card__clickable > p a {
	/*ckeditor automatically puts solo anchors into a p, so 
		this should target just the link that's the child 
		of the card itself.*/
  text-decoration:none;
  font-size:0;
	position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 5;
}

.card__clickable.es-template > p a {
  text-decoration: revert;
  font-size: revert;
	position: revert;
  width: revert;
  height: revert;
  top: revert;
  left: revert;
  color: context.context-color(
	  var(--uowdf-theme-link-dark),
	  var(--uowdf-theme-link-light)
  );
}

.card__clickable:not(.es-template) a.cta-button:hover {
	background-color: revert;
}

.card__clickable div a {
	/* edge case: links inside a clickable card
	this doesn't actually work lol*/
	z-index:10;
}

.card__clickable .card-v2__title {
	text-decoration: underline;
	text-decoration-color: var(--fg-d, var(--uowdf-theme-link-dark)) var(--fg-l, var(--uowdf-theme-link-light));
	color: var(--fg-d, var(--uowdf-theme-link-dark)) var(--fg-l, var(--uowdf-theme-link-light));
}

.card__clickable.es-template .card-v2__title {
	text-decoration: revert;
}

.card__clickable:hover, 
.card__clickable:focus-within {
  box-shadow: rgba(0, 0, 0, 0.7) 0em 0.5em 1.5em;
}

.card__clickable.es-template:hover,
.card__clickable.es-template:focus-within {
    box-shadow: revert;
}

.card__clickable:hover .card-v2__title, 
.card__clickable:focus-within .card-v2__title {
	/*color: #007030;*/
  /*color: context.context-color(*/
  /*  var(--uowdf-theme-link-dark-hover),*/
  /*  var(--uowdf-theme-link-light-hover)*/
  /*);*/
  text-decoration: underline;
  color: var(--fg-d, var(--uowdf-theme-link-dark-hover)) var(--fg-l, var(--uowdf-theme-link-light-hover));
  text-decoration-color: var(--fg-d, var(--uowdf-theme-link-dark-hover)) var(--fg-l, var(--uowdf-theme-link-light-hover));
}

.card__clickable.es-template:hover .card-v2__header, 
.card__clickable.es-template:focus-within .card-v2__header {
	text-decoration: revert;
	color: revert;
}

.card__clickable:focus-within {
    outline-width: 3px;
    outline-style: solid;
    outline-offset: 1px;
    outline-color: #007030; 
}

.card__clickable.es-template:focus-within {
	outline-width: revert;
	outline-style: revert;
	outline-offset: revert;
	outline-color: revert;
}