/* Import fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Eagle+Lake&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Texturina:ital,opsz,wght@0,12..72,100..900;1,12..72,100..900&display=swap');


/* -------- GLOBAL FONT ------- */
:root {
    /* Default theme variable overrides */
    --font-body: 'Source Sans 3', 'Nata Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --font-heading:  "Texturina", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    
    /* Custom variables */
    --c-accent: #850FA1;
    --c-accent-light: #b02dcf;
    
    --color-l-foreground: #252525;
    
    --color-l-accent: var(--c-accent-light);    
    --color-d-accent: var(--c-accent-light);


}

:is(h1, h2, h3, h4, h5, h6), :is(h1, h2, h3, h4, h5, h6) a {
    color: var(--color-foreground) !important;
}
/*
[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6), :is(h1, h2, h3, h4, h5, h6) a {
    color: var(--color-foreground) !important;
}*/

/* ---------------------------- SIDEBARS  ----------------------------*/
/* ---------  FONT ---------- */
.page-toc-container, .site-sidebar, .toc-title {
    font-family: 'Source Sans 3', 'Nata Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !important;
}

/* --------- SIZE and WEIGHT  ---------- */
.toc-list > li > a {
    font-weight: 400;
    font-size: 1rem;
}

.page-toc-container {    
    font-size: 0.95rem;
}

.site-tree-container {
    font-size: 0.95rem !important;
}

/* --------- underline current -------- */
.toc-item-self[aria-current=true] {
    /* text-decoration: underline 0.5px; */
	font-weight: var(--font-weight-semibold);
}

.site-tree-item-self.is-current {
    /* text-decoration: underline 0.5px; */
	font-weight: var(--font-weight-semibold);
}

.site-tree-item:has(.is-current) > .site-tree-item-self {
    /* text-decoration: underline 0.5px; */
	font-weight: var(--font-weight-semibold);
}



@media (min-width: 1280px) {
    .layout-inner.has-sidebar-and-toc {
        grid-template-columns: 12rem minmax(0, 1fr) 12rem;
    }
}
@media (min-width: 1024px) {
    .layout-inner.has-sidebar-and-toc {
        grid-template-columns: 12rem minmax(0, 1fr) 12rem;
    }
}




/* --------- NAVBAR -------- */
.site-navbar {
    background-color: var(--c-accent);
    position: sticky; /*static*/
}

.site-navbar-inner{
    color: var(--color-background);
}

.site-navbar-site-name {
    font-size: 1.8rem;
    color: var(--color-background);
    font-family: "Eagle Lake", "Amarante", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.site-navbar-link {
    font-size: 1.1rem;
    font-family: 'Source Sans 3', 'Nata Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    font-weight: 600 !important;    
}

/*bigger gap between site links*/
/*default value: calc(1rem * calc(1 - var(--tw-space-x-reverse)))*/
.site-navbar-links-container>:not([hidden])~:not([hidden]) {
    margin-left: 2.5rem !important;
}

/* border between site name and links*/
.site-navbar-links-container {
    padding-left: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-left: 20px;
    border-left-width: 2px;
    border-color: var(--color-background);
}

/*  dark mode navbar - white */
[data-theme="dark"] .site-navbar-inner, 
[data-theme="dark"] .site-navbar-site-name {
    color: var(--color-foreground);
}

[data-theme="dark"] .site-navbar-links-container {
    border-color: var(--color-foreground);
}

/* dark theme switch button - black moon*/
/*[data-theme="dark"] button.theme-switch {
    background-color: var(--color-foreground);
}*/

[data-theme="dark"] .theme-switch {
    background-color: var(--color-foreground);
    color: var(--color-foreground-500);
}
[data-theme="dark"] .theme-switch:hover {
    /*background-color: var(--color-foreground);*/
    color: var(--color-foreground-300);
}

.site-navbar-social-links-container{
	gap: 10px;
}

/* --------- HERO -------- */
.page-hero-container {
    background-color: #f0f0f0;
}

[data-theme="dark"] .page-hero-container {
    background-color: #272727 !important;
}

.page-hero-image-container {
    padding : 20px 20px;
}

.page-hero-image {
    object-fit: contain;    
    background-color: inherit;
    max-height: 50%;
    margin: auto;
    display: block;
}

[data-theme=dark] .page-hero-image {
    background-color: inherit !important;
}

.page-hero-cta:first-of-type {
    background-color: var(--c-accent);
}

.page-hero-cta:first-of-type:hover {
    background-color: var(--c-accent-light);
}

.page-hero-cta:not(:first-of-type) {
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-primary-strong) / var(--tw-text-opacity, 1));
    border: medium solid var(--c-accent);
    border-radius: 5px;
    padding: 3px 6px;
}

