/* Custom CSS for Everforest Dark Theme */


/* Define Everforest Dark Colors */
:root {
  /* Everforest Color Variables (Dark Hard) */
  --ef-bg: #2b3339;
  --ef-fg: #d3c6aa;
  --ef-red: #e67e80;
  --ef-green: #a7c080;
  --ef-yellow: #dbbc7f;
  --ef-blue: #7fbbb3;
}

/* Base body/background styles for Dark Theme */
.quarto-dark {
  background-color: var(--ef-bg) !important;
  color: var(--ef-fg) !important;
}

.quarto-dark .content {
  background-color: var(--ef-bg) !important;
  color: var(--ef-fg) !important;
}


/* Headings in Dark Theme */
.quarto-dark h1, .quarto-dark h2, .quarto-dark h3, .quarto-dark h4, .quarto-dark h5, .quarto-dark h6 {
  color: var(--ef-yellow) !important;
}

/* Links in Dark Theme */
.quarto-dark a {
  color: var(--ef-blue) !important;
}
.quarto-dark a:hover {
  color: var(--ef-fg) !important;
}
/* --- ABOUT ME SECTION STYLING (ROBUST FLEX) --- */

.about-header {
  display: flex;
  align-items: flex-start; /* Aligns photo and text to the top */
  gap: 30px; 
  max-width: 900px;
  margin: 0 auto; 
  padding-bottom: 20px;
}

/* Ensure the photo element is fixed size and stays on the left */
.about-photo {
  flex-shrink: 0; 
}

.about-photo img {
  width: 220px !important; 
  height: 220px;
  border-radius: 50%;
  border: 4px solid var(--ef-yellow); 
  object-fit: cover;
}

/* Ensure the text element takes up the remaining space */
.about-text {
  flex-grow: 1; 
  text-align: left;
}

.tagline {
  font-size: 1.25em;
  color: var(--ef-green); 
  margin-top: 0;
  margin-bottom: 15px;
}

/* Style for the links paragraph */
.social-links {
    margin-top: 15px;
    font-size: 1.1em;
    /* Ensure the links are styled by the global 'a' rule */
}

/* Add space between icon and text */
.social-links i {
  margin-right: 5px;
}
/* Collapsible 'Presentations' Section Styling */
/* details > summary {
/*   cursor: pointer;
/*   /* Ensure the H3 color is applied to the clickable title */
/*   color: var(--ef-yellow) !important; 
/*   padding-bottom: 5px; /* Little space below the title */
/*   margin-top: 1.5rem;
/*   margin-bottom: 0.5rem;
/*   /* Ensures the collapsible arrow/icon is styled */
/*   list-style-type: '▶ '; 
/* }

/* --- Collapsible Section Styling (for clear indicators) --- */

/* The style for the actual list items */
details {
  /* Indent the whole section block slightly */
  margin-left: 5px;
}

details > summary {
  cursor: pointer;
   
  /* Indent the title further to align with standard subsection headings */
  padding-left: 10px; 
  
  /* Inherit the custom title style */
  font-size: 1.3rem;
  font-weight: 600; 
  color: var(--ef-yellow) !important; 
  
  padding-bottom: 1px; 
  margin-top: 0.5rem;
  margin-bottom: 0.3rem;
  
  /* Marker when CLOSED (indicates it can be opened) */
  list-style-type: '▶ '; 
}

details[open] > summary {
  font-size: 1.8rem;
  /* Marker when OPEN (indicates it can be closed) */
  list-style-type: '▼ '; 
}

/* Styling for the cue text (e.g., "Click to Expand") */
.expand-cue {
  font-size: 0.7em; /* Make the cue text small relative to the title */
  font-weight: normal; /* Ensure it's not bold */
  margin-left: 10px;
  
  /* Use a secondary color, like the blue/cyan, and dim it slightly */
  color: rgba(127, 187, 179, 0.9) !important; 
}

/* Hide the cue text when the section is open */
details[open] .expand-cue {
  display: none;
}

/* 2. Indent the clickable title to appear nested */
.collapsible-title {
  cursor: pointer;
  /* Indent the title further to align with standard subsection headings */
  padding-left: 10px; 

  /* Ensure the title maintains H3/H4 look */
  font-size: 1.4rem; 
  font-weight: 600; 
  color: var(--ef-yellow) !important; 
  
  padding-bottom: 2px; 
  margin-top: 1rem;
  margin-bottom: 0.3rem;
  
  /* Retain the marker icon styling */
  list-style-type: '▶ '; 
}

details[open] .collapsible-title {
  list-style-type: '▼ '; 
}

.collapsible-content-text {
  /* Match the indentation of the list content (should align with .presentations-list) */
  margin-left: 10px; 
  /* Add a little space above and below the text */
  margin-top: 5px;
  margin-bottom: 5px;
}

/* 3. Indent the content list inside the collapsible section */
.presentations-list {
  /* This shifts the entire list and its bullets to the right */
  margin-left: 10px; 
  /* Reduce top padding if needed to bring it closer to the title */
  padding-top: 2px; 
}

/* Theme Toggle Button Styling */
.theme-switcher-label {
    margin-right: 5px; 
    color: var(--ef-yellow) !important; 
}


/* Footer Styling */
footer {
    text-align: center;
    padding: 20px 0;
    font-size: 0.9em;
    color: rgba(211, 198, 170, 0.9); /* Slightly dimmed text for copyright */
}


/* Target the H1 generated by the YAML title */
.title {
  /* Center your Name and reduce bottom margin */
  margin-bottom: 5px !important; 
  text-align: center; 
}

