/*
Theme Name:  Yvonta 1
Theme URI:   https://yvonta.com
Author:      Yvonta
Author URI:  https://yvonta.com
Description: De authentieke huis-aan-huiskrant stijl van Yvonta 1 (voorheen "Toekomst Mens"). Een klassiek krantenlayout met kolommen, drop caps, dubbele lijnen en een warme papierkleur — volledig gebouwd voor WordPress, tweetalig (Engels/Nederlands) op basis van de sitetaal.
Version:     1.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yvonta-1
Tags:        news, newspaper, magazine, blog, custom-menu, featured-images, two-columns, three-columns, grid-layout, translation-ready
*/

/* ─── RESET & BASE ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-paper:     #f4f3ef;
    --ink-black:    #111111;
    --ink-muted:    #2b2b2b;
    --ink-faint:    #555555;
    --border-solid: #111111;
    --border-light: #cccccc;
    --border-rule:  #e0ddd7;
    --white:        #ffffff;

    --font-serif:   'Times New Roman', Times, Georgia, serif;
    --font-body:    Georgia, 'Times New Roman', serif;

    --container:    1200px;
    --gutter:       24px;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
    background-color: var(--bg-paper);
    color: var(--ink-black);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.55;
    overflow-x: hidden;
}

/* ─── UTILITY LINES ─── */
.rule-thick  { height: 5px;  background: var(--border-solid); margin: 12px 0; }
.rule-thin   { height: 1px;  background: var(--border-solid); margin: 8px 0; }
.rule-double { border-bottom: 4px double var(--border-solid); margin: 15px 0; padding-bottom: 4px; }
.rule-light  { height: 1px;  background: var(--border-light); margin: 8px 0; }

/* ─── CONTAINER ─── */
.tm-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    position: relative;
}

/* ─── MASTHEAD ─── */
#masthead {
    background: var(--bg-paper);
    padding-top: 28px;
    text-align: center;
}

.masthead-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-serif);
    font-size: 11.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-black);
    letter-spacing: 0.06em;
    padding-bottom: 10px;
}

.site-title, .site-title a {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: clamp(44px, 8vw, 90px);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--border-solid);
    line-height: 0.92;
    margin: 8px 0;
    text-decoration: none;
    display: block;
}
.site-title:hover { opacity: 0.85; }

.site-description {
    font-family: var(--font-serif);
    font-size: 13px;
    font-style: italic;
    color: var(--ink-faint);
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.entry-category-label
{
	text-decoration: none;
}

/* ─── PRIMARY NAVIGATION ─── */
#site-navigation {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(244, 243, 239, 0.97);
    border-top: 1px solid var(--border-solid);
    border-bottom: 4px double var(--border-solid);
    padding: 0;
    backdrop-filter: blur(4px);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

.main-navigation ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px 0;
}

.main-navigation ul li { position: relative; }

.main-navigation ul li a {
    text-decoration: none;
    color: var(--ink-black);
    font-size: 12.5px;
    font-family: var(--font-serif);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: opacity 0.18s;
    padding: 4px 0;
    display: block;
}
.main-navigation ul li a:hover { opacity: 0.55; }

/* Dropdown */
.main-navigation ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-paper);
    border: 1px solid var(--border-solid);
    min-width: 200px;
    gap: 0;
    flex-direction: column;
    padding: 0;
    z-index: 999;
}
.main-navigation ul li:hover > ul { display: flex; }
.main-navigation ul li ul li a {
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-light);
    font-size: 11.5px;
}


.menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--border-solid);
    color: var(--ink-black);
    font-size: 16px;
    cursor: pointer;
    padding: 6px 12px;
    font-family: var(--font-serif);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    margin: 8px 0;
}

/* ─── LAYOUT WRAPPERS ─── */
#page { min-height: 100vh; display: flex; flex-direction: column; }
#content { flex: 1; padding: 40px 0 60px; }

/* Two-column layout */
.content-area   { float: left;  width: 68%; padding-right: 40px; }
.widget-area    { float: right; width: 32%; }
.content-area.full-width { width: 100%; padding-right: 0; float: none; }

.site-content::after { content: ''; display: table; clear: both; }

