/*
  Static homepage styling for The Isaacs.
  Based on the crawled Joomla template at templates/isaacs/css/layout.css
  plus the live homepage widget overrides from the rendered crawl.
*/

:root {
  --site-black: #000000;
  --site-white: #ffffff;
  --site-light: #f9f9f9;
  --site-blue-light: #dbe6f0;
  --site-gray: #686868;
  --site-gray-dark: #3b3b3b;
  --site-link-hover: #b3b3b3;
  --site-focus: #90c7ff;
  --site-shell: 1110px;
}

body {
  background: var(--site-black);
  color: var(--site-white);
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.625;
  text-rendering: optimizeLegibility;
}

main {
  background: var(--site-white);
  color: var(--site-black);
}

h1,
h2,
h3,
h4 {
  color: var(--site-black);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

h1,
.news-section h2 {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
}

a:not(.btn) {
  color: var(--site-black);
  text-decoration: none;
}

a:not(.btn):hover {
  color: #333333;
}

img,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input {
  color: #333333;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
.nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(144, 199, 255, 0.45);
  outline: 2px solid var(--site-focus);
  outline-offset: 3px;
}

.site-shell {
  max-width: calc(var(--site-shell) + 1.5rem);
}

.skip-link {
  background: var(--site-white);
  border: 2px solid var(--site-focus);
  color: var(--site-black);
  left: 1rem;
  padding: 0.5rem 0.75rem;
  position: absolute;
  top: 1rem;
  transform: translateY(-150%);
  transition: transform 160ms ease;
  z-index: 2000;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  background: var(--site-black);
}

.navbar {
  padding: 0.65rem 0 1.2rem;
}

.site-logo {
  max-width: 18.75rem;
  padding: 0;
}

.site-logo img {
  padding: 0;
  width: 100%;
}

.navbg {
  flex: 1 1 auto;
  padding-top: 0.2rem;
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.55);
}

.nav-item {
  color: var(--site-white);
  font-size: 1rem;
  padding-left: 0;
}

.navbar .nav-link {
  color: var(--site-white);
  font-weight: 400;
  padding-left: 0;
  padding-right: 0;
  white-space: nowrap;
  text-transform: lowercase;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #cccccc;
}

.primary-menu {
  gap: 1.7rem;
  row-gap: 0.5rem;
}

.social-list {
  gap: 0.5rem;
}

.social-list .nav-item {
  padding-left: 0;
}

.social-list img {
  height: 2.55rem;
  object-fit: contain;
  width: 2.55rem;
}

.feature-video {
  background: var(--site-black);
  padding: 0 0 2rem;
}

.site-section {
  background: var(--site-white);
  color: var(--site-black);
  padding: 2.5rem 0 3rem;
}

.videos-page main,
main.videos-page,
.videos-page .videos-section {
  background: var(--site-black);
  color: var(--site-white);
}

.content-flow p+p {
  margin-top: 1rem;
}

.meet-page-section {
  background-color: #f7f3ea;
  background-image: url("../images/fallback/2023/03/06/barnbg.jpg");
  background-image: image-set(
      url("../images/2023/03/06/barnbg.webp") type("image/webp"),
      url("../images/fallback/2023/03/06/barnbg.jpg") type("image/jpeg")
  );
  background-position: center top;
  background-repeat: repeat-y;
  background-size: contain;
  padding: 4.7rem 0 4.75rem;
}

.meet-page__content {
  color: var(--site-black);
}

.meet-page__heading {
  margin-bottom: 2.25rem;
}

.meet-page__grid {
  display: grid;
  gap: 1.75rem 1.5rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 2.35rem;
  text-align: center;
}

.meet-page__tile {
  color: var(--site-black);
  display: block;
}

.meet-page__tile img {
  margin: 0 auto 0.7rem;
  max-width: 200px;
  transition: opacity 160ms ease, transform 160ms ease;
  width: 100%;
}

.meet-page__tile span {
  display: block;
  font-size: 1.05rem;
  font-weight: 400;
  text-transform: none;
}

.meet-page__tile:hover img,
.meet-page__tile:focus-visible img {
  opacity: 0.9;
  transform: translateY(-2px);
}

.meet-page__copy {
  max-width: 58rem;
}

.meet-page__detail {
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  margin-top: 2rem;
  padding-top: 2rem;
  scroll-margin-top: 1.5rem;
}

.meet-page__detail h2 {
  margin-bottom: 1rem;
}

.meet-page__detail h3 {
  margin-bottom: 0.85rem;
  text-transform: none;
}

.meet-page__list {
  margin: 0;
  padding-left: 1.25rem;
}

.meet-page__list li+li {
  margin-top: 0.6rem;
}

.meet-page__album {
  align-items: flex-start;
  display: grid;
  gap: 1rem;
  grid-template-columns: 140px 1fr;
}

.meet-page__album img {
  width: 100%;
}

.feature-video .ratio {
  background: #111111;
}

.feature-video video {
  object-fit: cover;
}

.foundation-cta {
  background: var(--site-white);
  padding: 2rem 0 2.2rem;
}

