/*
 * CSS for custom styling a Knowledge Base.
 * Current file is used for styling Help Scout.
 */

/*------------------------------------*\
	$FONTS
\*------------------------------------*/

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	/* font-display: swap; */
	src: url("https://www.gigsalad.com/css/fonts/inter/Inter-Regular.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 400;
	/* font-display: swap; */
	src: url("https://www.gigsalad.com/css/fonts/inter/Inter-Italic.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	/* font-display: swap; */
	src: url("https://www.gigsalad.com/css/fonts/inter/Inter-Medium.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 500;
	/* font-display: swap; */
	src: url("https://www.gigsalad.com/css/fonts/inter/Inter-MediumItalic.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	/* font-display: swap; */
	src: url("https://www.gigsalad.com/css/fonts/inter/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 600;
	/* font-display: swap; */
	src: url("https://www.gigsalad.com/css/fonts/inter/Inter-SemiBoldItalic.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	/* font-display: swap; */
	src: url("https://www.gigsalad.com/css/fonts/inter/Inter-Bold.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 700;
	/* font-display: swap; */
	src: url("https://www.gigsalad.com/css/fonts/inter/Inter-BoldItalic.woff2") format("woff2");
}

/*------------------------------------*\
	$BASE STYLES
\*------------------------------------*/

body,
input, button, select, textarea {
	font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
	font-weight: 500;
}

strong,
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}

/*------------------------------------*\
	$HEADER
\*------------------------------------*/

#mainNav a.brand {
	padding: 12px 0;
	height: 32px;
	width: 146px;
	background-image: url("https://cress.gigsalad.com/images/logo-icon-text.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 146px 32px;
}
#mainNav a.brand img {
	display: none;
}

@media (min-width: 768px) {
	#mainNav a.brand {
		padding-top: 24px;
		background-position: 0px 24px;
	}
}

/*------------------------------------*\
	$NAVIGATION
\*------------------------------------*/

/*
 * Make the navigation look something like it does on the live site.
 */

.navbar .nav li a {
	font-size: 15px;
	font-family: Circular, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #2a2e2f;
}

	/*
	 * 1. Redundant, but overrides Help Scout's default hover color.
	 */

	.navbar .nav li a:hover {
		color: #2a2e2f; /* 1 */
	}

	body:has(#docsSearch) .navbar .nav .active .caret {
		border-bottom-color: #4e027c;
	}

/*------------------------------------*\
	$FORMS
\*------------------------------------*/

label,
input,
button,
select,
textarea,
.btn {
	font-size: 14px;
}

/*
 * 1. To account for the change in font size.
 */

.form-horizontal .control-label {
	padding-top: 4px; /* 1 */
}

/*------------------------------------*\
	$STYLE OVERRIDES
\*------------------------------------*/

#docsSearch {
	padding: 24px 0;
	background-color: #4e027c;
}

	#docsSearch h1 {
		font-size: 36px;
		font-weight: 700;
		line-height: 1em;
		margin-top: 0;
		margin-bottom: 12px;
		color: #ffffff;
	}

#searchBar {
	display: flex;
	width: auto;
	max-width: 1080px;
	padding: 0 12px;
}

	#searchBar .search-query {
		flex: 1 1 0%;
		height: 60px;
		border: none;
		border-radius: 8px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	#searchBar button {
		position: inherit;
		top: 0;
		right: 0;
		height: 60px;
		background: #8b26d9;
		border: none;
		transition: background 150ms ease-in-out;
		border-radius: 8px;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	#searchBar button:hover {
		background: #751cb5;
	}

	#searchBar button .icon-search {
		color: #ffffff;
	}

	@media (max-width: 480px) and (max-width: 768px){
		#searchBar button .icon-search {
			line-height: 30px;
		}
	}

#serp-dd {
	padding: 4px 0;
	border-radius: 8px;
	border: 0;
	width: calc(100% - 24px);
}

.contentWrapper h1,
.collection-category h2 {
	font-weight: 700;
}

.category-list h3 {
	font-weight: 500;
}

.category-list .category {
	background: #ffffff;
}
.category-list .category:first-child {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
.category-list .category:last-child {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

@media (min-width: 768px) {
	.category-list .category {
		border-radius: 8px;
	}
}

#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table,
#fullArticle .callout-yellow p,
#fullArticle .callout-blue p,
#fullArticle .callout-red p {
	font-size: 16px;
}

#fullArticle h5 {
    font-size: 16px;
}

#sidebar h3,
#sidebar .nav-list a {
	font-size: 14px;
}

#serp-dd .result a {
	font-size: 16px;
}

/* Improvement for mobile clickability of links in lists */
/* Done to address a Google mobile indexing alert from 2019-03-28 */
.articleList li {
	padding-top: 1em;
	padding-bottom: 1em;
	margin: 0;
}

/*
 * 1. Help Scout already has an !important on this one.
 */

.appMessage,
.appMessage em {
	font-size: 16px!important; /* 1 */
}

.appMessage em {
	padding: 6px 12px;
	background: #5ccf84;
}