/*
Theme Name: PDLAB Theme
Theme URI: https://pdlab.me/
Author: PD LAB
Author URI: https://pdlab.me/
Description: A custom WordPress theme for Q&A functionality
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: qna-theme
Tags: custom, qna, question-answer

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* ============================================
   TYPOGRAPHY SYSTEM - CSS CUSTOM PROPERTIES
   ============================================ */

:root {
    /* Font Families */
    --font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-family-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-family-monospace: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
    
    /* Font Sizes - Modular Scale (1.25 ratio) */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px - Base */
    --font-size-md: 1.125rem;     /* 18px */
    --font-size-lg: 1.25rem;      /* 20px */
    --font-size-xl: 1.5rem;       /* 24px */
    --font-size-2xl: 1.875rem;    /* 30px */
    --font-size-3xl: 2.25rem;     /* 36px */
    --font-size-4xl: 3rem;        /* 48px */
    --font-size-5xl: 3.75rem;     /* 60px */
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    /* Letter Spacing */
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
    
    /* Text Colors */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-tertiary: #6b6b6b;
    --color-text-muted: #9a9a9a;
    --color-text-inverse: #ffffff;
    --color-text-link: #0073aa;
    --color-text-link-hover: #005a87;
    --color-text-accent: #0073aa;
    --color-text-success: #2e7d32;
    --color-text-error: #c62828;
    --color-text-warning: #f57c00;
    
    /* Background Colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f5f5f5;
    --color-bg-tertiary: #f9f9f9;
    --color-bg-dark: #1a1a1a;
    --color-bg-darker: #0f0f0f;
    --color-bg-accent: #0073aa;
    --color-bg-accent-light: #e3f2fd;
    --color-bg-success: #e8f5e9;
    --color-bg-success-dark: #4caf50;
    --color-bg-error: #ffebee;
    --color-bg-warning: #fff3e0;
    
    /* Border Colors */
    --color-border-light: #e0e0e0;
    --color-border-medium: #d0d0d0;
    --color-border-dark: #b0b0b0;
    --color-border-accent: #0073aa;
}

/* ============================================
   RESET AND BASE STYLES
   ============================================ */

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

html {
    font-size: 16px; /* Base font size for rem calculations */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
    letter-spacing: var(--letter-spacing-normal);
}

/* ============================================
   TYPOGRAPHY ELEMENTS
   ============================================ */

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: 1rem;
    margin-top: 0;
}

h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    margin-bottom: 1.5rem;
}

h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: 1.25rem;
}

h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    margin-bottom: 1rem;
}

h4 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    margin-bottom: 0.875rem;
}

h5 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    margin-bottom: 0.75rem;
}

h6 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* Paragraphs */
p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

p:last-child {
    margin-bottom: 0;
}

/* Lead/Intro Text */
.lead,
.intro-text {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-loose);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
}

/* Small Text */
small,
.text-small {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

/* Extra Small Text */
.text-xs {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

/* Large Text */
.text-lg {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
}

/* Extra Large Text */
.text-xl {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-relaxed);
}

/* Links */
a {
    color: var(--color-text-link);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

a:hover,
a:focus {
    color: var(--color-text-link-hover);
    text-decoration: underline;
}

a:active {
    color: var(--color-text-link-hover);
}

/* Links in headings */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: var(--color-text-link);
    text-decoration: underline;
}

/* Lists */
ul, ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
    color: var(--color-text-primary);
}

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

li {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
}

li:last-child {
    margin-bottom: 0;
}

/* Nested Lists */
ul ul, ol ol, ul ol, ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Definition Lists */
dl {
    margin-bottom: 1rem;
}

dt {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

dt:first-child {
    margin-top: 0;
}

dd {
    margin-left: 2rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-secondary);
}

/* Blockquotes */
blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid var(--color-border-accent);
    background-color: var(--color-bg-tertiary);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    font-style: italic;
}

blockquote p {
    margin-bottom: 0.5rem;
}

blockquote p:last-child {
    margin-bottom: 0;
}

blockquote cite {
    display: block;
    margin-top: 0.75rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    font-style: normal;
}

blockquote cite::before {
    content: "— ";
}

/* Code */
code,
kbd,
samp {
    font-family: var(--font-family-monospace);
    font-size: 0.9em;
    background-color: var(--color-bg-tertiary);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    color: var(--color-text-primary);
}

