/*
Theme Name: Kartnic
Author: Niteen Maurya
Description: Kartnic is crafted to be a lightweight and fast WordPress theme, ensuring your site loads quickly and efficiently. A fresh install of Kartnic adds less than 10kb (gzipped) to your page size, making it an excellent choice for performance-conscious users. We fully leverage the block editor (Gutenberg), providing you with greater control over your content creation process. If you prefer using page builders, Kartnic is compatible with major ones like Beaver Builder and Elementor. Our commitment to WordPress coding standards ensures compatibility with well-coded plugins, including WooCommerce. Kartnic is fully responsive, uses valid HTML/CSS, and is translated into multiple languages by our community of users. Some of our features include customizable color controls, dynamic typography, multiple navigation locations, and widget areas.
Version: 3.0.1
Requires at least: 5.0
Tested up to: 6.2
Requires PHP: 7.0
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kartnic
Tags: two-columns, three-columns, one-column, right-sidebar, left-sidebar, footer-widgets, blog, e-commerce, flexible-header, full-width-template, buddypress, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options
Copyright: © 2024 Niteen. All rights reserved.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Reset
# Elements
# Forms
# Links
# Alignments
# Accessibility
# Clearings
# Navigation
    # Mobile Menu
    # Navigation Search
    # Dropdown Menus
    # Sidebar Navigation
    # Navigation Layout
# Post Navigation
# Header
# Post Content
# Widgets
# Content Layout
# Footer
# Featured Images
# Top Bar
# Icons
# Compatibility
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Reset
--------------------------------------------------------------*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	border: 0;
	margin: 0;
	padding: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
	display: block;
}

ol,
ul {
	list-style: none;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline; 
}

/* Underline links in posts, excerpts, comments, and text widgets */
.entry-content a,
.entry-summary a,
.comment-content a,
.widget_text a {
    text-decoration: underline;
}

a img {
	border: 0;
}

.widget { 
	background-color: rgb(255, 255, 255);
	padding: 10px;
	margin-bottom: 10px;
}

.widget ul li {
    list-style-type: none;
    position: relative;
    margin-bottom: .5em;
}

.comments-area,
#content-area,
.post-site-main article,
.post-navigation,
.mobile-drop-navigation,
.page-title,
.sub-menu,
.site,
.site-info,
#cont-site article,

#kartnic-comments,
.custom-footer {
	background-color: rgb(255, 255, 255);
}

.nav-links {
	margin-bottom: 10px;
	background-color: rgb(255, 255, 255);
}
.inside-header,
.inside-site-info,
.footer-1,
#content  {
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
	padding-left: 0px;
	padding-right: 0px;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
body {
	background-color: rgb(240, 240, 244);
}

body,
button,
input,
select,
textarea {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-weight: normal;
	text-transform: none;
	font-size: 17px;
	line-height: 1.5;
}

p {
	margin-bottom: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
}

pre {
	background: rgba(0, 0, 0, 0.05);
	font-family: inherit;
	font-size: inherit;
	line-height: normal;
	margin-bottom: 1.5em;
	padding: 20px;
	overflow: auto;
	max-width: 100%;
}

blockquote {
	border-left: 5px solid rgba(0, 0, 0, 0.05);
	padding: 20px;
	font-size: 1.2em;
	font-style: italic;
	margin: 0 0 1.5em;
	position: relative;
}

blockquote p:last-child {
	margin: 0;
}

table,
th,
td {
	border: 1px solid rgba(0, 0, 0, 0.1);
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 1.5em;
	width: 100%;
}

th,
td {
	padding: 8px;
}

th {
	border-width: 0 1px 1px 0;
}

td {
	border-width: 0 1px 1px 0;
}

hr {
	background-color: rgba(115, 255, 0, 0.1);
	border: 0;
	height: 1px;
	margin-bottom: 40px;
	margin-top: 40px;
}

