/**
 * RelistKit Help Scout Docs stylesheet (2026-09-03). Paste into
 * Docs Settings -> Custom Code (inside <style> tags) or host and link.
 * Tokens mirror brand.md section 15 / the app's theme.js exactly:
 * navy #05445E (hover #032F42), ink #12282F, secondary #4E6673,
 * page #F3F6F8, borders #D6DFE4, soft fill #E4EEF3, radius 8-10.
 * Orange stays the wordmark's accent only - never a text color here.
 * Targets Help Scout Docs' standard markup (verified live on
 * help.relistkit.com): #mainNav.navbar, #docsSearch, #contentArea,
 * article#fullArticle, aside#sidebar, .most-pop-articles.
 */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&display=swap');

/* ---- Base ---------------------------------------------------------- */

body {
	background: #F3F6F8;
	color: #12282F;
	font-family: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a {
	color: #05445E;
}

a:hover,
a:focus {
	color: #032F42;
	text-decoration: underline;
}

/* ---- Top bar: white, like the app's ------------------------------- */

#mainNav.navbar .navbar-inner {
	background: #FFFFFF;
	background-image: none;
	border: 0;
	border-bottom: 1px solid #D6DFE4;
	box-shadow: none;
	filter: none;
	padding-bottom: 10px;
	padding-top: 8px;
}

#mainNav .nav > li > a {
	color: #4E6673;
	font-weight: 600;
	text-shadow: none;
}

#mainNav .nav > li > a:hover,
#mainNav .nav > li > a:focus {
	color: #05445E;
	background: transparent;
}

#mainNav .nav > li.active > a,
#mainNav .nav > .active > a:hover,
#mainNav .nav > .active > a:focus {
	color: #05445E;
	background: transparent;
	box-shadow: none;
	font-weight: 700;
}

/* The uploaded logo renders at its native size by default */
#mainNav .brand img {
	max-height: 44px;
	width: auto;
}

/* Admin-only Edit article button (never shown to readers) */
.admin-edit.btn,
.admin-edit.btn:hover {
	color: #FFFFFF !important;
}

#mainNav .caret {
	display: none;
}

/* ---- Search hero: the one navy brand moment ----------------------- */

#docsSearch {
	background: #05445E;
	padding: 44px 0 48px;
}

#docsSearch h1,
#docsSearch label {
	color: #FFFFFF;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-shadow: none;
}

#searchBar input,
#searchBar .search-query {
	background: #FFFFFF;
	border: 1px solid #D6DFE4;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(3, 47, 66, 0.25);
	color: #12282F;
	font-family: inherit;
	font-size: 16px;
	height: auto;
	padding: 12px 16px;
}

#searchBar input:focus {
	border-color: #05445E;
	box-shadow: 0 0 0 2px rgba(228, 238, 243, 0.9);
	outline: none;
}

#searchBar input::placeholder {
	color: #4E6673;
}

#docsSearch h1 {
	font-size: 26px;
	margin-bottom: 18px;
}

/* Sidebar/article search: a quiet borderless magnifier inside the field */
#searchBar button[type='submit'] {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: #4E6673;
	cursor: pointer;
}

#searchBar button[type='submit']:hover {
	background: transparent;
	color: #05445E;
}

/* Hero search button: the one white pill (Help Scout absolutely
   positions it; forced static to rejoin the flex row) */
#docsSearch #searchBar {
	align-items: stretch;
	display: flex;
	gap: 8px;
	justify-content: center;
}

#docsSearch #searchBar input,
#docsSearch #searchBar button[type='submit'] {
	margin: 0;
}

#docsSearch #searchBar button[type='submit'] {
	background: #FFFFFF;
	border: 1px solid #D6DFE4;
	border-radius: 8px;
	color: #05445E;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	padding: 12px 20px;
	position: static;
}

#docsSearch #searchBar button[type='submit']:hover {
	background: #E4EEF3;
}

#docsSearch #searchBar button[type='submit'] .icon-search {
	margin-right: 6px;
}

/* The search-suggestion dropdown */
#serp-dd {
	border: 1px solid #D6DFE4;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(18, 40, 47, 0.14);
	overflow: hidden;
}

#serp-dd .result a {
	color: #12282F;
}

#serp-dd .result li:hover,
#serp-dd .result li.selected {
	background: #E4EEF3;
}

/* ---- Home: collection tiles and popular articles ------------------ */

/* Help Scout's theme floats the tiles as inline-blocks at width 29% with
   0.8% side margins, three per row. Our padding and border were added on
   top of that width (content-box), so each tile outgrew 29%, only two fit
   per row, and the third column sat empty (Ryan, 2026-09-09). A grid
   owns the columns instead: three, then two under 768px, one under 600px,
   matching the theme's own breakpoints. */
.category-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 1em 0 2em;
}

.category-list .category,
.category-list.two-col .category {
	box-sizing: border-box;
	width: auto;
	margin: 0;
	display: block;
}