pre {
    font-family: var(--font-family-monospace);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    background-color: var(--color-bg-tertiary);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
}

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

/* Horizontal Rule */
hr {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: 2rem 0;
    background-color: transparent;
}

/* Emphasis */
strong,
b {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

em,
i {
    font-style: italic;
}

/* Mark/Highlight */
mark {
    background-color: #fff3cd;
    color: var(--color-text-primary);
    padding: 0.125rem 0.25rem;
}

/* Abbreviations */
abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

/* Address */
address {
    font-style: normal;
    line-height: var(--line-height-relaxed);
    margin-bottom: 1rem;
}

/* Text Alignment */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

/* Text Colors */
.text-primary {
    color: var(--color-text-primary);
}

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

.text-tertiary {
    color: var(--color-text-tertiary);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-inverse {
    color: var(--color-text-inverse);
}

.text-link {
    color: var(--color-text-link);
}

.text-accent {
    color: var(--color-text-accent);
}

.text-success {
    color: var(--color-text-success);
}

.text-error {
    color: var(--color-text-error);
}

.text-warning {
    color: var(--color-text-warning);
}

/* Font Weights */
.font-light {
    font-weight: var(--font-weight-light);
}

.font-normal {
    font-weight: var(--font-weight-normal);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

.font-extrabold {
    font-weight: var(--font-weight-extrabold);
}

/* Text Transform */
.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

/* Text Decoration */
.underline {
    text-decoration: underline;
}

.no-underline {
    text-decoration: none;
}

.line-through {
    text-decoration: line-through;
}

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

/* ============================================
   LAYOUT COMPONENTS
   ============================================ */

/* Header Styles */
.site-header {
    background-color: var(--color-bg-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1rem 0;
    margin-bottom: 2rem;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    text-decoration: none;
    font-family: var(--font-family-heading);
}

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

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

.main-navigation a {
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    transition: color 0.2s ease;
}

.main-navigation a:hover {
    color: var(--color-text-link);
}

/* Main Content */
.site-main {
    background-color: var(--color-bg-primary);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

/* Posts */
.post {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border-light);
}

.post:last-child {
    border-bottom: none;
}

.post-title {
    font-size: var(--font-size-2xl);
    margin-bottom: 1rem;
}

.post-title a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.post-title a:hover {
    color: var(--color-text-link);
}

.post-meta {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: 1rem;
}

.post-content {
    margin-bottom: 1rem;
}

/* Footer */
.site-footer {
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
    padding: 2rem 0;
    text-align: center;
}

.site-footer a {
    color: var(--color-text-inverse);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--color-text-link);
}

/* ============================================
   QNA POST TYPE STYLES
   ============================================ */

.qna-post {
    margin-bottom: 2rem;
}

.qna-title {
    font-size: var(--font-size-4xl);
    margin-bottom: 1rem;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-extrabold);
}

.qna-content {
    margin-top: 2rem;
}

.qna-question {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: var(--color-bg-tertiary);
    border-left: 4px solid var(--color-border-accent);
    border-radius: 4px;
    scroll-margin-top: 80px; /* For anchor link scrolling */
}

#question {
    scroll-margin-top: 80px;
}

#acceptedAnswer {
    scroll-margin-top: 80px;
}

#suggestedAnswer {
    scroll-margin-top: 80px;
}

.qna-question h2 {
    font-size: var(--font-size-xl);
    margin-bottom: 1rem;
    color: var(--color-text-accent);
}

.question-content {
    font-size: var(--font-size-md);
    line-height: var(--line-height-loose);
    color: var(--color-text-primary);
}

/* Accepted Answer Styles */
.qna-accepted-answer {
    margin: 2rem 0;
    padding: 2rem;
    background-color: var(--color-bg-success);
    border: 2px solid var(--color-bg-success-dark);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.qna-accepted-answer h2 {
    font-size: var(--font-size-xl);
    margin-bottom: 1rem;
    color: var(--color-text-success);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.accepted-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--color-bg-success-dark);
    color: var(--color-text-inverse);
    border-radius: 4px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
}

.answer-content {
    font-size: var(--font-size-md);
    line-height: var(--line-height-loose);
    margin-bottom: 1rem;
    color: var(--color-text-primary);
}

