/*
Theme Name: QNA Theme
Theme URI: https://example.com/qna-theme
Author: Your Name
Author URI: https://example.com
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(--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);
    color: var(--color-text-link);
    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 - Accordion */
.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-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faq-accordion-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-accordion-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.faq-accordion-header {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: var(--color-bg-primary);
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    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);
    transition: background-color 0.3s ease;
    position: relative;
}

.faq-accordion-header:hover {
    background-color: var(--color-bg-tertiary);
}

.faq-accordion-header:focus {
    outline: 2px solid var(--color-border-accent);
    outline-offset: -2px;
}

.faq-accordion-header[aria-expanded="true"] {
    background-color: var(--color-bg-secondary);
}

.faq-accordion-header[aria-expanded="true"] .faq-accordion-icon {
    transform: rotate(45deg);
}

.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-accordion-icon {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-light);
    color: var(--color-text-accent);
    line-height: 1;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 1.5rem;
}

.faq-accordion-content[aria-hidden="false"] {
    max-height: 2000px;
    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 {
        flex-direction: column;
        gap: 1rem;
    }
    
    .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-accordion-header {
        padding: 1rem;
        font-size: var(--font-size-base);
    }
    
    .faq-accordion-content[aria-hidden="false"] {
        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;
    }
}