/* docs/assets/stylesheets/extra.css */

/* --- Header Styling --- */
.md-header {
  /* The 'primary' color from mkdocs.yml will be applied here by the theme */
  /* Ensure header text and icons are white/light for contrast against red */
  color: #FFFFFF; /* White text/icons in the header */
}

.md-header__button svg {
  fill: #FFFFFF; /* Ensure icons like search, settings are white */
}

/* --- Logo Styling --- */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2.2rem;
  width: auto;
  /* If your SVG logo has paths that should be white,
     and they are not inheriting, you might need specific SVG styling
     or ensure the SVG itself is designed for a colored background.
     Often, SVGs with 'currentColor' for fill will adapt. */
}

/* --- General Typography & Spacing (from previous suggestion) --- */
body {
  line-height: 1.65;
}

.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-weight: 600;
}

.md-typeset h1 {
  margin-top: 0;
}

/* --- Sidebar Styling --- */
/* Active link in sidebar - now uses the ACCENT color for distinction */
.md-nav__link--active {
  font-weight: 600;
  color: var(--md-accent-fg-color); /* Uses the accent color defined in mkdocs.yml */
  border-left: 2px solid var(--md-accent-fg-color); /* Example active indicator */
  padding-left: calc(1.2rem - 2px); /* Adjust padding to account for border */
}
.md-nav__link--active:hover {
  color: var(--md-accent-fg-color-dark); /* Slightly darker accent on hover */
}


/* --- Link Styling - Using a consistent, professional color --- */
.md-typeset a {
  color: #4990E2; /* TagTaste Blue for general content links */
  text-decoration: none;
  font-weight: 500;
}
.md-typeset a:hover {
  color: #F47816; /* TagTaste Orange for link hover */
  text-decoration: underline;
}

/* --- Admonition Styling (using brand colors, as before) --- */
.md-typeset .admonition.success,
.md-typeset details.success {
  border-left-color: #00A146; /* TagTaste Green */
}
.md-typeset .admonition.success > .admonition-title,
.md-typeset details.success > summary {
  background-color: rgba(0, 161, 70, 0.1);
}
.md-typeset .admonition.success > .admonition-title::before,
.md-typeset details.success > summary::before {
  color: #00A146;
}

/* ... (other admonition styles for warning, failure as previously defined) ... */

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: #EFB920; /* TagTaste Yellow */
}
.md-typeset .admonition.warning > .admonition-title,
.md-typeset details.warning > summary {
  background-color: rgba(239, 185, 32, 0.1);
}
.md-typeset .admonition.warning > .admonition-title::before,
.md-typeset details.warning > summary::before {
  color: #EFB920;
}

.md-typeset .admonition.failure,
.md-typeset details.failure {
  border-left-color: #DD2E1F; /* TagTaste Error Red */
}
.md-typeset .admonition.failure > .admonition-title,
.md-typeset details.failure > summary {
  background-color: rgba(221, 46, 31, 0.1);
}
.md-typeset .admonition.failure > .admonition-title::before,
.md-typeset details.failure > summary::before {
  color: #DD2E1F;
}


/* --- Table Styling (as before) --- */
.md-typeset table:not([class]) {
  font-size: 0.9em;
}
.md-typeset table:not([class]) th {
  font-weight: 600;
  background-color: var(--md-default-fg-color--lightest);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: rgba(255, 255, 255, 0.07);
}

/* --- Grid Card Enhancements (as before) --- */
.md-typeset .grid.cards > ul > li {
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 4px;
    transition: box-shadow .25s, border-color .25s;
}
.md-typeset .grid.cards > ul > li:hover {
    box-shadow: 0 0 5px var(--md-default-fg-color--light);
    border-color: var(--md-primary-fg-color); /* Uses the primary color (red) for card hover border */
}

/* --- Button Styling --- */
/* Primary buttons in cards - using the ACCENT color now, as header is primary red */
.md-typeset .md-button--primary {
    background-color: var(--md-accent-fg-color); /* Uses accent color (grey) */
    border-color: var(--md-accent-fg-color);
    color: var(--md-accent-bg-color); /* Text color that contrasts with accent */
}
.md-typeset .md-button--primary:hover {
    background-color: var(--md-accent-fg-color--dark);
    border-color: var(--md-accent-fg-color--dark);
}
/* Accent button styling - could use another brand color, e.g., blue */
.md-typeset .md-button--accent {
    background-color: #4990E2; /* TagTaste Blue */
    border-color: #4990E2;
    color: #FFFFFF;
}
.md-typeset .md-button--accent:hover {
    background-color: #337ab7; /* Darker TagTaste Blue */
    border-color: #337ab7;
}