/**
 * Theme Name: Krasen Slavov
 * Theme URI: https://krasenslavov.com/
 * Description: Developer-focused minimalist WordPress theme for showcasing plugins, themes, and technical content. Built for performance, SEO, and authority building.
 * Author: Krasen Slavov
 * Author URI: https://krasenslavov.com/
 * Version: 1.0.0
 * Requires at least: 6.0
 * Tested up to: 6.8
 * Requires PHP: 8.0
 * License: GNU General Public License v2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: krasenslavov
 * Domain Path: /languages
 * Tags: blog, one-column, custom-menu, featured-images, sticky-post, theme-options, threaded-comments, translation-ready, dark-mode
 *
 * Copyright 2018 - 2025 Developry Ltd. (email: contact@developry.com)
 *
 * This theme, like WordPress, is licensed under the GPL.
 * Use it to make something cool, have fun, and share what you've learned.
 */

/**
 * Table of Contents
 *
 * 1.0 - CSS Variables
 * 2.0 - Reset & Normalize
 * 3.0 - Typography
 * 4.0 - Layout & Structure
 * 5.0 - Header & Navigation
 * 6.0 - Content & Posts
 * 7.0 - Sidebar & Widgets
 * 8.0 - Footer
 * 9.0 - Forms
 * 10.0 - Buttons
 * 11.0 - Media & Images
 * 12.0 - Code Blocks
 * 13.0 - Comments
 * 14.0 - Utilities
 * 15.0 - Responsive
 */

/* ==========================================================================
   1.0 - CSS Variables
   ========================================================================== */

:root {
	/* Colors - Dark Theme (Default) */
	--color-primary: #28303d;
	--color-accent: #dfd81f;
	--color-secondary: #2c3544;
	--color-background: #28303d;
	--color-text: #ffffff;
	--color-text-secondary: #9ca2af;
	--color-highlight: #00E0FF;
	--color-border: #3c445c;
	--color-code-bg: #3c445c;
	--color-code-text: #c92c2c;

	/* Typography */
	--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--font-code: 'JetBrains Mono', 'Inconsolata', 'Courier New', monospace;
	--font-size-base: 16px;
	--font-size-small: 14px;
	--font-size-large: 18px;
	--font-size-h1: 2.5rem;
	--font-size-h2: 2rem;
	--font-size-h3: 1.75rem;
	--font-size-h4: 1.5rem;
	--font-size-h5: 1.25rem;
	--font-size-h6: 1rem;
	--line-height-base: 1.6;
	--line-height-heading: 1.2;

	/* Spacing */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;
	--spacing-xxl: 4rem;

	/* Layout */
	--container-max-width: 1280px;
	--content-max-width: 768px;
	--sidebar-width: 300px;
	--header-height: 80px;

	/* Border Radius */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 1rem;

	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;

	/* Shadows */
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Light Theme Variables */
body.light-theme {
	--color-primary: #ffffff;
	--color-accent: #dfd81f;
	--color-secondary: #f5f5f5;
	--color-background: #ffffff;
	--color-text: #28303d;
	--color-text-secondary: #6f7385;
	--color-highlight: #0066cc;
	--color-border: #e0e0e0;
	--color-code-bg: #f5f5f5;
	--color-code-text: #c92c2c;
}

/* ==========================================================================
   2.0 - Reset & Normalize
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: var(--font-size-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-primary);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	overflow-x: hidden;
}

/* ==========================================================================
   3.0 - Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--color-text);
	font-family: var(--font-primary);
	font-weight: 700;
	line-height: var(--line-height-heading);
	margin-bottom: var(--spacing-md);
}

h1 {
	font-size: var(--font-size-h1);
	text-align: center;
}

h2 {
	font-size: var(--font-size-h2);
}

h3 {
	font-size: var(--font-size-h3);
}

h4 {
	font-size: var(--font-size-h4);
}

h5 {
	font-size: var(--font-size-h5);
}

h6 {
	font-size: var(--font-size-h6);
}

p {
	margin-bottom: var(--spacing-md);
}

a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover,
a:focus {
	color: var(--color-highlight);
}

/* External Links */
a.external::after {
	content: '↗';
	margin-left: 0.25rem;
}

strong,
b {
	font-weight: 700;
}

em,
i {
	font-style: italic;
}

/* ==========================================================================
   4.0 - Layout & Structure
   ========================================================================== */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
	padding: var(--spacing-md);
}

.container {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--container-max-width);
	width: 100%;
}

.content-wrapper {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--content-max-width);
}

.blog .content-wrapper {
	max-width: var(--container-max-width);
}

