/*
	style-dev-mode.css
	------------------
	The purpose of this file is to add styles to the website while developing, without making it public yet.
	This style will be loaded by header.php, but only if development mode is enabled in the motoko theme settings.

*/

/* ----------------------------------------------------------------- */
/* Basic tweaks */
/* ----------------------------------------------------------------- */

/* change the variable 'colBack' to change the background color from white to 'off-white': #f7f7f7 */
:root {
	/*--colBack: #f7f7f7;*/
}

BODY {
	/*background:#f7f7f7;*/
}

#page {
	/*background:#edc;*/
	margin-top:20px; /*35px*/
}

#site-title {
	height:65px;
	display: flex;
    justify-content: center;
    align-items: center;
}

/* ----------------------------------------------------------------- */
/* Menu - meaning the navigation menu at the top of the website */
/* ----------------------------------------------------------------- */

/* set the height of the top nav menu */
#access { height:45px; font-size:22px; display:flex; justify-content:center; margin:10px 0 0 0; }

/* to align the buttons perfectly, we have to convert them to table cells */
/* set the spacing between the top nav menu items */
#access DIV	{ display: table; left:inherit; top:inherit; float:inherit; }
#access UL	{ display: table-row; left:inherit; float:inherit; }
#access LI	{ display:table-cell; width:205px; text-align:center; float:left; /*margin:0 50px;*/ }

/* these are the menu-items in the navigation on top of the page: work, studio, contact, etc */
#access a {
	display: inline-block;
	text-decoration: none;
	width:fit-content;

	background-color:var(--colBack);
	color:var(--colTheme);

	height:22px;
	line-height:22px;
	
	padding:10px 35px;
	
	-moz-border-radius: 30px;
	border-radius: 30px;

	transition: padding 0.1s, margin 0.1s, color 0.1s, background-color 0.1s;
}

/* this only fires when a user hovers a menu-item in the navigation that is NOT the current menu item */
#access a:hover:not(.current-menu-item) {
	background-color:var(--colTheme);
	color:#fff;

	padding:10px 55px;

	transition: padding 0.2s, margin 0.2s, color 0.2s, background-color 0.2s;
}

/* hightlight main menu item */
.current_page_item a, .current-menu-item a {
	background-color:var(--colTheme) !important;
	color:#fff !important;

	padding:10px 55px !important;
	/*opacity:1;*/
	/*transition: opacity .1s !important;*/
}

/* hover the currently active item */
.current_page_item a:hover, .current-menu-item a:hover {
	/*opacity:0.7;*/
	/*transition: opacity .15s !important;*/
	padding:10px 60px !important;
}

/* ----------------------------------------------------------------- */
/* Other tweaks */
/* ----------------------------------------------------------------- */

#newFooterSub {
	/*background:#456;*/
}

.entry-content, .post-meta, .lightbox-text {
	font-size:20px;
}

.big-fat, .small-fat {
	margin:10px 0;
	padding:0;
}

.big-fat {
	font-size:40px;
}

.small-fat {
	font-size:22px;
}

/* make header logo on top of page bigger */
#motoko-header-logo 					{ width:180px; display: flex; justify-content: center; padding-bottom: 10px; }
#motoko-header-logo .motoko-logo 		{ width:170px; height:auto; margin:0px 0px; transition: width .15s, height .15s, margin .15s; object-fit: contain; }
#motoko-header-logo:hover .motoko-logo 	{ width:160px; height:auto; margin:1px 0px; transition: width .15s, height .15s, margin .15s; opacity:inherit; }

/* add extra height to the project list items in 'selected projects' template */
.work-main-portrait 	{ padding-bottom:60px; }
.work-client-portrait 	{ text-transform: lowercase; }

/* tweak the style of the project type below the work list page, eg "festival promo" */
.list-project-type		{ font-size:22px; padding-top:5px; }

/* make the big buttons even bigger! and add some animation effect as well. */
A.bigbutton {
	padding: 8px 30px !important;

	border:2px solid var(--colBack);
	border-radius: 30px !important;
	transition:padding 0.2s;
}

A.bigbutton:hover {
	padding: 8px 40px !important;

	border:2px solid var(--colTheme);
	background-color:var(--colBack) !important;
	color:var(--colTheme) !important;
	opacity:inherit !important;
	transition:padding 0.2s;
}

/* single post - work/project post - hide the headers and titles as we start with the video directly below the top menu navigation */
#page-title, .page-title, .big-fat, .small-fat, .project-text { text-align:center; }

.header-type-post	{ display: none; }
.post-subtitle		{ display: none; }
.project-text		{ padding-left:100px; padding-right:100px; line-height:150%; text-align:justify; }
.project-caption 	{ text-align:center; }
.project-text, .ease-text { padding:0 !important; width:70%; margin:0 auto; font-size:28px !important; line-height:160% !important; }
.project-meta-info, .ease-meta-info { display:block; width:70%; margin:0px auto 10px auto; line-height:200%; padding-top:40px; }
.project-title		{ font-family: var(--fontHead); text-transform:capitalize; font-size:40px; margin-bottom:10px; }
.post-meta-type		{ font-family: var(--fontHead); font-size:22px; }
.post-meta-client	{ font-family: var(--fontHead); font-size:22px; }

.big-fat 		{ margin:20px 0; padding:30px 0 10px 0; }
.small-fat		{ padding:30px 0 0px 0; }

/* add extra margin between images */
.project-images		{ padding:15px 0; }

/* smaller images box */
.project-images-small { width:70%; margin: 0 auto; /*background:#ccc;*/ }

/* style the links inside the project text DIVs */
.project-text A			{ text-decoration:none !important; color: #fff !important; background:var(--colEase); border-radius: 20px; padding: 2px 16px !important; margin: 0 -8px; font-family: var(--fontHead); font-size:22px; }
.project-text A:hover	{ text-decoration:none !important; }

/* remove that top margin! */
DIV.imagebox { margin:0; }

/* set the new width for the blog content column, eg. https://www.motoko.nl/cinetoko/suitup-studio/ */
.blog-single-post-container	{ width:calc(var(--docWidth) - 350px); }

/* fix the caption for the 2022 layout */
.caption {
    padding: 5px 0px 20px 0px;
    font-size: 18px;
    text-align: center;
}
