/* The Great Wave Color Palette CSS Theme */
:root {
  --dark-tan: #c1a06e;
  --light-tan: #d9d1ba;
  --light-blue: #82b0b2;
  --medium-blue: #346b84;
  --dark-blue: #1a3657;


  /* Kanagawa Color Palette */
  --dark-tan: #c1a06e;
  --light-tan: #d9d1ba;
  --light-blue: #82b0b2;
  --medium-blue: #346b84;
  --dark-blue: #1a3657;
  --medium-grey: #babbbd;
  --fujiWhite: #DCD7BA;
  --oldWhite: #C8C093;
  --sumiInk0: #16161D;
  --sumiInk1: #1F1F28;
  --sumiInk2: #2A2A37;
  --sumiInk3: #363646;
  --sumiInk4: #54546D;
  --waveBlue1: #223249;
  --waveBlue2: #2D4F67;
  --winterGreen: #2B3328;
  --winterYellow: #49443C;
  --winterRed: #43242B;
  --winterBlue: #252535;
  --autumnGreen: #76946A;
  --autumnRed: #C34043;
  --autumnYellow: #DCA561;
  --samuraiRed: #E82424;
  --roninYellow: #FF9E3B;
  --waveAqua1: #6A9589;
  --dragonBlue: #658594;
  --fujiGray: #727169;
  --springViolet1: #938AA9;
  --oniViolet: #957FB8;
  --crystalBlue: #7E9CD8;
  --springViolet2: #9CABCA;
  --springBlue: #7FB4CA;
  --lightBlue: #A3D4D5;
  --waveAqua2: #7AA89F;
  --springGreen: #98BB6C;
  --boatYellow1: #938056;
  --boatYellow2: #C0A36E;
  --carpYellow: #E6C384;
  --sakuraPink: #D27E99;
  --waveRed: #E46876;
  --peachRed: #FF5D62;
  --surimiOrange: #FFA066;
  --katanaGray: #717C7C;
}

/* Custom theme overrides */
body {
  background-color: var(--light-tan);
  color: var(--dark-blue);
}

/* Navigation bar */
.navbar {
  background-color: var(--dark-blue) !important;
}

.navbar-brand,
.navbar-nav .nav-link {
  color: var(--light-tan) !important;
}

.navbar-nav .nav-link:hover {
  color: var(--light-blue) !important;
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
  color: var(--medium-blue);
}

/* Header underlines/borders */
h2, h3 {
  border-bottom: 1px solid var(--medium-blue);
}

/* Links */
a {
  color: var(--medium-blue);
}

a:hover {
  color: var(--light-blue);
}

/* Cards and content blocks */
.card {
  background-color: var(--light-tan);
  border-color: var(--dark-tan);
}

.card-header {
  background-color: var(--dark-tan);
  color: var(--dark-blue);
}

/* Blog post listings */
.listing-item {
  background-color: var(--light-tan);
  border-color: var(--dark-tan);
}

.listing-item:hover {
  background-color: var(--dark-tan);
}

/* Code blocks */
pre {
  background-color: var(--dark-blue);
  color: var(--light-tan);
}

code {
  background-color: var(--dark-tan);
  color: var(--dark-blue);
}

/* Buttons */
.btn-primary {
  background-color: var(--medium-blue);
  border-color: var(--medium-blue);
}

.btn-primary:hover {
  background-color: var(--light-blue);
  border-color: var(--light-blue);
}

/* Footer */
.footer {
  background-color: var(--dark-blue);
  color: var(--light-tan);
}

/* Footnotes - seamless integration */
.footnotes {
  background-color: var(--light-tan);
  color: var(--dark-blue);
  border: none;
}

.footnotes ol li {
  color: var(--dark-blue);
}

.footnotes a {
  color: var(--medium-blue);
}

.footnotes a:hover {
  color: var(--light-blue);
}

/* Markdown horizontal rules/lines */
hr {
  border-color: var(--dark-tan);
  background-color: var(--dark-tan);
}

