/*
 * PW Support Centre CSS
 *
 * ----------------------------------------------------------------------------
 * MATERIAL INTERNALS CONTRACT
 * ----------------------------------------------------------------------------
 * Material for MkDocs only guarantees a stable API for CSS custom properties
 * (--md-* tokens), theme.features, palette, font and extra_css. The layout in
 * this file additionally relies on the Material internals listed below, which
 * are NOT part of that stable API. The toolchain is version-pinned
 * (.github/requirements-docs.txt) so these cannot drift silently; after any
 * Material UPGRADE, re-verify each item here and re-sync overrides/partials/nav.html.
 *
 * Internal selectors / assumptions relied upon:
 *   - .md-grid { max-width }            full-width shell (nav hugs the edge)
 *   - .md-main                          background gradient paints the nav panel
 *   - .md-sidebar--primary/--secondary  panel background + hiding the right TOC
 *   - .md-nav--primary, .md-nav__link   nav hierarchy (category vs leaf links)
 *   - .md-header__topic:first-child     Material's own site-title weight rule;
 *                                       our override must match its specificity
 *   - [dir=ltr] .md-header__title       Material's own title margin rule; our
 *                                       override must match its specificity
 *   - .md-nav__title                    hidden on DESKTOP ONLY (site-name label);
 *                                       kept on mobile (drawer header + back-buttons)
 *   - .md-footer__inner.md-grid         footer aligned to the content column
 *   - .md-footer__link / __title / __button   prev/next button internals
 *   - html .md-footer-meta.md-typeset a  Material's own footer link rule; our
 *                                       override must match its specificity
 *   - --pw-nav-width (12.1rem)          MUST match Material's sidebar width
 *   - 76.25em breakpoint                Material's desktop breakpoint (literal;
 *                                       CSS media queries can't read variables)
 * ----------------------------------------------------------------------------
 */

:root > * {
  --pw-core-green: #27ae60;
  --pw-forest-green: #1e874b;
  --pw-deep-forest-green: #145a32;
  --pw-mist-green: #eaf8f0;

  /* Navigation panel surfaces (left nav + right table of contents) */
  --pw-nav-bg: #eef5f0;
  --pw-nav-border: rgba(20, 90, 50, 0.16);

  /* Layout dimensions — single source of truth for the custom two-column shell.
     --pw-nav-width MUST equal Material's sidebar width (12.1rem in 9.7.7); if a
     Material upgrade changes it, update here only and the gradient, footer and
     content column all follow. */
  --pw-nav-width: 12.1rem;
  --pw-content-max: 54rem;

  /* Material interactive colour tokens */
  --md-accent-fg-color: var(--pw-forest-green);
  --md-accent-fg-color--transparent: rgba(30, 135, 75, 0.12);
  --md-typeset-a-color: var(--pw-forest-green);
}

/* Branded header + navigation tabs (palette primary: custom) */
:root,
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--pw-forest-green);
  --md-primary-fg-color--light: var(--pw-core-green);
  --md-primary-fg-color--dark: var(--pw-deep-forest-green);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.75);
}

/* Render the green ProvenWorks logo in white on the green header */
.md-header__button.md-logo img {
  filter: brightness(0) invert(1);
}

/* Align the ProvenWorks wordmark with the site title beside it. Material sizes
   the logo at 1.2rem, which renders the mark's lowercase noticeably larger
   than the title's, so the two wordmarks read as different sizes. Reducing the
   height brings them into proportion; the small downward nudge then lines the
   wordmark's baseline up with the title's, which sits lower than the logo's
   because the two typefaces have different ascender-to-baseline ratios. */
.md-header__button.md-logo img {
  height: 1.05rem;
  position: relative;
  top: 0.13rem;
}

/* Separate the mark from the site title with a short vertical rule so the two
   read as a deliberate lockup. Desktop only — on mobile the logo is replaced
   by the drawer button, where a rule would make no sense.

   Material sets the title's margin with `[dir=ltr] .md-header__title`
   (specificity 0,2,0), so `[dir]` is needed here to win the cascade. Logical
   properties keep the override correct whichever direction is in play. */