/* ─── KRANTENLAYOUT: ARTIKELEN GRID ─── */

/* Voorpagina: groot + klein featured */
.front-hero { margin-bottom: 30px; }

.front-hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 40px;
    align-items: start;
}

/* Hero kicker */
.entry-kicker {
    font-family: var(--font-serif);
    font-size: 12.5px;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-black);
    margin-bottom: 8px;
    display: block;
}

/* Headline stijl */
.entry-title-headline {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: clamp(26px, 3.8vw, 44px);
    line-height: 1.06;
    color: var(--border-solid);
    margin-bottom: 18px;
    letter-spacing: -0.02em;
}
.entry-title-headline a { text-decoration: none; color: inherit; }
.entry-title-headline a:hover { text-decoration: underline; }

/* Section headline (h2 stijl voor subartikelen) */
.entry-title-section {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: clamp(17px, 2.2vw, 22px);
    line-height: 1.15;
    color: var(--border-solid);
    margin-bottom: 10px;
}
.entry-title-section a { text-decoration: none; color: inherit; }
.entry-title-section a:hover { text-decoration: underline; }

/* Kleine koppen */
.entry-title-minor {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 15px;
    line-height: 1.2;
    margin-bottom: 6px;
}
.entry-title-minor a { text-decoration: none; color: var(--border-solid); }
.entry-title-minor a:hover { text-decoration: underline; }

/* Categorie-label boven titels */
.entry-category-label {
    font-family: var(--font-serif);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-black);
    margin-bottom: 5px;
    display: block;
    border-bottom: 1px solid var(--border-solid);
    padding-bottom: 3px;
    width: fit-content;
}

/* Byline / meta */
.entry-meta {
    font-family: var(--font-serif);
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.entry-meta a { color: var(--ink-muted); text-decoration: none; }
.entry-meta a:hover { text-decoration: underline; }
.entry-meta .sep { margin: 0 6px; }

/* ─── KRANTENKOLOMMEN VOOR BODY TEXT ─── */
.news-columns-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.news-columns-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 22px;
}

/* Body tekst */
.entry-summary,
.entry-content p {
    font-size: 14.5px;
    color: var(--ink-muted);
    text-align: justify;
    line-height: 1.65;
    margin-bottom: 14px;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Drop cap op eerste paragraaf van enkel artikel */
.single .entry-content > p:first-of-type::first-letter {
    font-family: var(--font-serif);
    font-size: 56px;
    float: left;
    line-height: 0.78;
    padding-right: 7px;
    padding-top: 4px;
    font-weight: 900;
    color: var(--border-solid);
}

/* ─── ARTICLE CARDS: LIJST VIEWS ─── */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 28px;
    margin-top: 16px;
}

.article-card {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 22px;
}
.article-card:last-child { border-bottom: none; }

/* Thumbnails */
.post-thumbnail {
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}
.post-thumbnail img {
    width: 100%;
    display: block;
    transition: transform 0.35s ease;
    filter: grayscale(20%);
}
.post-thumbnail:hover img { transform: scale(1.02); filter: grayscale(0%); }

/* ─── ENKEL ARTIKEL ─── */
.single-post-header { margin-bottom: 28px; }

.single-post-header .entry-title {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.06;
    color: var(--border-solid);
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}

.entry-content h2 {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 22px;
    color: var(--border-solid);
    margin: 28px 0 10px;
    border-bottom: 1px solid var(--border-solid);
    padding-bottom: 4px;
}
.entry-content h3 {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 17px;
    color: var(--ink-black);
    margin: 20px 0 8px;
}
.entry-content h4 {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink-black);
    margin: 14px 0 6px;
}

/* Pullquote */
.entry-content blockquote,
blockquote.wp-block-quote {
    font-size: 18px;
    line-height: 1.5;
    font-style: italic;
    border-left: 4px solid var(--border-solid);
    padding: 12px 0 12px 20px;
    margin: 24px 0;
    color: var(--border-solid);
    font-family: var(--font-serif);
    font-weight: 700;
}

.entry-content ul, .entry-content ol {
    font-size: 14.5px;
    color: var(--ink-muted);
    padding-left: 22px;
    margin-bottom: 14px;
    line-height: 1.65;
}

