/* @import url('https://fonts.googleapis.com/css?family=Crete+Round:400,400i'); */
/* @import url('https://fonts.googleapis.com/css2?family=Franklin+Gothic:wght@400;600&display=swap'); */
@import url('https://fonts.cdnfonts.com/css/franklin-gothic');


html {
	position: relative;
	min-height: 100%;
}

body {
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
	/* Padding top for navbar */
	/* padding-top: 56px; */
	/* Margin bottom for footer height */
  background-color: #232D4B;
  color: #fff;
  font-family: 'Franklin Gothic', "Segoe UI" !important;
  font-size: 18px;
	margin-bottom: 365px;
  /* background: linear-gradient(to bottom, #f8f9fa, #e9ecef); */
	/* background-image: url("//legaldatalab.law.virginia.edu/bl-themes/ldl_2019/img/LDL_Background_repeatTest.png"); */
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.card {   
	background-color: transparent;
  box-shadow: none;
  border: none;
	}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.illus_right {
  margin-left: 10px;
  float:right;
}

section {
	padding: 150px 0;
}

img {
	max-width: 100%;
}


pre {
	background: #eee;
	padding: 10px;
}

table {
	empty-cells: show;
	border: 1px solid #cbcbcb;
	width: 100%;
	font-size: 0.9em;
	margin-bottom: 1rem;
}

thead {
	background-color: #e0e0e0;
	color: #000;
	text-align: left;
	vertical-align: bottom;
}

tr {
	display: table-row;
	vertical-align: inherit;
	border-color: inherit;
}

th, td {
	padding: 0.5em 1em;
}

h1.title,
h2.title, h2.title-blog {
	font-size: 2.3rem;
  font-style: normal;
  font-family: 'Franklin Gothic', 'Adobe Caslon Pro', 'Bodoni', sans-serif;
  color: white
}
h1,h3, h4 {font-family: 'Franklin Gothic', 'Adobe Caslon Pro', 'Bodoni', sans-serif;
  font-style: normal;}

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px 20px;
  border-left: 5px solid #eee;
  font-family: 'Franklin Gothic', 'Adobe Caslon Pro', 'Bodoni', sans-serif;
  /* font-style: italic; */
}


/* Navbar */
img.nav-svg-icon {
	width: 1rem;
	height: 1rem;
}

.nav-link {
	font-size: 0.85em;
}
img.nav_logo {
	height: 40px;
}
/* Footer */
footer {
	position: absolute;
	bottom: 0;
  left: 0;
	/* width: 100%; */
  width: calc(100% - 200px); 
  margin-left: 200px;
	min-height: 220px;
	/* line-height: 60px; */
	font-size: 0.8em;
  font-family: 'Franklin Gothic', 'Adobe Caslon Pro', 'Bodoni', sans-serif;
}

.flex-ldlfoot {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  padding-top:50px;
  font-family: 'Franklin Gothic', 'Adobe Caslon Pro', 'Bodoni', sans-serif;
}
.foot_logo {
	box-sizing: border-box; 
	/* padding: 0px 10%; */ 
	-webkit-flex-basis: 50%; /* Safari 6.1+ */
  flex-basis: 50%;
}
#footer-heading {
	font-size: 1.25em;
	line-height: 1.25em; 
	padding: 15px 0px; 
	border-bottom: 1px solid rgba(255,255,255,0.2); 
	margin-bottom: 20px; 
	letter-spacing: 0.25em;
}
#footer-contact {
	list-style-type: none;
}
#footer-contact .fas, #footer-contact .far {
	margin-right: 10px;
}
#footer-contact li{
	padding: 3px 0px;
}
#footer-contact li a{
	text-decoration: none;
	color: white;
}
.uva-links {
	list-style-type: none;
	letter-spacing: 0.25em;
}	
.uva-links li {
	display: inline-block;
}	
.uva-links li a {
	text-decoration: none;
	color: white;
	padding: 10px 20px;
	border-radius: 4px;
	display: inline-block;
}
.uva-links li a:hover {
	background-color: rgba(255,255,255,0.8);
}
.uva-links li a:active {
	background-color: rgba(255,255,255,0.8);
}


