/**
 * -----------------------------------------------------------------------------
 * M A I N . C S S
 * -----------------------------------------------------------------------------
 * File Name:        public/assets/main.css
 * Description:      Main stylesheet for the project.
 * Author:           brandgrad°
 * Author URI:       https://www.brandgrad.com
 * Version:          0.0.1
 * Created:          2026-06-05
 * Last Updated:     2026-06-05
 *
 */
:root{
	--color-none           : transparent;
	--color-white          : rgb( 255, 255, 255 );
	--color-ceramic        : rgb( 239, 239, 239 );
	--color-champaign      : rgb( 224, 213, 187 );
	--color-crimson        : rgb( 231,  51,  49 );
	--color-granite        : rgb( 135, 145, 154 );
	--color-midnight       : rgb(  29,  36,  46 );
	--color-black          : rgb(   0,   0,   0 );

	--font-weight-regular  : 400;
	--font-weight-medium   : 500;
	--font-weight-semibold : 600;
	--font-weight-bold     : 700;
}

body.layout-debug * { border : 1px solid rgb(250,0,0) }
body.layout-debug * * { border : 1px solid rgb(200,50,0) }
body.layout-debug * * * { border : 1px solid rgb(150,100,0) }
body.layout-debug * * * * { border : 1px solid rgb(100,150,0) }
body.layout-debug * * * * * { border : 1px solid rgb(50,200,0) }
body.layout-debug * * * * * * { border : 1px solid rgb(0,250,0) }
body.layout-debug * * * * * * * { border : 1px solid rgb(0,200,50) }
body.layout-debug * * * * * * * * { border : 1px solid rgb(0,150,100) }
body.layout-debug * * * * * * * * * { border : 1px solid rgb(0,100,150) }
body.layout-debug * * * * * * * * * * { border : 1px solid rgb(0,50,200) }
body.layout-debug * * * * * * * * * * * { border : 1px solid rgb(0,0,250) }

/* ----------------------------------------------------------------------------- *\
 	FONTS & GENERAL STYLING
\* ----------------------------------------------------------------------------- */

body{
	font-family : 'Poppins';
	font-size   : 16px;
	line-height : 1.5em;
	color       : var(--color-midnight);
	/*
	max-width   : 100%;
	overflow-x:hidden;
	*/
}

h1, .h1{
	font-size   : 2rem;
	line-height : 1.25em;
	font-weight : 500;
}

a{}
a:hover{
	background-color : var( --color-crimson );
}
a:hover i{
	color : var(--color-ceramic) !important;
}

.color-red{
	color : var(--color-crimson) !important;
}

button, .button{
	font-weight      : var( --font-weight-bold );
	color            : var( --color-ceramic );
	background-color : var( --color-crimson );
	cursor           : pointer;
}

/* ----------------------------------------------------------------------------- *\
 	LAYOUT CUSTOM ELEMENTS
\* ----------------------------------------------------------------------------- */

layout-container{
	display         : flex;
	flex-wrap       : wrap;
	justify-content : center;
	max-width       : 100%;
}
	layout-row{
		flex       : 0 0 1280px;
		width      : 1280px;
		max-width  : calc( 100% - 40px );
		flex-wrap  : wrap;
		display    : flex;
	}
		@media screen and ( max-width : 1280px )
		{
			layout-row{
				flex  : 0 0 calc( 100% - 40px - 40px );
				width : calc( 100% - 40px - 40px );
			}
		}


	layout-column{
		flex       : 1 0 0;
		max-width  : 100%;
		min-height : 1px;
		display : block;
	}

	[hide-on="mobile"]{}
	@media screen and ( max-width : 1280px )
	{
		[hide-on="mobile"]{ display : none !important; }
	}
	[hide-on="desktop"]{}
	@media screen and ( min-width : 1280px )
	{
		[hide-on="desktop"]{ display : none !important; }
	}

/* ----------------------------------------------------------------------------- *\
 	CONTENT ELEMENTS
\* ----------------------------------------------------------------------------- */

