/**
 * SkyCiv documentation.
 *
 * Everything is scoped under .scdocs, so nothing here leaks into the rest of
 * the site. The new markup deliberately avoids the old class names
 * (#doc-search-header, .wedocs-single-wrap, .wedocs-single-content,
 * .wedocs-sidebar, ul.doc-nav-list, #action-bar), which leaves almost every
 * rule in Avada-Child-Theme/wedocs/documentation*.css matching nothing.
 *
 * The exception is .entry-content: hundreds of published docs rely on that
 * file's table, image and .clickout rules, so the class is kept and the new
 * typography layers on top from .scdocs .entry-content — three classes deep,
 * and printed after the theme's sheet (see SCDocs_Assets).
 */

.scdocs {
	--sc-ink: #141617;
	--sc-ink-2: #5b6472;
	--sc-ink-3: #8a92a1;
	--sc-rule: #e4e7ef;
	--sc-rule-soft: #eef0f5;
	--sc-blue: #1531e0;
	--sc-blue-dark: #0f24a8;
	--sc-tint: #eef1fd;
	--sc-surface: #f7f8fb;
	--sc-shell: 1240px;
	--sc-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	background: #fff;
	color: var(--sc-ink);
	font-family: var(--sc-sans);
}

/* The theme paints the content area with a grey wash and zero padding. */
body.scdocs-page main#main {
	padding: 0 !important;
	background: #fff !important;
}

body.scdocs-page .content-area,
body.scdocs-page .post-content {
	background: transparent;
}

/* Avada's compiled CSS sets #boxed-wrapper{overflow:hidden}, which silently
   disables position:sticky for everything inside it — that's what the rail
   below depends on. A class+id selector outranks Avada's bare id rule no
   matter which sheet loads last, and this stays scoped to docs pages. */
body.scdocs-page #boxed-wrapper {
	overflow: visible;
}

/* ?from_software=1 — embedded in the app, no site chrome. */
body.scdocs-embedded .fusion-header-wrapper,
body.scdocs-embedded .fusion-tb-header,
body.scdocs-embedded .fusion-footer,
body.scdocs-embedded .fusion-tb-footer {
	display: none !important;
}

.scdocs *,
.scdocs *::before,
.scdocs *::after {
	box-sizing: border-box;
}

.scdocs .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.scdocs :focus-visible {
	outline: 2px solid var(--sc-blue);
	outline-offset: 2px;
	border-radius: 3px;
}

.scdocs .scdocs-icon {
	flex: none;
	vertical-align: middle;
}

/* ---------------------------------------------------------------- hero -- */

/* Matches the /template-case-study/ banner: #F6F7F8 ground, blue radial glow,
   28px grid, and a cursor-follow grid reveal on hover.
   The grid/reveal rules below duplicate the child theme's
   css/background-hover.css .cursor-grid-reveal-fx block — identical values, so
   where that file does load nothing changes. They are repeated because its
   @import is commented out in the child theme's style.css on the local site,
   and because this plugin should not depend on a theme file to look right.
   The class itself stays on the element: js/bg-hover.js, which is enqueued
   site-wide, is what sets --spot-x / --spot-y for the reveal. */
