/* assets/css/pages/legal.css
   Policy/compliance pages. Builds on single-post.css (.gtm-single-* / .gtm-entry-content).
   Adds the sticky "On this page" TOC + the policy switcher, and a few legal tweaks. */

/* Headings can be jumped to; offset the scroll under the sticky masthead. */
.gtm-legal-content [id] { scroll-margin-top: 100px; }

/* The first paragraph on a policy page is often the DRAFT/legal note, not a lede,
   so drop the news "big first paragraph" treatment here. */
.gtm-legal-content > p:first-of-type { font-size: 1.1rem; line-height: 1.75; color: #3d3843; font-weight: 400; }

/* Sticky sidebar is a flex column (base from .gtm-single-aside) capped to the viewport.
   Only the "On this page" list scrolls, so the Policies switcher + contact card stay
   on screen at all times — no odd scrollbar running down the whole panel. */
/* On short viewports the aside itself scrolls (overflow-y:auto) as a graceful fallback,
   so the lower cards are revealed rather than clipped; on tall viewports it never
   overflows, so no panel scrollbar appears. */
.gtm-legal-aside { max-height: calc(100vh - 122px); overflow: hidden auto; gap: 14px; }
/* Policies + contact keep their natural height; the TOC card absorbs any overflow, but
   never below title + ~3 rows, so the section list can never collapse to zero. */
.gtm-legal-aside > .gtm-aside-card { flex-shrink: 0; }
.gtm-legal-aside > .gtm-legal-toc-card:not([hidden]) { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 168px; }
.gtm-legal-toc-card .gtm-aside-card__title { flex: 0 0 auto; align-self: flex-start; }
/* The headings list is the only scroll region, and only when it cannot otherwise fit. */
.gtm-legal-toc-card .gtm-toc { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 6px; }

/* Compact the always-on cards (Policies + Contact) so the pinned sidebar leaves the
   section list a usable window rather than pushing it to zero height. */
.gtm-legal-aside .gtm-aside-card { padding: 16px 20px; }
.gtm-legal-aside .gtm-aside-card__title { margin-bottom: 11px; }
.gtm-legal-policies a { padding: 5px 0; }
.gtm-legal-policies .gtm-aside-list__title { font-size: 0.89rem; line-height: 1.25; }
.gtm-legal-aside .gtm-aside-card--contact p { margin-bottom: 8px; font-size: 0.89rem; }
.gtm-legal-aside .gtm-aside-card__phone { font-size: 1.1rem; margin-bottom: 6px; }

/* ---------- On this page (TOC) ---------- */
.gtm-legal-toc-card { padding-bottom: 18px; }
.gtm-toc { display: flex; flex-direction: column; }
.gtm-toc a {
    display: block;
    padding: 6px 0 6px 16px;
    border-left: 2px solid #eceaef;
    color: #6a646f;
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.35;
    transition: color 0.15s, border-color 0.15s;
}
.gtm-toc a.is-h3 { padding-left: 28px; font-size: 0.84rem; }
.gtm-toc a:hover { color: var(--c-primary, #342E37); }
.gtm-toc a.is-active {
    color: var(--c-primary, #342E37);
    font-weight: 700;
    border-left-color: #FFC424;
}

/* ---------- Policy switcher (current highlighted) ---------- */
.gtm-legal-policies .is-current a { font-weight: 800; }
.gtm-legal-policies .is-current .gtm-aside-list__title { color: #b8901a; }
.gtm-legal-policies .is-current .gtm-aside-list__title::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: #FFC424;
    vertical-align: middle;
}

/* ---------- Responsive: sidebar goes static, TOC leads on mobile ---------- */
@media (max-width: 991px) {
    /* Sidebar stacks below the article and expands fully — no viewport cap, no inner
       scroll region; the whole section list is shown. */
    .gtm-legal-aside { max-height: none; overflow: visible; display: flex; flex-direction: column; }
    .gtm-legal-aside .gtm-aside-card--contact { order: 3; }
    .gtm-legal-aside > .gtm-legal-toc-card:not([hidden]) { min-height: 0; }
    .gtm-legal-toc-card .gtm-toc { overflow: visible; min-height: 0; padding-right: 0; }
    /* No space pressure on mobile: restore comfortable tap targets. */
    .gtm-legal-policies a { padding: 11px 0; }
    .gtm-toc a { padding: 9px 0 9px 16px; }
}