/*_____________________________________________________________________|
|______________________________________________________________________|
|        _   __   _   _ _   _   _   _         _                        |
|   |   |_| | _  | | | V | | | | / |_/ |_| | /                         |
|   |__ | | |__| |_| |   | |_| | \ |   | | | \_                        |
|    _  _         _ ___  _       _ ___   _                    / /      |
|   /  | | |\ |  \   |  | / | | /   |   \                    (^^)      |
|   \_ |_| | \| _/   |  | \ |_| \_  |  _/                    (____)o   |
|______________________________________________________________________|
|______________________________________________________________________|
|                                                                      |
|----------------------------------------------------------------------|
|   Copyright 2025, Rebecca Rashkin                                    |
|  -------------------------------                                     |
|   This code may be copied, redistributed, transformed, or built      |
|   upon in any format for educational, non-commercial purposes.       |
|                                                                      |
|   Please give me appropriate credit should you choose to use this    |
|   resource. Thank you :)                                             |
|----------------------------------------------------------------------|
|                                                                      |
|______________________________________________________________________|
|   //\^.^/\\  //\^.^/\\  //\^.^/\\  //\^.^/\\  //\^.^/\\  //\^.^/\\   |
|_____________________________________________________________________*/
/*  DESCRIPTION
/*  CSS Stylesheet for website.
/*____________________________________________________________________*/

@import "flux-bunny-colors.css";

/*--------------------------------------------------------------------*/
/* CONSTANTS
/*--------------------------------------------------------------------*/
:root
{
  /*------------------------------------------------------------------*/
  /* Dimensions
  /*------------------------------------------------------------------*/
  --content-padding   : 20px;
  --toc-link-padding  :  8px;
  --pg-padding        : 20px;

  --flux_button_txt   : var(--flux-bg-norm);

  --site-title-brdr   : 16px solid var(--flux-color-3);

  --content-border    :  8px solid var(--flux-color-3);
  --h2-border         :  4px solid var(--flux-color-2);
  --h3-border         :  1px solid var(--flux-bg-bold);

  --margin-site-title : clamp(28px, 4vw   + 1rem,   60px);
  --size-base         : clamp(16px, 1vw   + 0.5rem, 20px);
  --size-small        : clamp(12px, .5vw   + 0.5rem, 16px);

  --size-site-title   : clamp(48px, 4vw   + 1rem,   68px);
  --size-h1           : clamp(28px, 4vw   + 1rem,   48px);
  --size-h2           : clamp(24px, 3vw   + 0.8rem, 36px);
  --size-h3           : clamp(20px, 2vw   + 0.6rem, 28px);
  --size-h4           : clamp(18px, 1.5vw + 0.5rem, 24px);

  --size-code         : clamp(14px, 1vw   + 0.3rem, 18px);

  --size-toc-top      : clamp(12px, 1vw   + 0.4rem, 16px);
  --size-toc-gen      : clamp(10px, 1vw   + 0.2rem, 12px);

  --font-fam-header   : 'DIN Neuzeit Grotesk', 'Trebuchet MS';
  --font-fam-normal   : 'Consolas', monospace;

  --button-txt-size   : 20px;
}

body
{
  font-family       : var(--font-fam-normal);
  color             : var(--flux-fg-norm);
  background-color  : var(--flux-bg-norm);
}

/*--------------------------------------------------------------------*/
/* FULL WIDTH ELEMENTS
/*--------------------------------------------------------------------*/
.full-bleed
{
  width       : 100vw;
  /* Adjust for the center justification of quarto content */
  margin-left : 50%;
  transform   : translateX(-50%);
}

/*--------------------------------------------------------------------*/
/* HEADINGS
/*--------------------------------------------------------------------*/

h1, h2, h3, h4, h5 .flux-site-title
{
  font-family: var(--font-fam-header);
}

h1
{
  font-size     : var(--size-h1);
  color         : var(--flux-color-2);
  font-variant  : small-caps;
  padding-top   : var(--content-padding)
}

.flux-site-title
{
  font-family   : var(--font-fam-header);
  font-size     : var(--size-site-title);
  color         : var(--flux-color-2);
  font-weight   : bold;
  font-variant  : small-caps;
  text-align    : center;
  border        : none;
  padding-top   : 0px;
}

.site-subtitle
{
  font-size       : var(--size-h4);
  color           : var(--flux-fg-mute);
  font-family     : var(--font-fam-header);
  text-align      : center;
  border          : none;
  padding-top: 0px;
}

h2
{
  font-size     : var(--size-h2);
  color         : var(--flux-color-1);
  padding-top   : var(--content-padding);
  border-top    : var(--h2-border);
  border-bottom : none;
}

