/* ═══════════════════════════════════════════════════════════════════════════
   COLOR PALETTE
   Change these four values to retheme the entire site.
   --siggd-red       : primary accent (links, active items, header text)
   --siggd-red-light : hover / lighter variant
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --siggd-red:       #c62828;
  --siggd-red-light: #ef5350;
}

[data-md-color-scheme="slate"] {
  --siggd-red:       #ef5350;
  --siggd-red-light: #ef9a9a;
}

/* Wire into Material's own variables so plugins/components pick up the right colours */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-accent-fg-color:              var(--siggd-red);
  --md-accent-fg-color--transparent: rgba(198, 40, 40, 0.08);
  --md-typeset-a-color:              var(--siggd-red);
  --md-primary-fg-color:             #000000;
  --md-primary-fg-color--light:      #2a2a2a;
  --md-primary-fg-color--dark:       #000000;
  --md-primary-bg-color:             #ffffff;
  --md-primary-bg-color--light:      rgba(255, 255, 255, 0.65);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BODY LINKS
   !important required — Material injects --md-typeset-a-color via JS on
   some builds, which beats plain CSS variable declarations.
   ═══════════════════════════════════════════════════════════════════════════ */

.md-typeset a {
  color: var(--siggd-red) !important;
}

.md-typeset a:is(:focus, :hover) {
  color: var(--siggd-red-light) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HIGHLIGHT / MARK
   ==highlighted text== and search matches — light red wash, no yellow.
   ═══════════════════════════════════════════════════════════════════════════ */

.md-typeset mark {
  background-color: rgba(198, 40, 40, 0.15);
  color: inherit;
}

[data-md-color-scheme="slate"] .md-typeset mark {
  background-color: rgba(239, 83, 80, 0.2);
  color: inherit;
}

.md-search-result mark {
  color: var(--siggd-red) !important;
  background-color: rgba(198, 40, 40, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOCUS RINGS — no browser-default blue
   ═══════════════════════════════════════════════════════════════════════════ */

:focus-visible {
  outline-color: var(--siggd-red) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.md-header {
  background-color: #000000 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}

.md-header__title {
  color: #ffffff;
}

/* Icons — white, turn lighter red on hover */
.md-header__button {
  color: rgba(255, 255, 255, 0.75) !important;
}

.md-header__button:is(:focus, :hover) {
  color: var(--siggd-red-light) !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION TABS
   Red text by default on the black bar; lighter red on hover/active.
   !important required — Material hardcodes rgba(255,255,255,.7) on these.
   ═══════════════════════════════════════════════════════════════════════════ */

.md-tabs {
  background-color: #000000 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.md-tabs__link {
  color: var(--siggd-red) !important;
  opacity: 1 !important;
}

.md-tabs__link:is(:focus, :hover) {
  color: var(--siggd-red-light) !important;
  opacity: 1 !important;
}

.md-tabs__link--active {
  color: var(--siggd-red-light) !important;
  opacity: 1 !important;
}

.md-tabs__link--active::after {
  background-color: var(--siggd-red) !important;
  height: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════ */

.md-nav__link--active {
  color: var(--siggd-red) !important;
  font-weight: 700;
}

.md-nav__link:is(:focus, :hover) {
  color: var(--siggd-red) !important;
}

/* Right-side table of contents */
.md-nav--secondary .md-nav__link--active,
.md-nav--secondary .md-nav__link:is(:focus, :hover) {
  color: var(--siggd-red) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH
   ═══════════════════════════════════════════════════════════════════════════ */

.md-search-result__link:is(:focus, :hover) {
  background-color: rgba(198, 40, 40, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.md-footer {
  background-color: #000000 !important;
}

.md-footer__link:is(:focus, :hover) .md-footer__title {
  color: var(--siggd-red-light);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.md-typeset .grid.cards > * {
  border-radius: 8px;
}

@media screen and (min-width: 76.25em) {
  .md-content {
    max-width: 900px;
  }
}

.md-source-file {
  margin-top: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORIGINAL AUTHOR ATTRIBUTION
   ═══════════════════════════════════════════════════════════════════════════ */

.siggd-original-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding: 0.4rem 0.75rem;
  border-left: 3px solid var(--siggd-red);
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

.siggd-author-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.siggd-author-label::after {
  content: ":";
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAGS & BADGES
   ═══════════════════════════════════════════════════════════════════════════ */

.md-tag {
  background-color: var(--siggd-red) !important;
  color: #ffffff !important;
  border-radius: 4px;
  padding: 0.1em 0.5em;
  font-size: 0.7rem;
}

.difficulty-beginner    { color: #388e3c; font-weight: 600; }
.difficulty-intermediate{ color: #f57c00; font-weight: 600; }
.difficulty-advanced    { color: var(--siggd-red); font-weight: 600; }