/* css styles */

* {
  /* --background: rgb(251,250,226); */
  --background: rgb(255,255,255);
  --white: rgb(255,255,255);
  --dark: rgb(100,100,100);
  --purple: rgb(41,54,93);
  --link: rgb(0,100,255);
  /* --primary: rgb(126,232,151); */
  --primary: rgb(230,230,230);
  --normal-button: rgb(230,230,230);
  --normal-button-text: rgb(0,0,0);
  --hover-button: rgb(60,60,60);
  --hover-button-text: rgb(230,230,230);

  --h1:48px;
  --h2:32px;
  --h3:28px;
  --h4:24px;
}

/* ======   SITE-WIDE   ===== */

body, p {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
  font-size: 16px;
}
h1, .h1 { font-size: var(--h1); }
h2, .h2 { font-size: var(--h2); }
h3, .h3 { font-size: var(--h3); }
h4, .h4 { font-size: var(--h4); }
h4 { font-weight: bold; margin-top: 0px; }



/* =====    MENU    ===== */

.menu-text {
    display: flex;
    align-items: center;
}
.sidebar-section.depth2 .menu-text {
    font-size: 0.9em;
}
.sidebar-item-container a.sidebar-item-text {
    padding: 4px;
    /* border-left: 2px solid rgb(230,230,230); */
}
.sidebar-item-container a.sidebar-item-text.active {
    background-color: rgb(235,235,235);
}
.nav_icon {
    padding-right: 4px;
    margin-right: 4px;
    width: 32px;
}

/* =====    LIST ITEMS ===== */

.no_bullets {
    list-style-type: none;
    padding-left: 0;
}
ul.collapsed, ol.collapsed {
    padding-left: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 6px;
    column-gap: 8px;
}
ul.collapsed li,
ol.collapsed li {
    display: inline-block;
    width: max-content;
    flex-shrink: 0;
    white-space: nowrap;
}
ul.collapsed:last-child,
ol.collapsed:last-child {
    margin-bottom:0;
}

ul.with_icons > li,
ul.inline_icons > li,
ol.with_icons > li,
ol.inline_icons > li,
ul.with_imgs > li,
ol.with_imgs > li {
    display:flex;
    flex-direction: row;
}

ul.with_icons > li img:first-child,
ul.inline_icons > li img:first-child,
ol.with_icons > li img:first-child,
ol.inline_icons > li img:first-child {
    display: inline-block;
    margin-right:8px;
}


ul.inline_icons > li img:first-child,
ol.inline_icons > li img:first-child {
    height: calc(1em + 8px);          /* match font size */
    vertical-align: middle; /* tweak alignment */
    background-color: #f0f0f0;
    border: 2px solid #1414141a;
    border-radius: 50%;
    padding: 4px;
}

ul.with_imgs > li img:first-child,
ol.with_imgs > li img:first-child {
    display:inline-block;
    margin-right:16px;
    width:150px;
    flex-basis:150px;
    flex-shrink:0;
    flex-grow:0;
    align-self:flex-start;
    border:1px solid black;
}



/* =====    TEXT MODS   ===== */

.boxed-text, 
.blue-boxed-text,
.button-text {
    display:inline-block;
    padding:0.25em 0.35em;
    border: 1px solid black;
    border-radius: 8px;
    margin-right: 6px;
    margin-bottom:6px;
}
.blue-boxed-text {
    background-color: blue;
    color: white;
}
.button-text {
    background-color: var(--normal-button);
    color: var(--normal-button-text);
    text-decoration:none;
}
.button-text:hover {
    cursor:pointer;
    background-color: var(--hover-button);
    color: var(--hover-button-text);
}


/* =====    MEDIA HANDLING  ===== */

.media_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.media_grid video,
.media_grid iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover; /* keeps images/videos nicely cropped */
  border-radius: 12px;
  margin-bottom: 0;
}

.media_grid figure,
.media_grid img {
    width: 100%;
    border-radius: 12px;
}



/* =====    QUARTO OVERWRITES   ===== */

.sidebar {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.nav-sidebar {
  padding-left: 0 !important;
}
body.nav-fixed .page-content {
  padding-left: 0 !important;
}

/* Hide the sidebar collapsible item arrow */
.sidebar-item-section .sidebar-item-toggle {
    display: none !important;
}

/* Force all sidebar groups of depth 2 to stay collapsed */
.sidebar-item-section .collapse.depth2.show{
  display: none !important;
}

.quarto-layout-row {
    align-items: stretch;
}
.quarto-layout-row > section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.quarto-layout-row > section > *:last-child {
    flex: 1;
}

/* Remove default Bootstrap look */
.nav-tabs {
  margin-bottom: 1.2rem;
}

.nav-tabs .nav-link {
  /* Typography similar to <h2> */
  font-size: 1.5rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--link);
  padding: 0;

  /* Remove button look */
  background: none !important;
  border: none !important;
  border-radius: 4px;

  /* Spacing between tabs */
  margin-right: 1.5rem;

  /* Helps users recognize clickability */
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

/* Hover: subtle highlight + underline -> affordance */
.nav-tabs .nav-link:hover {
  color: var(--quarto-accent) !important;  
  text-decoration: underline;
  background-color: rgba(0,0,0,0.05);       /* auto-adapts in dark mode */
}

/* Active tab: accented text + bottom bar like section emphasis */
.nav-tabs .nav-link.active {
  color: var(--quarto-accent) !important;
  text-decoration: none;
  background-color: rgba(0,0,0,0.08);        /* slightly stronger highlight */
  border-bottom: 2px solid var(--quarto-accent) !important;
  font-weight: 700; /* a bit stronger like a selected h2 */
}

/* Remove panel box styling */
.tab-content {
  border: none !important;
  padding: 0;
}

.tab-content .tab-pane {
  border: none !important;
}




@media only screen and (max-width: 900px) {

    ul.with_imgs > li, ol.with_imgs > li {
        flex-direction: column;
    }

    ul.with_imgs > li img:first-child, ol.with_imgs > li img:first-child {
        margin-right:0px;
        margin-bottom:16px;
        align-self: center;
    }

    .breadcrumb {
        font-size:0.8em;
    }
    
}