/*
Theme Name: markn.ca
Theme URI: https://markn.ca
Author: Mark Nunnikhoven
Author URI: https://markn.ca
Description: The 2022 theme for markn.ca
Version: 3.0.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: fast, customer
Text Domain: marknca
*/

:root {
	--color-bg: #FDFDFD; /* off white */
	--color-fg: #00202A; /* off black */
	--color-highlight-3: #BDED5B; /* green ! adjusted to a darker shade */
	--color-highlight-2: #5E50B5; /* blue */
	--color-highlight: #96277A; /* pink */
	--color-shadow: #565151; /* grey */
	--color-shadow-50: rgba(56, 51, 51, .5); /* grey */
	--color-shadow-2: #2C2A2A; /* dark grey */
	--color-shadow-3: #B2B1B3; /* mid grey */
	--color-shadow-3-50: rgba(178, 177, 179, .5); /* mid grey */
	--color-shadow-4: #D0D0D0; /* very light grey */
	--color-shadow-4-50: rgba(208, 208, 208, .5); /* very light grey */
	--sans: "Lato-Regular", "Lucida Grande", sans-serif;
	--sans-heavy: "Lato-Heavy", "Lucida Grande", sans-serif;
	--mono: "CodeNext", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}
html {
	font-display: swap;
	-webkit-text-size-adjust: none;
	max-width: -webkit-fill-available;
	min-width: 390px; /* -webkit-fill-available; */
}
@font-face {
	font-display: swap;
	font-family: "Lato-Regular";
	src: url('/media/fonts/lato-regular.woff2') format('woff2')
}
@font-face {
	font-display: swap;
	font-family: "Lato-Heavy";
	src: url('/media/fonts/lato-heavy.woff2') format('woff2')
}

body {
	background: var(--color-bg);
	color: var(--color-fg);
	font-display: swap;
	font-family: var(--sans);
	font-size: 20px;
	-webkit-font-smoothing: antialiased;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	letter-spacing: 0.02rem;
	line-height: 1.725rem;
	min-width: 320px;
	padding: 1rem 2rem 1rem 2rem;
}
img {
  height: auto;
  width: 100%;
}
.right { text-align: right !important; }
.left { text-align: left !important; }
.center { text-align: center !important; }
.push-bottom { margin-bottom: 2rem; }

