/*

Author: Achmad Nur Widhiyanto
Description: theme for blog.masnuy.com
url: http://blog.masnuy.com
Version: 2025

*/
@import url("fonts.css");
:root {
  /* Base */
  --black: #000000;
  --white: #ffffff;
  --warm-white: #faf8f7;
  --gray-900: #333333;
  --gray-700: #696969;
  --gray-500: #999999;
  --gray-300: #dde0e3;
  --gray-200: #dadbe3;
  --gray-100: #afb0bb;
  --gray-50: #eeeeee;

  /* Accent */
  --bluegray: #4f6367;
  --red: #ff7474;
  --yel-sel: rgba(251, 246, 35, 0.5);
  --cap: #7f8c8d;
  --slash: #cccccc;

  /* Background */
  --bg: #fafafa;
  --bg-menu: rgba(255, 255, 255, 0.9);
  --bg-in: rgba(255, 255, 255, 0.1);
  --bg-grad: hsla(48, 70%, 78%, 0.1);

  /* Selection */
  --sel-txt: #2b2b2b;
  --sel-txt-alt: #000000;

  /* Base */
  --color-bg: #f9f5eb;
  --color-surface: #f1eadc;        /* slightly darker than bg for cards */
  --color-border: #eee6d6;

  /* Text */
  --color-text-primary: #2f2a24;   /* strong readable dark */
  --color-text-secondary: #6b645c; /* muted text */
  --color-text-inverse: #ffffff;

  /* Earthy accents */
  --color-primary: #7a8f6b;        /* olive green */
  --color-primary-hover: #657a59;

  --color-secondary: #c97b63;      /* terracotta */
  --color-secondary-hover: #b46852;

  /* Extra accents */
  --color-accent: #a3b18a;         /* sage green */
  --color-accent-strong: #6b4f3a;  /* warm brown */

  /* States */
  --color-success: #6a994e;
  --color-warning: #dda15e;
  --color-error: #bc4749;

  /* Shadows */
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.06);

}

/* Text Colors 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* --salt */
::selection										{ color: var(--black); background: var(--yel-sel);  }
::-moz-selection									{ color: var(--black); background: var(--yel-sel);  }
/* --gray-900 */
body,h1, h2, h3, h4, h5, h6,input, textarea, select, .single .post-meta, .post-title a, .post-title a:hover { color: var(--gray-900); }
/* --gray-700 */
span, li, dt, dd, blockquote, #navigation li a 						{ color: var(--gray-700); }
/*  --gray-500 */
input::placeholder, textarea::placeholder						{ color: var(--gray-500); }
/* --bluegray */
a											{ color: var(--bluegray); }
/* --red */
a:hover											{ color: var(--red); }
/* --white */
button, input[type="submit"], input[type="button"]					{ color: var(--white); }
/* --black */
code, pre										{ color: var(--black); }
/* --cap */
small, figcaption									{ color: var(--cap); }
figure {     margin: 0 0 5% 0; }
figure img { margin: 0 0 15px 0; }
figure figcaption { text-align: center;     font-style: italic; }

/* Background Colors
------------------------------------------------------------------------------------*/
/* --white */
html											{ background-color: var(--warm-white); }
input, textarea, select									{ background-color: var(--white); }
/* --bluegray */
button, input[type="submit"], input[type="button"]					{ background-color: var(--bluegray); }
/* --gray-700 */
button:hover										{ background-color: var(--gray-700); }
/* --g300 */
code, pre										{ background-color: var(--g300); }
/* --bgi */
blockquote										{ background-color: var(--bgi); }
/* --ysel */

/* Borders
------------------------------------------------------------------------------------*/
/* --gray-200 */
input, textarea, select, .blogger-comment-from-post					{ border: 1px solid var(--gray-200); }
blockquote										{ border-left: 4px solid var(--gray-200); }
/* --slash */
hr											{ border-color: var(--slash); }
button, input[type="submit"],input[type="button"]					{ border: none; }

/* General
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
*											{ margin: 0; padding: 0; }
body:before										{ content: ""; position: absolute; background: url(../images/color-bar.png) center top; top: 0; left: 0; width: 100%; height: 5px; z-index: 100; }
body											{min-height: 100vh;font: 14px/130% "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;display: flex;flex-direction: column;height: 100%;margin: 0;}
ul											{ list-style: none; }
a											{ text-decoration: none; outline: none; }
a:hover											{ text-decoration: underline; cursor: pointer; }
h1, h2											{ word-wrap: break-word; line-height: normal; /* font-family: Georgia, Times, "Times New Roman", serif; */ }
h3											{ font-size: 1.1rem; padding: 15px 0 0.3em; }
p											{ margin: 0 0 10px; }
hr											{ border: none; border-bottom: 1px solid var(--gray-50); height: 1px; margin: 3em 0; width: 100%; }
blockquote										{ margin: 0 0 21px 0; padding: 5px 0 5px 20px; font: italic 14px/21px Georgia, "Times New Roman", Times, serif; }
img											{ vertical-align: middle; }
h1, h2, h3, h4, h5, h6									{ }
#navigation:before,
#navigation:after,
#wmain-menu:before,
#wmain-menu:after									{ display: table; content: " "; clear: both; }
.hidden											{ display: none; }

/* css Uyeee! ------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#content, #menu-wrapper, .footerCopy, .single, #page, #h-title, #footer,
#single .photo .post-image, #single .photo .caption					{ margin: 0 auto; }
#content, #menu-wrapper, .footerCopy							{ width: 92%; max-width: 1200px; }
#content										{ padding: 2% 4%;flex: 1;margin: 3em auto;}
#menu-wrapper										{ padding: 3em 4%; }
.posts											{ width: 70%; float: left;}

/* Header
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#navbar											{ display: none; }
/* Header
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* menu
-----------------------------*/
#main-menu, #footer									{ background-color: rgba(247, 242, 238, 1); }
#wmain-menu										{ padding: 0; width: 100%; }

/* menu
-----------------------------*/
#navigation										{ float: right; font-family: 'Hind', sans-serif; }
#navigation li										{ float: left; line-height: 60px; margin-right:; }
#navigation li:after									{ content: "/"; color: #CCC; }
#navigation li:last-child:after								{ content: " "; }
#navigation li a									{ font-weight: 700; padding: 20px; }
#navigation li a:hover									{ text-decoration: none; color: #FF7474; }
.logo											{ font-size: 2em; line-height: 60px; margin: 0 3% 0 0; float: left; font-family: 'Montserrat', sans-serif; }
.logo a											{ color: #333; }
.logo a:hover										{ text-decoration: none; }
.logo span										{/* opacity: 0.2; */font-weight: 200;}
.search-top										{ float: right !important; display: none !important; }
.search-top input									{ width: 90%; padding: 5%; border-radius: 3px; border: none; background: rgba(255,255,255,.1); }
.search-top input:focus									{ border-color: none; outline: none; outline-color: none; outline-style: none; outline-width: none; }

/* content
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
h1.quote										{ font-size: xxx-large; }
header h1, header h2									{ width: 75%; font-family: 'Poly', serif; }
header h2										{ color: var(--color-text-secondary); padding: 1.5em 0 0.3em; }

/* Gallery */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    gap: 25px;
    padding: 70px 0;
    margin: 70px 0;
    border-bottom: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
}

.gallery figure										{ margin: 0; width: 232px; flex: 0 0 232px; }

.gallery img {
	width: 100%;
	height: auto;
	display: block;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	border: 1px solid #e8e0d0;
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}
.gallery a:hover img {
  filter: grayscale(0%);
}
/* sidebar
-----------------------------*/
#sidebar										{ width: 25%;/* padding: 0 0 0 5%; */float: right;z-index: 9999;position: relative;}
.content {
  display: flex;
  gap: 25px;
}