/* Page breaks */
.page-break,
.pagebreak {
  border-top: 2px solid var(--dark-tan);
  background-color: var(--dark-tan);
}

/* Footnote separators and bottom page breaks */
.footnotes::before,
.footnotes-sep,
.footnote-separator {
  border-top: 1px solid var(--dark-tan);
  background-color: var(--dark-tan);
}

/* Additional markdown line elements */
.quarto-listing-category .category {
  border-bottom: 1px solid var(--dark-tan);
}

/* Blockquote borders */
blockquote {
  border-left: 4px solid var(--medium-blue);
  background-color: rgba(193, 160, 110, 0.1);
}

/* Override default Quarto styling for listings and content */
.quarto-listing .listing-item,
.quarto-listing .quarto-post {
  border-color: var(--dark-tan) !important;
  background-color: var(--light-tan) !important;
}

/* Override default text colors */
.quarto-listing .listing-title,
.quarto-listing .listing-description,
.quarto-listing .listing-date,
.quarto-listing .listing-author,
.quarto-listing .listing-categories,
.listing-item,
.quarto-post .body {
  color: var(--dark-blue) !important;
}

/* Specific targeting for blog post titles and descriptions */
.quarto-post .listing-title a,
.quarto-post .listing-title,
.quarto-post .delink .listing-description p,
.quarto-post .listing-description,
.quarto-post .body h3,
.quarto-post .body p {
  color: var(--dark-blue) !important;
}

/* Override category styling */
.quarto-listing-category .category {
  color: var(--dark-blue) !important;
  border-bottom-color: var(--light-tan) !important;
}

/* Blog post categories styling */
.quarto-post .listing-categories .listing-category {
  border: 1px solid var(--dark-tan) !important;
  background-color: var(--light-tan) !important;
  color: var(--dark-blue) !important;
}

/* Override any remaining white backgrounds and black text */
.quarto-light,
.quarto-light .content,
.quarto-light main {
  background-color: var(--light-tan) !important;
  color: var(--dark-blue) !important;
}

/* Table of contents - change green hover/active color to dark tan for all headings */
.sidebar nav[role="doc-toc"] ul li a:hover,
.sidebar nav[role="doc-toc"] ul li a.active,
.sidebar nav[role="doc-toc"] a:hover,
.sidebar nav[role="doc-toc"] a.active,
#toc ul li a:hover,
#toc ul li a.active {
  color: var(--dark-tan) !important;
}

/* Table of contents - specific styling for h3 elements only */
#TOC ul.collapse li a:hover,
#TOC ul.collapse li a.active,
.sidebar nav[role="doc-toc"] ul.collapse li a:hover,
.sidebar nav[role="doc-toc"] ul.collapse li a.active,
#quarto-margin-sidebar #TOC ul.collapse li a.nav-link:hover,
#quarto-margin-sidebar #TOC ul.collapse li a.nav-link.active,
nav[role="doc-toc"] ul.collapse li a:hover,
nav[role="doc-toc"] ul.collapse li a.active,
.sidebar nav[role="doc-toc"] ul li ul li a:hover,
.sidebar nav[role="doc-toc"] ul li ul li a.active,
#toc ul li ul li a:hover,
#toc ul li ul li a.active {
  color: var(--dark-tan) !important;
  border-left-color: var(--dark-tan) !important;
}

/* More specific targeting for the exact HTML structure we found */
#quarto-margin-sidebar nav#TOC ul.collapse li a.nav-link:hover,
#quarto-margin-sidebar nav#TOC ul.collapse li a.nav-link.active,
#quarto-margin-sidebar nav[role="doc-toc"] ul.collapse li a:hover,
#quarto-margin-sidebar nav[role="doc-toc"] ul.collapse li a.active,
div#quarto-margin-sidebar nav#TOC ul.collapse li a:hover,
div#quarto-margin-sidebar nav#TOC ul.collapse li a.active {
  color: var(--dark-tan) !important;
  border-left-color: var(--dark-tan) !important;
}