h1, h2, h3, h4, h5 {
	font-family: var(--sans-heavy);
	margin-bottom: 0.4rem;
}
h2 {
	
}
h1+h1, h2+h2, h3+h3 {
	color: var(--color-shadow-2);
	font-family: var(--sans-light);
	font-size: 1.1rem;
	margin-bottom: 0px;
	margin-top: 0rem;
}
h2+h2 { 
	font-size: 1rem;
	margin-top: -0.4rem;
}
h3+h3 {
	font-size: 0.8rem;
	margin-top: -0.4rem;
}
h1.site-title {
	font-size:  2.2rem;
}
h1.site-title+h1 {
	margin-bottom:  1rem;
}
h1.archive-title + h2 {
	font-size: 1rem;
	font-weight: 400;
	margin-top: 0.2rem;
}
h1 img, p.metadata img {
	margin-left: 0.1rem;
	margin-right: 0.2rem;
	vertical-align: middle;
	width: 16px;
}
h1+p { margin-top: 0.6rem; }
h2.long-list {
	border-left: 3px solid var(--color-highlight);
	padding-left: 1rem;
}
h3+p, h3+ul { margin-top: -0.2rem; }
h3+h3.rating {
	font-size: 0.8rem;
	font-weight: 200;
	margin-top: -0.2rem;
	vertical-align: middle;
}
h3.rating span {
	color: var(--color-shadow-50);
	margin: 0px;
	padding-right: 0.4rem;
}
h3.rating img {
	margin-left: 0px;
	margin-right: 0px;
	vertical-align: middle;
}
h1+p.metadata, p.metadata {
	color: var(--color-shadow-3);
	font-family: var(--sans-light);
	font-size: 1rem;
	margin-bottom: 0px;
	margin-top: 0rem;
}
h1+p.metadata {
	margin-bottom: 1rem;
}
p.metadata { font-size: 0.8rem; }
p.highlight {
	border-bottom: 1px solid var(--color-highlight-1-25);
	border-top: 1px solid var(--color-highlight-1-25);
	padding:  0.2rem 0rem 0.2rem 0rem;
}
h2+p { margin-top: 0.6rem; }
p.metadata img { width: 18px; }
p.metadata a:link { 
	border-color: var(--color-shadow-2);
	color: var(--color-shadow-2);
}
p.metadata a:visited { 
	border-color: var(--color-shadow-3);
	color: var(--color-shadow-3);
}
p.metadata span:first-child { margin-right: 0.4rem; }
p.metadata span:last-child { margin-left: 0.4rem; }
p.note {
	border-left: 3px solid var(--color-shadow-2);
	padding-left: 1rem;
	font-style: italic;
}
a {
	border-bottom: 1px solid;
	padding-bottom: -1rem;
	text-decoration: none;
}
a:link {
	border-color: var(--color-highlight);
	color: var(--color-highlight);
}
a:visited {
	border-color: var(--color-highlight-2);
	color: var(--color-highlight-2);
}
a.no-border, a.social-icon { border: 0px; }
a.social-icon img {
	height: 1.8rem !important;
	margin-right: 4px;
	margin-top: -0.2rem;
	padding: 0.2rem;
	vertical-align: middle;
	width: 1.8rem !important;
}
h2+h2 { margin-top: 0.6rem; }
div.social a { 
	border: 0px; 
	margin-right: 0px;
}
blockquote, p.attribution {
	border-left: 3px solid var(--color-shadow-3);
	margin-left: 0px;
	padding-left: 0.6rem;
}
img.hero {
	max-width: 100%;
	min-width: 100%;
	width: 100%;
}
img.icon {
	margin-right: 0.4rem;
	vertical-align: middle;
	width: 18px;
}
figcaption {
	font-family: var(--sans);
	font-size: 0.8rem;
	opacity: 0.7;
	text-align: center;
}
li div img {
	margin-left: 0.2rem;
	margin-right: 0.2rem;
	vertical-align: middle;
	width: 18px;
}
p.navigation { }
p.navigation b {
	font-family: var(--sans-light);
	font-size: 0.8rem;
	text-transform: uppercase;	
}
ul, ol, dl {
	margin-left: 0px;
	padding-left: 1rem;
}
ul, dl { list-style: none; }
ul li::before {
	content: "\2022"; 
	color: var(--color-shadow-3-50);
	display: inline-block;
	font-weight: bold;
	width: 1rem;
	margin-left: -1rem;
}
ul + ul {
	margin-top: 0.4rem;
}
li { margin-bottom: 0.6rem; }
li p.metadata { margin-top: 0.2rem; }
li p:first-child { display: inline; }
li p:first-child strong { margin-left: -0.2rem; }
ul+a:first-child::after { 
	border: 0px solid #fff;
	content: "\00A0";
	margin-top: 4rem; 
	text-decoration: none;
}
p.disclaimer {
	color: var(--color-shadow-2);
	font-size: 0.8rem;
	margin-top: 0.2rem;
}
p.cta {}
p.cta img {
	margin-right: 0.4rem;
	margin-top: -0.2rem;
	vertical-align: middle;
	width: 18px;
}
p.in-page-link {
	font-size: 0.8rem;
	text-align: right;
}
.in-line-note {
	color: var(--color-shadow);
	font-size: 0.8rem;
	opacity: 0.8;
}
div.tags ul { padding-left: 0px; }
div.tags ul li::before {
	content: "";
	width: 0px;
	margin-left: 0px;
}
div.tags ul li {
	display: inline;
	line-height: 2rem;
	margin-right: 1.2rem;
}
code {
	background-color: var(--color-shadow-4-50);
	padding: 0.26rem;
}
dl {
	margin-left: 0px;
	padding-left: 0px;
}
dt {
	font-weight: 800;
}
dd {
	margin-bottom: 0.6rem;
	margin-inline-start: 1rem;
}
table {
	width: 100%;
}
table, th, td {
  border: 1px solid black;
  border-color: var(--color-shadow-4-50) !important;
  padding: 0.4rem;
}

