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

@font-face {
    font-family: 'YesGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_13@1.0/YESGothic-Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'YesGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_13@1.0/YESGothic-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

:root {
	--c-black: 		#1F1F1F;
	--c-white: 		#FFF;
	--c-yellow: 	#FFBB00;
	--c-text: 		var(--c-black);
	--ff-mso: 		'Material Symbols Outlined';
}

html 	{ margin: 0; padding: 0; background-color: var(--c-white); color: #1F1F1F; font-family: "YesGothic", system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.75; }
body 	{ margin: 0; padding: 0; position: relative; }
a 		{ text-decoration: none; color: blue; }
ul 					{ padding-left: 1.2rem; }
ul ::marker 		{ font-size: small; }
ol 					{ padding-left: 2rem; }
ol ::marker 		{ font-size: .9em; }
li 					{ line-height: 1.5; }
p 					{ margin: 1em 0; }
sup 				{ margin: 0 .5em; font-weight: 500; color: gray; vertical-align: top; }

/* custom html tag */
	text-gray 	{ color: gray; }

.ff-mso, .ff_mso 	{ font-family: var(--ff-mso); font-size: 1.1em; line-height: 1; vertical-align: middle; }

/* site */
	.site 			{ padding: 1rem; }
	.site > .inner 	{ margin: 0 auto; width: 100%; max-width: calc(728px + 2rem); }
	/* header */
		.site.header 		{ display: flex; align-items: center; justify-content: space-between; background: #00000008; line-height: 1;  }
			/* left */
				.custom-logo-link 	{ display: inline-flex; align-items: center; gap: .33rem; color: var(--c-text); font-weight: bold; }
				.custom-logo 		{ width: 1.5rem; }
	/* body */
		.site.body 			{ margin: 0; display: flex; flex-direction: column; gap: 1.5rem; }
		/* article */
			article 	{ display: flex; flex-direction: column; gap: 1.5rem; }
			/* header */
				article header 	{ margin: 1rem 0; padding: 1rem 0; border-bottom: 1px solid #00000011;  }
				/* title */
					h1 					{ margin: .5rem 0; font-weight: 400; line-height: 1.33; }
					header .excerpt 	{ display: block; margin: .5rem 0; }
				/* aside */
					article header aside 	{ display: flex; align-items: center; gap: .5em; font-size: .9rem; }
			/* content */
				/* headings */
					h2 	{ }
					h3 	{ }
				/* wp-caption */
					.wp-caption 		{ max-width: 100%; margin: 1rem auto; }
					.wp-caption-text 	{ margin: 0; font-size: .9rem; color: gray; text-align: center; }
				/* footnotes */
					.footnotes 		{ clear: both; margin: 3rem 0; font-size: .9rem; }
					.footnotes hr 	{ margin: 1rem 0; border: 0; border-top: 1px dashed; }
				/* etc */
			/* footer */
				/* tags */
					.tags 			{ display: flex; gap: .5em; font-size: .9rem; flex-wrap: wrap; align-items: center; }
					a[rel="tag"] 	{ white-space: nowrap; }
		/* entry */
			.entry 	{ margin: 0; padding: 0; list-style: none; }
				/* header */
					.entry .header 	{ padding: 1rem 0; font-size: large; font-weight: 500; border-bottom: 1px solid;  }
				/* item */
					.entry .item 		{ padding: 1rem 0; border-bottom: 1px solid #00000018;  }
					.entry .excerpt 	{ display: block; }
				/* footer */
					.entry .footer 	{ padding: 1rem 0; font-size: small; text-align: center; color: lightgray;  }
				/* pagination */
					.nav-links 				{ display: flex; flex-wrap: wrap; align-items: center; gap: .5em; padding: 1em 0; place-content: flex-end; font-size: .9em; }
					.page-numbers 			{ display: inline-block; line-height: 1; padding :.5em; text-align: center; min-width: 1em; background: #00000008; border-radius: 1em; border: 1px solid #00000011; color: black; }
					.page-numbers.dots 		{ background: transparent; border: 0; }
					.page-numbers.current 	{ background: black; color: white; font-weight: bold; }
					a.page-numbers:hover 	{ background: #00000011; }
		/* no post */
			.nopost 	{ font-weight: bold; text-transform: uppercase; }
	/* footer */
		.site.footer 	{ display: flex; align-items: center; justify-content: space-between; font-size: small; background: black; color: white; }
	/* widgets */
		.widgets 		{ margin: 0; padding: 1.5rem 1rem; background: #00000008; }
		.widgets .inner	{ margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; font-size: .9rem; }
		.widget-title 	{ margin: 0; font-weight: bold; }
	/* float */
		.float 	{ position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; }
		.float .button 	{ border: 1px solid #00000022; backdrop-filter: blur(4px); }
/* global */
	/* icon */
		.admin:before 	{ font-family: var(--ff-mso); content: 'settings'; }
		.edit:before 	{ font-family: var(--ff-mso); content: 'edit'; }
		.random:before 	{ font-family: var(--ff-mso); content: 'shuffle'; }
	/* button */
		.borderbutton, a[rel="tag"] { display: inline-flex; align-items: center; gap: .15em; border: 1px solid #00000022; line-height: 1; padding: .5em; border-radius: .5em; color: #1f1f1f; }
		a[rel="tag"]:hover 			{ background: #00000009; }
		.borderbutton 				{ background: #ffffff88; }
		.borderbutton:hover 		{ background: #ffffff; }
	/* search form */
		.search-form 	{ display: flex; gap: .25em; border: 1px solid lightgray; max-width: 300px; border-radius: .25em; justify-content: space-between; margin: 1.5rem auto; width: 100%; box-sizing: border-box; background: white; }
		.search-field 	{ border: 0; background: transparent; padding: .5em; width: calc(100% - 2rem - .5em); }
		.search-submit 	{ border: 0; background: transparent; cursor: pointer; padding: .5em; }
		
@media screen and (min-width: 660px) {
	/* site */
		/* body */
			/* article */
				/* content */
					/* wp-caption */
						.alignright 	{ float: right; margin: 1rem 0 1rem 1.5rem; }
}