/* B-factor details arrow animation */
details[open] summary .arrow {
    transform: rotate(180deg);
}

.loader {
    position: fixed;
    width: 100vw;
    height: 100vh;
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
    top: 0;
    z-index: 1000;
}
    
.loader .img {
    position: absolute;
    width: 100vw;
    height: 100vh;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
    
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
    
.overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: #222;
    color: #fff;
    display: flex;
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
}
    
.col {
    width: 50%;
    padding: 3em;
}
    
header {
    margin-top: 30%;
    margin-bottom: 15%;
}

.main-title {
    margin-top: -20px;
}

.main-desc {
    margin-top: 0%;
    margin-bottom: 2%;
    font-weight: 500;
    font-size: 1.5rem;
    font-style: italic;
}

.section {
    margin-top: 8%;
    margin-bottom: 10%;
}

.skill-container {
    display: flex; 
    flex-wrap: wrap; 
    gap: 0.5rem; 
}

.skill-wrapper {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
}

@media screen and (min-width: 1200px) {
    .skill {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .skill.long-skill {
        max-width: 47.18%;
    }
}

.skill {
    border: #222 1px solid; 
    border-radius: 5px; 
    padding: 1rem; 
    margin: 0.5rem 0; 
    display: flex; 
    align-items: center; 
    margin: 1rem 0.5rem 0 0; 
    flex-grow: 1;
    font-size: 1.4rem;
}

.skill-text {
    font-size: 1.2rem;
}

.skill:hover {
    background-color: #3A5D44; 
    color: #fff;
    transition: 0.2s ease-in-out;
    cursor: pointer;
    scale: 1.015;
}

.skill-icon-wrapper {
    min-width: 4rem;
    margin-left: 0.5rem;
}

.position-title {
    font-weight: 700; 
    color: #3A5D44; 
    margin-top: -1.5rem;
}

.skill-icon {
    margin-right: 0.7rem;
    font-size: 2rem;
}

.profile-container {
    display: flex;
    align-items: flex-start;
}

.profile-bio {
    margin-left: 20px;
    font-size: 1.6rem;
    text-align: justify;
}

.certificate-name {
    font-weight: 700;
    color: #3A5D44;
    margin-top: -1.5rem;
}

.certificate-detail {
    font-size: 1.3rem;
    margin-top: -1.5rem;
}

.tech-stack {
    font-size: 1.3rem;
    margin-top: -1.5rem;
}

.p .project_detail {
    margin-top: -0.5rem;
}

/* YouTube embed spacing */
lite-youtube {
    margin: 2rem 0;
    display: block;
}

/* Alternative selector for astro-embed YouTube component */
.youtube-embed,
[data-astro-embed="youtube"] {
    margin: 2rem 0;
    display: block;
}

pre:has(code) {
    position: relative;
  }
  
  pre button.copy {
  position: absolute;
  right: 16px;
  top: 16px;
  height: 28px;
  width: 28px;
  padding: 5px;
  display: flex;
  border: 0px !important;
  background-color: transparent !important;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

pre button.copy span {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

pre button.copy .ready {
  background-image: url(/images/copy-regular-full.svg);
}

pre button.copy .success {
  display: none;
  background-image: url(/images/check-solid-full.svg);
}

pre button.copy:hover {
  background-color: #efefef !important;
}

pre button.copy.copied .success {
  display: block;
}

pre button.copy.copied .ready {
  display: none;
}

/* Academic Paper Style Footnotes - TWO COLUMN LAYOUT */

/* Academic footnotes container */
.academic-footnotes {
  margin: 3rem 0 0 0 !important;
  padding: 2.5rem 0 0.8rem 0 !important;
  border-top: 1px solid #ddd !important;
  font-size: 12px !important;
  display: grid !important;
  grid-template-columns: 140px 1fr !important;
  gap: 1.5rem !important;
  align-items: start !important;
}

/* All content inside academic footnotes */
.academic-footnotes * {
  font-size: 11px !important;
  color: #777 !important;
  line-height: 1.4 !important;
}

/* Academic section headers - left column */
.academic-footnotes h3 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #555 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  grid-column: 1 !important;
  text-align: left !important;
  padding-top: 0.2rem !important;
}

/* Content elements - right column */
.academic-footnotes p,
.academic-footnotes ol {
  grid-column: 2 !important;
  margin: 0 0 0.6rem 0 !important;
  padding: 0 !important;
}

/* Paragraphs in academic sections */
.academic-footnotes p {
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #777 !important;
  text-align: justify !important;
}

/* References ordered list */
.academic-footnotes ol {
  font-size: 10px !important;
  line-height: 1.3 !important;
  color: #777 !important;
  list-style: none !important;
  counter-reset: ref-counter !important;
  padding-left: 0 !important;
}

.academic-footnotes ol li {
  font-size: 10px !important;
  line-height: 1.3 !important;
  color: #777 !important;
  margin: 0.3rem 0 !important;
  text-align: justify !important;
  position: relative !important;
  padding-left: 1.5rem !important;
  counter-increment: ref-counter !important;
}

.academic-footnotes ol li::before {
  content: counter(ref-counter) ". " !important;
  position: absolute !important;
  left: 0 !important;
  font-weight: 600 !important;
  color: #777 !important;
  font-size: 10px !important;
}

/* Footnotes ordered list - uses existing ol styling from above */

/* Style footnote links within the academic section */
.academic-footnotes a {
  font-size: inherit !important;
  color: inherit !important;
  text-decoration: underline !important;
}

.academic-footnotes a:hover {
  background-color: rgba(119, 119, 119, 0.1) !important;
}

/* Italics in references */
.academic-footnotes em {
  font-style: italic !important;
  font-size: 10px !important;
  color: #777 !important;
}

/* Inline citation links - superscript style */
.footnote-ref {
  font-size: 0.75em !important;
  vertical-align: super !important;
  line-height: 0 !important;
  text-decoration: none !important;
  color: #3A5D44 !important;
  margin-left: 1px !important;
}

.footnote-ref:hover {
  text-decoration: underline !important;
  background-color: rgba(58, 93, 68, 0.1) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  /* Academic sections on mobile - stack vertically */
  .academic-footnotes {
    margin: 2rem 0 0 0 !important;
    padding: 2rem 0 0.6rem 0 !important;
    font-size: 11px !important;
    display: block !important; /* Stack vertically on mobile */
    grid-template-columns: none !important;
    gap: 0 !important;
  }

  .academic-footnotes * {
    font-size: 11px !important;
  }

  .academic-footnotes h3 {
    font-size: 12px !important;
    grid-column: auto !important;
    margin: 0.4rem 0 0.2rem 0 !important;
  }

  .academic-footnotes h3:first-child {
    margin-top: 0 !important;
  }

  .academic-footnotes p,
  .academic-footnotes ol {
    grid-column: auto !important;
    margin: 0.2rem 0 0.5rem 0 !important;
  }

  .academic-footnotes p {
    font-size: 10px !important;
  }

  .academic-footnotes ol {
    font-size: 9px !important;
  }

  .academic-footnotes ol li {
    font-size: 9px !important;
    padding-left: 1.2rem !important;
  }

  .academic-footnotes ol li::before {
    font-size: 9px !important;
  }

  .academic-footnotes em {
    font-size: 9px !important;
  }

  /* Footnote links on mobile inherit mobile ol styling */
  .academic-footnotes a {
    font-size: inherit !important;
  }
}

/* Table of Contents - Desktop h2 indentation */
.toc-link.h2 {
  padding-left: 24px;
  display: block;
}

.toc-link.h1 {
  font-weight: 500;
}