/**
 * How-To bridge styles
 *
 * mdBook CSS assumes a full-page document (html/body + fixed sidebar).
 * Inside WordPress we must:
 *  1. Stop mdBook from painting/recoloring the WP header/footer
 *  2. Contain the sidebar inside .shufflrr-howto-app (not the viewport)
 *  3. Keep the docs block between header and footer
 *
 * Theme-owned only — never edit userguide-master/docs/.
 */

/* -------------------------------------------------------------------------
   1) Undo mdBook document-level styles that leak into WP chrome
   ------------------------------------------------------------------------- */

html.shufflrr-howto-html,
html:has(body.shufflrr-howto) {
	/*
	 * Keep mdBook's 62.5% root (1rem = 10px) so docs rem math stays correct.
	 * Only neutralize color/background so the WP chrome is not mint/green.
	 */
	font-size: 62.5% !important;
	background-color: #fff !important;
	background: #fff !important;
	color: inherit !important;
	font-family: inherit !important;
}

body.shufflrr-howto {
	/* mdBook body size (1.6rem ≈ 16px with 62.5% root) */
	font-size: 1.6rem;
	background-color: #fff !important;
	color: inherit !important;
	overflow-x: hidden;
}

/* Keep Elementor / theme header & footer readable on the 62.5% root */
body.shufflrr-howto .elementor-location-header,
body.shufflrr-howto .elementor-location-footer,
body.shufflrr-howto #masthead,
body.shufflrr-howto .site-header,
body.shufflrr-howto #colophon,
body.shufflrr-howto .site-footer {
	color: inherit;
	background-color: transparent;
}

body.shufflrr-howto #wpadminbar {
	font-size: 13px !important;
}

/* -------------------------------------------------------------------------
   2) Full-bleed wrappers so the book isn't trapped in a padded content column
   ------------------------------------------------------------------------- */

body.shufflrr-howto #page,
body.shufflrr-howto .site,
body.shufflrr-howto #content,
body.shufflrr-howto .site-main,
body.shufflrr-howto .entry-content,
body.shufflrr-howto .content-area,
body.shufflrr-howto .site-main > article,
body.shufflrr-howto .site-main > .entry {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   3) Docs app shell — theme colors live HERE only (not on html/body)
   ------------------------------------------------------------------------- */

body.shufflrr-howto .shufflrr-howto-app {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	overflow: hidden; /* contain absolute sidebar */
	box-sizing: border-box;
	font-family: "Open Sans", sans-serif;
	color: var(--fg);
	background-color: var(--bg);
}

/* -------------------------------------------------------------------------
   4) Sidebar drawer

   Below 1080px mdBook starts closed. Toggle adds .sidebar-visible.
   Mobile uses position:fixed so Elementor/overflow parents cannot clip it.
   ------------------------------------------------------------------------- */