.scdocs-hero {
	position: relative;
	overflow: hidden;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 300px 32px 60px;
	background-color: #f6f7f8;
	background-image: url("../img/hero-glow.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.scdocs-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background-image: linear-gradient(rgba(0, 0, 0, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.015) 1px, transparent 1px);
	background-size: 28px 28px;
}

.scdocs-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.3s;
	background-image: linear-gradient(rgba(120, 120, 120, 0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 120, 120, 0.4) 1px, transparent 1px);
	background-size: 28px 28px;
	-webkit-mask-image: radial-gradient(520px circle at var(--spot-x, 50%) var(--spot-y, 50%), #000, transparent 70%);
	mask-image: radial-gradient(520px circle at var(--spot-x, 50%) var(--spot-y, 50%), #000, transparent 70%);
}

.scdocs-hero:hover::after {
	opacity: 1;
}

/* Two columns, bottom-aligned — same flex-end alignment as the
   /template-case-study/ banner row. Text left, search right.
   The split is 50/50 by request, for a wider search field. Both that banner
   and the docs mockup use 2/3 + 1/3 (the mockup's search group measures ~32%
   of the content width), so this is a deliberate departure from them. */
.scdocs-hero-inner {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: end;
	max-width: var(--site_width);
	margin: 0 auto;
}

@media (min-width: 1024px) {
	.scdocs-hero-aside {
		padding-left: 120px;
	}
}

/* Size comes from .font-hero-title (css/fonts.css): clamp(36px, 4vw, 76px). */
.scdocs .scdocs-hero-title {
	margin: 0 0 12px;
	font-family: "Manrope" !important;
	font-weight: 500 !important;
	line-height: var(--awb-typography1-line-height, 1.2);
	color: var(--awb-custom_color_1, #01071f);
	text-wrap: balance;
}

.scdocs .scdocs-hero-sub {
	margin: 0;
	max-width: 46ch;
	font-family: "Manrope" !important;
	font-weight: 400 !important;
	line-height: var(--awb-custom_typography_4-line-height, 1.5);
	color: var(--awb-custom_color_3, #636b75);
}

/* -------------------------------------------------------------- search -- */

.scdocs-search {
	display: flex;
	align-items: stretch;
	width: 100%;
	background: #fff;
	border: 1px solid var(--sc-rule);
	border-radius: 8px;
	overflow: hidden;
}

.scdocs .scdocs-search-field {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	font-family: inherit;
	font-size: 15px;
	color: var(--sc-ink);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.scdocs .scdocs-search-field::placeholder {
	color: var(--sc-ink-3);
}

.scdocs .scdocs-search-field:focus {
	outline: none;
	box-shadow: none;
}

.scdocs-search-scope {
	position: relative;
	display: flex;
	align-items: center;
	flex: none;
	border-left: 1px solid var(--sc-rule);
	max-width: 150px;
}

.scdocs .scdocs-search-scope-select {
	height: 48px;
	margin: 0;
	padding: 0 32px 0 14px;
	font-family: var(--sc-mono);
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--sc-ink-2);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.scdocs-search-scope .scdocs-icon {
	position: absolute;
	right: 11px;
	pointer-events: none;
	color: var(--sc-ink-3);
	width: 13px;
	height: 13px;
}

.scdocs .scdocs-search-go {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 48px;
	padding: 0;
	color: #fff;
	background: var(--sc-blue);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background 0.15s ease;
}

.scdocs .scdocs-search-go:hover,
.scdocs .scdocs-search-go:focus {
	background: var(--sc-blue-dark);
	color: #fff;
}

/* --------------------------------------------------------------- shell -- */

.scdocs-shell {
	display: grid;
	grid-template-columns: 272px minmax(0, 1fr);
	gap: 96px;
	max-width: var(--site_width);
	margin: 0 auto;
	padding: 64px 0;
}

.scdocs-shell--full {
	grid-template-columns: minmax(0, 1fr);
}

.scdocs-wide {
	max-width: var(--site_width);
	margin: 0 auto;
	padding: 64px 0;
}

/* ---------------------------------------------------------------- rail -- */

/* --sc-rail-top is set by the script from the fixed header's live height, so
   the rail clears it at every breakpoint and with the admin bar showing. The
   fallback covers the moment before the script runs. */
.scdocs-rail {
	/* position: sticky;
	top: var(--sc-rail-top, 130px);
	align-self: start;
	max-height: calc(100vh - var(--sc-rail-top, 130px) - 24px);
	overflow-y: auto; */
	padding-right: 8px;
	position: relative;
}

.scdocs-shell .scdocs-rail:after {
    content: '';
    display: block;
    height: calc(100% + 128px);
    width: 1px;
    background-color: #D4D8DE;
    position: absolute;
    top: 50%;
    right: -28px;
    transform: translateY(-50%);
}

.scdocs .scdocs-rail-title {
	margin: 0 0 12px;
	font-family: 'Manrope' !important;
	font-weight: 500 !important;
	color: var(--sc-ink);
}

.scdocs .scdocs-tree + .scdocs-rail-title,
.scdocs .scdocs-topic + .scdocs-rail-title {
	margin-top: 34px;
}

.scdocs-topic {
	position: relative;
	display: flex;
	align-items: center;
}

.scdocs-rail .scdocs-topic + hr {
    width: calc(100% + 35px);
    height: 1px;
    border-color: #D4D8DE !important;
    background-color: #D4D8DE !important;
    margin: 48px 0;
    border-width: 0;
}

.scdocs .scdocs-topic-select {
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 0 36px 0 14px;
	font-family: inherit;
	font-size: 14px;
	color: var(--sc-ink);
	background: #fff;
	border: 1px solid var(--sc-rule);
	border-radius: 7px;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.scdocs-topic .scdocs-icon {
	position: absolute;
	right: 13px;
	pointer-events: none;
	color: var(--sc-ink-3);
	width: 14px;
	height: 14px;
}

/* -------------------------------------------------------- contents tree -- */

.scdocs .scdocs-tree,
.scdocs .scdocs-tree-children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.scdocs .scdocs-tree-children {
	margin-top: 2px;
	margin-left: 16px;
}

.scdocs .scdocs-tree-item {
	margin: 0;
	list-style: none;
}

.scdocs .scdocs-tree-item > a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 0;
	font-family: 'IBM Plex Mono';
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
    letter-spacing: 0.5px;	
	text-transform: uppercase;
	text-decoration: none;
	color: #01071F;
	border: 0;
	transition: color 0.12s ease;
}

span.scdocs-tree-label {
    padding-top: 2px;
}

.scdocs .scdocs-tree-item > a:hover {
	color: var(--sc-ink);
}

.scdocs .scdocs-tree-item > a .scdocs-icon {
	width: 16px;
	height: 16px;
	margin-top: 1px;
	color: #01071F;
}

.scdocs .scdocs-tree-item.is-current > a,
.scdocs .scdocs-tree-item.is-current > a .scdocs-icon {
	color: var(--sc-blue);
}

.scdocs .scdocs-tree-item.is-ancestor > a {
	color: var(--sc-ink);
}

/* Nested rows get the "└" marker from the design. */
.scdocs .scdocs-tree-children .scdocs-tree-item > a {
	padding-left: 18px;
	position: relative;
	color: #636B75;
}

.scdocs .scdocs-tree-children .scdocs-tree-item > a::before {
	content: "\2514";
	position: absolute;
	left: 2px;
	top: 11px;
	color: #636B75;
}

.scdocs .scdocs-tree-children .scdocs-tree-children .scdocs-tree-item > a {
	padding-left: 34px;
}

.scdocs .scdocs-tree-children .scdocs-tree-children .scdocs-tree-item > a::before {
	left: 18px;
}

/* ------------------------------------------------------------- article -- */

.scdocs-main {
	min-width: 0;
}

.scdocs .scdocs-back {
	display: none;
	align-items: center;
	gap: 8px;
	margin: 0 0 26px;
	padding: 0;
	font-family: 'IBM Plex Mono';
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none;
	color: #01071F;
	background: none;
	border: 0;
	cursor: pointer;
	
}

.scdocs .scdocs-back:hover {
	color: var(--sc-blue);
}

.scdocs .scdocs-back .scdocs-icon {
	transition: transform 0.15s ease;
}

.scdocs .scdocs-back[aria-expanded="true"] .scdocs-icon {
	transform: rotate(-90deg);
}

.scdocs .scdocs-article {
	margin: 0;
}

.scdocs .scdocs-article-title {
	margin: 0 0 26px;
	font-family: 'Manrope', sans-serif;
	font-size: clamp(29px, 3.2vw, 40px);
	font-weight: 500;
	line-height: 1.14;
	color: #01071F;
	text-wrap: balance;
}

/* Typography for weDocs article bodies. Three classes deep so it beats the
   child theme's .entry-content rules without reaching for !important. */
.scdocs .scdocs-main .entry-content,
.scdocs .scdocs-main .entry-content p {
	font-family: 'Manrope', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
	color: #636B75;
}

.scdocs .scdocs-main .entry-content > *:first-child {
	margin-top: 0;
}

.scdocs .scdocs-main .entry-content h1,
.scdocs .scdocs-main .entry-content h2,
.scdocs .scdocs-main .entry-content h3,
.scdocs .scdocs-main .entry-content h4 {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	color: #01071F;
	letter-spacing: -0.015em;
	border: 0;
	padding: 0;
}

.scdocs .scdocs-main .entry-content h2 {
	margin: 42px 0 14px;
	font-size: 25px;
	line-height: 1.25;
}

.scdocs .scdocs-main .entry-content h2:first-child {
	margin-top: 0;
	font-size: 25px;
	color: #01071F;
	border-bottom: 0;
	padding-bottom: 0;
}

.scdocs .scdocs-main .entry-content h3 {
	margin: 34px 0 12px;
	font-size: 19px;
	line-height: 1.3;
}

.scdocs .scdocs-main .entry-content h4 {
	margin: 28px 0 10px;
	font-size: 16px;
}

.scdocs .scdocs-main .entry-content a {
	color: #002FFF;
}

.scdocs .scdocs-main .entry-content a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.scdocs .scdocs-main .entry-content ul,
.scdocs .scdocs-main .entry-content ol {
	padding-left: 22px;
	margin: 0 0 20px;
}

.scdocs .scdocs-main .entry-content li {
	margin-bottom: 7px;
}

.scdocs .scdocs-main .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.scdocs .scdocs-main .entry-content iframe {
	max-width: 100%;
	border-radius: 6px;
}

.scdocs .scdocs-page-links {
	margin-top: 24px;
	font-family: var(--sc-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sc-ink-3);
}

/* ------------------------------------------------------------ meta bar -- */

.scdocs-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 56px;
	margin-bottom: 56px;
	padding-top: 18px;
	border-top: 1px solid var(--sc-rule);
}

.scdocs .scdocs-meta p {
	margin: 0;
	font-family: 'IBM Plex Mono';
	font-weight: 400;
	font-size: 14px;
	text-transform: uppercase;
	color: #01071F;
}

.scdocs .scdocs-meta a {
	color: #002FFF;
	text-decoration: none;
}

.scdocs .scdocs-meta a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------- cards -- */

.scdocs-cards {
	display: grid;
	grid-template-columns: repeat(var(--scdocs-cols, 3), minmax(0, 1fr));
	gap: 1px;
	background: var(--sc-rule);
	border: 1px solid var(--sc-rule);
	border-radius: 10px;
	overflow: hidden;
}

.scdocs-card {
	display: flex;
	flex-direction: column;
	padding: 26px 26px 24px;
	background: #fff;
}

.scdocs .scdocs-card-count {
	margin: 0 0 10px;
	font-family: var(--sc-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sc-ink-3);
}

.scdocs .scdocs-card-title {
	margin: 0 0 14px;
	font-family: 'Manrope' !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
}

.scdocs .scdocs-card-title a {
	color: var(--sc-ink);
	text-decoration: none;
}

.scdocs .scdocs-card-title a:hover {
	color: var(--sc-blue);
}

.scdocs .scdocs-card-list {
	flex: 1 1 auto;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.scdocs .scdocs-card-list li {
	margin: 0;
	padding: 3px 0;
	list-style: none;
}

.scdocs .scdocs-card-list a {
	font-size: 14px;
	line-height: 1.55;
	color: var(--sc-ink-2);
	text-decoration: none;
}

.scdocs .scdocs-card-list a:hover {
	color: var(--sc-blue);
}

.scdocs .scdocs-card-more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	font-family: var(--sc-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sc-blue);
}

.scdocs .scdocs-card-more .scdocs-icon {
	width: 13px;
	height: 13px;
}

.scdocs .scdocs-card-more:hover {
	color: var(--sc-blue-dark);
}

/* ------------------------------------------------------------- results -- */

.scdocs-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 30px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--sc-rule);
}

.scdocs .scdocs-pill {
	padding: 6px 15px;
	font-family: var(--sc-mono);
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sc-ink-2);
	background: #fff;
	border: 1px solid var(--sc-rule);
	border-radius: 999px;
	transition: color 0.12s ease, border-color 0.12s ease;
}

.scdocs .scdocs-pill:hover {
	color: var(--sc-ink);
	border-color: var(--sc-ink-3);
}

.scdocs .scdocs-pill.is-current {
	color: #fff;
	background: var(--sc-blue);
	border-color: var(--sc-blue);
}

.scdocs-result {
	padding: 22px 0;
	border-bottom: 1px solid var(--sc-rule-soft);
}

.scdocs-result:first-child {
	padding-top: 0;
}

.scdocs .scdocs-result-crumb {
	margin: 0 0 7px;
	font-family: var(--sc-mono);
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--sc-ink-3);
}