h3
{
  font-size     : var(--size-h3);
  color         : var(--flux-fg-mute);
  padding-top   : var(--content-padding);
  border-top    : var(--h3-border);
  font-variant  : small-caps;
}

h4
{
  margin-left: 0px;
}

h5
{
  font-family   : var(--font-fam-header);
  color         : var(--flux-color-2);
  font-weight   : bold;
}


/*--------------------------------------------------------------------*/
/* TABLE OF CONTENTS SIDE BAR
/*--------------------------------------------------------------------*/
#toc-title
{
  font-family   : var(--font-fam-header);
  color         : var(--flux-fg-mute);
  font-variant  : small-caps;
  border-top    : none;
  font-size     : var(--size-h4);
}

#quarto-margin-sidebar #TOC
{
  padding           : var(--content-padding);
  color             : var(--flux-fg-mute);
  background-color  : var(--flux-bg-bold);
}

#quarto-margin-sidebar a:hover
{
  color         : var(--flux-color-2) !important;         /* ! needed */
}

#quarto-margin-sidebar #TOC .nav-link
{
  font-size     : var(--size-toc-gen);
}

#quarto-margin-sidebar #TOC .nav-link
{
  border        : none;
}

#quarto-margin-sidebar #TOC .nav-link.active
{
  color         : var(--flux-color-1) !important;         /* ! needed */
  font-weight   : bold;
  border        : none;
}

/* Keep the quarto margin sidebar TOC fully expanded */
#quarto-margin-sidebar #TOC .collapse {
  display: block;
}

/* Top level link in TOC */
#quarto-margin-sidebar #TOC > ul > li:not(:has(ul)) > a.nav-link,
#quarto-margin-sidebar #TOC > ul > li:has(> ul) > a.nav-link
{
  font-family   : var(--font-fam-normal);
  font-size     : var(--size-toc-top);
  padding-top   : var(--toc-link-padding);
}

/*--------------------------------------------------------------------*/
/* PAGE NAVIGATION SIDEBAR
/*--------------------------------------------------------------------*/
#quarto-sidebar
{
  background-color: var(--flux-bg-norm);
  font-family     : var(--font-fam-header);
  border-right    : var(--h3-border);
}

#quarto-sidebar div
{
  color         : var(--flux-fg-mute);
}

#quarto-sidebar .active
{
  color           : var(--flux-color-1) !important;       /* ! needed */
  font-weight     : bold;
}

#quarto-sidebar a:visited
{
  color         : inherit;
}

#quarto-sidebar a:hover
{
  color: var(--flux-color-2);
}


/*--------------------------------------------------------------------*/
/* Don't apply top border to first h2 in main content.
/* Each time h2 is used in quarto, it adds a new .level2 section.
/* This code is targeting the h2 of first instance of level2 in main.
/*
/* Not currently active but keeping for reference.
/*--------------------------------------------------------------------*/
/*
main .level2:first-of-type h2{
  border-top: none;
}
*/

/*--------------------------------------------------------------------*/

/*--------------------------------------------------------------------*/
/* PAGE TITLE
/*--------------------------------------------------------------------*/
.quarto-title p
{
  font-size       : var(--size-h4);
  color           : var(--flux-fg-mute);
  font-family     : var(--font-fam-header);
}

.quarto-title
{
  padding-bottom  : var(--content-padding);
  border-bottom   : var(--content-border);
  margin-bottom   : var(--pg-padding);
}

/*--------------------------------------------------------------------*/
/* FOOTER
/*--------------------------------------------------------------------*/
.nav-footer
{
  background-color  : var(--flux-color-1);
  color             : var(--flux-bg-norm);
  font-family       : var(--font-fam-header);
  z-index           : 1000;
}

.nav-footer .nav-link, .nav-footer .nav-link:visited
{
  color             : var(--flux-bg-norm);
}

main
{
  padding-bottom  : var(--pg-padding);
  border-bottom   : var(--content-border)
}

/*--------------------------------------------------------------------*/
/* NAVIGATION BAR
/*--------------------------------------------------------------------*/
/* navbar       - Whole navigation bar
/* navbar-nav   - Container that holds nav links
/* nav-link     - Each link in navbar
/*--------------------------------------------------------------------*/

.navbar .navbar-nav .nav-link
{
  font-family     : var(--font-fam-header);
  color           : var(--flux-bg-norm);
  font-variant    : small-caps;
}

.navbar .navbar-nav .nav-link:hover
{
  font-weight     : normal;
  text-decoration : underline;
}

