/* Recreatief.nl blog SEO/navigation additions – v43
   Separate file by design: blog.css remains Andy-owned and untouched. */

.blog-nav-v43-wrap { position:relative; display:inline-flex; align-items:center; gap:3px; }
.blog-nav-v43-wrap > a { display:inline-flex; align-items:center; }
.blog-nav-v43-toggle { border:0; background:transparent; color:var(--navy); cursor:pointer; padding:8px 5px; font:inherit; line-height:1; }
.blog-nav-v43-toggle::after { content:"▾"; font-size:.72rem; }
.blog-nav-v43-panel { display:none; position:absolute; z-index:140; top:calc(100% + 12px); right:-170px; width:min(760px,88vw); padding:22px; border:1px solid var(--line); border-radius:20px; background:var(--paper); box-shadow:var(--shadow); grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.blog-nav-v43-wrap:hover .blog-nav-v43-panel, .blog-nav-v43-wrap:focus-within .blog-nav-v43-panel, .blog-nav-v43-wrap.is-open .blog-nav-v43-panel { display:grid; }
.blog-nav-v43-group strong { display:block; margin:0 0 8px; color:var(--gold); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.site-header .blog-nav-v43-group a { display:block; width:auto; padding:7px 0; color:var(--navy); line-height:1.25; font-size:.91rem; font-weight:750; }
.site-header .blog-nav-v43-group a:hover { color:var(--green); }
.article-popular-v43 ul { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:10px; }
.article-popular-v43 li { border-top:1px solid var(--line); padding-top:10px; }
.article-popular-v43 li:first-child { border-top:0; padding-top:0; }
.article-popular-v43 a { display:block; line-height:1.35; }
.article-popular-v43 small { display:block; margin-top:3px; color:var(--muted); }
.seo-hub-links-v43 { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.seo-hub-links-v43 a { display:inline-flex; padding:9px 13px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--green); font-size:.9rem; font-weight:800; }
.popular-v43-intro { max-width:780px; color:var(--muted); }
.popular-v43-meta { color:var(--muted); font-size:.86rem; }
.popular-v43-rank { color:var(--gold); font-size:.8rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
@media(max-width:960px){ .blog-nav-v43-wrap{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center}.blog-nav-v43-toggle{padding:12px}.blog-nav-v43-panel,.blog-nav-v43-wrap:hover .blog-nav-v43-panel,.blog-nav-v43-wrap:focus-within .blog-nav-v43-panel{display:none;position:static;width:100%;grid-column:1/-1;grid-template-columns:1fr;max-height:52vh;overflow-y:auto;padding:14px 12px;box-shadow:none;border-radius:14px;background:#fff}.blog-nav-v43-wrap.is-open .blog-nav-v43-panel{display:grid}.site-header .blog-nav-v43-group a{padding:8px 0} }


/* v44A seasonal additions merged into v43 extra stylesheet */
/* Recreatief.nl Blog seasonal SEO layer – v44
   IMPORTANT: /assets/css/blog.css is Andy-owned and remains untouched. */

.blog-nav-v43-wrap{position:relative;display:inline-flex;align-items:center;gap:3px}
.blog-nav-v43-wrap>a{display:inline-flex;align-items:center}
.blog-nav-v43-toggle{border:0;background:transparent;color:var(--navy);cursor:pointer;padding:8px 5px;font:inherit;line-height:1}
.blog-nav-v43-toggle::after{content:"▾";font-size:.72rem}
.blog-nav-v43-panel{display:none;position:absolute;z-index:150;top:calc(100% + 12px);right:-230px;width:min(960px,92vw);padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:var(--shadow);grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.blog-nav-v43-wrap:hover .blog-nav-v43-panel,.blog-nav-v43-wrap:focus-within .blog-nav-v43-panel,.blog-nav-v43-wrap.is-open .blog-nav-v43-panel{display:grid}
.blog-nav-v43-group strong{display:block;margin:0 0 8px;color:var(--gold);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.site-header .blog-nav-v43-group a{display:block;width:auto;padding:7px 0;color:var(--navy);line-height:1.25;font-size:.91rem;font-weight:750}
.site-header .blog-nav-v43-group a:hover{color:var(--green)}

.blog-priority-v44{padding:34px 0 12px;background:linear-gradient(180deg,#fff 0%,#f7f5ee 100%)}
.blog-priority-v44 .priority-head{max-width:760px;margin-bottom:20px}
.blog-priority-v44 .priority-head p{color:var(--muted);margin-bottom:0}
.blog-priority-v44-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.blog-priority-v44-card{display:flex;min-height:220px;flex-direction:column;justify-content:space-between;padding:24px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 12px 34px rgba(16,39,68,.06);text-decoration:none}
.blog-priority-v44-card:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(16,39,68,.10)}
.blog-priority-v44-card .mini{color:var(--gold);font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.blog-priority-v44-card h2{font-size:clamp(1.35rem,2vw,1.9rem);margin:8px 0 10px}
.blog-priority-v44-card p{color:var(--muted);margin:0 0 18px}
.blog-priority-v44-card strong{color:var(--green)}

.hub-v44-hero{padding:52px 0 36px;background:linear-gradient(180deg,#f8f4e8 0%,#fff 100%)}
.hub-v44-hero .breadcrumbs{margin-bottom:18px}
.hub-v44-hero h1{max-width:900px;margin:6px 0 14px}
.hub-v44-hero p{max-width:820px;color:var(--muted);font-size:1.08rem}
.hub-v44-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hub-v44-stats span{display:inline-flex;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy);font-size:.88rem;font-weight:800}
.hub-v44-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.hub-v44-nav a,.season-filter-v44{display:inline-flex;padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--green);font-weight:800;text-decoration:none}
.hub-v44-nav a:hover,.season-filter-v44:hover{border-color:var(--green)}
.hub-v44-section{padding:38px 0}
.hub-v44-section.paper{background:var(--paper)}
.hub-v44-section .section-head{margin-bottom:20px}
.hub-v44-intro-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hub-v44-intro-links a{font-weight:800}
.hub-v44-commercial{margin-top:26px;padding:20px;border:1px solid var(--line);border-radius:18px;background:#fff}
.hub-v44-commercial p{margin:0 0 10px;color:var(--muted)}
.hub-v44-commercial a{font-weight:850}

.seo-cluster-v44{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.seo-cluster-v44 strong{display:block;margin-bottom:9px;color:var(--navy)}
.seo-cluster-v44-links{display:flex;flex-wrap:wrap;gap:8px}
.seo-cluster-v44-links a{display:inline-flex;padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--green);font-size:.86rem;font-weight:800;text-decoration:none}

.blog-filter .season-filter-v44.is-active{background:var(--green);border-color:var(--green);color:#fff}

@media(max-width:1050px){
  .blog-nav-v43-panel{right:-110px;grid-template-columns:repeat(3,minmax(0,1fr));width:min(760px,92vw)}
}
@media(max-width:960px){
  .blog-nav-v43-wrap{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center}
  .blog-nav-v43-toggle{padding:12px}
  .blog-nav-v43-panel,.blog-nav-v43-wrap:hover .blog-nav-v43-panel,.blog-nav-v43-wrap:focus-within .blog-nav-v43-panel{display:none;position:static;width:100%;grid-column:1/-1;grid-template-columns:1fr;max-height:62vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 12px;box-shadow:none;border-radius:14px;background:#fff}
  .blog-nav-v43-wrap.is-open .blog-nav-v43-panel{display:grid}
  .site-header .blog-nav-v43-group a{padding:8px 0}
  .blog-priority-v44-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hub-v44-hero{padding:36px 0 26px}
  .hub-v44-stats,.hub-v44-nav{gap:7px}
}


/* v44A – compact blog top so current priority clusters are above the fold */
.blog-hero-compact-v44a{
  padding:18px 0 12px !important;
  min-height:0 !important;
  background:#fff !important;
}
.blog-hero-compact-v44a .blog-hero-copy{
  max-width:none !important;
}
.blog-hero-compact-v44a .eyebrow{
  margin-bottom:2px;
}
.blog-hero-compact-v44a h1{
  margin:0 0 4px !important;
  font-size:clamp(2rem,4vw,3rem) !important;
  line-height:1 !important;
}
.blog-hero-compact-v44a p{
  margin:0 !important;
  max-width:780px;
  font-size:.98rem !important;
  color:var(--muted);
}
.blog-hero-compact-v44a + .blog-priority-v44{
  padding-top:18px !important;
}
@media(max-width:640px){
  .blog-hero-compact-v44a{
    padding:14px 0 8px !important;
  }
  .blog-hero-compact-v44a h1{
    font-size:2rem !important;
  }
  .blog-hero-compact-v44a + .blog-priority-v44{
    padding-top:12px !important;
  }
}