:root {
            --pico-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
            --pico-h2-font-size: 1.75rem;
            --pico-h2-font-weight: 700;
            --sidebar-width: 280px;
        }

        body[data-theme="dark"] {
            --pico-background-color: #111827; /* gray-900 */
            --pico-color: #d1d5db; /* gray-300 */
            --pico-card-background-color: #1f2937; /* gray-800 */
            --pico-card-border-color: #374151; /* gray-700 */
            --pico-muted-color: #9ca3af; /* gray-400 */
            --pico-form-element-background-color: #374151;
            --pico-form-element-border-color: #4b5563;
            --sidebar-bg: #1f2937; /* gray-800 */
        }
        
        body {
            overscroll-behavior-y: none;
        }

        /* Main layout */
        .app-layout {
            display: flex;
        }
		
				.article-list {
		  display: flex;
		  flex-direction: column;
		  gap: 0.5rem;
		}
		.article-row {
		  display: flex;
		  gap: 1rem;
		  align-items: flex-start;
		  background: var(--pico-card-background-color, #23272f);
		  border-radius: 0.9em;
		  box-shadow: 0 1px 4px #0002;
		  padding: 0.5em 0.7em;
		  cursor: pointer;
		  transition: background 0.2s;
		  min-height: 92px;
		}
		.article-row:hover {
		  background: #22242a;
		}
		.article-row img {
		  width: 82px;
		  height: 82px;
		  object-fit: cover;
		  border-radius: 0.6em;
		  background: #444;
		  flex-shrink: 0;
		}
		.article-row-content {
		  display: flex;
		  flex-direction: column;
		  min-width: 0;
		  flex: 1;
		}
.article-row h3 {
  font-size: 0.97rem;
  font-weight: 600;
  margin: 0 0 0.2em 0;
  line-height: 1.18;
  color: #fff;
  /* tekst mag doorlopen naar volgende regel */
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word; /* Lange woorden afbreken als nodig */
}

		.article-row p {
	  font-size: 0.92em;          /* iets kleiner */
	  margin: 0 0 0.35em 0;
	  color: var(--pico-muted-color, #a5b4c5);
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;      /* maximaal 2 regels */
	  -webkit-box-orient: vertical;
	  white-space: normal;
	  line-height: 1.33;
	}

		.article-row small {
		  color: var(--pico-muted-color, #a5b4c5);
		  font-size: 0.85em;
		}
		.article-row.is-read {
		  opacity: 0.55;
		}


        #sidebar {
            width: var(--sidebar-width);
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #1f2937; /* of var(--sidebar-bg) */
            background-color: rgba(31, 41, 55, 1); /* expliciete opaciteit = 1 */
            border-right: 1px solid var(--pico-card-border-color);
            padding: 1.5rem 1rem;
            overflow-y: auto;
            transition: transform 0.3s ease-in-out;
            z-index: 40;
            
        }

        #content-wrapper {
            flex-grow: 1;
            margin-left: var(--sidebar-width);
            padding: 2rem;
            overflow-y: auto;
            height: 100vh;
        }
        
        /* Sidebar styles */
        #sidebar h1 {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            padding: 0 0.5rem;
        }
        #sidebar nav a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.6rem 1rem;
            border-radius: var(--pico-border-radius);
            margin-bottom: 0.25rem;
            text-decoration: none;
            color: white;
            transition: background-color 0.2s;
        }
        #sidebar nav a:hover {
            background-color: #374151; /* gray-700 */
        }
        #sidebar nav a.active {
            background-color: var(--pico-primary);
            color: var(--pico-primary-inverse);
            font-weight: bold;
        }
        .nav-category-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            margin-top: 1.5rem;
            padding: 0.5rem 1rem;
            color: var(--pico-muted-color);
            font-size: 0.8rem;
            font-weight: bold;
            text-transform: uppercase;
            border-radius: var(--pico-border-radius);
        }
        .nav-category-header:hover {
             background-color: rgba(255, 255, 255, 0.05);
        }
        .chevron {
            transition: transform 0.3s ease;
            width: 1rem;
            height: 1rem;
        }
        .chevron.is-collapsed {
            transform: rotate(-90deg);
        }
        
        .feed-list {
            max-height: 1000px; /* Large value for open state */
            overflow: hidden;
            transition: max-height 0.5s ease-in-out;
        }

        .feed-list.is-collapsed {
            max-height: 0;
        }
        
        #sidebar .nav-feed {
            padding-left: 1rem; /* Indent feeds slightly */
        }
        .unread-badge {
            background-color: #4b5563; /* gray-600 */
            font-size: 0.75rem;
            font-weight: bold;
            padding: 0.15rem 0.5rem;
            border-radius: 1rem;
        }
        #sidebar nav a.active .unread-badge {
            background-color: rgba(255,255,255,0.2);
        }

        /* Mobile responsive */
        @media (max-width: 1024px) {
            #sidebar {
                transform: translateX(-100%);
            }
            #sidebar.is-open {
                transform: translateX(0);
            }
            #content-wrapper {
                margin-left: 0;
                padding: 1rem;
            }
            .sidebar-overlay {
                position: fixed;
                inset: 0;
                background-color: rgba(0,0,0,0.6);
                z-index: 30;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.3s ease-in-out;
            }
             .sidebar-overlay.is-open {
                opacity: 1;
                pointer-events: auto;
             }
        }
        
        #menu-toggle {
            display: none; /* Hidden by default */
        }
        @media (max-width: 1024px) {
            #menu-toggle {
                display: block; /* Visible on mobile */
            }
        }

        /* Content styles */