div.grid div.list-group {
	border-top: 3px solid var(--color-highlight);
	vertical-align: middle;
}
div.grid div.list-group h2 {
	margin-top: 0.6rem;
}
div.grid div.list-item {
	border-left: 1px solid var(--color-shadow-4-50);
	padding-left: 0.4rem;	
}
div.grid div h2 {
	line-height: 2.0rem;
}
div.grid-search {
	display: grid;
	grid-gap: 0.2rem;
	grid-template-columns: 1fr;
	margin-bottom: 1rem;
	margin-left: auto;
	margin-right: auto;
	max-width: 1152px;
}
div.grid-list {
	display: grid;
	grid-gap: 0.2rem;
	grid-template-columns: 6rem auto;
}
div.grid-list div {
	align-content: middle;
}
div.grid-list p.metadata {
	font-weight: 200;
	font-size:  0.65rem;
	margin-top: -0.2rem;
}
div.grid-list p.metadata img {
	width: 12px;
}
div.grid-list p.metadata+p.metadata {
	margin-top: -0.5rem;
}
div.grid-list a:first-child {
	font-family: var(--sans-light);
	letter-spacing: -0.02rem;
}

article, .article-size {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
article h1:first-child { margin-top: 0px !important; }

/* Custom Twitter threads */
div.tweet {
	border-bottom: 1px solid var(--color-shadow-3-50);
	margin-bottom: 1rem;
	padding-bottom: 2rem;
}
div.tweet img {
	maring-bottom: 1rem !important;
	margin-top: 1rem;
	max-width: 100% !important;
	width: auto !important;
}
div.tweet p.tweet-link, p.tweet-position {
	font-family: var(--sans);
	font-size: 0.6rem;
	text-align: right;
}
div.tweet p.tweet-link img {
	border-radius: 50%;
	margin-right: 0.4rem;
	margin-top: 0px;
	vertical-align: middle;
	width: 24px !important;
}
div.tweet p + p.tweet-link {
	margin-top: -1.2rem;
}
p.tweet-position {
	text-align: left;
}
p.tweet-position a + span {
	border-left: 1px solid var(--color-shadow-3-50);
	margin-left: 0.4rem;
	padding-left: 0.2rem;
}

/* IFRAME EMBEDS */
/* 16:9 aspect ratio respecting iframe */
/* from https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe/ */
div.ratio {
  padding-top: 56.25% !important;
  position: relative !important;
  text-align: center !important;
}
div.ratio iframe {
  height: 100% !important;
  left: 0 !important;
  position: absolute !important;
  top: 0 !important;
  width: 100% !important;
}

/* YouTube streamlined embeds */
/* from https://www.labnol.org/internet/light-youtube-embeds/27941/ */
.youtube-player {
	position: relative;
	padding-bottom: 56.25%;
	height: 405px;
	overflow: hidden;
	min-width: 380px;
	min-height: 213.75px;
	max-width: 100%;
	background: #000;
	margin: 5px;
	width: 100%;
	text-align: center;
}
.youtube-player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	background: transparent;
}
.youtube-player img {
	object-fit: contain;
	display: block;
	left: 0;
	bottom: 0;
	margin: auto;
	max-width: 100%;
	width: 100%;
	position: absolute;
	right: 0;
	top: 0;
	border: none;
	height: auto;
	cursor: pointer;
	-webkit-transition: 0.4s all;
	-moz-transition: 0.4s all;
	transition: 0.4s all;
}
.youtube-player img:hover {
	-webkit-filter: brightness(75%);
}
.youtube-player .play {
	height: 72px;
	width: 72px;
	left: 50%;
	top: 50%;
	margin-left: -36px;
	margin-top: -36px;
	position: absolute;
	background: url('//i.imgur.com/TxzC70f.png') no-repeat;
	cursor: pointer;
}

