/* Destination-guide styling inspired by the reference, using our park photos. */
:root { --ink:#174951; --moss:#366a68; --leaf:#99b9a2; --cream:#f6f7f2; --paper:#ffffff; --clay:#987031; --muted:#576b6a; }
body { background:#f6f7f2; font-family:Arial,Helvetica,sans-serif; }
h1,h2,h3,.destination-copy h3,.wildlife-copy h3 { font-family:Arial,Helvetica,sans-serif; font-weight:700; }
h2 { font-size:clamp(2rem,4.4vw,3.35rem); line-height:1.12; letter-spacing:-.05em; }
.topbar { position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%; max-width:1240px; z-index:5; background:transparent; border:0; padding:25px 30px; }
.brand { font:750 1.18rem Arial,sans-serif; letter-spacing:-.05em; display:flex; align-items:center; gap:10px; }
.brand span { color:var(--ink); }
.brand-icon { width:34px; height:34px; color:var(--ink); }
.brand-nera { gap:11px; }
.brand-emblem { width:54px; height:54px; flex-shrink:0; filter:drop-shadow(0 3px 5px #153f4315); }
.brand-wordmark { display:flex; flex-direction:column; gap:5px; }
.brand-wordmark small { font:700 .57rem Arial,sans-serif; letter-spacing:.3em; }
.brand-wordmark strong { font:800 .95rem Arial,sans-serif; letter-spacing:.035em; }
.routes-heading { margin-top:32px; }
.routes-heading h3 { font-size:1.45rem; margin:0 0 10px; }
.routes-heading p { color:var(--muted); font-size:.82rem; line-height:1.65; }
.route-number { display:inline-block; margin-right:9px; color:#927139; font-size:.7rem; }
.blaze.yellow { color:#a57d00; }
.blaze.dot:before { content:""; width:17px; height:17px; border-radius:50%; background:currentColor; }
.blaze.triangle:before { content:""; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:19px solid currentColor; }
nav { gap:19px; font-weight:600; font-size:.8rem; }
.lang,.menu-toggle { background:#fffffff0; border:1px solid #d7e2df; border-radius:12px; padding:12px 14px; color:var(--ink); box-shadow:0 3px 12px #16495108; }
.menu-toggle { display:none; font:700 .8rem Arial,sans-serif; }
.hero { min-height:790px; border:0; background:#dce7dc; }
.hero-photo { object-position:center 60%; }
.hero:before { background:linear-gradient(180deg,#f1f5eaf5 0%,#f0f4e7df 28%,#edf4e2c9 48%,#e5eddb54 75%,#153f3b29 100%); }
.hero-inner { padding:150px 30px 155px; text-align:center; color:var(--ink); }
.hero .eyebrow { border:0; padding:0; background:transparent; border-radius:0; color:var(--ink); font-size:.73rem; letter-spacing:.05em; }
h1 { max-width:1000px; margin:25px auto 22px; font-size:clamp(2.7rem,5.4vw,4.6rem); line-height:1.07; letter-spacing:-.055em; }
h1 .hero-line { display:block; font-size:.79em; margin-top:9px; }
.hero p { max-width:660px; margin:0 auto; color:#254f50; font-size:1.12rem; line-height:1.6; }
.hero-finder { max-width:940px; margin:34px auto 18px; display:grid; grid-template-columns:1fr 1fr auto; gap:0; padding:12px; background:#fff; border:1px solid #e2e8df; border-radius:18px; box-shadow:0 14px 45px #123e3b20; text-align:left; }
.finder-field { display:flex; flex-direction:column; gap:9px; padding:12px 20px; min-width:0; }
.finder-field+.finder-field { border-left:1px solid #e2e9e4; }
.finder-field label { color:#5b7272; font:.72rem Arial,sans-serif; }
.finder-field select { border:0; background:transparent; color:#174951; padding:0 22px 0 0; width:100%; font:600 .88rem/1.6 Arial,sans-serif; cursor:pointer; }
.finder-submit { align-self:stretch; border:0; border-radius:11px; padding:16px 27px; background:#184f58; color:white; font:700 .9rem Arial,sans-serif; }
.finder-submit:hover { background:#0d3e47; }
.hero .finder-subtext { font-size:.77rem; display:inline-block; padding:7px 12px; border-radius:5px; background:#ffffffca; color:#214f51; }
.hero-shortcuts { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:25px 0 0; }
.hero-shortcuts a { text-decoration:none; color:#174951; padding:10px 15px; border-radius:99px; border:1px solid #b1c6ba; background:#ffffffc9; font:600 .76rem Arial,sans-serif; }
.hero-shortcuts a:hover { background:white; }
.backpacking-badge { display:none; }
.hero-credit { background:#183e3bd9; font-size:10px; }
.hero-bottom { position:absolute; bottom:36px; left:30px; z-index:2; color:white; font:600 .75rem Arial,sans-serif; text-shadow:0 1px 7px #153f3b; }
.section { max-width:1180px; padding:75px 30px; }
.park-overview { background:transparent; }
.park-facts { background:#fff; border:1px solid #e0e6df; border-radius:16px; padding:27px; box-shadow:0 6px 20px #17495105; }
.park-facts dd { font-family:Arial,sans-serif; font-weight:700; }
.timeline strong { font-family:Arial,sans-serif; }
.destination { border-color:#dde6df; }
.destination-copy h3 { font-size:clamp(2rem,3.5vw,3rem); }
.destination-copy .destination-lead { font-family:Arial,sans-serif; font-size:1.17rem; line-height:1.5; }
.slides { border-radius:17px; }
.slider-arrow { background:#fff; border-color:#cbd9d0; }
.map-jumps a { background:white; border-color:#cbd9d0; }
.maps-section { background:#eaf0e9; }
.map-layout { border-color:#d8e3db; border-radius:17px; box-shadow:0 7px 25px #17495106; }
.map-heading h3 { font-weight:700; font-family:Arial,sans-serif; font-size:1.8rem; }
.place-option { border-radius:8px; }
.card,.route { border-radius:12px; }
.trip-section { background:#f0ede1; }
.trip-section .card { border:1px solid #e4e1d4; box-shadow:none; }
.wildlife-section { background:#123f46; }
.wildlife-slide { background:#1c4c50; }
.wildlife-slide img[src$="park-falcon.jpg"] { object-fit:contain; background:#1b4143; }
.wildlife-slide img[src$="park-owl.jpg"],.wildlife-slide img[src$="park-wildcat.jpg"] { object-position:center 28%; }
.wildlife-section .slider-arrow { background:transparent; }
.local { background:#e7eee7; color:var(--ink); }
.local p { color:var(--muted); }
.local .kicker { color:#866630; }
.local .card { background:#fff; border:1px solid #d5e0d5; border-radius:15px; }
.local .card h3 { color:var(--ink); }
.local .card p { color:var(--muted); }
.local .button { background:#174f58; color:white; border-radius:10px; }
.footer { background:#123b42; }
button.route { width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.route-open { display:block; margin-top:10px; color:#216775; font-size:.78rem; font-weight:700; }
.route:focus-visible,.trail-close:focus-visible,.trail-connections button:focus-visible { outline:3px solid #d49237; outline-offset:4px; }
#route-list { scroll-margin-top:100px; }
#trail-dialog { box-sizing:border-box; width:min(780px,calc(100% - 28px)); max-height:88vh; max-height:88dvh; padding:0; border:1px solid #d8e4dd; border-radius:22px; background:#fffdf8; color:#183f43; box-shadow:0 30px 100px #071f3866; }
#trail-dialog::backdrop { background:#082f3bbd; backdrop-filter:blur(5px); }
.trail-dialog-top { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:16px 28px; background:#edf4eef5; border-bottom:1px solid #d8e4dd; }
#trail-dialog-label { font-size:.75rem; letter-spacing:.15em; font-weight:800; }
.trail-close { display:grid; place-items:center; width:42px; height:42px; border:1px solid #c8d9ce; border-radius:50%; background:white; color:#174f58; font-size:28px; cursor:pointer; }
#trail-dialog-content { padding:26px 30px 30px; }
#trail-dialog h2 { font-size:clamp(1.35rem,3vw,1.9rem); line-height:1.3; margin:0 0 24px; }
#trail-dialog h3 { font-size:1rem; margin:24px 0 10px; }
#trail-dialog p { font-size:.95rem; line-height:1.8; color:#455d5b; }
.trail-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 26px; }
.trail-metrics > div { background:#edf3ed; border-radius:12px; padding:14px; }
.trail-metrics > div:last-child { grid-column:1/-1; }
.trail-metrics dt { font-size:.75rem; color:#53716b; margin-bottom:6px; }
.trail-metrics dd { margin:0; font-weight:700; }
.trail-warning { padding:1px 20px 10px; background:#fff0d9; border-left:4px solid #ba8031; border-radius:10px; }
.trail-connections { display:flex; flex-wrap:wrap; gap:8px; }
.trail-connections button { border:1px solid #cbdcd1; border-radius:10px; padding:10px 13px; background:white; font:inherit; font-size:.8rem; color:#205b61; cursor:pointer; text-align:left; }
#trail-dialog .trail-source { border-top:1px solid #d9e3da; margin-top:26px; padding-top:18px; font-size:.75rem; }
@media(max-width:500px) { #trail-dialog-content { padding:22px 18px; } .trail-dialog-top { padding:12px 18px; } }
@media(max-width:1050px) {
  .topbar { gap:15px; }
  .menu-toggle { display:block; }
  .topbar nav { display:none; position:absolute; top:80px; right:25px; left:25px; padding:20px; background:#fffffff5; border:1px solid #d8e3dd; border-radius:15px; box-shadow:0 15px 30px #17495120; flex-wrap:wrap; }
  .topbar nav.menu-open { display:flex; }
  .topbar nav a { display:block; padding:8px 10px; }
}
@media(max-width:760px) {
  .topbar { padding:20px; }
  .hero { min-height:825px; }
  .hero-inner { padding:125px 22px 105px!important; }
  h1 { font-size:clamp(2.6rem,8vw,3.7rem); margin-top:22px; }
  .hero p { font-size:1rem; }
  .hero-finder { grid-template-columns:1fr 1fr; padding:10px; margin-top:28px; border-radius:15px; }
  .finder-field { padding:12px; }
  .finder-field select { font-size:.78rem; }
  .finder-submit { grid-column:1/-1; padding:15px; margin-top:8px; }
  .hero-shortcuts { margin-top:18px; gap:7px; }
  .hero-shortcuts a { font-size:.7rem; padding:8px 11px; }
  .hero-bottom { bottom:53px; left:22px; }
  .section { padding:58px 22px; }
  .park-facts { padding:23px; }
}

.map-original-legend { margin:24px 0 0; padding-top:18px; border-top:1px solid #d0ded4; }
.map-original-legend figcaption { font-weight:700; margin-bottom:12px; }
.map-original-legend img { display:block; width:100%; height:auto; }
.map-sidebar:has(.map-original-legend) { max-height:760px; overflow-y:auto; }
@media(max-width:760px) { .map-sidebar:has(.map-original-legend) { max-height:none; } .map-original-legend { max-height:310px; overflow-y:auto; } }

#route-overlays { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.route-map-options { display:flex!important; flex-direction:column; gap:9px; }
.map-route-choice { display:flex; align-items:flex-start; gap:10px; text-align:left; line-height:1.5; padding:12px!important; border-left:4px solid var(--route-color)!important; }
.map-route-choice[aria-pressed="true"] { background:#e3eee7; box-shadow:0 0 0 2px var(--route-color); color:#153f43; }
.route-color-dot { flex:0 0 12px; height:12px; margin-top:4px; border-radius:50%; background:var(--route-color); }
.trail-detail-list { padding-left:22px; color:#455d5b; font-size:.94rem; line-height:1.75; }
.trail-detail-list li { margin:10px 0; padding-left:3px; }

.trail-legend-layout { grid-template-columns:230px minmax(0,1fr) 255px; align-items:start; }
.trail-legend-layout .translated-legend { grid-column:1; grid-row:1; }
.trail-legend-layout .trail-map-shell { grid-column:2; grid-row:1; min-width:0; }
.trail-legend-layout > .map-sidebar { grid-column:3; grid-row:1; max-height:660px; overflow-y:auto; }
.translated-legend { padding:20px 16px; max-height:660px; overflow-y:auto; background:#f0f5ee; box-sizing:border-box; }
.translated-legend h4 { margin:0 0 10px; font-size:1rem; }
.legend-intro { font-size:.75rem; line-height:1.5; color:#526b60; }
.legend-items { list-style:none; margin:16px 0; padding:0; }
.legend-items li { display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid #dae5d8; font-size:.73rem; line-height:1.4; }
.legend-symbol { flex:0 0 36px; width:36px; height:24px; }
@media(max-width:1150px) and (min-width:761px) { .trail-legend-layout { grid-template-columns:200px minmax(0,1fr); } .trail-legend-layout > .map-sidebar { grid-column:2; grid-row:2; max-height:none; } .trail-legend-layout .translated-legend { grid-row:1 / span 2; } }
@media(max-width:760px) { .trail-legend-layout { grid-template-columns:1fr; } .trail-legend-layout > .map-sidebar { grid-column:1; grid-row:1; max-height:none; } .trail-legend-layout .trail-map-shell { grid-column:1; grid-row:2; } .trail-legend-layout .translated-legend { grid-column:1; grid-row:3; max-height:360px; } }

/* Wide viewer: keep source pixels square and pan within the landscape frame. */
#walking-map { width:calc(100vw - 40px); max-width:none; margin-left:calc(50% - 50vw + 20px); box-sizing:border-box; }
#walking-map .trail-legend-layout { grid-template-columns:200px minmax(0,1fr) 240px; }
#walking-map .trail-map { width:100%; height:auto; aspect-ratio:16 / 9; }
#walking-map .translated-legend, #walking-map .trail-legend-layout > .map-sidebar { max-height:calc((100vw - 482px) * 9 / 16 + 64px); }
#walking-map .trail-map-shell:fullscreen { width:100vw; height:100dvh; justify-content:center; }
#walking-map .trail-map-shell:fullscreen .map-canvas { flex:none; width:100%; height:auto; aspect-ratio:16 / 9; max-height:100dvh; }
#walking-map .trail-map-shell:fullscreen .trail-map { height:100%; aspect-ratio:auto; }
@media(max-width:1100px) { #walking-map .trail-legend-layout { grid-template-columns:180px minmax(0,1fr); } #walking-map .trail-legend-layout > .map-sidebar { grid-column:2; grid-row:2; max-height:none; } #walking-map .translated-legend { grid-row:1 / span 2; max-height:650px; } #walking-map .route-map-options { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { #walking-map { width:calc(100vw - 20px); margin-left:calc(50% - 50vw + 10px); } #walking-map .trail-legend-layout { grid-template-columns:1fr; } #walking-map .trail-legend-layout > .map-sidebar { grid-column:1; grid-row:1; } #walking-map .trail-map-shell { grid-column:1; grid-row:2; } #walking-map .translated-legend { grid-column:1; grid-row:3; max-height:320px; } }

.map-route-item { background:#fff; border:1px solid #d5e2d8; border-radius:12px; padding:5px; min-width:0; }
.map-route-item .map-route-choice { width:100%; box-sizing:border-box; }
.route-description-button { display:flex; align-items:center; justify-content:space-between; gap:8px; width:calc(100% - 12px); margin:6px; padding:9px 11px; border:1px solid #b9d0c1; border-radius:8px; background:#edf4ee; color:#20575d; font:600 .75rem/1.4 Arial,sans-serif; text-align:left; cursor:pointer; }
.route-description-button:hover { background:#dcebe0; }
.route-description-button:focus-visible { outline:3px solid #ce913f; outline-offset:2px; }

.map-photo-pin { position:absolute; z-index:3; display:flex; align-items:center; gap:5px; padding:0; border:0; background:transparent; color:#153b41; cursor:pointer; transform:translate(-16px,-16px) scale(var(--pin-scale,1)); transform-origin:16px 16px; }
.photo-pin-icon { display:grid; place-items:center; width:30px; height:30px; border:2px solid white; border-radius:50% 50% 50% 0; transform:rotate(-45deg); color:white; background:#174f58; box-shadow:0 2px 8px #0007; font-size:19px; }
.photo-pin-label { padding:4px 7px; border-radius:5px; background:#fffffff2; box-shadow:0 1px 5px #0004; white-space:nowrap; font:700 10px/1.3 Arial,sans-serif; }
.map-photo-pin:hover { z-index:5; } .map-photo-pin:focus-visible { outline:3px solid #d99636; outline-offset:4px; }
#map-photo-dialog { width:min(860px,calc(100vw - 28px)); max-height:90dvh; padding:0; border:0; border-radius:18px; background:#fffdf8; color:#183f43; overflow:auto; box-shadow:0 25px 100px #0007; }
#map-photo-dialog::backdrop { background:#082d3cbb; backdrop-filter:blur(4px); }
.map-photo-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 22px; }
.map-photo-header h2 { margin:0; font-size:1.35rem; }
#map-popup-photo { display:block; width:100%; height:auto; max-height:60dvh; object-fit:contain; background:#173f42; }
.map-photo-caption { padding:4px 22px 22px; line-height:1.7; } .map-photo-caption small { color:#63766c; }

.map-photo-controls { display:flex; justify-content:center; align-items:center; gap:20px; padding:12px; } .map-photo-controls[hidden] { display:none; }
.map-photo-controls button { border:1px solid #b7cec4; border-radius:50%; width:38px; height:38px; background:#eff5ef; color:#174f58; font-size:20px; cursor:pointer; }
.map-photo-controls button:focus-visible { outline:3px solid #d99631; }
.photo-pin-label { opacity:0; pointer-events:none; transition:opacity .15s; } .map-photo-pin:hover .photo-pin-label,.map-photo-pin:focus-visible .photo-pin-label { opacity:1; }
.map-photo-caption a { color:#396764; text-underline-offset:3px; }

.map-photo-google { display:inline-block; padding:10px 15px; border:1px solid #bfd1c7; border-radius:9px; background:#edf4ee; font-size:.85rem; font-weight:700; }

#map-photo-image-frame.photo-modern-crop { overflow:hidden; aspect-ratio:500 / 370; }
#map-photo-image-frame.photo-modern-crop #map-popup-photo { width:200%; max-width:none; max-height:none; height:auto; margin-left:-100%; object-fit:initial; }