:root {
  --clr-blk: #222122;
  --clr-wht: #fefefe;
  --clr-sq-blue: #2d4c6e;
  --clr-pelham-blue: #91bde3;
  --clr-sq-green: #3c8148;
  --clr-text-link: #0066cc;
  --clr-event-details: #92bee2;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  /* color: var(--clr-main); */
}

/*
########   #######  ########  ##    ## 
##     ## ##     ## ##     ##  ##  ##  
##     ## ##     ## ##     ##   ####   
########  ##     ## ##     ##    ##    
##     ## ##     ## ##     ##    ##    
##     ## ##     ## ##     ##    ##    
########   #######  ########     ##    

https://www.asciiart.eu/text-to-ascii-art#google_vignette
Banner3
*/

svg {
  overflow: clip;
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

body {
  background-color: var(--clr-blk);
  color: var(--clr-wht);
  scroll-behavior: smooth; /* smooth scrolling rather than jumps */
  margin: 0;
  line-height: 1.5; /* default 1.2 times font height */
  font-family: 'Inter', sans-serif;
}

.icon {
  height: 16px;
  width: auto;
}
.icon.map-icon {
  height: 24px;
}

/*
   Wrapping an img in an anchor introduces space below because <a> is inline with a baseline for text decenders.
   Setting both the anchor and image to block removes the baseline spacing.
 */
.image-anchor {
  display: inline-block;
}
.icon-image {
  display: block;
}

.clickable:not(.disabled) {
  cursor: pointer;
}

.text-field-label {
  margin-bottom: 0.5em;
  /* margin-bottom: 2.5em; */
}

.text-link {
  color: var(--clr-text-link);
  text-decoration: underline;
}

.desktop-only {
  display: none;
}

body .hidden {
  display: none;
}

/*
##    ##    ###    ##     ##
###   ##   ## ##   ##     ##
####  ##  ##   ##  ##     ##
## ## ## ##     ## ##     ##
##  #### #########  ##   ## 
##   ### ##     ##   ## ##  
##    ## ##     ##    ###   
*/
#nav-section {
  display: flex;
  border-bottom: 6px solid var(--clr-sq-green);
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}
#sonoquii-logo {
  height: 32px;
  width: auto;
  margin-top: 12px;
  margin-left: 12px;
  margin-bottom: 6px;
  margin-right: auto;
}
.nav-logo {
  margin-right: auto;
}
.nav-button {
  height: 32px;
  width: auto;
}

/*
  #### ##    ## ########  ##     ##
   ##  ###   ## ##     ##  ##   ## 
   ##  ####  ## ##     ##   ## ##  
   ##  ## ## ## ##     ##    ###   
   ##  ##  #### ##     ##   ## ##  
   ##  ##   ### ##     ##  ##   ## 
  #### ##    ## ########  ##     ##
*/

#hero-container {
  width: 100%;
  /* max-width: 1200px; */
}

#hero-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* 
  ######## ##     ## ######## ##    ## ########  ###### 
  ##       ##     ## ##       ###   ##    ##    ##    ##
  ##       ##     ## ##       ####  ##    ##    ##      
  ######   ##     ## ######   ## ## ##    ##     ###### 
  ##        ##   ##  ##       ##  ####    ##          ##
  ##         ## ##   ##       ##   ###    ##    ##    ##
  ########    ###    ######## ##    ##    ##     ###### 
*/

#events {
  margin: 2em 1em 1em 1em;
}
#events-heading-mobile {
  font-size: 2em;
}

#events-container-mobile {
  display: grid;
  grid-template-columns: 24px auto 90px;
  grid-template-columns: 32px auto 90px;
  grid-template-columns: 30px auto 90px;
  grid-column-gap: 5px;
  margin-top: 0.5em;
}

.event-top-row {
  margin-top: 12px;
}

.event-date {
  grid-row: span 2;
  background-color: var(--clr-wht);
  color: var(--clr-blk);
  padding-left: 3px;
  border-radius: 4px;
  font-family: 'Roboto Condensed';
  font-family: 'acumin-pro-condensed', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-weight: 700;
}
.event-day {
  line-height: 0.7;
}