.page-hero-cta {
    margin: 0px 24px 0px 0px !important;
}

.page-hero-cta:not(:first-of-type):hover {    
    border-color: var(--c-accent-light);    
    background-color: var(--color-background);
}

/*wrap buttons on phone*/
.page-hero-ctas-container {
    flex-wrap: wrap;
    row-gap: 10px;
}

/* --------- MISC -------- */
/* heading  weight */
:is(h1, h2), 
:is(h1, h2) a{
  font-weight: 650 !important;
}

:is(h3, h4, h5, h6),
:is(h3, h4, h5, h6) a{
  font-weight: 550 !important;
}

/* table headers bigger font */
th {
    font-size: 1.1rem;
}


/*     -------- IFRAME ---------     */


iframe.soundboard{
	height: auto !important;
}

iframe.wheel{
	max-width: 550px;
	height: auto;	
    border-radius: 10px;
    aspect-ratio: 5 / 6;
}

@media (max-width: 640px) {
  iframe {
    aspect-ratio: 3 / 5; /* taller on phones */
  }
}


.puzzleFrame {
	/*
  border: 2px solid #444;
  border-radius: 12px;
  */
  
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.2);
}

/*   --------- COLUMNS ---------   */

#mdxpage .grid-cols-3 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}

#mdxpage .grid-cols-2 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}


/*   --------- HIGHLIGHTS ---------   */
mark{
	/* added side padding for better readability */
	padding: 0px 5px; 
	/* round corners  */
    border-radius: 3px;
}

mark.red{
	background-color:lightcoral;
}

mark.yellow{
	background-color:yellow;
}

mark.cyan{
	background-color:cyan;
}

mark.green{
	background-color:palegreen;
}

mark.pink{
	background-color:orchid;
}

mark.blue{
	background-color:blue;
	color:white;
}

mark.black{
	background-color:grey;
	color:white;
}


/*   --------- my column ---------   */
.cols_2 {
display: flex;
flex-wrap: wrap; /* allows wrapping when not enough space */
gap: 2rem;       /* space between columns */
}

.cols_2 > :first-child {
flex: 0 0 auto;  /* auto width — fits content, doesn’t grow */
min-width: 55%;
}

.cols_2 > :nth-child(2) {
flex: 1 1 0%;     /* takes remaining space */
min-width: 100px; /* wraps if container is narrower */
}




/*     LIBRARY      */

@media screen and (min-width: 1024px){
    
    .library-list .list-component-item:nth-child(even) {
        flex-direction: row-reverse;
    }
}


.library-list .list-component-item {
    border-bottom-width: 0px;
}

.library-list .list-component-item-media-img {
    object-fit: contain;
}

.library-list .list-component-item-headline {
    font-size: var(--font-size-h4);
}
.library-list .list-component-item-summary {
    font-size: var(--font-size-base);
}

/*   FOOTER   */

/* 
.site-footer{
	display: none;
} */


/*    IMAGES LGHTBOX   */

.image-lightbox::backdrop {
    background: #0000008a;
}