/*
Theme Name: Besalp Master
Description: Besalp is a business theme designed specifically for private and small companies that offer one or more services. Design is very elegant and modern and the visitor does not lose the focus. We can build your homepage as OnePage or Advanced in a great elegant and modern view. Trust us, we have the knowledge in the background. 
Author: Besalp
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, one-column, custom-background, custom-header, custom-menu, post-formats, rtl-language-support, sticky-post, thread-comments, translation-ready, elementor-ready
Text Domain: besalp-master
*/

/* Reset and Base Styles */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

h1,h2,h3,h4,h5,h6 {
    margin-block-start:.5rem;margin-block-end:1rem;font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit
}

h1 {
    font-size: 2.5rem
}

h2 {
    font-size: 2rem
}

h3 {
    font-size: 1.75rem
}

h4 {
    font-size: 1.5rem
}

h5 {
    font-size: 1.25rem
}

h6 {
    font-size: 1rem
}

p {
    margin-block-start: 0;
    margin-block-end: 0.9rem;
}

/* Site Structure */
.site {
    min-height: 100vh;
}

.site-content {
    width: 100%;
}

/* Main Content */
.content-area {
    width: 100%;
}

.site-main {
    width: 100%;
    padding: 2rem;
}

/* Posts */
.posts-container article {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e9ecef;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.posts-container article:last-child {
    border-bottom: none;
}

.entry-header {
    margin-bottom: 1.5rem;
}

.entry-title {
    margin: 0 0 1rem 0;
    font-size: 2rem;
    line-height: 1.3;
}

.entry-title a {
    color: #333;
    text-decoration: none;
}

.entry-title a:hover {
    color: #0073aa;
}

.entry-meta {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
}

.entry-thumbnail {
    margin-bottom: 1.5rem;
}

.entry-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.entry-content {
    margin-bottom: 1.5rem;
}

.entry-footer {
    font-size: 0.9rem;
    color: #666;
}

.entry-footer span {
    margin-right: 1rem;
}

/* Page Links */
.page-links {
    margin: 2rem 0;
    text-align: center;
}

.page-links a,
.page-links > span {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    color: #333;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.page-links a:hover,
.page-links > span {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

/* Pagination */
.pagination {
    margin: 3rem 0;
    text-align: center;
}

.page-numbers {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    color: #333;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.page-numbers:hover,
.page-numbers.current {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

/* No Results */
.no-results {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 3rem 2rem;
}

.page-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.page-content {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Comments */
.comments-area {
    max-width: 800px;
    margin: 3rem auto 0;
    padding: 0 2rem;
}

/* Elementor Compatibility */
.elementor-page .site-main {
    padding: 0;
}

.elementor-page .posts-container article {
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
}

/* Additional Elementor Styles */
.elementor-section-wrap {
    max-width: none;
}

.elementor-inner {
    max-width: none;
}

.elementor-container {
    max-width: none;
}

/* Edit Links */
.edit-link {
    font-size: 0.9rem;
    color: #666;
}

.edit-link a {
    color: #0073aa;
    text-decoration: none;
}

.edit-link a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .site-main {
        padding: 1rem;
    }
    
    .posts-container article {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
    }
    
    .entry-title {
        font-size: 1.5rem;
    }
    
    .no-results {
        padding: 2rem 1rem;
    }
}

@media (max-width: 480px) {
    .site-main {
        padding: 0.5rem;
    }
    
    .entry-title {
        font-size: 1.3rem;
    }
    
    .no-results {
        padding: 1.5rem 0.5rem;
    }
}

/* Elementor Breakpoint: Tablet (1024px and below) */
@media (max-width: 1024px) {
    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.375rem;
    }

    h5 {
        font-size: 1.125rem;
    }

    h6 {
        font-size: 0.9rem;
    }
}

/* Elementor Breakpoint: Mobile (767px and below) */
@media (max-width: 767px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.375rem;
    }

    h4 {
        font-size: 1.25rem;
    }

    h5 {
        font-size: 1.125rem;
    }

    h6 {
        font-size: 0.875rem;
    }
}

/* Utilities */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.aligncenter {
    text-align: center;
}

.alignleft {
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* CSS Custom Properties for Dynamic Colors */
:root {
    --outline-color: var(--e-global-color-primary, #0189ff);
    --outline-fallback: #0189ff;
}

/* Focus Styles for Accessibility */
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--outline-color);
    outline-offset: 2px;
}

/* Focus styles for links - only show outline on links with backgrounds */
a:focus {
    outline: none; /* Remove default outline */
}

/* Apply outline only to links with background colors */
.page-links a:focus,
.page-numbers:focus,
.entry-title a:focus[style*="background"],
a:focus[style*="background-color"],
a:focus[class*="button"],
a:focus[class*="btn"],
a:focus.has-background {
    outline: 2px solid var(--outline-color);
    outline-offset: 2px;
}

/* Dynamic outline colors based on background lightness */
a:focus.light-bg {
    --outline-color: #333333;
}

a:focus.dark-bg {
    --outline-color: var(--e-global-color-primary, #0189ff);
}