.event-venue {
  font-size: 0.9em;
  margin-right: auto;
  padding-top: 2px;
  margin-left: 12px;
}

.event-details {
  font-size: 0.7em;
  margin-right: auto;
  padding-bottom: 2px;
  margin-left: 12px;
}

/* .event-date-day {
  margin-top: -5px;
} */

.event-venue-mobile-logo-container {
  grid-row: span 2;
  position: relative;
}
.event-venue-logo {
  width: 90px;
  height: auto;
  /* grid-column-start: 3; */
}
.event-venue-logo.cancel-overlay {
  width: 100px;
}

/* .event-date {
  grid-column: 1;
  grid-row: 1/3;
} */
/* .event-venue-logo {
  grid-column: 3;
  grid-row: 1/3;
} */

.event-schedule {
  color: var(--clr-event-details);
  font-weight: bold;
  /* padding-top: 4px; */
}
.cancel-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  /* Multiple drop shadows for stronger effect */
  /* Stronger - larger blur radius and more layers */
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  /* filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 4px rgba(0, 0, 0, 0.9))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); */
}

/*
  ##     ## ######## ########   #######   
  ###   ### ##       ##     ## ##     ##
  #### #### ##       ##     ## ##     ##
  ## ### ## ######   ##     ## ##     ##
  ##     ## ##       ##     ## ##  ## ##
  ##     ## ##       ##     ## ##    ## 
  ##     ## ######## ########   ##### ##
*/

@media (min-width: 860px) {
  .mobile-only {
    display: none !important;
  }
  .desktop-only {
    display: block;
  }

  #events-heading-desktop {
    font-size: 2.5em;
    margin-bottom: 0.6em;
    font-family: 'acumin-pro-condensed', sans-serif;
    font-weight: bold;
  }
  #events-container-desktop {
    display: grid;
    grid-template-columns: 152px 420px 250px;
    grid-template-columns: 152px 1fr 250px;
    row-gap: 26px;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
  }
  .event-date-desktop {
    padding-left: 12px;
  }
  .event-date-desktop-container {
    display: flex;
    flex-direction: column;
    background-color: var(--clr-wht);
    color: var(--clr-blk);
    font-family: 'acumin-pro-condensed', sans-serif;
  }
  .event-date-desktop-weekday {
    font-size: 1.4em;
  }
  .event-date-desktop-date {
    font-size: 2.2em;
    font-weight: bold;
    line-height: 0.9;
  }
  .event-date-desktop-time {
    background-color: var(--clr-pelham-blue);
    color: var(--clr-wht);
    font-size: 1.4em;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 6px;
  }
  .event-details-desktop-container {
    margin-left: 2em;
    font-family: 'acumin-pro-condensed', sans-serif;
  }
  .event-details-desktop-venue-container {
    display: flex;
    flex-direction: column;
    font-size: 0.8em;
    height: 100%;
  }

  .event-details-desktop-venue-name {
    font-size: 3em;
    font-weight: bold;
    line-height: 1;
  }
  .event-details-desktop-venue-location {
    font-size: 2em;
  }
  .event-details-desktop-venue-details {
    margin-top: auto;
    font-size: 1.2em;
  }

  .event-venue-desktop-logo-container {
    display: flex;
    justify-content: center;
    position: relative;
    /* width: auto;
    height: 80px;
    height: auto; */
    height: 100%;
    height: 100px;
    width: auto;
    object-fit: cover;
    align-self: center;
    /* margin-left: auto; */
  }
  .event-venue-logo-desktop {
    object-fit: cover;
    height: 90px;
    /* margin-left: 2em; */
  }

  .test-venue-logo {
    font-family: 'industry-inc-cutline', sans-serif;
    font-family: 'industry-inc-outline', sans-serif;
    font-family: 'industry-inc-bevel', sans-serif;
    font-weight: 600;
    font-size: 1.5em;
    font-style: normal;
  }
}