/*
Theme Name: 4rraydotcom
Theme URI: https://4rray.com
Author: Gruu Family
Author URI: https://4rray.com 
Description: Theme for websites from Gruu Family
Version: 250618
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 4rray 
*/

:root {
	--color-navy-dark: 	#112233;
	--color-green: 		#7fffd4;
	--color-yellow: 	#f7e17b;
	--color-green-dim: 		#7fffd422;
	
	--c-blue: 			#121c3b;
	--c-purple: 		#ff66aa;
	--c-purple-dim: 	#ff66aa44;
	--c-skyblue: 		#44eeff; /* #08c6fd; */
	--c-skyblue-dim: 	#44eeff22; /* #08c6fd; */
	--c-gray: 			#e0e0e0;
	--c-gray-dark: 		#cccccc;
	--c-yellow: 		#f7e17b;
	
	--c-background: var(--c-blue);
	--c-text: 		var(--c-gray);
	--c-text-dark: 	var(--c-gray-dark);
	--c-link: 		var(--c-skyblue);
	--c-link-dim: 	var(--c-skyblue-dim);
	--c-strong: 	var(--c-yellow);
	--c-box: 		var(--c-purple);
	--c-box-dim: 	var(--c-purple-dim);

	--glass-background: 		#ffffff11;
	--glass-box-shadow: 		inset 0 0 2rem -1rem #ffffff44;
	--glass-box-shadow-hover: 	inset 0 0 2rem -1rem #ffffffaa;
	
	--ff-mso: 	'Material Symbols Sharp';
	--gap: 		1rem;
}

.block_glass 			{ background: var(--glass-background); box-shadow: var(--glass-box-shadow); border: 0; border-radius: 1.5rem; padding: 1rem; backdrop-filter: blur(8px); }
.button_glass 			{ background: var(--glass-background); box-shadow: var(--glass-box-shadow); border: 0; border-radius: .33rem; padding: .5rem .5rem; line-height: 1; backdrop-filter: blur(8px); }
.button_glass:hover 	{ box-shadow: var(--glass-box-shadow-hover); }

html 			{ margin: 0; padding: 0; background: black; font-size: 16px; }
body 			{ margin: 0; padding: 0; font-size: 1rem; color: var(--c-text); width: 100%; }
body > .wrapper { display: grid; gap: var(--gap); margin: 0 auto; padding: 1rem 0; max-width: 728px; }
a 				{ text-decoration: none; color: var(--c-link); }
a:hover 		{  }
strong 			{ font-weight: 500; color: var(--c-strong); }
ul 				{ margin: 1.5rem 0; padding-left: 1.1rem; }
ul ul 			{ margin: .25rem 0; list-style-type: disc; }
ul ::marker 	{ font-size: small; color: var(--c-strong); }

/* preset */
	/* border */
		/* radius */
			.br_150 	{ border-radius: 1.5rem; }
	/* float */
		/* clear */
			.clear_both, .clearboth 	{ clear: both; }
	/* padding */
		.padding_0 		{ padding: 0; }
		.padding_0_100 	{ padding: 0 1rem; }
		.padding_0_200 	{ padding: 0 2rem; }

