/*
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;
}

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;
}


#wp-functions-list {
    list-style-type: none;
    padding: 0;
}

#wp-functions-list li {
    display: flex;
    align-items: flex-start; /* Выравнивание по верхнему краю */
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.function-item {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.function-thumbnail {
    margin-right: 15px; /* Отступ между картинкой и текстом */
}

.function-thumbnail img {
    width: 120px; /* Размер картинки для ПК */
    height: 120px;
    object-fit: contain; /* Картинка будет целиком помещаться в контейнер без обрезки */
    /* Убираем скругление углов */
    border-radius: 0; /* Без скругления углов */
}

.function-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
}

.function-info h4 {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
}

.function-info .text-content {
    margin-top: 10px;
}

@media (max-width: 768px) {
    #wp-functions-list li {
        flex-direction: column; /* На мобильных устройствах элементы идут по вертикали */
        align-items: center; /* Центрируем элементы */
    }

    .function-item {
        flex-direction: column; /* Разделяем картинку и текст по вертикали */
        align-items: center;
    }

    .function-thumbnail {
        margin-right: 0;
        margin-bottom: 10px; /* Отступ снизу для мобильной версии */
    }

    .function-thumbnail img {
        width: 50px;
        height: 50px;
    }

    .function-info h4 {
        font-size: 1.1em;
    }
}




/* Стили для контейнера <ul> */
/* Стили для контейнера <ul> */
ul.spisok, ul.minus {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
}

/* Стили для элементов <li> */
ul.spisok li, ul.minus li {
    font-size: 17px;
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Ссылки */
ul.spisok li a, ul.minus li a {
    color: #0056b3;
    text-decoration: underline;
    font-weight: 500;
}

/* Наведение */
ul.spisok li a:hover, ul.minus li a:hover {
    color: #c40000;
}

/* Стили для блока сценариев использования */
.scenarios-block {
    margin: 16px 0;
}

/* Сетка колонок: на десктопе две в первой строке + одна во второй */
.scenarios-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 30px;
}

.scenarios-col {
    background: #f9f9f9;
    border-radius: 6px;
    padding: 12px 16px;
}

/* Последний блок ("не подходит") — на всю ширину */
.scenarios-columns .scenarios-col--bad {
    grid-column: 1 / -1;
}

/* Заголовки колонок */
.scenarios-col-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid currentColor;
}

