/* ============================================================================
 * responsive-news.css — BlogNews Responsive & Polish Layer
 * Date: 2026-04-25
 * Purpose:
 *   - Lexueshmeri optimale per artikujt (max-width 720px ne desktop)
 *   - Sidebar 2-kollona ne tablet → 1-kollone ne mobile
 *   - Breaking ticker velocity me i shpejte ne mobile
 *   - Comments thread depth max 3 nivele me identim adekuat
 *   - Newsletter form full-width ne mobile
 *   - Breadcrumb ellipsis per kategori te gjata
 *   - WCAG AA contrast & focus rings
 *   - Print stylesheet i pastruar
 *   - Dark mode token-konsistente
 *
 * Loaded LAST after responsive-fix.css to override where needed.
 * ============================================================================ */

/* ──────────────────────────────────────────────────────────────────────────
   1. ARTICLE READABILITY (post.php — .single-content)
   720px max-width per content area, fluid mobile.
   ────────────────────────────────────────────────────────────────────────── */

.single-post .content-area {
    min-width: 0;
}

.single-post .single-header,
.single-post .single-image,
.single-post .single-content,
.single-post .reactions-section,
.single-post .tags-section,
.single-post .share-box,
.single-post .author-box,
.single-post .related-posts,
.single-post .comments-section {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.single-post .single-content {
    max-width: 720px;
    font-size: 1.0625rem;
    line-height: 1.75;
}

@media (max-width: 768px) {
    .single-post .single-header,
    .single-post .single-image,
    .single-post .single-content,
    .single-post .reactions-section,
    .single-post .tags-section,
    .single-post .share-box,
    .single-post .author-box,
    .single-post .related-posts,
    .single-post .comments-section {
        max-width: 100%;
    }

    .single-post .single-content {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* Featured image: LCP optimize — larte rendering */
.single-image {
    margin: 0 auto 1.5rem;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-card, #f1f5f9);
    aspect-ratio: 16 / 9;
}

.single-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.single-image img:hover {
    transform: scale(1.02);
}

@media (max-width: 480px) {
    .single-image {
        border-radius: 8px;
        margin-bottom: 1rem;
        aspect-ratio: 4 / 3;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   2. SIDEBAR LAYOUT — 2 kolona tablet → 1 kollone mobile
   ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    .sidebar .widget,
    .sidebar .sidebar-widget {
        margin-bottom: 0;
    }

    /* Newsletter widget: nese ekziston, span 2 kolona */
    .sidebar .widget-newsletter {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .sidebar {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
        grid-template-columns: 1fr !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   3. BREAKING TICKER — velocity adekuat ne mobile
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .breaking-ticker {
        padding: 8px 0;
    }

    .breaking-label {
        font-size: 11px;
        padding: 3px 8px;
    }

    .breaking-scroll {
        animation-duration: 25s !important; /* me i shpejte ne mobile sepse ka me pak hapesire */
    }

    .breaking-scroll a {
        font-size: 13px;
        padding: 0 8px;
    }
}

@media (max-width: 480px) {
    .breaking-scroll {
        animation-duration: 20s !important;
    }

    .breaking-wrap {
        gap: 8px;
    }
}

/* Pause animation when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .breaking-scroll {
        animation: none !important;
    }

    .breaking-scroll-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   4. COMMENTS — thread depth max 3 nivele, identim adekuat per mobile
   ────────────────────────────────────────────────────────────────────────── */

.comment-replies {
    margin-left: 56px;
    border-left: 2px solid var(--border-color, #e5e7eb);
    padding-left: 16px;
}

.comment-replies .comment-replies {
    margin-left: 32px;
}

/* Niveli i 3-te (deep nesting) — flatten */
.comment-replies .comment-replies .comment-replies {
    margin-left: 0;
    border-left: 0;
    padding-left: 0;
}

@media (max-width: 768px) {
    .comment-replies {
        margin-left: 16px;
        padding-left: 10px;
    }

    .comment-replies .comment-replies {
        margin-left: 8px;
        padding-left: 8px;
    }

    .comment-item {
        gap: 8px;
    }

    .comment-avatar {
        width: 36px;
        height: 36px;
        font-size: 14px;
        flex-shrink: 0;
    }

    .comment-avatar-sm {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .comment-replies {
        margin-left: 8px;
        padding-left: 8px;
        border-left-width: 1px;
    }

    .comment-replies .comment-replies {
        margin-left: 4px;
        padding-left: 6px;
    }
}

/* Comment form: form-row stack on mobile */
@media (max-width: 640px) {
    .comment-form .form-row,
    .reply-form .form-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .comment-form .form-row > *,
    .reply-form .form-row > * {
        width: 100%;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   5. NEWSLETTER FORM — full-width mobile
   ────────────────────────────────────────────────────────────────────────── */

.widget-newsletter .newsletter-form,
.newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.widget-newsletter .newsletter-form input[type="email"],
.newsletter-form input[type="email"] {
    flex: 1 1 220px;
    min-width: 0;
}

.widget-newsletter .newsletter-form button,
.newsletter-form button {
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .widget-newsletter .newsletter-form,
    .newsletter-form {
        flex-direction: column;
        gap: 10px;
    }

    .widget-newsletter .newsletter-form input[type="email"],
    .widget-newsletter .newsletter-form button,
    .newsletter-form input[type="email"],
    .newsletter-form button {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   6. BREADCRUMB — ellipsis ne kategori te gjata
   ────────────────────────────────────────────────────────────────────────── */

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 6px;
}

.breadcrumb a,
.breadcrumb .current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.breadcrumb .current {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 768px) {
    .breadcrumb {
        font-size: 13px;
    }

    .breadcrumb a {
        max-width: 120px;
    }

    .breadcrumb .current {
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .breadcrumb a:not(:first-child) {
        max-width: 80px;
    }

    .breadcrumb .current {
        max-width: 140px;
    }

    .breadcrumb .separator {
        margin: 0 2px;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   7. ARTICLE TOOLBAR — wrap correct, full-width mobile
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .article-toolbar {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-start;
    }

    .toolbar-btn {
        flex: 1 1 auto;
        min-width: calc(33.33% - 6px);
        justify-content: center;
        padding: 8px 10px;
        font-size: 12px;
    }

    .toolbar-reading-time {
        flex: 1 1 100%;
        text-align: center;
        margin-top: 6px;
    }
}

@media (max-width: 480px) {
    .toolbar-btn {
        min-width: calc(50% - 6px);
    }

    .toolbar-btn span {
        display: inline;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   8. RELATED POSTS GRID — me i mire mobile
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .related-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   9. CATEGORY/TAG/AUTHOR HEADER — fluid title
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .u-cat-hero h1 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .u-cat-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .u-cat-mark {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   10. SEARCH OVERLAY — input fluid
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .search-overlay-content {
        padding: 16px;
    }

    .search-input-wrap input {
        font-size: 16px; /* prevent iOS zoom */
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   11. WCAG AA — Focus rings
   ────────────────────────────────────────────────────────────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.toolbar-btn:focus-visible,
.share-btn:focus-visible,
.reaction-btn:focus-visible,
.btn:focus-visible {
    outline: 2px solid #4F46E5;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
}

[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] textarea:focus-visible {
    outline-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.25);
}

/* Skip-link improvement (if exists) */
.skip-link:focus {
    background: #4F46E5;
    color: #fff;
    padding: 10px 16px;
    border-radius: 4px;
    z-index: 9999;
}

/* ──────────────────────────────────────────────────────────────────────────
   12. ADMIN — responsive helpers
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .admin-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table {
        min-width: 720px;
    }
}

@media (max-width: 768px) {
    .admin-filters,
    .admin-actions {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px;
    }

    .admin-filters input,
    .admin-filters select,
    .admin-filters button {
        width: 100% !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   13. NEWS PALETTE — semantic tokens (override consistent)
   ────────────────────────────────────────────────────────────────────────── */

:root {
    --news-brand: #c8102e;       /* breaking / urgent — red e fortë */
    --news-brand-dark: #7f1d1d;
    --news-success: #16a34a;     /* positive */
    --news-warning: #f59e0b;     /* caution */
    --news-danger:  #dc2626;     /* error */
    --news-info:    #2563eb;     /* informational */
    --news-neutral: #475569;     /* body neutral */
    --news-bg-soft: #f8fafc;
}

[data-theme="dark"] {
    --news-bg-soft: #1e293b;
    --news-neutral: #cbd5e1;
}

.badge-breaking { background: var(--news-brand) !important; color: #fff; }
.badge-success  { background: var(--news-success) !important; color: #fff; }
.badge-warning  { background: var(--news-warning) !important; color: #111; }
.badge-danger   { background: var(--news-danger) !important; color: #fff; }
.badge-info     { background: var(--news-info) !important; color: #fff; }

/* ──────────────────────────────────────────────────────────────────────────
   14. PRINT — finalisht i pastruar
   ────────────────────────────────────────────────────────────────────────── */

@media print {
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt !important;
    }

    .top-bar, .navbar, .breaking-ticker, .sidebar, .footer,
    .scroll-top, .toast-container, .reading-progress-wrap, .preloader,
    .article-toolbar, .tts-bar, .reactions-section, .share-box,
    .comments-section, .related-posts, .search-overlay, .lightbox-overlay,
    .shortcuts-panel, .breadcrumb-section, .author-box,
    .nav-actions, .mobile-toggle, .reply-form-wrap {
        display: none !important;
    }

    .single-post .content-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .single-content {
        max-width: 100% !important;
        font-size: 12pt !important;
        line-height: 1.5 !important;
    }

    .single-title {
        font-size: 22pt !important;
        margin-bottom: 12pt;
    }

    .single-image img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    a {
        color: #000 !important;
        text-decoration: none !important;
    }

    a[href]:not([href^="#"])::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   15. DARK MODE polish — mungojnë disa surface tokens ne theme switch
   ────────────────────────────────────────────────────────────────────────── */

[data-theme="dark"] .single-image {
    background: #1e293b;
}

[data-theme="dark"] .breaking-ticker {
    background: linear-gradient(90deg, #991b1b, #7f1d1d) !important;
}

[data-theme="dark"] .toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .comment-replies {
    border-left-color: #334155;
}

/* ──────────────────────────────────────────────────────────────────────────
   16. SAFE-AREA insets per iOS notched devices
   ────────────────────────────────────────────────────────────────────────── */

@supports (padding: env(safe-area-inset-bottom)) {
    .scroll-top,
    .toast-container {
        bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* end responsive-news.css */