.sidebar {
  flex: 1;
}
.sidebar h3 										{ padding: 0 0 0.3em; color: var(--color-text-secondary); }
.sidebar ul li										{ margin: .5em 0; }
.sidebar ul li a									{ padding: 1.4em 0; color: var(--color-text-secondary); font-family: auto; }

.bio											{ max-width: calc(3 * 232px + 2 * 25px); }
.bio p											{ font-family: Libre Baskerville; font-size: larger; line-height: 1.4em; color: var(--color-text-secondary); }
/* footer
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#footer											{width: 100%;color: var(--gray-100);}
.footerCopy										{ padding: 1em 4%; }
.footerCopy p										{ margin: 0; }
.footerCopy p a										{ color: var(--gray-100); }

/* --- Base Layout --- */
#main-menu { }
#content { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.posts { flex: 1 1 65%; }
.single .posts { flex: 1 1 100%; }
#sidebar {flex: 1 1 30%;padding: 0;}

img { max-width: 100%; height: auto; }

/* --- Responsive Layout --- */
@media (max-width: 1350px) {
        .single { padding: 0; }
}
@media (max-width: 1180px) {
        .single { padding: 0; }
}
@media (max-width: 1024px) { 
        .posts { flex: 1 1 100%; } 
        #sidebar { flex: 1 1 100%; padding-left: 0; margin-top: 2rem; } 
        .post-title { font-size: 1.75rem; }
}
@media (max-width: 800px) {
        #content {/* margin: 0 auto; *//* padding: 0 4%; */}
        .posts { column-count: 1; width: 100%; }
        #sidebar { flex: 1 1 100%; width: 100%; } 
        #main-menu { position: relative; width: 90%; padding: 30px 5% 30px; }
        .logo { width: 100%; margin: 0; text-align: left; }
        #navigation { float: none; font-family: 'Hind', sans-serif; text-align: left; margin-top: 10px; }
        #navigation li { float: none; display: inline; line-height: 60px; margin: 0; }
        #navigation li a { padding: 0 10px; font-size: 90%; }
        #navigation li:first-child a { padding: 0 10px 0 0; font-size: 90%; }
        .single .post, .single .post-content, .single .post-head, .single .post-content p { width: 100%; margin: 0; padding: 0; }
        .single .post-content p { width: 100%; margin: 0; padding: 0 0 2em 0; }
        .single .post-head {padding-bottom: 2em;}
        .single .post-title { font-size: 2.5em; text-align: left; padding: 0 0 2% 0; }
        .single .post-meta { position: relative; }
        .single .post-meta time, .single .post-labels a, .single p a { display: inline; }
        #comments { margin: 0; }
        #comments-block ul li { padding: 0; }
        #comments-block .avatar-image-container	{ display: none; }
}
@media (max-width: 768px) {
        #content {flex-direction: column;/* padding: 0 5%; */width: 90%;}
        .post-title { font-size: 1.5rem; text-align: left; }
        #content-box .post:first-child .post-title { font-size: 200%; font-weight: bolder; }
	.single .post-content h2 { padding: 0; }
	.single .post-content h3 { padding: 0.5em 0; }
	.single .post-content ul { padding: 0 0 1.3em 0; }
        .logo { width: 100%; font-size: 300%; text-align: left; float: none; }
        #navigation { text-align: left; float: none; }
        #navigation li { display: inline-block; margin: 0 5px 0 0; float: none; }
        #navigation li a { padding: 0 5px 0 0; font-size: 90%; }
}
@media (max-width: 480px) { body { font-size: 15px; } .post-title { font-size: 1.25rem; } #navigation li a { font-size: 80%; } }
@media screen and (max-width: 376px) { .posts { column-count: 1; } }
/* Portrait iPhone 5 */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) { /* Custom styles can go here */ }