/* Shared public-page templates. Artwork is reused from the ImageGen atlas set;
   layout, headings, questions, statuses and controls remain native HTML. */
:root { --folio-rule:#a88a4d66; --folio-ink:#203f2b; }
body:is(.ts-info,.ts-help,.ts-legal,.ts-discover) main { max-width:1120px; }
body:is(.ts-info,.ts-help,.ts-legal,.ts-discover) main > .panel,
body.ts-legal main > article.legal {
 padding:clamp(24px,5vw,64px);
 border:1px solid var(--folio-rule);
 border-top:3px double #a88a4d;
 background:#fff9e84d;
 box-shadow:0 8px 24px #203f2b06;
}
body:is(.ts-info,.ts-help,.ts-legal,.ts-discover) main > .panel > h1,
body.ts-legal .legal > h1 {
 color:var(--folio-ink) !important;
 font-size:clamp(38px,5.5vw,68px);
 line-height:1.03; text-align:left;
 margin:0 0 28px; max-width:18ch;
}
body:is(.ts-info,.ts-help,.ts-legal,.ts-discover) main > .panel > h1::after,
body.ts-legal .legal > h1::after {
 content:''; display:block; width:min(100%,340px); height:65px;
 background:url('/assets/atlas-art/divider-v1.webp') left center/contain no-repeat;
 margin-top:18px; pointer-events:none;
}
body .editorial-banner { border:1px solid var(--folio-rule); padding:7px; background:#203f2b; }
body .editorial-banner img { width:100%; height:100%; object-fit:cover; }
body:is(.ts-info,.ts-help,.ts-legal,.ts-discover) p,
body.ts-legal .legal li { line-height:1.85; color:#40503f !important; }
body.ts-discover .panel { border-color:var(--folio-rule); }
body.ts-discover main article.panel { background:#fff9e845; padding:24px; border-top:2px solid var(--folio-rule); }
body.ts-info .tabs { display:flex; flex-wrap:wrap; gap:8px; border:0; margin-bottom:28px; }
body.ts-info .tab-btn {
 border:9px solid transparent; border-image:var(--atlas-label-frame) 64 fill / 9px stretch;
 padding:5px 10px; min-height:44px; background:#f1ead9; color:#203f2b;
 box-shadow:none; border-radius:0; white-space:normal;
}
body.ts-info .tab-btn[aria-selected=true] { border-image-source:var(--atlas-control-frame); background:#203f2b; color:#fff0ce; box-shadow:none; }
body.ts-info .kader { border-bottom:1px solid var(--folio-rule); padding:26px 0; }
body.ts-info .section-title { font:500 30px/1.2 var(--atlas-serif); color:#203f2b; margin-bottom:14px; }
body:is(.ts-help,.ts-info) details.faq { border-top:1px solid var(--folio-rule); background:transparent; }
body:is(.ts-help,.ts-info) details.faq[open] { background:#bd95550b; }
body:is(.ts-help,.ts-info) details.faq summary { gap:18px; padding:23px 12px; color:#203f2b; font-size:16px; line-height:1.5; }
body:is(.ts-help,.ts-info) details.faq summary > span[aria-hidden] {
 display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px;
 border:1px solid #a88a4d; background:#f1ead9; color:#203f2b;
}
body:is(.ts-help,.ts-info) details.faq .ans { padding:0 54px 24px 12px; color:#40503f; line-height:1.85; }
body .contents-nav { border-block:1px solid var(--folio-rule); padding:20px 0; margin:28px 0; display:flex; flex-wrap:wrap; gap:8px 20px; }
body .contents-nav strong { flex-basis:100%; font:500 26px var(--atlas-serif); color:#203f2b; }
body .contents-nav a { color:#40503f; padding:6px 0; text-underline-offset:5px; }
body.ts-legal .legal h2 { color:#203f2b; margin-top:36px; border-top:1px solid var(--folio-rule); padding-top:24px; }
body.ts-route .route-jumps {
 display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
 margin:16px 10px 24px; padding:5px;
 border:1px solid #a88a4d88; border-radius:2px;
 background:linear-gradient(110deg,#fff9e8b3,#eee3ca80);
 box-shadow:inset 0 0 0 3px #fff9e866,0 3px 10px #203f2b06;
}
body.ts-route .route-jumps a {
 display:flex; align-items:center; justify-content:center; gap:12px;
 min-width:0; min-height:48px; padding:10px 14px;
 border:0; border-radius:0; color:#203f2b;
 font-size:13px; font-weight:500; line-height:1.4; text-align:center;
 text-decoration:none; transition:background-color .15s,color .15s;
}
body.ts-route .route-jumps a + a { border-left:1px solid #a88a4d55; }
body.ts-route .route-jumps a::after { content:'↓'; color:#94743b; font-size:15px; }
body.ts-route .route-jumps a:hover,
body.ts-route .route-jumps a:focus-visible { background:#203f2b; color:#fff0ce; }
body.ts-route .route-jumps a:is(:hover,:focus-visible)::after { color:#dfc184; }
body.ts-route .route-jumps a:focus-visible { outline:2px solid #a88a4d; outline-offset:2px; }
@media(prefers-reduced-motion:reduce) { body.ts-route .route-jumps a { transition:none; } }
body.ts-route .route-jumps::after { display:none; }
body.ts-route .app-cta { border:1px solid var(--folio-rule); background:#fff9e84d; padding:28px; }
body.ts-route .app-cta h2 { color:#203f2b; }
body.ts-route .card:not(.trailer-btn) { border-color:var(--folio-rule); }
body.ts-map .map-topbar { background:#203f2b; border-bottom:1px solid #bd9555; }
body.ts-map .map-brand { color:#fff0ce; }
body.ts-map .map-directory { background:#f1ead9 url('/assets/atlas-art/paper-v1.webp') repeat; background-size:512px; border-right:1px solid var(--folio-rule); }
body.ts-map .map-directory-heading { padding:28px 24px 18px; }
body.ts-map .map-directory-heading h1 { color:#203f2b; font-size:40px; line-height:1.05; }
body.ts-map .map-directory-heading p { color:#40503f; line-height:1.7; }
body.ts-map .map-route { padding:18px 24px; border-bottom:1px solid var(--folio-rule); background:transparent; }
body.ts-map .map-route h2 { font-size:27px; color:#203f2b; }
body.ts-map .map-route p { color:#59634d; }
body.ts-map .map-route:focus-within,body.ts-map .map-route:hover { background:#bd955514; }
body.ts-map .leaflet-popup-content-wrapper { background:#f1ead9; color:#203f2b; border:1px solid #a88a4d; border-radius:0; }
body.ts-map .leaflet-popup-tip { background:#f1ead9; }
body.ts-map .leaflet-control-zoom a { background:#f1ead9; color:#203f2b; }
body.ts-state .state-card { border:1px solid #a88a4d; border-radius:0; background:#fff9e845; }
body.ts-state .state-copy { padding:clamp(25px,5vw,60px); }
body.ts-state .state-copy::before { content:''; display:block; height:70px; width:min(100%,350px); margin-bottom:20px; background:url('/assets/atlas-art/divider-v1.webp') left center/contain no-repeat; }
body.ts-state .state-copy h1 { color:#203f2b; font-size:clamp(36px,4vw,60px); line-height:1.05; }
body.ts-state .state-copy p { color:#40503f; line-height:1.8; }
body .store-dialog { background:#f1ead9 url('/assets/atlas-art/paper-v1.webp') repeat; background-size:512px; color:#203f2b; border:1px solid #a88a4d; border-radius:0; }
body .audio-status { background:#f1ead9; color:#203f2b; border:1px solid #923e31; }
body #geen-resultaten { border:1px dashed #a88a4d; padding:28px; color:#40503f !important; }
@media(max-width:600px) {
 body:is(.ts-info,.ts-help,.ts-legal,.ts-discover) main > .panel,body.ts-legal main > article.legal { padding:24px 18px; }
 body:is(.ts-help,.ts-info) details.faq summary { padding:18px 4px; font-size:15px; }
 body:is(.ts-help,.ts-info) details.faq .ans { padding:0 8px 20px; }
 body.ts-route .app-cta { padding:22px 16px; }
 body.ts-route .route-jumps { margin:12px 0 20px; padding:4px; }
 body.ts-route .route-jumps a { gap:6px; padding:10px 6px; font-size:12px; }
 body.ts-map .map-directory-heading h1 { font-size:34px; }
}
@media print {
 body main > .panel,body.ts-legal main > article.legal { border:0 !important; background:white !important; box-shadow:none !important; }
}
/* Older headers still carry inline colours; retain contrast on the shared ink bar. */
body:not(.ts-home) .sticky-header a[aria-label="Terug naar home"] .font-bold { color:#fff0ce !important; }
body:not(.ts-home) .sticky-header a[aria-label="Terug naar home"] .text-xs { color:#e3d8bb !important; }
body:not(.ts-home) .sticky-header .visitor-nav a { color:#fff0ce !important; }

/* Shared shell and form details, including utility and error pages. */
body .state-nav { background:#203f2b; border-bottom:1px solid #a88a4d; padding:18px clamp(20px,4vw,40px); }
body .state-nav .footer-brand { color:#fff0ce; }
body .map-brand,body .state-nav .footer-brand { font:500 40px/1 var(--atlas-serif); letter-spacing:-.045em; }
body .sticky-header a[aria-label="Terug"],body .adventure-motion {
 border:8px solid transparent !important;
 border-image:var(--atlas-label-frame) 64 fill / 8px stretch !important;
 background:#f1ead9 !important; color:#203f2b !important; border-radius:0 !important;
 min-width:44px; min-height:44px;
}
body .adventure-motion { padding:3px 8px; }
body:is(.ts-home,.ts-info,.ts-help,.ts-legal,.ts-state,.ts-discover) :is(input:not([type=checkbox]):not([type=radio]),select,textarea),
body.ts-home #wandelingen :is(#zoekveld,#sorteer) {
 border:1px solid #a88a4d99 !important; border-radius:0; background:#fff9e870 !important;
 color:#203f2b; padding:12px !important; min-height:46px; font:14px var(--atlas-sans); max-width:100%;
}
body :is(input,textarea)::placeholder { color:#66705b; opacity:1; }
body :is(.section-kicker,.state-copy .section-kicker) { color:#79613a; }
body .store-choice { white-space:normal; }
body .store-dialog .dialog-close { color:#203f2b; border:1px solid #a88a4d; border-radius:0; background:#f1ead9; }
body .ts-menu-link,body .footer-inner nav a { text-underline-offset:5px; }
body .ts-menu-link:hover,body .footer-inner nav a:hover { text-decoration:underline; }
body .route-readmore summary { min-height:44px; text-underline-offset:5px; }
body .route-readmore summary:hover { text-decoration:underline; }
@media(max-width:480px) {
 body .map-brand,body .state-nav .footer-brand { font-size:34px; }
 .ts-home .header-shell { gap:10px; padding-inline:14px; }
 .ts-home .brand-name { font-size:34px; }
 .ts-home .brand-mark { display:none; }
 .ts-home .header-pill.primary { max-width:112px; }
 .ts-home .header-pill[aria-label="Kaart"] { display:none; }
}
body .atlas-public-header { display:flex; justify-content:space-between; align-items:center; gap:16px; }
body .atlas-public-header .footer-brand { color:#fff0ce; font:500 40px/1 var(--atlas-serif); letter-spacing:-.045em; }
body:not(.ts-home) .sticky-header a[aria-label="Terug naar home"] .font-bold::after { content:none; }
body .state-card { max-width:1180px; margin:32px auto 56px; }
@media(max-width:760px) { body .state-card { margin:24px 16px 40px; } }
body .store-dialog::backdrop { background:#10291fb3; }
body #ts-menu-overlay { background:#10291fb3; }
/* Cover images fill the full hero; reserve room between navigation and titles. */
body.ts-route .hero { min-height:430px; background:#203f2b; }
body.ts-route .hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
body.ts-route .hero h1 { text-wrap:balance; }
@media(max-width:600px) {
 body.ts-route .hero { min-height:360px; }
 body.ts-route .hero h1 { font-size:clamp(28px,7.7vw,42px); line-height:1.08; }
}

/* Related walks and utility navigation use the same engraved atlas frames. */
body.ts-route .related-walk-links { display:grid; gap:10px; }
body.ts-route .small-link {
 display:inline-flex; align-items:center; gap:12px;
 min-height:44px; max-width:100%; box-sizing:border-box;
 border:6px solid transparent;
 border-image:var(--atlas-label-frame) 64 fill / 6px / 0 stretch;
 background:#f1ead9; color:#203f2b;
 padding:6px 10px; font:500 14px/1.5 var(--atlas-sans);
 text-decoration:none; overflow-wrap:anywhere;
 transition:filter .15s ease;
}
body.ts-route .related-walk-links .small-link { justify-content:space-between; }
body.ts-route .related-walk-links .small-link::after {
 content:'→'; color:#79613a; flex:none; font-size:20px; line-height:1;
}
body.ts-route .small-link:hover { color:#203f2b; filter:brightness(1.05); }
body.ts-route .small-link.smart-store-link {
 border-image-source:var(--atlas-control-frame); background:#203f2b; color:#fff0ce;
}
body.ts-route .footer-actions { justify-content:flex-start; gap:8px; margin-block:20px 28px; }
@media(prefers-reduced-motion:reduce) { body.ts-route .small-link { transition:none; } }