.foundation-cta__link {
  display: block;
  margin: 0 auto;
  max-width: var(--site-shell);
  width: fit-content;
}

.foundation-cta img {
  border: 8px solid #2b16ff;
}

.tour-section {
  background-color: var(--site-blue-light);
  background-image: url("../images/fallback/content/bus-side-2.jpg");
  background-image: image-set(
      url("../images/content/bus-side-2.webp") type("image/webp"),
      url("../images/fallback/content/bus-side-2.jpg") type("image/jpeg")
  );
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--site-black);
  min-height: 42rem;
  padding: 2rem 0 2.5rem;
}

.tour-section h1 {
  margin-bottom: 0.85rem;
}

.listen-section {
  background-color: #1c1815;
  background-image: url("../images/fallback/content/music-bg.jpg");
  background-image: image-set(
      url("../images/content/music-bg.webp") type("image/webp"),
      url("../images/fallback/content/music-bg.jpg") type("image/jpeg")
  );
  background-position: center;
  background-repeat: repeat;
  background-size: auto;
  color: var(--site-white);
  padding: 2rem 0 2.25rem;
}

.listen-section h2,
.email-section h2,
.site-footer h2,
.site-footer h3 {
  color: var(--site-white);
}

.listen-section h2 {
  font-size: 3rem;
  margin-bottom: 1.6rem;
}

.music-rows {
  display: grid;
  gap: 2rem;
  justify-items: center;
}

.music-row {
  display: grid;
  gap: 2.125rem;
}

.music-row--four {
  grid-template-columns: repeat(4, 250px);
}

.music-row--three {
  grid-template-columns: repeat(3, 250px);
}

.music-row a {
  display: block;
  overflow: hidden;
}

.music-row img {
  transition: transform 180ms ease;
}

.music-row a:hover img,
.music-row a:focus-visible img {
  transform: scale(1.04);
}

.news-section {
  background: var(--site-white);
  color: var(--site-black);
  padding-bottom: 4.3rem;
}

.instagram-embed__wrap {
  display: block;
}

.instagram-frame {
  background: #ffffff;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  box-shadow: none;
  display: block;
  min-height: 60rem;
  width: 100%;
}

.instagram-embed__fallback {
  margin-top: 0.75rem;
}

.email-section {
  background: var(--site-black);
  color: var(--site-white);
  padding-bottom: 2.75rem;
  padding-top: 1.5rem;
}

.email-intro {
  align-items: center;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 12rem 1fr;
  padding: 2rem 0 0;
}

.email-intro p {
  font-size: 1.1rem;
  margin: 0;
}

.email-icon {
  display: block;
  line-height: 1;
}

.grey {
  color: var(--site-gray);
}

.signup-form .row {
  --bs-gutter-x: 1rem;
}

.signup-form .form-control {
  border-radius: 0.25rem;
  min-height: 2.35rem;
}

.required-indicator {
  color: var(--site-white);
  font-weight: 700;
  margin-left: 0.1rem;
}

.form-note {
  color: #d4d4d4;
}

.btn-primary {
  --bs-btn-bg: var(--site-gray);
  --bs-btn-border-color: var(--site-gray-dark);
  --bs-btn-color: var(--site-white);
  --bs-btn-hover-bg: #c2c2c2;
  --bs-btn-hover-border-color: var(--site-gray-dark);
  --bs-btn-hover-color: var(--site-white);
  --bs-btn-active-bg: #c2c2c2;
  --bs-btn-active-border-color: var(--site-gray-dark);
  --bs-btn-active-color: var(--site-white);
}

.site-footer {
  background: var(--site-black);
  color: var(--site-white);
  padding: 1.5rem 0 2rem;
}

.footer-heading {
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 0.65rem;
}

.site-footer a:not(.btn) {
  color: var(--site-white);
}

.site-footer a:not(.btn):hover {
  color: var(--site-link-hover);
}

.footer-socials {
  gap: 0.9rem;
}

.copyright p {
  margin: 0;
}

.copyright {
  font-size: 0.95rem;
}

/* Bandsintown widget styling from the live homepage */
.bit-widget {
  background-color: rgba(0, 0, 0, 0);
  color: #000000;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  min-width: 250px;
  padding-bottom: 10px;
  width: 100%;
}

.bit-widget .bit-spacer {
  height: 10px;
}

.bit-widget .bit-top-track-button {
  display: block;
  font-size: 16px;
  font-weight: 700;
  padding: 5px 40px 0 10px;
}

.bit-widget .bit-top-track-button span {
  text-decoration: underline;
}

.bit-widget .bit-nav-bar-container {
  padding: 0 10px;
}

.bit-widget .bit-nav-bar {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  padding: 0 0 10px;
}

.bit-widget .bit-logo-container {
  margin: 0 0 0 auto;
}

.bit-widget .bit-upcoming-events {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  margin: 0 10px 10px;
}

.bit-widget .bit-event-list-title {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 0 12px 0 0;
}

.bit-widget .bit-event {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  color: #000000;
  line-height: 22px;
  padding: 10px 6px;
}