.scdocs .scdocs-result-title {
	margin: 0 0 7px;
	font-family: var(--sc-sans);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.scdocs .scdocs-result-title a {
	color: var(--sc-ink);
	text-decoration: none;
}

.scdocs .scdocs-result-title a:hover {
	color: var(--sc-blue);
}

.scdocs .scdocs-result-excerpt {
	margin: 0;
	max-width: 74ch;
	font-size: 15px;
	line-height: 1.65;
	color: var(--sc-ink-2);
}

.scdocs .scdocs-empty {
	padding: 40px 0;
	font-size: 16px;
	color: var(--sc-ink-2);
}

/* ---------------------------------------------------------- pagination -- */

.scdocs .scdocs-pagination,
.scdocs .navigation.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 42px;
	padding-top: 26px;
	border-top: 1px solid var(--sc-rule);
}

.scdocs .scdocs-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.scdocs .scdocs-page,
.scdocs .scdocs-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	font-family: var(--sc-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-decoration: none;
	color: var(--sc-ink-2);
	background: #fff;
	border: 1px solid var(--sc-rule);
	border-radius: 6px;
}

.scdocs .scdocs-page.is-current,
.scdocs .scdocs-pagination .page-numbers.current {
	color: #fff;
	background: var(--sc-blue);
	border-color: var(--sc-blue);
}

