:root {
  --primary-color: #5D7E6A;
  --secondary-color: #dfe5e1;
  --accent-color: #2e4d37;
  --background-color: #dfe5e1;
  --white: #f9f9f9;
  /*--primary-font: 'Courier New', monospace;*/
  /*--primary-font: Arial', sans-serif*/
  --primary-font: 'Times New Roman', serif;
  
  
}

/*******
*NAVBAR*
*******/
.navbar {
    background-color: var(--primary-color);
    color: #dfe5e1;
    font-family: var(--primary-font);
}

.navbar a {
  &:hover { 
    color: var(--accent-color); /* Changes the text color to a darker shade on hover */
  }
}


/****
*TOC*
****/
nav#TOC a.nav-link:hover {
  color: var(--primary-color) !important; /* Your desired hover color */
}

/* Change link color when active (clicked or matching current scroll position) */
nav#TOC a.nav-link.active {
  color: var(--primary-color) !important; /* Your active color */
}

/*****
*MAIN*
*****/

body { 
  background-color: var(--background-color); 
  font-family: var(--primary-font);
}

 a {
    color: var(--primary-color); /* Sets the text color for links */
    font-weight: bold; /* Makes the link text bold */

    /* Additional styles */
    text-decoration: none;
    transition: all 0.3s ease;

    &:hover { 
        color: var(--accent-color); /* Changes the text color to a darker shade on hover */
        text-decoration: underline;
    }

    &:active, &:focus {
        outline: none; 
    }
}

/**********
*FOOTNOTES*
**********/
div#quarto-appendix.default {
  background-color: var(--background-color); /* Replace with your desired color */
}

.footnotes {
  background-color: var(--background-color); 
  
}

.footnotes h2::after {
  content: "Sources";
}

.footnotes h2 {
  color: transparent;  /* hides the original text */
  position: relative;
}

.footnotes h2::after {
  content: "Sources";
  position: absolute;
  top: 0;
  left: 0;
  color: black;        /* or your desired text color */
}

/*********
*CALLOUTS*
*********/
.callout.callout-note {
  border-color: var(--accent-color) !important;
  background-color: var(--white); /* light background */
}

/* Change the header (title) background and color */
.callout.callout-note .callout-header {
  background-color: var(--accent-color) !important; /* lighter purple */
  color: var(--secondary-color); /* dark text */
}

/**************
*Standard card*
**************/
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.right-card {
  border: 1px solid var(--accent-color);
  border-radius: 8px;
  padding: 1rem;
  background-color: var(--white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}


.right-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}


/**********
*Flip card*
**********/

.flip-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.flip-card {
  perspective: 1000px;
}


/* Inner Flip Mechanism */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 300px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/* Flip and raise card on on hover */
.flipped-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  z-index: 10;
  margin-bottom: 0px; /*sets default bottom margin, change with js*/
}


/* Front and Back Faces */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid var(--accent-color);
  border-radius: 8px;
  background-color: var(--white);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  backface-visibility: hidden;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Back side styling */
.flip-card-back {
  transform: rotateY(180deg);
  min-height: 300px;
  height: auto;
  
}


.flip-icon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.5rem;
  color: var(--accent-color);
}

.flip-card-front h3.anchored { 
  pointer-events: none; /*Another attempt to solve mobile issue*/
}