/* KPC "dressed-up" tool pages (Oct 16 2026, Brandon: dress up the KY planner, Activation Kit, Am I in the Park?,
   Info Finder and Park Commander like the KPC US Trip Planner).
   Use: <body class="kd" style="--kd-bg:url('bg-lake-camp.jpg');--kd-bgm:url('bg-lake-camp-mobile.jpg')">
   A soft, darkened picture sits behind the page (fixed); content sits on cream cards (.panel, .kd-card, .note). */
/* dark mode paints html + body; keep the colour on html only so the picture (body::before) is never covered */
html:has(body.kd){background:#0b120e!important}
body.kd{background:transparent!important}
body.kd::before{content:"";position:fixed;inset:0;z-index:-1;background:#0b120e var(--kd-bg) center/cover no-repeat}
@media(max-width:700px){body.kd::before{background-image:var(--kd-bgm,var(--kd-bg))}}
body.kd main,body.kd .section{background:transparent}
body.kd .tool-head{border-bottom:3px solid #d5a63a}
body.kd .tool-head h1{font-size:clamp(36px,6vw,62px)}
body.kd .tool-head .kd-go{display:inline-block;margin-top:18px;font:900 13px Arial,sans-serif;letter-spacing:1.2px;padding:13px 20px;border-radius:10px;background:#d5a63a;color:#0b0b0b;text-decoration:none;box-shadow:0 8px 20px rgba(0,0,0,.35)}
body.kd .toolnav{background:rgba(7,7,7,.85)}
body.kd .section{padding-top:8px}
body.kd .panel:not(.dark),body.kd .kd-card,body.kd .note{background:rgba(255,250,240,.97);border-radius:16px;border:1px solid rgba(213,166,58,.35);box-shadow:0 18px 44px rgba(0,0,0,.38)}
body.kd .panel.dark{border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.45)}
body.kd .kd-card{padding:20px;margin:20px 0}
body.kd .note{padding:16px 20px;color:#3d3a33;margin-top:20px}
body.kd .map{border-radius:12px;overflow:hidden}
body.kd .kpc-disclaim{margin-top:20px!important}
body.kd .kpc-disclaim>div{border-radius:14px!important;box-shadow:0 18px 44px rgba(0,0,0,.3)}
.kd-h{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.kd-h .n{flex:0 0 34px;height:34px;border-radius:50%;background:#171717;color:#f0c96b;font:900 15px/34px Arial,sans-serif;text-align:center;border:2px solid #d5a63a}
.kd-h h2{margin:0;font:900 22px/1.15 Georgia,serif;color:#171717}
.kd-h small{display:block;font:13px/1.4 Arial,sans-serif;color:#5e584d;margin-top:2px}
.kd-brand{display:flex;align-items:center;gap:10px;font:900 13px Arial,sans-serif;letter-spacing:1.4px;color:#1d5a3a;margin:0 0 10px}
.kd-brand img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #d5a63a}
.kd-brand b{display:block;font-size:11px;letter-spacing:2px;color:#8a6a1c}
@media(max-width:600px){body.kd .kd-card{padding:15px;border-radius:14px;margin:14px 0}.kd-h h2{font-size:19px}
 body.kd .map .leaflet-control-attribution{font-size:9px;line-height:1.3}body.kd .map .leaflet-bottom.leaflet-left{bottom:24px}}
/* Activation Kit (kpc-kit.html) */
body.kd .kit-card,body.kd .kit-sec{background:rgba(255,250,240,.97);border-radius:16px;border:1px solid rgba(213,166,58,.35);box-shadow:0 18px 44px rgba(0,0,0,.38)}
body.kd .kit-card{border-top:4px solid #d5a63a}
body.kd .kit-sec{margin-top:18px;padding:18px}
body.kd .kit-head{border-radius:16px;border:1px solid rgba(213,166,58,.55);box-shadow:0 18px 44px rgba(0,0,0,.5)}
body.kd .kit-wrap>p,body.kd #kitSaved>p{color:#efe9da}
/* Am I in the Park? (kpc-in-park.html) + Park Info Finder (kpc-park-info.html) */
body.kd .ip-card,body.kd .ip-know,body.kd .pi-search,body.kd .pi-res,body.kd #piOut>.pi-msg{background:rgba(255,250,240,.97);border-radius:16px;border:1px solid rgba(213,166,58,.35);box-shadow:0 18px 44px rgba(0,0,0,.38)}
body.kd .ip-card,body.kd .pi-search{border-top:4px solid #d5a63a}
body.kd #piOut>.pi-msg{padding:14px 18px;margin-top:18px}
body.kd #ipMap,body.kd #piMap{border-radius:12px;overflow:hidden}
/* Park Commander (finder.html): a dark page, so the cards are dark glass instead of cream */
body.kd.kd-dark .panel,body.kd.kd-dark .results,body.kd.kd-dark .mapwrap{background:rgba(16,16,14,.9);border:1px solid rgba(213,166,58,.45);border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.5);backdrop-filter:blur(3px)}
body.kd.kd-dark .kynotice{background:rgba(28,27,22,.92);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
body.kd.kd-dark .finder-jump a{background:rgba(28,27,22,.9);box-shadow:0 6px 16px rgba(0,0,0,.35)}
body.kd.kd-dark #map{border-radius:12px;overflow:hidden}
body.kd.kd-dark .kpc-disclaim>div{box-shadow:0 12px 30px rgba(0,0,0,.4)}

/* Oct 17 (Brandon: 'wrap the images on some boxes… no effects or themes on the 3 major mapping tools… a little more touch'):
   body.kd-wrap (Park Commander, KY Trip Planner; the US planner has the same in its own <style id="kpc-wrap-pics">):
   each box's heading sits on a picture with a dark fade, gold edge and a soft glow on the box */
body.kd-wrap .kd-h,body.kd-wrap .kd-brand,body.kd-wrap .pl-thead,body.kd-wrap .pl-ihead,body.kd-wrap.kd-dark .panel>h2,body.kd-wrap.kd-dark .resultshead{
 position:relative;border-radius:12px;padding:13px 16px;margin-bottom:14px;border:1px solid rgba(240,201,107,.55);border-bottom:2px solid #d5a63a;
 background:linear-gradient(90deg,rgba(10,7,4,.93),rgba(10,7,4,.62) 55%,rgba(10,7,4,.28)),var(--kw-pic,url('hero-lake-camp.jpg')) center 42%/cover no-repeat;box-shadow:0 8px 22px rgba(0,0,0,.35)}
body.kd-wrap .kd-h h2,body.kd-wrap.kd-dark .panel>h2,body.kd-wrap.kd-dark .resultshead h2{color:#fff!important;text-shadow:0 2px 10px #000}
body.kd-wrap .kd-h small{color:#eadfc8!important}
body.kd-wrap .kd-h .n{background:rgba(0,0,0,.55);box-shadow:0 0 12px rgba(240,180,80,.45)}
body.kd-wrap .kd-brand{color:#f0c96b}body.kd-wrap .kd-brand b{color:#eadfc8}
body.kd-wrap .pl-thead,body.kd-wrap .pl-ihead{color:#fff}
body.kd-wrap.kd-dark .resultshead{margin:0 0 12px}
body.kd-wrap.kd-dark .resultshead #count{color:#f0c96b}
body.kd-wrap .panel:not(.dark),body.kd-wrap .kd-card,body.kd-wrap.kd-dark .panel{box-shadow:0 18px 44px rgba(0,0,0,.42),0 0 28px rgba(240,180,80,.12);border-color:rgba(240,201,107,.55)}
/* a different picture for each box */
body.kd-wrap #plan .kd-h,body.kd-wrap #finder-search>h2{--kw-pic:url('hero-lake-camp.jpg')}
body.kd-wrap .kd-brand{--kw-pic:url('hero-map.jpg')}
body.kd-wrap .pl-thead,body.kd-wrap #finder-results .resultshead{--kw-pic:url('hero-river-camp.jpg')}
body.kd-wrap .pl-ihead,body.kd-wrap #trailfinder>h2{--kw-pic:url('hero-mast.jpg')}
body.kd-wrap #finder-about>h2{--kw-pic:url('hero-map.jpg')}
body.kd-wrap.kd-dark section.panel[aria-label="Cross-program planning"]>h2{--kw-pic:url('hero-solar.jpg')}
@media(max-width:600px){body.kd-wrap .kd-h,body.kd-wrap .kd-brand,body.kd-wrap .pl-thead,body.kd-wrap .pl-ihead,body.kd-wrap.kd-dark .panel>h2,body.kd-wrap.kd-dark .resultshead{padding:11px 13px}}

/* Oct 17 (Brandon: 'the areas that are not used be wrapped with an image'): the empty space INSIDE each box shows a soft,
   blurred club picture (light: cream veil over it; dark mode / Park Commander: dark veil). Inputs, lists and the map keep their own colours. */
body.kd-wrap .panel:not(.dark),body.kd-wrap .kd-card{background-image:linear-gradient(rgba(255,250,240,.7),rgba(255,250,240,.8)),var(--kw-bg,url('bg-lake-camp.jpg'))!important;background-size:cover!important;background-position:center!important}
html[data-theme=dark] body.kd-wrap .panel,html[data-theme=dark] body.kd-wrap .kd-card,body.kd-wrap .panel.dark,body.kd-wrap.kd-dark .panel{background-image:linear-gradient(rgba(12,10,7,.55),rgba(12,10,7,.72)),var(--kw-bg,url('bg-lake-camp.jpg'))!important;background-size:cover!important;background-position:center!important}
body.kd-wrap #plan,body.kd-wrap #finder-search{--kw-bg:url('bg-lake-camp.jpg')}
body.kd-wrap .kd-card:has(.kd-brand),body.kd-wrap #finder-map,body.kd-wrap #finder-about{--kw-bg:url('bg-map.jpg')}
body.kd-wrap #tripPanel,body.kd-wrap #finder-results{--kw-bg:url('bg-river-camp.jpg')}
body.kd-wrap #parkInfo,body.kd-wrap.kd-dark section.panel[aria-label="Cross-program planning"]{--kw-bg:url('bg-solar.jpg')}
body.kd-wrap .kd-card:has(#list),body.kd-wrap #trailfinder{--kw-bg:url('bg-lodge.jpg')}
@media(max-width:700px){
 body.kd-wrap #plan,body.kd-wrap #finder-search{--kw-bg:url('bg-lake-camp-mobile.jpg')}
 body.kd-wrap .kd-card:has(.kd-brand),body.kd-wrap #finder-map,body.kd-wrap #finder-about{--kw-bg:url('bg-map-mobile.jpg')}
 body.kd-wrap #tripPanel,body.kd-wrap #finder-results{--kw-bg:url('bg-river-camp-mobile.jpg')}
 body.kd-wrap #parkInfo,body.kd-wrap.kd-dark section.panel[aria-label="Cross-program planning"]{--kw-bg:url('bg-solar-mobile.jpg')}
 body.kd-wrap .kd-card:has(#list),body.kd-wrap #trailfinder{--kw-bg:url('bg-lodge-mobile.jpg')}
}