/* Tripwise: opmaak voor de eigen templates (homepage, reiswinkels, bestemmingen) en de inhoudsopgave.
   Kleuren en lettertypes komen uit de Blocksy-instellingen (palet en typografie). */
.tw {
	--tw-blue: var(--theme-palette-color-1, #00aced);
	--tw-blue-d: var(--theme-palette-color-2, #0784c0);
	--tw-ink: var(--theme-palette-color-3, #1d2733);
	--tw-navy: var(--theme-palette-color-4, #0d2b45);
	--tw-line: var(--theme-palette-color-5, #e6e1d8);
	--tw-sand: var(--theme-palette-color-6, #f6f2ec);
	--tw-orange: #f6921e;
	--tw-orange-d: #d97a0d;
	--tw-muted: #5c6874;
	--tw-radius: 16px;
	--tw-shadow: 0 1px 2px rgba(13, 43, 69, .06), 0 10px 28px -14px rgba(13, 43, 69, .28);
	--tw-wrap: var(--theme-normal-container-max-width, 1290px);
	color: var(--tw-ink);
}
.tw *, .tw *::before, .tw *::after { box-sizing: border-box; }
.tw img { max-width: 100%; height: auto; }
.tw-wrap { width: 100%; max-width: var(--tw-wrap); margin: 0 auto; padding: 0 var(--theme-content-edge-spacing, 24px); }
.tw-wrap--article { max-width: 860px; }
.tw-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tw-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.tw .tw-eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--tw-orange-d); }
.tw .tw-eyebrow--light { color: #ffd29b; }
.tw .tw-h2 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 800; }
.tw .tw-more { font-size: 15px; font-weight: 600; color: var(--tw-blue-d); text-decoration: none; white-space: nowrap; }
.tw .tw-more::after { content: " →"; }
.tw .tw-chip { display: inline-block; padding: 4px 11px; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--tw-blue-d); text-decoration: none; background: #e3f5fd; border-radius: 999px; }
.tw .tw-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 14px; line-height: 1.4; color: var(--tw-muted); }
.tw .tw-btn { display: inline-block; padding: 13px 22px; font-size: 16px; font-weight: 700; line-height: 1; color: #fff; text-decoration: none; border: 0; border-radius: 999px; background: var(--tw-blue-d); cursor: pointer; }
.tw .tw-btn:hover { background: var(--tw-navy); color: #fff; }
.tw .tw-btn--orange { background: var(--tw-orange); }
.tw .tw-btn--orange:hover { background: var(--tw-orange-d); }
.tw .tw-btn--block { display: block; text-align: center; }

/* Zoekveld */
.tw-search { position: relative; display: flex; max-width: 640px; background: #fff; border: 1px solid var(--tw-line); border-radius: 999px; box-shadow: 0 6px 20px -12px rgba(13, 43, 69, .35); }
.tw-search__ic { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: var(--tw-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.tw .tw-search input { flex: 1; min-width: 0; height: 54px; padding: 0 12px 0 48px; font-size: 16px; color: var(--tw-ink); background: transparent; border: 0; border-radius: 999px; outline: none; box-shadow: none; }
.tw .tw-search button { margin: 5px; padding: 0 22px; min-height: 0; font-size: 15px; font-weight: 700; color: #fff; background: var(--tw-blue-d); border: 0; border-radius: 999px; cursor: pointer; }
.tw-search:focus-within { border-color: var(--tw-blue); box-shadow: 0 0 0 4px rgba(0, 172, 237, .18); }

/* Hero */
.tw-hero { position: relative; color: #fff; background: var(--tw-navy) var(--tw-hero, none) center / cover no-repeat; }
.tw-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8, 28, 46, .86) 0%, rgba(8, 28, 46, .55) 50%, rgba(8, 28, 46, .15) 100%); }
.tw-hero__in { position: relative; padding-top: 88px; padding-bottom: 96px; }
.tw .tw-hero__title { max-width: 760px; margin: 0 0 14px; font-size: 54px; line-height: 1.06; font-weight: 800; color: #fff; letter-spacing: -.025em; }
.tw .tw-hero__lead { max-width: 560px; margin: 0 0 26px; font-size: 19px; line-height: 1.55; color: #e6eef5; }
.tw-quick { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.tw .tw-quick a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; font-size: 15px; font-weight: 600; line-height: 1; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; }
.tw .tw-quick a:hover { background: rgba(255, 255, 255, .26); }

/* Secties */
.tw-section { padding: 64px 0; }
.tw-section--tight { padding: 40px 0 72px; }
.tw-section--sand { background: var(--tw-sand); }
.tw-section--tools { padding: 0; margin-top: -44px; position: relative; z-index: 2; }
.tw-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 24px; }
.tw-grid { display: grid; gap: 28px; }
.tw-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tw-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Kaartjes */
.tw-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.tw-card__img { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--tw-sand); border-radius: var(--tw-radius); }
.tw .tw-card__img img, .tw-noimg { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tw-noimg { background: linear-gradient(135deg, #bfe7f7, #ffe1bd); }
.tw-card:hover .tw-card__img img { transform: scale(1.04); }
.tw-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 2px 0; }
.tw .tw-card__title { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; }
.tw .tw-card__title a { color: var(--tw-navy); text-decoration: none; }
.tw .tw-card__title a:hover { color: var(--tw-blue-d); }
.tw-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tw-card .tw-chip { position: relative; z-index: 2; }
.tw .tw-card__excerpt { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tw-muted); }
.tw-card--mini { flex-direction: row; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--tw-line); }
.tw-card--mini:last-child { border-bottom: 0; }
.tw-card--mini .tw-card__img { width: 128px; flex: none; aspect-ratio: 4 / 3; border-radius: 12px; }
.tw-card--mini .tw-card__body { padding: 0; gap: 6px; }
.tw .tw-card--mini .tw-card__title { font-size: 17px; }
.tw-card--overlay { height: 100%; }
.tw-card--overlay .tw-card__img { height: 100%; min-height: 440px; aspect-ratio: auto; }
.tw-card--overlay .tw-card__img::after { content: ""; position: absolute; inset: 0; border-radius: var(--tw-radius); background: linear-gradient(180deg, transparent 35%, rgba(8, 28, 46, .88) 100%); }
.tw-card--overlay .tw-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px; }
.tw .tw-card--overlay .tw-card__title { font-size: 32px; line-height: 1.15; font-weight: 800; }
.tw .tw-card--overlay .tw-card__title a { color: #fff; }
.tw .tw-card--overlay .tw-meta { color: #dbe6ef; }
.tw .tw-card--overlay .tw-chip { color: #fff; background: var(--tw-orange); }
.tw-latest { display: grid; grid-template-columns: 1.45fr 1fr; gap: 32px; }
.tw-latest__list { display: flex; flex-direction: column; justify-content: space-between; }

/* Tools */
.tw-tools { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }
.tw .tw-tool { display: flex; flex-direction: column; gap: 6px; padding: 26px; color: var(--tw-ink); text-decoration: none; background: #fff; border: 1px solid var(--tw-line); border-radius: var(--tw-radius); box-shadow: var(--tw-shadow); transition: transform .2s, box-shadow .2s; }
.tw .tw-tool:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(13, 43, 69, .45); }
.tw .tw-tool strong { font-size: 21px; line-height: 1.25; font-weight: 800; color: var(--tw-navy); }
.tw-tool__txt { font-size: 15px; color: var(--tw-muted); }
.tw-tool__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; color: var(--tw-blue-d); background: #e3f5fd; border-radius: 12px; }
.tw-tool__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tw-tool__go { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: 15px; color: var(--tw-blue-d); }
.tw-tool__label { align-self: flex-start; padding: 3px 9px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tw-navy); background: #ffd29b; border-radius: 999px; }
.tw .tw-tool--visum { color: #fff; background: linear-gradient(135deg, #0784c0 0%, #00aced 100%); border-color: transparent; }
.tw .tw-tool--visum strong { color: #fff; font-size: 24px; }
.tw-tool--visum .tw-tool__txt { color: #e2f5fd; }
.tw-tool--visum .tw-tool__icon { color: #fff; background: rgba(255, 255, 255, .18); }
.tw-tool--visum .tw-tool__go { color: #fff; }

/* Bestemmingen en winkels als tegels */
.tw-dest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tw-dest--all { grid-template-columns: repeat(4, 1fr); }
.tw .tw-dest__item { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--tw-radius); text-decoration: none; }
.tw .tw-dest__item img, .tw-dest__item .tw-noimg { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.tw-dest__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(8, 28, 46, .8)); }
.tw .tw-dest__item span { position: absolute; left: 20px; bottom: 16px; z-index: 1; font-size: 24px; line-height: 1.1; font-weight: 800; color: #fff; }
.tw-dest__item:hover img { transform: scale(1.05); }
.tw-shops { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.tw .tw-shops a { display: grid; place-items: center; height: 92px; padding: 16px; font-weight: 700; color: var(--tw-navy); text-decoration: none; background: #fff; border: 1px solid var(--tw-line); border-radius: 14px; transition: .2s; }
.tw .tw-shops a:hover { border-color: var(--tw-blue); box-shadow: var(--tw-shadow); }
.tw .tw-shops img { max-height: 52px; width: auto; object-fit: contain; }

/* Kop van eigen pagina's */
.tw-pagehead { padding: 36px 0 34px; background: var(--tw-sand); border-bottom: 1px solid var(--tw-line); }
.tw .tw-pagehead__title { margin: 0 0 10px; font-size: 42px; line-height: 1.1; font-weight: 800; }
.tw-pagehead__desc { max-width: 720px; color: var(--tw-muted); font-size: 18px; }
.tw-pagehead__desc p { margin: 0 0 8px; }
.tw-pagehead .tw-search { margin-top: 18px; }
.tw-crumbs { margin: 0 0 16px; font-size: 14px; color: var(--tw-muted); }
.tw .tw-crumbs a { color: var(--tw-muted); text-decoration: none; }

/* Artikel-achtige opmaak (reiswinkel, bestemming) */
.tw-article__head { padding: 36px 0 28px; }
.tw-article__head .tw-chip { margin-bottom: 14px; }
.tw .tw-article__title { margin: 0 0 14px; font-size: 44px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.tw .tw-article__hero { margin: 0 auto 8px; }
.tw .tw-article__hero img { display: block; width: 100%; max-height: 620px; object-fit: cover; border-radius: 20px; }
.tw-article__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; padding-top: 32px; padding-bottom: 56px; }
.tw-article__main { max-width: 760px; min-width: 0; }
.tw-side-sticky { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 22px; }
.tw .tw-sidecta { display: flex; flex-direction: column; gap: 4px; padding: 20px; color: #fff; text-decoration: none; background: linear-gradient(135deg, #0784c0, #00aced); border-radius: 16px; }
.tw-sidecta .tw-ic { width: 28px; height: 28px; margin-bottom: 6px; }
.tw .tw-sidecta strong { font-size: 18px; line-height: 1.3; }
.tw-sidecta span { font-size: 14px; color: #e2f5fd; }
.tw-sidebox { padding: 18px 20px; background: var(--tw-sand); border-radius: 16px; font-size: 15px; }
.tw-sidebox__title { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tw-muted); }
.tw .tw-sidebox__big { margin: 0 0 6px; font-size: 34px; line-height: 1; font-weight: 800; color: var(--tw-navy); }

/* Reiswinkel */
.tw-shophead__in { display: flex; align-items: center; gap: 24px; }
.tw-shophead__logo { flex: none; display: grid; place-items: center; width: 140px; height: 96px; padding: 12px; background: #fff; border: 1px solid var(--tw-line); border-radius: 16px; }
.tw .tw-shophead__logo img { max-height: 70px; width: auto; object-fit: contain; }
.tw-shophead__text { flex: 1; min-width: 0; }
.tw .tw-shophead__sub { margin: 0; font-size: 15px; color: var(--tw-muted); }
.tw-offers { display: flex; flex-direction: column; gap: 16px; margin: 0 0 36px; }
.tw-offer { display: grid; grid-template-columns: 64px 1fr auto; gap: 18px; align-items: center; padding: 20px; background: #fff; border: 1px solid var(--tw-line); border-radius: var(--tw-radius); box-shadow: var(--tw-shadow); }
.tw-offer__badge { display: grid; place-items: center; width: 64px; height: 64px; font-size: 14px; font-weight: 800; color: var(--tw-orange-d); background: #fff1df; border-radius: 14px; }
.tw .tw-offer__title { margin: 0 0 6px; font-size: 20px; line-height: 1.3; }
.tw .tw-offer__body p { margin: 0 0 6px; font-size: 15px; }
.tw .tw-offer__cond { color: var(--tw-muted); }
.tw-offer__go { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.tw .tw-code { display: flex; flex-direction: column; align-items: center; padding: 8px 14px; font: 800 17px/1.2 ui-monospace, Menlo, monospace; color: var(--tw-navy); background: var(--tw-sand); border: 2px dashed var(--tw-orange); border-radius: 12px; cursor: pointer; }
.tw-code small { font-size: 12px; font-weight: 600; color: var(--tw-muted); }
.tw-notice { padding: 18px 20px; font-size: 16px; background: #fff7ea; border: 1px solid #f6d6a8; border-radius: 14px; }
.tw-notice strong { display: block; margin-bottom: 4px; color: var(--tw-navy); }
.tw-az { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
.tw .tw-az a { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; font-weight: 700; color: var(--tw-navy); text-decoration: none; background: var(--tw-sand); border-radius: 10px; }
.tw .tw-az a:hover { color: #fff; background: var(--tw-navy); }
.tw-azgroup { margin: 0 0 26px; scroll-margin-top: 130px; }
.tw .tw-azgroup__l { margin: 0 0 10px; padding-bottom: 6px; font-size: 24px; border-bottom: 2px solid var(--tw-line); }
.tw-azlist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 24px; margin: 0; padding: 0; list-style: none; }
.tw .tw-azlist a { color: var(--tw-navy); text-decoration: none; font-weight: 500; }
.tw .tw-azlist a:hover { color: var(--tw-blue-d); text-decoration: underline; }
.tw-fresh { margin-left: 8px; padding: 1px 7px; font-size: 11px; font-weight: 700; color: #1f8a4c; background: #e5f5ea; border-radius: 999px; }
.tw-empty { padding: 20px 0; }

/* Bestemming */
.tw-places { display: grid; gap: 28px; }
.tw .tw-place img { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: 16px; margin-bottom: 10px; }
.tw-callout { padding: 16px 18px; background: #e3f5fd; border-radius: 14px; }

/* Inhoudsopgave in artikelen (ook buiten .tw) */
.tw-toc { margin: 0 0 28px; padding: 16px 20px; background: var(--theme-palette-color-6, #f6f2ec); border-radius: 14px; font-size: 16px; }
.tw-toc summary { font-weight: 700; cursor: pointer; color: var(--theme-palette-color-4, #0d2b45); }
.tw-toc ol { margin: 10px 0 0; padding: 0 0 0 22px; }
.tw-toc li { margin: 4px 0; }
.tw-toc li::marker { color: #d97a0d; font-weight: 700; }
.tw-toc a { text-decoration: none; }
.entry-content h2[id] { scroll-margin-top: 110px; }

@media (max-width: 1100px) {
	.tw-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.tw-shops { grid-template-columns: repeat(4, 1fr); }
	.tw-article__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.tw-article__main { margin: 0 auto; }
}
@media (max-width: 960px) {
	.tw-latest { grid-template-columns: 1fr; gap: 20px; }
	.tw-tools { grid-template-columns: 1fr; }
	.tw-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.tw-dest, .tw-dest--all { grid-template-columns: repeat(2, 1fr); }
	.tw-shophead__in { flex-wrap: wrap; }
	.tw-azlist { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.tw-hero__in { padding-top: 48px; padding-bottom: 76px; }
	.tw .tw-hero__title { font-size: 34px; }
	.tw .tw-hero__lead { font-size: 17px; }
	.tw .tw-search input { height: 50px; }
	.tw-section { padding: 44px 0; }
	.tw-section--tools { margin-top: -36px; padding: 0; }
	.tw .tw-h2 { font-size: 24px; }
	.tw-section__head { align-items: flex-start; flex-direction: column; gap: 6px; }
	.tw-grid--3, .tw-grid--4, .tw-dest, .tw-dest--all { grid-template-columns: 1fr; gap: 24px; }
	.tw-card--overlay .tw-card__img { min-height: 360px; }
	.tw-card--overlay .tw-card__body { padding: 20px; }
	.tw .tw-card--overlay .tw-card__title { font-size: 25px; }
	.tw-card--mini .tw-card__img { width: 104px; }
	.tw-shops { grid-template-columns: repeat(2, 1fr); }
	.tw .tw-pagehead__title, .tw .tw-article__title { font-size: 32px; }
	.tw-offer { grid-template-columns: 1fr; }
	.tw-offer__badge { width: auto; height: auto; padding: 6px 10px; justify-self: start; }
	.tw-shophead__logo { width: 110px; height: 76px; }
	.tw-shophead__in .tw-btn { width: 100%; text-align: center; }
}