.scenarios-col-title--use  { color: #1a6fc4; }
.scenarios-col-title--good { color: #2e8b57; }
.scenarios-col-title--bad  { color: #b03030; }

/* Списки внутри колонок */
.scenarios-col ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
}

.scenarios-col ul li {
    font-size: 15px;
    margin-bottom: 5px;
    line-height: 1.5;
}

/* Мобильная версия — одна колонка */
@media (max-width: 768px) {
    .scenarios-columns {
        grid-template-columns: 1fr;
        gap: 12px;
    }


}




.info-block {
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 16px; /* Увеличенный размер текста */
    line-height: 1.6;
    padding: 10px 0;
}

.info-block a {
    color: #1a0dab;
    text-decoration: underline;
    font-weight: 500;
}

.info-block a:hover {
    color: #d0021b;
}

.download-link a {
    color: #000;
    text-decoration: underline;
    font-weight: bold;
}

.download-link a:hover {
    text-decoration: none;
}

.info-item {
    margin-top: 8px;
}

hr {
    border: none;
    border-top: 1px solid #000; /* Черная линия */
    margin: 10px 0;
}



/* Убираем отступы для заголовка */
.entry-header.custom-header {
    display: block; /* Заголовок остается на своём месте сверху */
    margin-bottom: 7px; /* Отступ между заголовком и основным контентом */
}

/* Картинка и текст в одном ряду */
.custom-entry-content {
    display: flex;
    align-items: flex-start; /* Выравниваем по верхнему краю */
}

/* Стиль для картинки, чтобы она располагалась слева */
.custom-entry-content .post-image {
    margin-right: 20px; /* Отступ между картинкой и текстом */
    width: 64px; /* Устанавливаем ширину картинки 64px */
    height: 64px; /* Устанавливаем высоту картинки 64px */
}

/* Чтобы картинка не выходила за пределы контейнера */
.custom-entry-content .post-image img {
    width: 64px; /* Устанавливаем ширину картинки 64px */
    height: 64px; /* Устанавливаем высоту картинки 64px */
    object-fit: cover; /* Чтобы изображение не деформировалось */
}

/* Контейнер для текста */
.custom-entry-content .entry-text {
    flex: 1; /* Занимает оставшееся пространство */
}






/* Контейнер списка постов */
.post-list {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Уменьшаем расстояние между записями */
}

/* Каждый пост в списке */
.post-item {
    padding: 5px 10px; /* Уменьшаем внутренние отступы */
    border-bottom: 1px solid #ddd;
}

/* Контейнер для изображения и текста */
.custom-entry-content {
    display: flex;
    align-items: center;
}

/* Контейнер для изображения и текста 2 */
.custom-entry-content2 {
    display: flex;
    align-items: center;
}

/* Контейнер для изображения */
.post-image {
    margin-right: 10px; /* Уменьшаем отступ между изображением и текстом */
    width: 64px;
    height: 64px;
}

/* Картинка поста */
.post-image img {
    width: 64px;
    height: 64px;
    object-fit: cover;
}

/* Контейнер для текста */
.entry-text {
    flex: 1;
}

/* Заголовок поста */
.entry-title {
    margin-bottom: 3px; /* Уменьшаем отступ под заголовком */
    font-size: 18px;
    line-height: 1.2;
}

/* Метаданные (дата) */
.entry-meta {
    margin-bottom: 3px; /* Уменьшаем отступ под датой */
    font-size: 14px;
    color: #666;
}

/* Описание поста */
.entry-text p {
    margin-top: 0; /* Убираем верхний отступ у текста */
    margin-bottom: 0; /* Убираем нижний отступ у текста */
    font-size: 16px;
    color: #333;
}




.recent-soft-widget {
    list-style: none;
    padding: 0;
    margin: 0;
}
.soft-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
}
.soft-item img {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    border-radius: 5px;
    object-fit: cover;
}
.soft-info {
    flex: 1;
}
.soft-info a {
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}
.soft-version {
    display: block;
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}



.alternatives-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.alternative-item {
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 10px;
    background-color: #f9f9f9;
}

.alternative-top {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.alternative-image img {
    width: 75px;
    height: auto;
    border-radius: 8px;
}

.alternative-content {
    flex: 1;
}

.alternative-content h3 {
    margin: 0;
}

.alt-description {
    margin: 5px 0 0 0;
}

.alt-info-block {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px 7px; /* уменьшен вертикальный и горизонтальный отступ */
    font-size: 15px; /* немного меньше шрифт */
    border-top: 1px solid #ddd;
    padding-top: 8px;
}

.alt-info-block span {
    display: inline-block;
    line-height: 1.3; /* чуть плотнее строки */
}
.post-image img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Для сохранения пропорций и заполнения */
    border-radius: 5px;
}


/* УБИРАЕМ КНОПКИ ПАГАНАЦИИ, ОСТАВЛЯЕМ ТОЛЬКО ЦИФРЫ */
.prev.page-numbers, .next.page-numbers { display: none; }
/*--------------------------------------------------------------
# Kartnic — redesigned menu bar
--------------------------------------------------------------*/

:root {
    --kartnic-accent: #0d00ff;
    --kartnic-accent-soft: rgba(13, 0, 255, 0.08);
    --kartnic-header-bg: #ffffff;
    --kartnic-header-text: #1a1a1a;
}

.grid-container {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.inside-header {
    justify-content: flex-start;
    gap: 28px;
    flex-wrap: nowrap;
    line-height: normal;
}

.site-branding-container {
    flex-shrink: 0;
}

/* Menu sits in the same row as the logo, tab-style like GitHub's repo nav.
   On narrower windows where it doesn't all fit, it scrolls horizontally
   with a visible scrollbar and a fade hint at the edge, rather than
   silently clipping items out of view. */
#site-navigation.main-navigation {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #d8d8d8 transparent;
}

#site-navigation.main-navigation::-webkit-scrollbar {
    height: 4px;
}

#site-navigation.main-navigation::-webkit-scrollbar-thumb {
    background-color: #d8d8d8;
    border-radius: 4px;
}

#site-navigation .main-menu {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    width: max-content;
}

#site-navigation .main-menu > li {
    float: none;
}

#site-navigation .main-menu > li > a {
    display: inline-flex;
    align-items: center;
    padding: 6px 6px;
    border-radius: 6px;
    color: #3c3c3c;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;
}

#site-navigation .main-menu > li > a:hover,
#site-navigation .main-menu > li > a:focus {
    background-color: rgba(0, 0, 0, 0.06);
    color: #1a1a1a;
    outline: none;
}

/* Current category: the same soft highlight hover uses, shown without hovering */
#site-navigation .main-menu > li.current-menu-item > a,
#site-navigation .main-menu > li.current-menu-parent > a,
#site-navigation .main-menu > li.current-menu-ancestor > a {
    background-color: rgba(0, 0, 0, 0.06);
    color: #1a1a1a;
    font-weight: 600;
}

/* Submenus (if any category ever gets one) */
#site-navigation .main-navigation ul ul,
.main-navigation ul ul {
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    padding: 8px;
    margin-top: 4px;
    background-color: #fff;
}

.main-navigation ul ul li > a {
    border-radius: 6px;
    padding: 8px 12px;
    border-bottom: none !important;
}