body.shufflrr-howto .shufflrr-howto-app .sidebar {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
	height: auto !important;
	width: var(--sidebar-width, 300px) !important;
	max-width: 85vw;
	z-index: 20;
	transform: translateX(-110%) !important;
	transition: transform 0.3s ease !important;
	-webkit-overflow-scrolling: touch;
	background-color: var(--sidebar-bg, #000130) !important;
}

html.sidebar-visible body.shufflrr-howto .shufflrr-howto-app .sidebar {
	transform: translateX(0) !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

body.shufflrr-howto .shufflrr-howto-app .page-wrapper {
	position: relative;
	z-index: 1;
	transform: none !important;
	margin-left: 0 !important;
	width: auto;
	box-sizing: border-box;
	transition: margin-left 0.3s ease;
	background-color: var(--bg, #fff);
}

/* Desktop: push content when open; keep hamburger usable */
@media only screen and (min-width: 1080px) {
	body.shufflrr-howto .shufflrr-howto-app #sidebar-toggle {
		display: inline-block !important;
		visibility: visible !important;
		pointer-events: auto !important;
		position: relative;
		z-index: 2;
	}

	html.sidebar-visible body.shufflrr-howto .shufflrr-howto-app .page-wrapper {
		margin-left: var(--sidebar-width, 300px) !important;
	}

	html.sidebar-visible body.shufflrr-howto .shufflrr-howto-app .sidebar {
		max-width: var(--sidebar-width, 300px);
		z-index: 20;
		transform: translateX(0) !important;
		display: block !important;
		visibility: visible !important;
	}
}

/*
 * Mobile / tablet (≤1079px): hide the TOC hamburger.
 * The drawer toggle is unreliable inside WP/Elementor on touch devices;
 * desktop (≥1080px) keeps the working toggle.
 */
@media only screen and (max-width: 1079px) {
	body.shufflrr-howto .shufflrr-howto-app #sidebar-toggle,
	body.shufflrr-howto .shufflrr-howto-app #sidebar-toggle-anchor {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
		width: 0 !important;
		height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden !important;
	}

	/* Keep TOC permanently closed on small screens */
	body.shufflrr-howto .shufflrr-howto-app .sidebar {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transform: translateX(-110%) !important;
	}

	html.sidebar-visible body.shufflrr-howto .shufflrr-howto-app .sidebar {
		display: none !important;
		visibility: hidden !important;
		transform: translateX(-110%) !important;
	}

	html.sidebar-visible body.shufflrr-howto .shufflrr-howto-app .page-wrapper {
		margin-left: 0 !important;
		transform: none !important;
	}

	/* No dimmer when drawer is disabled */
	html.sidebar-visible body.shufflrr-howto .shufflrr-howto-app .page-wrapper::before {
		content: none !important;
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
   5) Menu bar + content scrolling inside the app
   ------------------------------------------------------------------------- */

/*
 * mdBook stacks #menu-bar-hover-placeholder (z-index 101) over the bar when
 * we lower #menu-bar to 30 — that invisible placeholder eats ☰ clicks.
 * Keep the real menu bar above the placeholder and let the placeholder
 * ignore pointer events (bar is already .sticky).
 */
body.shufflrr-howto .shufflrr-howto-app #menu-bar-hover-placeholder {
	pointer-events: none !important;
	z-index: 101;
}

body.shufflrr-howto .shufflrr-howto-app #menu-bar,
body.shufflrr-howto .shufflrr-howto-app #menu-bar.sticky,
html.js body.shufflrr-howto .shufflrr-howto-app #menu-bar.sticky {
	position: sticky;
	top: 0;
	z-index: 102 !important;
	pointer-events: auto !important;
}

/*
 * Reference design (standalone howto): white menu bar, medium-grey icons/title.
 * WP / Elementor button styles otherwise paint .icon-button as a dark navy block
 * with white icons — that is the "corrupted" left square in the WP screenshot.
 */
body.shufflrr-howto .shufflrr-howto-app #menu-bar {
	background-color: #ffffff !important;
	border-bottom: 1px solid #e5e5e5 !important;
	color: #747474 !important;
	align-items: center !important;
}

body.shufflrr-howto .shufflrr-howto-app .menu-title {
	font-size: 2rem !important; /* ~20px with 62.5% root */
	font-weight: 200 !important;
	line-height: var(--menu-bar-height);
	color: #747474 !important;
	text-align: center !important;
}

/*
 * Standalone howto hides the theme (paintbrush) control — it is not on the old site.
 * Remove from layout entirely (transformer also strips it from HTML).
 */
body.shufflrr-howto .shufflrr-howto-app #theme-toggle,
body.shufflrr-howto .shufflrr-howto-app #theme-list,
body.shufflrr-howto .shufflrr-howto-app button#theme-toggle,
body.shufflrr-howto .shufflrr-howto-app .icon-button#theme-toggle {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

body.shufflrr-howto .shufflrr-howto-app #menu-bar .left-buttons,
body.shufflrr-howto .shufflrr-howto-app #menu-bar .right-buttons {
	background: transparent !important;
	display: flex !important;
	align-items: center !important;
	align-self: center !important;
	height: var(--menu-bar-height);
}

body.shufflrr-howto .shufflrr-howto-app #menu-bar button,
body.shufflrr-howto .shufflrr-howto-app #menu-bar .icon-button,
body.shufflrr-howto .shufflrr-howto-app #menu-bar label.icon-button {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	color: #747474 !important;
	min-height: 0 !important;
	min-width: 0 !important;
	height: auto !important;
	width: auto !important;
	padding: 0 8px !important;
	margin: 0 !important;
	border-radius: 0 !important;
	line-height: var(--menu-bar-height) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

/* Hidden checkbox used by the hamburger / book.js pair */
body.shufflrr-howto .shufflrr-howto-app #sidebar-toggle-anchor {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

body.shufflrr-howto .shufflrr-howto-app #menu-bar button:hover,
body.shufflrr-howto .shufflrr-howto-app #menu-bar .icon-button:hover,
body.shufflrr-howto .shufflrr-howto-app #menu-bar button:focus,
body.shufflrr-howto .shufflrr-howto-app #menu-bar .icon-button:focus {
	background: transparent !important;
	color: #000000 !important;
	box-shadow: none !important;
}