/* --------------------- *\
	NAVBAR
\* --------------------- */
#navbar{}
.navbar{
	position         : fixed;
	left             : 0px;
	top              : 0px;
	z-index          : 99;
	width            : 100%;
	max-width        : 100%;
	height           : var( --navbar-height );
	max-height       : var( --navbar-height );
	color            : var( --color-ceramic );
	background-color : var( --color-midnight );
}

	.navbar__spacer{
		display          : block;
		width            : 100%;
		max-width        : 100%;
		height           : var( --navbar-height );
		max-height       : var( --navbar-height );
		overflow         : hidden;

	}
	.navbar__container{
		display          : flex;
		height           : var( --navbar-height );
	}

	.navbar__column{}
	.navbar__column-logo{
		flex            : 1 1 300px;
		display         : flex;
		justify-content : flex-start;
		align-items     : center;
	}
	.navbar__column-menu{
		flex: 1 1 calc(100% - 300px);
	}

	.navbar__logo-link{
		display : inline-block;

	}
	.navbar__logo-image{
		height     : 30px;
		width      : auto;
		transition : all 250ms;
	}
		.page-is-top.screen-is-desktop.logo-is-toggable .navbar__logo-image{
			transform  : translateY(50px);
			opacity    : 0;
		}
		.page-is-scrolled.screen-is-desktop.logo-is-toggable .navbar__logo-image{
			transform  : translateY(0px);
			opacity    : 1;
		}

	.navbar__mobile-wrapper{
		display         : flex;
		justify-content : flex-end;
		align-items     : center;
		height          : var( --navbar-height );
	}

	.navbar__button-mobile-menu{
		display      : block;
		width        : 35px;
		height       : 35px;
		aspect-ratio : 1/1;
	}

	/* -- MAIN MENU */
	.navbar ul.main-menu{
		margin          : 0px 0px 0px 0px;
		padding         : 0px 0px 0px 0px;
		display         : flex;
		justify-content : flex-end;
		list-style      : none;
		height          : var( --navbar-height );
		max-height      : var( --navbar-height );
	}

	.navbar ul.main-menu *{
		color           : var( --color-ceramic );
		text-decoration : none;
	}

	.navbar ul.main-menu > li{
		position   : relative;
		display    : block;
		height     : var( --navbar-height );
		max-height : var( --navbar-height );
	}

	.navbar ul.main-menu > li > a {
		margin         : 0px 0px 0px 0px;
		padding        : 0px 15px 0px 15px;
		display        : block;
		height         : var( --navbar-height );
		max-height     : var( --navbar-height );
		line-height    : var( --navbar-height );
		font-size      : 1rem;
		text-transform : uppercase;
		text-align     : center;
		font-weight    : var( --font-weight-medium );
		cursor         : pointer;
	}

	/* -- SUBMENU */
	.main-menu__sub-menu{
		display          : none;
		position         : absolute;
		top              : var( --navbar-height );
		padding          : 10px 0px 80px 0px;
		left             : calc( attr(data-pos-x px) * -1 );
		padding-left     : calc( attr(data-pos-x px) *  1 );
		width            : 100vw;
		max-width        : 100vw;
		overflow         : hidden;
		z-index          : 99;
		background-color : var(--color-black);
	}
		.navbar ul.main-menu > li:hover > .main-menu__sub-menu{ display : block; }

	.main-menu__sub-menu ul{
		margin          : 0px 0px 0px 0px;
		padding         : 0px 0px 0px 0px;
		list-style-type : none;
	}
	.main-menu__sub-menu ul > li{}
	.main-menu__sub-menu ul > li > a{
		display : block;
		padding : 6px 10px 6px 0px;
	}