.bit-widget .bit-event:hover {
  background-color: rgba(81, 81, 81, 0.1);
}

.bit-widget .bit-details {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.bit-widget .bit-date {
  font-weight: 700;
  margin: 0 15px 0 0;
  min-width: 95px;
}

.bit-widget .bit-titleWrapper {
  margin-right: auto;
}

.bit-widget .bit-venue {
  color: #333333;
  margin: 0 auto 0 0;
}

.bit-widget .bit-location {
  color: #333333;
  font-weight: 400;
  hyphens: auto;
  margin: 0 14px 0 5px;
  text-align: right;
}

.bit-widget .bit-event-buttons {
  display: flex;
  flex-direction: row;
}

.bit-widget .bit-button {
  font-weight: 700;
  line-height: 44px;
  text-align: center;
  width: 150px;
}

.bit-widget .bit-rsvp {
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #333333;
  color: #333333;
  font-size: 0.88em;
  margin-top: 0;
  text-transform: uppercase;
}

.bit-widget .bit-offers {
  background-color: #333333;
  border: 1px solid #333333;
  color: #ffffff;
  cursor: pointer;
  margin-left: 15px;
  margin-top: 0;
  position: relative;
}

.bit-widget .bit-offers-text {
  font-size: 0.88em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bit-widget .bit-upcoming-events-show-all-button {
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #333333;
  color: #333333;
  cursor: pointer;
  font-size: 0.88em;
  font-weight: 700;
  line-height: 44px;
  margin: 0 10px;
  text-align: center;
  text-transform: uppercase;
}

.bit-widget .bit-play-my-city-button {
  background-color: #333333;
  border: 1px solid #333333;
  color: #ffffff;
}

.bit-widget .bit-clickable {
  color: #333333;
}

.bit-widget .bit-logo-desktop {
  display: block;
}

.bit-widget .bit-logo-mobile,
.bit-widget .google-pixel-iframe {
  display: none;
}

@media (max-width: 991.98px) {
  .navbar {
    padding-bottom: 0.9rem;
  }

  .navbar-collapse {
    padding-bottom: 1rem;
    padding-top: 0.75rem;
  }

  .nav-item {
    display: inline-block;
    padding-left: 0;
    text-align: right;
  }

  .primary-menu {
    align-items: flex-end;
    gap: 0.35rem;
  }

  .feature-video {
    padding-bottom: 1.5rem;
  }

  .meet-page__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .music-row--four {
    gap: 1.25rem;
    grid-template-columns: repeat(2, 250px);
  }

  .music-row--three {
    gap: 1.25rem;
    grid-template-columns: repeat(2, 250px);
  }

  .bit-widget .bit-event {
    padding: 16px 10px;
  }

  .bit-widget .bit-details {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }

  .bit-widget .bit-event-buttons {
    flex-direction: column-reverse;
    margin: 0 0 0 15px;
  }

  .bit-widget .bit-rsvp,
  .bit-widget .bit-offers,
  .bit-widget .bit-button {
    width: 150px;
  }
}

@media (max-width: 767.98px) {

  h1,
  .news-section h2,
  .listen-section h2,
  .footer-heading {
    font-size: 2.25rem;
  }

  .site-logo {
    max-width: min(15rem, 58vw);
  }

  .social-list img {
    height: 2.15rem;
    width: 2.15rem;
  }

  .foundation-cta {
    padding: 1.25rem 0;
  }

  .foundation-cta img {
    border-width: 6px;
  }

  .site-section,
  .meet-page-section {
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
  }

  .meet-page__grid {
    gap: 1.35rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meet-page__album {
    grid-template-columns: 110px 1fr;
  }

  .tour-section {
    min-height: 30rem;
    padding-bottom: 2rem;
  }

  .instagram-frame {
    min-height: 42rem;
  }

  .email-intro {
    grid-template-columns: 1fr;
    padding-top: 1rem;
  }

  .email-icon {
    font-size: 5.5rem;
  }
}

@media (max-width: 575.98px) {

  .music-row--four,
  .music-row--three {
    gap: 1rem;
    grid-template-columns: 1fr;
  }

  .music-row img {
    margin: 0 auto;
  }

  .instagram-frame {
    min-height: 32rem;
  }

  .meet-page__grid {
    grid-template-columns: 1fr;
  }

  .meet-page__album {
    grid-template-columns: 1fr;
  }

  .meet-page__album img {
    max-width: 180px;
  }

  .footer-socials {
    justify-content: flex-start;
  }
}

.store-section {
  padding: 3rem 0;
}

.store-section h1 {
  margin-bottom: 2rem;
}

.contact-info-row {
  margin-left: auto;
  margin-right: auto;
  max-width: 860px;
}

.contact-logo-column {
  display: grid;
  gap: 7rem;
  justify-items: center;
}

.contact-logo {
  height: auto;
  max-width: 300px;
  width: 100%;
}

@media (max-width: 991.98px) {
  .contact-logo-column {
    gap: 3rem;
  }
}