.entry-title,
.main-entry-title,
.entry-content h1, 
.entry-content h2, 
.entry-content h3, 
.entry-content h4, 
.entry-content h5, 
.entry-content h6 {
	line-height: 1.4em;
	font-family: Arial;
    font-weight: 600;
	text-transform: none;
	margin-bottom: 20px;
}

.main-entry-title {
	font-size: 30px;
}

.entry-title {
	font-size: 28px;
}

.entry-content h1 {
	font-size: 28px;
}

.entry-content h2 {
	font-size: 19px;
}

.entry-content h3 {
	font-size: 17px;
}

.entry-content h4 {
	font-size: 20px;
}

.entry-content h5 {
font-size: 19px;
}

.entry-content h6 {
	font-size: 18px;
}

.entry-content p {
	font-size: 17px;
	line-height: 1.8em;
	color: #000000;
}

h1 {
	font-size: 30px;
	font-style: normal;
	margin-bottom: 20px;
	line-height: 1.2em;
    font-weight: 600;
	text-transform: none;
}

h2 {
	font-size: 19px;
	margin-bottom: 20px;
	line-height: 1.2em;
    font-weight: 500;
	text-transform: none;
}

h3 {
	font-size: 17px;
	margin-bottom: 20px;
	line-height: 1.2em;
	font-weight: 500;
	text-transform: none;
}

h4,
h5,
h6 {
	margin-bottom: 20px;
}

