/*!
Theme Name:     Martian Infotech Extension
Theme URI:      https://martianit.ca
Description:    Jvb-theme child theme, for Martian Infotech.
Author:         Jake
Author URI:     https://jakevan.ca/
Template:       jvb-theme
Version:        0.1.0
!*/
:root{
	--filter: grayscale(.3) sepia(.4);

	/** Download your Fonts from: https://gwfh.mranftl.com/ **/
	--font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
	--heading: 'Ailerons', var(--font-base);
	--body: 'Oswald', var(--font-base);
	--fw-h: 500;
	--fw-h-light: 500;
	--fw-h-bold: 500;
	--fw-b: 300;
	--fw-b-bold: 700;
	--fw-b-light: 300;

	/* Colours
	For best results, generate colours from base colours using: https://uicolors.app/generate/
	or sass darken/lighten by 5%: http://scg.ar-ch.org/
	*/
	--light-0: 250,249,250; 	/* #faf9fa */
	--light-50: 238,235,238;	/* #eeebee */
	--light-100: 227,221,227;	/* #e3dde3 */
	--light-200: 215,207,215;	/* #d7cfd7 */
	--light-rgb: 250,249,250;

	--dark-0: 35,31,32;			/* #231f20 */
	--dark-50: 49,43,44;		/* #312b2c */
	--dark-100: 62,55,57;		/* #3e3739 */
	--dark-200: 76,67,69; 		/* #4c4345; */
	--dark-rgb: 35,31,32;

	--action-0: 5,165,75; 		/* #05a54b; */
	--action-50: 6,190,86; 		/* #06be56; */
	--action-100: 7,214,97; 	/* #07d661; */
	--action-200: 7,239,109; 	/* #07ef6d; */
	--action-rgb: 5,165,75;
	--action-contrast: var(--light-0);

	--secondary-0: 255,210,90; 	/* #FFD25A; */
	--secondary-50: 255,217,115;/* #ffd973; */
	--secondary-100: 255,244,141;/* #ffe08d; */
	--secondary-200: 255,231,166;/* #ffe7a6; */
	--secondary-rgb: 255,210,90;
	--secondary-contrast: var(--dark-0);

	--success: 5,165,75;		/* #05a54b; */
	--successLight: 222,254,236;/* #defeec; */
	--successDark: 1,41,19;		/* #012913; */

	--warning: 214,145,33;		/* #D69121; */
	--warningLight: 246,229,203;/* #F6E5CB; */
	--warningDark: 35,24,6;		/* #231806; */

	--error: 240,128,128;		/* #F08080; */
	--errorLight: 253,242,242;	/* #fdf2f2; */
	--errorDark: 55,7,7;		/* #370707; */



	--base: var(--light-0);
	--base-50: var(--light-50);
	--base-100: var(--light-100);
	--base-200: var(--light-200);

	--contrast: var(--dark-0);
	--contrast-50: var(--dark-50);
	--contrast-100: var(--dark-100);
	--contrast-200: var(--dark-200);

	--successBack: var(--successLight);
	--successText: var(--successDark);
	--warningBack: var(--warningLight);
	--warningText: var(--warningDark);
	--errorBack: var(--errorLight);
	--errorText: var(--errorDark);
}

body:has(#theme-switcher:checked){
	--action-50: 4,140,64;		/* #048c40; */
	--action-100: 4,115,52;		/* #047334; */
	--action-200: 3,91,41;		/* #035b29; */
	--secondary-50: 255,203,64;	/* #ffcb40; */
	--secondary-100: 255,196,39;/* #ffc427; */
	--secondary-200: 255,189,13;/* #ffbd0d; */


	--contrast: var(--light-0);
	--contrast-50: var(--light-50);
	--contrast-100: var(--light-100);
	--contrast-200: var(--light-200);
	--contrast-rgb: var(--light-rgb);

	--base: var(--dark-0);
	--base-50: var(--dark-50);
	--base-100: var(--dark-100);
	--base-200: var(--dark-200);
	--base-rgb: var(--dark-rgb);

	--successBack: var(--successDark);
	--successText: var(--successLight);
	--warningBack: var(--warningDark);
	--warningText: var(--warningLight);
	--errorBack: var(--errorDark);
	--errorText: var(--errorLight);
}
/*** FONTS START **/
/** Download your Fonts from: https://gwfh.mranftl.com/
use ./assets/fonts/ as a base
**/
/* oswald-300 - 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: 'Oswald';
	font-style: normal;
	font-weight: 300;
	src: url('./assets/fonts/oswald-v57-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/oswald-v57-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* oswald-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: 'Oswald';
	font-style: normal;
	font-weight: 700;
	src: url('./assets/fonts/oswald-v57-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/oswald-v57-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* oswald-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: 'Ailerons';
	font-style: normal;
	font-weight: 500;
	src: url('./assets/fonts/Ailerons-Typeface.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/Ailerons-Typeface.otf') format('opentype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
html {
	font-size: 18px;
}
/*** FONTS END ***/
div.logo {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	margin: 0 auto;
}
	.logo #martian-infotech-logo {
		width: var(--btn);
		height: var(--btn);
	}
	.logo #martian-infotech {
		height: var(--chipchip);
		width: auto;
	}
	svg #Infotech {
		fill: rgb(var(--contrast))!important;
	}

