{{- $highlightColor := .Site.Params.style.vars.highlightColor | default (.Site.Params.highlightColor | default "#e22d30") -}}

/* open-sans-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

{{- $fontSans := `"Open Sans", Helvetica, Arial, sans-serif` -}}
{{- $fontMono := `SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace` -}}
{{- $fontFamilyPrimary := .Site.Params.style.vars.fontFamilyPrimary | default $fontSans -}}
{{- $fontFamilySecondary := .Site.Params.style.vars.fontFamilySecondary | default $fontMono -}}

/* Font size */
.content, .toc {
	font-size: 18px;
	line-height: 1.6;
}

.authorbox__name {
	font-size: 18px;
}

.authorbox__description {
	font-size: 15px;
}

.list__excerpt {
	font-size: 14px;
}



/* content sidebar layout */
.primary {
	-webkit-flex: 1 0 75.83%;
	flex: 1 0 75.83%;
	-webkit-order: 1;
	order: 1;
	min-width: 0;
}

.sidebar {
	-webkit-flex: 1 0 21.66%;
	flex: 1 0 21.66%;
	-webkit-order: 2;
	order: 2;
	min-width: 0;
	margin: 0 0 0 2.5%;
}

.sidebar--left {
	-webkit-order: 0;
	order: 0;
	margin: 0 2.5% 0 0;
}

.logo {
    padding: 5px 25px 5px 25px;
}


/* Header social icons */
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2a2a2a;
}

.social-icons {
    display: flex;
    margin-left: auto;
    padding: 5px 25px 5px 5px;
    color: #fff;
}

.social-icon {
    width: 18px;
    height: 18px;
    margin-left: 10px;
    fill: #fff;
}

.social-icon:hover svg {
    fill: #e22d30; /* New icon color on hover */
}

.social-icon svg {
    width: 100%;
    height: 100%;
    fill: #fff;
}

/* Social Sharing */
.social-share {
	position: relative;
	top: -0.5em;
}
 
.social-share ul {
	margin: 0;
}
 
.social-share ul li p {
	display: none;
}
 
.social-share .share-icons li {
	padding: 0 !important;
	padding-bottom: 10px !important;
}
 
.social-share .share-btn {
	padding: 0.25em;
	width: 3em;
}
 
.social-share-nav .share-btn h3{
	color: #ffffff;
}

ul.share-icons {
	cursor: default;
	list-style: none;
	padding-left: 0;
	margin-top: 1em;
}

ul.share-icons li {
	display: inline-block;
	padding: 0 1em 0 0;
}

ul.share-icons li:last-child {
	padding-right: 0;
}

ul.share-icons li > * {
	text-decoration: none;
	border: 0;
}

ul.share-icons li > *:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-transform: none !important;
}

ul.share-icons li > * .label {
	display: none;
}
 
.share-btn {
	display: inline-block;
	color: #ffffff;
	border: none;
	border-radius: 4px;
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
	outline: none;
	text-align: center;
	text-decoration: none;
}
 
.share-btn:hover {
	color: #ffffff !important;
}

.share-btn:active {
	position: relative;
	top: 2px;
	box-shadow: none;
	color: #e2e2e2;
	outline: none;
}
.share-btn .widget-social__link-icon {
	margin: 0;
}
 
.share-btn.twitter     { background: #55acee; }
.share-btn.google-plus { background: #dd4b39; }
.share-btn.facebook    { background: #3B5998; }
.share-btn.linkedin    { background: #4875B4; }
.share-btn.stumbleupon { background: #EB4823; }
.share-btn.pinterest   { background: #BD081C; }
.share-btn.reddit      { background: #ff5700; }
.share-btn.email       { background: #444444; }
.share-btn.whatsapp    { background: #25d366; }


.share-btn.twitter:hover     { background: #4c9ad6; }
.share-btn.google-plus:hover { background: #c64333; }
.share-btn.facebook:hover    { background: #2f4779; }
.share-btn.linkedin:hover    { background: #4069a2; }
.share-btn.stumbleupon:hover { background: #d3401f; }
.share-btn.pinterest:hover   { background: #AD0000; }
.share-btn.reddit:hover      { background: #e54e00; }
.share-btn.email:hover       { background: #363636; }

/* Footer */

.footer__container {
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: center;
	justify-content: center;
}

.footer__copyright {
    text-align: center;
}

/* copy code button */
.highlight {
	font-size: 14px;
}

.copy-code-button {
    color: #272822;
    background-color: #FFF;
    border-color: #272822;
    border: 2px solid;
    border-radius: 3px 3px 0px 0px;

    /* right-align */
    display: block;
    margin-left: auto;
    margin-right: -0.8rem;
	margin-top: -0.8rem;
    margin-bottom: 0;
    padding: 3px 8px;
    font-size: 0.8em;
}

.copy-code-button:hover {
    cursor: pointer;
    background-color: #F2F2F2;
}

.copy-code-button:focus {
    /* Avoid an ugly focus outline on click in Chrome,
       but darken the button for accessibility.
       See https://stackoverflow.com/a/25298082/1481479 */
    background-color: #E6E6E6;
    outline: 0;
}

.copy-code-button:active {
    background-color: #D9D9D9;
}