/* ---- Colours: blue team vs red team ----------------------------------------
   Steel blue is the primary (header, links, primary buttons, chrome). Red is the
   mask logo's #dd2e44 toned down (saturation 72% -> 58%) and used sparingly: link
   and button hovers, danger and warning admonitions, and the outlined hero button.
   Link and red shades differ per scheme so text stays at WCAG AA (4.5:1) or better
   on the backgrounds it sits on; mkdocs.yml sets primary/accent to "custom". */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #3a5e88;         /* hsl(212, 40%, 38%) */
  --md-primary-fg-color--light: #4d7cb2;
  --md-primary-fg-color--dark: #2e4a6b;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
}

/* Light mode: darker link blue and red, for white and #eef0f3 backgrounds. */
[data-md-color-scheme="default"][data-md-color-primary="custom"] {
  --md-typeset-a-color: #2e629e;    /* hsl(212, 55%, 40%) */
}

[data-md-color-scheme="default"][data-md-color-accent="custom"] {
  --sleuth-red: #b12f40;             /* hsl(352, 58%, 44%) */
  --sleuth-red-tint: rgba(177, 47, 64, 0.1);
  --md-accent-fg-color: var(--sleuth-red);
  --md-accent-fg-color--transparent: var(--sleuth-red-tint);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: #ffffffb3;
}

/* Dark mode: lighter link blue and red, for the slate home background and the
   raised content panel. Text on a red fill is near-black rather than white. */
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-typeset-a-color: #85afe0;     /* hsl(212, 60%, 70%) */
}

[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --sleuth-red: #e18e99;              /* hsl(352, 58%, 72%) */
  --sleuth-red-tint: rgba(225, 142, 153, 0.12);
  --md-accent-fg-color: var(--sleuth-red);
  --md-accent-fg-color--transparent: var(--sleuth-red-tint);
  --md-accent-bg-color: #1a1c23;
  --md-accent-bg-color--light: #1a1c23b3;
}

/* Outlined buttons (e.g. "View source on GitHub") use the link blue, which meets AA
   on both panels; Material's default primary blue is too dark on the dark panel. */
.md-typeset .md-button:not(.md-button--primary) {
  color: var(--md-typeset-a-color);
  border-color: var(--md-typeset-a-color);
}

/* Danger and warning admonitions (and their aliases) take the toned red. */
.md-typeset .admonition:is(.danger, .error, .warning, .caution, .attention),
.md-typeset details:is(.danger, .error, .warning, .caution, .attention) {
  border-color: var(--sleuth-red);
}

.md-typeset :is(.danger, .error, .warning, .caution, .attention) > :is(.admonition-title, summary) {
  background-color: var(--sleuth-red-tint);
}

.md-typeset :is(.danger, .error, .warning, .caution, .attention) > :is(.admonition-title, summary)::before {
  background-color: var(--sleuth-red);
}

.md-typeset details:is(.danger, .error, .warning, .caution, .attention):focus-within {
  box-shadow: 0 0 0 0.2rem var(--sleuth-red-tint);
}

/* Home page landing layout (docs/README.md). Colours come from Material's
   theme variables so the page follows the light and dark palettes. */

.sleuth-hero {
  text-align: center;
  padding: 1.5rem 0 1rem;
}

.md-typeset .sleuth-hero__logo {
  width: 7rem;
  height: auto;
}

.md-typeset .sleuth-hero h1 {
  margin: 0.75rem 0 0.25rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
}

.md-typeset .sleuth-hero__tagline {
  max-width: 40rem;
  margin: 0 auto 1.5rem;
  font-size: 1.05rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .sleuth-hero .md-button {
  margin: 0.25rem 0.35rem;
}

/* Hero pair: "Browse the notes" is the solid blue primary button (blue team);
   "Explore detections" is outlined in red (the threat you go hunting). Its hover
   fills with the red; Material's primary button already hovers to the accent red. */
.md-typeset .sleuth-hero .md-button:not(.md-button--primary) {
  color: var(--sleuth-red);
  border-color: var(--sleuth-red);
}

.md-typeset .sleuth-hero .md-button:not(.md-button--primary):is(:hover, :focus) {
  color: var(--md-accent-bg-color);
  background-color: var(--sleuth-red);
  border-color: var(--sleuth-red);
}

/* The mask's behaviours (docs/javascripts/mask.js). The script wraps the header
   logo and the hero mask in .sleuth-mask, which holds the click message, with
   .sleuth-mask__body inside it. The idle bob or breathe runs on the image and
   the hover wiggle and click spin on the body, so they combine and the message
   stays level. All motion sits behind prefers-reduced-motion: no-preference. */
.sleuth-mask,
.sleuth-mask__body {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.md-header .sleuth-mask,
.md-header .sleuth-mask__body {
  display: block;
}

.sleuth-mask--hero img {
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .sleuth-mask--hero img {
    animation: sleuth-mask-bob 4s ease-in-out infinite;
  }

  .sleuth-mask--header img {
    transform-origin: 50% 100%;
    animation: sleuth-mask-breathe 5s ease-in-out infinite;
  }

  .sleuth-mask--wiggle {
    animation: sleuth-mask-wiggle 0.5s ease-in-out;
  }

  .sleuth-mask--spin {
    animation: sleuth-mask-spin 0.7s cubic-bezier(0.3, 0, 0.2, 1);
  }
}

@keyframes sleuth-mask-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.2rem); }
}

@keyframes sleuth-mask-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes sleuth-mask-wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(7deg); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(2deg); }
}