.pre-header .socials {
	display: flex;
	justify-content: flex-end;
	list-style: none;
	gap: .5rem;
	width:100%;
}

.sub-header {
	position: sticky;
	top: -2rem;
	transition: top var(--trans-base);
	background-color: rgb(var(--base))!important;
	box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down);
}
	.sub-header p {
		margin: 0;
		text-align: center;
	}

.scroll-up .sub-header {
	top: calc(var(--btn) + var(--chip_) - 2px);
}


/*nav.condensed {*/
/*	width: 100%;*/
/*}*/
/*	nav.condensed ul {*/
/*		display: flex;*/
/*		flex-direction: row;*/
/*		justify-content: center;*/
/*		font-family: var(--body);*/
/*	}*/
/*	nav.condensed ul a {*/
/*		text-transform: uppercase;*/
/*	}*/

	footer {
		margin-top: 1rem;
	}
	.pre-footer {
		background-color: rgb(var(--base));
		text-align: center;
		padding: 2rem 0;
	}
/*nav.always.fixed ul {*/
/*	justify-content: flex-end;*/
/*}*/

/*nav.always.fixed li:has(.socials) {*/
/*	margin-top: 2rem;*/
/*}*/

.intro {
	margin: 2rem auto 4rem!important;
	gap: 1.5rem;
	align-items: center;
	height: max-content;
}
.intro h1 {
	margin: 0;
	font-size: var(--txt-xx-large);
}
.intro svg {
	width: 40vw;
	height: auto;
	margin: 0 auto;
}
	@media (min-width:768px){
		.intro svg {
			width: 50vw;
			margin: unset;
		}
		.intro h1 {
			font-size: var(--txt-xxx-large);
			max-width: 50vw;
		}
	}


main > section:nth-of-type(even) {
	background-color: rgb(var(--base-100));
	/*max-width: 100vw;*/
	padding: 3rem 0;
}
/*main > section > * {*/
/*	width: 100%;*/
/*	max-width: var(--content);*/
/*}*/
/*main > section:nth-of-type(even) > * {*/
/*	max-width: var(--wide);*/
/*}*/
.callout a {
	color: rgb(var(--action-0));
}
	.callout .buttons a {
		color: rgb(var(--action-contrast));
	}

/*.item-grid {*/
/*	grid-template-columns: repeat(1, 1fr)!important;*/
/*}*/

.item-grid .item figure {
	max-width: 40vw;
	width: 100%;
}
.item-grid .item > .group {
	width: 100%;
	margin-left: 1rem;
}
/*ul.socials {*/
/*	width: 100%;*/
/*	--justify: flex-end!important;*/
/*	height: 100%!important;*/
/*}*/
/*ul.socials li {*/
/*	list-style: none;*/
/*}*/

aside.sub.header {
	background-color: rgb(var(--base));
	text-align: center;
	z-index: var(--z-6);
	position: sticky;
	top: 0;
	left: 0;
	transition: top var(--trans-base);
	--justify: center!important;
}
.scroll-up aside.sub.header {
	top: calc(var(--btn) + var(--chip));
}

:is(h1,h2,h3,h4,h5,h6) small {
	line-height: .9;
}
/*nav a {*/
/*	--align: center;*/
/*}*/

.buttons li {
	width: 100%;
}

/*nav.condensed li {*/
/*	--dir: row;*/
/*}*/
@media (min-width: 768px) {
	.media-text.row {
		--wrap: nowrap;
	}
}

header > a[rel="home"],
header > .logo {
	margin: 0 auto;
}

.loop li {
	--gap: 1rem;
}
@media (max-width: 767px) {
	.loop li>figure {
		float: unset;
		margin: 0;
		aspect-ratio: unset;
		max-width: none;
	}
}

.home .loop p:has(.read-more) {
	display: none;
}

.loop li > .col.col {
	width: unset;
	max-width: 100%;
}

.media-text > * {
	width: 100%;
	max-width: 50%;
}