@media screen and (min-width: 76.25em) {
  [dir] .md-header__title {
    position: relative;
    margin-inline-start: 0.2rem;
    padding-inline-start: 0.8rem;
  }

  .md-header__title::before {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 0;
    height: 1.1rem;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.3);
    transform: translateY(-50%);
  }
}

/* Give the header a touch more presence and a crisp edge */
.md-header {
  box-shadow:
    0 0 0.2rem rgba(0, 0, 0, 0.1),
    0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
}

/* Material ships the site title at bold (700), which is the only 700 in this
   design — headings and inline emphasis are both 600. Segoe UI Bold is also
   noticeably heavier than the Roboto that Material's weights were tuned for,
   so the title read as blocky. Drop it to 600 to match the rest of the type
   system, and add a little tracking to offset the optical bleed that makes
   white text on a saturated background appear heavier than it is.

   Material sets this with `.md-header__topic:first-child` (specificity 0,2,0),
   so the selector has to be matched exactly. The :first-child scope also
   leaves the second topic alone — that is the page title Material swaps in on
   scroll, which is intentionally lighter. */
.md-header__topic:first-child {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Slightly translucent search field so it reads as part of the header */
.md-search__form {
  background-color: rgba(255, 255, 255, 0.15);
}

.md-search__form:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: #ffffff;
}

/* -------------------------------------------------------------------------- */
/* Base typography: crisp system font stack and a denser, clearer reading      */
/* rhythm so more content fits on screen with less scrolling.                  */
/* -------------------------------------------------------------------------- */
/* Scale the whole system uniformly from a single root value. Material's default
   125% (20px) root makes every region feel oversized, but 112.5% (18px) proved
   too small in practice — readers were reaching for 110% browser zoom. 123.75%
   (19.8px) is 112.5% x 1.1, so the default rendering now matches what those
   readers were manually zooming to. Because the header, navigation, headings,
   tables and content column widths are all expressed in rem, they scale
   together and the proportions of the design are preserved. */
html {
  font-size: 123.75%;
}
body,
input,
.md-typeset {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
    sans-serif;
}

.md-typeset {
  font-size: 0.8rem;
  line-height: 1.5;
}

.md-typeset p {
  margin: 0 0 0.7em;
}

.md-typeset ul,
.md-typeset ol {
  margin: 0.4em 0 0.8em;
}

.md-typeset li {
  margin-bottom: 0.3em;
}

.md-typeset li > ul,
.md-typeset li > ol {
  margin: 0.3em 0 0.3em;
}

/* Inline emphasis at semibold (600) rather than bold (700) so emphasised words
   reinforce the text without competing with the headings. */
.md-typeset strong,
.md-typeset b {
  font-weight: 600;
}

/* Links */
.md-typeset a {
  color: var(--pw-forest-green);
}

.md-typeset a:hover,
.md-typeset a:focus-visible {
  color: var(--pw-deep-forest-green);
}

/* Primary buttons */
.md-typeset .md-button--primary {
  background-color: var(--pw-deep-forest-green);
  border-color: var(--pw-deep-forest-green);
  color: #ffffff;
}

.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus-visible {
  background-color: var(--pw-forest-green);
  border-color: var(--pw-forest-green);
  color: #ffffff;
}

/* Secondary buttons */
.md-typeset .md-button:not(.md-button--primary) {
  border-color: var(--pw-forest-green);
  color: var(--pw-forest-green);
}

.md-typeset .md-button:not(.md-button--primary):hover,
.md-typeset .md-button:not(.md-button--primary):focus-visible {
  background-color: var(--pw-mist-green);
  border-color: var(--pw-deep-forest-green);
  color: var(--pw-deep-forest-green);
}

/* Active navigation and interactive icons */
.md-nav__link--active,
.md-nav__link:hover,
.md-nav__link:focus-visible {
  color: var(--pw-forest-green);
}

/* Subtle previous/next page navigation */
.md-footer {
  /* Material's footer is designed for a dark background, so its foreground
     tokens are all white. We keep the footer white, so rebind the tokens to
     dark equivalents at the top of the footer subtree. Doing it through the
     documented --md-footer-* custom properties means every descendant that
     Material colours (copyright, social icons, prev/next links) inherits a
     readable colour, rather than us having to override each selector. */
  --md-footer-fg-color: #3f4347;
  --md-footer-fg-color--light: #5b6268;
  --md-footer-fg-color--lighter: #6b7278;
  --md-footer-bg-color: #ffffff;
  --md-footer-bg-color--dark: #ffffff;

  background-color: #ffffff;
  border-top: 1px solid rgba(30, 135, 75, 0.12);
}

