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

.entry-content h3 {
	font-size: 22px;
}

.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: 23px;
	margin-bottom: 20px;
	line-height: 1.2em;
    font-weight: 500;
	text-transform: none;
}

h3 {
	font-size: 20px;
	margin-bottom: 20px;
	line-height: 1.2em;
	font-weight: 400;
	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-cont {
	display: flex;
	display: grid;
	column-gap: 10px;
	grid-template-columns: repeat(1, minmax(200px, 1fr));
}

.site-content-area {
	word-wrap: break-word;
	margin-top: 10px;
}

#cont-site article {
	padding: 20px;
	margin-bottom: 10px;
}

@media (min-width: 768px) {
	.site-cont {
		grid-template-columns: repeat(2, minmax(200px, 1fr));
	}
}

@media (min-width: 1200px) {
	.site-cont {
		grid-template-columns: repeat(3, minmax(200px, 1fr));
	}
}

/*--------------------------------------------------------------
# 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 nav {
	padding: 0;
}

.pagination a {
    color: #007bff;
    padding: 0px 5px;
    text-decoration: none;
    margin: 0px;
    transition: background-color 0.3s, color 0.3s;
}

.pagination a:hover {
    color: #007bff;
}
 
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: 24px;
	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;
}


.mobile-icon-close-bars {
    display: none;
}

code {
    display: inline-block; /* Для управления отступами */
    color: #0056b3; /* Более подходящий синий цвет */
    padding: 0.3em 0.5em; /* Увеличенные отступы */
    font-size: 100%; /* Размер шрифта, как остальной текст */
    font-weight: bold; /* Жирный текст */
    font-family: 'Courier New', Courier, monospace; /* Моноширинный шрифт */
    white-space: pre-wrap; /* Позволяет перенос строк */
    word-break: break-word; /* Предотвращает переполнение длинных слов */
}

/* Устанавливаем box-sizing для всех элементов */
*,
*::before,
*::after {
    box-sizing: border-box;
}

.functions-page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    overflow: hidden;
}

.functions-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Автоматическая адаптация колонок */
    gap: 20px;
    margin-top: 20px;
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
}

.functions-columns .column {
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.functions-columns .column h2 {
    font-size: 18px;
    margin-bottom: 10px;
    text-align: center;
    color: #333;
}

.functions-columns ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.functions-columns ul li {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.functions-columns ul li a {
    text-decoration: none;
    color: #0056b3;
    font-size: 16px;
    font-weight: bold;
    word-break: break-word;
    overflow-wrap: break-word;
}

.functions-columns ul li a:hover {
    text-decoration: underline;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .functions-columns {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
        padding: 0 5px;
    }

    .functions-columns .column {
        padding: 15px;
    }

    .functions-columns ul li a {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .functions-page {
        padding: 5px;
    }

    .functions-columns {
        grid-template-columns: 1fr;
    }

    .functions-columns .column {
        padding: 10px;
    }

    .functions-columns ul li a {
        font-size: 13px;
    }
}

/* Стили для #wp-functions-list */
#wp-functions-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Автоматическая адаптация колонок */
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#wp-functions-list li {
    text-align: center;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    color: #004085;
}

#wp-functions-list a {
    text-decoration: none;
    color: #004085;
    border: none;
}

#wp-functions-list a:hover {
    text-decoration: underline;
    color: #003566;
}

/* Адаптация количества колонок */
@media (max-width: 768px) {
    #wp-functions-list {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

@media (max-width: 480px) {
    #wp-functions-list {
        grid-template-columns: 1fr;
    }
}



.functions-page2 {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    overflow: hidden;
}

.functions-columns2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 колонки */
    gap: 20px;
    margin-top: 20px;
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
}

.functions-columns2 .column2 {
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.functions-columns2 .column2 h2 {
    font-size: 18px;
    margin-bottom: 10px;
    text-align: center;
    color: #333;
}

.functions-columns2 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.functions-columns2 ul li {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.functions-columns2 ul li a {
    text-decoration: none;
    color: #0056b3;
    font-size: 16px;
    font-weight: bold;
    word-break: break-word;
    overflow-wrap: break-word;
}

.functions-columns2 ul li a:hover {
    text-decoration: underline;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .functions-columns2 {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
        padding: 0 5px;
    }

    .functions-columns2 .column2 {
        padding: 15px;
    }

    .functions-columns2 ul li a {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .functions-page2 {
        padding: 5px;
    }

    .functions-columns2 {
        grid-template-columns: 1fr;
    }

    .functions-columns2 .column2 {
        padding: 10px;
    }

    .functions-columns2 ul li a {
        font-size: 13px;
    }
}

/* === CLS Fix: reserve space for AdSense === */
.adsbygoogle {
  min-height: 280px;
}

/* === CLS Fix: font-display swap to prevent layout shift from web fonts === */
@font-face {
  font-display: swap;
}

/* === CLS Fix: AdSense min-height === */
ins.adsbygoogle[data-ad-format="auto"] {
  min-height: 280px !important;
}

/* === CLS Fix: functions list min-height === */
#wp-functions-list {
  min-height: 2em;
}