/* ── Help centre (includes/help-page.php): menu with search on the left, article on the right ── */
.hp-layout { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 8px; }

.hp-menu { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding: 18px; border: 1px solid rgba(255,255,255,.8); border-radius: 28px; background: rgba(255,255,255,.6); }
.hp-menu-home { display: block; margin: 2px 6px 12px; color: var(--hd-ink); font-size: 18px; font-weight: 500; text-decoration: none; }
.hp-search { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 9px 14px; border: 1px solid rgba(32,33,31,.12); border-radius: 999px; background: #fff; color: var(--hd-muted); }
.hp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--hd-ink); font: inherit; font-size: 13.5px; }
.hp-group + .hp-group { margin-top: 14px; }
.hp-group h2 { margin: 0 6px 6px; color: var(--hd-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.hp-group ul { margin: 0; padding: 0; list-style: none; }
.hp-group a { display: block; padding: 7px 10px; border-radius: 12px; color: #3c3d38; font-size: 13.5px; line-height: 1.35; text-decoration: none; transition: background .15s; }
.hp-group a:hover { background: rgba(255,255,255,.9); }
.hp-group a.is-active { background: var(--hd-accent); color: var(--hd-ink); font-weight: 500; }
.hp-groups[hidden], .hp-results[hidden] { display: none; }
.hp-results { margin: 0; padding: 0; list-style: none; }
.hp-results a { display: block; padding: 9px 10px; border-radius: 12px; color: var(--hd-ink); text-decoration: none; }
.hp-results a:hover { background: rgba(255,255,255,.9); }
.hp-results strong { display: block; font-size: 13.5px; font-weight: 500; }
.hp-results small { display: block; color: var(--hd-muted); font-size: 11.5px; }
.hp-results span { display: block; margin-top: 3px; color: #55575b; font-size: 12px; line-height: 1.4; }
.hp-none { padding: 8px 10px; color: var(--hd-muted); font-size: 13px; }

.hp-article { min-width: 0; padding: clamp(22px, 4vw, 44px); border: 1px solid rgba(255,255,255,.8); border-radius: 28px; background: rgba(255,255,255,.72); }
.hp-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; color: var(--hd-muted); font-size: 13px; }
.hp-breadcrumb a { color: #3c3d38; text-decoration: none; }
.hp-breadcrumb a:hover { text-decoration: underline; }
.hp-article h1 { margin: 10px 0 18px; color: var(--hd-ink); font-size: clamp(30px, 3.6vw, 44px); font-weight: 400; letter-spacing: -.03em; line-height: 1.1; }

.hp-body { max-width: 760px; color: #2c2d2a; font-size: 15px; line-height: 1.7; }
.hp-body > :first-child { margin-top: 0; }
.hp-body .hp-lede { color: #3c3d38; font-size: 17px; }
.hp-body h2 { margin: 30px 0 8px; color: var(--hd-ink); font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.hp-body h3 { margin: 22px 0 6px; color: var(--hd-ink); font-size: 17px; font-weight: 600; }
.hp-body p { margin: 0 0 12px; }
.hp-body ul, .hp-body ol { margin: 0 0 14px; padding-left: 22px; }
.hp-body li { margin-bottom: 6px; }
.hp-body a { color: var(--hd-ink); text-decoration: underline; text-underline-offset: 2px; }
.hp-body code { padding: 1px 6px; border-radius: 6px; background: rgba(32,33,31,.07); font-size: .92em; }
.hp-body pre { overflow: auto; padding: 14px 16px; border-radius: 14px; background: #20211f; color: #f3f2ee; font-size: 13px; line-height: 1.5; }
.hp-body pre code { padding: 0; background: none; color: inherit; }
.hp-body table { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: 14px; }
.hp-body th, .hp-body td { padding: 9px 10px; border-bottom: 1px solid rgba(32,33,31,.1); text-align: left; vertical-align: top; }
.hp-body th { color: var(--hd-muted); font-size: 12.5px; font-weight: 600; }
.hp-body .hp-note { margin: 16px 0; padding: 14px 18px; border-left: 4px solid var(--hd-accent); border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--hd-accent) 14%, #fff); }
.hp-body .hp-note p:last-child { margin-bottom: 0; }

.hp-pager { display: flex; justify-content: space-between; gap: 12px; max-width: 760px; margin-top: 34px; padding-top: 18px; border-top: 1px dashed rgba(32,33,31,.15); }
.hp-pager a { display: block; max-width: 48%; padding: 12px 16px; border-radius: 16px; background: #fff; color: var(--hd-ink); font-size: 14px; font-weight: 500; text-decoration: none; transition: background .15s; }
.hp-pager a:hover { background: var(--hd-accent); }
.hp-pager small { display: block; color: var(--hd-muted); font-size: 11.5px; font-weight: 400; }
.hp-pager .hp-next { margin-left: auto; text-align: right; }

@media (max-width: 860px) {
  .hp-layout { grid-template-columns: minmax(0, 1fr); }
  .hp-menu { position: static; max-height: none; }
  /* On narrow screens the article comes first and the menu follows it. */
  .hp-article { order: -1; }
}

@media print {
  .hp-menu, .hp-pager { display: none !important; }
  .hp-layout { display: block; }
  .hp-article { padding: 0; border: 0; background: #fff; }
}