/*
Theme Name: KarateKyohanBlogThemeModern
Theme URI: https://karate-kyohan.de
Author: Holger Nietzold AI assisted by ChatGPT
Description: A modern, minimal WordPress theme for the Karate Kyohan Blog.
Version: 2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: karatekyohanblogtheme
Tags: blog, minimal, responsive, karate, traditional
*/
a {text-decoration: none; color: #AD0000; font-weight: 600; color: #AD0000; text-decoration: none;}
a:hover {text-decoration: underline;}

body {font-family: 'Lato', sans-serif; margin: 0; background: url(images/ricepaper2.png) repeat; color: #333;}
header {position: sticky; top: 0; background: rgba(255,255,255,0.95); box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem 2rem; z-index: 1000;}
header nav ul {list-style: none; display: flex; gap: 2rem; justify-content: center; padding: 0; margin: 0;}
header nav a {font-size: 1.25rem;}

.hero {background: url(images/dirty_old_shirt.png) center/cover no-repeat; height: 20vh; display: flex; align-items: center; justify-content: center; color: white; text-align: left; padding: 1rem;}
.hero-inner {display: flex; align-items: center; gap: 1.5rem;}
.hero img {width: 12rem; height: auto;}
.hero-text h1 {font-size: 6rem; font-family: Georgia; font-variant: small-caps; margin: 0; color: #E8E9E1;}
.hero-text h2 {font-size: 3rem; font-family: Georgia; font-variant: small-caps; margin: 0; color: #E8E9E1;}

.container {display: grid; grid-template-columns: 3fr 1fr; gap: 2rem; padding: 5rem;}
.posts-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); gap: 1.5rem;}

.post-card-wrapper {background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.5); transition: transform 0.2s; padding: 1rem;}
.post-card-wrapper:hover {transform: translateY(-5px);}

.post-card-header {border-bottom: 0.1rem solid #CACACA; color: #444; font-size: 0.85rem; height: 2rem; margin: 0 0 1.25rem;}

.post-card-content {padding: 1rem;}
.post-card-content h3 {margin: 0 0 0.5rem; color: #333;}
.post-card-content p {margin: 1rem 0 1rem;}

.post-card-footer {border-top: 0.1rem solid #CACACA; color: #444; font-size: 0.85rem ; height: 2rem; margin: 1.25rem 0 0;}

.post-content-wrapper {background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.5); transition: transform 0.2s; padding: 6rem}
.post-content-wrapper h1 {margin: 0.5rem 0 0.5rem; color: #AD0000; font-size: 1.75rem;}

.post-content-header {border-bottom: 0.1rem solid #CACACA; color: #444; font-size: 0.85rem; height: 2rem; margin: 0 0 1.25rem;}

.post-content {padding-top: 1rem;}
.post-content p {margin: 1rem 0 1rem; font-size: 1.1rem;}

.post-content-footer {border-top: 0.1rem solid #CACACA; color: #444; font-size: 0.85rem ; height: 2rem; margin: 1.25rem 0 0;}

.fl {float: left;}
.fr {float: right;}

aside {background: #fff; padding: 1rem; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.5);}

blockquote{	margin: 2rem; width: 75%;font-style: italic;}
blockquote:after{color: #ababab;content: close-quote;float: right;font: 3em/36px Times,serif;margin-right: -3rem;margin-top: -2rem;}
blockquote:before {color: #ababab;content:open-quote;float: left;font: 3em/36px Times,serif;margin-left: -3rem;margin-top: -2rem;}

/*Pagination*/
nav {text-align: center; clear: both;}
nav .wp-pagenavi {padding-top: 2rem; font-size: 1.1rem; color: #444; margin-bottom: 2rem;}
nav .wp-pagenavi a, .wp-pagenavi span {text-decoration: none;border: 0.2rem solid #444; padding: 0.25rem 0.5rem; margin-right: 0.5rem;}
nav .wp-pagenavi a:hover, .wp-pagenavi span.current {border-color: #444; background-color: #AD0000; color: #fff;}
nav .wp-pagenavi span.current {font-weight: bold;}
nav span .pages{padding: 0.25rem; margin: 0.25rem 0.5rem; border: 0.2rem solid #444;}

/*Comments*/

#comments div.comments {margin: 0; padding: 0;}
#comments ol, ul{list-style-type: none; margin: 0; padding: 0;}
#comments .comment-body{margin: 1.5rem 0 1.5rem; border-bottom: 0.1rem dotted #A5ACB9;}
	
#comments h3 {margin: 4rem 0 1.25rem 0; color: #fff; font-size: 1.5rem; letter-spacing: 0.1rem; padding: 0.7rem 1.2rem; font-weight: bold; background: #AD0000;}
#comments .comment-author img {float: left; height: 4rem; width: 4rem; margin: 0.25rem 1.5rem 1.5rem 0.25rem;}
#comments .comment-author .says {display: none;}
#comments .comment-author .fn {line-height: 2.2rem; color: #333; font-weight: bold; font-size: 1.3rem; letter-spacing: 0.1rem; font-style: normal;}
#comments .comment-meta{font-size: 1.3rem; margin-bottom: 2rem;}
#comments .children{margin-top: 1.5rem; margin-left: 2.5rem;}
#comments .children .comment {background: #fff;}
#comments .children .comment ul .comment {background: #f5f5f5;}
#comments .comment-content{ clear: both;	margin: 2.5rem 1.5rem 1.5rem 0; font-size: 1.2rem;}
#comments .comment-reply-link {margin-bottom: 1.5rem; font-size: 1.2rem; font-weight: bold;}

#comment-notes{margin: 1.2rem 0 1.2rem;}

.comment-form p {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

.comment-form label {
  font-weight: bold;
  margin-bottom: 0.4rem;
  font-size: 1rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  padding: 0.6rem;
  border: 1px solid #AD0000;
  border-radius: 6px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.comment-form textarea {
  min-height: 150px;
  resize: vertical;
}

.comment-form input[type="submit"] {
  background-color: #AD0000;
  color: white;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

.comment-form input[type="submit"]:hover {
  background-color: #285580;
}

footer {width: 100%; padding: 1rem 0; text-align: center;}
footer p {margin: 0; display: inline-block;}
footer .span-left,
footer .span-right {margin: 0 5px;}