/* --------------------- *\
	OFFCANVAS /
	MOBILE MENU
\* --------------------- */
/* -- Off-Canvas Layer */
.offCanvas{
	position         : fixed;
	left             : 0px;
	top              : 0px;
	margin           : 0px 0px 0px 0px;
	padding          : 110px 40px 40px 40px;
	display          : flex;
	flex-direction   : column;
	justify-content  : space-between;
	width            : 100%;
	max-width        : 100%;
	height           : 100dvh;
	max-height       : 100dvh;
	z-index          : 90;
	background-color : var( --color-black );
	overflow         : hidden;

	/* -- Fly-in/-out Transition */
	transition       : transform 250ms, opacity 250ms;
	transform        : translateX( 100% );
	opacity          : 0;
}

	body.offCanvas--shown .offCanvas{
		transform : translateX( 0vw );
		opacity   : 1;
	}
	body.offCanvas--shown{
		max-width  : 100%;
		max-height : 100dvh;
		overflow   : hidden;
	}

	/* -- Mobile Menu */
	.mobileMenu{
		margin     : 0px 0px 0px 0px;
		padding    : 0px 0px 0px 0px;
		list-style : none;
	}

	.mobileMenu li{
		display : block;
	}

	.mobileMenu li a{
		display         : block;
		padding         : 10px 0px 10px 0px;
		font-weight     : var( --font-weight-semibold );
		color           : var( --color-ceramic );
		text-decoration : none;
		text-transform  : uppercase;
	}

	.mobileMenu__sub-menu li a{
		font-weight     : var( --font-weight-regular );
	}

	/* -- Mobile Language Switch */
	.mobileLanguageSwitch{
		margin     : 0px 0px 0px 0px;
		padding    : 0px 0px 0px 0px;
		list-style : none;
		display    : flex;
		color      : var( --color-ceramic );
	}

	.mobileLanguageSwitch .mobileLanguageSwitch__language,
	.mobileLanguageSwitch .mobileLanguageSwitch__divider{
		margin          : 0px 0px 0px 0px;
		padding         : 10px 20px 10px 0px;
		display         : block;
		color           : var( --color-ceramic );
		text-decoration : none;
		text-transform  : uppercase;
	}



/* --------------------- *\
	POST HEAD
\* --------------------- */
.post-head{
	background-color :  var(--color-midnight);
}
	.post-head__row{}
	.post-head__column{
		padding : 40px 0px 40px 0px;
		flex    : 0 0  calc( ( 10/12 * 100 ) * 1% );
		width   : calc( ( 10/12 * 100 ) * 1% )
	}
	.post-head__meta{
		display         : flex;
		justify-content : flex-start;
		align-items     : center;
	}
		.post-head__meta-topics{
			padding          : 2px 24px 2px 12px;
			display          : flex;
			color            : var( --color-ceramic );
			background-color : var( --color-crimson );
			clip-path        : polygon(
									0 0,                      /* -- Top Left     */
									100% 0,                   /* -- Top Right    */
									calc( 100% - 22px ) 100%, /* -- Bottom Right */
									0% 100%                   /* -- Bottom Left  */
								);
		}

		a.meta-topic:not(:last-child){
			margin : 0px 12px 0px 0px;
		}
		img.meta-topic__icon{
			height : 16px;
			width  : auto;
		}

		.post-head__meta-date{
			margin    : 0px 0px 0px 12px;
			font-size : 0.7rem;
			color     : var( --color-granite );
		}

	.post-head__title{
		font-size   : 2.25rem;
		line-height : 1.25em;
		color       : var( --color-ceramic );
	}


/* --------------------- *\
	POST (CONTENT) LAYOUT
\* --------------------- */
.post{}
	.post__row{
		justify-content: space-between;
	}
	.post__column{}
	.post__column-main{
		flex  : 0 0  calc( ( 7/12 * 100 ) * 1% );
		width : calc( ( 7/12 * 100 ) * 1% );
	}
	.post__column-sidebar{
		flex  : 0 0  calc( ( 3/12 * 100 ) * 1% );
		width : calc( ( 3/12 * 100 ) * 1% );
	}
	.post__authors-wrapper{}
		@media screen and ( max-width : 843px )
		{
			.post__column-main,
			.post__column-sidebar{
				flex  : 0 0 100%;
				width : 100%
			}
			.post__authors-wrapper{
				display         : flex;
				flex-wrap       : wrap;
				justify-content : space-between;
			}
			.post__authors-wrapper .author-card{
				flex  : 0 0 calc( 50% - 8px );
				width : calc( 50% - 8px )
			}
		}

		@media screen and ( max-width : 560px )
		{
			.post__authors-wrapper .author-card{
				flex  : 0 0 100%;
				width : 100%
			}
		}

	.post__column-main * {
		max-width : 100%;
	}

/* --------------------- *\
	Sharing Bar
\* --------------------- */
.sharing-bar{
	color            : var( --color-ceramic );
	background-color : var( --color-midnight );
}
	.sharing-bar__inner-wrapper{}
	.sharing-bar__social-link{
		padding : 2px 5px 2px 5px;
		display : inline-block;
		font-size : 1.5rem;
		color : var( --color-ceramic );
		text-decoration: none;
	}