.main-navigation ul ul li > a:hover {
    background-color: var(--kartnic-accent-soft);
    color: var(--kartnic-accent);
}

/* Top bar: search + mobile toggle */
.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Search button */
.search-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #4a4a4a;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.search-button a:hover,
.search-button a:focus {
    background-color: var(--kartnic-accent-soft);
    color: var(--kartnic-accent);
    outline: none;
}

/* Mobile hamburger toggle */
.mobile-menu-toggle {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.mobile-menu-toggle a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #4a4a4a;
    transition: background-color 150ms ease;
}

.mobile-menu-toggle a:hover,
.mobile-menu-toggle a:focus {
    background-color: var(--kartnic-accent-soft);
}

/* Off-canvas mobile menu list — 2 columns */
.mobile-drop-navigation .mobile-inside-navigation ul {
    list-style: none;
    margin: 0;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
}

.mobile-drop-navigation .mobile-inside-navigation li {
    list-style: none;
}

.mobile-drop-navigation .mobile-inside-navigation li a {
    display: block;
    padding: 12px 14px;
    border-radius: 8px;
    color: #2c2c2c;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    transition: background-color 150ms ease, color 150ms ease;
}

.mobile-drop-navigation .mobile-inside-navigation li a:hover,
.mobile-drop-navigation .mobile-inside-navigation li a:focus {
    background-color: rgba(0, 0, 0, 0.06);
    color: #1a1a1a;
}

.mobile-drop-navigation .mobile-inside-navigation li.current-menu-item > a {
    background-color: rgba(0, 0, 0, 0.06);
    color: #1a1a1a;
    font-weight: 700;
}

/* If a category ever gets a sub-menu, let it span both columns
   under its parent instead of squeezing into one cell */
.mobile-drop-navigation .mobile-inside-navigation li.menu-item-has-children {
    grid-column: 1 / -1;
}

.mobile-drop-navigation .mobile-inside-navigation .sub-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
    padding: 0 0 0 10px;
}

@media (max-width: 768px) {
    .site-header-menu {
        display: none;
    }
}

/* ==========================================================
   Accessibility widget ("version for the visually impaired")
   ========================================================== */

.a11y-toggle {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 9999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background-color: #1a1a1a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: background-color 150ms ease;
}

.a11y-toggle:hover,
.a11y-toggle:focus-visible {
    background-color: #000;
}

.a11y-toggle svg {
    width: 24px;
    height: 24px;
}

.a11y-panel {
    position: fixed;
    left: 16px;
    bottom: 72px;
    z-index: 9999;
    width: 260px;
    max-width: calc(100vw - 32px);
    background-color: #fff;
    color: #1a1a1a;
    border-radius: 12px;
    border: 1px solid #e2e2e2;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    font-size: 14px;
}

.a11y-panel[hidden] {
    display: none;
}

.a11y-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e2e2e2;
    font-weight: 700;
}

.a11y-close {
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #555;
    padding: 4px 6px;
}

.a11y-close:hover,
.a11y-close:focus-visible {
    color: #000;
}

.a11y-panel-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.a11y-group-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.a11y-btn-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.a11y-btn-row button {
    flex: 1 1 auto;
    padding: 8px 10px;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    background-color: #fff;
    color: #1a1a1a;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.a11y-btn-row button[aria-pressed="true"] {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

.a11y-btn-row button:hover,
.a11y-btn-row button:focus-visible {
    border-color: #1a1a1a;
}

.a11y-reset {
    align-self: flex-start;
    padding: 6px 0;
    border: none;
    background: transparent;
    color: #555;
    text-decoration: underline;
    cursor: pointer;
    font-size: 13px;
}

.a11y-reset:hover,
.a11y-reset:focus-visible {
    color: #000;
}

/* Larger text mode — scales the page content only; the widget itself
   stays a predictable, always-usable size */
html.a11y-font-1 #page {
    zoom: 1.15;
}

html.a11y-font-2 #page {
    zoom: 1.3;
}

/* High-contrast mode — inverted colour scheme for the page content
   only; images/video are re-inverted so they keep natural colour */
html.a11y-contrast #page {
    filter: invert(1) hue-rotate(180deg);
    background-color: #fff;
}

html.a11y-contrast #page img,
html.a11y-contrast #page svg,
html.a11y-contrast #page video,
html.a11y-contrast #page iframe {
    filter: invert(1) hue-rotate(180deg);
}

/* Grayscale images */
html.a11y-grayscale #page img {
    filter: grayscale(100%);
}

html.a11y-contrast.a11y-grayscale #page img {
    filter: invert(1) hue-rotate(180deg) grayscale(100%);
}

/* Clearer keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .a11y-panel {
        left: 12px;
        right: 12px;
        width: auto;
    }
}