/*
Theme Name: ScraB&Ble
Theme URI: https://scrabble-it.com
Author: Scrabble-IT
Author URI: https://scrabble-it.com
Description: Klassiek/hybride thema voor de faire & ecologische B&B ScraB&Ble. Het thema legt enkel het designsysteem vast (kleuren, fonts, componenten); content en menu's beheer je dynamisch in WordPress.
Version: 2.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scrabble
*/

/* =========================================================
   Lettertypen — lokaal gehost (toegevoegd 3 september 2026)
   Bestanden staan in /wp-content/uploads/fonts/ en zijn daar
   gezet via Weergave > Lettertypen (WordPress-lettertypebibliotheek).
   Verwijder ze daar NIET: dan breken onderstaande regels.
   Voorheen kwamen deze fonts van fonts.googleapis.com/gstatic.com;
   de URLs in theme.json waren verouderd en gaven 404.
   ========================================================= */
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/wp-content/uploads/fonts/newsreader-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:400 600;
  font-display:swap;
  src:url('/wp-content/uploads/fonts/newsreader-latin-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Mulish';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/wp-content/uploads/fonts/mulish-latin-variable.woff2') format('woff2');
}


/* =========================================================
   0. Basis & custom properties (spiegelt theme.json)
   ========================================================= */
:root{
  --c-papier: #F4EDE0;
  --c-kaart: #FCFAF4;
  --c-inkt: #221E18;
  --c-bosgroen: #2F6B34;
  --c-donkergroen: #21331F;
  --c-salie: #CFE3C6;
  --c-footer: #1B1813;
  --c-tekst-zacht: #5A4F40;
  --c-tekst-muted: #6B5E4D;
  --c-tekst-muted2: #9A8B73;
  --gradient-eik: linear-gradient(145deg,#E7CD9F,#D2B179);
  --font-kop: 'Newsreader', Georgia, serif;
  --font-tekst: 'Mulish', system-ui, -apple-system, sans-serif;
  --content-size: 760px;
  --wide-size: 1180px;
  --header-size: 1240px;
  --section-pad: clamp(56px, 8vw, 104px);
  --radius-card: 14px;
  --radius-btn: 999px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--c-papier);
  color: var(--c-inkt);
  font-family: var(--font-tekst);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; display: block; }

a{ color: var(--c-bosgroen); text-decoration: none; }
a:hover, a:focus{ text-decoration: underline; }

h1, h2, h3, h4, h5, h6{
  font-family: var(--font-kop);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 .5em;
  color: var(--c-inkt);
}
h1{ font-size: clamp(34px, 5vw, 66px); font-weight: 500; }
h2{ font-size: clamp(30px, 3.7vw, 48px); font-weight: 600; }
h3{ font-size: clamp(21px, 2.6vw, 27px); font-weight: 600; }

p{ margin: 0 0 1.2em; }
p:last-child{ margin-bottom: 0; }

blockquote{
  font-family: var(--font-kop);
  font-style: italic;
  font-size: 22px;
  color: var(--c-tekst-zacht);
  margin: 1.5em 0;
  padding-left: 1em;
  border-left: 3px solid var(--c-bosgroen);
}

code, pre{ font-family: 'SF Mono', ui-monospace, Menlo, monospace; }

.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-inkt);
  color: #fff;
  padding: 12px 20px;
  z-index: 10000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }

/* =========================================================
   1. Layout helpers
   ========================================================= */
.container{
  max-width: var(--wide-size);
  margin-inline: auto;
  padding-inline: 28px;
}
.container--narrow{ max-width: var(--content-size); }
.container--header{ max-width: var(--header-size); }