body.shufflrr-howto .shufflrr-howto-app #menu-bar i,
body.shufflrr-howto .shufflrr-howto-app #menu-bar .icon-button i,
body.shufflrr-howto .shufflrr-howto-app #menu-bar a,
body.shufflrr-howto .shufflrr-howto-app #menu-bar a i,
body.shufflrr-howto .shufflrr-howto-app #git-repository-button {
	color: #747474 !important;
	background: transparent !important;
}

body.shufflrr-howto .shufflrr-howto-app #menu-bar a:hover,
body.shufflrr-howto .shufflrr-howto-app #menu-bar a:hover i,
body.shufflrr-howto .shufflrr-howto-app #menu-bar .icon-button:hover i {
	color: #000000 !important;
}

body.shufflrr-howto .shufflrr-howto-app .content {
	overflow: visible !important; /* avoid nested scrollport fighting the page */
	min-height: 50vh;
}

body.shufflrr-howto .shufflrr-howto-app .nav-wide-wrapper,
body.shufflrr-howto .shufflrr-howto-app .nav-wrapper {
	z-index: 10;
}

/* Prev/next chapter chevrons — don't inherit WP button chrome */
body.shufflrr-howto .shufflrr-howto-app .nav-chapters,
body.shufflrr-howto .shufflrr-howto-app .mobile-nav-chapters {
	background: transparent !important;
	box-shadow: none !important;
	color: #ccc !important;
}

/* -------------------------------------------------------------------------
   5b) Wider internal body + Ask AI proportions (match standalone howto)
   ------------------------------------------------------------------------- */

body.shufflrr-howto .shufflrr-howto-app {
	--content-max-width: 920px;
}

body.shufflrr-howto .shufflrr-howto-app .content main {
	max-width: var(--content-max-width, 750px) !important;
	width: 100%;
}

body.shufflrr-howto .shufflrr-howto-app #ask-ai-root {
	max-width: 920px !important;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 4rem;
}

/* Blue H1 badge (Ask AI / chapter titles) — secondary-btn brand */
body.shufflrr-howto .shufflrr-howto-app .page h1 {
	font-size: 2.4rem !important;
	line-height: 1.25 !important;
	margin: 1.5rem 0 1.6rem !important;
	font-weight: 400 !important;
}

body.shufflrr-howto .shufflrr-howto-app .page h1 > a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #fdfeff !important;
	background: #3c83f6 !important;
	background-color: #3c83f6 !important;
	border: 1px solid #3c83f6 !important;
	border-radius: 0 !important;
	padding: 11px 24px !important;
	margin-left: 0 !important;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.2px !important;
	min-height: 44px !important;
	text-decoration: none !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

body.shufflrr-howto .shufflrr-howto-app .page h1 > a:hover {
	background: #2563eb !important;
	background-color: #2563eb !important;
	border-color: #2563eb !important;
	color: #fdfeff !important;
}

/*
 * Content typography + heading spacing — match standalone howto.
 * WP/Elementor otherwise flatten H2/H3 margins and turn body text slate-grey.
 */
body.shufflrr-howto .shufflrr-howto-app .content,
body.shufflrr-howto .shufflrr-howto-app .content main {
	color: #000000 !important;
	font-size: 1.7rem !important; /* ~17px with 62.5% root — same as docs custom.css */
	line-height: 1.45 !important;
}

body.shufflrr-howto .shufflrr-howto-app .content p,
body.shufflrr-howto .shufflrr-howto-app .content li {
	color: #000000 !important;
	font-size: inherit !important;
	line-height: 1.45em !important;
	margin-top: 0.8em !important;
	margin-bottom: 0.8em !important;
}

