/* Custom css for MkDocs Material theme */

/* Code Example table class "t1" */
.t1 table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.t1 td, 
.t1 th {
  border: 1px solid #111;
  padding: 8px;
}

.t1 tr:nth-child(even) {
    background-color: #eaddcc;
}

.t1 tr:hover {
    background-color: #cba;
}

.t1 th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: rgb(98, 76, 53);
  color: white;
}

.t1 caption {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: rgb(88, 97, 106);
  color: white;
}

/* Drop cap */
.drop-cap p:first-child::first-letter {
    color: #900;
    float: left;
    font-size: 124px;
    line-height: 0.67;
    padding: 12px 8px 0px 0px;
    font-family: serif;
}

/* Description List used to display pairs of data */
/* See markdown Description/Definition List       */
dl {
  display: grid;
  grid-template-columns: max-content 1fr; /* Left column fits text, right column takes remaining space */
  gap: 0px 0px; /* Vertical and horizontal spacing */
  padding-left: 0px;
}

dt {
  color: teal;
  font-weight: bold;
  grid-column-start: 1; /* Always places the term in the first column */
}

dd {
  color: #922727;
  margin: 0; /* Overrides default browser indentation */
  grid-column-start: 1; /* Always places descriptions in the first column */
}

/* ---------------------------------- */
hr {
  height:4px; 
  border-width:0; 
  background-color: var(--md-default-fg-color--lighter);
  /* Note: Using Material's built-in CSS variables like --md-default-fg-color--lightest ensures your line color adjusts nicely when switching between light and dark color schemes. */
}

/* For Mermaid graphics, we want to ensure that the node background and text colors adapt to the current color scheme. 
The following CSS rules target Mermaid diagrams specifically when the dark/slate palette mode is active. */
/* Target only the dark/slate palette mode */
[data-md-color-scheme="slate"] .mermaid {
  --md-mermaid-node-bg-color: var(--md-default-bg-color) !important;
  --md-mermaid-node-text-color: var(--md-default-fg-color) !important;
  --md-mermaid-edge-color: var(--md-default-fg-color--light) !important;
  --md-mermaid-label-bg-color: var(--md-default-bg-color) !important;
}

/* Force specific element fills inside SVG containers */
[data-md-color-scheme="slate"] .mermaid svg * {
  fill: var(--md-default-bg-color);
  stroke: var(--md-default-fg-color--light);
  color: var(--md-default-fg-color);
}

/* Custom rounded button style */
.md-button.md-button--rounded {
  border-radius: 2rem; /* Soft, pill-shaped edge */
  padding-inline: 1.5rem; /* Extra padding looks better on round buttons */
}

.md-button.md-button--rounded-corners {
  border-radius: 0.5rem; /* Rounded corners */
  padding-inline: 1.5rem;
}

/* Table styling */
article table {
  border-collapse: collapse;
  width: 100%;
}

/* Color the header background and text */
article thead tr {
  background-color: #2a2f35;
  color: #ffffff;
}

/* Bold top/bottom cell borders only */
article th, article td {
  padding: 12px;
  text-align: left;
  border-bottom: 3px solid #dddddd;
}

/* Custom table */
.emoji-table tr {
  font-size: 1.5em;
}

/* Hide announcement bar (at top of page) */
/*
.hide-announcement .md-announcement {
  display: none;
}
*/

/*
.hide-announcement .custom-announcement {
  display: none;
}
*/

/*
div[data-md-component="announce"] {
  background-color: #1e3a8a;
  color: #ffffff;
  padding: 10px 0;
  font-weight: bold;
  text-align: center;
}
*/

/*
div[data-md-component="announce"] .extra-announcement {
  display: none;
}
*/

/*
div[data-md-component="announce"] {
  display: none;
}
*/

/* Hide announcement bar (at top of page) */
/*
div[data-md-component="announce"] {
  display: none;
}
*/