/* --------------------- *\
	Related Posts
\* --------------------- */
.related-posts{
	margin : 30px 0px 0px 0px;
}
	.related-posts__inner-wrapper{
		justify-content : space-between;
	}
	.related-posts__item{
		flex  : 0 0 calc( 33% - 8px );
		width : calc( 33% - 8px );
	}

/* --------------------- *\
	Author Card
\* --------------------- */
.author-card{
	margin           : 0px 0px 22px 0px;
	padding          : 0px 0px 0px 0px;
	display          : block;
	color            : var( --color-ceramic );
	text-decoration  : none;
	background-color : var( --color-midnight );
	background-image    : url('/public/assets/gfx/author-card-info-slate.svg');
	background-position : right bottom;
	background-repeat   : no-repeat;
	cursor           : pointer;
}
	.author-card__inner-wrapper{
		margin              : 0px 0px 0px 0px;
		padding             : 0px 0px 0px 0px;
	}
	.author-card__image{
		display      : block;
		aspect-ratio : 240/250;
		object-fit   : cover;
		width        : 100%;
		max-width    : 100%;
		height       : auto;
		transition   : filter 250ms;
		filter       : contrast(1.0);
	}
		.author-card:hover .author-card__image{
			filter       : contrast(1.2);
		}

	.author-card__profile{
		padding : 16px 22px 22px 22px;
		margin  : 0px 0px 0px 0px;
	}
	.author-card__name{
		margin      : 0px 0px 0px 0px;
		padding     : 0px 0px 0px 0px;
		font-size   : 1rem;
		line-height : 1.25rem;
		font-weight : var( --font-weight-semibold );
	}
	.author-card__expertise{
		margin     : 8px 0px 0px 0px;
		padding    : 0px 0px 0px 0px;
		list-style : none;
	}
	.author-card__expertise-item{
		font-size   : 0.75rem;
		line-height : 1.50em;
		font-weight : var( --font-weight-regular );
		color       : var( --color-ceramic );
	}


/* --------------------- *\
	Post Card
\* --------------------- */
.post-card{
	margin           : 0px 0px 0px 0px;
	padding          : 0px 0px 0px 0px;
	max-width        : 100%;
}
	.post-card__link-wrapper{
		display          : block;
		color            : var(--color-ceramic);
		text-decoration  : none;
		background-color : var(--color-midnight);
	}
	.post-card__thumb-wrapper{
		position : relative;
	}
	.post-card__thumb-categories{
		position         : absolute;
		left             : 0px;
		top              : 0px;
		z-index          : 10;
		margin           : 0px 0px 0px 0px;
		padding          : 2px 24px 2px 12px;
		background-color : var(--color-crimson);
		clip-path        : polygon(
								0 0,                      /* -- Top Left     */
								100% 0,                   /* -- Top Right    */
								calc( 100% - 22px ) 100%, /* -- Bottom Right */
								0% 100%                   /* -- Bottom Left  */
							);
	}
	.post-card__thumb-category{}

	.post-card__thumb-image{
		display      : block;
		width        : 100%;
		max-width    : 100%;
		object-fit   : cover;
		aspect-ratio : 324/182;

		transition : filter 250ms;
		filter     : contrast(1.0);
	}
		.post-card__link-wrapper:hover .post-card__thumb-image{
			filter : contrast(1.2);
		}

	.post-card__content{
		margin  : 0px 0px 0px 0px;
		padding : 20px 20px 20px 20px;
	}

	.post-card__date{
		font-size : 0.75rem;
		color     : var(--color-granite);
	}
		.post-card__link-wrapper:hover .post-card__date{
		color     : var(--color-ceramic);
		}

	.post-card__title{
		margin      : 10px 0px 30px 0px;
		font-size   : 1rem;
		line-height : 1.50em;
		font-weight : var(--font-weight-semibold);
	}

	.post-card__authors{
		display         : flex;
		justify-content : flex-start;
		align-items     : center;
	}
	.post-card__authors-images{
		display : flex;
		margin  : 0px 12px 0px 0px;
	}


	.post-card__authors-image{
		display       : block;
		width         : 34px;
		height        : 34px;
		object-fit    : cover;
		aspect-ratio  : 1/1;
		border-radius : 100%;
    	border        : 2px solid var(--color-midnight);
	}
		.post-card__authors-image + .post-card__authors-image{
			margin-left : -10px;
		}

	.post-card__authors-names{
		font-size : 0.75rem;
		line-height : 1.50em;
	}
	.post-card__authors-name{
	}


