/*
Theme Name: Hiya Articles
Theme URI: https://hiyaarticles.com/
Author: Hiya Articles
Description: Clean editorial three-column grid theme inspired by modern story websites. Original WordPress implementation with no advertising code.
Version: 1.0.1
License: GPL-2.0-or-later
Text Domain: hiya-articles
*/

:root{--bg:#fff;--text:#18181b;--muted:#64748b;--border:#e5e7eb;--accent:#2563eb;--container:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.site-header{height:72px;border-bottom:1px solid var(--border);background:#fff;position:relative;z-index:50}
.header-inner{max-width:var(--container);height:72px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.site-title{font-family:Georgia,"Times New Roman",serif;font-size:25px;font-weight:700;letter-spacing:-.5px}
.desktop-nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500}
.desktop-nav a{padding:6px 0;border-bottom:2px solid transparent;color:#3f3f46}
.desktop-nav a:hover,.desktop-nav .current-menu-item>a{color:#111827;border-bottom-color:#111827}
.menu-toggle{display:none;border:0;background:transparent;font-size:14px;font-weight:700;cursor:pointer;padding:9px 0}
.mobile-nav{display:none;border-bottom:1px solid var(--border);background:#fff;padding:14px 24px;box-shadow:0 8px 20px rgba(0,0,0,.06)}
.mobile-nav.open{display:flex;flex-direction:column;gap:14px}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.home-main{padding:62px 0 80px}
.hero{text-align:center;max-width:718px;margin:0 auto 52px}
.hero h1{margin:0 0 12px;font-size:42px;line-height:1.12;letter-spacing:-1.6px;font-weight:750}
.hero p{margin:0;color:#64748b;font-size:18px;line-height:1.6}
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch}
.story-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e8edf3;border-radius:16px;overflow:hidden;transition:box-shadow .25s ease,transform .25s ease}
.story-card:hover{box-shadow:0 12px 30px rgba(15,23,42,.10);transform:translateY(-2px)}
.story-image{display:block;width:100%;height:190px;background:#f1f5f9;overflow:hidden}
.story-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.story-card:hover .story-image img{transform:scale(1.03)}
.story-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:14px}
.story-card-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.story-date{font-size:13px;color:#64748b;font-weight:500;margin-bottom:10px}
.story-title{font-size:23px;line-height:1.25;letter-spacing:-.5px;margin:0 0 18px;font-weight:720}
.story-card:hover .story-title{color:var(--accent)}
.read-link{font-size:14px;font-weight:700;color:#2563eb;margin-top:auto}
.read-link:hover{text-decoration:underline}
.site-footer{border-top:1px solid var(--border);padding:30px 0 40px;color:#64748b;font-size:14px}
.footer-inner{max-width:var(--container);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:24px}
.footer-nav{display:flex;gap:20px;flex-wrap:wrap}
.single-main,.page-main{padding:58px 0 80px}
.article-wrap{max-width:800px;margin:0 auto}
.article-meta{color:#64748b;font-size:14px;margin-bottom:14px}
.article-title{font-size:48px;line-height:1.08;letter-spacing:-1.8px;margin:0 0 28px}
.featured-large{width:100%;max-height:500px;object-fit:cover;border-radius:14px;margin-bottom:30px}
.article-content{font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1.8;color:#27272a}
.article-content h2,.article-content h3{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#111827;line-height:1.25}
.article-content p{margin:0 0 1.25em}
.article-content img{border-radius:10px;margin:24px auto}
.page-title{font-size:42px;line-height:1.15;letter-spacing:-1px;margin:0 0 28px}
.page-content{font-size:18px;line-height:1.8;max-width:800px}
@media(max-width:980px){.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero h1{font-size:38px}.article-title{font-size:42px}}
@media(max-width:680px){.site-header,.header-inner{height:64px}.header-inner{padding:0 18px}.site-title{font-size:21px}.desktop-nav{display:none}.menu-toggle{display:block}.container{padding:0 18px}.home-main{padding:42px 0 60px}.hero{margin-bottom:34px}.hero h1{font-size:32px;letter-spacing:-1px}.hero p{font-size:16px}.story-grid{grid-template-columns:1fr;gap:20px}.story-image{height:185px}.story-title{font-size:22px}.footer-inner{padding:0 18px;flex-direction:column}.article-title{font-size:34px;letter-spacing:-1px}.article-content{font-size:18px}.single-main,.page-main{padding:42px 0 60px}}
/* =========================
   STORY ARTICLE + CHAPTER SIDEBAR
========================= */

.single-story-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 35px;
    align-items: start;
}

.story-sidebar {
    width: 100%;
    min-width: 0;
}

.story-sidebar .story-chapter-box {
    position: sticky;
    top: 80px;
}


/* TABLE OF CONTENTS BOX */

.story-chapter-box {
    background: #fff;
    border: 1px solid #dfe5ee;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.story-chapter-title {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 16px;
    font-size: 14px;
    font-weight: 700;
    color: #172033;
    border-bottom: 1px solid #edf0f5;
}

.story-chapter-title span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-icon {
    color: #1769ff;
    font-size: 18px;
}

.story-toc-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    font-size: 11px;
    color: #8996aa;
    letter-spacing: .4px;
    border-bottom: 1px solid #edf0f5;
}

.story-chapter-list {
    max-height: 520px;
    overflow-y: auto;
}

.story-chapter-item {
    border-bottom: 1px solid #edf0f5;
}

.story-chapter-item:last-child {
    border-bottom: 0;
}

.story-chapter-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none !important;
    color: #435067;
    font-size: 13px;
    font-weight: 600;
}

.story-chapter-item a:hover {
    background: #f5f8ff;
    color: #1769ff;
}

.chapter-number {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5ff;
    color: #1769ff;
    font-size: 12px;
    font-weight: 700;
}

.active-chapter {
    background: #edf4ff;
}

.active-chapter a {
    color: #1769ff !important;
}

.active-chapter .chapter-number {
    background: #1769ff;
    color: #fff;
}


/* SCROLLBAR */

.story-chapter-list::-webkit-scrollbar {
    width: 5px;
}

.story-chapter-list::-webkit-scrollbar-thumb {
    background: #d5dce8;
    border-radius: 10px;
}


/* MOBILE */

@media (max-width: 900px) {

    .single-story-layout {
        display: block;
    }

    .story-sidebar {
        margin-top: 30px;
    }

    .story-sidebar .story-chapter-box {
        position: static;
    }

}