/* ==========================================================================
   Commute time widget on the Contact page.
   Adapted from Google's Maps Platform "Commutes" quick builder (Apache 2.0,
   Copyright 2023 Google LLC). Structure and behaviour are Google's; type is
   the site's body face and the widget is boxed to a fixed height so it sits
   in the page rather than filling the viewport.
   ========================================================================== */

.commutes-frame {
  height: 36rem;
  min-height: 24rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-photo);
  overflow: hidden;
  background: var(--white);
}

.commutes {
  align-content: stretch;
  color: #202124;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-family: var(--font-body);
  height: 100%;
  min-height: 256px;
  min-width: 0;
  overflow: auto;
  width: 100%;
}

.commutes-info {
  flex: 0 0 110px;
  max-width: 100%;
  overflow: hidden;
  padding-inline: 8px;
}

.commutes-initial-state {
  border-radius: 8px;
  border: 1px solid #dadce0;
  display: flex;
  height: 98px;
  margin-top: 8px;
  padding: 0 16px;
}
.commutes-initial-state svg { align-self: center; }
.commutes-initial-state .description { align-self: center; flex-grow: 1; padding: 0 16px; }
.commutes-initial-state .description .heading { font: 500 20px/28px var(--font-display); letter-spacing: -0.01em; margin: 0; color: var(--navy-800); }
.commutes-initial-state .description p { color: #5f6368; font: 13px/20px var(--font-body); margin: 0; }
.commutes-initial-state .add-button {
  align-self: center;
  background-color: var(--blue-600);
  border-color: var(--blue-600);
  border-radius: 999rem;
  border-style: solid;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  fill: #fff;
  padding: 8px 16px 8px 8px;
  white-space: nowrap;
}
.commutes-initial-state .add-button .label { font: 600 14px/24px var(--font-body); padding-left: 8px; }

@media (max-width: 535px) {
  .commutes-initial-state svg { display: none; }
  .commutes-initial-state .description { padding-left: 0; }
  .commutes-initial-state .description .heading { font-weight: 600; font-size: 15px; line-height: 24px; }
}

.commutes-destinations { display: none; position: relative; width: 100%; }
.commutes-destinations:hover .visible { display: block; }
.commutes-destinations .destinations-container {
  display: flex;
  overflow-x: auto;
  padding: 8px 8px 4px 8px;
  white-space: nowrap;
  width: 100%;
}
.commutes-destinations .destinations-container::-webkit-scrollbar { display: none; }
.commutes-destinations .destination-list { display: flex; flex-grow: 1; }
.commutes-destinations .right-control,
.commutes-destinations .left-control {
  background-color: #fff;
  border-radius: 40px;
  border-style: none;
  bottom: 35px;
  box-shadow: 0 2px 3px 0 rgb(60 64 67 / 30%), 0 6px 10px 4px rgb(60 64 67 / 15%);
  cursor: pointer;
  fill: #616161;
  height: 40px;
  padding: 8px;
  position: absolute;
  width: 40px;
  z-index: 100;
}
.commutes-destinations .right-control:hover,
.commutes-destinations .left-control:hover { background-color: #f1f3f4; }
.commutes-destinations .left-control { left: 16px; }
.commutes-destinations .right-control { right: 16px; }
.commutes-destinations .add-button {
  align-items: center;
  background-color: #e8f0fe;
  border-radius: 8px;
  border-color: #e8f0fe;
  border-style: solid;
  color: #1967d2;
  cursor: pointer;
  display: flex;
  fill: #1967d2;
  flex-direction: column;
  flex-grow: 1;
  font-weight: bold;
  gap: 4px;
  justify-content: center;
  min-width: 156px;
  padding: 20px 16px;
}
.commutes-destinations .add-button:hover { background-color: #d2e3fc; border-color: #d2e3fc; color: #185abc; fill: #185abc; }
.commutes-destinations .destination-container { cursor: pointer; display: flex; flex: 1 1 0; position: relative; }
.commutes-destinations .destination {
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  color: #5f6368;
  fill: #5f6368;
  height: 72px;
  justify-content: space-between;
  margin-right: 8px;
  min-width: 256px;
  overflow: hidden;
  padding: 12px;
  position: relative;
  width: 100%;
}
.commutes-destinations .active:after {
  background-color: #4285f4;
  content: '';
  display: block;
  height: 4px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.commutes-destinations .active + .destination-controls .directions-button { fill: #4285f4; }
.commutes-destinations .active + .destination-controls .edit-button { opacity: 1; }
.commutes-destinations .active .metadata .location-marker { background-color: #fce8e6; color: #d93025; }
.commutes-destinations .destination-container:hover,
.commutes-destinations .destination-container:focus-within { background-color: #f8f9fa; }
.commutes-destinations .destination-container:hover .edit-button,
.commutes-destinations .destination-container:focus-within .edit-button { opacity: 1; }
.commutes-destinations .destination .destination-content { font-size: 12px; line-height: 20px; overflow: hidden; }
.commutes-destinations .destination .metadata { align-items: center; display: flex; margin-bottom: 4px; gap: 4px; }
.commutes-destinations .destination-container svg { height: 18px; width: 18px; }
.commutes-destinations .destination .location-marker {
  background-color: #f1f3f4;
  border-radius: 8px;
  color: #616161;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
  width: 16px;
}
.commutes-destinations .destination .address { margin-bottom: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commutes-destinations .destination .address abbr { text-decoration: none; }
.commutes-destinations .destination .destination-eta { color: #202124; font-weight: bold; font-size: 22px; line-height: 28px; }
.commutes-destinations .destination-container .destination-controls {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  min-width: 70px;
  position: absolute;
  right: 20px;
  text-align: right;
  top: 12px;
  white-space: nowrap;
}
.commutes-destinations .destination-container .directions-button {
  align-items: center;
  background-color: #fff;
  border-radius: 32px;
  border: 1px solid #dadce0;
  cursor: pointer;
  display: flex;
  fill: #5f6368;
  height: 32px;
  justify-content: center;
  margin: 0;
  width: 34px;
}
.commutes-destinations .destination-container .directions-button:hover { background-color: #e8f0fe; fill: #4285f4; }
.commutes-destinations .destination-container .edit-button {
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid #dadce0;
  opacity: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 22px;
  margin: 8px 0 0 0;
  padding: 3px 12px 3px 5px;
  fill: #616161;
  color: #616161;
  cursor: pointer;
}
.commutes-destinations .destination-container .edit-button svg { display: inline-block; font-size: 20px; line-height: 20px; width: 20px; vertical-align: middle; }
.commutes-destinations .destination-container .edit-button:hover { background-color: #f1f3f4; }

.commutes-map { flex: 1; overflow: hidden; position: relative; width: 100%; }
.commutes-map .map-view { background-color: rgb(229, 227, 223); height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

.commutes-modal-container {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.commutes-modal {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12);
  height: 256px;
  position: absolute;
  width: 360px;
  max-width: calc(100vw - 2rem);
}
.commutes-modal .content { padding: 24px 24px 8px; display: flex; flex-direction: column; gap: 16px; }
.commutes-modal .heading { font: 500 22px/32px var(--font-display); letter-spacing: -0.01em; margin: 0; color: var(--navy-800); }
.commutes-modal input { font: 16px/24px var(--font-body); padding: 10px; box-sizing: border-box; width: 100%; }
.commutes-modal .error { background-color: #fce4e4; border: 1px solid #c03; }
.commutes-modal .error-message { color: #c03; display: inline-block; font: 12px/14px var(--font-body); margin: 0 0 5px; }
.commutes-modal .travel-modes { display: flex; flex-direction: row; height: 40px; margin-bottom: 12px; padding: 0; width: 100%; }
.commutes-modal .travel-modes [type=radio] { height: 0; opacity: 0; position: absolute; width: 0; }
.commutes-modal .travel-modes label {
  align-items: center;
  border: solid #dadce0;
  border-width: 1px 0.031em;
  cursor: pointer;
  display: inline-flex;
  fill: #5f6368;
  flex: 1;
  justify-content: center;
  padding: 6px;
  position: relative;
  transition: background 0.5s, fill 0.5s;
}
.commutes-modal .travel-modes label:hover { background-color: #f1f3f4; }
.commutes-modal .travel-modes svg { height: 24px; width: 24px; }
.commutes-modal .travel-modes .left-label { border-left-width: 1px; border-radius: 4px 0 0 4px; }
.commutes-modal .travel-modes .right-label { border-radius: 0 4px 4px 0; border-right-width: 1px; }
.commutes-modal .travel-modes input[type=radio]:checked+label { background: #e8f0fe; fill: #1967d2; }
.commutes-modal .travel-modes input[type=radio]:focus-visible+label { outline: 2px solid Highlight; outline: 2px solid -webkit-focus-ring-color; outline-offset: -2px; }
.commutes-modal .modal-action-bar { display: flex; justify-content: flex-end; }
.commutes-modal .modal-action-bar button { background: #ffff; border: none; cursor: pointer; font-size: 14px; font-weight: bold; line-height: 32px; font-family: var(--font-body); }
.commutes-modal .modal-action-bar .delete-destination-button { color: #c5221f; left: 18px; position: absolute; }
.commutes-modal .modal-action-bar .cancel-button { color: #0000008a; }
.commutes-modal .modal-action-bar .add-destination-button,
.commutes-modal .modal-action-bar .edit-destination-button { color: #1a73e8; }

.commutes-hidden { display: none; }

/* Google's markup toggles these with a plain "hide" class; keep it scoped. */
.commutes .hide,
.commutes-modal-container .hide,
svg.hide { display: none; }