#search_form input[type=text] {
	font-size: 1rem;
	width: 18rem;
}
form.search {
	font-family: var(--sans-light);
	font-size: 1.1rem;
	margin-bottom: 1rem;
	margin-top:  -1rem;
}
form.search label {	
	font-family: var(--sans);
}
form.search input[type=text] {
	background-color: var(--color-bg) !important;
	border-color: var(--color-shadow) !important;
	border-radius: 8px;
	border-width: 1px;
	display: block;
	margin-bottom: 0.4rem;
	padding: 0.6rem;
	width: 100% !important;
}
form.search p.metadata {
	margin-bottom:  0rem;
	margin-top: -0.4rem;
}
form.search input[type=text]:focus { border-radius: 8px !important; }
form.search input[type=button], #submitSearchMainForm {
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	border-radius: 8px;
	border-width: 1px;
	margin-top: 0.4rem;
	padding: 0.8rem;
	text-transform: uppercase;
}
div#search-results {}
div#search-results ul li img {
	width:  2rem;
}

header, footer, div.grid {
	margin-left: auto;
	margin-right: auto;
	max-width: 1024px;
	width: auto;
}

header, div.breadcrumbs {
	display: grid;
	font-family: var(--sans);
	font-size: 0.8rem;
	text-transform: uppercase;
	grid-template-columns: 1fr 1fr 1fr;
	margin-bottom: 0.4rem;
	margin-top: -1rem;
	position: relative;
}
ul#current-breadcrumbs li {
	display: inline;
	font-size: 0.6rem;
	margin-right: 1rem;
	padding-right: 0.5rem;
}
header div {
	padding: 0.4rem;
}
header div:first-child { text-align: left; }
header div:first-child img { 
	margin-top: -0.2rem;
	vertical-align: middle;
	width: 8rem; 
}
header div a { 
	margin-right: 0.4rem; 
	padding: 0px 0.1rem 0px 0.1rem !important;
}
header div:nth-child(2) { text-align: right; }
header div:last-child { text-align: right; }
header div:last-child a { 
	border: 0px; 
	margin-right: 0px;
}
div.grid-search div img {
	height: 1rem;
}
div.grid-search div form {
	margin-bottom: 1rem;
}
div.grid-search div form input[type=text], #searchTermInput {
	border: 1px solid var(--color-shadow-3-50);
	border-radius: 6px;
	margin-bottom: 0.4rem;
	padding: 0.4rem;
	vertical-align: middle;
}
#submitSearch {
	background-color:  var(--color-bg) !important;
	border-width: 0px !important;
  cursor: pointer;
  margin-left: -0.1rem;
  margin-top: -0.1rem;
  padding: 0.4rem !important;
  vertical-align: middle;
  width: 48px;
}
div.play-button {
  display: inline-block;
  height: 100% !important;
  position: relative;
  width: 100% !important;
}
div.play-button img {
	opacity: 0.5;
	width: 100%;
}
div.play-button:after {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 96px;
  height: 96px;
  background: url('/media/icons/streamline/streamline-icon-play-cloud.svg');
  background-size: cover;
  content: '';
}
div.remove-play-button:after { background-image: none !important; }

.two-col-span-full { grid-column: span 2 !important; }
.three-col-span-full { grid-column: span 3 !important; }
.three-col-span-two { grid-column: span 2 !important; }
.negative-margin-top { margin-top: -0.6rem; }
footer {
	display: grid;
	font-size: 0.8rem;
	grid-template-columns: 1fr 1fr 1fr;
	margin-top: 1rem;
	position: relative;
}
footer div {
	padding: 0.4rem;
}
footer a {
	border: none;
	margin: 0.8rem;
	padding: 1rem;
}

