/* File: newsapp-style.css */

/* --- RESET & LAYOUT --- */
header#masthead, footer#colophon, .site-footer, #wpadminbar, .entry-header { display: none !important; }
html { margin-top: 0 !important; }
body { background: #f0f2f5; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.site-content { padding: 0 !important; max-width: 100% !important; }

.newsapp-wrapper {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    min-height: 100vh;
    box-shadow: 0 0 30px rgba(0,0,0,0.05);
}

/* --- HEADER --- */
.news-header {
    background: #fff;
    border-bottom: 1px solid #ddd;
    position: sticky; top: 0; z-index: 100;
}

.header-top {
    padding: 20px 20px 10px 20px;
    text-align: center;
}

.brand {
    font-size: 26px; font-weight: 900; color: #cc0000; /* New Brand Color */
    letter-spacing: -0.5px; margin-bottom: 5px;
}
.date-line { font-size: 13px; font-weight: 600; color: #555; }

/* --- NAVIGATION MENU --- */
.news-nav {
    display: flex;
    justify-content: center; /* Center on Desktop */
    gap: 10px;
    padding: 10px 15px;
    overflow-x: auto; /* Scrollable on Mobile */
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid #f9f9f9;
}

/* Hide Scrollbar for cleaner look */
.news-nav::-webkit-scrollbar { display: none; }

.nav-link {
    text-decoration: none;
    color: #666;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    background: #f5f5f5;
    transition: all 0.2s;
}

.nav-link.active {
    background: #cc0000;
    color: #fff;
    box-shadow: 0 2px 5px rgba(204, 0, 0, 0.3);
}

/* Mobile Tweak: Align Nav Left if it overflows */
@media (max-width: 400px) {
    .news-nav { justify-content: flex-start; }
}

/* --- CARD STYLES --- */
.news-list { padding-bottom: 50px; }
.news-card { border-bottom: 1px solid #f0f0f0; background: #fff; cursor: pointer; transition: all 0.2s; }
.news-card.open { margin: 15px 0; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); border-bottom: none; }

.card-teaser { display: flex; align-items: flex-start; padding: 20px; }
.icon-box { width: 40px; height: 40px; background: #ffebee; color: #cc0000; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0; }
.content-box { flex: 1; }
.cat-label { font-size: 10px; font-weight: 800; color: #cc0000; text-transform: uppercase; display: block; margin-bottom: 4px; }
.content-box h3 { margin: 0 0 5px 0; font-size: 17px; font-weight: 700; line-height: 1.35; color: #222; }
.summary-text { font-size: 14px; color: #666; }
.arrow-box { padding-left: 10px; color: #ccc; }
.news-card.open .arrow-box { transform: rotate(180deg); color: #cc0000; }

.full-content { display: none; padding: 0 20px 20px 75px; animation: fadeIn 0.4s; }
.news-card.open .full-content { display: block; }
.news-card.open .summary-text { display: none; }
.story-body p { font-size: 16px; line-height: 1.6; color: #333; margin-bottom: 15px; }

/* Internal Links Style */
.related-news-section { margin-top: 20px; padding-top: 15px; border-top: 1px dashed #ddd; }
.related-news-section h4 { margin: 0 0 10px 0; font-size: 13px; color: #888; text-transform: uppercase; }
.related-links { list-style: none; padding: 0; margin: 0; }
.related-links li { margin-bottom: 8px; }
.related-links a { text-decoration: none; color: #0073aa; font-weight: 600; font-size: 14px; display: flex; align-items: center; }
.related-links .dashicons { font-size: 16px; margin-right: 5px; }

.card-footer { text-align: right; margin-top: 10px; }
.close-btn { font-size: 12px; font-weight: 700; color: #999; text-transform: uppercase; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }