* {
     box-sizing: border-box;
     margin: 0;
     padding: 0
 }

 body {
     background: #c17563;
     font-family: 'Inter', sans-serif;
     color: #3e2f2a
 }

 a {
     color: inherit;
     text-decoration: none
 }

 header {
     background: #de8773;
     padding: 2rem;
     text-align: center
 }

 header h1 {
     font-family: 'Playfair Display', serif;
     font-size: 3rem;
     color: #fff
 }

 header p {
     color: #fff;
     margin-top: .5rem;
     font-size: 1.1rem
 }

 .navbar {
     background: #ffe6e1;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     padding: 1rem;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }

 .nav-links {
     display: flex;
     gap: 1.5rem;
 }

 .nav-links a {
     padding: .5rem 1rem;
     border-radius: .5rem;
     font-weight: 500;
     transition: .2s;
 }

 .nav-links a:hover {
     background: #de8773;
     color: #fff;
 }

 .search {
     position: absolute;
     right: 1rem;
 }

 .search input {
     padding: .5rem .5rem .5rem 2rem;
     border: none;
     border-radius: .5rem;
     width: 180px;
     transition: width .3s;
 }

 .search input:focus {
     width: 260px;
     outline: none;
 }

 .search .icon-search {
     position: absolute;
     left: .5rem;
     top: 50%;
     transform: translateY(-50%);
 }

 .size-4 {
     width: 1rem;
     height: 1rem
 }

 .size-5 {
     width: 1.25rem;
     height: 1.25rem
 }

 .size-6 {
     width: 1.5rem;
     height: 1.5rem
 }

.main-wrapper {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 2rem;
     max-width: 1200px;
     margin: 2rem auto;
     padding: 0 1rem;
     align-items: flex-start;
 }

.container {
     display: flex;
     flex-direction: column;
     gap: 2rem;
 }

 .card {
     background: #ffe6e1;
     border-radius: 1rem;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
     padding: 2rem;
     transition: box-shadow .3s;
 }

 .card:hover {
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1)
 }

 .card h2 {
     margin-bottom: 0.5rem;
     color: #c46352;
     font-size: 1.7rem
 }

 .card .meta {
     font-size: 0.9rem;
     margin-bottom: 1rem;
     color: #5e4a42
 }

 .card p {
     margin-bottom: 1rem;
     line-height: 1.5;
 }

 .card .read-more {
     display: inline-block;
     font-weight: 500;
     color: #de8773;
     transition: color .2s;
     font-size: 1.1rem;
     /* iets groter voor “Zie meer” */
     margin-top: 1rem;
 }

 .card .read-more:hover {
     color: #c46352;
 }

 /* Full post content styling */
 .post-content {
     margin-bottom: 1rem;
     line-height: 1.6;
     color: #3e2f2a;
 }

 .post-content a {
     color: #de8773;
     text-decoration: underline;
 }

 .post-content ul,
 .post-content ol {
     margin: 0.5rem 0 1rem 1.5rem;
 }

 .post-content blockquote {
     border-left: 4px solid #de8773;
     margin: 1rem 0;
     padding: 0.5rem 1rem;
     background: #fff5f5;
     color: #555;
 }

 /* Inline post images */
 .post-content img {
     max-width: 100%;
     height: auto;
     margin: 1rem 0;
     border-radius: 0.5rem;
 }

 .card-footer {
     font-size: 0.8rem;
     /* iets kleiner */
 }

 .share-button {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: #de8773;
     color: #fff;
     border: none;
     padding: 0.6rem 1.2rem;
     border-radius: 0.5rem;
     cursor: pointer;
     font-size: 0.9rem;
     font-weight: 600;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
 }

 .share-button:hover {
     background: #c46352;
     transform: translateY(-1px);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 }

 .share-button .share-icon {
     width: 1.2rem;
     height: 1.2rem;
 }

 /* Comment button styling */
 .comment-button {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: #fff;
     color: #c46352;
     border: 1px solid #c46352;
     padding: 0.5rem 0.75rem;
     border-radius: 0.5rem;
     font-size: 0.9rem;
     font-weight: 600;
     cursor: pointer;
     transition: background 0.2s, color 0.2s;
 }

 .comment-button:hover {
     background: #de8773;
     color: #fff;
 }

 .comment-button .size-5 {
     color: inherit;
 }


 .subscribe-button {
     display: inline-block;
     margin-top: 1rem;
     padding: 0.6rem 1.2rem;
     background: #de8773;
     color: #fff;
     border: none;
     border-radius: 0.5rem;
     font-size: 1rem;
     font-weight: 600;
     text-align: center;
     text-decoration: none;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
 }

 .subscribe-button:hover {
     background: #c46352;
     transform: translateY(-1px);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 }

.sidebar {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
 }

 .widget {
     background: #fbe3dd;
     padding: 1rem 1.5rem;
     border-radius: 1rem;
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04);
 }

 .widget h3 {
     margin-top: 0;
     font-size: 1.2rem;
     color: #c46352;
     margin-bottom: .5rem;
 }

 /* Archief structuur */
 .archive,
 .archive ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 /* Zorg dat nested pas zichtbaar wordt als active */
 .archive .nested {
     display: none;
 }

 .archive .nested.active {
     display: block;
 }

 /* Caret styling */
 .caret {
     display: inline-block;
     width: .8rem;
     height: .8rem;
     margin-right: .4rem;
     border-right: 2px solid #3e2f2a;
     border-bottom: 2px solid #3e2f2a;
     transform: rotate(-45deg);
     transition: transform .2s;
     cursor: pointer;
 }

 .caret.rotated {
     transform: rotate(45deg);
 }

 /* Indent op niveau */
 .archive li.level-0 {
     padding-left: 0;
 }

 .archive li.level-1 {
     padding-left: 1.2rem;
 }

 .archive li.level-2 {
     padding-left: 2.4rem;
 }

 /* Hover-effect op li */
 .archive li.level-0:hover>span.caret,
 .archive li.level-1:hover>span.caret {
     color: #de8773;
 }

 /* VOLGERS-TOOLTIP */

 .followers {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
 }

 .follower {
     position: relative;
     width: 36px;
     height: 36px;
 }

 .follower .avatar {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     border: 2px solid #de8773;
     object-fit: cover;
     cursor: pointer;
 }

 /* Tooltip */
 .follower .tooltip {
     position: absolute;
     bottom: 150%;
     left: 50%;
     transform: translateX(-50%) translateY(10px);
     background: #ffe6e1;
     color: #3e2f2a;
     border: 1px solid #de8773;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     padding: 0.6rem 0.8rem;
     border-radius: 0.75rem;
     white-space: nowrap;
     font-size: 0.8rem;
     font-weight: 500;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.2s ease-out, transform 0.2s ease-out;
     z-index: 100;
 }

 /* Pijltje onder de tooltip */
 .follower .tooltip::after {
     content: '';
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     border-width: 6px;
     border-style: solid;
     border-color: #ffe6e1 transparent transparent transparent;
 }

 /* Hover state */
 .follower:hover .tooltip {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(0);
 }

 .site-footer {
     background: #de8773;
     /* header- en button-accent */
     color: #fff;
     font-family: 'Inter', sans-serif;
 }

 .site-footer a {
     color: #fff;
     text-decoration: none;
 }

 .site-footer a:hover {
     text-decoration: underline;
 }

 /* Slogan */
 .footer-top {
     text-align: center;
     padding: 1.5rem 1rem 0.5rem;
 }

 .footer-top h2 {
     font-family: 'Playfair Display', serif;
     font-size: 1.75rem;
     margin: 0;
 }

 .footer-top p {
     margin: 0.5rem 0 0;
     opacity: 0.85;
 }

 /* Kolommen */
 .footer-main {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     max-width: 1200px;
     margin: 0 auto;
     padding: 1rem;
 }

 .footer-column,
 .footer-social {
     flex: 1 1 200px;
     margin: 0.5rem;
 }

 .footer-column h3,
 .footer-social h3 {
     font-size: 1.1rem;
     margin-bottom: 0.5rem;
     color: #fff;
 }

 .footer-column ul {
     list-style: none;
     padding: 0;
 }

 .footer-column li {
     position: relative;
     padding-left: 1.2rem;
     margin: 0.3rem 0;
 }

 .footer-column li::before {
     content: '›';
     position: absolute;
     left: 0;
     color: #ffe6e1;
     /* light card-accent */
 }

 /* Social icons */
 .social-icons {
     display: flex;
     gap: 0.75rem;
 }

 .activiteiten {
     width: 1.75rem;
     /* iets groter voor betere zichtbaarheid */
     height: 1.75rem;
     color: #c46352;
     transition: color 0.2s;
 }

 .socials {
     width: 1.75rem;
     /* iets groter voor betere zichtbaarheid */
     height: 1.75rem;
     color: #fff;
     transition: color 0.2s;
 }

 .social-icons a:hover .icon {
     color: #3e2f2a;
 }

 /* Follow-me button */
 .follow-button {
     display: inline-block;
     margin: 0.5rem 0 1rem;
     padding: 0.5rem 1.2rem;
     background-color: #3e2f2a;
     /* body-tekst kleur */
     color: #fff;
     /* wit */
     font-size: 0.95rem;
     font-weight: 600;
     border: none;
     border-radius: 0.5rem;
     cursor: pointer;
     transition: background-color 0.2s;
 }

 .follow-button:hover {
     background-color: #2a231f;
     /* iets donkerder voor hover */
 }

 /* Onderste regel */
 .footer-bottom {
     text-align: center;
     background: #c17563;
     /* body background */
     padding: 0.75rem 1rem;
     font-size: 0.85rem;
     opacity: 0.9;
 }

 .card-featured-image img {
     width: 100%;
     max-height: 300px;
     object-fit: cover;
     border-radius: 0.75rem;
     margin-bottom: 1rem;
 }

 .image-gallery {
     position: relative;
     display: flex;
     align-items: center;
     margin-bottom: 1rem;
 }

 .gallery-scroll {
     display: flex;
     align-items: flex-start;
     overflow-x: auto;
     gap: 0.5rem;
     width: 100%;
     scrollbar-width: thin;
 }

 .gallery-item {
     flex: 0 0 calc((100% - 0.5rem) / 2);
     overflow: hidden;
     aspect-ratio: 16 / 9;
 }

 .gallery-item figure {
     width: 100%;
     height: 100%;
     margin: 0;
 }

 .gallery-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center center;
 }

 /* Hide captions in the scrollable carousel */
 .gallery-scroll .gallery-item figcaption {
     display: none;
 }

 .gallery-nav {
     display: none;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 230, 225, 0.8);
     border: none;
     padding: 0.25rem;
     border-radius: 50%;
     cursor: pointer;
     z-index: 10;
 }

 .gallery-nav.prev {
     left: 0.5rem;
 }

 .gallery-nav.next {
     right: 0.5rem;
 }

 .gallery-nav:hover {
     background: rgba(222, 99, 82, 0.9);
 }

 .gallery-nav .size-6 {
     width: 1.5rem;
     height: 1.5rem;
     color: #c46352;
 }

 .inline-figure {
     margin: 1rem 0;
     text-align: center;
 }

 .inline-figure img {
     max-width: 100%;
     height: auto;
     border-radius: .5rem;
 }

 .inline-figure figcaption {
     margin-top: .25rem;
     font-style: italic;
     font-size: .9rem;
     color: #555;
 }

 .gallery-item figure {
     margin: 0;
 }

 .gallery-item figcaption {
     margin-top: .25rem;
     text-align: center;
     font-style: italic;
     font-size: .9rem;
     color: #555;
 }

 /* Lightbox fullscreen overlay */
 .lightbox-overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.85);
     justify-content: center;
     align-items: center;
     flex-direction: column;
     z-index: 10000;
 }

 .lightbox-overlay.active {
     display: flex;
 }

 .lightbox-image {
     max-width: 90%;
     max-height: 80%;
     margin-bottom: 1rem;
     border-radius: 0.5rem;
 }

 .lightbox-caption {
     color: #fff;
     font-size: 1rem;
     text-align: center;
     max-width: 90%;
 }

 .lightbox-close {
     position: absolute;
     top: 1rem;
     right: 1rem;
     background: none;
     border: none;
     font-size: 2rem;
     color: #fff;
     cursor: pointer;
 }

 /* Share modal */
 .share-modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.6);
     justify-content: center;
     align-items: center;
     z-index: 10001;
 }

 .share-modal.active {
     display: flex;
 }

 .share-modal-content {
     background: #fff;
     padding: 2rem;
     border-radius: 0.75rem;
     width: 90%;
     max-width: 500px;
     text-align: center;
     position: relative;
 }

 .share-modal-close {
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;
     background: none;
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
 }

 .share-modal h2 {
     margin-bottom: 1rem;
     color: #c46352;
 }

 .share-default-text {
     background: #ffe6e1;
     color: #3e2f2a;
     padding: 0.75rem;
     border-radius: 0.5rem;
     font-size: 0.95rem;
     margin-bottom: 1rem;
     line-height: 1.4;
 }

 .share-options {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
 }

 .share-options button,
 .share-options a {
     padding: 0.6rem;
     border: none;
     border-radius: 0.5rem;
     font-size: 0.95rem;
     text-decoration: none;
     color: #fff;
     background: #de8773;
     transition: background 0.2s;
 }

 .share-options button:hover,
 .share-options a:hover {
     background: #c46352;
 }