/*
 * CTMC page designs: theme compatibility (OceanWP 2.0.4 + site CSS).
 * Loaded after ctmc-pages.css, only on the two design templates. It neutralises site-wide rules the
 * standalone GPT reference never had; every selector is scoped to these templates.
 * Found by diffing computed styles of all elements against reference/*.html at 1440/768/390 (2026-09-25).
 */

/* OceanWP sets overflow-x:hidden on html and the site adds it on body, which turns body into a scroll
   container and stops the "In this guide" sidebar from sticking. clip keeps the clipping without that. */
body.ctmc-pd { overflow-x: clip; }

/* OceanWP also forces html { overflow-y: scroll }. With classic (Windows-style) scrollbars that makes browsers
   subtract the scrollbar from vw units, shrinking the design's vw-based headings ~1%. The pages are always taller
   than the viewport, so auto still shows the scrollbar. */
html:has(> body.ctmc-pd) { overflow-y: auto; }

/* OceanWP style.min.css `.button` (0,1,0) is uppercase and centred. body + :where() = (0,1,1) beats that but stays
   below the design's own button rules; inherit restores the section's alignment (the newborn closing button is centred). */
body .ctmc-page :where(.button) { text-transform: none; text-align: inherit; }

/* OceanWP h1-h6 use weight 600 and line-height 1.4; the design relies on the browser default (bold)
   and inherited line-height wherever it does not set them. :where() keeps specificity below the design's rules. */
.ctmc-page :where(h1, h2, h3, h4, h5, h6) { font-weight: bold; line-height: inherit; }

/* The site header does not stick, so anchors only need a small gap, plus the WP admin bar when logged in. */
.ctmc-page { --ctmc-header-offset: 24px; }
.admin-bar .ctmc-page { --ctmc-header-offset: 56px; }
@media (max-width: 782px) { .admin-bar .ctmc-page { --ctmc-header-offset: 70px; } }

/* Bullet lists inside FAQ answers (client copy, 2026-10-07): the design had none, so match the answer text
   instead of OceanWP's default list styles. */
.ctmc-page .answer ul { margin: 0 0 1em; padding-left: 1.3em; list-style: disc; }
.ctmc-page .answer li { margin: 0; padding-left: .2em; font-size: 14px; line-height: 1.9; }
.ctmc-page .answer li::marker { color: var(--pink); }

/* Links added inside copy (client edits, 2026-10-07) inherited the grey body text and were indistinguishable.
   In-text links: design blue + underline (not colour alone). Closing CTA: the design's .text-link look. */
.ctmc-page .answer a { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.ctmc-page .closing-preparation p a { display: inline-flex; align-items: center; margin-top: 8px; color: var(--blue); font-weight: 600; text-decoration: none; }
.ctmc-page .closing-preparation p a:hover, .ctmc-page .closing-preparation p a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }