/*
Theme Name: StatRec WPT V3
Theme URI: https://statrec.com
Author: Gruu Family
Author URI: http://gruulab.dothome.co.kr 
Description: Theme for websites from Gruu Family - StatRec 
Version: 3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gruulab 
*/

:root {
	--c-blue-dark: 	#001122;
	--c-silver: 	#E2E8F0;
	--c-white: 		#FFFFFF;
	--c-cyan: 		#00F0FF;
	--c-cyan-dim: 	#00F0FF44;
	--c-yellow: 	#FFDE43;
	--c-white: 		#FFFFFF;
	
	--c-text: 			var(--c-silver);
	--c-text-h: 		var(--c-white);
	--c-text-strong: 	var(--c-yellow);
	--c-background: 	var(--c-blue-dark);
	--c-link: 			var(--c-cyan);
	--c-link-dim: 		var(--c-cyan-dim);
	
	--ff-mso: 		'Material Symbols Outlined';
}

html, body, input 	{ font-family: 'Oxanium', monospace; }

html 	{ background: var(--c-background); color: var(--c-text); font-size: 15px; line-height: 1.75; letter-spacing: .03em; }
body 	{ display: flex; flex-direction: column; }
a 		{ color: var(--c-link); text-decoration: none; }

h1 			{ font-size: 1.75rem; font-weight: normal; color: var(--c-text-strong); text-transform: uppercase; line-height: 1.33; }
h2 			{ font-size: 1.25rem; font-weight: bold; color: var(--c-text-h); text-transform: uppercase; line-height: 1.5; display: flex; gap: .5rem; }
h2:before 	{ font-family: var(--ff-mso); content: '\e837'; font-size: small; line-height: 2; color: var(--c-text-strong); }
h3 			{ font-size: 1rem; font-weight: bold; color: var(--c-text-h); text-transform: uppercase; line-height: 1.5; }

ul 	{ padding-left: 1.1rem; }

summary 	{ cursor: pointer; }

dialog 				{ background: var(--c-background); color: var(--c-text); border: 0; border-radius: .75rem; box-shadow: 0 0 1rem var(--c-link-dim); width: calc(100% - 6rem); max-width: 512px; }
dialog::backdrop 	{ backdrop-filter:blur(8px); }
dialog .inner 		{ display: flex; flex-direction: column; gap: .75rem; }

/* preset */
	/* btn */
		.btn 				{ display: inline-flex; margin: 0; line-height: 1; padding: .33em; font-size: 1.1rem; color: var(--c-link); background: var(--c-link-dim); cursor: pointer; border-radius: .25em; border: 2px solid transparent; }
		.btn:hover 			{ border-color: var(--c-link); }
		.btn:before 		{ font-family: var(--ff-mso); }
		.btn.search:before 	{ content: '\e8b6'; } 
		.btn.close:before 	{ content: '\e5cd'; } 
		.btn.edit:before 	{ content: '\e3c9'; }
		.btn.admin:before 	{ content: '\e8b8'; }
/* site */
	.site 	{ margin: 0; padding: 1rem; }
	/* header */
		.site.header 	{ display: flex; align-items: center; justify-content: space-between; }
		.site.header > .inner 	{ width: 100%; }
		/* left */
			.site.header .left 			{ display: flex; gap: .33rem; line-height: 0; align-items: center; }
			.site.header .custom-logo 	{ width: 1.2rem; height: auto; }
		/* right */
			.site.header .inner.right 	{ display: flex; justify-content: flex-end; gap: .5rem; }
			/* searchform */
				.site.header .searchform 	{ display: flex; gap: .5rem; width: 100%; max-width: 300px; }
				.site.header .search_field 	{ margin: 0; padding: .33rem .5rem; width: 100%; color: var(--c-link); background: var(--c-link-dim); border: 0; border-radius: .25rem; outline-color: var(--c-link); }
			/* buttons */
				.site.header .btns 	{ display: flex; gap: .5rem; justify-content: flex-end; }
	/* body */
		.site.body > .inner 	{ margin: 0 auto; max-width: 980px; }
		/* article */
			/* header */
				/* nav */
					.parents ol 		{ margin: 0; padding: 0; list-style: none; display: flex; }
					.parents li 		{ display: inline-flex; }
					.parents li:after 	{ font-family: var(--ff-mso); content: '\e5cc'; }
	/* footer */
		.site.footer 	{ font-size: .9rem; }
	/* widget */
		.widgets 		{ display: flex; flex-direction: column; gap: 1rem; }
		.widget-title 	{ margin: 0; font-weight: bold; color: var(--c-text-strong); text-transform: uppercase; }
		.widget p 		{ margin: 0; }

@media screen and ( min-width: 1280px ) {
	body 	{ display: grid; grid-template-areas: ' header body sub ' ' header footer footer '; grid-template-columns: 250px minmax(calc(728px + 2rem), 1fr) 1fr; padding: 2rem 0; }
	/* site */
		/* header */
			.site.header 			{ grid-area: header; flex-direction: column; gap: 1rem; align-items: start; justify-content: flex-start; }
			.site.header .right 	{ flex-direction: column; }
		/* body */
			.site.body 	{ grid-area: body; }
		/* sub */
			.site.sub 	{ grid-area: sub; }
		/* footer */
			.site.footer 	{ grid-area: footer; }
}