/* Header styling - Light (classic) */
[data-md-color-scheme="default"] .md-header {
  background-color: #FEFDFB;
  color: #1F2328;
}

[data-md-color-scheme="default"] .md-header__button {
  color: #1F2328;
}

/* Header & Palette styling - Dark (slate) */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #262A35;
  --md-primary-fg-color--dark: #262A35;

  /* Base text and dim color overrides for dark mode */
  --md-default-fg-color--light: #cbd5e1;
  --md-default-fg-color--lighter: #cbd5e1;
  --md-default-fg-color--lightest: #94a3b8;
}

/* Force light gray color ONLY on sidebar navigation elements */
[data-md-color-scheme="slate"] .md-nav__link,
[data-md-color-scheme="slate"] .md-nav__title {
  color: #cbd5e1;
}

/* Set body text links and link carets/icons to Teal in Slate mode */
[data-md-color-scheme="slate"] .md-typeset a {
  color: #009688;
}

/* Re-enable dynamic hover/active colors from palette */
[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: var(--md-accent-fg-color);
}

/* Light mode navigation link adjustments */
[data-md-color-scheme="default"] {
  --md-default-fg-color--light: #475569;
  --md-default-fg-color--lighter: #64748b;
}

/* Increase header logo height and layout size */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2.8rem;
  width: auto;
}

/* Dynamic theme logo swapping via CSS media/attribute selectors */
[data-md-color-scheme="default"] .md-header__button.md-logo img {
  content: url("../assets/images/pinguinim_header_logo_light.png");
}

[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  content: url("../assets/images/pinguinim_header_logo_dark.png");
}

/* Reduce spacing around page titles and section headers */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  margin-top: 0.8em;    /* Default is usually ~1.6em to 2em */
  margin-bottom: 0.3em; /* Default is usually ~0.6em to 0.8em */
}

/* Glossary term dividers: Only place lines ABOVE terms that are preceded by another term (h3) */
.glossary-page h3 + * + h3,
.glossary-page h3 ~ h3 {
  border-top: 1px dashed var(--md-default-fg-color--lightest);
  padding-top: 0.8em;
  margin-top: 1.2em;
}

/* Ensure the first term right below an h2 letter header NEVER gets a top border */
.glossary-page h2 + h3 {
  border-top: none !important;
  padding-top: 0 !important;
}

/* Left-Border Marker Effect for H1 Headings */
.md-typeset h1 {
  border-left: 5px solid var(--md-accent-fg-color);
  padding-left: 0.6rem;
  background-color: rgba(var(--md-accent-fg-color--rgb), 0.08);
  border-radius: 0 4px 4px 0;
}

/* Left-Border Marker Effect for H3 Headings (Thinner Border & Teal Marker) */
.md-typeset h3 {
  border-left: 3px solid #009688;
  padding-left: 0.5rem;
  background-color: rgba(0, 150, 136, 0.08);
  border-radius: 0 4px 4px 0;
}

/* Force a single/trailing card on a new line to span 100% width of the row */
.md-typeset .grid.cards > ul > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* Primary button hover styling for Light (Classic) Mode */
[data-md-color-scheme="default"] .md-typeset td .md-button--primary:hover {
  background-color: var(--md-accent-fg-color) !important;
  border-color: var(--md-accent-fg-color) !important;
  color: #ffffff !important; /* Prevents low-contrast text in light mode */
}

/* Primary button hover styling for Dark (Slate) Mode */
[data-md-color-scheme="slate"] .md-typeset td .md-button--primary:hover {
  background-color: #009688 !important; /* Teal accent */
  border-color: #009688 !important;
  color: #ffffff !important;
}

/* Force inline code element inside buttons to inherit text color */
.md-typeset td .md-button code {
  background-color: transparent !important;
  color: inherit !important;
  border: none !important;
  box-shadow: none !important;
}