/* ==========================================================================
   5.0 - Header & Navigation
   ========================================================================== */

.site-header {
	background-color: var(--color-secondary);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-md);
	left: 0;
	position: sticky;
	right: 0;
	top: 0;
	z-index: 100;
}

.header-inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--spacing-md);
}

.site-branding {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	text-align: center;
}

.site-title {
	font-size: var(--font-size-h4);
	font-weight: 700;
	margin: 0;
}

.site-title a {
	color: var(--color-text);
}

.site-title a:hover {
	color: var(--color-accent);
}

.site-description {
	color: var(--color-text-secondary);
	font-size: var(--font-size-small);
	margin: 0;
}

.custom-logo-link img {
	height: 90px;
	width: 90px;
}

/* Primary Navigation */
.primary-navigation {
	margin-top: var(--spacing-sm);
	width: 100%;
}

.primary-menu {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	justify-content: center;
	list-style: none;
}

.primary-menu>li {
	position: relative;
}

.primary-menu>li>a {
	color: var(--color-text);
	display: block;
	padding: var(--spacing-xs);
	transition: color var(--transition-fast);
}

.primary-menu>li>a:hover,
.primary-menu>li.current-menu-item>a {
	color: var(--color-accent);
}

/* Submenu */
.primary-menu .sub-menu {
	background-color: var(--color-secondary);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	display: none;
	left: 0;
	list-style: none;
	min-width: 250px;
	padding: var(--spacing-xs);
	position: absolute;
	top: 100%;
	z-index: 101;
}

.primary-menu li:hover>.sub-menu,
.primary-menu li:focus-within>.sub-menu {
	display: block;
}

.primary-menu .sub-menu a {
	color: var(--color-text);
	display: block;
	padding: var(--spacing-xs) var(--spacing-sm);
	transition: background-color var(--transition-fast);
}

.primary-menu .sub-menu a:hover {
	background-color: var(--color-primary);
	color: var(--color-accent);
}

/* ==========================================================================
   6.0 - Content & Posts
   ========================================================================== */

.entry {
	margin-bottom: var(--spacing-md);
}

.entry-header {
	margin-bottom: var(--spacing-lg);
}

.entry-title {
	margin-bottom: var(--spacing-sm);
}

.entry-title a {
	color: var(--color-text);
}

.entry-title a:hover {
	color: var(--color-accent);
}

.entry-meta {
	align-items: center;
	color: var(--color-text-secondary);
	display: flex;
	font-size: var(--font-size-small);
	gap: 10px;
	margin-bottom: var(--spacing-md);
}

.entry-meta a {
	color: var(--color-text-secondary);
}

.entry-meta a:hover {
	color: var(--color-accent);
}

.entry-content {
	margin-bottom: var(--spacing-lg);
}

.entry-content>* {
	margin-bottom: var(--spacing-md);
}

.entry-footer {
	border-top: 1px solid var(--color-border);
	padding-top: var(--spacing-md);
}

/* Post Thumbnail */
.post-thumbnail {
	margin-bottom: var(--spacing-lg);
}

.post-thumbnail img {
	border-radius: var(--radius-md);
	display: block;
	height: auto;
	width: 100%;
}

/* Post Categories & Tags */
.cat-links,
.tags-links {
	display: inline-block;
	margin-right: var(--spacing-sm);
}

/* ==========================================================================
   12.0 - Code Blocks
   ========================================================================== */

code {
	background-color: var(--color-code-bg);
	border-radius: var(--radius-sm);
	color: var(--color-code-text);
	font-family: var(--font-code);
	font-size: var(--font-size-small);
	padding: 0.2em 0.4em;
}

pre {
	background-color: var(--color-code-bg);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-family: var(--font-code);
	font-size: var(--font-size-small);
	overflow-x: auto;
	padding: var(--spacing-md);
}

pre code {
	background-color: transparent;
	color: inherit;
	padding: 0;
}

/* ==========================================================================
   15.0 - Responsive
   ========================================================================== */

@media (min-width: 768px) {
	.header-inner {
		flex-direction: row;
		justify-content: space-between;
	}

	.site-branding {
		flex-direction: row;
		text-align: left;
	}

	.primary-navigation {
		margin-top: 0;
		width: auto;
	}

	.primary-menu {
		justify-content: flex-end;
	}

	.site-content {
		padding: var(--spacing-lg);
	}
}

@media (min-width: 1024px) {
	:root {
		--font-size-h1: 3rem;
		--font-size-h2: 2.5rem;
		--font-size-h3: 2rem;
	}
}