/*
Theme Name: TryReadNow
Theme URI: https://tryreadnow.com
Author: tryreadnow
Author URI: https://tryreadnow.com
Description: Custom article reader theme for tryreadnow.com
Version: 1.2.0
License: GNU General Public License v2 or later
Text Domain: tryreadnow
*/

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@400;500;600&display=swap');

/* ═══════════════════════════════════════
   CSS VARIABLES — Light & Dark mode
═══════════════════════════════════════ */
:root {
    --bg:         #f7f5f0;
    --surface:    #ffffff;
    --ink:        #1a1a1a;
    --muted:      #6b6b6b;
    --border:     #e4e0d8;
    --accent:     #c0392b;
    --accent-h:   #a93226;
    --header-bg:  #ffffff;
    --shadow:     0 2px 16px rgba(0,0,0,0.06);
    --radius:     10px;
    --font-body:  'DM Sans', sans-serif;
    --font-head:  'Lora', serif;
}

body.dark-mode {
    --bg:        #1a1a1a;
    --surface:   #222222;
    --ink:       #e8e8f0;
    --muted:     #888899;
    --border:    #2a2a35;
    --header-bg: #13131a;
    --shadow:    0 2px 20px rgba(0,0,0,0.3);
}

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    transition: background 0.3s, color 0.3s;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
.site-header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background 0.3s, border-color 0.3s;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-logo {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.5px;
    flex-shrink: 0;
}
.site-logo span { color: var(--accent); }

.site-nav ul { display: flex; gap: 4px; align-items: center; }
.site-nav ul li a {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    transition: color 0.15s, background 0.15s;
}
.site-nav ul li a:hover,
.site-nav ul li.current-menu-item a { color: var(--ink); background: var(--border); }

.header-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.dark-toggle {
    width: 36px; height: 36px;
    border: none; background: transparent;
    cursor: pointer; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted);
    transition: background 0.15s, color 0.15s;
    font-size: 18px;
}
.dark-toggle:hover { background: var(--border); color: var(--ink); }

.btn-subscribe {
    padding: 8px 20px;
    background: var(--accent);
    color: #fff !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s, transform 0.15s;
    white-space: nowrap;
}
.btn-subscribe:hover { background: var(--accent-h); transform: translateY(-1px); }

.menu-toggle {
    display: none;
    width: 36px; height: 36px;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.menu-toggle span {
    display: block; width: 18px; height: 2px;
    background: var(--ink); border-radius: 2px; transition: all 0.2s;
}

/* ═══════════════════════════════════════
   MAIN & FOOTER
═══════════════════════════════════════ */
.site-main { min-height: calc(100vh - 64px - 80px); }

.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 28px 24px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    transition: background 0.3s;
}
.site-footer a { color: var(--accent); }
.site-footer a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════
   DARK MODE — COMPLETE
═══════════════════════════════════════ */
body.dark-mode,
body.dark-mode .trn-wrapper,
body.dark-mode .site-main {
    background-color: #1a1a1a !important;
}

/* Search */
body.dark-mode .trn-search-wrap {
    background-color: #222 !important;
    border-color: #2a2a35 !important;
}
body.dark-mode .trn-search {
    background-color: #222 !important;
    color: #e8e8f0 !important;
    border-color: #2a2a35 !important;
}
body.dark-mode .trn-search::placeholder { color: #555 !important; }
body.dark-mode .trn-search-icon { color: #555 !important; }

/* Category buttons */
body.dark-mode .trn-cat-btn {
    background-color: #222 !important;
    color: #888 !important;
    border-color: #2a2a35 !important;
}
body.dark-mode .trn-cat-btn.active {
    background-color: #e8e8f0 !important;
    color: #1a1a1a !important;
    border-color: #e8e8f0 !important;
}
body.dark-mode .trn-cat-btn:hover {
    background-color: #2a2a35 !important;
    color: #e8e8f0 !important;
}

/* Articles */
body.dark-mode .trn-article { border-color: #2a2a35 !important; }
body.dark-mode .trn-article-inner { background-color: #1a1a1a !important; }
body.dark-mode .trn-title a { color: #e8e8f0 !important; }
body.dark-mode .trn-title a:hover { color: #c0392b !important; }
body.dark-mode .trn-resume { color: #888899 !important; }
body.dark-mode .trn-date,
body.dark-mode .trn-author,
body.dark-mode .trn-source { color: #555 !important; }

/* Action buttons */
body.dark-mode .trn-action-btn {
    background: #222 !important;
    border-color: #2a2a35 !important;
    color: #555 !important;
}
body.dark-mode .trn-action-btn:hover {
    background: #2a2a35 !important;
    border-color: #444 !important;
    color: #aaa !important;
}
body.dark-mode .trn-save.active {
    border-color: #f5a623 !important;
    background: rgba(245,166,35,0.12) !important;
    color: #f5a623 !important;
}
body.dark-mode .trn-like.active {
    border-color: #e05a5a !important;
    background: rgba(224,90,90,0.12) !important;
    color: #e05a5a !important;
}

/* Read More & Load More */
body.dark-mode .trn-read-btn { background: #c0392b !important; color: #fff !important; }
body.dark-mode .trn-loadmore {
    background: #222 !important;
    border-color: #2a2a35 !important;
    color: #888 !important;
}
body.dark-mode .trn-loadmore:hover {
    background: #2a2a35 !important;
    color: #e8e8f0 !important;
}

/* Empty state */
body.dark-mode .trn-empty { color: #555 !important; }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 768px) {
    .site-nav {
        display: none;
        position: absolute;
        top: 64px; left: 0; right: 0;
        background: var(--header-bg);
        border-bottom: 1px solid var(--border);
        padding: 12px 16px;
        z-index: 99;
    }
    .site-nav.open { display: block; }
    .site-nav ul { flex-direction: column; gap: 4px; }
    .site-nav ul li a { display: block; padding: 10px 14px; }
    .menu-toggle { display: flex; }
    .btn-subscribe { display: none; }
}