/* ------------------------------------------------------------------ *
 * Actian Data Platform documentation portal — small additions on top of
 * the Zensical/Material stylesheet.
 *
 * Deliberately short, matching the Jaspersoft portal: everything the
 * theme already styles (header, navigation, table of contents, headings,
 * body type, admonitions, code blocks, card grids) is LEFT TO THE THEME
 * so the light and dark palettes stay consistent and Zensical upgrades
 * are picked up for free.
 *
 * Only add a rule here when the theme has no answer — converted-content
 * quirks, markup this repo introduces in theme_overrides/main.html, or a
 * browser behaviour the theme leaves at its default.
 * ------------------------------------------------------------------ */

/* Figure captions. Converted pages emit the caption in italics on the
   paragraph directly after the image; tone it down. */
.md-typeset p > img + em,
.md-typeset p > em:only-child {
  color: var(--md-default-fg-color--light);
  font-size: 0.85em;
}

/* Screenshots: never let one overflow its column. */
.md-typeset img {
  max-width: 100%;
  border-radius: 0.1rem;
}

/* Reference tables in the SQL and connectivity guides are wide; let them
   scroll inside the content column instead of stretching the page. */
.md-typeset .md-typeset__table {
  overflow-x: auto;
}

.md-typeset table:not([class]) th {
  white-space: nowrap;
}

/* Landing-page cards: a touch more room than the theme default, since the
   cards carry a title plus a full sentence of description. */
.md-typeset .grid {
  grid-gap: 0.8rem;
}

.md-typeset .grid > .card > p:first-child,
.md-typeset .grid.cards > ul > li > p:first-child {
  align-items: center;
  display: flex;
  gap: 0.4rem;
}

.md-typeset .grid > .card .twemoji,
.md-typeset .grid.cards > ul > li .twemoji {
  height: 1.1rem;
  width: 1.1rem;
}

/* ------------------------------------------------------------------ *
 * Page title consistency.
 *
 * Pages converted from FrameMaker lead with an H2 that is the page title
 * (there is no H1). Render that single leading H2 at H1 scale so those
 * pages match the ones that use a real H1. Section H2s on pages that do
 * have an H1 are untouched, because the selector only applies when the
 * content has none.
 *
 * This is a converted-content fix, not a style preference — without it
 * several hundred pages render their title at subheading size.
 * ------------------------------------------------------------------ */
.md-typeset:not(:has(> h1)) > h2:first-of-type {
  font-size: 2em;
  margin-top: 0;
  margin-bottom: 0.8em;
}

/* ------------------------------------------------------------------ *
 * Announcement bar (theme_overrides/main.html).
 *
 * The theme sizes the bar from `.md-banner__inner` and inherits a
 * `.md-typeset` line-height on the same element, which makes a one-line
 * notice occupy a tall strip. Selectors carry two classes to beat the
 * theme's single-class rules regardless of load order.
 * ------------------------------------------------------------------ */
.md-banner .md-banner__inner {
  font-size: 0.5rem;
  line-height: 1.35;
  margin: 0.2rem auto;
}

.md-banner .md-banner__button svg {
  width: 0.65rem;
  height: 0.65rem;
}

/* ------------------------------------------------------------------ *
 * Previous/next page links.
 *
 * The theme puts these in the site footer, spanning the full window
 * width. They belong with the content they navigate, so main.html
 * renders them at the end of the article and they are styled here to sit
 * inside the content column. The theme's own `navigation.footer` feature
 * is therefore left switched off.
 *
 * Borderless on purpose: a rule above the pair separates them from the
 * page and the link text alone carries them — no cards, no arrow icons.
 * ------------------------------------------------------------------ */
.md-content-footer {
  border-top: 1px solid var(--md-default-fg-color--lightest);
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  margin: 2.4rem 0 0;
  padding-top: 1rem;
}

.md-content-footer__link {
  color: var(--md-default-fg-color);
  display: flex;
  flex: 0 1 48%;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
}

.md-typeset .md-content-footer__link,
.md-typeset .md-content-footer__link:hover,
.md-typeset .md-content-footer__link:focus {
  text-decoration: none;
}

.md-content-footer__link--next {
  margin-left: auto;
  text-align: right;
}

/* The arrow buttons in the markup are redundant next to the Previous and
   Next labels; the Jaspersoft portal shows text only. */
.md-content-footer__button {
  display: none;
}

.md-content-footer__direction {
  color: var(--md-default-fg-color--light);
  display: block;
  font-size: 0.64rem;
  text-transform: uppercase;
}