/* Haader banner */
#header-banner {
  background-color: #232D4B; /* UVA blue */
  padding: 15px 0;
  width: 100%;
  z-index: 1000; /* Ensure the banner stays in front of sidebar */
  position: relative;
  display: flex;
  align-items: center;
}

#header-banner .container {
  padding-left: 0; /* Ensure no extra left padding */
  display: flex;
  align-items: center;
}

#header-banner img {
  height: 40px; /* Adjust logo height */
  margin-left: 0; /* Remove any left margin to align it perfectly */
  display: inline-block;
  
}



/* Sidebar styles */
#sidebar {
  font-family: 'Franklin Gothic', 'Adobe Caslon Pro', 'Bodoni', sans-serif;
  position: fixed;
  padding-top: 0; /* Remove extra space from top of the sidebar */
    margin-top: 0;
  top: 0;
  left: 0;
  width: 200px; /* Sidebar width */
  /* height: 100%; Full height */
  background: #232D4B; /* White background */
  color: white; /* Black text */
  /* box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); Light shadow */
  overflow-y: auto; /* Allow scrolling if content exceeds height */
  transition: transform 0.4s ease;
  z-index: 999;
  box-shadow: none; 
}

#main-content {
  margin-left: 200px; /* Offset for the sidebar */
  margin-right: auto; /* Allow it to shift naturally */
  max-width: 1200px; /* Set a max width for content */
  padding: 20px; /* Optional padding for spacing */
  transition: margin 0.4s ease;
}


/* Sidebar Nav Links */
#sidebar nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#sidebar nav {
  margin-top: 70px; /* Add spacing */
  padding-left: 10px; /* Adjust alignment */
}

#sidebar nav a {
  color: white; /* Black text for links */
  position: relative;
  font-family: 'Franklin Gothic', 'Adobe Caslon Pro', 'Bodoni', sans-serif;
  text-decoration: none;
  padding: 10px 20px;
  /* display: block; */
  display: inline-block;
  font-weight: 500;
}

#sidebar nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;  /* underline sits exactly below text */
  height: 2px;
  width: 100%; /* span full width of text */
  background-color: #E57200; 
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  border-radius: 1px;
}

/* On hover, animate underline in */
#sidebar nav a:hover::after {
  transform: scaleX(1);
}

#sidebar nav a.active::after {
  transform: scaleX(1);  /* underline fully visible */
}



/* Sidebar Footer for Social Links */
#sidebar-footer {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
}

#sidebar-footer img {
    width: 30px;
    height: 30px;
    margin: 0 10px;
    transition: transform 0.2s ease, opacity 0.3s ease;
}

#sidebar-footer img:hover {
    transform: scale(1.2); /* Slight zoom */
    opacity: 0.8;
}


@media (max-width: 1200px) {
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Full-width header */
    height: auto; /* Auto height for header */
    background: white; /* White header background */
    box-shadow: none; /* Remove shadow */
    display: block !important;
    transform: translateY(-100%); /* Hidden by default */
    transition: transform 0.4s ease;
    margin-top: -20px;
  }

  #sidebar.open {
      transform: translateY(0); /* Show dropdown when open */
  }

  #main-content {
      margin-left: 0; /* Reset margin for content */
      margin-top: 50px; /* Adjust content to start below the header */
  }

  #toggle-sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%; /* Full width */
      height: 50px; /* Header height */
      background: #232D4B; /* White background for header */
      color: white; 
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for header */
      z-index: 1000;
  }

  #toggle-sidebar span {
      cursor: pointer;
      font-size: 24px; /* Hamburger menu icon size */
  }
}

@media (min-width: 1201px) {
  #main-content {
      margin-left: auto; /* Center the content */
      margin-right: auto; /* Center the content */
      padding-left: 220px; /* Maintain some space for the sidebar */
  }
  #sidebar {
    position: fixed;
    top: 100px;    /* aligns with h4; adjust as needed */
    left: 0;
    width: 200px;
    height: auto;
    display: block;
    transform: none !important;
  }
  #toggle-sidebar {
    display: none;
  }
  body.sidebar-toggle-needed #sidebar {
    display: none !important;
  }

  body.sidebar-toggle-needed #toggle-sidebar {
    display: flex !important;
  }
}