.category-list.two-col {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 768px) {
	.category-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.category-list,
	.category-list.two-col {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Help Scout emits an empty description paragraph for every category. */
.category-list .category p:empty {
	display: none;
}

.category,
.most-pop-articles {
	background: #FFFFFF;
	border: 1px solid #D6DFE4;
	border-radius: 10px;
	box-shadow: none;
	padding: 20px 22px;
	transition: box-shadow 0.15s ease;
}

.category:hover {
	box-shadow: 0 4px 16px rgba(18, 40, 47, 0.10);
	text-decoration: none;
}

.category h3,
.most-pop-articles h3 {
	color: #12282F;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0;
}

.category p,
.category .article-count {
	color: #4E6673;
	font-size: 14px;
}

.most-pop-articles h2 {
	color: #12282F;
	font-size: 18px;
	font-weight: 800;
	margin: 0 0 12px;
}

.most-pop-articles h3,
.most-pop-articles h4 {
	border-bottom: 1px solid #E4EEF3;
	color: #4E6673;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	padding-bottom: 8px;
	text-transform: uppercase;
}

.popArticles li {
	border: 0;
	padding: 4px 0;
}

.popArticles a {
	color: #05445E;
	font-weight: 600;
}

[class^='icon-'],
[class*=' icon-'] {
	color: #05445E;
}

/* ---- Article page -------------------------------------------------- */

/* ONE surface: .contentWrapper is the card (Ryan, round 2: the nested
   rounded box added nothing and crowded the print icon). */
#contentArea .contentWrapper {
	background: #FFFFFF;
	border: 1px solid #D6DFE4;
	border-radius: 10px;
	padding: 32px 38px 38px;
	position: relative;
}

#fullArticle {
	background: transparent;
	border: 0;
	padding: 0;
}

.printArticle {
	color: #7A919D;
}

.printArticle:hover {
	color: #05445E;
}

/* No last-updated stamp (Ryan, round 2) */
#fullArticle .lu,
.contentWrapper .lu,
#fullArticle time,
.articleFoot {
	display: none;
}

#fullArticle h1.title {
	color: #12282F;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
	/* Room between the title and the first line (Ryan, 2026-09-09): the
	   6px here had been copied from the category header, where a
	   description sits under the title; on an article the body follows. */
	margin-bottom: 26px;
}

#fullArticle h2 {
	color: #12282F;
	font-size: 21px;
	font-weight: 800;
	margin-top: 34px;
}

#fullArticle h3 {
	color: #12282F;
	font-size: 17px;
	font-weight: 700;
	margin-top: 26px;
}

#fullArticle p,
#fullArticle li {
	color: #12282F;
	font-size: 16px;
	line-height: 1.65;
}

#fullArticle img {
	border: 1px solid #D6DFE4;
	border-radius: 8px;
	max-width: 100%;
}

#fullArticle blockquote {
	background: #E4EEF3;
	border-left: 4px solid #05445E;
	border-radius: 8px;
	color: #12282F;
	margin: 20px 0;
	padding: 14px 18px;
}

#fullArticle blockquote p {
	margin: 0;
}

#fullArticle code {
	background: #E4EEF3;
	border-radius: 5px;
	color: #032F42;
	font-size: 14px;
	padding: 2px 6px;
}

#fullArticle pre {
	background: #12282F;
	border: 0;
	border-radius: 8px;
	color: #F3F6F8;
	padding: 16px 18px;
}

#fullArticle table {
	border: 1px solid #D6DFE4;
	border-collapse: separate;
	border-radius: 8px;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}

#fullArticle th {
	background: #F3F6F8;
	color: #4E6673;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	padding: 10px 14px;
	text-align: left;
	text-transform: uppercase;
}

#fullArticle td {
	border-top: 1px solid #E4EEF3;
	padding: 10px 14px;
}

/* Heading anchor links Help Scout injects */
#fullArticle .anchor-link {
	color: #7A919D;
}

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

#serp .articlesFound {
	color: #4E6673;
	font-size: 14px;
	margin-bottom: 10px;
}

/* Article rows (category pages and search results): the whole row is the
   link, a soft navy fill on hover instead of an underline, a chevron that
   nudges right (Ryan, 2026-09-09: the underline hover was off-brand). */
.contentWrapper .articleList {
	font-size: 16px;
	margin: 0;
}

.contentWrapper .articleList li {
	border-bottom: 1px solid #E4EEF3;
	margin: 0;
	padding: 0;
}

.contentWrapper .articleList li:last-child {
	border-bottom: 0;
}

.contentWrapper .articleList a {
	align-items: center;
	border-radius: 8px;
	color: #12282F;
	display: flex;
	font-size: 16px;
	font-weight: 700;
	gap: 12px;
	line-height: 1.4;
	margin: 0 -12px;
	padding: 14px 12px;
	position: relative;
	transition: background 0.15s ease, color 0.15s ease;
}

.contentWrapper .articleList a:hover,
.contentWrapper .articleList a:focus {
	background: #E4EEF3;
	color: #05445E;
	text-decoration: none;
}

.contentWrapper .articleList a:hover span,
.contentWrapper .articleList a:focus span {
	text-decoration: none;
}