.md-content-footer__title .md-ellipsis {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Only the page title reacts to hover; the label above it stays quiet. */
.md-content-footer__link:hover .md-ellipsis {
  color: var(--md-accent-fg-color);
}

@media screen and (max-width: 44.9844em) {
  .md-content-footer {
    flex-direction: column;
  }

  .md-content-footer__link,
  .md-content-footer__link--next {
    flex: 1 1 auto;
    margin-left: 0;
    text-align: left;
  }
}

/* ------------------------------------------------------------------ *
 * Scrolling.
 *
 * The theme leaves the document scroller at the browser default, so on
 * macOS and iOS hitting the top or bottom rubber-bands the whole page —
 * and because the header is sticky with a backdrop blur, the bounce
 * reads as the page jumping. Pinning the viewport's overscroll stops the
 * bounce (and scroll chaining out of the page).
 *
 * Trade-off: this also disables pull-to-refresh on Android Chrome, which
 * is the accepted cost on a documentation site.
 * ------------------------------------------------------------------ */
html {
  overscroll-behavior: none;
}

body {
  overscroll-behavior: none;
}

/* The sidebars scroll independently; keep a flick inside them from
   continuing into the document scroller.
 *
 * Only real scroll containers may carry this. Chrome treats any element
 * with overscroll-behavior other than `auto` as a scroll-chaining
 * boundary even when it cannot scroll (`.md-nav__list` is
 * `overflow: visible`), so listing the nav list here swallowed every
 * wheel event over the navigation: neither the sidebar nor the page
 * moved. Same rule and same reason as the Jaspersoft portal. */
.md-sidebar__scrollwrap {
  overscroll-behavior: contain;
}

/* ------------------------------------------------------------------ *
 * Page feedback — the free-text follow-up shown after a rating.
 * Matches the Jaspersoft and Zeenea portals; the rating buttons
 * themselves are styled by the theme.
 * ------------------------------------------------------------------ */
.feedback-text-form {
  margin-top: 0.75rem;
}

.feedback-text-prompt {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  color: var(--md-default-fg-color);
}

.feedback-optional {
  color: var(--md-default-fg-color--light);
}

.feedback-textarea {
  display: block;
  width: 100%;
  max-width: 28rem;
  padding: 0.5rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-family: inherit;
  font-size: 0.72rem;
  resize: vertical;
}

.feedback-textarea:focus {
  outline: 2px solid var(--md-accent-fg-color);
  border-color: transparent;
}

.feedback-text-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.feedback-submit {
  font-size: 0.7rem;
  padding: 0.3rem 1rem;
  cursor: pointer;
}

.feedback-skip {
  background: none;
  border: none;
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.feedback-skip:hover {
  color: var(--md-default-fg-color);
}

.feedback-thanks {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}

/* ------------------------------------------------------------------ *
 * Header logo (theme_overrides/partials/logo.html).
 *
 * Both brand variants ship in the markup and the palette picks one: the
 * dark lockup on the light header, the white lockup on the dark header
 * (the theme sets data-md-color-scheme on <body>).
 *
 * These selectors must out-specify the theme's own
 * `.md-header__button.md-logo img { display: block }` (0,2,1) — a bare
 * `.adp-logo--on-dark { display: none }` loses to it and both variants
 * render, one of them invisible-on-white with only its edge showing.
 * ------------------------------------------------------------------ */
.md-header__button.md-logo img.adp-logo,
.md-nav__button.md-logo img.adp-logo {
  height: 1.5rem;
  width: auto;
}

.md-header__button.md-logo img.adp-logo--on-dark,
.md-nav__button.md-logo img.adp-logo--on-dark {
  display: none;
}

[data-md-color-scheme="slate"] .md-header__button.md-logo img.adp-logo--on-light,
[data-md-color-scheme="slate"] .md-nav__button.md-logo img.adp-logo--on-light {
  display: none;
}

[data-md-color-scheme="slate"] .md-header__button.md-logo img.adp-logo--on-dark,
[data-md-color-scheme="slate"] .md-nav__button.md-logo img.adp-logo--on-dark {
  display: block;
}

@media screen and (max-width: 59.9844em) {
  .md-header__button.md-logo img.adp-logo,
  .md-nav__button.md-logo img.adp-logo {
    height: 1.2rem;
  }
}

/* ------------------------------------------------------------------ *
 * Home page "Guides" list (theme_overrides/partials/nav.html).
 *
 * With navigation.tabs the left sidebar shows the active tab's children,
 * and Home has none — so the column was empty. This list fills it and is
 * styled like the table of contents on the right for symmetry.
 * ------------------------------------------------------------------ */
.adp-guides {
  margin-bottom: 1rem;
}

.adp-guides .md-nav__title {
  display: flex;
}

.adp-guides .md-nav__link {
  margin-top: 0.3rem;
}

/* On a phone the drawer shows this list followed by the full tree; a rule
   keeps the two apart. */
@media screen and (max-width: 76.234375em) {
  .adp-guides {
    border-bottom: 0.05rem solid var(--md-default-fg-color--lightest);
    padding-bottom: 0.6rem;
  }
}