ul,
ol {
	text-decoration: none;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

figure {
	margin: 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

th {
	font-weight: bold;
}

img {
	height: auto;
	max-width: 100%;
}

.thread-even,
.post-categories,
.wp-block-archives li,
.wp-block-categories li {
	list-style: none;
}

.wp-caption {
    max-width: 100%;
    text-align: center;
    margin: 1.5em 0;
}

.wp-caption-text {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: #6c757d;
}

.gallery-caption {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: #6c757d;
}

 

.alignright {
    float: right;
    margin-left: 1.5em;
}


.alignleft {
    float: left;
    margin-right: 1.5em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px); 
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important; 
}


.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar */
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input,
select,
textarea {
	font-size: 100%;
	margin: 0;
	vertical-align: baseline;
	vertical-align: middle;
}

button,
input[type="reset"],
input[type="submit"] {
	border: 1px solid rgb(0, 0, 0);
	background: #000000;
	cursor: pointer;
	-webkit-appearance: button;
	padding: 10px 20px;
	color: #ffffff;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="search"] {
	-webkit-appearance: textfield;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	background: #FAFAFA;
	color: #666;
	border: 1px solid #ccc;
	border-radius: 0px;
	padding: 10px 15px;
	box-sizing: border-box;
	max-width: 100%;
}

textarea {
	overflow: auto;
	vertical-align: top;
	width: 100%;
}

input[type="file"] {
	max-width: 100%;
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/
a:focus, button:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.menu-toggle {
	border: 0;
	padding: 0 10px;
	line-height: 60px;
	margin: 0;
	font-weight: 400;
	text-transform: none;
	font-size: 15px;
	cursor: pointer;
	background-color: transparent;
}

.main-navigation {
	z-index: 100;
	padding: 0;
	clear: both;
	display: block;
}

.sub-menu {
	background-color: #ffffff;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation a {
	padding-left: 10px;
	display: block;
	text-decoration: none;
	font-weight: 400;
	text-transform: none;
	font-size: 15px;
}

.inside-navigation {
	position: relative;
}

.main-navigation li {
	float: left;
	position: relative;
}

.sf-menu > li.menu-item-float-right {
	float: right !important;
}

.nav-float-right .inside-header .main-navigation {
	float: right;
	clear: right;
}

.nav-float-left .inside-header .main-navigation {
	float: left;
	clear: left;
}

.nav-aligned-right .main-navigation:not(.toggled) .menu > li,
.nav-aligned-center .main-navigation:not(.toggled) .menu > li {
	float: none;
	display: inline-block;
}

.nav-aligned-right .main-navigation:not(.toggled) ul,
.nav-aligned-center .main-navigation:not(.toggled) ul {
	letter-spacing: -0.31em;
	font-size: 1em;
}

.nav-aligned-right .main-navigation:not(.toggled) ul li,
.nav-aligned-center .main-navigation:not(.toggled) ul li {
	letter-spacing: normal;
}

.nav-aligned-center .main-navigation {
	text-align: center;
}

.nav-aligned-right .main-navigation {
	text-align: right;
}

.main-navigation li.search-item {
	float: right;
}

.main-navigation .mobile-bar-items a {
	padding-left: 20px;
	padding-right: 20px;
	line-height: 60px;
}

.feather-search {
	height: 1em;
	width: 1em;
	position: relative;
}

/*--------------------------------------------------------------
## Dropdown Menus
--------------------------------------------------------------*/
/* Main Navigation */
.main-navigation {
    display: flex;
}

/* Hide sub-menus by default */
.mobile-drop-navigation .sub-menu {
    display: none;
}

/* Style for the toggle button */
.toggle-button {
    float: right;
    cursor: pointer;
    padding: 5px;
}
 
@media (min-width: 768px) {
	.toggle-button {
		display: none;
	}
}

/* Submenu */
.main-navigation ul ul {
	padding: 20px;
    display: none;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 0;
    top: 100%; /* Position submenu below the parent menu item */
    opacity: 0;
    z-index: 99999;
    width: auto; /* Width according to content */
    padding: 10px; /* Padding */
    text-align: left;
	transition: opacity 200ms ease-in-out, height 200ms ease-in-out;
    pointer-events: none;
    height: 0;
    overflow: hidden; 
} 

/* Show submenu on hover and focus */
.main-navigation:not(.toggled) ul li:hover > ul,
.main-navigation:not(.toggled) ul li:focus-within > ul {
    display: block;
    left: 0;
    top: 100%;
    opacity: 1;
    pointer-events: auto;
    height: auto;
    overflow: visible; 
}

/* Nested submenu */
.main-navigation ul ul ul {
    top: 100%; /* Position nested submenu below the parent submenu */
    left: 0;
}

/* Add arrow icon for submenu */
.main-navigation li.menu-item-has-children > a::after {
    content: '▼'; /* Arrow pointing down */
    margin-left: 5px;
    font-size: 12px;
    color: #000; /* Change color as needed */
}

/* Adjust arrow for nested submenus */
.main-navigation li.menu-item-has-children ul li.menu-item-has-children > a::after {
    content: '▼'; /* Arrow pointing down for nested submenus */
    margin-left: 5px;
    font-size: 12px;
    color: #000; /* Change color as needed */
}

/*--------------------------------------------------------------
## Sidebar Navigation
--------------------------------------------------------------*/
.widget-area .main-navigation li {
	float: none;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
}

.middle-right-bottom {
	margin-top: 10px;
	list-style: none;
}

@media (min-width: 768px) {
    .site-content {
        display: flex;
        gap: 10px;
        width: 100%;
    }

	.sidebar-left .middle-right-bottom {
		flex: 1 1 30%;
		max-width: 30%;
		order: 1; /* Sidebar pehle dikhane ke liye */
	}
	
	.sidebar-left .content-area  {
		flex: 1 1 70%;
		max-width: 70%;
		order: 2; /* Content area baad mein dikhane ke liye */
	}
	
	.sidebar-right .middle-right-bottom {
		flex: 1 1 30%;
		max-width: 30%;
		order: 2; /* Sidebar baad mein dikhane ke liye */
	}
	
	.sidebar-right .content-area  {
		flex: 1 1 70%;
		max-width: 70%;
		order: 1; /* Content area pehle dikhane ke liye */
	}
	
	.sidebar-no-sidebar .middle-right-bottom {
		display: none; /* Sidebar ko hide karne ke liye */
	}
	
	.sidebar-no-sidebar .content-area  {
		flex: 1 1 100%;
		max-width: 100%; /* Content area ko full width karne ke liye */
	}
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.main-navigation {
	display: flex;
	margin-left: auto;
}

#mobile-nav li a {
    display: block;
    text-align: left;
    padding: 0px 15px;
    text-decoration: none;
}

.search-up {
	display: none;
}

.inside-header {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0px 20px 0px 20px;
}

.site-branding .main-title {
	margin: 0;
    font-size: 20px;
    line-height: 1.2em;
    word-wrap: break-word;
    font-weight: 700;
    text-transform: none; 
}

.site-branding .site-description {
	margin: 0;
    line-height: 1.5;
    font-weight: 400;
    text-transform: none;
    font-size: 15px;
}

.site-header   {
	padding: 10px 0px 10px 0px;
	align-items: center;
	line-height: 40px;
}

.site-logo {
	display: inline-block;
	max-width: 100%;
}

.site-header .header-image {
	vertical-align: middle;
}

.header-widget {
	float: right;
	overflow: hidden;
	max-width: 50%;
} 


.header-widget .widget {
	padding: 0 0 20px;
	margin-bottom: 0;
}

.header-widget .widget:last-child {
	padding-bottom: 0;
}

.header-widget .widget-title {
	margin-bottom: 15px;
}

.nav-float-right .header-widget {
	position: relative;
	top: -10px;
}

.nav-float-right .header-widget .widget {
	padding: 0 0 10px;
}

.nav-float-left .inside-header .site-branding,
.nav-float-left .inside-header .site-logo {
	float: right;
	clear: right;
}

.nav-float-left .inside-header:after {
	clear: both;
	content: '';
	display: table;
}

.nav-float-right .inside-header .site-branding {
	display: inline-block;
}

.site-branding-container {
	display: inline-flex;
    align-items: center;
    text-align: left;
    flex-shrink: 1;
}

.site-branding-container img {
	margin-right: 1em;
}

.header-aligned-center .inside-header {
	text-align: center;
}

.header-aligned-right .inside-header {
	text-align: right;
}

.header-aligned-right .site-branding-container {
	text-align: right;
}

.header-aligned-right .site-branding-container .site-logo {
	order: 10;
	margin-right: 0;
	margin-left: 1.5em;
}

/*--------------------------------------------------------------
# Content Layout
--------------------------------------------------------------*/
.post {
	margin: 10px 0px;
}

html input[type="button"] {
	float: right;
	margin-top: 10px;
	font-size: 15px;
	border: 3px solid rgb(255, 255, 255);
	background: #38383a;
	cursor: pointer;
	padding: 10px 20px;
	color: #ffffff;
	border-radius: 0px;
}

.page-title {
	font-size: 26px;
	margin-bottom: 10px;
	padding: 20px;
}

.page-header {
	margin-bottom: 30px;
}

.site-content-area {
	word-wrap: break-word;
	margin-top: 10px;
}

#cont-site article {
	margin-bottom: 10px;
}

/*--------------------------------------------------------------
# Post Content
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.inside-article {
	margin: 10px 0px;
	padding: 10px;
}

.inside-article article {
	margin-bottom: 10px;
}

.page-content:not(:first-child),
.entry-content:not(:first-child),
.entry-summary:not(:first-child) {
	margin-top: 1em;
}

.entry-content ul{
	margin: 0 0 1.5em 3em;
}

.site-content,
.entry-header {
	word-wrap: break-word;
}

.entry-meta {
	font-size: 85%;
	margin-top: .5em;
	line-height: 1.5;
}

footer.entry-meta {
	margin-top: 2em;
}

#content-area {
	margin: 10px 0;
	padding: 10px;
}


/*--------------------------------------------------------------
# Comments
--------------------------------------------------------------*/
#kartnic-comments {
	padding: 10px;
	margin-bottom: 10px;
	text-decoration: none;
}

