/* docs-site/extra/header.css
 *
 * Hides the docs-site header's site-name text ("Flowgate"), since the header logo image
 * (theme.logo, docs-site/mkdocs.yml) already carries the product name in the artwork itself -
 * showing both is redundant.
 *
 * Material's header title area is two stacked elements (material/templates/partials/
 * header.html): the FIRST is the site name, the SECOND (data-md-component="header-topic") is
 * the current page's title, which Material's own JS swaps into view (toggling a
 * .md-header__title--active class) as the reader scrolls past the page's own h1. The two are
 * independent siblings, each with their own opacity/transform rule keyed off that class - only
 * the first one is targeted here, using Material's own ":first-child" selector (matching the
 * one it already uses for its bold site-name styling), so the scroll swap to the page title
 * keeps working exactly as shipped.
 *
 * site_name itself stays set in mkdocs.yml: it still drives the browser <title> and page SEO.
 * This only hides the header bar's own rendering of it.
 */
.md-header__topic:first-child {
  display: none;
}

/* Header palette, aligned with the company website (h2innovations.ca, the digitalresume
 * project). Material's compiled main.*.min.css sets its "indigo" defaults on a plain :root
 * block, but its palette.*.min.css then sets the SAME custom properties again on
 * [data-md-color-primary=indigo]/[data-md-color-accent=indigo] - and Material's own JS stamps
 * those two attributes directly onto <body> (see the inline bootstrap script in every page's
 * <head>). A rule matching <body> itself always wins over one that only reaches it by
 * INHERITING from :root/<html>, regardless of which stylesheet loads last - custom-property
 * cascade resolves against whatever rule matches the element itself first, before it ever
 * considers a value inherited from an ancestor. So this has to match body directly too: the
 * selector below mirrors palette.css's own shape (attribute selectors on the color values) but
 * adds the "body" type selector, which raises its specificity just enough to beat palette.css's
 * bare attribute selector outright - correct regardless of load order, not merely because this
 * file happens to load last. Material treats primary/accent as ONE global brand pair, not
 * scheme-specific (both the light and dark palette entries in mkdocs.yml set the same
 * `primary: indigo`, and palette.css's own rule is not scheme-scoped either), so one override
 * block here does too - no header re-color is needed when the reader flips the light/dark
 * toggle.
 *
 * Every value below is copied verbatim from the digitalresume project source, never invented:
 *   #18181b - src/components/Header.module.scss, .menu { background: #18181b; } - the site's
 *             own header "Products" dropdown panel, whose own comment calls it out as
 *             "tinted zinc, not grey" (i.e. a deliberate, hand-picked color, not a token
 *             default).
 *   #2a2a30 - src/components/Header.module.scss, .menu { border: 1px solid #2a2a30; } - the
 *             same panel's border, used here as the lighter of the two primary shades.
 *   #0a0a0a - node_modules/@once-ui-system/core/dist/css/tokens.css,
 *             --scheme-gray-100: #0A0A0A - the site's own dark-theme neutral scale's darkest
 *             step (once-ui.config.ts sets neutral: "gray"), used as the darker of the two
 *             primary shades.
 *   #e4e4e7 - src/components/Header.module.scss, .menuItem { color: #e4e4e7; } - the site's
 *             own header nav-item text color.
 *   #f59e0b - src/components/Header.module.scss, .menuItem:hover, .menuItemSelected
 *             { color: #f59e0b; } (and the matching ::before indicator-dot background) - the
 *             site's own header hover/selected accent.
 *   #f59e0b1a - the same file's .menuItem:hover background: rgba(245, 158, 11, 0.1) - 10%
 *             alpha on the accent, re-expressed as an 8-digit hex (1a is hex for the same ~10%
 *             alpha Material's own --accent-fg-color--transparent uses on its default accent).
 *
 * Contrast checked (WCAG relative luminance, not eyeballed):
 *   #e4e4e7 on #18181b (header text on header background): 13.96:1 - passes AAA.
 *   #18181b on #f59e0b (text on accent-colored elements, e.g. --md-accent-bg-color): 8.25:1 -
 *             passes AAA. White-on-#f59e0b was checked too and rejected: only 2.15:1, below
 *             even the AA floor - dark text is the correct, not merely stylistic, choice here.
 */
:root,
body[data-md-color-primary],
body[data-md-color-accent] {
  --md-primary-fg-color: #18181b;
  --md-primary-fg-color--light: #2a2a30;
  --md-primary-fg-color--dark: #0a0a0a;
  --md-primary-bg-color: #e4e4e7;
  --md-primary-bg-color--light: #e4e4e7b3;
  --md-accent-fg-color: #f59e0b;
  --md-accent-fg-color--transparent: #f59e0b1a;
  --md-accent-bg-color: #18181b;
}

/* Inline feedback box, shown inside the "Was this page helpful?" widget's note after a rating
 * click (markup: mkdocs.yml extra.analytics.feedback ratings[].note; behaviour:
 * overrides/partials/integrations/analytics/custom.html). Colors use Material's own theme
 * tokens so the box follows the light/dark toggle with no scheme-specific rules here; the
 * button inherits Material's .md-button styling and needs nothing extra. */
.fg-feedback-box {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
  max-width: 26rem;
}
.fg-feedback-box .fg-feedback-text,
.fg-feedback-box .fg-feedback-email {
  font: inherit;
  padding: 0.4rem 0.6rem;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}
.fg-feedback-box .fg-feedback-send {
  align-self: flex-start;
}
.fg-feedback-box .fg-feedback-status {
  margin: 0;
}

/* The rating the reader clicked keeps the accent color after voting (the partial adds the
 * class on submit). Both buttons are disabled at that point, and Material's own
 * .md-feedback__icon:disabled rule fades them to --md-default-fg-color--lightest; adding
 * :disabled here (three simple selectors to Material's two) outranks that rule by
 * specificity alone, load order irrelevant. */
.md-feedback__icon.fg-rating-selected:disabled {
  color: var(--md-accent-fg-color);
}

/* Reveals the note after a rating. Material's own stylesheet holds .md-feedback__note at
 * opacity 0 and fades it in ONLY via ":disabled .md-feedback__note" - i.e. when the whole
 * fieldset is disabled, which is how upstream's snippet reveals it. We must not disable the
 * fieldset (it would dead-freeze the inline box's controls, the 0.20.2 bug), so the partial
 * adds this class instead and it mirrors Material's reveal declarations exactly, keeping the
 * same fade/slide transition. Two classes beat Material's one-class base rule on
 * specificity; the values are pinned by src/help/feedbackWidget.test.ts. */
.md-feedback__note.fg-note-visible {
  opacity: 1;
  transform: translateY(0);
}