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

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

:root {
	--ff-mso: 'Material Symbols Sharp';
}

*, :before, :after 	{ box-sizing: border-box; margin: 0; padding: 0; }

html 		{ background: #272727; color: white; font-family: 'Nanum Gothic', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; }
body 		{ position: relative; }
a 			{ text-decoration: none; }
ul 			{ padding-left: 1.1rem; }
ul ::marker { font-size: x-small; }
ol 			{ padding-left: 2rem; }
ol ::marker	{ font-size: .9rem; }

/* preset */
	/* background */
		.hover:hover 	{ background: #bbbbbb44; }
	/* color */
		.darkgray 	{ color: darkgray; }
	/* font */
		/* family */
			.ff-mso 	{ font-family: var(--ff-mso); }
			.ff_mso 	{ font-family: var(--ff-mso); }
		/* size */
			.fs_small 	{ font-size: small; }

/* site */
	.site 	{ background: #272727; }
	/* header */
		.site.header 					{ display: flex; align-items: center; justify-content: space-between; padding: 0 .5rem; color: white; line-height: 1; background: black; }
		.site.header .custom-logo-link 	{ display: inline-block; padding: .5em 0; }
		.site.header .custom-logo 		{ width: auto; height: 2rem; }
		/* right */
			/* button */
				.site.header .button 		{ display: inline-block; padding: .5rem; font-size: 1.25rem; color: white; }
	/* nav */
		.site.nav 				{  }
		.site.nav .menu			{ max-width: 100%; overflow-x: auto; list-style: none; display: flex; line-height: 1; width: fit-content; margin: 0 auto; padding: 0; }
		.site.nav .menu-item	{ padding: .75rem; }
		.site.nav .menu-item a	{ color: lightgray; white-space: nowrap; }
		.site.nav a:hover		{ color: white; }
	/* body */
		.site.body 	{ background: #e8e8e8; } 
		main 			{ display: flex; flex-direction: column; gap: 1rem; max-width: calc(1200px + 2rem); padding: 1rem; color: #272727; }
		.archive main 	{ max-width: calc(980px + 2rem); }
		/* searchform */
			.searchform 		{ display: flex; margin-bottom: 1rem; width: 100%; border: 1px solid gray; background: white; align-items: center; }
			.searchform input 	{ border: 0; background: transparent; width: 100%; font-size: 1rem; padding: .75rem; }
			.searchform button 	{ border: 0; background: transparent; font-size: 1rem; padding: .75rem; font-weight: bold; }
		/* meta */
			main .meta 			{ display: flex; font-size: 1.2rem; font-weight: bold; color: #272727; line-height: 1; }
			main .meta a		{ padding: .5rem; }
			/* category */
				.meta .cat 			{ display: inline-flex; align-items: center; gap: .25rem; color: #272727; }
				.meta .cat:before 	{ font-family: var(--ff-mso); content: 'folder'; }
		/* article */
			article 			{ display: flex; flex-direction: column; border-top: 2px solid #272727; background: white; color: #272727; }
			article > .inner 	{ padding: 1rem; }
			/* header */
				article header	{ border-bottom: 1px solid lightgray; }
				h1 	{ font-size: 2rem; font-weight: bold; line-height: 1.33; }
			/* content */
				h2 				{ margin: 1em 0 1rem; font-weight: bold; }
				h3 				{ margin: 1em 0 1rem; font-weight: bold; }
				article p 		{ margin: 1em 0; }
				article sup 	{ margin: 0 .33em; }
				/* wp-cpation */
					.wp-caption 		{ margin: 1rem auto; max-width: 100%; line-height: 1; }
					.wp-caption-text 	{ margin: .25em 0; font-size: small; line-height: 1.5; color: gray; text-align: center; }
				/* footnote */
					.footnotes 		{ font-size: .9rem; }
					.footnotes hr 	{ margin: 1rem 0; border: 0; border-top: 1px solid lightgray; }
			/* footer */
				article footer 	{ background: #00000011; }
				/* tags */
					.tags 		{ display: flex; gap: .5em; flex-wrap: wrap; line-height: 1; font-size: .9rem; }
					a[rel=tag] 	{ display: inline-block; color: #272727; padding: .5em; background: #00000011; white-space: nowrap; }
		/* entry */
			.entry 					{ display: flex; flex-direction: column; gap: 1rem; padding: 0; list-style-type: none; }
			/* item */
				.entry .item 			{ display: flex; flex-direction: column; gap: .25rem; border-left: 2px solid #272727; padding: .5rem 1rem; background: white; color: #272727; }
				.entry .item a			{ font-weight: bold; color: #272727; margin-right: .5rem; }
				.entry .item .cat		{ color: gray; }
				.entry .item .update	{ display: block; color: gray; }
				.entry .item .excerpt	{ font-size: .95em; }
			/* pagination */
				.pagination 			{ font-size: .9rem; }
				.nav-links 				{ display: flex; align-items: center; line-height: 1; }
				.page-numbers 			{ display: inline-block; min-width: 2em; text-align: center; color: #272727; padding: .5rem; }
				.page-numbers.current 	{ font-weight: bold; background: #00000011; }
	/* footer */
		.site.footer 	{ padding: 1rem; font-size: .9rem; }
	/* etc */
		.tothetop 	{ position: fixed; bottom: 1rem; right: 1rem; font-size: x-large; color: white; background: #88888888; line-height: 1; padding: .33rem; }
		
@media screen and (min-width: calc(300px + 728px + 64px)) {
	/* body */
		body 			{ display: grid; grid-template-areas: 'header header' 'nav body' 'footer footer'; grid-template-columns: calc(300px + 2rem) auto; }
		.site.body 		{ grid-area: body; }
		/* header */
			.site.header 	{ grid-area: header; }
			.site.header button 	{ display: none; }
		/* nav */
			.site.nav 				{ grid-area: nav; position: relative; }
			.site.nav .inner 		{ position: sticky; top: 0; }
			.site.nav .menu 		{ flex-direction: column; margin: 0; width: 100%; }
			.site.nav .menu-item 	{ border-bottom: 1px solid #ffffff22; padding: .75rem 1.5rem; }
			.site.nav .menu-item a	{ display: flex; align-items: center; justify-content: space-between; }
			.site.nav a:after		{ font-family: var(--ff-mso); content: 'keyboard_arrow_right'; }
		/* footer */
			.site.footer 	{ grid-area: footer; padding-left: calc(300px + 2rem + 1rem); }
	.alignright 	{ margin: .5rem 0 1rem .5rem; float: right; max-width: 250px;  }
}