/*
 * FLOWERSHOW THEME (DRAFT): MATERIAL
 *
 * Inspired by the visual style of Material for MkDocs
 * https://squidfunk.github.io/mkdocs-material/
 *
 * Every value below was MEASURED from the live reference site with
 * getComputedStyle, not inferred from the library's SCSS defaults. That
 * distinction matters: the library's default palette is indigo, but several
 * things on the real site differ from the defaults, and an earlier draft of
 * this theme was wrong because it trusted the source instead of the render.
 *
 * Measured reference: https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/
 *                     https://squidfunk.github.io/mkdocs-material/reference/admonitions/
 *
 * NOT CLONABLE without Flowershow core changes:
 *   - tabbed content blocks (no such component)
 *   - prev/next page footer pagination (not in the page tree)
 *   - version selector
 * See docs/plans/2026-08-08-theme-cloning-fidelity-method.md
 */

/* =======================
    IMPORTS
========================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Roboto+Mono:wght@400;500;700&display=swap');

/* =======================
    ROOT TOKENS
========================== */

:root {
  color-scheme: light dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

:root {
  --font-heading: 'Roboto', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --font-mono: 'Roboto Mono', SFMono-Regular, Consolas, Menlo, monospace;

  --font-size-base: 1rem;

  /* measured: header/tabs/links/active-nav are all this indigo */
  --md-primary: #4051b5;
  --md-accent: #526cfe;

  /* measured: code bg #f5f5f5, code fg #36464e */
  --md-code-bg: #f5f5f5;
  --md-code-fg: #36464e;

  --radius: 0.125rem;   /* measured: code + inline code radius 2px */
  --navbar-height: 3rem; /* measured: header height 48px */
}

:root,
:root[data-theme="light"] {
  --color-l-background: #ffffff;
  --color-l-foreground: rgba(0, 0, 0, 0.87);  /* --md-default-fg-color */
  --color-l-accent: var(--md-primary);

  --color-background: var(--color-l-background);
  --color-foreground: var(--color-l-foreground);
  --color-accent: var(--color-l-accent);
}

:root[data-theme="dark"] {
  /* measured from the reference's "slate" scheme */
  --color-d-background: hsl(225, 15%, 14%);
  --color-d-foreground: hsla(225, 15%, 90%, 0.82);
  --color-d-accent: var(--md-accent);

  --color-background: var(--color-d-background);
  --color-foreground: var(--color-d-foreground);
  --color-accent: var(--color-d-accent);

  --md-code-bg: hsl(225, 15%, 18%);
  --md-code-fg: hsla(225, 18%, 86%, 0.82);
}

/* =======================
    TYPOGRAPHY
    all measured from .md-typeset on the live docs page:
      p   16px   / lh 25.6px
      h1  32px   / 300 / rgba(0,0,0,0.54) / lh 41.6 / ls -0.32 / mb 40
      h2  25px   / 300 / lh 35   / m 40 0 16
      h3  20px   / 400 / m 16 0
      h4  16px   / 700 / m 16 0
========================== */

/* :not(.is-plain) throughout this block (added 2026-08-09, matching
   Flowershow's own default-theme.css convention of scoping prose to
   :not(.is-plain)): the landing page uses `layout: plain` with its own
   hand-measured classes (.t-h1-hero etc) and needs a blank canvas — a
   bare `.rendered-mdx h1` (class+tag, specificity 0,1,1) would otherwise
   beat `.t-h1-hero` (single class, 0,1,0) and silently flatten the
   hero-vs-section weight distinction that's the whole point of this
   theme's fidelity fix (see the comment below). */
.rendered-mdx:not(.is-plain) {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}

.rendered-mdx:not(.is-plain) p {
  font-size: 1rem;
  line-height: 1.6;
}

/* h1 on the reference is LIGHT WEIGHT and GREY, not bold and black.
   This is the single most recognisable thing about a Material docs page
   and the earlier draft got it wrong. */
.rendered-mdx:not(.is-plain) h1,
.page-header-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-foreground-500);
  margin: 0 0 2.5rem;
}

.rendered-mdx:not(.is-plain) h2 {
  font-size: 1.5625rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 1rem;
}

.rendered-mdx:not(.is-plain) h3 {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 1rem 0;
}

.rendered-mdx:not(.is-plain) h4 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 1rem 0;
}

.rendered-mdx:not(.is-plain) h5,
.rendered-mdx:not(.is-plain) h6 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-foreground-500);
}

/* measured: links are primary indigo, no underline */
.rendered-mdx:not(.is-plain) a {
  color: var(--md-primary);
  text-decoration: none;
}
.rendered-mdx:not(.is-plain) a:hover {
  color: var(--md-accent);
  text-decoration: underline;
}