.contentWrapper .articleList a:focus-visible {
	outline: 2px solid #05445E;
	outline-offset: 2px;
}

.contentWrapper .articleList a .icon-article-doc,
.contentWrapper .articleList a .icon-article-arrow,
.contentWrapper .articleList a .icon-private-w {
	color: #7A919D;
	flex: 0 0 auto;
	margin: 0;
	position: static;
	top: auto;
}

.contentWrapper .articleList a:hover .icon-article-doc,
.contentWrapper .articleList a:hover .icon-article-arrow {
	color: #05445E;
}

.contentWrapper .articleList a > span {
	flex: 1 1 auto;
}

/* Chevron on the right, drawn from borders so it inherits the row color. */
.contentWrapper .articleList a::after {
	border-right: 2px solid #7A919D;
	border-top: 2px solid #7A919D;
	content: "";
	flex: 0 0 auto;
	height: 8px;
	margin-left: auto;
	transform: rotate(45deg);
	transition: transform 0.15s ease, border-color 0.15s ease;
	width: 8px;
}

.contentWrapper .articleList a:hover::after,
.contentWrapper .articleList a:focus::after {
	border-color: #05445E;
	transform: translateX(3px) rotate(45deg);
}

.contentWrapper .articleList p {
	color: #4E6673;
	font-size: 14px;
	margin: 4px 0 0;
}

/* ---- Category pages ------------------------------------------------ */

.contentWrapper {
	border-color: #D6DFE4;
	border-radius: 10px;
	color: #12282F;
}

#categoryHead {
	border-bottom: 1px solid #D6DFE4;
	margin-bottom: 8px;
	padding-bottom: 16px;
}

#categoryHead h1 {
	color: #12282F;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 6px;
}

#categoryHead .descrip {
	color: #4E6673;
	font-size: 15px;
	margin: 0;
}

/* Help Scout emits the description paragraph even when it is empty. */
#categoryHead .descrip:empty {
	display: none;
}

#categoryHead .sort {
	top: 2px;
}

select#sortBy {
	background: #FFFFFF;
	border: 1px solid #D6DFE4;
	border-radius: 8px;
	color: #12282F;
	font-family: inherit;
	font-size: 14px;
	height: 34px !important;
	line-height: 20px !important;
	padding: 6px 10px;
}

/* ---- Sidebar (related articles, categories) ------------------------ */

#sidebar {
	font-size: 14px;
}

#sidebar h3,
#sidebar .sb-title {
	color: #4E6673;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

#sidebar a {
	color: #05445E;
	font-weight: 600;
}

#sidebar li {
	border: 0;
	padding: 3px 0;
}

/* Category nav: the app's nav treatment, a soft navy fill for hover and
   the current category, no underline, the theme's arrow icon retired. */
#sidebar .nav-list li {
	margin: 0;
	padding: 0;
}

#sidebar .nav-list a,
#sidebar .nav-list .active a {
	border-radius: 8px;
	color: #4E6673;
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	margin: 2px -10px;
	padding: 7px 10px;
	transition: background 0.15s ease, color 0.15s ease;
}

#sidebar .nav-list a:hover,
#sidebar .nav-list a:focus {
	background: #E4EEF3;
	color: #05445E;
	text-decoration: none;
}

#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus {
	background: #E4EEF3;
	color: #05445E;
	font-weight: 800;
}

#sidebar .nav-list a .icon-arrow,
#sidebar .nav-list .active a .icon-arrow {
	display: none;
}

#sidebar .nav-list a:focus-visible {
	outline: 2px solid #05445E;
	outline-offset: 2px;
}

/* Sidebar search on brand: input tokens, navy focus ring. */
#sidebar form .search-query {
	border: 1px solid #7A919D;
	border-radius: 8px;
	color: #12282F;
	font-family: inherit;
	height: 40px;
	padding: 8px 36px 8px 12px;
}

#sidebar form .search-query:focus,
#sidebar form .search-query:focus:invalid {
	border-color: #05445E;
	box-shadow: 0 0 0 3px rgba(5, 68, 94, 0.15);
	outline: none;
}

#sidebar form button .icon-search {
	color: #7A919D;
}

/* Popular-article links on the home page follow the same rule: no underline. */
.most-pop-articles .popArticles a:hover,
.most-pop-articles .popArticles a:focus {
	color: #032F42;
	text-decoration: none;
}

/* ---- Buttons and misc ---------------------------------------------- */

.btn,
.btn-primary,
input[type='submit'] {
	background: #05445E;
	background-image: none;
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	color: #FFFFFF;
	font-family: inherit;
	font-weight: 700;
	padding: 9px 18px;
	text-shadow: none;
}

.btn:hover,
.btn-primary:hover,
input[type='submit']:hover {
	background: #032F42;
	color: #FFFFFF;
}

.pagination a {
	border-color: #D6DFE4;
	color: #05445E;
}

.pagination .active a {
	background: #05445E;
	color: #FFFFFF;
}

footer,
.footer,
#footer {
	color: #4E6673;
	font-size: 13px;
}

hr,
.sep {
	border-color: #E4EEF3;
}