/*
Theme Name: Kaddora – Multipurpose Responsive Lightweight Woocommerce WordPress Theme
Author: Kaddora Tech
Description: Kaddora Multipurpose WordPress Theme is a lightweight and flexible starter theme designed for developers and end-users who want to build modern websites quickly. It comes with a clean and well-structured codebase following WordPress coding standards, making it easy to customize and extend. This theme is truly multipurpose, suitable for blogs, business websites, portfolios, eCommerce stores, and more. It supports all major WordPress plugins, page builders, and templates, ensuring seamless integration and functionality. Kaddora has been tested with the latest WordPress and PHP versions for maximum compatibility and performance.
Version: 1.8.5
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
Text Domain: kaddora-multipurpose-wordpress-theme
Tags: multipurpose-theme, starter-theme, wordpress, universal-theme, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/



/* Basic starter theme styles  */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
}

a {
  color: #181818;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: #222;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
}

header,
nav,
footer,
article,
section {
  padding: 20px;
}

header {
  background: #fff;
  border-bottom: 1px solid #ddd;
}

.site-title {
  font-size: 2rem;
  margin: 0;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 15px;
}
nav ul li {
  display: inline;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.post {
  background: #fff;
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

body.layout-boxed .site {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
}

/* Header layout */
.site-header {
	background-color: #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	padding: 1rem 0;
  color: #000;
}
.site-header .custom-logo {
  max-height: 60px;   /* adjust height you want */
  width: auto;
  height: auto;
}

.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}

.site-branding {
	display: flex;
	flex-direction: row;
  align-items: center;
  gap: 10px;
  color: #000;
}

.site-title a {
	text-decoration: none;
	color: #000;
	font-weight: 700;
}

.site-description {
	font-size: 0.875rem;
	color: #666;
	margin: 0;
}

/* Navigation */
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.5rem;
}

.main-navigation a {
	text-decoration: none;
	color: #000000;
	font-weight: 500;
}

.main-navigation a:hover {
	text-decoration: underline;
}

/* Grid layout for posts */
/* Grid layout for posts - one per row */
.post-grid {
  display: grid;
  grid-template-columns: 1fr; /* always one column */
  gap: 30px; /* space between posts vertically */
  margin: 2rem auto;
  max-width: 800px; /* controls total width of the posts area */
  padding: 0 15px; /* left/right padding on small screens */
}

.post-grid-item {
  background: #fff;
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 6px;
  transition: box-shadow 0.3s ease;
}

.post-grid-item:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.post-grid-item .entry-title {
  font-size: 1.5rem;
  margin-top: 0;
}

.pagination-wrapper {
  text-align: center;
  margin-top: 2rem;
}
/* -----for blog image layout------- */
/* Make featured image full width & centered inside each post card */
.post-grid-item .post-thumbnail,
.post-grid-item .post-thumbnail img,
.post-grid-item img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 15px auto; /* center image and add bottom spacing */
  border-radius: 6px; /* optional rounded corners */
  object-fit: cover; /* ensures nice cropping if images have different sizes */
}


/* Single post layout styles */
.single-post-area {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.single-post-wrapper {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.single-post-title {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #000;
}

.single-post-meta {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 20px;
}

.single-post-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 20px auto;
  border-radius: 6px;
}

.single-post-content {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
}

.single-post-footer {
  margin-top: 30px;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.post-tags {
  font-size: 0.9rem;
  color: #555;
}

.single-post-navigation {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
}

.single-post-navigation a {
  color: #000;
  text-decoration: none;
}

@media (max-width: 768px) {
  .single-post-wrapper {
    padding: 20px;
  }

  .single-post-title {
    font-size: 1.5rem;
  }

  .single-post-navigation {
    flex-direction: column;
    gap: 15px;
  }
}



/* --------footer--------- */

.site-footer {
  background-color: #e0e0e0;
  padding: 40px 20px;
  font-size: 15px;
}
.site-footer .custom-logo {
  max-height: 50px;   /* adjust height for footer */
  width: auto;
  height: auto;
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin-bottom: 20px;
}

.footer-site-title a {
  color: #000;
  text-decoration: none;
}

.footer-description {
  margin-top: 10px;
  color: #000000;
  font-size: 16px;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  margin-bottom: 8px;
}

.footer-menu a {
  color: #333;
  text-decoration: none;
}

.footer-menu a:hover {
  text-decoration: underline;
}

.site-info {
  text-align: center;
  font-size: 16px;
  color: #000000;
  border-top: 1.5px solid #000000;
  padding-top: 15px;
}
.site-info a{
  text-decoration: none;
  color: #000;
  font-weight: bold;
}