/* ─── SECTION HEADERS (RUBRIEK DIVIDERS) ─── */
.section-header {
    text-align: center;
    margin-bottom: 28px;
}
.section-tag {
    font-family: var(--font-serif);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-black);
    display: block;
    margin-bottom: 6px;
}
.section-title {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 30px;
    color: var(--border-solid);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

/* ─── SIDEBAR / WIDGETS ─── */
.widget {
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 4px double var(--border-solid);
}
.widget:last-child { border-bottom: none; }

.widget-title {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-black);
    margin-bottom: 14px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-solid);
}

.widget ul { list-style: none; }
.widget ul li {
    font-size: 13.5px;
    padding: 6px 0;
    border-bottom: 1px dotted var(--border-light);
    color: var(--ink-muted);
}
.widget ul li:last-child { border-bottom: none; }
.widget ul li a {
    text-decoration: none;
    color: var(--ink-muted);
    font-family: var(--font-serif);
    transition: color 0.15s;
}
.widget ul li a:hover { color: var(--ink-black); text-decoration: underline; }

/* ─── PAGINERING ─── */
.posts-navigation,
.navigation.pagination {
    margin: 40px 0;
    text-align: center;
}
.nav-links a,
.page-numbers {
    display: inline-block;
    padding: 8px 14px;
    font-family: var(--font-serif);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--border-solid);
    text-decoration: none;
    color: var(--ink-black);
    margin: 0 3px;
    transition: all 0.18s;
}
.nav-links a:hover,
.page-numbers:hover,
.page-numbers.current {
    background: var(--border-solid);
    color: var(--bg-paper);
}

/* ─── KOMENTAR SECTIE ─── */
#comments { margin-top: 40px; padding-top: 28px; border-top: 4px double var(--border-solid); }
.comments-title {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 20px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.comment-meta { font-size: 11.5px; font-family: var(--font-serif); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); margin-bottom: 6px; }
.comment-meta a { color: var(--ink-faint); text-decoration: none; }
.comment-body { font-size: 14px; color: var(--ink-muted); border-bottom: 1px dotted var(--border-light); padding-bottom: 16px; margin-bottom: 16px; }
.comment-reply-link {
    font-size: 11px;
    font-family: var(--font-serif);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--ink-black);
    border: 1px solid var(--border-solid);
    padding: 3px 8px;
    display: inline-block;
    margin-top: 6px;
    transition: all 0.15s;
}
.comment-reply-link:hover { background: var(--border-solid); color: var(--bg-paper); }

/* Reactieformulier */
#respond { margin-top: 28px; }
.comment-reply-title {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 17px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border-solid);
    padding-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
select,
textarea {
    width: 100%;
    background: var(--white);
    border: 1px solid #888;
    border-radius: 0;
    padding: 10px 12px;
    color: var(--ink-black);
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
    margin-bottom: 12px;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--border-solid);
    background: var(--white);
}

.submit, input[type="submit"] {
    background: var(--border-solid);
    color: var(--bg-paper);
    border: 1px solid var(--border-solid);
    padding: 11px 24px;
    font-family: var(--font-serif);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.18s;
    width: auto;
}
.submit:hover, input[type="submit"]:hover {
    background: transparent;
    color: var(--border-solid);
}

/* ─── SEARCHFORM ─── */
.search-form {
    display: flex;
    border: 1px solid var(--border-solid);
}
.search-form input[type="search"] {
    border: none;
    border-right: 1px solid var(--border-solid);
    margin: 0;
    background: var(--white);
    flex: 1;
}
.search-submit {
    background: var(--border-solid);
    color: var(--bg-paper);
    border: none;
    padding: 8px 14px;
    font-family: var(--font-serif);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: opacity 0.18s;
    width: auto;
    margin: 0;
}
.search-submit:hover { opacity: 0.75; }

/* ─── 404 / NO RESULTS ─── */
.error-404 .page-title,
.no-results .page-title {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: clamp(28px, 5vw, 60px);
    color: var(--border-solid);
    margin-bottom: 16px;
}

/* ─── ADVERTENTIE BLOKKEN (widget/shortcode) ─── */
.ad-box-widget {
    background: var(--white);
    border: 1px solid var(--border-solid);
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}
.ad-box-widget .ad-size {
    font-family: var(--font-serif);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 8px;
    color: var(--ink-black);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 4px;
}