.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Verwijder deze, want sticky mag geen marge onder header geven: */
    margin-bottom: 0;
	margin-top: 0;
  	padding-top: 0;
    position: sticky;
    top: 0;
    background-color: var(--pico-background-color);
    padding: 0 0 0 0;
    z-index: 100;   /* hoger, zodat hij altijd boven je kaarten zit */
    /* optioneel: rand onder header voor visuele scheiding */
    border-bottom: 1px solid var(--pico-card-border-color, #374151);
}
.content-header h1 {
    margin-bottom: 0;
    font-size: 2rem;
	
}
		
		@media (max-width: 768px) {
  .content-header h1 {
    font-size: 1rem; /* ongeveer de helft van 2rem */
  }
}

 
        #feeds-container {
             min-height: 50vh;
			padding-top:0;
        }
        .article-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        .article-card {
            cursor: pointer;
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            display: flex;
            flex-direction: column;
            background-color: var(--pico-card-background-color);
        }
        .article-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        .article-card img {
            aspect-ratio: 16 / 9;
            object-fit: cover;
            width: 100%;
            background-color: #4b5563;
        }
        .article-card.is-read {
            opacity: 0.6;
        }
        .article-card.is-read h3 {
            font-weight: 400;
        }
        .article-card .card-content {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        .article-card h3 {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }
        .article-card p {
            font-size: 0.9rem;
            color: var(--pico-muted-color);
            flex-grow: 1;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .article-card small {
            margin-top: 1rem;
            display: block;
        }
        
        /* Login */
		   #login-screen {
		position: fixed;
		inset: 0; /* zorgt voor volledige overlay */
		z-index: 10000;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
		background: #111827; /* of je eigen kleur */
		transition: opacity 0.2s;
	}
	#login-screen.hidden {
		display: none !important;
		opacity: 0;
		pointer-events: none;
	}
	#login-screen article {
		width: 100%;
		max-width: 420px;
	}

        
        /* Modal */
        #article-modal article {
            max-height: 90vh;
            display: flex;
            flex-direction: column;
        }
        #article-modal .modal-content {
            overflow-y: auto;
        }

		
		
		
		#article-modal header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

		
		#modal-close-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    margin-left: 0.25rem;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--pico-muted-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#modal-close-btn:hover {
    color: white;
}

        /* Utility */
        .hidden {
            display: none !important;
        }

        /* Responsive title size in modal */
        @media (max-width: 768px) {
            #article-modal h2 {
                font-size: 1.25rem;
            }
        }

.article-title-link {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
  cursor: pointer;
}
.article-title-link:hover,
.article-title-link:active {
  text-decoration: underline; /* of gewoon none als je dat wilt */
  color: #2563eb; /* of inherit voor helemaal geen effect */
}

.article-title-link:hover,
.article-title-link:active {
  text-decoration: none;
  color: inherit;
}

.tts-btn-modal {
    background: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
    color: #444;
    padding: 0 0.3em;
}
.tts-btn-modal:active {
    color: #2563eb;
}

.sidebar-square-btn {
  width: 74px;
  height: 74px;
  background: #525F7A; /* jouw kleur */
  border: none;
  border-radius: 0.75em; /* afgerond vierkant */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  cursor: pointer;
  box-shadow: none;
  padding: 0;
}

.sidebar-square-btn:active,
.sidebar-square-btn:focus {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.sidebar-btn-label {
  color: #fff;
  font-size: 1.08em;
  margin-top: 0.55em;
  text-align: center;
  letter-spacing: 0.01em;
}