/* --------------------------------------------------------------- modal -- */

.scdocs-modal-backdrop {
	background: rgba(12, 16, 30, 0.5);
}

#wedocs-contact-modal.scdocs-modal {
	font-family: var(--sc-sans);
	border: 1px solid var(--sc-rule);
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(12, 16, 30, 0.18);
	overflow: hidden;
}

.scdocs-modal .scdocs-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--sc-rule);
}

.scdocs-modal .scdocs-modal-header h3 {
	margin: 0;
	font-family: var(--sc-sans);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--sc-ink);
}

.scdocs-modal .scdocs-modal-close {
	font-size: 22px;
	line-height: 1;
	color: var(--sc-ink-3);
	text-decoration: none;
}

.scdocs-modal .scdocs-modal-body {
	padding: 22px;
}

.scdocs-modal .scdocs-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
}

.scdocs-modal .scdocs-field label {
	font-family: var(--sc-mono);
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--sc-ink-3);
}

.scdocs-modal .scdocs-field input,
.scdocs-modal .scdocs-field textarea {
	width: 100%;
	padding: 10px 13px;
	font-family: inherit;
	font-size: 15px;
	color: var(--sc-ink);
	background: var(--sc-surface);
	border: 1px solid var(--sc-rule);
	border-radius: 7px;
}