@keyframes sleuth-mask-spin {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* The click message: a small bubble in the theme's own colours. Above the hero
   mask (clear of the title below it) and under the header logo. */
.sleuth-mask__say {
  position: absolute;
  bottom: calc(100% + 0.3rem);
  left: 50%;
  z-index: 5;
  width: max-content;
  max-width: min(18rem, 90vw);
  padding: 0.3rem 0.6rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.3rem;
  color: var(--md-default-fg-color);
  background-color: var(--md-default-bg-color);
  box-shadow: var(--md-shadow-z2);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  transform: translateX(-50%);
  animation: sleuth-mask-say-in 0.2s ease-out;
  transition: opacity 0.3s;
}

.md-header .sleuth-mask__say {
  top: calc(100% + 0.4rem);
  bottom: auto;
  left: 0;
  transform: none;
}

.sleuth-mask__say--out {
  opacity: 0;
}

@keyframes sleuth-mask-say-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sleuth-intro {
  margin-top: 1.5rem;
  text-align: center;
  color: var(--md-default-fg-color--light);
}

/* Raised content panel. Article and section pages get a page background with
   the content column lifted onto a surface above it. The home page (the only
   page with .sleuth-hero) is left as it is. Browsers without :has() skip these
   rules and show the flat layout. */
:root {
  --sleuth-page-bg: #eef0f3;
  --sleuth-surface-bg: #ffffff;
  --sleuth-surface-shadow: 0 0.05rem 0.15rem rgba(0, 0, 0, 0.06), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.06);
}

/* Dark mode, no white. Body text is Material's foreground at 82% opacity. The panel
   is lightened to 20%, where body text measures about 7.6:1 against it (WCAG AA
   needs 4.5:1; 7:1 is AAA), and the page is darkened to 8% for more lift. Code
   blocks sit a step above the panel (23%) so they stay distinct. */
[data-md-color-scheme="slate"] {
  --sleuth-page-bg: hsla(var(--md-hue), 15%, 8%, 1);
  --sleuth-surface-bg: hsla(var(--md-hue), 15%, 20%, 1);
  --sleuth-code-bg: hsla(var(--md-hue), 15%, 23%, 1);
  --sleuth-surface-shadow: 0 0.05rem 0.15rem rgba(0, 0, 0, 0.35), 0 0.2rem 1rem rgba(0, 0, 0, 0.3);
}

/* Keep code blocks lighter than the dark panel. The scheme attribute is on <body>
   itself, so it's part of the body selector rather than an ancestor. */
body[data-md-color-scheme="slate"]:not(:has(.sleuth-hero)) .md-content__inner {
  --md-code-bg-color: var(--sleuth-code-bg);
}

body:not(:has(.sleuth-hero)) {
  background-color: var(--sleuth-page-bg);
}

body:not(:has(.sleuth-hero)) .md-content__inner {
  /* Elements that paint the default background (tables, tab scroll fades,
     admonitions) pick up the surface colour instead of showing darker patches. */
  --md-default-bg-color: var(--sleuth-surface-bg);
  --md-admonition-bg-color: var(--sleuth-surface-bg);
  padding: 0.8rem 1.4rem 1.2rem;
  border-radius: 0.4rem;
  background-color: var(--sleuth-surface-bg);
  box-shadow: var(--sleuth-surface-shadow);
}

/* Phones: keep a little page showing either side and tighten the padding. */
@media screen and (max-width: 44.984375em) {
  body:not(:has(.sleuth-hero)) .md-content__inner {
    margin-right: 0.4rem;
    margin-left: 0.4rem;
    padding: 0.6rem 0.8rem 1rem;
    border-radius: 0.3rem;
  }

  /* Material bleeds content tab labels (e.g. on Tools) out to the screen edge,
     capped at 100vw. The panel sits inset, so that ran 8px past the screen and
     caused sideways scrolling. Cap the row at the panel's width instead. */
  body:not(:has(.sleuth-hero)) .md-content__inner > .tabbed-set .tabbed-labels {
    max-width: calc(100% + 1.6rem);
  }
}

/* Sticky sidebar headings paint the default background to mask scrolling
   content. Where the sidebars sit on the page (not as the mobile drawer), give
   them the page colour so the headings don't show as bands. */
@media screen and (min-width: 60em) {
  body:not(:has(.sleuth-hero)) .md-sidebar--secondary {
    --md-default-bg-color: var(--sleuth-page-bg);
  }
}

/* Blog posts swap the nav sidebar for a post sidebar (back link, date, category),
   whose sticky "Back to index" link needs the same treatment. */
@media screen and (min-width: 76.25em) {
  body:not(:has(.sleuth-hero)) :is(.md-sidebar--primary, .md-sidebar--post) {
    --md-default-bg-color: var(--sleuth-page-bg);
  }
}

/* Header: the site name links home like the logo (overrides/partials/header.html).
   It keeps the header text colour, and the logo-to-name gap drops from about 32px
   to 16px. Below 76.25em Material hides the logo in favour of the menu button,
   so the default spacing stays there. */
.md-header__topic .sleuth-header-home {
  color: inherit;
}

@media screen and (min-width: 76.25em) {
  [dir="ltr"] .md-header__title {
    margin-left: 0.2rem;
  }

  [dir="rtl"] .md-header__title {
    margin-right: 0.2rem;
  }
}

/* Wider, adaptive layout. Material caps the grid at 61rem (1220px at its default
   size), which leaves wide margins on laptops. 76rem fills common laptop widths
   and still caps on large and ultrawide screens (Material raises the root font
   size at 100em and 125em, so the cap scales: about 1670px at 1920 wide, 1820px
   at 2560 and up). Below 1220px nothing changes: the grid already fills the
   screen and tablets and phones keep Material's layout and nav drawer. */
.md-grid {
  max-width: 76rem;
}