.answer-meta {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.qna-upvote-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--qna-upvote-button-color, var(--color-bg-accent));
    color: var(--color-text-inverse);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family-primary);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.qna-upvote-btn:hover {
    background-color: var(--color-text-link-hover);
    transform: translateY(-1px);
}

.qna-upvote-btn:active {
    transform: translateY(0);
}

.qna-upvote-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.qna-upvote-btn.loading {
    opacity: 0.7;
}

.qna-upvote-btn.upvoted {
    background-color: var(--color-bg-success-dark);
}

.qna-upvote-btn .upvote-icon {
    font-size: var(--font-size-base);
}

.upvotes {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.upvote-count {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
}

/* Suggested Answers Styles */
.qna-suggested-answers {
    margin: 2rem 0;
}

.qna-suggested-answers h2 {
    font-size: var(--font-size-xl);
    margin-bottom: 1.5rem;
    color: var(--color-text-primary);
}

.suggested-answer-item {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-medium);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease;
}

.suggested-answer-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.suggested-answer-item .answer-content {
    margin-bottom: 1rem;
}

/* QNA Archive Styles */
.qna-archive-list {
    display: grid;
    gap: 2rem;
}

.qna-archive-item {
    padding: 1.5rem;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-medium);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.qna-archive-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.qna-archive-item .entry-title {
    font-size: var(--font-size-xl);
    margin-bottom: 0.5rem;
}

.qna-archive-item .entry-title a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.qna-archive-item .entry-title a:hover {
    color: var(--color-text-link);
}

.qna-archive-item .entry-summary {
    margin: 1rem 0;
    color: var(--color-text-secondary);
}

.qna-archive-item .read-more {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--color-bg-accent);
    color: var(--color-text-inverse);
    text-decoration: none;
    border-radius: 4px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: background-color 0.3s ease;
}

.qna-archive-item .read-more:hover {
    background-color: var(--color-text-link-hover);
}

/* FAQ Section Styles */
.faq-section {
    margin: 3rem 0;
    padding: 2rem 0;
    border-top: 2px solid var(--color-border-light);
}

