@charset "UTF-8";
/* /access/ (page-access.php): the venue tabs are the venue pages' .avenue__select (outline.css); under them the usual
   subpage box and title, then per venue the address, the Google map and the ways to get there as <details> blocks.
   Loaded on this page only, versioned by filemtime. */

section#access .title h2 {
  background: url(../../images/access/title.png) 0 0 no-repeat;
}

/* Without access.js both venues show, one after the other. With it the first may be hidden: no gap then. */
.tcm-access__venue:not([hidden]) + .tcm-access__venue {
  margin-top: 50px;
}

.tcm-access__address {
  margin-bottom: 15px;
  font-weight: bold;
}

/* A 2:1 frame (4:3 on phones) from padding-top, not aspect-ratio: iOS 14 and older have no aspect-ratio and would
   collapse the frame (the top-page video, 2026-10-09). */
.tcm-access__map {
  position: relative;
  height: 0;
  padding-top: 50%;
}
.tcm-access__map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The venue pages' red Google Map button (outline.css section#outline .google). */
.tcm-access__maplink {
  margin-top: 12px;
}
.tcm-access__maplink a {
  display: inline-block;
  padding: 5px 20px;
  background: #c41316;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}

.tcm-access__modes {
  margin-top: 30px;
  border-bottom: 2px solid #c3ae59;
}
.tcm-access__mode {
  border-top: 2px solid #c3ae59;
}
.tcm-access__mode summary {
  position: relative;
  display: block;
  padding: 16px 56px 16px 4px;
  color: #20681a;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.tcm-access__mode summary::-webkit-details-marker {
  display: none;
}
/* The +/− box, drawn rather than typed so it does not depend on the font. */
.tcm-access__mode summary::after {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  box-sizing: border-box;
  border: 2px solid #c41316;
  border-radius: 6px;
  background:
    linear-gradient(#c41316, #c41316) center / 14px 2px no-repeat,
    linear-gradient(#c41316, #c41316) center / 2px 14px no-repeat;
  content: "";
}
.tcm-access__mode[open] summary::after {
  background: linear-gradient(#c41316, #c41316) center / 14px 2px no-repeat;
}
.tcm-access__body {
  padding: 0 4px 20px;
}
.tcm-access__lines li {
  position: relative;
  padding-left: 1.3em;
  line-height: 1.8;
}
.tcm-access__lines li::before {
  position: absolute;
  left: 0;
  content: "●";
}
.tcm-access__note {
  margin-top: 8px;
}

@media (max-width: 678px) {
  .tcm-access__map {
    padding-top: 75%;
  }
  .tcm-access__mode summary {
    padding: 14px 46px 14px 2px;
    font-size: 16px;
  }
  .tcm-access__mode summary::after {
    width: 26px;
    height: 26px;
    margin-top: -13px;
  }
}