/* ─── FOOTER ─── */
#colophon {
    background: var(--border-solid);
    color: var(--bg-paper);
    padding: 40px 0;
    text-align: center;
    border-top: 4px double var(--bg-paper);
    margin-top: auto;
}
.footer-logo {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 17px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 14px;
    letter-spacing: 0.04em;
}
.footer-logo a { color: var(--bg-paper); text-decoration: none; }

.footer-widget-area {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    text-align: left;
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(244,243,239,0.2);
}
.footer-widget-area .widget { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.footer-widget-area .widget-title { color: var(--bg-paper); border-bottom-color: rgba(244,243,239,0.3); }
.footer-widget-area .widget ul li { color: rgba(244,243,239,0.7); border-bottom-color: rgba(244,243,239,0.1); }
.footer-widget-area .widget ul li a { color: rgba(244,243,239,0.7); }
.footer-widget-area .widget ul li a:hover { color: var(--bg-paper); }
.footer-widget-area p { font-size: 13px; color: rgba(244,243,239,0.7); line-height: 1.6; }

.footer-nav { margin-bottom: 16px; }
.footer-nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}
.footer-nav ul li a {
    color: #cccccc;
    text-decoration: none;
    font-size: 11.5px;
    font-family: var(--font-serif);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: color 0.15s;
}
.footer-nav ul li a:hover { color: #ffffff; }

.site-info {
    font-size: 11px;
    color: #777;
    font-family: var(--font-serif);
    line-height: 1.7;
}
.site-info a { color: #aaa; }
.site-info a:hover { color: #ccc; }

/* ─── IMAGES ─── */
img { max-width: 100%; height: auto; display: block; }

.alignleft  { float: left;  margin: 4px 20px 12px 0; }
.alignright { float: right; margin: 4px 0 12px 20px; }
.aligncenter { margin: 0 auto 14px; display: block; text-align: center; }

figure.wp-block-image, .wp-caption {
    margin-bottom: 16px;
}
figcaption, .wp-caption-text {
    font-size: 12px;
    font-style: italic;
    color: var(--ink-faint);
    font-family: var(--font-serif);
    text-align: center;
    margin-top: 5px;
    border-top: 1px dotted var(--border-light);
    padding-top: 4px;
}

/* ─── GALLERY BLOCK ─── */
.wp-block-gallery { margin-bottom: 20px; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
    .front-hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .content-area { width: 62%; }
    .widget-area  { width: 38%; }
}
@media (max-width: 768px) {
    .content-area, .widget-area { width: 100%; float: none; padding-right: 0; }
    .news-columns-2, .news-columns-3 { grid-template-columns: 1fr; gap: 16px; }

/* 1. Show the menu toggle layout wrapper element */
.menu-toggle { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
}

/* 2. Overwrite desktop rules: hide the main ul menu content by default on mobile screen widths */
.main-navigation .menu { 
    display: none; 
    width: 100%; 
    flex-direction: column; 
    gap: 0; 
    padding: 0; 
}

/* 3. When main.js adds the .toggled class, display the navigation list wrapper structure */
.main-navigation.toggled .menu { 
    display: flex; 
}

    .main-navigation ul li a { padding: 10px 16px; border-bottom: 1px solid var(--border-light); font-size: 13px; }
    .main-navigation ul li ul { position: static; border: none; border-left: 3px solid var(--border-solid); }
    .footer-widget-area { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .articles-grid { grid-template-columns: 1fr; }
    .masthead-meta { flex-direction: column; gap: 4px; text-align: center; }
}

/* ─── PRINT ─── */
@media print {
    #site-navigation, #respond, .widget-area, .posts-navigation { display: none; }
    body { background: #fff; color: #000; font-size: 12pt; }
    .entry-title-headline { font-size: 22pt; }
}

/* Front vison */
.front-visie .section-tag
{
	padding-top: 20px;
	border-top: 4px double #000;
}

.front-visie .section-title
{
	padding-bottom: 20px;
	border-bottom: 1px solid #000;
	
}

.front-visie div *
{
	margin: 15px 0;
}