.faq-section-title {
    font-size: var(--font-size-2xl);
    margin-bottom: 2rem;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faq-item {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.faq-header {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: var(--color-bg-primary);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-primary);
    color: var(--color-text-primary);
}

.faq-number {
    color: var(--color-text-accent);
    font-weight: var(--font-weight-bold);
    min-width: 1.5rem;
    flex-shrink: 0;
}

.faq-question-text {
    flex: 1;
    text-align: left;
}

.faq-content {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.faq-answer {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    padding-top: 1rem;
}

.faq-answer p {
    margin: 0.5rem 0;
}

.faq-answer p:first-child {
    margin-top: 0;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .site-header .container {
        gap: 1rem;
    }
.site-branding h1.site-title {
    margin: 0;
}
    
    .main-navigation ul {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .site-main {
        padding: 1rem;
    }
    
    .qna-title {
        font-size: var(--font-size-2xl);
    }
    
    h1 {
        font-size: var(--font-size-3xl);
    }
    
    h2 {
        font-size: var(--font-size-2xl);
    }
    
    h3 {
        font-size: var(--font-size-xl);
    }
    
    .qna-accepted-answer,
    .qna-suggested-answers .suggested-answer-item {
        padding: 1rem;
    }
    
    .faq-section {
        margin: 2rem 0;
        padding: 1.5rem 0;
    }
    
    .faq-section-title {
        font-size: var(--font-size-xl);
        margin-bottom: 1.5rem;
    }
    
    .faq-header {
        padding: 1rem;
        font-size: var(--font-size-base);
    }
    
    .faq-content {
        padding: 0 1rem 1rem 1rem;
    }
    
    .faq-answer {
        font-size: var(--font-size-sm);
        padding-top: 0.75rem;
    }
    
    .faq-accordion-icon {
        font-size: var(--font-size-lg);
        width: 20px;
        height: 20px;
    }
}

/* ============================================
   CATEGORY BADGES
   ============================================ */

.post-categories {
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.category-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-accent);
    background-color: var(--color-bg-accent-light);
    border: 1px solid var(--color-border-accent);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.category-badge:hover {
    color: var(--color-text-inverse);
    background-color: var(--color-bg-accent);
    border-color: var(--color-bg-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 115, 170, 0.2);
}

/* Alternative badge styles - you can use these by adding classes */
.category-badge.badge-minimal {
    background-color: transparent;
    border: 1px solid var(--color-border-medium);
    color: var(--color-text-secondary);
}

.category-badge.badge-minimal:hover {
    border-color: var(--color-border-accent);
    color: var(--color-text-accent);
    background-color: var(--color-bg-accent-light);
}

.category-badge.badge-solid {
    background-color: var(--color-bg-accent);
    color: var(--color-text-inverse);
    border: none;
}

.category-badge.badge-solid:hover {
    background-color: var(--color-text-link-hover);
}
/* Basic header styles */
.main-navigation {
    display: flex;
}

.main-navigation ul {
    display: flex;
    gap: 25px;
    list-style: none;
}

/* Hide menu button on desktop */
.menu-toggle {
    display: none;
    background: none;
    font-size: 30px;
    border: none;
    cursor: pointer;
}
/* Basic header styles */
.main-navigation {
    display: flex;
}

.main-navigation ul {
    display: flex;
    gap: 25px;
    list-style: none;
}

/* Hide menu button on desktop */
.menu-toggle {
    display: none;
    background: none;
    font-size: 30px;
    border: none;
    cursor: pointer;
}
/* Start custom CSS for post-comments, class: .elementor-element-cc56f32 */form#commentform {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}
form#commentform p.comment-form-cookies-consent,
form#commentform  p.comment-form-comment,
form#commentform p.comment-notes {
    width: 100%;
}
form#commentform label {
    color: #414042;
    fill: #414042;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 5px;
    padding-bottom: 10px;
}
form#commentform p.comment-form-author, form#commentform p.comment-form-email, form#commentform p.comment-form-url {
    width: calc(100% / 3 - 15px);
}
form#commentform textarea, form#commentform input {
    background-color: #ffffff;
    border-color: #414042;
    border-radius: 12px 12px 12px 12px;
    font-size: 15px;
    font-weight: 400;
    color: #414042;
    width: 100%;
    margin-top: 10px;
	padding: 10px;
}
form#commentform  p.form-submit input {
    background: #BF920B;
    color: #fff;
    border: 1px solid;
    min-width: 220px;
    height: 55px;
}
#comments .comment-body {
    padding: 20px 0 20px 70px;
    position: relative;
    border-top: 1px solid #ddd;
    min-height: 180px;
    gap: 10px;
}
#comments .comment-body footer.comment-meta {
    font-size: 18px;
}

#comments .comment-body footer.comment-meta .comment-metadata {
    font-size: 14px;
}
#comments .comment-body  .comment-content {
    font-size: 20px;
}
#comments .comment .comment-body, #comments .pingback .comment-body {
    display: flex;
    flex-direction: column;
    padding-block-start: 30px;
    padding-block-end: 30px;
    padding-inline-start: 60px;
    padding-inline-end: 20px;
    border-block-end: 1px solid #ccc;
}
form#commentform p.comment-form-cookies-consent {
    display: flex
;
    gap: 15px;
    align-items: center;
}
form#commentform p.comment-form-cookies-consent input#wp-comment-cookies-consent {
    width: 30px;
    height: 30px;
}
.comment-author.vcard {
    display: flex;
    gap: 10px;
    align-items: center;
}
div#respond h2#reply-title a,
#comments .comment .comment-body a {
    color: #BF920B;
}
div#respond h2#reply-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 30px;
}
#comments .children {
    padding-inline-start: 50px;
}
#comments ol.comment-list .children:before {
    font-size: 2em;
    top: 20px;
    right: -10px !important;
}
.title-comments:before {
    content: 'תגובות';
    margin-left: 10px;
}
form#commentform input {
    height: 40px;
    border: 1px solid;
}
.right-sec {
    width: 50%;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-end;
}
.main-navigation ul li,
.main-navigation ul {
    margin: 0;
}
nav.navigation.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.mobile_menu{
	display:none;
}
footer#colophon .site-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #fff;
	align-items:center;
}
footer#colophon .site-info p {
    color: #fff;
}
ul#footer-menu {
    padding: 0;
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
}
ul#footer-menu li{
	margin:0;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.main-navigation {
        display: none;
        width: 100%;
        background: #fff;
        padding: 20px;
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 15px;
    }

    .menu-toggle {
        display: block;
        margin-left: auto;
    }

    /* Show menu when active */
    .main-navigation.active {
        display: block;
    }
    .post-categories {
        margin-bottom: 0.5rem;
        gap: 0.375rem;
    }
    
    .category-badge {
        padding: 0.2rem 0.6rem;
        font-size: 0.65rem;
    }