:root[data-theme="dark"] .rendered-mdx:not(.is-plain) a {
  color: var(--md-accent);
}

/* =======================
    CODE
    measured: inline 13.6px, bg #f5f5f5, fg #36464e, padding 0 4px, radius 2px
              block  13.6px, padding 10.5px 16px, lh 19.04px, radius 2px
========================== */

code,
pre,
kbd {
  font-family: var(--font-mono);
}

.rendered-mdx:not(.is-plain) :not(pre) > code {
  background-color: var(--md-code-bg);
  color: var(--md-code-fg);
  font-size: 0.85em;
  padding: 0 0.25rem;
  border-radius: 2px;
  font-weight: 400;
}

/* Flowershow renders content through @tailwindcss/typography, which
   decorates inline code with literal backtick pseudo-elements. They are not
   in the DOM, so only CSS can remove them.
   !important is required: the generated rule carries !important itself, so
   a plain `content: none` loses no matter how specific the selector is.
   Verified in the browser — this is the one place in this theme that needs
   it, and the theming docs say `overrides` layering should make !important
   unnecessary. It doesn't here. (:not(.is-plain) doesn't matter for this
   one specifically since layout:plain pages aren't expected to use prose
   inline code styling anyway, but kept consistent with the rest of the
   block.) */
.rendered-mdx:not(.is-plain) code::before,
.rendered-mdx:not(.is-plain) code::after {
  content: none !important;
}

.pre-container {
  background-color: var(--md-code-bg);
  border-radius: 2px;
  border: none;
}

.pre-container pre {
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 0.65rem 1rem;
}

/* =======================
    NAVBAR
    measured: solid indigo #4051b5, 48px, white text, no shadow at rest
========================== */

.site-navbar {
  background-color: var(--md-primary);
  box-shadow: none;
}

/* The reference header is 48px. Flowershow hardcodes `height: 4rem` on
   .site-navbar-inner and does NOT read --navbar-height, so setting that
   token alone has no effect — the class has to be overridden directly. */
.site-navbar-inner {
  height: 3rem;
}

.site-navbar-link,
.site-navbar-site-name,
.site-navbar-site-title {
  color: #fff;
}

.site-navbar-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

.site-navbar-social-link-icon,
.site-navbar-mobile-nav-icon,
.theme-switch-icon {
  color: #fff;
}

/* search box in the navbar: translucent white, matching the reference */
.site-navbar-search-container .search-button,
.search-button {
  background-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  border: none;
  border-radius: 2px;
}

.search-icon {
  color: rgba(255, 255, 255, 0.9);
}

/* =======================
    SIDEBAR
    measured: 242px, transparent, NO right border, padding 24px 0
              link 14px rgba(0,0,0,0.87) lh 18.2px
              section title 14px/700 rgba(0,0,0,0.54)
              active link = primary indigo, weight 400 (NOT bold)
========================== */

.site-sidebar {
  border-right: none;
  background-color: transparent;
  padding-block: 1.5rem;
}

.site-tree-item-self {
  font-size: 0.875rem;
  line-height: 1.3;
  border-radius: 0;
  padding-block: 0.3rem;
}

.site-tree-item-self:hover {
  color: var(--md-primary);
  background-color: transparent;
}

/* measured: active is coloured, NOT bolded */
.site-tree-item-self.is-current {
  color: var(--md-primary);
  font-weight: 400;
  background-color: transparent;
}

/* =======================
    TABLE OF CONTENTS
    measured: title 14px/700 rgba(0,0,0,0.54), links 14px rgba(0,0,0,0.87)
              no left border rail on the reference
========================== */

.page-toc-container,
.toc {
  padding-block: 1.5rem;
}

.toc-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-foreground-500);
  text-transform: none;
  letter-spacing: 0;
}

.toc-item-self {
  font-size: 0.875rem;
  line-height: 1.3;
  border-left: none;
  padding-block: 0.3rem;
}

.toc-item-self[aria-current="true"] {
  color: var(--md-primary);
}

/* =======================
    CALLOUTS / ADMONITIONS
    measured: full 1.5px border in the type colour (NOT a left rule),
              radius 4px, white bg, drop shadow,
              title band = 10% tint of the type colour, 700, 12.8px
========================== */

/* NOTE: callouts are styled via DATA ATTRIBUTES, not class names —
   [data-callout], [data-callout-type="..."], [data-callout-title],
   [data-callout-body]. The class-based selectors an earlier draft used
   (.callout, .callout-note) match nothing at all. This is exactly the kind
   of thing the unpublished semantic-class reference should say. */

