/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

/* Page Title Size (theme option) — matches h1/h2/h3 scale in theme.css */
.page-title--small {
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
}
.page-title--medium {
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.125rem);
}
.page-title--large {
  font-size: clamp(2.25rem, 5vw + 1rem, 3.75rem);
}

/* ---------- preview-panel plugin ---------- */

/* Placement. The plugin sets no width, float or column — where the panel goes
 * is the theme's call, which is what makes it portable. Pages opt in with
 * `preview_panel: true` in frontmatter (see templates/default.html.twig). */
.pp-layout {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  max-width: 1200px;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .pp-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  /* Keeps the article readable while the panel stays in view alongside it.
   * Depends on no ancestor being `overflow: hidden` — if a future rule needs
   * to clip horizontally, use `overflow-x: clip`, which does not create a
   * scroll container and so does not silently kill this. */
  .pp-layout .pp-panel {
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
}

/* The card look in theme.css is bound to `#body-wrapper > .container >
 * .content-item`, and .pp-layout is now an extra level between them. Re-apply
 * it for the nested case. `max-width: 960px` is deliberately not carried over
 * — inside the grid the column already constrains it. */
#body-wrapper > .container > .pp-layout > .content-item {
  background: var(--q2-bg-elev);
  border-radius: var(--q2-radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.25rem);
  box-shadow:
    rgba(19, 19, 22, 0.04) 0 1px 2px,
    rgba(19, 19, 22, 0.04) 0 8px 24px -8px;
}
#body-wrapper > .container > .pp-layout > .content-item > :first-child {
  margin-top: 0;
}
#body-wrapper > .container > .pp-layout > .content-item > :last-child {
  margin-bottom: 0;
}
:root[data-theme="dark"] #body-wrapper > .container > .pp-layout > .content-item {
  box-shadow:
    rgba(0, 0, 0, 0.35) 0 1px 2px,
    rgba(0, 0, 0, 0.45) 0 10px 30px -10px,
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Integration: map quark2's own tokens onto the plugin's public custom
 * properties, so the panel tracks the active theme mode (both tokens below are
 * redefined under :root[data-theme="dark"]) rather than falling back to the
 * plugin's generic light/dark defaults. This is the documented way to theme
 * it — the plugin never declares these properties itself, only reads them. */
.pp-panel {
  --pp-bg: var(--q2-bg-elev);
  --pp-border: var(--q2-border-strong);
  --pp-muted: var(--q2-text-muted);
  --pp-radius: var(--q2-radius-lg);
}