/*
 * Wilder Labs Studio - user guide theme (wls-guide.css)
 * Loads only on pages marked as guides (_wls_guide). Colours and type live in the Divi modules;
 * this file handles what modules can't: the sticky chapter list, smooth jumps to chapters,
 * clearance under the floating header, and the page ground on short pages.
 */

html:has(body.wls-guide) { background: #0E0D12; scroll-behavior: smooth; }
body.wls-guide,
body.wls-guide #page-container,
body.wls-guide #main-content { background: #0E0D12 !important; }

/* Chapter jumps land below the floating header pill */
body.wls-guide [id] { scroll-margin-top: 96px; }

/* The hero clears the floating header pill */
body.wls-guide .wls-guide-hero.et_pb_section { padding-top: 120px !important; }
@media (max-width: 767px) {
	body.wls-guide .wls-guide-hero.et_pb_section { padding-top: 96px !important; }
}

/* Sticky chapter list on desktop; above the content on tablet and phone.
   The SDM layout marks its chapter column with the id sdm-guide-side; new guides can use the class wls-guide-side. */
@media (min-width: 981px) {
	body.wls-guide #sdm-guide-side,
	body.wls-guide .sdm-guide-side,
	body.wls-guide .wls-guide-side { position: sticky; top: 96px; align-self: flex-start; }
}
body.wls-guide #sdm-guide-side a,
body.wls-guide .wls-guide-side a { transition: color .12s ease; }
body.wls-guide #sdm-guide-side a:hover,
body.wls-guide .wls-guide-side a:hover { color: #C2FF01; }

/* Phone and tablet: chapter links get a finger-sized tap area (about 44px) without changing the look */
@media (max-width: 980px) {
	body.wls-guide #sdm-guide-side a,
	body.wls-guide .wls-guide-side a { display: block; padding: 12px 0; margin: -6px 0; }
}

/* Screenshots: never wider than their column */
body.wls-guide .et_pb_image img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
	html:has(body.wls-guide) { scroll-behavior: auto; }
}

/* Night Shift (Oct 23, 2026): the article is a white reading panel (colours live in the modules).
   This keeps the panel white and the links racing red even before Divi rebuilds its cached CSS. */
body.wls-guide .wls-guide-article { background: #FFFFFF; border-radius: 48px; }
body.wls-guide .wls-guide-article a { color: #8A1F1C; text-underline-offset: 3px; }
body.wls-guide .wls-guide-article a:focus-visible,
body.wls-guide #sdm-guide-side a:focus-visible { outline: 3px solid #4100F5; outline-offset: 3px; border-radius: 4px; }
body.wls-guide #sdm-guide-side a:focus-visible { outline-color: #C2FF01; }
body.wls-guide .wls-guide-article .et_pb_image img { border-radius: 14px; }
/* The horseshoe sits on a cream tile, like the app icon */
body.wls-guide .wls-guide-hero .et_pb_image img[src*="logo-horseshoe"] { background: #FAF7ED; border-radius: 24px; padding: 14px; border: 0; }
@media (max-width: 767px) {
	body.wls-guide .wls-guide-article { border-radius: 28px; }
}