div.grid {
	display: grid;
	grid-gap: 2rem;
	grid-template-columns: 1fr 1fr 1fr;
	margin-bottom: 1rem;
	position: relative;
}
div.grid div {
	padding: 0.4rem;
}
div.grid div.grid {
	padding: 0rem;
}
div.grid div img { width: auto !important; max-width: 100%; }
div.grid div p:first-child { margin-top: 0px; }
div.grid div a img {
	border-radius: 1rem;
}
div.featured {}
div.featured img {
	height: calc(100% * 0.4 + 1rem);
	object-fit: cover;
}
img.no-round {
	border-radius: 0px !important;
}
div.grid-slides div p img {
	width: 64px !important;
}
div.shorts, div.article { grid-template-columns: 1fr 2fr; }
div.single { grid-template-columns: 1fr; }
div.list { grid-template-columns: 1fr 1fr; }
div.slides { grid-template-columns: 1fr 1fr; }

@media only screen and (min-width : 128px) { /* Phones */
	header { grid-template-columns: 1fr; }
	header div { text-align: center; }
	header div:first-child { text-align: center; }
	header div:nth-child(2) { text-align: center; }
	header div:last-child { text-align: center; }
	footer { grid-template-columns: 1fr; }
	div.grid { grid-template-columns: 1fr; }
	div.shorts { grid-template-columns: 1fr; }
	div.shorts div:first-child { text-align: center; }
	div.slides { grid-template-columns: 1fr; }
	div.article { grid-template-columns: 1fr; }
	div.article div:first-child {
		grid-column-start: 1;
		grid-row-start: 2;
	}
	div.single { grid-template-columns: 1fr; }
	div.list { grid-template-columns: 1fr; }
	.two-col-span-full { grid-column: span 1 !important; }
	.three-col-span-full { grid-column: span 1 !important; }
	.three-col-span-two { grid-column: span 1 !important; }
	h1 { line-height: 2rem; }
	h1+h1 { line-height: 1.1rem; }
}
@media only screen and (min-width : 720px) { /* Tablets */
	header { grid-template-columns: 1fr 1fr; }
	header div { text-align: left; }
	header div:first-child { text-align: left; }
	header div:nth-child(2) { text-align: left; }
	header div:last-child { 
		grid-column-start: 2;
  	grid-row-start: 1;
  	grid-row-end: 1;
		text-align: right !important; 
	}
	footer { grid-template-columns: 1fr 1fr; }
	div.grid { grid-template-columns: 1fr 1fr; }
	div.shorts { grid-template-columns: 1fr 1fr; }
	div.slides { grid-template-columns: 1fr 1fr; }
	div.article { grid-template-columns: 1fr 1.8fr; }
	div.article div:first-child {
		grid-column-start: auto;
		grid-row-start: auto;
	}
	div.single { grid-template-columns: 1fr; }
	div.list { grid-template-columns: 1.5fr 1fr; }
	.two-col-span-full { grid-column: span 2 !important; }
	.three-col-span-full { grid-column: span 2 !important; }
	.three-col-span-two { grid-column: span 2 !important; }
}
@media only screen and (min-width : 1024px) { /* Desktops */
	header { grid-template-columns: 1fr 1fr 1fr; }
	header div { text-align: left; }
	header div:first-child { text-align: left; }
	header div:nth-child(2) { 
		grid-column-start: auto;
  	grid-row-start: auto;
  	grid-row-end: auto;
		text-align: center; 
	}
	header div:last-child { 
		grid-column-start: auto;
  	grid-row-start: auto;
  	grid-row-end: auto;
		text-align: right; 
	}
	footer { grid-template-columns: 1fr 1fr 1fr; }
	div.grid { grid-template-columns: 1fr 1fr 1fr; }
	div.shorts { grid-template-columns: 1fr 1.8fr; }
	div.slides { grid-template-columns: 1fr 1fr; }
	div.article { grid-template-columns: 1fr 1.8fr; }
	div.article div:first-child {
		grid-column-start: auto;
		grid-row-start: auto;
	}
	div.single { grid-template-columns: 1fr; }
	div.list { grid-template-columns: 1fr 1fr; }
	.two-col-span-full { grid-column: span 2 !important; }
	.three-col-span-full { grid-column: span 3 !important; }
	.three-col-span-two { grid-column: span 2 !important; }
}