/* site */
	.site 	{ padding: 0 1rem; overflow: hidden; }
	/* front */
		.site.front 				{ display: flex; flex-direction: column; gap: .5rem; line-height: 1; }
		.site.front .custom-logo 	{ width: auto; height: auto; max-width: 100px; max-height: 50px; }
	/* top */
		.site.top 	{ padding: 0 1rem; }
		/* inner */
			.site.top .inner 	{  }
		/* inner top */
			.site.top .inner.top 	{ position: relative; display: flex; align-items: center; justify-content: space-between; line-height: 1; }
			/* left */
				.site.top .left { display: flex; align-items: center; gap: .5rem; }
				/* custom logo */
					.site.top .custom-logo 		{ width: 1.5rem; height: auto; }
			/* right */
		/* bottom */
			/* searchform */
				.searchform 		{ box-sizing: border-box; display: grid; grid-template-columns: auto 2rem; width: 100%; }
				.searchform input	{ background: transparent; border: 0; padding: .5rem 0; font-size: .9rem; color: var(--color-link); outline: none; }
				.searchform button	{ background: transparent; border: 0; color: var(--c-link); cursor: pointer; padding: 0; font-size: 1rem; }
		/* menu */
			.site.front .menu-header-container 		{ display: block; }
			.site.front .menu 						{ display: flex; flex-wrap: wrap; margin: 0; padding: 0; width: fit-content; list-style-type: none; font-size: .9rem; gap: .5rem; line-height: 1; }
			.site.front .menu-item 					{ word-break: keep-all; }
	/* middle */
		.site.middle 	{ display: flex; flex-direction: column; gap: 3rem; padding: 0; }
		/* main */
			.site main 	{  }
			/* article */
				article 	{ display: flex; flex-direction: column; gap: 1.5rem; }
				/* header */
					article header 			{ text-align: center; margin: 1.5rem 0; }
					article h1 				{ margin: .5rem 0; font-size: 2rem; font-weight: 400; color: var(--c-strong); line-height: 1.33; word-break: keep-all; }
					article header .meta 	{ display: inline-flex; align-items: center; gap: .25em; margin-right: .5em; font-size: .9rem; line-height: 1; }
					article .cat:before 	{ font-family: var(--ff-mso); content: '\e2c7'; }
					article .updated:before { font-family: var(--ff-mso); content: '\ebcc'; }
					article .pv:before 		{ font-family: var(--ff-mso); content: '\ea03'; }
				/* content */
					article h2 			{ display: flex; align-items: center; font-weight: 400; color: var(--c-strong); font-size: large; }
					article h2:before 	{ font-family: var(--ff-mso); content: '\ea50'; line-height: 1; font-size: x-large; font-weight: 300; }
					article h3 			{ font-size: 1rem; font-weight: 500; }
					article sup 		{ margin: 0 .25em; }
					/* table */
						article table 			{ display: block; font-size: .9rem; line-height: 1.5; overflow-x: auto; border-collapse: collapse; }
						article table thead		{ border-bottom: 2px solid var(--color-strong); line-height: 1.33; }
						article table th		{ font-size: .9em; vertical-align: bottom; text-align: center; }
						article table tbody		{ border-bottom: 2px solid var(--color-strong); }
						article th, article td 	{ padding: .15em .3em; }
					/* list */
						article .content ul 	{ line-height: 1.5; }
					/* wp-caption */
						.wp-caption 		{ max-width: 100%; margin: 1.5rem auto; }
						.wp-caption-text 	{ margin: 0; font-size: small; }
				/* footer */
					article footer 	{ font-size: .9rem; }
					/* tags */
						article .tags 			{ display: flex; flex-wrap: wrap; align-items: center; gap: .33em; line-height: 1.33; color: var(--color-link-dim); }
						article .tags .header	{ font-size: 1rem; color: var(--c-strong); }
		/* entry */
			.entry 				{ box-sizing: border-box; display: flex; flex-direction: column; gap: .75rem; line-height: 1.5; margin: 0; padding: 1rem; list-style: none; overflow: hidden; }
			.entry .item 		{ border: 2px solid var(--c-purple-dim); padding: .5rem .75rem; }
			.entry .excerpt 	{ display: block; color: var(--c-text-dark); }
			/* pagination */
				nav.navigation.pagination 	{ font-size: small; font-weight: 500; text-align: right; margin: 1rem; }
				.nav-links 					{ display: inline-flex; gap: .5em; }
				.page-numbers 				{ padding: .33em; line-height: 1; background: var(--color-link-dim); min-width: 1em; text-align: center; border-radius: .25em; }
				.page-numbers.current 		{ color: black; background: var(--c-link); }
				.page-numbers.dots 			{ background: transparent; }
	/* bottom */
		.site.bottom 	{ display: flex; flex-direction: column; gap: 1.5rem; font-size: .9rem; }
/* etc */
	/* footnote */
		.footnotes 					{ font-size: small; }
		.footnotes hr				{ border: 0; border-top: 2px dotted var(--c-link-dim); }
		.jetpack-footnote 			{ line-height: 1; }
		.jetpack-footnote:before 	{ content: '['; }
		.jetpack-footnote:after 	{ content: ']'; }
	/* widget */
		.widgets 		{ font-size: .95rem; display: flex; flex-direction: column; gap: 1.5rem; }
		.widgetTitle 	{ font-weight: 400; font-size: 1rem; color: var(--c-strong); }
		.site.middle .widgets 	{ padding: 0 1rem; }
		/* mb2col */

@media screen and (min-width: 512px) {
	/* wp-caption */
		.wp-caption.alignright 	{ width: calc(50% - 1rem) !important; max-width: 300px; float: right; margin: 1rem; margin-right: 0; }
}

@media screen and (min-width: 1108px) {
	body .wrapper	{ 
		max-width: 1108px;
		grid-template-areas: ' front front ' ' middle top ' ' middle bottom ';
		grid-template-columns: calc(728px + 2rem) calc(300px + 2rem); 
		align-content: space-between;
		box-shadow: none;
		margin: 0 auto;
	}
	/* site */
		.site.front 	{ grid-area: front; flex-direction: row; justify-content: space-between; }
		.site.top 		{ grid-area: top; }
		.site.middle 	{ grid-area: middle; }
			/* widget */
				.widgets.mb2col 	{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
		.site.bottom 	{ grid-area: bottom; flex-direction: column; justify-content: flex-end; }
}