.scdocs-modal .scdocs-modal-actions {
	margin: 0;
}

.scdocs-modal .scdocs-btn {
	padding: 11px 22px;
	font-family: var(--sc-sans);
	font-size: 15px;
	font-weight: 500;
	color: #fff;
	background: var(--sc-blue);
	border: 0;
	border-radius: 7px;
	cursor: pointer;
}

.scdocs-modal .scdocs-btn:hover {
	background: var(--sc-blue-dark);
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1260px) {
	.scdocs-wide,
	.scdocs-shell {
	    padding: 64px 30px;
	}
}

@media (max-width: 1024px) {
	.scdocs-hero {
		padding: 200px 24px 48px;
	}

	.scdocs-hero-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.scdocs-shell {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 34px 24px 64px;
	}

	.scdocs-wide {
		padding: 34px 24px 64px;
	}

	/* The rail is collapsed behind the back-control at this width. */
	.scdocs-rail {
		display: none;
	}

	.scdocs-shell.is-rail-open .scdocs-rail {
		display: block;
		margin-bottom: 8px;
		padding-right: 0;
	}

	.scdocs-shell .scdocs-rail:after {
		display: none;
	}

	.scdocs-rail .scdocs-topic + hr {
		width: 100%;
		margin: 28px 0;
	}

	.scdocs .scdocs-back {
		display: inline-flex;
		justify-self: start;
	}

	.scdocs-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.scdocs-hero {
		padding: 150px 20px 36px;
	}

	.scdocs-shell,
	.scdocs-wide {
		padding: 28px 20px 56px;
	}

	.scdocs-meta {
		padding-left: 20px;
		padding-right: 20px;
	}

	.scdocs-search {
		flex-wrap: wrap;
		max-width: none;
	}

	.scdocs .scdocs-search-field {
		flex: 1 1 100%;
		border-bottom: 1px solid var(--sc-rule);
	}

	.scdocs-search-scope {
		flex: 1 1 auto;
		border-left: 0;
		max-width: 100%;
	}

	.scdocs .scdocs-search-scope-select {
		width: 100%;
	}

	.scdocs-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.scdocs .scdocs-main .entry-content,
	.scdocs .scdocs-main .entry-content p {
		font-size: 15.5px;
	}

	.scdocs-meta {
		flex-direction: column;
		gap: 8px;
	}
}

@media print {
	.scdocs-hero,
	.scdocs-rail,
	.scdocs-back,
	.scdocs-meta,
	.scdocs-modal,
	.scdocs-modal-backdrop {
		display: none !important;
	}

	.scdocs-shell {
		display: block;
		padding: 0;
	}
}