/* Flipping Cards */
.flex-ldlhome {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; /* Allow items to wrap onto the next row */
  justify-content: space-around; /* Evenly distribute cards across the row */
  align-items: flex-start; /* Align items at the top */
  gap: 20px; /* Space between the cards */
  padding: 20px; /* Padding around the container */
  perspective: 1000px;
}

/* Individual flip cards */
.info-card {
  background-color: transparent;
  flex: 1 1 calc(33.333% - 20px); /* Default to three cards per row */
  max-width: 300px; /* Ensure a reasonable max width */
  height: 500px; /* Fixed height */
  perspective: 1000px;
  margin: 0; /* Remove extra margins */
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.5s forwards;
  cursor:pointer;
  display: block;
}
.flip-card-front:hover h2 {
  text-decoration: underline; /* Underline title */
  color: #232D4B; /* Optional: Add color change */
}

@keyframes fadeIn {
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Adjust cards for smaller screens */
@media all and (max-width: 1200px) {
  .info-card {
    flex: 1 1 calc(50% - 20px); /* Two cards per row for medium screens */
  }
}

@media all and (max-width: 768px) {
  .info-card {
    flex: 1 1 calc(100% - 20px); /* One card per row for smaller screens */
  }
}




.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  /* -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d; */
}
.flip-card .flip-card-inner {
  transform: rotateY(0); /* Ensure default state */
}
.flip-card.flip-active .flip-card-inner {
  transform: rotateY(180deg); /* Rotate on click */
}
.flip-card-front, .flip-card-back {
  position: relative;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;  */
  background-color: #f1f1f1;
  /* -webkit-transform-style: preserve-3d; */
  transform-style: preserve-3d;
}
.flip-card-front {
  position: relative;
  background-color: rgba(255, 255, 255, 0.8);
  display: block;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  z-index:2;
}
.flip-card-front img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}
.flip-card-front h2 {
  margin: 15px 0;
  font-size: 1.2rem;
  color: #333;
}
.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotateY(180deg);
  padding: 20px;
  border-radius: 10px;
  transform: rotateY(180deg) translateZ(1px);
  -webkit-transform: rotateY(180deg) translateZ(1px);
  -moz-transform: rotateY(180deg) translateZ(1px);
  z-index: 1;
}
.flip-card:nth-child(even) .flip-card-back {
  background-color: #C8CBD2;
}
/* Orange back for odd cards */
.flip-card:nth-child(odd) .flip-card-back {
  background-color: #F9DCBF;
}
.flip-card-back h2 {
  margin-bottom: 15px;
}
.flip-card-back p {
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 15px;
}
.flip-card-back a {
  color: black;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.3);
  padding: 10px 15px;
  border-radius: 5px;
  transition: background 0.3s;
}
.flip-card-back a:hover {
  background: rgba(255, 255, 255, 0.5);
}


@media (max-width: 1200px) {
  .flip-card.flip-active .flip-card-inner {
    transform: none !important; /* disable hover flip on mobile */
  }
}





.project-date {
  position: absolute; /* Allows it to overlay the image */
  top: 10px; /* Adjusts vertical position */
  left: 10px; /* Adjusts horizontal position */
  background-color: #FFF6C8; /* Matches tag background color */
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.8rem;
  z-index: 3; /* Ensures it appears on top of the image */
  color: #232D4B;
}

.tags {
  position: absolute;
  bottom: 50px; /* Position the tags 10px from the bottom */
  left: 10px; /* Align the tags to the left */
  display: flex;
  flex-wrap: wrap; /* Allow tags to wrap if there are multiple tags */
  gap: 10px; /* Add space between tags */
}

/* Style for individual tags */
.tag {
  color: black;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.9rem;
}

/* Style for Faculty Project tag */
.tag.faculty-project {
  background-color: #FFF6C8;
}

/* Style for Lab Project tag */
.tag.lab-project {
  background-color: #C9F2F4;
}





/* Plugins */
.plugin {
	margin-top: 3rem;
}

.plugin-label {
	font-size: 1em;
	text-transform: uppercase;
}

.plugin ul {
	list-style: none;
	padding: 0 0 0 10px;
}

