/* Small map points stay readable through labels and the full native place list. */
.ask-native-map.ask-area-map{isolation:isolate;container-type:inline-size;max-width:600px}
.ask-area-map .ask-area-pin{position:absolute;transform:none;margin:-12px 0 0 -12px!important;padding:0;line-height:1!important;pointer-events:none}
.ask-area-map .ask-area-pin>:is(a,.ask-area-marker){display:grid;place-items:center;position:relative;width:24px;height:24px;color:var(--ask-navy);text-decoration:none;border-radius:50%;line-height:1}
.ask-area-pin>:is(a,.ask-area-marker):before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:var(--ask-navy);box-shadow:0 0 0 2px #fff}
.ask-area-pin>:is(a,.ask-area-marker)>span{pointer-events:none;position:absolute;left:calc(100% + 2px);top:50%;transform:translateY(-50%);padding:7px 9px;background:#fff;border-radius:8px;box-shadow:0 3px 14px #102e4d12;white-space:nowrap;font-size:13px;line-height:1.25;font-weight:700;opacity:0;transition:opacity .15s}
.ask-area-pin:is(:hover,:focus-within)>:is(a,.ask-area-marker)>span,.ask-area-pin.is-featured>:is(a,.ask-area-marker)>span{opacity:1}
.ask-area-pin>a:focus-visible{outline:2px solid var(--ask-navy);outline-offset:2px}
.ask-area-pin.is-featured>:is(a,.ask-area-marker):before{width:10px;height:10px;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--ask-navy)}
.ask-area-pin>:is(a,.ask-area-marker):hover:before{background:#3b6689}
.ask-area-pin-den-haag>:is(a,.ask-area-marker)>span,.ask-area-pin-rotterdam>:is(a,.ask-area-marker)>span{left:auto;right:calc(100% + 2px)}
.ask-area-pin-den-haag>:is(a,.ask-area-marker)>span{transform:translateY(-85%)}
.ask-area-pin-rotterdam>:is(a,.ask-area-marker)>span{transform:translateY(0)}
.ask-area-pin-utrecht>:is(a,.ask-area-marker)>span{left:calc(100% + 14px);top:-38px;transform:none}
.ask-area-pin-utrecht>a>span:before{content:"";position:absolute;right:100%;bottom:0;width:34px;height:1px;background:#78909c;transform-origin:right;transform:rotate(-38deg);pointer-events:none}
.ask-area-pin-den-bosch>:is(a,.ask-area-marker)>span{left:calc(100% + 52px);top:-7px;transform:none}
.ask-area-pin-den-bosch>a>span:before{content:"";position:absolute;right:100%;top:50%;width:52px;height:1px;background:#78909c;pointer-events:none}
.ask-area-pin-eindhoven>:is(a,.ask-area-marker)>span{left:auto;right:calc(100% + 2px);transform:translateY(-25%)}
/* Labels sit below the dots. Scale the circular click areas with the map so
   adjacent city centres remain individually reachable, including on phones. */
.ask-area-map .ask-area-pin>a{pointer-events:none}
.ask-area-map .ask-area-pin>a:before{position:relative;z-index:2;pointer-events:none}
.ask-area-map .ask-area-pin>a:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(24px,2.6cqw);height:min(24px,2.6cqw);clip-path:circle(50%);z-index:5;pointer-events:auto;cursor:pointer}
.ask-area-map .ask-area-pin>a>span{z-index:1}
.ask-area-map .ask-area-pin:is(:hover,:focus-within)>a>span{z-index:4}
.ask-area-places{margin:30px 0 0;padding:0}
.ask-area-places>summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;min-height:48px;font-size:16px;font-weight:700}
.ask-area-places>summary::-webkit-details-marker{display:none}
.ask-area-places>summary:after{content:"";width:11px;height:11px;flex-shrink:0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 7px 6px;transition:transform .18s}
.ask-area-places[open]>summary:after{transform:rotate(225deg);margin-bottom:0}
.ask-area-places .ask-area-place-list{columns:4;column-gap:32px;list-style:none;padding:10px 0 0;margin:0;max-width:none}
.ask-area-place-list>li{margin:0!important;padding:0;break-inside:avoid}
.ask-area-place-list a{display:flex;align-items:center;min-height:44px;padding:7px 0;font-size:15px;text-decoration:none;line-height:1.4}
.ask-area-place-list a:hover{color:var(--ask-navy);text-decoration:underline}
.ask-region-copy .ask-region-exceptions{max-width:410px}
@media(max-width:1000px){.ask-area-places .ask-area-place-list{columns:3}}
@media(max-width:800px){.ask-area-places .ask-area-place-list{columns:2}.ask-region-section .ask-native-map.ask-area-map{max-width:490px}}
@media(max-width:599px){
 .ask-area-pin>:is(a,.ask-area-marker)>span{font-size:11px;padding:6px 7px}
 .ask-area-pin.is-featured:not(.ask-area-pin-maastricht):not(.ask-area-pin-amsterdam):not(.ask-area-pin-eindhoven)>:is(a,.ask-area-marker)>span{opacity:0}
 .ask-area-pin.is-featured:is(:hover,:focus-within)>:is(a,.ask-area-marker)>span{opacity:1}
 .ask-area-pin-rotterdam>:is(a,.ask-area-marker)>span,.ask-area-pin-den-haag>:is(a,.ask-area-marker)>span{right:calc(100% + 1px)}
 .ask-area-places{margin-top:18px}
 .ask-area-places .ask-area-place-list{column-gap:20px}
 .ask-area-place-list a{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.ask-area-pin>:is(a,.ask-area-marker)>span,.ask-area-places>summary:after{transition:none}}
.editor-styles-wrapper .ask-area-map .ask-area-pin{position:absolute!important}
.editor-styles-wrapper .ask-area-place-list{columns:3}
.ask-area-pin.is-featured>:is(a,.ask-area-marker)>span,.ask-area-pin:is(:hover,:focus-within)>:is(a,.ask-area-marker)>span{pointer-events:auto}
@media(max-width:599px){
 .ask-area-pin.is-featured:not(.ask-area-pin-maastricht):not(.ask-area-pin-amsterdam):not(.ask-area-pin-eindhoven)>:is(a,.ask-area-marker)>span{pointer-events:none}
 .ask-area-pin.is-featured:is(:hover,:focus-within)>:is(a,.ask-area-marker)>span{pointer-events:auto}
 .ask-area-pin:is(.ask-area-pin-maastricht,.ask-area-pin-amsterdam,.ask-area-pin-eindhoven)>:is(a,.ask-area-marker)>span{display:flex;align-items:center;min-height:44px}
}

/* Keep the three permanent city labels comfortably clickable at every size. */
.ask-area-pin:is(.ask-area-pin-maastricht,.ask-area-pin-amsterdam,.ask-area-pin-eindhoven)>a>span{display:flex;align-items:center;min-height:44px}