/*
Theme Name: 4RRAY WordPress Theme v3 
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 {
	--ff-mso: 	'Material Symbols Sharp';
	
	--c-navy-dark: 		#001f3f;
	--c-gray: 			#e8e8e8;
	--c-gray-dark: 		#cccccc;
	--c-white: 			#ffffff;
	--c-black-light: 	#444444;
	
	--c-background: 		var(--c-gray-dark);
	--c-background-dark: 	var(--c-navy-dark);
	--c-background-light: 	var(--c-white);
	--c-text: 				var(--c-black-light);
	--c-text-light: 		var(--c-gray);
	--c-link: 				#0056B3;
	
	--fontsize: 	95%;
	--fontsize-h2: 	1.25rem;
	--fontsize-h3: 	1.1rem;
	--lineheight: 	1.625;
}
/* preset */
	*, ::before, ::after { 
		box-sizing: border-box; margin: 0; padding: 0; 
	} 
	html 	{ 
		font-family: Arial, System-UI, sans-serif;
		font-size: var(--fontsize); font-weight: 400; line-height: var(--lineheight); color: #444; 
	}
	body 	{ background: var(--c-background); font-size: 1rem; }
	a 		{ text-decoration: none; color: var(--c-link); font-weight: 500; }
	a:hover { text-decoration: underline; }
	strong 	{ color: black; }
	sup 	{ margin: 0 .25em; }
	.ff_mso { font-family: 'Material Symbols Sharp'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; line-height: 1; }

