/*gami-tea.css v0.7c*/
html {
    background: #e8f4f4; /* Light mode background for the entire page */
    transition: background 0.3s ease, color 0.3s ease;
	overflow-y: auto; /* Default scrolling behavior */
    scrollbar-gutter: stable;
	overflow-x: hidden;
}
header {
    font-size: 0.8em;
    padding: 0;
    margin: 0;
    text-align: right;
    font-family: "Courier New", Courier, monospace;
}
header p {
    margin: 0px 0px 5px 0px;
    line-height: 1;
    color: #437070; 
    transition: color 0.3s ease;
  }
body {
    font-family: Arial, sans-serif;
    background: transparent; 
    color: #333;
    max-width: 800px;
    margin: auto;
    padding: 20px 1rem;
    transition: background 0.3s ease, color 0.3s ease;
}
h1 { 
    color: #437070; 
    transition: color 0.3s ease;
    
}
h2 { 
    color: #437070; 
    transition: color 0.3s ease;
}
h3 { 
    color: #284040; 
    transition: color 0.3s ease;
}
nav {
    margin: 0 0 5px 0;
    height: 30px;
    padding-bottom: 10px;
	font-size: 1.1em;
    display: flex; /* Make the nav a flex container */
    justify-content: space-between; /* Push the first group to the left, the last item to the right */
    align-items: flex-end;
}
.nav-links {
    display: flex; /* Make the nav a flex container */
    align-items: flex-end; 
    gap: 15px; /* Adjust spacing between links */
    flex-shrink: 1;
}
nav a { 
    margin-right: 15px;
    color: #437070; 
    text-decoration: none;
    padding-top: 0px;
    background: linear-gradient(#99ccaa,#333) center bottom;
    background-size: 0% 2px; /*width:0% height:2px*/
    background-repeat:no-repeat; 
    transition: all 0.3s ease;
    vertical-align: text-top;	
}
nav a:hover {
    color: #5b9a9a; 
    text-decoration: none;
    background-size: 100% 2px; /*width:100% height:2px*/
}
.nav-title {
    display: inline;
    margin: 0;
    padding-bottom: 1px;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1;
}
.nav-title a {
    background-size: 0% 2px; 
    transition: all 0.3s ease;
    vertical-align: text-top;	
}
.nav-title a:hover {
    color: #5b9a9a;
    text-decoration: none;
    background-size: 100% 2px; 
}
.time {
    font-family: monospace;
    margin: 5px 0;
}
.sho {
    margin-top: 1.25rem; /* A magical number */
}
html.dark .sho {
    color: #d1d1d1; 
}
.content { 
    min-height: 200px; 
    background: #f1f9f9; /* Slightly lighter than html bg */
    color: #333;
	position: relative;
    transition: background 0.3s ease, color 0.3s ease;
}
.content::before {
    content: '';
    position: absolute;
    top: -1.25rem;
    bottom: -1.25rem;
    left: -1.25rem;
    right: -1.25rem;
    background: #f1f9f9;
    z-index: -1;
	transition: background 0.3s ease; /* Match .content transition */
}
.content hr { 
    display: block;
    height: 1px;
    border: 0;
    background-color: #437070;
}
html.dark .content hr {
    background-color: #436e70;
}  
.flowtext { 
    font-family: Georgia, serif;
	background: #f1f9f9;
    color: #333;
    max-width: 800px;
    margin: auto;
    padding: 20px;
	border: 1px solid #437070;
    box-shadow: 0px 0px 5px rgba(67, 112, 110, 0.3);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.flowtext p {
    text-indent: 2.5rem; /* Indent the first line of each paragraph */
    line-height: 1.7;
}
.quote {
    margin: 20px 40px; /* Indent the quote 40px on left/right, 20px top/bottom */
    padding: 0 10px;
    color: #555;
    font-family: "Courier New", Courier, monospace;
}
.flowtext .quote {
    text-indent: 0; /* Override the text-indent from .flowtext p */
}
.flowtext h3 {
    font-size: 1.2em;
    margin: 0.5em 0;
    color: #333;
    transition: color 0.3s ease;
}
.flowtext-img {
    width: 100%;
    height: auto;
}
.content .testcolor {
    color: #a51;
}

.content a.hlink, .flowtext a.hlink {
    text-decoration: none; 
    color: inherit; 
    cursor: default; 
    transition: none; 
}

.content a.hlink:hover, .flowtext a.hlink:hover {
    text-decoration: none; 
    color: inherit; 
    cursor: text; 
}

html.dark .content a.hlink, html.dark .flowtext a.hlink {
    text-decoration: none;
    color: inherit; 
    cursor: text;
    transition: none;
}

html.dark .content a.hlink:hover, html.dark .flowtext a.hlink:hover {
    text-decoration: none;
    color: inherit;
    cursor: text;
}

footer {
    margin-top: 20px;
	padding-top: 5px;
    font-size: 0.9em;
    text-align: center;
}
footer a { 
    color: #437070;
    text-decoration: none;
    transition: color 0.3s ease;	
}
footer a:hover {
    text-decoration: underline; 
}
/* Base styles for all links */
a {
    color: #386161;
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: #5b9a95;
    text-decoration: underline;
}
.genre-cloud{
    margin: 20px 0;
    font-size: 0.9em;
}
.genre-cloud .genre {
    margin-right: 10px;
    color: #437070;
    text-decoration: none;
}
.genre-cloud .genre:hover {
    text-decoration: underline;
}
.tag-cloud {
    margin: 10px 0;
    font-size: 0.9em;
}
.tag-cloud .tag {
    margin-right: 10px;
    color: #437070;
    text-decoration: none;
}
.tag-cloud .tag:hover {
    text-decoration: underline;
}
.post-date {
	transition: 0.3s ease;
}
.post-preview {
	font-family: Georgia, serif;
    margin: 10px 0;
    padding: 10px;
	border: 1px solid #437070;
    background-color: #e8f4f4;
	transition: background-color 0.3s ease;
}
.hon {
    margin: 15px 0; /* Spacing for shelf effect */
    padding: 15px;
    border-bottom: 2px solid #437070; /* Thicker spine line */
    background-color: #e8f4f4; 
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); 
    border-left: 5px solid #5b969a; /* spine edge */
    border-radius: 5px; 
}
html.dark .hon {
    margin: 15px 0; /* Spacing for shelf effect */
    padding: 15px;
    border-bottom: 2px solid #436e70; /* Thicker spine line */
    background-color: #4f5050;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    border-left: 5px solid #99ccaa; /* Spine edge */
    border-radius: 5px; 
}
.hon:last-child {
    border-bottom: none; /* Remove bottom border for the last item */
}
.month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.month-grid a {
    padding: 10px;
    text-align: center;
    border: 1px solid #437070; /* Match theme */
    border-radius: 5px;
    text-decoration: none;
    color: #437070; /* Match theme */
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}
.month-grid a:hover {
    background-color: #ceecea;
    color: #2b4028;
}
.month-grid a.inactive {
    color: #9fc5c5; /* Match theme inactive */
    border-color: #91afb4;
    pointer-events: none;
}
html.dark .month-grid a {
    border: 1px solid #aacccc;
    color: #aacccc;
}
html.dark .month-grid a:hover {
    background-color: #3a3a3a;
    color: #99ccaa;
}
html.dark .month-grid a.inactive {
    color: #666;
    border-color: #666;
    pointer-events: none;
}
/* Dark mode via .dark class toggle */
html.dark a {
    color: #aacccc;
}
html.dark a:hover {
    color: #99ccbb; /* Match nav link hover color */
}
html.dark {
    background: #1c1c1c;
    color: #ddd;
}
html.dark h1 {
    color: #aacccc;
}
html.dark h2 {
    color: #99ccaa;
}
html.dark h3 {
    color: #99ccaa;
}
html.dark header p {
    color: #aacccc;
}
html.dark body {
    margin: 0 auto; /* Restore centering */
    padding: 20px 1rem;
}
html.dark .quote {
    border-left-color: #aacccc;
    color: #ccc;
}
html.dark nav a {
    color: #aacccc;
}
html.dark footer a {
    color: #aacccc;
}
html.dark nav a:hover {
    color: #99ccbb;
}
html.dark .nav-title a {
    color: #cceedd;
}
html.dark .nav-title a:hover {
    color: #99ccbb;
}
html.dark .content {
    background: #2a2a2a; 
    color: #ddd;
}
html.dark .content::before {
    content: '';
    position: absolute;
    top: -1.25rem;
    bottom: -1.25rem;
    left: -1.25rem; /* 20px at 16px root font size */
    right: -1.25rem; /* 20px at 16px root font size */
    background: #2a2a2a; /* Match .content dark mode background */
    z-index: -1; /* Place behind the content */
}
html.dark .content h2 {
    color: #aacccc;
}
html.dark .content p {
    color: #ddd;
}
html.dark .flowtext {
    background: #2a2a2a;
    color: #ddd;
    border: 1px solid #aacccc;
    box-shadow: 0px 0px 5px rgba(170, 204, 204, 0.3);
}
body.dark .post h3 {
    color: #ddd;
}
html.dark .tag-cloud .tag {
    color: #aacccc;
}
html.dark .tag-cloud .tag:hover {
    color: #99ccbb;
}
html.dark .post-preview {
    border: 1px solid #aacccc;
	background-color: #292929;
}
html.dark .genre-cloud .genre {
    color: #aacccc;
}
html.dark .genre-cloud .genre:hover {
    color: #99ccaa;
}
/* Toggle button styles */
#theme-toggle {
    background: none;
    border: none;
    color: #4a7043;
    cursor: pointer;
    font-size: 1.1em;
    transition: color 0.3s ease, transform 0.2s ease;
}
#theme-toggle:hover {
    color: #8a9a5b;
    transform: scale(1.2);
}
html.dark #theme-toggle {
    color: #aacccc;
}
html.dark #theme-toggle:hover {
    color: #99ccaa;
}
/* Automatic dark mode via user preference commented out until fixed*/
/*@media (prefers-color-scheme: dark) {
    html:not(.dark) {
        background: #1c1c1c;
        color: #ddd;
    }
	html:not(.dark) header {
    color: #ddd;
	}
    html:not(.dark) h1 {
        color: #aacccc;
    }
    html:not(.dark) h3 {
        color: #99ccaa;
    }
    html:not(.dark) nav a {
	    color: #aacccc;
	}
    html:not(.dark) footer a {
        color: #aacccc;
    }
    html:not(.dark) .nav-title a {
        color: #cceedd;
    }
    html:not(.dark) .nav-title a:hover {
        color: #99ccaa;
    }
    html:not(.dark) .content {
        background: #2a2a2a;
        color: #ddd;
    }
    html:not(.dark) .content h2 {
        color: #aacccc;
    }
    html:not(.dark) .content p {
        color: #ddd;
    }
    html:not(.dark) .flowtext {
        background: #2a2a2a;
        color: #ddd;
        border: 1px solid #aacccc;
        box-shadow: 0 0 5px rgba(170, 204, 204, 0.3);
    }
}*/
/* Mobile responsiveness */
@media (max-width: 650px) {
    html {
        overflow-x: scroll;
    }
    header {
        font-size: 0.7em;
    }
    nav {
        font-size: 0.8em;
        height: 20px;
    }
    nav a {
        margin-right: 5px;
    }
    .nav-links {
        gap: 2px; 
    }
    .flowtext {
        padding: 15px;
        font-size: 0.9em;
    }
	.quote {
        margin: 15px 20px; /* Reduce indentation on smaller screens */
        padding: 0 5px;
    }
}
@media (max-width: 442px) { 
    nav { 
        height: 30px;
        display: inline-block;
        justify-content: safe;
    }
    .nav-links {
        flex-shrink: 2;
        display: inline-block;
        justify-content: safe;
    }    
}