.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

.comment,
.comment-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
 
.comment-meta .avatar {
	float: left;
	margin-right: 10px;
	border-radius: 50%;
}
 
.comment-content {
	margin-top: 1.5em;
}
 

.comment-metadata .edit-link:before {
	display: none;
}

.comment-author .says {
    display: none;
}


.comment-body {
	padding: 30px 0;
}

.comment-content {
	padding: 30px;
	border: 1px solid rgba(0, 0, 0, 0.05);
}


.comment .children {
	padding-left: 10px;
	margin-top: -0px;
	border-left: 1px solid rgba(0, 0, 0, 0.05);
}

#cancel-comment-reply-link {
	padding-left: 10px;
	font-size: large;
}

#reply-title {
	font-size: large;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.custom-footer {
	padding: 10px;
}

.inside-site-info {
	text-align: center;
	font-size: 15px;
	padding: 20px 0px;
}

.mainn-nafvigation {
	display: none;
}

.custom-footer,
.footer-1 {
	padding: 0px;
}

@media (min-width: 768px) {
.inside-footer-widgets{
	display: flex;
}

.inside-footer-widgets > div {
	flex: 1 1 0;
}

.inside-footer-widgets .widget{
    
    padding: 0px;
    margin-bottom: 0px;
}}

.inside-footer-widgets {
padding: 40px;	
}