/* site */
	.site 	{ position: relative; box-shadow: 0 0 8px 4px #00000044; }
	.inner 	{ max-width: calc(728px + 3rem); margin: 0 auto; padding: 1.5rem; }
	/* header */
		.site.header 		{ z-index: 2; background: var(--c-background-dark); color: var(--c-text-light); }
		.site.header .inner	{ display: grid; grid-template-areas: ' left right ' ' bottom bottom '; grid-template-columns: auto auto; gap: .5rem 1rem; }
		/* left */
			.site.header .left 	{ grid-area: left; line-height: 1; }
			/* custom logo */
				.custom-logo 	{ width: auto; height: auto; max-width: 32px; max-height: 32px; border-radius: .5rem; }
		/* right */
			.site.header .right 	{ grid-area: right; text-align: right; }
			/* search form */
				.searchform 		{ display: flex; align-items: center; justify-content: space-between; background-color: #ffffff33; width: 100%; max-width: 250px; margin: 0; margin-left: auto; border-radius: .25rem; }
				.searchform input 	{ border:0; background-color: transparent; padding: .5rem .75rem; color: var(--c-text-light); width: 100%; outline: none; }
				.searchform button	{ border:0; background-color: transparent; padding: .5rem; color: var(--c-text-light); cursor: pointer; }
		/* bottom */
			.site.header .bottom 	{ grid-area: bottom; line-height: 1; }
			/* nav */
				.site.header nav ul 			{ font-size: .9rem; list-style: none; display: flex; gap: .25em; margin: 0 0 0 auto; width: fit-content; font-weight: 600; }
				.site.header .menu-item:after	{ content: ' | '; color: dimgray; }
				.site.header .menu-item a		{ color: var(--c-text-light); }
	/* body */
		.site.body 			{ z-index: 1; background-color: var(--c-background-light); }
		.site.body .inner	{ padding: 0; }
		/* article */
			article 	{ display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; }
			/* header */
				article header 			{ padding: 1.5rem 0; }
				article header h1		{ font-size: xx-large; font-weight: 400; line-height: 1.33; word-break: keep-all; color: black; }
				article header hr		{ border: 0; border-top: 1px solid lightgray; margin: 1rem 0; }
				article header .meta	{ display: inline-flex; gap: .25em; align-items: center; padding: .5em; background: var(--c-text-light); border-radius: .5em; line-height: 1; }
			/* content */
				article .content 	{  }
				/* paragraph */
					article p 	{ margin-bottom: 1em; }
				/* blockquote */
					article blockquote 			{ position: relative; margin: 1.5rem auto; width: fit-content; max-width: 100%; padding: 1.75rem 2.5rem; background: #00000011; border-radius: 1rem; }
					article blockquote p		{ margin: 0; }
					article blockquote:before 	{ content: '\201C'; position: absolute; top: .5rem; left: .75rem; font-size: 4rem; opacity: .1; line-height: 1; }
					article blockquote:after 	{ content: '\201E'; position: absolute; bottom: .5rem; right: .75rem; font-size: 4rem; opacity: .1; line-height: 1; }
				/* ul, ol */
					article ul 			{ margin: 1rem 0; padding-left: 1.1rem; }
					article ul ul		{ list-style-type: disc; margin: 0; }
					article ::marker 	{ font-size: x-small; }
					article ol 			{ margin: 1rem 0; padding-left: 1.1rem; }
					article ol ::marker { font-size: small; }
				/* headings */
					article h2 	{ font-size: var(--fontsize-h2); margin: 1rem 0; font-weight: bold; color: black; }
					article h3 	{ font-size: var(--fontsize-h3); margin: 1rem 0; font-weight: bold; color: black; }
				/* footnotes */
					article .footnotes 				{ display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; font-size: .9rem; }
					article .footnotes ::marker		{ font-size: small; }
					article .footnotes hr			{ border: 0; border-top: 1px solid var(--c-background); }
					article .footnotes ol 			{ padding-left: 2rem; }
				/* wp-caption */
					.wp-caption 		{ margin: 1.5rem auto; max-width: 90%; }
					.wp-caption img		{ box-shadow: 0 0 4px #00000044; }
					.wp-caption-text 	{ margin: 0; font-size: small; color: gray; text-align: center; }
				/* table */
					article table 			{ display: block; overflow-x: auto; font-size: .9rem; line-height: 1.33; border-collapse: collapse; margin: 1rem 0; }
					article thead 			{ border: 2px solid; }
					article tbody 			{ border: 2px solid; border-top: 0 solid; }
					article tbody tr:hover 	{ background: #00000022; }
					article th 				{ vertical-align: bottom; padding: .25rem .5rem; }
					article td 				{ vertical-align: top; padding: .25rem .5rem; }
			/* footer */
				article footer 	{ font-size: .9rem; }
				/* tag */
					article .tags 			{ display: flex; flex-wrap: wrap; gap: .5rem; }
					article .tag 			{ background: var(--c-text-light); line-height: 1; border-radius: .25em; padding: .3rem .5rem; font-weight: 400; }
					article .tag a			{ color: var(--c-text); }
					article .tag a:hover	{ text-decoration: none; }
		/* entry */
			.entry 					{ display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; list-style: none; }
			/* header */
				.entry-header 			{ display: flex; gap: .5em; align-items: center; padding: 1.5rem; background: darkslategray; color: white; font-weight: 600; }
				.entry-header a			{ color: white; }
				.entry-header .ff_mso	{ font-size: large; }
				.entry-header small		{ color: lightgray; }
			/* item */
				.entry .item 		{ line-height: 1.5; }
			/* pagination */
				.pagination 			{ display: grid; grid-template-columns: 3rem auto 3rem; font-weight: bold; padding: 0; line-height: 1; border: 0 solid lightgray; border-width: 1px 0; }
				.pagination > span		{ padding: 1rem; }
				.pagination a			{ color: black; }
				.pagination a:hover		{ text-decoration: none; }
				.pagination .pages		{ text-align: center; border: 0 solid lightgray; border-width: 0 1px; }
				.pagination .ff-mso a	{ font-size: large; }
		/* widgets - article bottom */
			.widgets.ab 	{ padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
			/* share this */
				.widget.share  			{  }
				.widget.share .button 	{ cursor: pointer; border-radius: .25rem; background: var(--c-link); color: white; line-height: 1; padding: .15rem .3rem; font-size: small; font-weight: 700; }
	/* side */
		.site.side 	{ box-shadow: none; }
	/* footer */
		.site.footer 	{ font-size: .9rem; box-shadow: none; }
	/* widgets */

@media screen and (min-width: 480px) {
	/* site */
		/* header */
			.site.header .inner 	{ grid-template-areas: ' left right ' ' left bottom '; grid-template-columns: auto auto; }
			/* left */
				.custom-logo 	{ max-width: 64px; max-height: 64px; }
}
@media screen and (min-width: calc(1278px + 6rem)) {
	body 	{ display: grid; grid-template-areas: ' header body side ' ' . footer . '; grid-template-columns: calc(250px + 3rem) calc(728px + 3rem) 1fr; }
	/* site */
		.site.header 	{ grid-area: header; position: relative; } 
		.site.body 		{ grid-area: body; } 
		.site.side 		{ grid-area: side; } 
		.site.footer 	{ grid-area: footer; } 
		/* header */
			.site.header .inner 	{ display: flex; flex-direction: column; text-align: right; position: sticky; top: 1.5rem; gap: 1.5rem; }
			/* nav */
				.site.header .menu 				{ display: flex; flex-direction: column; text-align: right; margin: 0; width: 100%; gap: 1rem; }
				.site.header .menu-item:after 	{ content: ''; }
		/* body */
			/* content */
				.alignright 	{ float: right; margin: .5rem; margin-left: 1rem; max-width: 300px; }
}