.navbar
{
  background-color: var(--flux-color-1);
}

/* Site name */
.navbar-brand
{
  font-family       : var(--font-fam-header);
  font-size         : var(--size-h4);
  color             : var(--flux-bg-norm);
  font-variant      : small-caps;
}

.navbar-brand:visited
{
  color             : var(--flux-bg-norm);
}

.navbar-brand:hover
{
  font-weight       : normal;
}

.navbar-link:hover
{
  font-weight       : normal;
}

.navbar-nav
{
  padding-right: var(--pg-padding);
}

.navbar-tools
{
  padding-right: var(--pg-padding);
}

/*--------------------------------------------------------------------*/
/* Search window
/*--------------------------------------------------------------------*/

.aa-Panel *
{
  color             : var(--flux-fg-norm) !important;     /* ! needed */
  background-color  : var(--flux-bg-norm) !important;     /* ! needed */
}

.search-result-container:hover
, .search-result-container:hover *:not(.search-match)
, .search-result-doc-section.search-item:hover
, .search-result-doc-section.search-item:hover *:not(.search-match)
, .search-result-more:hover
{
  color             : var(--flux-bg-norm) !important;     /* ! needed */
  background-color  : var(--flux-color-2) !important;     /* ! needed */
}

.search-match
{
  color             : var(--flux-bg-norm) !important;     /* ! needed */
  background-color  : var(--flux-color-1) !important;     /* ! needed */
}

/* Search entry pop up */
.aa-DetachedFormContainer
{
  background-color  : var(--flux-bg-norm) !important;     /* ! needed */
}

/* Cancel search button */
.aa-DetachedCancelButton
{
  color             : var(--flux-bg-norm) !important;     /* ! needed */
  background-color  : var(--flux-color-2) !important;     /* ! needed */
  font-family       : var(--font-fam-header) !important;  /* ! needed */
  border            : none;
}

/* Text entry */
input
{
  color             : var(--flux-fg-norm) !important;     /* ! needed */
}

/* Search text entry */
.aa-Form.d-flex
{
  background-color  : var(--flux-bg-bold);
  border            : 1px solid var(--flux-fg-mute);
}
/*--------------------------------------------------------------------*/
/* Icon colors
/*--------------------------------------------------------------------*/
.quarto-navbar-tools .quarto-navigation-tool
{
  color           : var(--flux-bg-norm) !important;       /* ! needed */
}
.aa-DetachedSearchButtonIcon svg {
  color           : var(--flux-bg-norm) !important;       /* ! needed */
}

.navbar-toggler-icon{background-image: none;}
/* Hamburger menu icon for mobile */
.navbar-toggler-icon::before {
  content         : "☰";
  font-size       : var(--size-h4);
  color           : var(--flux-bg-norm);
}

/* Hamburger menu icon positioning */
.navbar-toggler-icon {
  display         : flex;
  align-items     : center;
  justify-content : center;
}
/*--------------------------------------------------------------------*/

.dropdown-menu
{
  font-family       : var(--font-fam-normal);
  background-color  : var(--flux-color-2);
}

.dropdown-item:hover
{
  background-color  : var(--flux-color-3);
  color             : var(--flux-bg-norm);
}

.dropdown-item
{
  background-color  : var(--flux-bg-bold);
  color             : var(--flux-fg-norm);
}

.nav-icon
{
  height: 100px;
}

/*--------------------------------------------------------------------*/
/* BUTTONS & HYPERLINKS
/*--------------------------------------------------------------------*/

.flux-button
{
  font-family       : var(--font-fam-header);
  color             : var(--flux-bg-norm);
  display           : inline-block;
  text-decoration   : none; /* Don't underline */
  font-size         : var(--size-h4);
  text-align        : center;

  padding           : 0px 10px; /* Second entry is horizonal padding */
  margin-top        : 10px;

  align-items       : center;
  outline           : none;
  border            : none;
  border-radius     : 10px; /* make rounded */
}

.flux-button:visited { color: var(--flux_button_txt); }

.flux-button._1
{
  background-color  : var(--flux-color-1);
}

.flux-button._3
{
  background-color  : var(--flux-color-3);
  font-size         : var(--size-h3);
}

.flux-button._2
{
  background-color  : var(--flux-color-2);
  font-size         : var(--size-h3);
}

.flux-button:hover
{
  color             : var(--flux-color-3);
  background-color  : var(--flux-bg-bold);
}

.flux-button:active
{
  color             : var(--flux-bg-norm);
  background-color  : var(--flux-fg-mute);
}

