/*
 Theme Name: Astra Child
 Theme URI: https://curiosity-engine.online
 Description: Child theme for Astra
 Author: Sameer Arshad
 Author URI: https://curiosity-engine.online
 Template: astra
 Version: 1.0.0
*/

/* Add your custom CSS below */
/* --- RESET & VARIABLES --- */
:root {
    --c-text-main: #222222;       /* Soft Black for eyes */
    --c-text-muted: #666666;      /* Dark Grey for meta */
    --c-accent: #000000;          /* Classic Black for links */
    --c-bg: #ffffff;
    --c-border: #e5e5e5;
    
    --font-serif: "Georgia", "Times New Roman", Times, serif; /* The Classic Look */
    --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* --- LAYOUT --- */
.classic-post-container {
    max-width: 740px; /* Optimal reading width */
    margin: 80px auto;
    padding: 0 20px;
    background: var(--c-bg);
    color: var(--c-text-main);
}

/* --- TYPOGRAPHY --- */
.classic-article {
    /* Nothing fancy, just structure */
}

/* Meta Data */
.classic-meta {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-muted);
    margin-bottom: 20px;
}

/* Title */
.classic-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: normal; /* "Classic" usually implies regular weight, not bold */
    line-height: 1.3;
    margin-bottom: 10px;
    color: var(--c-text-main);
}

.classic-author {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--c-text-muted);
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--c-border);
}

/* Content Body */
.classic-content {
    font-family: var(--font-serif);
    font-size: 1.15rem; /* Slightly larger for readability */
    line-height: 1.8;   /* Generous line height */
    color: var(--c-text-main);
}

.classic-content p {
    margin-bottom: 1.5em;
}

.classic-content h2 {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    margin-top: 2em;
    margin-bottom: 0.8em;
    font-weight: 600;
}

.classic-content a {
    color: var(--c-accent);
    text-decoration: underline;
    text-decoration-color: #ccc;
    transition: text-decoration-color 0.2s ease;
}
.classic-content a:hover {
    text-decoration-color: var(--c-accent);
}

/* Image Styling */
.classic-image-wrapper {
    margin: 0 0 40px 0;
    width: 100%;
}
.classic-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%); /* Optional: Makes images look timeless */
    transition: filter 0.3s;
}
.classic-image-wrapper img:hover {
    filter: grayscale(0%); /* Color on hover */
}

/* --- FOOTER & TOOLS --- */
.classic-divider-line {
    border: 0;
    height: 1px;
    background: var(--c-border);
    margin: 60px 0;
}

.classic-footer h3 {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: var(--c-text-muted);
}

.classic-tool-list {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}
.classic-tool-list li {
    margin-bottom: 8px;
}
.classic-tool-list a {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--c-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.classic-tool-list a:hover {
    border-bottom: 1px solid var(--c-accent);
}

/* Tags */
.classic-tags {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--c-text-muted);
}
.classic-tags a {
    text-decoration: none;
    color: var(--c-text-muted);
    margin-right: 10px;
}
.classic-tags a:hover {
    color: var(--c-accent);
}

/* --- NAVIGATION --- */
.classic-post-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid var(--c-border);
    font-family: var(--font-sans);
    font-size: 0.9rem;
}

.nav-center {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
}

.nav-previous, .nav-next {
    width: 40%; /* Fixed width to ensure center stays centered */
}

.nav-previous { text-align: left; }
.nav-next { text-align: right; }

.nav-previous a, .nav-next a {
    text-decoration: none;
    color: var(--c-accent);
}

.nav-previous a:hover, .nav-next a:hover {
    text-decoration: underline;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 600px) {
    .classic-post-container {
        margin: 40px auto;
        padding: 0 20px;
    }
    
    .classic-title {
        font-size: 2rem;
    }

    .classic-post-nav {
        flex-direction: column;
        gap: 20px;
    }
    
    .nav-previous, .nav-next {
        width: 100%;
        text-align: center;
    }
}