/* Flex - Blog Posts */
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}
.plugin-navigation, .plugin-tags {
	background-color: #232D4B;
	padding: 5px 5px;
}

/* Home Page - Title */
.flex-ldltitle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  padding-top: 30px;
}


/* Home Page - Cards */
.flex-ldlhome {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}
.card-ldlhome {
  width: 30vw;
  height: 10vh;
  max-width:350px;
  min-width:180px;
  /*border: 1px solid black;*/
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 150px;
}
.legal-image {
  text-align: center;
  width: 100%;
  display: block;
  margin-bottom: 8px;
}
.card-ldlhome .title, .card-ldlhome .title-blog {
  color: #000000;
}
.card-ldlhome:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.hmicon {
	width:20%;
}

/* Projects Page - Cards */
.project-table {
	width: 100%;
}
.project-table tr td:first-child {
	width: 40%;
}
.project-table td {
  height: 280px;          /* Set a fixed height for the table cells */
  /* display: flex; */
  /* align-items: center;    Vertically center the content */
  justify-content: center; /* Horizontally center the content */
  padding: 10px;
}
.project-table td img {
  height: 250px;
  width: 100%;
  object-fit: cover;     /* Crop and fit the image while maintaining its aspect ratio */
}



/* Software Page - Cards */
.flex-software {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}
.card-ldlsoftware {
  padding: 10px 10px;  
  transition: 0.3s;
  margin: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: auto;
  max-width: 100%;
}
.card-ldlsoftware:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.card-ldlsoftware img {
	width: 200px;
}


/* Small screens */
@media all and (max-width: 770px) {
  .flex-ldlfoot {
  flex-direction: column;
}
  .foot_logo {
	box-sizing: border-box; 
	margin-bottom: 25px; 
	-webkit-flex-basis: 50%; /* Safari 6.1+ */
    flex-basis: 50%;
}
	img.nav_logo {
	height: 35px;
}
	body {
	margin-bottom: 625px;
}
	.project-table tr td:first-child {
	display:none;
}
}


.info-card .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.info-card .flip-card-front,
.info-card .flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* FRONT (starts fully visible as a circle covering the whole card) */
.info-card .flip-card-front {
  position: relative;
  background: #C8CBD2;
  clip-path: circle(150% at 100% 100%);
  transition: clip-path 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
  z-index: 2;
  border-radius: 10px;
  overflow: hidden;
}

/* BACK (always underneath) */
.info-card .flip-card-back {
  z-index: 1;
  background: #C8CBD2;
  color: #000;
  padding: 20px;
  transform: none !important;
  backface-visibility: visible !important;
}

/* SHOW-BACK STATE — shrink front’s clip-path from bottom-right corner */
.info-card.show-back .flip-card-front {
  clip-path: circle(0% at 0% 0%);
}

.info-card .flip-card-front::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 3.2em;
  height: 3.2em;
  /* pointer-events: none; */
  /* z-index: 2; */
  display: inline-block;
  
  /* Pure triangle shape */
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  
  /* Gradient to simulate roll curvature */
  background: linear-gradient(to left bottom, 
                               transparent 50%, 
                               #d9d7d7 0, #c3c1c1 40px,  #dedddd 10%);  
  box-shadow: 0 6px 4px -4px rgb(139, 140, 139); 
  /* border-bottom-left-radius: 10px;  Rounded corner for softness */
  
  /* Slight offset and rotation to simulate natural fold */
  transform: translate(-0.65em, -0.65em) rotate(-45deg);
  
  
  pointer-events: none; /* allows clicks through the fold */
  z-index: 10;
  background-repeat: no-repeat;
}

/* Shadow under curl (beneath curl highlight) */
.info-card .flip-card-front::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 2.3em;
  height: 2.3em;
  pointer-events: none;
  z-index: 5;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  background: #232D4B;
  
  filter: blur(2px);
}

/* On peel: curl becomes same grey as back and fades out cleanly */
.info-card.show-back .flip-card-front::after {
  background: #d3d3d3; /* exact back color */
  /* box-shadow: none; */
  opacity: 0;
}

.info-card.show-back .flip-card-front::before {
  opacity: 0;
}

.info-card .flip-card-back .btn.btn-primary {
  color: black;
  background-color: #FFF6C8;
}