/* Hyperlinks */
a         { color        : var(--flux-color-3); }
a:hover   { font-weight  : bold;                }
a:active  { color        : var(--flux-color-2); }
a:visited { color        : var(--flux-color-1); }

/*--------------------------------------------------------------------*/
/* CODE BLOCKS
/*--------------------------------------------------------------------*/

/* Inline Code Blocks */
code
{
  color             : var(--flux-fg-norm) !important;     /* ! needed */
}

.sourceCode, code, .code-with-copy
{
  border-radius     : 0 !important;                       /* ! needed */
  border            : none !important;                    /* ! needed */
  background-color  : var(--flux-bg-bold)!important;      /* ! needed */
}

/*--------------------------------------------------------------------*/
/* DROP DOWN
/*--------------------------------------------------------------------*/

/* Header for drop down */
details summary
{
  color           : var(--flux-fg-mute);
  cursor          : pointer;
  display         : list-item;  /* Restores triangle behavior */
  margin-top      : 0.5em;
}

details summary:hover
{
  color           : var(--flux-fg-mute);
}

/* Style when drop down is open */
details[open] summary {
  color         : var(--flux-color-3);
  font-weight   : bold;
}

details > *:not(summary) {
  margin-left: 1em;         /* slight indent for nested content */
}

details {
  margin-bottom   : 1em;
  border-left     : 3px solid var(--flux-color-2);
  padding-left    : 0.5em;
}

/*--------------------------------------------------------------------*/
/* BLOG
/*--------------------------------------------------------------------*/

/* Blog entry title background */
.quarto-title-banner
{
  background-color  : var(--flux-color-2);
  color             : var(--flux-bg-norm);
  font-family       : var(--font-fam-header);
  padding           : var(--content-padding);
  margin-bottom     : var(--content-padding);
}

/* Blog entry title */
.quarto-title-banner.page-columns.page-full h1.title
{
  color             : var(--flux-bg-norm);
}

/* Navigation bar for blog entry */
nav.quarto-page-breadcrumbs a
{
  color             : var(--flux-fg-mute) !important;     /* ! needed */
  font-size         : var(--size-small);
}

ol a:hover
{
  text-decoration: underline !important;
}

/* Before symbol in breadcrumb, i.e., the " > " */
ol .breadcrumb-item::before
{
  color             : var(--flux-fg-mute) !important;     /* ! needed */
}

#title-block-header ol.breadcrumb
{
  border-bottom     : var(--h3-border);
  vertical-align    : bottom;
  padding-top       : 0;
  padding-bottom    : var(--content-padding);
}

/*--------------------------------------------------------------------*/
/* Breadcrumb with narrow page
/*--------------------------------------------------------------------*/
.quarto-page-breadcrumbs ol.breadcrumb
{
  padding-bottom    : 0;
}

.quarto-secondary-nav
{
  font-size         : var(--size-small);
  background-color  : var(--flux-bg-norm) !important;     /* ! needed */
  padding: none;
}
/*--------------------------------------------------------------------*/

.quarto-title-banner .subtitle.lead
{
  color             : var(--flux-bg-norm) !important;
}

/* Blog entry preview */
.quarto-grid-item.card
{
  color             : var(--flux-fg-norm);
  background-color  : var(--flux-bg-bold);
  border            : 1px solid var(--flux-bg-bold);
}

.list.quarto-listing-default

.quarto-title-banner.page-columns.page-full .quarto-title.column-body
{
  border-bottom     : none;

  /* Remove extra bottom space in blog title banner */
  margin            : 0;
}

.quarto-post *
{
  color             : var(--flux-fg-norm) !important;     /* ! needed */
}

.listing-category
{
  color             : var(--flux-fg-mute) !important;     /* ! needed */
  border            : 1px solid var(--flux-fg-mute) !important;
}

/*--------------------------------------------------------------------*/
/* IMAGES
/*--------------------------------------------------------------------*/

/* Ensures all images are visible, even in dark mode */
img
{
  background-color  : var(--norm--wht-07);
  border            : 1px solid var(--flux-bg-norm);
}

img.plain
{
  background-color  : transparent;
  border            : none;
}

/* Hide the dark image by default */
.dark-only            { display: none; }

/* When dark-mode class is active, swap them */
.dark-mode .lite-only { display: none;  }
.dark-mode .dark-only { display: block; }

/*--------------------------------------------------------------------*/

/* Blog description on page under title */
.quarto-title .description p
{
  color             : var(--flux-bg-norm);
}

figcaption
{
  font-size         : var(--size-base);
  color             : var(--flux-fg-mute);
  text-align        : left;
  margin-top        : 5px;
  font-style        : italic;
}