.section{ padding-bottom: var(--section-pad); }
.section--papier{ background: var(--c-papier); }
.section--kaart{ background: var(--c-kaart); }
.section--donkergroen{ background: var(--c-donkergroen); color: #EBF0E4; }
.section--donkergroen h1, .section--donkergroen h2, .section--donkergroen h3,
.has-donkergroen-background-color h1, .has-donkergroen-background-color h2, .has-donkergroen-background-color h3{ color: #fff; }
.section--donkergroen a:not(.btn), .has-donkergroen-background-color a:not(.btn){ color: var(--c-salie); }

.prose{ max-width: 62ch; }
.prose p{ font-size: 17px; line-height: 1.7; }

/* =========================================================
   2. Eyebrow (Scrabble-tegel + label)
   ========================================================= */
.eyebrow{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.eyebrow__tile{
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--gradient-eik);
  border-radius: 7px;
  box-shadow: 0 3px 6px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.55);
}
.eyebrow__tile span{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 22px;
  color: var(--c-inkt);
}
.eyebrow__label{
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-bosgroen);
}
.section--donkergroen .eyebrow__label, .has-donkergroen-background-color .eyebrow__label{ color: var(--c-salie); }

/* =========================================================
   3. Knoppen
   ========================================================= */
.btn, .wp-block-button__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-tekst);
  font-weight: 700;
  font-size: 14.5px;
  padding: 14px 26px;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-primary, .wp-block-button__link:not(.has-text-color){
  background: var(--c-bosgroen);
  color: #F8F3E8 !important;
  box-shadow: 0 6px 16px rgba(47,107,52,.25);
}
.btn-primary:hover, .wp-block-button__link:hover{
  transform: translateY(-1px);
  opacity: .92;
}
.btn-secondary, .is-style-outline .wp-block-button__link:not(.has-text-color){
  background: transparent;
  color: var(--c-bosgroen) !important;
  border: 1.5px solid rgba(47,107,52,.4);
  box-shadow: none;
}
.btn-text{
  background: none;
  color: var(--c-bosgroen);
  font-weight: 700;
  padding: 0;
  border-bottom: 2px solid rgba(47,107,52,.3);
  border-radius: 0;
}

/* =========================================================
   4. Header
   ========================================================= */
