/* ==========================================================================
   1. FONTS & ROOT VARIABLES
   ========================================================================== */
@import url('https://fonts.bunny.net/css?family=plus-jakarta-sans:700,800|charter:400,400i,700|inter:300,400&display=swap');

:root {
    --font-family-heading: 'Outfit', sans-serif !important;
    --font-family-base: 'Vollkorn', serif !important;
    --accent-blue: #6364ff;
}

body {
    font-family: var(--font-family-base);
    line-height: 1.65;
}

h1, h2, h3, .post-title {
    font-family: var(--font-family-heading);
    font-weight: 800;
    text-transform: none;
}

font {
    font-family: inherit !important;
    font-size: inherit !important;
}

/* ==========================================================================
   2. GLOBAL COLUMN & CARD RESET (FLAT DESIGN)
   ========================================================================== */

/* Remove frames, shadows, and default borders from the theme */
.deck-container .deck-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0rem !important;
}

/* Add consistent bottom separator for all cards */
.deck-card {
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    padding-bottom: 1.5rem !important;
}

.deck-card:last-child {
    border-bottom: none !important;
}

/* Remove underline from all links */
a {
    text-decoration: none;
}

/* Remove extra spacing from blockquotes */
blockquote {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove frame from section list pages */
.post-list-item,
.list-item,
.card {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

.modern-post {
    --shadow-sm: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   3. THE TOP ACCENT LINE (UNIVERSAL FIX)
   ========================================================================== */

/* Target the actual deck theme header - this is where the line should go */
.deck-column__header {
    border-top: 3px solid #000 !important;
    padding-top: 1rem !important;
    margin-bottom: 2rem !important;
    border-bottom: none !important;
}

/* Style the h2 inside the header */
.deck-column__header h2 {
    font-family: var(--font-family-heading) !important;
    font-weight: 800 !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Remove any borders from the column itself to prevent double lines */
.deck-column {
    border-top: none !important;
}

/* Hide the duplicate elements we were creating in the template */
.column-top-line,
.column-header,
.column-title {
    display: none !important;
}

/* ==========================================================================
   4. CLEANTEXT STYLE SPECIFICS
   ========================================================================== */

.cleantext-card {
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
}

.cleantext-image img {
    max-width: 100% !important; /* Prevents image from overflowing column */
    width: auto !important;      /* Uses original file dimensions */
    height: auto;
    display: block;
    margin-bottom: 1.2rem;
}

.cleantext-title {
    font-size: 1.3rem;
    margin: 0 0 0.8rem 0;
}

.cleantext-title a {
    text-decoration: none;
    color: #000;
}

.cleantext-snippet {
    font-family: var(--font-family-base);
    line-height: 1.6;
    color: #444;
}

/* Text Clamping Logic for Snippets */
.cleantext-inner-content {
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
    hyphens: auto;
}

.cleantext-inner-content p {
    margin-bottom: 1rem !important;
}

.cleantext-meta {
    margin-top: 1rem;
}

.read-more {
    font-family: var(--font-family-heading);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-blue);
    text-decoration: none;
}

/* ==========================================================================
   5. MASTODON COLUMN STYLE
   ========================================================================== */

.mastodon-column, .mastodon-card, .toot-text, .toot-text p {
    font-family: 'Inter', sans-serif !important;
    font-weight: 300 !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    color: #444 !important;
}

.toot-text a {
    color: var(--accent-blue);
    text-decoration: none;
}

/* ==========================================================================
   6. SINGLE POST PAGE STYLES
   ========================================================================== */

.post-single {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.post-author {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 1rem;
    display: block;
}

.post-featured-image img {
    display: block;
    margin: 2rem 0;
    max-width: 100% !important; /* Safety for mobile */
    width: auto !important;      /* Uses original size */
    height: auto;
    border: 1px solid rgba(0,0,0,0.05);
}

@media (max-width: 600px) {
    .post-featured-image img {
        max-width: 100% !important;
    }
}

/* ==========================================================================
   7. MOBILE LAYOUT - BURGER MENU & LIMITED ENTRIES
   ========================================================================== */

@media (max-width: 768px) {
    
    /* Hide theme toggle on mobile to make room for burger menu */
    .theme-toggle {
        display: none !important;
    }
    
    /* Mobile Navigation Burger Menu */
    .mobile-nav {
        position: fixed;
        top: 0;
        right: 0;
        background: transparent;
        border: none;
        z-index: 9999 !important;
        padding: 1rem;
        pointer-events: none; /* Allow clicks to pass through to logo */
    }
    
    .mobile-nav__toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 30px;
        height: 25px;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        pointer-events: all; /* But make burger itself clickable */
        margin-left: auto; /* Push to right */
    }
    
    .mobile-nav__toggle span {
        display: block;
        height: 3px;
        background: #000;
        transition: all 0.3s ease;
    }
    
    .mobile-nav__menu {
        position: fixed;
        top: 57px; /* Height of burger bar */
        left: 0;
        right: 0;
        background: #fff;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        pointer-events: all; /* Menu should be clickable */
    }
    
    .mobile-nav__menu.is-open {
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .mobile-nav__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .mobile-nav__item {
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    
    .mobile-nav__link {
        display: block;
        padding: 1rem;
        color: #000;
        text-decoration: none;
        font-family: var(--font-family-heading);
        font-weight: 700;
        font-size: 1.1rem;
        text-align: right;
    }
    
    .mobile-nav__link:hover,
    .mobile-nav__link:focus {
        background: rgba(99, 100, 255, 0.1);
        color: var(--accent-blue);
    }
    
    /* Add top padding to main content to account for fixed nav */
    .deck-scroll {
        padding-top: 70px !important;
        max-width: 100vw;
    }
    
    /* Stack columns vertically on mobile */
    .deck-scroll {
        display: block !important;
        overflow-x: visible !important;
    }
    
    .deck-column {
        width: 100% !important;
        min-width: 100% !important;
        margin-bottom: 3rem !important;
        padding: 0 1rem !important;
    }
    
    /* Make column headers clickable anchors */
    .deck-column__header {
        scroll-margin-top: 80px; /* Space for fixed nav */
    }
    
    /* Show only first 3 cards in each column on mobile */
    .deck-card:nth-child(n+4) {
        display: none !important;
    }

    /* Hide Show all link on mobile - burger menu handles navigation */
    .cleantext-showall {
        display: none !important;
    }
}

/* Burger menu animation when open */
@media (max-width: 768px) {
    .mobile-nav__toggle.is-open span:nth-child(1) {
        transform: rotate(45deg) translate(7px, 7px);
    }
    
    .mobile-nav__toggle.is-open span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-nav__toggle.is-open span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }
}

/* ==========================================================================
   8. SHOW ALL LINK
   ========================================================================== */

.cleantext-showall {
    padding: 1rem 0 2rem 0;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: 0.5rem;
}

.cleantext-showall__link {
    font-family: var(--font-family-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-blue);
    text-decoration: none;
}

.cleantext-showall__link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   9. Strip blockquote styling in legacy html archive pages 
   ========================================================================== */




.html-archive blockquote {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-style: normal !important;
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
}

/* ==========================================================================
   10. DARK MODE
   ========================================================================== */

[data-theme="dark"] {
    color: #e0e0e0;
}

[data-theme="dark"] body {
    color: #e0e0e0;
    background-color: #1a1a1a;
}

[data-theme="dark"] .cleantext-title a {
    color: #e0e0e0;
}

[data-theme="dark"] .cleantext-snippet,
[data-theme="dark"] .toot-text,
[data-theme="dark"] .toot-text p {
    color: #ccc !important;
}

[data-theme="dark"] .deck-column__header {
    border-top-color: #e0e0e0 !important;
}

[data-theme="dark"] .post-single {
    color: #e0e0e0;
}
[data-theme="dark"] .post-content a {
    color: #8b8bff;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] .post-title {
    color: #e0e0e0;
}

[data-theme="dark"] .cleantext-title a,
[data-theme="dark"] .cleantext-card .cleantext-title a {
    color: #e0e0e0 !important;
}

[data-theme="dark"] a {
    color: #8b8bff;
}

/* ==========================================================================
   11. REMOVE FRAME WHEN LIST ALL
   ========================================================================== */

.modern-post-item {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    padding-bottom: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.modern-post-item:last-child {
    border-bottom: none !important;
}