/* Survature Help Center — carries the visual identity across from the Ghost
 * "Guidepost" theme so the migration is invisible to readers.
 *
 * The palette was not eyeballed from screenshots. Ghost's real customisation
 * lived in its code-injection setting rather than the theme's stylesheet, and
 * these values were read straight out of it before the box is retired:
 *
 *   #263248   navy   site title bar, blockquote rule, link accents
 *   #63cdb5   teal   Guidepost's own accent
 *   Open Sans        body font, imported over the theme's Nunito Sans
 *
 * Ghost's accent_color (#FF1A75) is deliberately NOT carried over: it only
 * ever coloured the members/Subscribe button, a feature this site never used
 * (0 members) and no longer has.
 */

:root,
[data-md-color-scheme="default"] {
  --svt-navy: #263248;
  --svt-navy-light: #35455f;
  --svt-navy-dark: #1b2433;
  --svt-teal: #63cdb5;
  --svt-rule: #dfe5ee; /* Guidepost's border grey */
}

/* Material generates its palette from these. Both the attribute selector and
 * :root are set so the override wins regardless of which primary/accent value
 * the theme config resolves to. */
:root,
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--svt-navy);
  --md-primary-fg-color--light: var(--svt-navy-light);
  --md-primary-fg-color--dark: var(--svt-navy-dark);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

:root,
[data-md-color-accent="custom"] {
  --md-accent-fg-color: #1f8f76; /* teal darkened for AA contrast on white */
  --md-accent-fg-color--transparent: rgba(99, 205, 181, 0.1);
}

/* Links pick up the navy, as they did on the old site. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--svt-navy);
}

/* Guidepost put the article on a white card over a light grey page.
 *
 * The page grey goes on .md-container, NOT on --md-default-bg-color. That
 * variable is Material's "surface" colour and is reused far beyond the page
 * background -- notably as the mask behind the sticky nav titles. Repurposing
 * it as the page grey tinted those masks, so a sticky title painted grey while
 * sitting on the white card and let scrolled items show through around it.
 */
[data-md-color-scheme="default"] .md-container {
  background: #f4f6f9;
}

/* The card wraps the ARTICLE COLUMN ONLY -- not the sidebars.
 *
 * Wrapping the whole flex row (.md-main__inner) was tried twice and does not
 * work, because the nav and the card fight over the row height:
 *
 *   - Leave Material's sidebar as-is (sticky, ~48px tall, an unconstrained
 *     scrollwrap overflowing it) and the ~2700px nav runs past the bottom of
 *     the card. Capping the scrollwrap to the viewport hides this at the top
 *     of a long page but not once you scroll to the footer, and not at all on
 *     an article shorter than the viewport.
 *   - Stretch the sidebar so sticky containment bounds it to the card, and the
 *     sidebar's intrinsic height (the full nav) joins the flex row's height
 *     calculation instead -- a 495px article rendered a 2790px card, mostly
 *     empty. A percentage max-height cannot break the cycle: it is unresolved
 *     during intrinsic sizing, so the row inflates before the cap applies.
 *
 * Carding the content column sidesteps both. The card height tracks the
 * article, the nav simply sits on the page background with nothing to overflow,
 * and it is closer to Guidepost anyway -- the old site had no left nav at all,
 * just a white article card on grey.
 */
[data-md-color-scheme="default"] .md-content {
  background: #ffffff;
  border: 1px solid var(--svt-rule);
  border-radius: 4px;
  margin-top: 1.2rem;
  margin-bottom: 2rem;
  min-width: 0;
}

