/* Footnote styles with improved accessibility */
/* Code originally from https://www.sitepoint.com/accessible-footnotes-css/ */

/**
 * Initialiazing a `footnotes` counter on the wrapper
 */
article {
  counter-reset: footnotes;
}

/**
 * Inline footnotes references
 * 1. Increment the counter at each new reference
 * 2. Reset link styles to make it appear like regular text
 */
a[aria-describedby="footnote-label"] {
  counter-increment: footnotes; /* 1 */
  text-decoration: none; /* 2 */
  color: inherit; /* 2 */
  cursor: default; /* 2 */
  outline: none; /* 2 */
  position: relative;
  transition: all 0.3s ease;
}

/**
 * Actual numbered references
 * 1. Display the current state of the counter (e.g. `[1]`)
 * 2. Align text as superscript
 * 3. Make the number smaller (since it's superscript)
 * 4. Slightly offset the number from the text
 * 5. Reset link styles on the number to show it's usable
 */
a[aria-describedby="footnote-label"]::after {
  content: '[' counter(footnotes) ']'; /* 1 */
  vertical-align: super; /* 2 */
  font-size: 0.5em; /* 3 */
  margin-left: 2px; /* 4 */
  color: var(--color-accent, #fbbe03); /* 5 */
  text-decoration: underline; /* 5 */
  cursor: pointer; /* 5 */
  font-weight: bold;
}

/**
 * Resetting the default focused styles on the number
 */
a[aria-describedby="footnote-label"]:focus::after {
  outline: thin dotted;
  outline-offset: 2px;
}

/**
 * Enhanced hover effect for better user experience
 */
a[aria-describedby="footnote-label"]:hover::after {
  color: var(--color-accent-hover, #00a0e9);
  text-decoration-thickness: 2px;
}

/* Footnotes section */
#footnotes {
  background: rgba(0,0,0,.4);
  padding: 4rem;
  font-size: .8rem;
  line-height: 1.2rem;
  margin-top: 2rem;
  border-radius: var(--border-radius, 0.5rem);
  
  h2 {
    margin: -4rem -4rem 2rem -4rem;
    padding: 2rem 4rem;
    background: rgba(0,0,0,.2);
    border-top-left-radius: var(--border-radius, 0.5rem);
    border-top-right-radius: var(--border-radius, 0.5rem);
  }

  :target {
    background: rgba(255,255,255,.1);
    transition: background 0.3s ease;
  }

  li {
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 0.5rem;
    list-style-position: inside;
  }
  
  /* Return to content link */
  .return {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--color-accent, #fbbe03);
    font-size: 0.9em;
    transition: color 0.3s ease;
    
    &:hover, &:focus {
      color: var(--color-accent-hover, #00a0e9);
    }
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  #footnotes {
    background: rgba(255,255,255,.1);
    
    h2 {
      background: rgba(255,255,255,.05);
    }
    
    :target {
      background: rgba(255,255,255,.15);
    }
  }
}

/* Responsive adjustments for footnotes */
@media (max-width: 768px) {
  #footnotes {
    padding: 2rem;
    
    h2 {
      margin: -2rem -2rem 1.5rem -2rem;
      padding: 1.5rem 2rem;
    }
    
    li {
      padding: 0.75rem;
    }
  }
}

@media (max-width: 576px) {
  #footnotes {
    padding: 1rem;
    
    h2 {
      margin: -1rem -1rem 1rem -1rem;
      padding: 1rem;
    }
    
    li {
      padding: 0.5rem;
    }
  }
}