/* Override Bootstrap's default link colors specifically for TOC */
#TOC a,
#TOC a:hover,
#TOC a:focus,
#TOC a:active,
.sidebar nav[role="doc-toc"] a,
.sidebar nav[role="doc-toc"] a:hover,
.sidebar nav[role="doc-toc"] a:focus,
.sidebar nav[role="doc-toc"] a:active {
  color: var(--dark-blue) !important;
}

/* Override Bootstrap's default link colors specifically for nested TOC items */
#TOC ul.collapse li a,
#TOC ul.collapse li a:hover,
#TOC ul.collapse li a:focus,
#TOC ul.collapse li a:active {
  color: var(--dark-tan) !important;
}

/* Table of contents line/border color */
.sidebar nav[role="doc-toc"] ul li a.active,
.sidebar nav[role="doc-toc"] ul li a:hover,
#toc ul li a.active,
#toc ul li a:hover {
  border-left-color: var(--dark-tan) !important;
}

/* Table of contents overall bar/container border */
.sidebar nav[role="doc-toc"],
#toc,
.sidebar nav[role="doc-toc"] ul {
  border-left-color: var(--dark-blue) !important;
}

/* Table of contents inactive border color */
.sidebar nav[role="doc-toc"] ul li a,
#toc ul li a,
.sidebar nav[role="doc-toc"] ul li ul li a,
#toc ul li ul li a {
  border-left-color: var(--light-blue) !important;
}

/* Table of contents "On this page" text color */
.sidebar nav[role="doc-toc"] .toc-title,
#toc .toc-title,
.sidebar .toc-title {
  color: var(--dark-blue) !important;
}

/* Footnotes appendix section - ensure light tan background */
#quarto-appendix,
.quarto-appendix {
  background-color: var(--light-tan) !important;
}

/* Footnotes appendix heading */
.quarto-appendix-heading {
  background-color: var(--light-tan) !important;
  color: var(--medium-blue) !important;
}

/* Footnotes appendix section border/line */
#quarto-appendix::before,
.quarto-appendix::before,
section.footnotes::before,
.footnotes::before,
#footnotes::before,
section#footnotes::before {
  border-top: 1px solid var(--light-tan) !important;
}

/* Override any default footnotes border styling */
section.footnotes,
#footnotes,
.footnotes-end-of-document {
  border-top: 1px solid var(--light-tan) !important;
}

/* Target the white line/box above footnotes */
#quarto-appendix {
  border-top: 1px solid var(--light-tan) !important;
}

/* Override default appendix styling */
.default {
  background-color: var(--light-tan) !important;
  border-top: 1px solid var(--light-tan) !important;
}

/* Tabset styling to match theme */
.panel-tabset {
  background-color: var(--light-tan) !important;
}

/* Tab navigation styling */
.nav-tabs {
  border-bottom: 2px solid var(--medium-blue) !important;
  background-color: transparent !important;
}

/* Individual tab buttons */
.nav-tabs .nav-link {
  background-color: var(--dark-tan) !important;
  color: var(--dark-blue) !important;
  border: 1px solid var(--dark-tan) !important;
  border-bottom: none !important;
  margin-right: 2px;
  border-radius: 0.25rem 0.25rem 0 0 !important;
}

/* Hover state for tab buttons */
.nav-tabs .nav-link:hover {
  background-color: var(--light-blue) !important;
  color: var(--dark-blue) !important;
  border-color: var(--light-blue) !important;
}

/* Active tab button */
.nav-tabs .nav-link.active {
  background-color: var(--medium-blue) !important;
  color: var(--light-tan) !important;
  border-color: var(--medium-blue) !important;
  border-bottom: 2px solid var(--medium-blue) !important;
}

/* Tab content area */
.tab-content {
  background-color: var(--light-tan) !important;
  border: 1px solid var(--medium-blue) !important;
  border-top: none !important;
  padding: 1rem !important;
  border-radius: 0 0.25rem 0.25rem 0.25rem !important;
}

/* Individual tab panes */
.tab-pane {
  background-color: var(--light-tan) !important;
  color: var(--dark-blue) !important;
}