@media (max-width: 768px) {
    .inside-footer-widgets {
        flex-direction: column;
    }
}
@media (max-width: 768px) {
    .site-footer .footer-widgets .footer-widgets-container .inside-footer-widgets {
        margin: 0;
    }
}

.sr-form {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10000;
	backdrop-filter: blur(3px);
	transition: opacity 500ms ease;
}

.search-form-search {
	position: fixed;
	z-index: 10000;
}

.main-navigation {
	display: block;
	display: flex;
}

.mmenu-dafr-container a {
	width: 100%;

}

.mobile-main-navigation {
	display: none;
}

@media (max-width: 768px) {
	.main-navigation {
		display: none;
	}
	.mobile-main-navigation {
		display: flex;
		margin-left: auto;	
	}
	.mobile-drop-navigation {
		padding-left: 20px;
		padding-right: 20px;
		line-height: 60px;
	}
	
	.mobile-drop-navigation li {
		list-style: none;
	}
	.hide {
		display: block !important;
	}
}

.open {
	display: block;
}

.openn {
	display: none;
}

.mobile-drop-navigation {
	display: none;
}

.mobile-icon-search-bars {
	display: none;
}
.menu-bar-items {
	display: flex;
}

.menu-bar-items-2 {
	margin-top: 3.5px;
}

.back-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: none;
	background-color: #4b35d7;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	text-align: center;
	z-index: 1000;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.back-to-top:hover {
	opacity: 0.8;
}

/* Keep the search form hidden by default */
.search-form {
    display: none; /* Initially hidden */
    opacity: 0;
    transition: opacity 0.3s ease; /* Optional: smooth transition for opacity */
}

/* When open, show the search form */
.search-form.open {
    display: block; /* Make it visible when the .open class is applied */
    opacity: 1; /* Make the form visible */
}

#menu-bar-item-2, #menu-bar-item {
	cursor: pointer;
}

