/* =========================================================
   Our Unfinished Story - Main Stylesheet
   File: /assets/css/ous-style.css
========================================================= */


/* =========================================================
   1. Global Page Foundation
========================================================= */

body {
    background: #f5f3ec;
    color: #374151;
}

/* Optional: gentle texture or image, very subtle */
body.has-texture {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.85), rgba(245,243,236,0.95)),
        url("/assets/img/paper-texture.jpg") center/cover fixed no-repeat;
}


/* =========================================================
   2. Navigation / Branding
========================================================= */

.ous-navbar-brand {
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .9rem;
}

.ous-subtitle {
    font-size: .8rem;
    opacity: .75;
}


/* =========================================================
   3. Main Layout
========================================================= */

.ous-main-wrapper {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}


/* =========================================================
   4. Reusable Text / Badges
========================================================= */

.ous-badge-category {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .7rem;
}


/* =========================================================
   5. Homepage Start Cards
========================================================= */

.start-card-highlight {
    border: 1px solid rgba(13, 110, 253, 0.25) !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.start-card-highlight .card-body {
    position: relative;
}


/* =========================================================
   6. Topic Buttons / Pills
========================================================= */

.topic-btn {
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.topic-btn:hover {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}


/* =========================================================
   7. Article Blockquotes
========================================================= */

article blockquote {
    position: relative;
    margin: 3rem 0;
    padding: 2rem 2.25rem 1.75rem 2.25rem;
    background: #f7f4ee;
    border-left: 4px solid #8b8b95;
    border-radius: 1.25rem;
    font-size: 1.12rem;
    line-height: 2;
    color: #374151;
    font-style: italic;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

article blockquote::before {
    content: "“";
    position: absolute;
    top: -10px;
    left: 14px;
    font-size: 4.5rem;
    line-height: 1;
    color: rgba(0, 0, 0, 0.08);
    font-family: Georgia, serif;
    pointer-events: none;
}

article blockquote p {
    margin-bottom: 0;
}

article blockquote a {
    font-weight: 600;
    text-decoration-thickness: 2px;
}


/* =========================================================
   8. Article Reading Experience
========================================================= */

article h2 {
    margin-top: 2.75rem;
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #374151;
}

article p {
    line-height: 1.85;
}

article ul,
article ol {
    line-height: 1.85;
}


/* =========================================================
   9. Card Refinement
========================================================= */

.card,
.rounded-3.shadow-sm.bg-white {
    border-color: rgba(0, 0, 0, 0.06);
}

.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08) !important;
}


/* =========================================================
   10. Homepage Hero Refinement
========================================================= */

.ous-home-hero {
    background: linear-gradient(135deg, #fffaf0 0%, #ffffff 70%);
    border: 1px solid rgba(0, 0, 0, 0.06);
}


/* =========================================================
   11. Footer
========================================================= */

footer {
    color: #4b5563;
}

footer a {
    transition: color 0.2s ease;
}

footer a:hover {
    color: #0d6efd !important;
}


/* =========================================================
   12. Responsive Adjustments
========================================================= */

@media (max-width: 768px) {
    article blockquote {
        padding: 1.75rem 1.5rem;
        font-size: 1.02rem;
    }

    article blockquote::before {
        font-size: 4rem;
        top: -8px;
        left: 12px;
    }

    .ous-main-wrapper {
        padding-top: 1rem;
    }
}