.main-navigation {
    display: block;
    width: 100%;
    background: #fff;
    padding: 45px 20px;
    position: fixed;
    z-index: 9999;
    width: calc(100% - 30px);
    top: 0;
    box-shadow: 0 0 10px #eee;
    height: 100vh;
    right: -100%;
    transition: all .5s;
    max-width: 320px;
}
.main-navigation.active {
    right: 0;
}
.main-navigation ul li, 
.main-navigation ul {
    text-align: left;
}

	.site-main {
		padding: 1rem;
		max-width: 94%;
		margin: 0 auto 50px;
		width: 100%;
	}

    .main-navigation ul {
        flex-direction: column;
        gap: 15px;
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #878787;
    }

    .menu-toggle {
        display: block;
        margin-left: auto;
    }

    /* Show menu when active */
    .main-navigation.active {
        display: block;
    }
.site-header .container {
    flex-wrap: wrap;
}
.header-widget-area,
.right-sec,
div#search-2 {
    width: 100%;
}
.header-widget-area input.search-field {
    width: calc(100% - 85px);
}
.mobile_menu {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 10px;
}
.mobile_menu .site-title a {
    font-size: 22px;
    font-weight: bold;
}
footer.entry-footer .post-tags a {
    color: #000;
    background: #eee;
    padding: 8px 20px;
    margin-right: 2px;
    border-radius: 5px;
    text-decoration: none;
    text-transform: capitalize;
}
footer#colophon .site-info {
    flex-direction: column-reverse;
    gap: 30px;
}
ul#footer-menu {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
ul#footer-menu li a {
    padding: 10px;
    background: #3b3b3b;
    width: 100%;
    display: block;
}
}
@media screen and (max-width:767px){
    form#commentform p.comment-form-author, form#commentform p.comment-form-email, form#commentform p.comment-form-url {
    width: calc(100%);
    margin: 0;
}
#comments .comment-meta {
    display: flex;
    justify-content: space-between;
    margin-block-end: .9rem;
    flex-wrap: wrap;
    gap: 20px;
}
#comments .comment .comment-body, #comments .pingback .comment-body {
    padding-inline-start: 0;
}
#comments .children {
    padding-inline-start: 25px;
}
#comments ol.comment-list .children:before {
    font-size: 1.5em;
    top: 5px;
}
}
/* End custom CSS */





span.screen-reader-text {
    display: none;
}
input.search-field {
    padding: 7px 7px;
    font-size: 16px;
}
input.search-submit {
    padding: 9px 14px;
    background: #0273aa;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 3px;
}
img.attachment-full {
    width: 100%;
    height: auto;
}

/*********************************************/
	.PostGrid{
		    display: grid;
    grid-template-columns: repeat(3, 1fr);
		gap:15px;
	}

.PostGrid article {
	border:0;
}

	.PostGrid img {
		max-width: 100%;
		height: 250px;
		object-fit: cover;
	}

.category-post-item,
.type-post,
.category-uncategorized {
    position: relative;
}
.post-categories {
    position: absolute;
    top: 10px;
    left: 10px;
}

.read-more {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background-color: #0073aa;
    color: var(--color-text-inverse);
    text-decoration: none;
    border-radius: 4px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: background-color 0.3s ease;
    text-decoration: none!important;
}


.read-more:hover {
	color:#FFF;
}
.read-more:hover {
    background: #005a87;
    color: #FFF;
}


.category-badge {
    color: #ffffff;
    background-color: #000000;
    border: 1px solid #000000;
}
.category-badge:hover {
    color: #ffffff;
    background-color: #000000;
    border: 1px solid #000000;
}

@media (max-width:1024px){
		.PostGrid{
    grid-template-columns: repeat(2, 1fr);

	}
}


@media (max-width:680px){
		.PostGrid{
    grid-template-columns: repeat(1, 1fr);

	}
}