/* Default styling for post navigation */
.post-navigation {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* If there is no previous or next post, hide the post navigation */
.no-post-navigation .post-navigation {
    display: none;
}


.nav-previous, .nav-next {
    flex: 1;
    text-align: center;
}

.nav-previous a, .nav-next a {
    display: inline-block;
    padding: 10px 20px;
    color: #0073aa;
    text-decoration: none;
    font-size: 14px;
}

.nav-previous a, .nav-next a {
    background-color: transparent; 
    color: #0073aa;
}

.meta-nav {
    font-weight: bold;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 100;
}
.skip-link:focus {
    top: 0;
}

.nav-links {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 20px;
}

.pagination {
    text-align: center;
    margin: 20px 0;
}

.pagination a, .pagination span {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    background-color: #f9f9f9;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination a:hover {
    background-color: #000;
    color: #fff;
}

.pagination .current {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

 
button.mobile-menu-toggle {
    border: 0px;
	background: none;

}

.mobile-menu-toggle {
	padding: 0px;
	margin-left: 10px;
}

.entry-meta {
    font-size: 14px;  
    color: #666; 
    margin-bottom: 20px; 
    display: flex;  
    align-items: center; 
}

.entry-meta .byline {
    display: flex;  
    align-items: center;  
    margin-right: 10px;  
}

.entry-meta .byline img {
    max-width: 32px; 
    height: auto;  
    border-radius: 50%; 
    margin-right: 5px; 
}

.post-image {
    text-align: center;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.post-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.author-posts {
    margin-bottom: 10px;
	padding: 10px;
	background-color: rgb(255, 255, 255);
}

.kartnic-author-card {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 10px;
    text-align: center;
	display: block;
}

.kartnic-author-card h2 {
    font-size: 19px;
	font-weight: 500;
    color: #333;
    margin-bottom: 15px;
}

.kartnic-author-avatar img {
    border-radius: 50%;
    margin-bottom: 10px;
    width: 60px;
    height: 60px; 
}

.kartnic-author-description p {
    color: #555;
	margin-bottom: 10px;
	padding: 0px 20px;
}




/* Контейнер списка постов */
.post-list {
    display: flex;
    flex-direction: column;
    gap: 1px; /* Уменьшаем расстояние между записями */
}

/* Каждый пост в списке */
.post-item {
    padding: 5px 10px; /* Уменьшаем внутренние отступы */
    border-bottom: 1px solid #ddd;
}

/* Контейнер для изображения и текста */
.custom-entry-content {
    display: flex;
    align-items: center;
}

/* Контейнер для изображения */
.post-image {
    width: 100%;
    height: auto;
    margin-right: 0;
    margin-bottom: 10px;
    max-width: 100%; /* Предотвращает растяжение больше контейнера */
}

/* Картинка поста */
.post-image img {
    width: 100%;
    height: auto;
    max-width: 100%; /* Ограничивает максимальную ширину */
    max-height: 3000px;
    object-fit: cover;
    display: block;
}

/* Контейнер для текста */
.entry-text {
    flex: 1;
}

/* Заголовок поста */
.entry-title {
    margin-bottom: 3px; /* Уменьшаем отступ под заголовком */
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 17px;
}

/* Метаданные (дата) */
.entry-meta {
    margin-bottom: 3px; /* Уменьшаем отступ под датой */
    font-size: 14px;
    color: #666;
}

/* Описание поста */
.entry-text p {
    margin-top: 5; /* Убираем верхний отступ у текста */
    margin-bottom: 5; /* Убираем нижний отступ у текста */
    font-size: 18px;
    color: #333;
}





/* Контейнер для времени и заголовка */
.jp-time-title-wrapper {
    display: flex;
    align-items: flex-start; /* Выравниваем по верху */
    gap: 12px;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Стили для времени публикации - изменен цвет на черный */
.jp-post-time {
    font-size: 0.80rem;
    color: #000000; /* Изменено на черный цвет */
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    white-space: nowrap;
    padding: 2px 4px;
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    flex-shrink: 0;
    font-weight: 600;
    margin-top: 0px; /* Легкое выравнивание с текстом */
}

/* Стили для заголовка */
.jp-entry-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.4;
    font-weight: 600;
    min-width: 0;
    flex: 1;
    white-space: normal; /* Разрешаем перенос строк */
    word-wrap: break-word; /* Перенос длинных слов */
    overflow-wrap: break-word;
}

/* Сохраняем оригинальный цвет заголовка для всех состояний */
.jp-entry-title a {
    text-decoration: none;
    transition: opacity 0.2s ease;
    display: block;
    width: 100%;
    color: inherit !important; /* Наследует цвет от родителя */
}

.jp-entry-title a:hover {
    opacity: 0.8;
    color: inherit !important; /* Сохраняем цвет при наведении */
}

/* Отключаем изменение цвета при посещении */
.jp-entry-title a:visited {
    color: inherit !important;
}

/* Отключаем изменение цвета при активном состоянии (нажатии) */
.jp-entry-title a:active {
    color: inherit !important;
}

/* Отключаем изменение цвета при фокусе */
.jp-entry-title a:focus {
    color: inherit !important;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .jp-time-title-wrapper {
        gap: 8px;
        align-items: flex-start; /* Выравниваем по верху */
        flex-wrap: nowrap; /* Сохраняем в одной линии */
    }
    
    .jp-post-time {
        font-size: 0.75rem;
        padding: 1px 6px;
        font-weight: 600;
        flex-shrink: 0;
        margin-top: 1px; /* Выравнивание для мобильных */
    }
    
    .jp-entry-title {
        font-size: 1.1rem;
        white-space: normal; /* Разрешаем перенос */
        word-wrap: break-word;
        overflow-wrap: break-word;
        overflow: visible; /* Убираем обрезку */
    }
}

/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 480px) {
    .jp-time-title-wrapper {
        gap: 6px;
    }
    
    .jp-post-time {
        font-size: 0.7rem;
        padding: 1px 4px;
        font-weight: 600;
    }
    
    .jp-entry-title {
        font-size: 1.0rem;
    }
}




.article-meta-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 15px 0;
    padding: 10px 0;
    flex-wrap: wrap;
}

.time-icon, .source-icon {
    font-size: 14px;
    opacity: 0.7;
}

.black-time-text {
    color: #000000;
    font-size: 14px;
    font-weight: 600;
}

.meta-separator {
    color: #ddd;
    margin: 0 5px;
}

.source-link {
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.source-link:hover {
    opacity: 0.7;
    text-decoration: underline;
}





/* Стили для виджета японских новостей */
.japanese-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.japanese-news-item {
    margin-bottom: 15px;
    padding: 0;
    display: flex;
    align-items: flex-start;
    border-bottom: 1px dotted #e0e0e0;
    padding-bottom: 12px;
}

.japanese-news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.news-icon {
    margin-right: 10px;
    color: #0073aa;
    font-size: 14px;
    margin-top: 3px;
    flex-shrink: 0;
}

.japanese-news-link {
    text-decoration: none;
    color: #2c3e50;
    font-size: 17px; /* Запрошенный размер текста */
    display: block;
    transition: color 0.3s ease;
    font-weight: 500;
    line-height: 1.4;
    flex-grow: 1;
}

.japanese-news-link:hover {
    color: #e74c3c;
    text-decoration: none;
}

/* Стили для японского текста */
.widget_japanese_news_widget {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

/* Убираем стандартный заголовок виджета */
.widget_japanese_news_widget .widget-title {
    display: none;
}











/* Стили для секции похожих новостей */
.related-news-section {
    margin: 20px 0;
    padding: 10px 0;
    border-top: 1px solid #e0e0e0;
}

.related-news-title {
    font-size: 1.0rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

.related-news-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.related-news-item {
    padding: 5px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .related-news-section {
        margin: 30px 0;
        padding: 15px 0;
    }
    
    .related-news-title {
        font-size: 1.0rem;
        margin-bottom: 15px;
    }
    
    .related-news-list {
        gap: 15px;
    }
    
    .related-news-item {
        padding: 12px;
    }
}

/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 480px) {
    .related-news-section {
        margin: 20px 0;
        padding: 10px 0;
    }
    
    .related-news-title {
        font-size: 1.0rem;
        margin-bottom: 12px;
    }
    
    .related-news-list {
        gap: 12px;
    }
    
    .related-news-item {
        padding: 10px;
    }
}



.entry-text ul {
    list-style-type: none;
    margin: 20px 15px;
    padding: 0;
}

.entry-text li {
    padding: 10px 15px;
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    border-bottom: 1px solid #e0e0e0;
}

.entry-text li:last-child {
    border-bottom: none;
}

.entry-text li:hover {
    background-color: #f5f5f5;
}


.always-visited,
.always-visited:visited,
.always-visited:hover,
.always-visited:active {
    color: #551A8B;
    text-decoration: none;
}


