/* Social Wall: the fixed "Connect" bar from the crownbridge.com homepage.
   Sizes follow the old site (they scale with the screen up to 1600px). */

.cbt-sw {
  position: fixed;
  z-index: 990;
  top: 0;
  right: min(2.75vw, 44px);
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cbt-sw.cbt-sw--left { right: auto; left: min(2.75vw, 44px); }

/* Out of the way while the footer is on screen. */
.cbt-sw.is-hidden { opacity: 0; visibility: hidden; }

.cbt-sw .cbt-sw__inner { position: relative; font-size: 0; line-height: 1; }
.cbt-sw.cbt-sw--shadow .cbt-sw__inner { filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.7)); }

.cbt-sw ul.cbt-sw__list { margin: 0; padding: 0; list-style: none; text-align: center; }
.cbt-sw ul.cbt-sw__list li.cbt-sw__item { margin: 0 0 min(1.125vw, 18px); padding: 0; list-style: none; line-height: 1; }
.cbt-sw ul.cbt-sw__list li.cbt-sw__item:last-child { margin-bottom: 0; }
.cbt-sw ul.cbt-sw__list li.cbt-sw__item::before { display: none; }

/* Bigger gap between the phone / email and the social icons (the margins
   collapse, so this is the whole gap). */
.cbt-sw ul.cbt-sw__list li.cbt-sw__item--contact + li.cbt-sw__item:not(.cbt-sw__item--contact) {
  margin-top: min(2.938vw, 47px);
}

/* Line boxes as tall as the old icon font's, so the spacing matches. */
.cbt-sw .cbt-sw__item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.11em;
  vertical-align: top;
  font-size: min(1.375vw, 22px);
  line-height: 1;
  color: var(--cbt-sw-color, #fff);
  text-decoration: none;
  box-shadow: none;
  pointer-events: auto;
  transition: color 0.2s ease;
}
.cbt-sw .cbt-sw__item--contact a { font-size: min(1vw, 16px); height: 1.05em; }
.cbt-sw .cbt-sw__item a:hover,
.cbt-sw .cbt-sw__item a:focus-visible { color: var(--cbt-sw-hover, #737373); }

.cbt-sw .cbt-sw__icon {
  display: block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--cbt-sw-icon) center / contain no-repeat;
  mask: var(--cbt-sw-icon) center / contain no-repeat;
}
.cbt-sw .cbt-sw__item--contact .cbt-sw__icon { height: 1.05em; }
.cbt-sw .cbt-sw__item--email .cbt-sw__icon { width: 1.4em; height: 1.4em; }

/* Silver phone and envelope, as on the old homepage. */
.cbt-sw.cbt-sw--gradient .cbt-sw__item--contact .cbt-sw__icon { background: linear-gradient(#eee 45%, #3a3a3a 94%); }
.cbt-sw.cbt-sw--gradient .cbt-sw__item--contact a:hover .cbt-sw__icon,
.cbt-sw.cbt-sw--gradient .cbt-sw__item--contact a:focus-visible .cbt-sw__icon { background: linear-gradient(#737373 45%, #3a3a3a 94%); }

/* "CONNECT", turned on its side, with a thin line after it. */
.cbt-sw .cbt-sw__label {
  position: absolute;
  left: 50%;
  top: calc(100% + min(0.563vw, 9px));
  transform-origin: left;
  transform: rotate(90deg);
  display: inline-block;
  white-space: nowrap;
  color: var(--cbt-sw-color, #fff);
  text-transform: uppercase;
  font-size: min(0.688vw, 11px);
  line-height: 1;
  letter-spacing: 0.5em;
}
.cbt-sw .cbt-sw__label::after {
  content: '';
  display: block;
  width: min(5.25vw, 84px);
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% + min(0.375vw, 6px));
  margin: auto 0;
}

/* Tablets and phones: hidden, like the old site, unless "Show on phones" is on. */
@media (max-width: 991px) {
  .cbt-sw:not(.cbt-sw--phones) { display: none; }

  .cbt-sw.cbt-sw--phones { right: 8px; }
  .cbt-sw.cbt-sw--phones.cbt-sw--left { right: auto; left: 8px; }
  .cbt-sw.cbt-sw--phones ul.cbt-sw__list li.cbt-sw__item { margin-bottom: 14px; }
  .cbt-sw.cbt-sw--phones ul.cbt-sw__list li.cbt-sw__item:last-child { margin-bottom: 0; }
  .cbt-sw.cbt-sw--phones ul.cbt-sw__list li.cbt-sw__item--contact + li.cbt-sw__item:not(.cbt-sw__item--contact) { margin-top: 30px; }
  .cbt-sw.cbt-sw--phones .cbt-sw__item a { font-size: 18px; }
  .cbt-sw.cbt-sw--phones .cbt-sw__item--contact a { font-size: 14px; }
  .cbt-sw.cbt-sw--phones .cbt-sw__label { font-size: 9px; top: calc(100% + 8px); }
  .cbt-sw.cbt-sw--phones .cbt-sw__label::after { width: 40px; left: calc(100% + 4px); }
}

@media (prefers-reduced-motion: reduce) {
  .cbt-sw, .cbt-sw .cbt-sw__item a { transition: none; }
}