.rendered-mdx [data-callout] {
  background-color: var(--color-background);
  border: 1.5px solid var(--callout-color);
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.1);
  font-size: 0.8rem;
  margin: 1.25rem 0;
  /* base sets p-4 pb-5 via @apply; the reference has no outer padding
     because the title band runs full-bleed to the border */
  padding: 0;
}

/* base applies `space-y-2` on the callout and `mb-2` on the title, which
   leaves a gap between the title band and the body once the band is
   full-bleed. Zero both out. */
.rendered-mdx [data-callout] > * + * {
  margin-top: 0;
}

.rendered-mdx [data-callout] > [data-callout-title] {
  background-color: color-mix(in srgb, var(--callout-color) 10%, transparent);
  color: var(--color-foreground);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  margin: 0 0 0 0;
}

.rendered-mdx [data-callout] > [data-callout-title]:not(:only-child) {
  margin-bottom: 0;
}

.rendered-mdx [data-callout] > [data-callout-body] {
  padding: 0.75rem;
}

/* measured type colours from the reference's admonitions page */
.rendered-mdx [data-callout][data-callout-type="note"] { --callout-color: #448aff; }
.rendered-mdx [data-callout][data-callout-type="abstract"],
.rendered-mdx [data-callout][data-callout-type="summary"],
.rendered-mdx [data-callout][data-callout-type="tldr"] { --callout-color: #00b0ff; }
.rendered-mdx [data-callout][data-callout-type="info"],
.rendered-mdx [data-callout][data-callout-type="todo"] { --callout-color: #00b8d4; }
.rendered-mdx [data-callout][data-callout-type="tip"],
.rendered-mdx [data-callout][data-callout-type="hint"],
.rendered-mdx [data-callout][data-callout-type="important"] { --callout-color: #00bfa5; }
.rendered-mdx [data-callout][data-callout-type="success"],
.rendered-mdx [data-callout][data-callout-type="check"],
.rendered-mdx [data-callout][data-callout-type="done"] { --callout-color: #00c853; }
.rendered-mdx [data-callout][data-callout-type="question"],
.rendered-mdx [data-callout][data-callout-type="help"],
.rendered-mdx [data-callout][data-callout-type="faq"] { --callout-color: #64dd17; }
.rendered-mdx [data-callout][data-callout-type="warning"],
.rendered-mdx [data-callout][data-callout-type="caution"],
.rendered-mdx [data-callout][data-callout-type="attention"] { --callout-color: #ff9100; }
.rendered-mdx [data-callout][data-callout-type="failure"],
.rendered-mdx [data-callout][data-callout-type="fail"],
.rendered-mdx [data-callout][data-callout-type="missing"] { --callout-color: #ff5252; }
.rendered-mdx [data-callout][data-callout-type="danger"],
.rendered-mdx [data-callout][data-callout-type="error"] { --callout-color: #ff1744; }
.rendered-mdx [data-callout][data-callout-type="bug"] { --callout-color: #f50057; }
.rendered-mdx [data-callout][data-callout-type="example"] { --callout-color: #7c4dff; }
.rendered-mdx [data-callout][data-callout-type="quote"],
.rendered-mdx [data-callout][data-callout-type="cite"] { --callout-color: #9e9e9e; }

/* =======================
    TABLES
========================== */

.rendered-mdx table {
  font-size: 0.8rem;
  border-radius: 2px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.1);
  border: none;
}

.rendered-mdx th {
  font-weight: 700;
  background-color: var(--color-foreground-50);
}

/* =======================
    LIST COMPONENT
========================== */

.list-component-item-headline {
  font-weight: 400;
  font-size: 1.25rem;
}

.list-component-item-headline a {
  color: var(--color-foreground);
}

.list-component-item-headline a:hover {
  color: var(--md-primary);
}

.list-component-item-eyebrow {
  font-size: 0.8rem;
  color: var(--color-foreground-500);
}

/* =======================
    SEARCH MODAL
========================== */

.search-modal-input:focus {
  outline: 2px solid var(--md-primary);
}

.search-modal-highlight {
  background-color: color-mix(in srgb, var(--md-primary) 25%, transparent);
}

/* =======================
    FOOTER
========================== */

.site-footer {
  /* The foreground scale reverses in dark mode, so a foreground token makes
     this footer pale precisely when the page is dark. Material's footer is a
     stable dark surface in both modes. */
  background-color: hsl(225, 15%, 18%);
  color: rgba(255, 255, 255, 0.7);
}

.site-footer-navigation-link,
.site-footer-copyright,
.site-footer-publication-name {
  color: rgba(255, 255, 255, 0.7);
}