.md-footer__inner {
  display: flex;
  align-items: center;
  min-height: 0;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  gap: 0.8rem;
}

/* Align the previous/next buttons with the centred content column instead of
   letting them stretch to the full page width. The extra --pw-nav-width accounts
   for the width of the left navigation panel so the row lines up with the
   content above it. */
@media screen and (min-width: 76.25em) {
  .md-footer__inner.md-grid {
    box-sizing: border-box;
    max-width: calc(var(--pw-content-max) + var(--pw-nav-width));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pw-nav-width);
  }
}

/* Turn each previous/next link into a compact outlined button */
.md-footer__link {
  display: flex;
  align-items: center;
  width: auto;
  max-width: 48%;
  margin: 0;
  padding: 0.55rem 0.85rem;

  background-color: #ffffff;
  border: 1px solid #d9dddf;
  border-radius: 0;

  color: #3f4347;
  opacity: 1;
  box-shadow: none;
}

.md-footer__link--prev {
  margin-right: auto;
}

.md-footer__link--next {
  margin-left: auto;
}

/* Hide the small “Previous” and “Next” labels */
.md-footer__direction {
  display: none;
}

.md-footer__title {
  margin: 0;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Arrows: keep Material's native icon sizing and alignment; only trim the
   default margin so the glyph sits neatly beside the title. */
.md-footer__button {
  margin: 0;
}

.md-footer__link {
  gap: 0.35rem;
}

/* Subtle interaction state */
.md-footer__link:hover {
  background-color: #f7fbf8;
  border-color: rgba(30, 135, 75, 0.35);
  color: var(--pw-deep-forest-green);
  opacity: 1;
}

.md-footer__link:focus-visible {
  outline: 2px solid var(--pw-deep-forest-green);
  outline-offset: 2px;
}

/* Light copyright and social footer */
.md-footer-meta {
  background-color: #ffffff;
  border-top: 1px solid #e5e7e9;
  color: var(--md-footer-fg-color--light);
}

/* Material colours these links with `html .md-footer-meta.md-typeset a`
   (specificity 0,3,1), so a plain `.md-footer-meta a` rule cannot win. Match
   that selector so the links stay visibly distinct from the copyright text
   rather than inheriting the same grey. */
html .md-footer-meta.md-typeset a {
  color: var(--pw-deep-forest-green);
}

html .md-footer-meta.md-typeset a:hover,
html .md-footer-meta.md-typeset a:focus,
html .md-footer-meta.md-typeset a:focus-visible {
  color: var(--pw-forest-green);
}

/* Split the copyright notice from the utility links (mkdocs.yml `copyright`
   wraps each part in one of these spans) so the links sit on their own centred
   line beneath the legal text instead of running on from it. */
.pw-footer-legal,
.pw-footer-links {
  display: block;
  text-align: center;
}

.pw-footer-links {
  margin-top: 0.5rem;
}

/* Material lays the copyright and social icons out side by side, which leaves
   the copyright column narrower than the footer and pushes the centred link
   row off-centre. Give the copyright the full width so it centres on the
   footer, and let the social icons wrap onto their own centred line below. */
.md-footer-meta__inner .md-copyright {
  width: 100%;
}

.md-footer-meta__inner .md-social {
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------------------------------------- */
/* Layout: navigation panels hug the left and right edges and read as clearly  */
/* distinct surfaces; the document sits on white between them.                 */
/* -------------------------------------------------------------------------- */

@media screen and (min-width: 76.25em) {
  /* Let the shell span the full viewport instead of a centred grid, so the
     navigation panels sit hard against the edges */
  .md-grid {
    max-width: initial;
  }

  /* Paint the left navigation column for its full height with a divider line.
     A gradient on .md-main fills the nav column regardless of how long the
     navigation is, so the panel never collapses to a thin strip. */
  .md-main {
    background-image: linear-gradient(
      to right,
      var(--pw-nav-bg) 0,
      var(--pw-nav-bg) var(--pw-nav-width),
      var(--pw-nav-border) var(--pw-nav-width),
      var(--pw-nav-border) calc(var(--pw-nav-width) + 1px),
      var(--md-default-bg-color) calc(var(--pw-nav-width) + 1px)
    );
  }

  /* Documentation column: a wide, readable measure centred in the space beside
     the navigation, so the left and right gutters stay balanced */
  .md-content {
    max-width: var(--pw-content-max);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Keep the sidebars transparent so the full-height panel tint shows through */
.md-sidebar--primary,
.md-sidebar--secondary {
  background-color: transparent;
}

/* -------------------------------------------------------------------------- */
/* Navigation type system: one consistent hierarchy shared by the left        */
/* articles list and the right table of contents.                            */
/*   • category links  — top-level articles, medium weight, dark              */
/*   • leaf links      — pages / headings, regular weight, muted              */
/* -------------------------------------------------------------------------- */

/* The left navigation is the table of contents. On desktop, hide Material's
   built-in site-name title (our .pw-nav-title labels the panel instead) and hide
   the entire right-hand sidebar. The hide is scoped to desktop ONLY: on mobile
   the same .md-nav__title elements are the drawer's brand header and the
   drill-down back-buttons, so hiding them there would break upward navigation. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav__title {
    display: none;
  }
}

.md-sidebar--secondary,
.md-sidebar--secondary:not([hidden]) {
  display: none;
}

/* Title the left navigation panel "Table of Contents" (Salesforce Help style).
   The label is a real element (overrides/partials/nav.html) so it is exposed to
   assistive technology. It is hidden on mobile, where the drawer already shows
   the site-name label. */
.pw-nav-title {
  display: none;
}

@media screen and (min-width: 76.25em) {
  .pw-nav-title {
    display: block;
    margin: 0 0.75rem 0.7rem;
    padding: 0.35rem 0 0.6rem;
    border-bottom: 1px solid var(--pw-nav-border);
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
}

/* Leaf links: nav pages and TOC entries share one size and weight */
.md-sidebar--primary .md-nav__link,
.md-sidebar--secondary .md-nav__link {
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.4;
}

/* Category links: top-level entries in the left articles list stand out as
   section headers, giving the panel a clear internal hierarchy */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  color: rgba(0, 0, 0, 0.82);
  font-size: 0.74rem;
  font-weight: 600;
}

/* Child page links sit quieter beneath their category */
.md-nav--primary .md-nav__item .md-nav__item > .md-nav__link {
  color: rgba(0, 0, 0, 0.62);
  font-weight: 400;
}

/* -------------------------------------------------------------------------- */
/* Typography: stronger, higher-contrast heading hierarchy with a compact,     */
/* consistent vertical rhythm (Salesforce Help style density).                 */
/* -------------------------------------------------------------------------- */
.md-typeset h1 {
  margin: 0 0 0.6em;
  color: var(--pw-deep-forest-green);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.md-typeset h2 {
  margin: 1.6em 0 0.5em;
  color: rgba(0, 0, 0, 0.87);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.md-typeset h3 {
  margin: 1.3em 0 0.4em;
  color: rgba(0, 0, 0, 0.87);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.md-typeset h4 {
  margin: 1.1em 0 0.3em;
  color: rgba(0, 0, 0, 0.87);
  font-size: 0.85rem;
  font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* Images: consistent framing for screenshots                                 */
/* -------------------------------------------------------------------------- */
.md-typeset img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.4em auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.3rem;
  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.08);
}

/* -------------------------------------------------------------------------- */
/* Tables: branded header row and clearer separation                          */
/* -------------------------------------------------------------------------- */
.md-typeset table:not([class]) {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.3rem;
  box-shadow: none;
  font-size: 0.72rem;
  line-height: 1.45;
}

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 0.5em 0.9em;
}

.md-typeset table:not([class]) th {
  background-color: var(--pw-mist-green);
  color: var(--pw-deep-forest-green);
  font-weight: 600;
}

.md-typeset table:not([class]) tr:nth-child(even) {
  background-color: #f7fbf8;
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}