[data-md-color-scheme="default"] .md-content__inner {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

/* The nav is ~2700px with 62 articles. Material leaves .md-sidebar__scrollwrap
 * unconstrained (computed max-height: none) so it runs the full length of the
 * page; capping it to the viewport makes a nav this long scroll within itself.
 * Applied to the scrollwrap only -- the sidebar box keeps Material's own
 * geometry, so this cannot feed back into the flex row's height.
 *
 *   100vh - 2.4rem sticky offset - 1.2rem x2 sidebar padding = 100vh - 4.8rem
 */
.md-sidebar--primary .md-sidebar__scrollwrap,
.md-sidebar--secondary .md-sidebar__scrollwrap {
  max-height: calc(100vh - 4.8rem);
  overflow-y: auto;
}

/* The sidebars sit outside the card in Material's grid, so keep them
 * transparent rather than painting two more white boxes. */
.md-sidebar {
  background: transparent;
}

/* Footer, matching Guidepost. Read from the old stylesheet rather than guessed:
 *
 *   .site-footer  { background: #fff; padding: 15px 0 }
 *   .copyright p  { font-size: 13px; color: #999 }
 *   .copyright a  { color: #777 }  :hover { color: #555 }
 *   .site-footer .container { text-align: center }
 *
 * So the old footer was *light*, not the dark slab Material ships by default.
 * Both footer bands are set: .md-footer carries the prev/next links and
 * .md-footer-meta the copyright, and leaving either dark would band the page.
 */
[data-md-color-scheme="default"] {
  --md-footer-bg-color: #ffffff;
  --md-footer-bg-color--dark: #ffffff;
  --md-footer-fg-color: #555555;
  --md-footer-fg-color--light: #777777;
  --md-footer-fg-color--lighter: #999999;
}

/* A white footer against the light grey page needs a rule to sit on, or the
 * two just bleed together. #dfe5ee is Guidepost's own border colour. */
[data-md-color-scheme="default"] .md-footer {
  border-top: 1px solid var(--svt-rule);
}

[data-md-color-scheme="default"] .md-footer-meta {
  border-top: 1px solid var(--svt-rule);
}

/* Guidepost centred the copyright line and set it small and grey. */
.md-footer-meta .md-copyright {
  margin: 0 auto;
  padding: 0.4rem 0;
  text-align: center;
  width: 100%;
}

.md-footer-meta .md-copyright__highlight {
  font-size: 0.65rem; /* ~13px, matching .copyright p */
}

[data-md-color-scheme="default"] .md-footer-meta a:hover {
  color: #555555;
}

/* Dark mode keeps the navy identity but must not reuse the light-mode card. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--svt-navy-dark);
  --md-typeset-a-color: var(--svt-teal);
}

[data-md-color-scheme="slate"] .md-content {
  background: transparent;
  border: 0;
}

/* Logo: the source SVG is white artwork, so it needs the dark bar behind it
 * and a little more height than Material's default to stay legible. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: auto;
}

.md-header__title {
  font-weight: 600;
}

/* Blockquotes used the navy rule on the old site. */
.md-typeset blockquote {
  border-left: 4px solid var(--svt-navy);
  color: inherit;
}

/* Ghost centred figures and never upscaled them past their natural size --
 * carried over from the same code-injection block. */
.md-typeset figure img {
  width: unset;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.md-typeset figure figcaption {
  color: #777;
  font-size: 0.75rem;
  margin-top: 0.4em;
  max-width: 100%;
}

/* Tutorial videos are full-bleed within the content column. */
.md-typeset video {
  width: 100%;
  height: auto;
  margin: 1.2em 0;
  border-radius: 3px;
}

/* Definition lists carry a lot of the Survey Builder documentation. */
.md-typeset dl dt {
  font-weight: 600;
  margin-top: 1em;
}

/* Absorbs the free space in the app bar, in place of the removed
 * md-header__title. Everything after it is pinned right. */
.svt-header-spacer {
  flex-grow: 1;
  min-width: 0;
}

/* Guidepost's header links, inside the app bar and to the right of the search
 * field (see overrides/partials/header.html). Deliberately NOT flex-grow: the
 * spacer above owns the free space, so these stay hard against the right edge
 * instead of stretching and dragging search leftward. */
.svt-nav {
  display: flex;
  flex-shrink: 0;
  gap: 1.4rem;
  align-items: center;
  margin-left: 1rem;
}

.svt-nav__link {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.7rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 125ms;
}

.svt-nav__link:hover,
.svt-nav__link:focus {
  color: #ffffff;
}

/* When the search field expands it takes the full width of the bar. Material
 * fades its own title out in that state; the nav has to do the same or the
 * links render on top of the logo. */
[data-md-toggle="search"]:checked ~ .md-header .svt-nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity 125ms;
}

/* Below Material's own header breakpoint the bar also gains a hamburger and a
 * search icon, so four links no longer fit. The three content links are all
 * reachable from the drawer nav; Login is not, so it is the one that stays. */
@media screen and (max-width: 76.1875em) {
  .svt-nav__link--wide {
    display: none;
  }
}