/* --------------------- *\
	HERO HEADER
\* --------------------- */
.heroHeader{
	position   : relative;
	min-height : var(--height-desktop);
	overflow   : hidden;
}
	.heroHeader .heroHeader__row{
		position   : absolute;
		z-index    : 10;
		min-height : var(--height-desktop);
	}
	.heroHeader .heroHeader__column{
		min-height : var(--height-desktop);
		color      : var(--color-ceramic);
	}
		@media screen and ( max-width : 1280px )
		{
			.heroHeader{
				min-height : var(--height-mobile);
			}
			.heroHeader .heroHeader__row{
				min-height : var(--height-mobile);
			}
			.heroHeader .heroHeader__column{
				min-height : var(--height-mobile);
			}
		}

	.heroHeader__column-left{
		flex                : 0 0 75%;
		display             : flex;
		align-items         : center;
		background-image    : url('/public/assets/gfx/slant-right--midnight.svg');
		background-position : right top;
		background-size     : auto 100%;
	}
		@media screen and ( max-width : 1280px )
		{
			.heroHeader__column-left{
				flex        : 0 0 100%;
				align-items : flex-start;
			}
		}

	.heroHeader__content{
		width       : 100%;
		font-size   : 2em;
		line-height : 1.25em;
		display: flow-root;
	}
	.heroHeader__content p {
		margin   : 0px 0px 0px 0px;
		overflow : hidden;
	}
	.heroHeader__content-slate{
		float   : right;
		height  : auto; 
		width   : auto;
		opacity : 0.0;
	}
	.heroHeader__content-logo{
		margin     : 50px 0px 50px 0px;
		display    : block;
		width      : 280px;
		height     : auto;
		transition : all 250ms;
		transform  : translateY(0px);
		opacity    : 1;
	}
		.page-is-top.screen-is-desktop .heroHeader__content-logo{
			transform  : translateY(0px);
			opacity    : 1;
		}
		.page-is-scrolled.screen-is-desktop .heroHeader__content-logo{
			transform  : translateY(-50px);
			opacity    : 0;
		}

		@media screen and ( max-width : 1280px )
		{
			.heroHeader__content{
				font-size   : 1.5em;
				line-height : 1.35em;
			}
			.heroHeader__content p {
				margin : 0px 0px 0px 0px;
			}
			.heroHeader__content-slate{
				margin : 0px 0px 0px 0px;
			}
			.heroHeader__content-logo{
				display : block;
				width   : 22%;
			}
		}
		@media screen and ( max-width : 720px )
		{
			.heroHeader__content{
				font-size   : 1.0em;
				line-height : 1.25em;
			}
			.heroHeader__content p {
				margin : 70px 0px 0px 0px;
			}
			.heroHeader__content-slate{
				margin : -70px 0px 0px 0px;
			}
			.heroHeader__content-logo{
				display : none;
			}
		}


.heroHeader::before{
	content          : '';
	display          : block;
	position         : absolute;
	left             : 0px;
	top              : 0px;
	width            : 33vw;
	min-height       : var(--height-desktop);
	z-index          : 1;
	background-color : var(--color-midnight);
}
	@media screen and ( max-width : 1280px )
	{
		.heroHeader::before{
			width      : 40px;
			min-height : var(--height-mobile);
		}
	}

.heroHeader::after{
	content             : '';
	display             : block;
	position            : absolute;
	left                : 33vw;
	top                 : 0px;
	width               : 67vw;
	min-height          : var(--height-desktop);
	z-index             : 1;
	background-color    : var(--color-champaign);
	background-image    : var(--image-desktop-medium);
	background-size     : cover;
	background-position : left top;
}
	@media screen and ( max-width : 1280px )
	{
		.heroHeader::after{
			left       : 40px;
			width      : calc( 100% - 40px );
			min-height : var(--height-mobile);
		}
	}