/**
 * Single Episode — Stylesheet
 */

html { overflow-x: hidden; scroll-behavior: smooth; }
body { overflow-x: hidden; overflow-y: auto; height: auto; margin: 0; padding: 0; }

#page, .site, #content, .site-content,
.content-area, #primary, .hentry,
#wrapper, .page-wrapper, .main-wrapper, .container, .entry-content {
    overflow: visible !important; height: auto !important; max-width: 100% !important;
}
.ep-main { width: 100%; max-width: 100%; overflow: visible; box-sizing: border-box; }

:root {
    --brand:     #1b5e20;
    --brand-l:   #e8f5e9;
    --brand-m:   #2e7d32;
    --toolbar-h: 58px;
}

html.ep-theme-sepia { background: #ede8df; }
html.ep-theme-dark  { background: #0a0a15; }

/* ── Progress Bar ── */
.ep-progress-bar {
    position: fixed; top: 0; left: 0; height: 3px;
    background: linear-gradient(90deg, #43a047, #1b5e20);
    width: 0; z-index: 7000; transition: width .1s linear; pointer-events: none;
}

ins.adsbygoogle { min-height: 250px; }

.ep-content,
.ep-hdr,
.ep-bottom-section {
    width: 100%;
}

.ep-share-pill,
.ep-tb-btn {
    touch-action: manipulation;
}

/* ── Toolbar ── */
.ep-toolbar {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
    background: #1b5e20; z-index: 9000 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.2); width: 100% !important; box-sizing: border-box;
}
.ep-tb-inner {
    display: flex; align-items: center; gap: 12px;
    max-width: 900px; margin: 0 auto; padding: 10px 16px;
    box-sizing: border-box; min-height: var(--toolbar-h);
}
.ep-tb-back {
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.9); background: rgba(255,255,255,.1);
    border-radius: 50%; width: 40px; height: 40px;
    flex-shrink: 0; text-decoration: none; transition: background .2s;
}
.ep-tb-back:hover { background: rgba(255,255,255,.2); }
.ep-tb-back .material-icons-outlined { font-size: 20px; }
.ep-tb-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ep-tb-story-name { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-tb-ep-name { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-tb-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ep-tb-btn {
    display: flex; align-items: center; background: rgba(255,255,255,.1);
    border: none; border-radius: 20px; color: rgba(255,255,255,.9);
    padding: 7px 12px; cursor: pointer; transition: background .2s;
    min-height: 38px; font-family: inherit;
}
.ep-tb-btn:hover { background: rgba(255,255,255,.22); }
.ep-tb-btn .material-icons-outlined { font-size: 18px; }
.ep-tb-btn.ep-liked .material-icons-outlined { color: #ff6b6b; }
.ep-tb-btn.ep-bookmarked .material-icons-outlined { color: #ffd54f; }

/* ── Settings Panel ── */
.ep-settings-panel {
    position: fixed !important; top: var(--toolbar-h) !important;
    left: 0 !important; right: 0 !important; z-index: 8999 !important;
    background: #fff; border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 4px 20px rgba(0,0,0,.12); width: 100% !important; box-sizing: border-box;
}
.ep-settings-panel[hidden] { display: none !important; }
.ep-settings-inner { max-width: 900px; margin: 0 auto; padding: 14px 20px; display: flex; flex-wrap: wrap; gap: 20px; }
.ep-setting-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ep-setting-label { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #444; white-space: nowrap; }
.ep-setting-label .material-icons-outlined { font-size: 16px; color: #888; }
.ep-setting-controls { display: flex; align-items: center; gap: 6px; }
.ep-font-btn { width: 34px; height: 34px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 13px; color: #333; font-family: inherit; }
.ep-font-btn:hover { background: #e0e0e0; }
#ep-font-display { font-size: 13px; color: #555; min-width: 36px; text-align: center; font-weight: 600; }
.ep-lh-btn { width: 34px; height: 34px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700; color: #555; font-family: inherit; }
.ep-lh-btn:hover, .ep-lh-btn.ep-lh-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.ep-theme-btn { width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 13px; font-family: inherit; outline: none; }
.ep-theme-btn.ep-theme-active { box-shadow: 0 0 0 3px var(--brand); }

/* ── Admin Bar ── */
.admin-bar .ep-toolbar        { top: 32px !important; }
.admin-bar .ep-settings-panel { top: calc(32px + var(--toolbar-h)) !important; }
.admin-bar .ep-main           { padding-top: calc(32px + var(--toolbar-h)) !important; }
@media (max-width: 782px) {
    .admin-bar .ep-toolbar        { top: 46px !important; }
    .admin-bar .ep-settings-panel { top: calc(46px + var(--toolbar-h)) !important; }
    .admin-bar .ep-main           { padding-top: calc(46px + var(--toolbar-h)) !important; }
}

/* ══════════════════════════════════
   MAIN — WHITE, NO BOX, FULL WIDTH
   ══════════════════════════════════ */
.ep-main {
    background: #fff;
    min-height: 100vh;
    padding-bottom: 80px;
    padding-top: var(--toolbar-h);
}

/* article — no box, no shadow, no border, transparent */
.ep-article {
    max-width: 100%;
    margin: 0;
    background: transparent;
    box-sizing: border-box;
}

/* ── Episode Header ── */
.ep-hdr {
    max-width: 680px;
    margin: 0 auto;
    padding: 24px 20px 0;
    box-sizing: border-box;
}
.ep-breadcrumb {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; color: #999; margin-bottom: 10px; flex-wrap: wrap;
}
.ep-breadcrumb a { color: var(--brand); text-decoration: none; font-weight: 600; }
.ep-breadcrumb a:hover { text-decoration: underline; }
.ep-bc-sep { font-size: 14px; color: #ccc; }
.ep-title { font-size: 22px; font-weight: 800; color: #111; margin: 0 0 14px; line-height: 1.35; }
.ep-meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.ep-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--brand-l); color: var(--brand);
    padding: 4px 11px; border-radius: 20px;
    font-size: 12px; font-weight: 600; border: 1px solid rgba(27,94,32,.15);
}
.ep-badge .material-icons-outlined { font-size: 13px; }

/* ══════════════════════════════════════════════════
   RATING + SHARE ROW 
   ══════════════════════════════════════════════════ */
.ep-rating-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-bottom: 0;
    background: transparent;
    border-radius: 0;
    flex-wrap: wrap;
}

/* Left side — label + stars */
.ep-rating-left-group {
    display: flex; flex-direction: column; gap: 6px;
}

.ep-rating-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 700; color: #333;
    margin-bottom: 0;
}
.ep-rating-label .material-icons-outlined { font-size: 18px; color: #f5c518; }

.ep-stars-row { display: flex; gap: 2px; }
.ep-star-btn { background: none; border: none; cursor: pointer; padding: 1px; transition: transform .15s; }
.ep-star-btn:hover { transform: scale(1.2); }
.ep-star-btn .material-icons-outlined { font-size: 28px; color: #ddd; transition: color .15s; display: block; }
.ep-star-btn.ep-star-active .material-icons-outlined,
.ep-star-btn:hover .material-icons-outlined { color: #f5c518; }

.ep-rating-avg { font-size: 12px; color: #999; margin-top: 2px; }
.ep-rating-avg strong { color: #333; font-weight: 700; }

.ep-rating-login-btn {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--brand); font-size: 13px; font-weight: 700;
    text-decoration: none; background: none; border: none; cursor: pointer;
    padding: 0;
}
.ep-rating-login-btn:hover { text-decoration: underline; }
.ep-rating-login-btn .material-icons-outlined { font-size: 16px; }

/* Right side — share icon buttons (circles) */
.ep-share-strip {
    display: flex; gap: 10px; align-items: center; flex-shrink: 0;
}
.ep-share-pill {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    text-decoration: none; border: none; cursor: pointer;
    transition: all .2s; font-family: inherit;
}
.ep-swa { background: #25D366; color: #fff; }
.ep-swa:hover { background: #1ebe57; transform: scale(1.1); box-shadow: 0 3px 12px rgba(37,211,102,.4); }
.ep-sfb { background: #1877F2; color: #fff; }
.ep-sfb:hover { background: #0d6bdf; transform: scale(1.1); box-shadow: 0 3px 12px rgba(24,119,242,.4); }
.ep-scopy { background: #f0f0f0; color: #555; }
.ep-scopy:hover { background: #e0e0e0; transform: scale(1.1); }
.ep-scopy.ep-copied { background: var(--brand-l); color: var(--brand); }
.ep-share-pill svg { display: block; }
.ep-share-pill .material-icons-outlined { font-size: 18px; }

/* Share label (பகிர்) */
.ep-share-label-txt {
    font-size: 12px; font-weight: 600; color: #999; margin-right: 2px;
}

/* ── Divider ── */
.ep-hdr-divider { height: 1px; background: #eee; max-width: 680px; margin: 16px auto 0; }

/* ══════════════════════════════════
   CONTENT
   ══════════════════════════════════ */
.ep-content {
    max-width: 680px; margin: 0 auto;
    padding: 28px 20px 8px;
    font-size: 17px; line-height: 2.0;
    color: #2c2c2c; font-family: 'Noto Sans Tamil', sans-serif;
    word-break: break-word; overflow-wrap: break-word;
    box-sizing: border-box;
}
.ep-content p { margin: 0 0 1.4em; }
.ep-content h2, .ep-content h3, .ep-content h4 { color: var(--brand); margin: 1.8em 0 .8em; font-weight: 700; }
.ep-content img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 1.5em auto; }
.ep-content blockquote { border-left: 4px solid var(--brand-l); margin: 1.5em 0; padding: 16px 20px; background: #f8fdf8; border-radius: 0 8px 8px 0; font-style: italic; color: #555; }

/* ── Bottom Section ── */
.ep-bottom-section {
    max-width: 680px; margin: 0 auto;
    padding: 0 20px 24px;
}

/* ── Navigation ── */
.ep-nav-section { max-width: 680px; margin: 0 auto; padding: 12px 20px; box-sizing: border-box; }
.ep-nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.ep-nav-btn { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 12px 16px; text-decoration: none; color: #333; transition: all .2s; min-height: 60px; box-sizing: border-box; }
.ep-nav-btn:hover { border-color: var(--brand); background: var(--brand-l); color: var(--brand); }
.ep-nav-btn .material-icons-outlined { font-size: 18px; color: var(--brand); flex-shrink: 0; }
.ep-nav-next { flex-direction: row-reverse; }
.ep-nav-info { display: flex; flex-direction: column; min-width: 0; }
.ep-nav-label { font-size: 11px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: .5px; }
.ep-nav-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-nav-index { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--brand); color: #fff; border-radius: 12px; padding: 10px 14px; text-decoration: none; font-size: 11px; font-weight: 700; transition: background .2s; min-height: 60px; justify-content: center; }
.ep-nav-index:hover { background: var(--brand-m); }
.ep-nav-index .material-icons-outlined { font-size: 22px; }

/* ── Next Teaser ── */
.ep-next-teaser { max-width: 680px; margin: 16px auto 0; padding: 24px 20px; background: #f8f9fa; border-radius: 14px; border: 1px solid #e8e8e8; text-align: center; box-sizing: border-box; }
.ep-next-label { font-size: 11px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.ep-next-title { font-size: 18px; font-weight: 800; color: #1a1a1a; margin: 0 0 10px; }
.ep-next-badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ep-next-excerpt { font-size: 14px; color: #666; line-height: 1.7; margin: 0 0 16px; text-align: left; }
.ep-next-read-btn { display: inline-block; background: var(--brand); color: #fff; padding: 12px 32px; border-radius: 30px; font-size: 15px; font-weight: 700; text-decoration: none; transition: all .2s; box-shadow: 0 4px 14px rgba(27,94,32,.3); }
.ep-next-read-btn:hover { background: var(--brand-m); transform: translateY(-2px); color: #fff; }

/* ── Discussion button (below episode content, before navigation) ── */
.ep-discuss-wrap { text-align: center; margin: 26px auto 4px; max-width: 640px; padding: 0 16px; }
.ep-discuss-btn { display: inline-block; background: var(--brand); color: #fff; padding: 12px 32px; border-radius: 30px; font-size: 15px; font-weight: 700; text-decoration: none; transition: all .2s; box-shadow: 0 4px 14px rgba(27,94,32,.3); }
.ep-discuss-btn:hover, .ep-discuss-btn:focus-visible { background: var(--brand-m); transform: translateY(-2px); color: #fff; }
@media (max-width: 600px) { .ep-discuss-btn { display: block; padding: 13px 16px; font-size: 14px; } }

/* ── Comments ── */
.ep-comments-wrap { max-width: 680px; margin: 16px auto 0; padding: 24px 20px; background: #fff; border-radius: 14px; box-shadow: 0 1px 8px rgba(0,0,0,.05); box-sizing: border-box; }
.sm-clk-wrap { display: flex; justify-content: flex-end; margin: 8px 0 4px; }
.sm-comment-like-btn { display: inline-flex; align-items: center; gap: 5px; background: #f8f8f8; border: 1px solid #e8e8e8; border-radius: 20px; padding: 4px 12px; cursor: pointer; font-size: 12px; color: #999; transition: all .2s; font-family: inherit; }
.sm-comment-like-btn:hover, .sm-comment-like-btn.sm-clk-active { background: #fce4ec; border-color: #ef9a9a; color: #c62828; }
.sm-clk-heart { font-size: 15px; line-height: 1; }
.sm-clk-count { font-weight: 700; font-size: 11px; }

/* ── Related ── */
.ep-related-section { max-width: 680px; margin: 16px auto 0; padding: 20px; background: #fff; border-radius: 14px; box-shadow: 0 1px 8px rgba(0,0,0,.05); box-sizing: border-box; }
.ep-related-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid #e8f5e9; }
.ep-related-header .material-icons-outlined { color: var(--brand); font-size: 20px; }
.ep-related-header h3 { font-size: 16px; font-weight: 800; color: var(--brand); margin: 0; }
.ep-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ep-related-card { text-decoration: none; color: inherit; display: block; transition: transform .2s; }
.ep-related-card:hover { transform: translateY(-3px); }
.ep-related-cover { position: relative; aspect-ratio: 2/3; border-radius: 8px; overflow: hidden; background: #f0f0f0; margin-bottom: 7px; }
.ep-related-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-rel-badge { position: absolute; bottom: 5px; left: 5px; background: rgba(0,0,0,.7); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; }
.ep-rel-status { position: absolute; top: 5px; right: 5px; color: #fff; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 3px; }
.ep-related-info h4 { font-size: 12px; font-weight: 700; margin: 0 0 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #1a1a1a; line-height: 1.3; }
.ep-rel-stats { display: flex; gap: 8px; font-size: 11px; font-weight: 600; color: #888; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .ep-hdr { padding: 18px 16px 0; }
    .ep-content { padding: 22px 16px 8px; font-size: 16px; }
    .ep-bottom-section { padding: 0 16px 20px; }
    .ep-title { font-size: 19px; }
    .ep-rating-block { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ep-share-strip { align-self: flex-end; }
    .ep-nav-section { padding: 10px 16px; }
    .ep-nav-name { display: none; }
    .ep-nav-btn { justify-content: center; padding: 12px 10px; }
    .ep-next-teaser, .ep-comments-wrap, .ep-related-section { margin: 12px 16px 0; }
    .ep-related-grid { grid-template-columns: repeat(2, 1fr); }
    .ep-settings-inner { flex-direction: column; gap: 12px; }
    .ep-tb-btn span:not(.material-icons-outlined) { display: none; }
}

/* ── Dark/Sepia ── */
html.ep-theme-dark .ep-main,
html.ep-theme-dark body { background: #121212 !important; }
html.ep-theme-dark .ep-content { color: #dcdcdc; }
html.ep-theme-dark .ep-title { color: #fff; }
html.ep-theme-dark .ep-rating-block { border-color: #333; }
html.ep-theme-dark .ep-rating-label { color: #ddd; }
html.ep-theme-dark .ep-comments-wrap,
html.ep-theme-dark .ep-related-section,
html.ep-theme-dark .ep-next-teaser { background: #1e1e1e; border-color: #333; }
html.ep-theme-dark .ep-nav-btn { background: #1e1e1e; border-color: #333; color: #ddd; }
html.ep-theme-dark .ep-hdr-divider { background: #333; }

html.ep-theme-sepia .ep-main,
html.ep-theme-sepia body { background: #f4ecd8 !important; }
html.ep-theme-sepia .ep-content { color: #3e2b1e; }
html.ep-theme-sepia .ep-title { color: #2c1a0e; }
html.ep-theme-sepia .ep-rating-block { border-color: #d4b896; }
html.ep-theme-sepia .ep-next-teaser { background: #ede8df; border-color: #d4b896; }

@media print { body { display: none !important; } }