.site-header{
  background: var(--c-papier);
  border-bottom: 1px solid rgba(34,30,24,.1);
  padding-block: 14px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-branding{ display: flex; align-items: center; }
.site-branding a{ display: inline-flex; align-items: center; }
.site-branding img{ max-height: 54px; width: auto; }
.site-branding .site-title{
  font-family: var(--font-kop);
  font-size: 21px;
  font-weight: 600;
  color: var(--c-inkt);
}

.site-header__nav-wrap{
  display: flex;
  align-items: center;
  gap: 30px;
}

.primary-nav__list{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
}
.primary-nav__list li{ position: relative; }
.primary-nav__list a{
  color: var(--c-inkt);
  font-weight: 600;
  font-size: 14.5px;
}
.primary-nav__list a:hover{ color: var(--c-bosgroen); text-decoration: none; }
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current_page_item > a{ color: var(--c-bosgroen); }

.primary-nav__list ul{
  list-style: none;
  position: absolute;
  top: 100%; left: 0;
  background: var(--c-kaart);
  min-width: 200px;
  padding: 8px 0;
  margin: 0;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(40,30,15,.14);
  display: none;
}
.primary-nav__list li:hover > ul,
.primary-nav__list li:focus-within > ul{ display: block; }
.primary-nav__list ul a{ display: block; padding: 8px 18px; }

.menu-toggle{
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}
.menu-toggle span{
  display: block;
  width: 24px; height: 2px;
  background: var(--c-inkt);
}

@media (max-width: 860px){
  .menu-toggle{ display: inline-flex; }
  .site-header__nav-wrap{
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    background: var(--c-kaart);
    flex-direction: column;
    align-items: flex-start;
    padding: 90px 28px 28px;
    gap: 26px;
    transform: translateX(100%);
    transition: transform .25s ease;
    box-shadow: -10px 0 30px rgba(0,0,0,.15);
  }
  .site-header.is-nav-open .site-header__nav-wrap{ transform: translateX(0); }
  .primary-nav__list{ flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
  .primary-nav__list ul{ position: static; box-shadow: none; padding-left: 14px; display: block; }
}

/* =========================================================
   5. Kaarten / foto-kaart
   ========================================================= */
.card{
  background: var(--c-kaart);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(40,30,15,.10);
  height: 100%;
}
.card__media{ position: relative; }
.card__media img{ width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.card__badge{
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(244,237,224,.94);
  color: var(--c-bosgroen);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
}
.card__body{ padding: 20px 22px 24px; }
.card__body h3{ margin-bottom: 8px; }
.card__body p{ font-size: 13.5px; color: var(--c-tekst-zacht); line-height: 1.55; }

.cards-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* Tags / chips */
.tag{
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  background: var(--c-papier);
  border: 1px solid rgba(34,30,24,.12);
  padding: 7px 14px;
  border-radius: 999px;
}
.tag--active{ background: var(--c-bosgroen); color: #F8F3E8; border-color: transparent; }
.section--donkergroen .tag,
.has-donkergroen-background-color .tag{ background: transparent; border-color: rgba(235,240,228,.35); color: #EBF0E4; }

/* =========================================================
   6. Hero
   ========================================================= */
.hero{
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,17,12,.78) 0%, rgba(20,17,12,.15) 55%, rgba(20,17,12,.05) 100%);
}
.hero__content{ position: relative; z-index: 1; padding-bottom: clamp(40px, 6vw, 80px); }
.hero__content .eyebrow__label{ color: var(--c-salie); }
.hero__content h1{ color: #fff; margin-bottom: .3em; }
.hero__content p{ color: rgba(255,255,255,.88); font-size: 18px; max-width: 60ch; }

.page-hero{
  background: var(--c-donkergroen);
  color: #EBF0E4;
  padding-block: clamp(48px, 7vw, 88px);
}
.page-hero h1{ color: #fff; }

/* =========================================================
   7. CTA-band
   ========================================================= */
.cta-band{
  background: var(--c-donkergroen);
  color: #EBF0E4;
  border-radius: 20px;
  padding: clamp(36px, 6vw, 64px);
  text-align: center;
}
.cta-band h2{ color: #fff; }
.cta-band p{ color: rgba(235,240,228,.85); max-width: 56ch; margin-inline: auto; }

/* =========================================================
   8. Reviews
   ========================================================= */
.review-card{
  background: var(--c-kaart);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 6px 16px rgba(40,30,15,.08);
}
.review-card__score{
  font-family: var(--font-kop);
  font-size: 30px;
  color: var(--c-bosgroen);
  line-height: 1;
}

/* =========================================================
   9. Footer
   ========================================================= */
.site-footer{
  background: var(--c-footer);
  color: #EBF0E4;
  padding-block: 72px 36px;
}
.site-footer a{ color: #EBF0E4; }
.site-footer a:hover{ color: var(--c-salie); }
.footer-columns{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-logo-frame{
  display: inline-flex;
  background: var(--c-papier);
  border-radius: 10px;
  padding: 11px 15px;
  margin-bottom: 14px;
}
.footer-logo-frame img{ max-height: 44px; width: auto; }
.footer-columns h4{
  font-family: var(--font-tekst);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #A7C79A;
  margin-bottom: 14px;
}
.footer-columns p{ font-size: 14.5px; }
.footer-nav{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-nav a{ font-size: 14.5px; }
.site-footer .footer-bottom{
  font-size: 13px;
  color: rgba(235,240,228,.7);
  border-top: 1px solid rgba(235,240,228,.12);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
}
.footer-bottom a{ color: rgba(235,240,228,.85); }

@media (max-width: 860px){
  .footer-columns{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px){
  .footer-columns{ grid-template-columns: 1fr; }
}

/* =========================================================
   10. Content / blog / archief / 404 / zoeken
   ========================================================= */
.entry{ margin-bottom: var(--section-pad); }
.entry-header{ margin-bottom: 28px; }
.entry-meta{ font-size: 13.5px; color: var(--c-tekst-muted2); }
.entry-thumb{ border-radius: 14px; overflow: hidden; margin-bottom: 28px; }
.entry-thumb img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; }

.archive-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.archive-card{ background: var(--c-kaart); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 16px rgba(40,30,15,.08); }
.archive-card img{ width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.archive-card__body{ padding: 20px 22px; }
.archive-card time{ font-size: 12.5px; color: var(--c-tekst-muted2); }

.pagination{ display: flex; gap: 10px; margin-top: var(--section-pad); flex-wrap: wrap; }
.pagination a, .pagination span{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding-inline: 8px;
  border-radius: 999px; background: var(--c-kaart);
  font-weight: 600; font-size: 14px;
}
.pagination .current{ background: var(--c-bosgroen); color: #fff; }

.search-form{ display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }
.search-form input[type="search"]{
  flex: 1;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(34,30,24,.16);
  font-family: var(--font-tekst);
  font-size: 15px;
}
.search-form button{
  background: var(--c-bosgroen);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0 22px;
  font-weight: 700;
  cursor: pointer;
}

.not-found{ text-align: center; padding-block: var(--section-pad); }
.not-found .eyebrow{ justify-content: center; }

/* =========================================================
   11. Core block tweaks & entry-content layout
   ========================================================= */
.wp-block-cover{ border-radius: 0; }
.wp-block-columns{ gap: 2em; }
.wp-block-image img, .wp-block-cover img{ border-radius: 10px; }
.alignfull .wp-block-image img,
.alignfull img{ border-radius: 0; }

/*
 * Classic thema zonder theme-layout: elk direct kind van .entry-content
 * wordt zelf gecentreerd/beperkt, zodat alignwide/alignfull-blokken
 * (Gutenberg) toch kunnen uitbreken. Zo werkt align-wide-support ook
 * buiten een block-thema.
 */
.entry-content{ padding-inline: 28px; }
.entry-content > *{
  max-width: var(--content-size);
  margin-left: auto;
  margin-right: auto;
}
.entry-content > *:first-child{ margin-top: 0; }
.entry-content > .alignwide{ max-width: var(--wide-size); }
.entry-content > .alignfull{
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* =========================================================
   12. Utilities
   ========================================================= */
.text-center{ text-align: center; }
.mt-0{ margin-top: 0; }
.mb-0{ margin-bottom: 0; }
.visually-hidden{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.max-16ch{ max-width: 16ch; }
.max-18ch{ max-width: 18ch; }
.wp-element-caption{ text-align: center; color: #A7C79A; }
.img-framed img{ width: 420px; background: var(--c-kaart); padding: 18px; }
.section-divider{ border-top: 1px solid rgba(34,30,24,.08); }
.max-50ch{ max-width: 50ch; }
.max-54ch{ max-width: 54ch; }
.max-20ch{ max-width: 20ch; }
.max-60ch{ max-width: 60ch; }
.max-64ch{ max-width: 64ch; }
.max-70ch{ max-width: 70ch; }
.max-14ch{ max-width: 14ch; }
.max-56ch{ max-width: 56ch; }


/* Zoekfunctie in hoofdmenu (vergrootglas + inline zoekveld) */
.menu-item-search {
	display: flex;
	align-items: center;
	position: relative;
}

.search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 6px;
	margin: 0;
	color: var(--c-inkt);
	cursor: pointer;
	border-radius: 999px;
	transition: background-color .15s ease, color .15s ease;
}

.search-toggle:hover,
.search-toggle:focus-visible {
	background-color: var(--c-papier);
	color: var(--c-bosgroen);
}

.search-toggle[aria-expanded='true'] {
	color: var(--c-bosgroen);
}

.header-search-form {
	display: flex;
	align-items: center;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	margin-left: 0;
	transition: max-width .25s ease, opacity .2s ease, margin-left .25s ease;
}

.header-search-form.is-open {
	max-width: 220px;
	opacity: 1;
	margin-left: 6px;
}

.header-search-form input[type='search'] {
	width: 100%;
	min-width: 160px;
	padding: 6px 10px;
	border: 1px solid var(--c-papier);
	border-radius: 999px;
	background: var(--c-papier);
	color: var(--c-inkt);
	font-size: 14px;
}

.header-search-form input[type='search']:focus {
	outline: 2px solid var(--c-bosgroen);
	outline-offset: 1px;
}

@media (max-width: 782px) {
	.header-search-form.is-open {
		max-width: 100%;
		width: 100%;
	}

	.header-search-form input[type='search'] {
		min-width: 0;
	}
}