/* The page intro, fonts, navigation, cards and links come from the common site
   styles. These rules cover the itinerary controls, stop list and route map. */
.page-day-guides [hidden] { display: none !important; }
.dg-planner-link { margin-bottom: 38px; }
.page-day-guides .page-intro h1 { text-wrap: balance; }
.page-day-guides .page-intro .dg-facts {
  margin-top: 13px;
  font-size: 12px;
  font-weight: 600;
  color: #425f70;
}
.dg-toolbar, .dg-filters, .dg-practical, .dg-map-tools, .dg-legend, .dg-zoom-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.dg-toolbar { justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.dg-filters select, .page-day-guides .page-links button, .dg-map-tools button {
  padding: 7px 14px;
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
  color: #345669;
  border: 1px solid #d3dfe4;
  border-radius: 24px;
  background: #fff;
  cursor: pointer;
}
.dg-filters select { min-height: 38px; }
.page-day-guides .page-links button { font-size: 10px; }
.dg-map-tools button { font-size: 11px; min-height: 34px; }
.dg-map-tools button:hover, .page-day-guides .page-links button:hover { background: #e5f0f3; }
.dg-map-tools button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.dg-plain-button { background: transparent; cursor: pointer; padding: 8px; }
.dg-count { color: #4f6876; font-size: 12px; }
.dg-card { position: relative; }
.dg-card .card-action::after { content: ""; position: absolute; inset: 0; }
.dg-card:focus-within { outline: 3px solid #e5b555; outline-offset: 3px; }
.dg-card .meta { font-size: 12px; color: #4f6876; margin: auto 0 9px; }
.page-day-guides .dg-card .card-action { margin-top: 0; }
.dg-noresult { text-align: center; padding: 20px 0 35px; }
.dg-noresult p { margin-bottom: 6px; }
.dg-practical { justify-content: center; gap: 12px 24px; }
.inner-page .dg-footnote, .dg-place-photo figcaption, .dg-attribution {
  font-size: 11px;
  line-height: 1.6;
  color: #546b79;
}
.dg-footnote a, .dg-attribution a, .dg-place-photo figcaption a { text-decoration: underline; }
.inner-page .dg-footnote + .dg-footnote { margin-top: 5px; }
.page-day-guides .dg-itinerary { padding-block: 48px; }
.dg-reader { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: clamp(28px,5vw,68px); }
.dg-reader h2 { margin: 0; }
.inner-page .dg-start { margin: 10px 0 24px; }
.dg-steps { list-style: none; margin: 0 0 20px; padding: 0; }
.dg-step { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; padding: 19px 0; border-top: 1px solid var(--line); }
.dg-step h3, .dg-tips h3 { font-size: 20px; line-height: 1.3; }
.inner-page .dg-step p, .inner-page .dg-tips p { margin: 7px 0; }
.dg-step .text-link { display: inline-block; margin-top: 2px; }
.dg-num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #143e56;
}
.dg-step:target .dg-num { background: #246f91; outline: 2px solid #9dc2d1; outline-offset: 2px; }
.dg-step:focus-visible { outline: 2px solid #527e93; outline-offset: 3px; }
.dg-place-photo { margin: 17px 0 0; }
.dg-place-photo img { width: 100%; height: auto; aspect-ratio: 2.35; border-radius: 8px; }
.dg-place-photo figcaption { margin-top: 4px; }
.dg-map-card { margin: 0 0 17px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; }
.dg-map-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 13px; gap: 8px; background: #f5f7f8; }
.dg-map-head h3 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.dg-map-svg { display: block; height: auto; width: 100%; }
.dg-marker { cursor: pointer; }
.dg-marker:hover circle, .dg-marker:focus circle { stroke: #e5b555; stroke-width: 4px; }
.dg-map-card.facilities-on .dg-facilities { display: block !important; }
.dg-map-card figcaption { padding: 9px 13px; }
.dg-legend { gap: 8px 14px; font-size: 11px; color: #354f5e; }
.dg-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dg-line-key { width: 18px; border-top: 3px solid #246f91; }
.dg-line-key.back { border-top: 3px dotted #526472; }
.dg-line-key.car { border-top: 3px dashed #a2522e; }
.dg-attribution { margin: 4px 0 0; }
.dg-dir { border-block: 1px solid var(--line); }
.dg-dir summary { color: var(--ink); font-weight: 650; cursor: pointer; padding: 13px 0; }
.dg-dir ul { list-style: none; margin: 0; padding: 0 0 8px; }
.dg-dir li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; }
.dg-dir a { font-size: 13px; color: #2b708e; }
.dg-dir a:hover, .dg-dir a:focus-visible { text-decoration: underline; }
.dg-dir li small { flex-shrink: 0; font-size: 11px; color: #566a76; }
.dg-tips { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px,6vw,76px); max-width: 890px; margin: auto; }
.dg-share-status, .dg-share-fallback { display: block; text-align: center; font-size: 13px; }
.dg-share-status:not(:empty), .dg-share-fallback { padding: 10px; }
.dg-share-fallback input { width: min(75vw,390px); }
.dg-map-dialog {
  position: fixed; inset: 0; margin: auto;
  width: min(960px,calc(100% - 24px)); max-width: none; max-height: 95dvh;
  border: 1px solid var(--line); border-radius: 9px; padding: 0;
  background: #fff; color: var(--ink); box-shadow: 0 12px 45px #051c2e36;
}
.dg-map-dialog::backdrop { background: #051c2eb0; }
.dg-zoom-bar { justify-content: space-between; padding: 10px 14px; }
.dg-zoom-bar > div { display: flex; gap: 6px; }
.dg-zoom-bar button { border: 1px solid var(--line); border-radius: 6px; background: #f5f7f8; min-width: 36px; min-height: 36px; font: inherit; }
.dg-zoom-bar .dg-close-map { font-size: 13px; padding-inline: 10px; }
.dg-zoom-bar button:disabled { opacity: .45; }
.dg-zoom-scroll { width: 100%; overflow: auto; max-height: 70dvh; overscroll-behavior: contain; }
.dg-zoom-scroll .dg-map-svg { max-width: none; }
.inner-page .dg-map-dialog .dg-attribution { font-size: 11px; padding: 8px 14px; margin: 0; }

@media (min-width: 620px) and (max-width: 980px) {
  .dg-catalog .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .dg-planner-link { margin-bottom: 25px; }
  .page-day-guides .dg-itinerary { padding-block: 32px; }
  .dg-reader, .dg-tips { grid-template-columns: minmax(0,1fr); }
  .dg-reader { gap: 34px; }
  .dg-toolbar { align-items: start; }
  .page-day-guides .page-links { flex-wrap: wrap; justify-content: center; gap: 7px; }
  .dg-toolbar .dg-count { display: block; font-size: 11px; }
  .dg-map-tools button { min-height: 40px; }
  .dg-dir li { padding-block: 8px; }
  .dg-step { gap: 9px; padding: 17px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.page-day-guides) { scroll-behavior: auto; }
  .page-day-guides .card { transition: none; }
}