/* Button container for section jumps */
.button-container {
  display: flex;
  justify-content: center; /* Center the buttons */
  gap: 10px;
  margin-top: 5px !important; /* Pull it closer to the title */
  margin-bottom: 20px;
}
/* Target the button container */
/*.button-container {
/*  /* Reduce the top margin that might push it away */
/*  margin-top: 5px !important; 
/*  /* Ensure it's centered if the title is centered */
/*  justify-content: center; 
/*}
/* --- Navigation Button Hover Effect --- */

/* Target the anchor tags within the button-container */
.button-container a {
  /* Add smooth transition for scale and color changes */
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out; 
  text-decoration: none;
}

/* Define the hover state */
.button-container a:hover {
  /* Slightly scales the button up (105% size) */
  transform: scale(1.05); 
  /* Set background to a prominent color, like the theme's blue/cyan */
  background-color: var(--ef-blue) !important; 
  /* Change text color to foreground or background for contrast */
  color: var(--ef-bg) !important; 
  /* Optional: Add a subtle box shadow */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); 
}



/* Ensure the default 'btn-outline-primary' text color is set correctly in dark mode */
.quarto-dark .btn-outline-primary {
    color: var(--ef-yellow) !important;
    border-color: var(--ef-yellow) !important;
}

/* --- EVERFOREST LIGHT THEME OVERRIDES --- */

/* Define Everforest Light Colors (Soft Palette used here) */
:root {
  --efl-bg: #f8f0d8; /* Light Background */
  --efl-fg: #5a647e; /* Light Foreground */
  --efl-red: #f85552;
  --efl-green: #67a22f;
  --efl-yellow: #a2734c;
  --efl-blue: #47959b;
}

/* Base body/background styles for Light Theme */
.quarto-light {
  background-color: var(--efl-bg) !important;
  color: var(--efl-fg) !important;
}
.quarto-light .content {
  background-color: var(--efl-bg) !important;
  color: var(--efl-fg) !important;
}

/* Headings in Light Theme */
.quarto-light h1, .quarto-light h2, .quarto-light h3, .quarto-light h4, .quarto-light h5, .quarto-light h6 {
  color: var(--efl-yellow) !important;
}

/* Links in Light Theme */
.quarto-light a {
  color: var(--efl-blue) !important;
}
.quarto-light a:hover {
  color: var(--efl-fg) !important;
}

/*/* Ensure buttons and other elements use the light colors when active */
/*.quarto-light .btn-outline-primary {
/*    color: var(--efl-blue) !important;
/*    border-color: var(--efl-blue) !important;
/*}

/* Apply the hover effect for the Light Theme buttons */
.button-container a:hover.quarto-light:hover {
    /* Background becomes light blue */
    background-color: var(--efl-blue) !important; 
    /* Text becomes the light background color for contrast */
    color: var(--efl-bg) !important; 
}

.button-container .btn {
  /* Set fixed structural properties */
  padding: 0.375rem 0.75rem; /* Standard Bootstrap padding */
  border-radius: 0.25rem;    /* Standard Bootstrap corner radius */
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  
  /* Ensure a solid border width is used in both themes */
  border-width: 1px;
  border-style: solid;
  
  /* Add smooth transition for structure consistency on hover/change */
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* --- LIGHT THEME OVERRIDES (Ensure Button Colors Match Shape) --- */

/* Base Light Theme Button Colors */
.quarto-light .btn-outline-primary {
    color: var(--efl-blue) !important;
    border-color: var(--efl-blue) !important;
    background-color: transparent !important; /* Crucial: ensures background is transparent */
}

/* Apply the hover effect for the Light Theme buttons */
.button-container a:hover.quarto-light {
    background-color: var(--efl-blue) !important; 
    color: var(--efl-bg) !important; 
}

/*/* add extra space to the right of the icon */ 
/*.quarto-color-scheme-toggle {
/*  margin-right: 15px !important;
/*}
/*
/*.quarto-color-scheme-toggle:not(.alternate) .bi::before {
/*  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%234a5568" class="bi bi-moon-stars-fill" viewBox="0 0 16 16"><path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/><path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/></svg>') !important;
/*}
/*
/*
/*body.quarto-dark .quarto-color-scheme-toggle > .bi::before {
/*  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23d1d5db" class="bi bi-sun-fill" viewBox="0 0 16 16"><path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.414a.5.5 0 1 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707z"/></svg>') !important;
/*}

/* Force the size of the icon element */
.quarto-color-scheme-toggle .bi::before {
    width: 30px !important;
    height: 30px !important;
    background-size: contain !important; /* Ensures the SVG fills the new 24px space */
    /* Add extra space to the right of the icon */ 
    margin-right: 20px !important;
    /* You may need to remove margin-right from the parent if conflict occurs */
}

/* 🌙 MOON ICON (Visible when page is in Light Mode, prompts switch to Dark) */
.quarto-color-scheme-toggle:not(.alternate) .bi::before {
  /* Everforest Yellow Fill: #dbbc7f */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23dbbc7f" class="bi bi-moon-stars-fill" viewBox="0 0 16 16"><path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/><path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/></svg>') !important;
}

/* ☀️ SUN ICON (Visible when page is in Dark Mode, prompts switch to Light) */
body.quarto-dark .quarto-color-scheme-toggle > .bi::before {
  /* Everforest Cyan/Blue Fill: #7fbbb3 */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%237fbbb3" class="bi bi-sun-fill" viewBox="0 0 16 16"><path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.414a.5.5 0 1 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707z"/></svg>') !important;
}