/* --- The route chapter ------------------------------------------------------
   Map on the left, the stops on the right as a table of contents for the
   trip. The theme wraps this in its full-width band and supplies the heading
   and the closing invitation; everything inside .ita-route is the plugin's. */
.ita-route{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr);gap:clamp(28px,4vw,48px);align-items:start}
@media (max-width:900px){.ita-route{grid-template-columns:1fr;gap:26px}}
.ita-route__map{min-width:0}

/* The map is never cropped and never transformed. Its height is capped so a
   portrait country does not become a slab; under the cap the column width
   wins, so a landscape map fills its column. */
.ita-map__root{width:100%;min-width:0}
.ita-map__root .ita-map{max-width:calc(min(78vh, 760px) * var(--ita-aspect, 1));margin:0}

/* Container query unit cqw drives every size, so type tracks the map's
   rendered width rather than the viewport. */
.ita-map{container-type:inline-size;position:relative;width:100%;overflow:hidden;
  background:#EFE8DE;box-shadow:0 8px 24px rgba(18,41,28,.07);user-select:none}
/* ita.css sets img{max-width:100%}; the artwork fills its box exactly. */
.ita-map__base{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;
  -webkit-user-drag:none}

/* --- The route line ---------------------------------------------------------
   One dotted path per leg, each behind a mask whose solid stroke is what
   animates -- so a leg draws itself while the dots keep their spacing. Legs
   ahead of the visitor's stop wait faintly on the paper. */
.ita-map__route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ita-map__leg{fill:none;stroke:#C9962E;stroke-width:var(--ita-sw,7);stroke-linecap:round;
  stroke-dasharray:var(--ita-d1,5) var(--ita-d2,13);
  opacity:.2;transition:opacity .3s ease}
.ita-map__leg.is-on{opacity:1}
.ita-map__wipe{fill:none;stroke:#fff;stroke-width:var(--ita-ww,44);stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .ita-map__wipe.is-drawing{animation:ita-map-draw .9s cubic-bezier(.22,.61,.36,1) both}
  @keyframes ita-map-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
}

/* --- Pins ------------------------------------------------------------------ */
.ita-map__pin{position:absolute;transform:translate(-50%,-50%);width:0;height:0}
/* Each pin is its own stacking context, so raise the whole selected pin or a
   later pin in the DOM paints straight over an open callout. */
.ita-map__pin.is-on{z-index:6}
.ita-map__hit{position:absolute;transform:translate(-50%,-50%);appearance:none;background:transparent;
  border:0;padding:0;cursor:pointer;display:block;border-radius:50%;
  width:max(28px,5.4cqw);height:max(28px,5.4cqw)}
.ita-map__hit:focus-visible{outline:3px solid #C9962E;outline-offset:2px}

.ita-map__dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(11px,2.3cqw);height:max(11px,2.3cqw);border-radius:50%;background:#C9962E;
  box-shadow:0 0 0 max(2px,.4cqw) rgba(253,252,245,.95);transition:transform .18s ease,background .18s ease}
.ita-map__hit:hover .ita-map__dot,
.ita-map__pin.is-on .ita-map__dot{transform:translate(-50%,-50%) scale(1.5)}
.ita-map__pin.is-on .ita-map__dot{background:#1A4732;box-shadow:0 0 0 max(2px,.4cqw) #C9962E}
.ita-map__pin.is-ahead .ita-map__dot{background:#D8C79C}

.ita-map__num{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font:700 max(8px,1.3cqw)/1 'Source Sans 3',sans-serif;color:#FDFCF5;pointer-events:none;opacity:0}
.ita-map__pin.is-on .ita-map__num{opacity:1}

.ita-map__lab{position:absolute;top:calc(50% + var(--ita-ly,0cqw));transform:translateY(-50%);
  white-space:nowrap;pointer-events:none;
  font:600 max(9px,1.65cqw)/1 'Playfair Display',Georgia,serif;
  letter-spacing:.09em;text-transform:uppercase;color:#1A4732;
  text-shadow:0 1px 0 rgba(253,252,245,.95),0 0 5px rgba(253,252,245,.95);transition:color .2s ease}
.ita-map__lab--r{left:max(12px,2.2cqw)}
.ita-map__lab--l{right:max(12px,2.2cqw)}
.ita-map__pin.is-on .ita-map__lab{visibility:hidden}
.ita-map__pin.is-ahead .ita-map__lab{color:#8A8A80}

/* Selected stop announces itself on the artwork: day range above the name,
   anchored to its own dot. The pin is a zero-width box, so left:0 / right:0
   both resolve AT the dot -- which is what makes the edge clamping work. */
.ita-map__call{position:absolute;left:50%;bottom:max(16px,3cqw);transform:translateX(-50%);
  display:none;white-space:nowrap;text-align:center;pointer-events:none;z-index:4;
  background:rgba(253,252,245,.97);border:1px solid rgba(201,150,46,.5);
  padding:max(6px,1.05cqw) max(11px,1.9cqw);box-shadow:0 6px 20px rgba(18,41,28,.18)}
.ita-map__pin.is-on .ita-map__call{display:block}
.ita-map__call.is-left{left:0;transform:none;text-align:left}
.ita-map__call.is-right{left:auto;right:0;transform:none;text-align:right}
.ita-map__call.is-below{bottom:auto;top:max(16px,3cqw)}
.ita-map__call-day[hidden]{display:none}
.ita-map__call-day{display:block;font:700 max(7.5px,1.1cqw)/1 'Source Sans 3',sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:#C9962E;margin-bottom:max(3px,.5cqw)}
.ita-map__call-name{display:block;font:500 max(12px,2.05cqw)/1.1 'Playfair Display',Georgia,serif;
  color:#1A4732;letter-spacing:.01em}
@media (prefers-reduced-motion:no-preference){
  .ita-map__pin.is-on .ita-map__call{animation:ita-map-call .22s cubic-bezier(.22,.61,.36,1)}
  @keyframes ita-map-call{from{opacity:0;transform:translateX(-50%) translateY(4px)}}
  .ita-map__pin.is-on .ita-map__call.is-left,
  .ita-map__pin.is-on .ita-map__call.is-right{animation-name:ita-map-call-edge}
  @keyframes ita-map-call-edge{from{opacity:0;transform:translateY(4px)}}
}

/* Too tight to label: number the pins and let the stop list carry the names. */
.ita-map.is-dense .ita-map__lab{display:none}
.ita-map.is-dense .ita-map__num{opacity:1}
.ita-map.is-dense .ita-map__dot{width:max(14px,2.7cqw);height:max(14px,2.7cqw);background:#1A4732}
.ita-map.is-dense .ita-map__pin.is-ahead .ita-map__dot{background:#8FA596}
.ita-map.is-dense .ita-map__pin.is-on .ita-map__dot{background:#C9962E}
@container (max-width:380px){
  .ita-map__lab{display:none}
  .ita-map__num{opacity:1}
  .ita-map__dot{width:max(13px,2.6cqw);height:max(13px,2.6cqw)}
}

/* The one control on the artwork. */
.ita-map__expand{position:absolute;right:max(11px,1.9cqw);top:max(11px,1.9cqw);z-index:9;
  display:flex;align-items:center;gap:8px;appearance:none;cursor:pointer;color:#1A4732;
  border:1px solid rgba(26,71,50,.16);border-radius:999px;
  background:rgba(253,252,245,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 4px 16px rgba(18,41,28,.16);
  font:600 max(10px,1.2cqw)/1 'Source Sans 3',sans-serif;letter-spacing:.13em;
  text-transform:uppercase;padding:max(8px,1.15cqw) max(14px,2cqw);
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease}
.ita-map__expand svg{width:max(13px,1.6cqw);height:max(13px,1.6cqw);flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ita-map__expand:hover{background:#FDFCF5;box-shadow:0 6px 22px rgba(18,41,28,.24);transform:translateY(-1px)}
.ita-map__expand:focus-visible{outline:3px solid #C9962E;outline-offset:2px}
.ita-map__lb .ita-map__expand{display:none}
@container (max-width:420px){
  .ita-map__expand span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ita-map__expand{padding:max(8px,1.6cqw)}
}

/* --- The stepper --------------------------------------------------------- */
.ita-route__side{min-width:0}
.ita-route__steps{list-style:none;margin:0;padding:0;position:relative}
.ita-route__steps::before{content:"";position:absolute;left:15px;top:18px;bottom:18px;width:1px;background:rgba(26,71,50,.18)}
.ita-route__step{position:relative;padding:0 0 6px 46px}
.ita-route__mark{position:absolute;left:0;top:14px;width:31px;height:31px;border-radius:50%;
  border:1px solid rgba(26,71,50,.3);background:#F7F5EC;display:flex;align-items:center;justify-content:center;
  font:700 11px 'Source Sans 3',sans-serif;color:#1A4732;transition:background .2s,color .2s,transform .2s,border-color .2s}
.ita-route__step.is-done .ita-route__mark{background:#C9962E;border-color:#C9962E;color:#FDFCF5}
.ita-route__step.is-on .ita-route__mark{background:#1A4732;border-color:#1A4732;color:#FDFCF5;transform:scale(1.15)}
.ita-route__btn{appearance:none;background:none;border:0;padding:12px 0;margin:0;width:100%;
  display:flex;gap:14px;align-items:baseline;text-align:left;cursor:pointer;color:inherit;font:inherit}
.ita-route__btn:focus-visible{outline:3px solid #C9962E;outline-offset:2px}
.ita-route__place{font:500 21px 'Playfair Display',Georgia,serif;color:#1A4732;transition:color .2s}
.ita-route__btn:hover .ita-route__place{color:#C9962E}
.ita-route__step.is-ahead .ita-route__place{color:#8A8A80}
.ita-route__days{margin-left:auto;font:600 11px 'Source Sans 3',sans-serif;letter-spacing:1.5px;
  text-transform:uppercase;color:#44604C;white-space:nowrap}
.ita-route__step.is-ahead .ita-route__days{color:#A9A9A0}
/* The open stop offers the way down to its days; the days' own words stay
   in the day-by-day below, said once. */
.ita-route__prose{padding:0 0 16px;font:400 16px/1.65 'Source Sans 3',sans-serif;color:#44604C}
.ita-route__prose[hidden]{display:none}
.ita-route__prose a{display:inline-block;color:#1A4732;font-weight:600;text-decoration:none;
  border-bottom:1px solid #C9962E}
.ita-route__prose a:hover{color:#C9962E}
@media (prefers-reduced-motion:no-preference){
  .ita-route__prose{animation:ita-route-fade .3s ease}
  @keyframes ita-route-fade{from{opacity:0}}
}
@media (max-width:520px){
  .ita-route{gap:18px}
  .ita-route__map,.ita-map__root{display:flex;justify-content:center}
  .ita-map__root .ita-map{max-width:calc(min(56svh, 520px) * var(--ita-aspect, 1));margin:0 auto}
  .ita-route__steps::before{left:12px;top:15px;bottom:15px}
  .ita-route__step{padding:0 0 3px 38px}
  .ita-route__mark{left:0;top:10px;width:26px;height:26px;font-size:10px}
  .ita-route__place{font-size:17px;line-height:1.2}
  .ita-route__days{font-size:9.5px;letter-spacing:1.2px}
  .ita-route__btn{flex-wrap:wrap;gap:3px 10px;padding:9px 0}
  .ita-route__days{margin-left:0;width:100%}
  .ita-route__prose{padding-bottom:12px;font-size:14px;line-height:1.55}
  .ita-route__nav{gap:10px;margin-top:12px;padding-top:12px}
  .ita-route__count,.ita-route__play{font-size:10px;letter-spacing:1.5px}
  .ita-route__btns button{width:36px;height:36px}
}

.ita-route__nav{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(26,71,50,.15)}
.ita-route__count{font:600 11px 'Source Sans 3',sans-serif;letter-spacing:2.2px;text-transform:uppercase;color:#44604C}
.ita-route__play{appearance:none;background:none;border:0;padding:0 0 2px;margin:0;cursor:pointer;
  font:600 11px 'Source Sans 3',sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:#1A4732;
  border-bottom:1px solid #C9962E}
.ita-route__play:hover{color:#C9962E}
.ita-route__play:focus-visible{outline:3px solid #C9962E;outline-offset:3px}
.ita-route__btns{margin-left:auto;display:flex;gap:8px}
.ita-route__btns button{appearance:none;width:40px;height:40px;border-radius:50%;padding:0;margin:0;
  border:1px solid rgba(26,71,50,.3);background:transparent;color:#1A4732;display:flex;align-items:center;
  justify-content:center;font-size:17px;line-height:1;cursor:pointer;transition:background .18s,color .18s}
.ita-route__btns button:hover:not(:disabled){background:#1A4732;color:#FDFCF5}
.ita-route__btns button:disabled{opacity:.3;cursor:not-allowed}
.ita-route__btns button:focus-visible{outline:3px solid #C9962E;outline-offset:2px}

@media(prefers-reduced-motion:reduce){.ita-route *{transition:none!important;animation:none!important}}

/* --- Fullscreen ------------------------------------------------------------ */
.ita-map__lb[hidden]{display:none}
/* Logged in, the WordPress admin bar is fixed over the top of everything. The
   variable is 0 for every visitor who is not signed in. */
.ita-map__lb{position:fixed;inset:var(--wp-admin--admin-bar--height,0px) 0 0 0;z-index:10020;
  display:flex;flex-direction:column;background:#0E1F16;opacity:0;transition:opacity .26s ease}
.ita-map__lb.is-open{opacity:1}
.ita-map__lb-bar,.ita-map__lb-body,.ita-map__lb-foot{transform:translateY(10px);opacity:0;
  transition:transform .3s cubic-bezier(.22,.61,.36,1) .04s,opacity .3s ease .04s}
.ita-map__lb.is-open .ita-map__lb-bar,.ita-map__lb.is-open .ita-map__lb-body,
.ita-map__lb.is-open .ita-map__lb-foot{transform:none;opacity:1}
.ita-map__lb-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(5px,0.7vh,10px) clamp(14px,3vw,32px);border-bottom:1px solid rgba(253,252,245,.14)}
.ita-map__lb-title{font:600 10.5px 'Source Sans 3',sans-serif;letter-spacing:2.6px;
  text-transform:uppercase;color:rgba(253,252,245,.6)}
.ita-map__lb-bar button{appearance:none;min-width:40px;height:40px;border:1px solid rgba(253,252,245,.35);
  background:rgba(253,252,245,.08);color:#FDFCF5;font-size:26px;line-height:1;cursor:pointer}
.ita-map__lb-bar button:hover{background:rgba(253,252,245,.16)}
.ita-map__lb-bar button:focus-visible{outline:3px solid #E5B54B;outline-offset:2px}
.ita-map__lb-body{flex:1;min-height:0;display:flex;align-items:center;gap:clamp(4px,1vw,14px);
  padding:0 clamp(4px,1vw,16px)}
.ita-map__lb-stage{flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,1.7vw,22px)}
.ita-map__lb-stage .ita-map{flex:none;max-width:100%;max-height:100%;margin:0}
.ita-map__lb-foot{flex:none;text-align:center;padding:8px 16px clamp(12px,2vh,20px);
  font:600 11px 'Source Sans 3',sans-serif;letter-spacing:2.2px;text-transform:uppercase;color:rgba(253,252,245,.6)}
.ita-map__lb-arrow{flex:none;appearance:none;width:clamp(38px,4vw,54px);height:clamp(38px,4vw,54px);
  border-radius:50%;border:1px solid rgba(253,252,245,.28);background:rgba(253,252,245,.07);
  color:#FDFCF5;font:300 clamp(24px,2.6vw,32px)/1 Georgia,serif;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.ita-map__lb-arrow:hover:not(:disabled){background:rgba(253,252,245,.18);border-color:rgba(253,252,245,.6)}
.ita-map__lb-arrow:disabled{opacity:.25;cursor:not-allowed}
.ita-map__lb-arrow--prev:hover:not(:disabled){transform:translateX(-2px)}
.ita-map__lb-arrow--next:hover:not(:disabled){transform:translateX(2px)}
.ita-map__lb-arrow:focus-visible{outline:3px solid #E5B54B;outline-offset:2px}
@media (max-width:640px){
  .ita-map__lb-body{padding:0 4px}
  .ita-map__lb-arrow{width:38px;height:38px;font-size:24px}
  .ita-map__lb-stage{padding:8px}
}