body.shufflrr-howto .shufflrr-howto-app .content h2,
body.shufflrr-howto .shufflrr-howto-app .content h3,
body.shufflrr-howto .shufflrr-howto-app .content h4 {
	color: inherit !important;
	margin-top: 2.5em !important;
	margin-bottom: 0.8em !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

body.shufflrr-howto .shufflrr-howto-app .content h2 {
	font-size: 2.4rem !important; /* ~24px — airy like standalone "Prompt input" */
}

body.shufflrr-howto .shufflrr-howto-app .content h3 {
	font-size: 2rem !important;
}

body.shufflrr-howto .shufflrr-howto-app .content h4 {
	font-size: 1.8rem !important;
	margin-top: 2em !important;
}

/* Blue section headings (H2–H4 links) */
body.shufflrr-howto .shufflrr-howto-app .page h2 > a,
body.shufflrr-howto .shufflrr-howto-app .page h3 > a,
body.shufflrr-howto .shufflrr-howto-app .page h4 > a {
	color: #0078ff !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	text-decoration: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	display: inline !important;
}

/* Divider above H2 (except first content H2) — 40px / 30px like custom.css */
body.shufflrr-howto .shufflrr-howto-app .page h2:not(:nth-child(2))::before {
	display: block !important;
	margin: 40px auto 30px auto !important;
	content: "" !important;
	height: 1px !important;
	width: 80% !important;
	background: #cccccc !important;
}

body.shufflrr-howto .shufflrr-howto-app .content ul,
body.shufflrr-howto .shufflrr-howto-app .content ol {
	margin: 0.8em 0 1.2em !important;
	padding-left: 2.2em !important;
	line-height: 1.45em !important;
}

body.shufflrr-howto .shufflrr-howto-app .content li + li {
	margin-top: 0.35em !important;
}

body.shufflrr-howto .shufflrr-howto-app .content strong {
	font-weight: 700 !important;
	color: inherit !important;
}

/* Chat input + Ask AI submit — match site .secondary-btn */
body.shufflrr-howto .shufflrr-howto-app .shufflrr-ask-ai__form {
	gap: 10px;
	padding: 14px 16px;
	align-items: stretch;
}

body.shufflrr-howto .shufflrr-howto-app .shufflrr-ask-ai__input {
	padding: 12px 14px !important;
	font-size: 15px !important;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	min-height: 44px;
	border-radius: 0 !important;
	box-sizing: border-box;
}

body.shufflrr-howto .shufflrr-howto-app .shufflrr-ask-ai__input:focus {
	border-color: #3c83f6 !important;
	box-shadow: 0 0 0 3px rgba(60, 131, 246, 0.18) !important;
}

body.shufflrr-howto .shufflrr-howto-app .shufflrr-ask-ai__submit,
body.shufflrr-howto .shufflrr-howto-app #ask-ai-root button,
body.shufflrr-howto .shufflrr-howto-app .shufflrr-ask-ai button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #3c83f6 !important;
	background-color: #3c83f6 !important;
	background-image: none !important;
	color: #fdfeff !important;
	border: 1px solid #3c83f6 !important;
	border-radius: 0 !important;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
	letter-spacing: -0.2px !important;
	min-height: 44px !important;
	padding: 11px 24px !important;
	box-shadow: none !important;
	transform: none !important;
	white-space: nowrap;
	box-sizing: border-box !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: background 0.3s ease, border-color 0.3s ease !important;
}

body.shufflrr-howto .shufflrr-howto-app .shufflrr-ask-ai__submit:hover,
body.shufflrr-howto .shufflrr-howto-app #ask-ai-root button:hover,
body.shufflrr-howto .shufflrr-howto-app .shufflrr-ask-ai button:hover {
	background: #2563eb !important;
	background-color: #2563eb !important;
	background-image: none !important;
	border-color: #2563eb !important;
	color: #fdfeff !important;
	box-shadow: none !important;
	transform: none !important;
}

body.shufflrr-howto .shufflrr-howto-app .shufflrr-ask-ai__submit:focus,
body.shufflrr-howto .shufflrr-howto-app .shufflrr-ask-ai__submit:active,
body.shufflrr-howto .shufflrr-howto-app #ask-ai-root button:focus,
body.shufflrr-howto .shufflrr-howto-app #ask-ai-root button:active {
	outline: none !important;
	box-shadow: none !important;
	background: #2563eb !important;
	border-color: #2563eb !important;
	color: #fdfeff !important;
}

body.shufflrr-howto .shufflrr-howto-app .shufflrr-ask-ai__message {
	font-size: 14px !important;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	border-radius: 0 !important;
}

body.shufflrr-howto .shufflrr-howto-app .shufflrr-ask-ai {
	border-radius: 0 !important;
}

/* -------------------------------------------------------------------------
   6) Admin bar clearance for sticky menu (when logged in)
   ------------------------------------------------------------------------- */

body.admin-bar.shufflrr-howto .shufflrr-howto-app #menu-bar.sticky {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar.shufflrr-howto .shufflrr-howto-app #menu-bar.sticky {
		top: 46px;
	}
}