/* jwbs (color) class, and default styling */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url("../includes/assets/default.css?a=1");
@import url("jwbs.css");

body { padding-top: 153px; font-family: 'PT Sans', sans-serif; background-color: #e6e6e6; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: 'Alfa Slab One', cursive; color: #fe0202; }
.h1, h1 { font-size: 2rem; }
.h2, h2 { font-size: 1.75rem; }
.h3, h3 { font-size: 1.5rem; }
.h4, h4 { font-size: 1.38rem; }
a, a:visited, a:active { color: #fe0202; }
a:hover, a:focus { color: #db0000; }
.btn { font-family: 'Alfa Slab One', cursive; border-radius: 0; text-transform: uppercase; }
.restricted-container { margin-left: auto; margin-right: auto; display: block; max-width: 1000px; }

/* full width */
.full-width.bg-jwbs:before { border-left: 99rem solid #fe0202; box-shadow: 99rem 0 0 #fe0202; }

/* colors */
.btn-black      { color: #fe0202 !important; background-color: #000000; border-color: #000000; } .btn-black:hover      { color: #ffffff !important; background-color: #fe0202; border-color: #fe0202; } .btn-outline-black      { color: #000000 !important; background-color: transparent; background-image: none; border-color: #000000; } .btn-outline-black:hover      { color: #ffffff !important; background-color: #000000; background-image: none; border-color: #000000; }
.btn-gray       { color: #ffffff !important; background-color: #383838; border-color: #383838; } .btn-gray:hover       { color: #ffffff !important; background-color: #484848; border-color: #484848; } .btn-outline-gray       { color: #383838 !important; background-color: transparent; background-image: none; border-color: #383838; } .btn-outline-gray:hover       { color: #ffffff !important; background-color: #383838; background-image: none; border-color: #383838; }
.btn-lt-gray    { color: #52555B !important; background-color: #cccccc; border-color: #cccccc; } .btn-lt-gray:hover    { color: #000000 !important; background-color: #aaaaaa; border-color: #aaaaaa; } .btn-outline-lt-gray    { color: #cccccc !important; background-color: transparent; background-image: none; border-color: #cccccc; } .btn-outline-lt-gray:hover    { color: #52555B !important; background-color: #cccccc; background-image: none; border-color: #cccccc; }
.btn-white      { color: #52555B !important; background-color: #ffffff; border-color: #ffffff; } .btn-white:hover      { color: #000000 !important; background-color: #eeeeee; border-color: #eeeeee; } .btn-outline-white      { color: #ffffff !important; background-color: transparent; background-image: none; border-color: #ffffff; } .btn-outline-white:hover      { color: #52555B !important; background-color: #ffffff; background-image: none; border-color: #ffffff; }

.text-black      { color: #000000 !important; } .bg-black      { color: #ffffff; background-color: #000000; } .border-black      { border-color: #000000 !important; } .full-width.bg-black:before      { border-left: 99rem solid #000000; box-shadow: 99rem 0 0 #000000; } .extend-left.bg-black:before      { border-left: 90rem solid #000000; } .extend-right.bg-black:before      { box-shadow: 80rem 0 0 #000000; } .bg-black a   { color: #ffffff; }
.text-gray       { color: #383838 !important; } .bg-gray       { color: #ffffff; background-color: #383838; } .border-gray       { border-color: #383838 !important; } .full-width.bg-gray:before       { border-left: 99rem solid #383838; box-shadow: 99rem 0 0 #383838; } .extend-left.bg-gray:before       { border-left: 90rem solid #383838; } .extend-right.bg-gray:before       { box-shadow: 80rem 0 0 #383838; } .bg-gray a    { color: #ffffff; }
.text-lt-gray    { color: #cccccc !important; } .bg-lt-gray    { color: #52555B; background-color: #cccccc; } .border-lt-gray    { border-color: #cccccc !important; } .full-width.bg-lt-gray:before    { border-left: 99rem solid #cccccc; box-shadow: 99rem 0 0 #cccccc; } .extend-left.bg-lt-gray:before    { border-left: 90rem solid #cccccc; } .extend-right.bg-lt-gray:before    { box-shadow: 80rem 0 0 #cccccc; } .bg-lt-gray a { color: #52555B; }
.text-white      { color: #ffffff !important; } .bg-white      { color: #52555B; background-color: #ffffff; } .border-white      { border-color: #ffffff !important; } .full-width.bg-white:before      { border-left: 99rem solid #ffffff; box-shadow: 99rem 0 0 #ffffff; } .extend-left.bg-white:before      { border-left: 90rem solid #ffffff; } .extend-right.bg-white:before      { box-shadow: 80rem 0 0 #ffffff; } .bg-white a   { color: #52555B; }

/* navbar */
body > header { border-bottom: 5px solid #fe0202; }
.navbar-brand img { transition: all 500ms linear; max-height: 150px; }
header nav.navbar.bg-jwbs { background: url('/wp-content/uploads/2022/10/nav-bg.png') no-repeat center center; background-size: cover; }
header nav.navbar.bg-jwbs .nav-link { font-family: 'Alfa Slab One', cursive; }
a.navbar-brand { max-width: 75%; }
.dropdown-item { color: #fe0202; white-space: normal; }

/* banner */
.carousel-caption { text-align: left; font-weight: 700; line-height: 1; }
.carousel-inner video { aspect-ratio: 1.25/1; object-fit: cover; width: fit-content; }

/* cards */
.card .image-container { aspect-ratio: 1.5 / 1; background-color: #fff; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.card .card-title { clip-path: polygon( 25px 0, 100% 0, 100% 100%, 0% 100% ); }

/* wp posts grid */
.wp-block-latest-posts__post-title { font-family: 'Alfa Slab One', cursive; }
.wp-block-latest-posts__featured-image.aligncenter { margin-bottom: 0; }

/* events */
.event-header { margin: 3rem 0 0 0; background: transparent; background: linear-gradient(transparent 0%, transparent 47%, #fe0202 49%, #fe0202 51%, transparent 54%, transparent 100%); }
.event-header span { background: #e6e6e6; padding-right: 10px; }
.btn-black:hover { text-decoration: none; }
.btn-black:hover span[class^="h"] { color: #ffffff; }

/* footer */
#menu-footer-nav { list-style: none; padding-inline-start: 0; font-family: 'PT Sans', sans-serif; font-weight: 700; column-count: 2; font-size: .8rem; }
#menu-footer-nav li { padding-right: 20px; }
#menu-footer-nav li a { color: #ffffff; }

/* breakout element (-vw variable is set in JS if .breakout exists on page) */
.breakout { width: calc( 100 * var(--vw) ); margin-left: calc( ( calc( 100 * var(--vw) ) - 100% ) / -2); margin-right: 0; }
.breakout.w-100 { width: calc( 100 * var(--vw) ) !important; }
.breakout.w-100 img { width: 100%; }

/* media queries */
/* Extra Small Devices, Phones */
@media only screen and (min-width : 576px) {
  .full-width { position: relative; }
  .full-width:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: -75rem; z-index: -1; }
  .h1, h1 { font-size: 2.5rem; }
  .h2, h2 { font-size: 2rem; }
  .h3, h3 { font-size: 1.75rem; }
  .h4, h4 { font-size: 1.5rem; }
  .carousel-caption { font-size: 1.5rem; }
  .carousel-inner video { aspect-ratio: 20/9; }
  .dropdown-item { white-space: nowrap; }
  #menu-footer-nav { column-count: unset; font-size: 1rem; }
  #menu-footer-nav li { display: inline-block; }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  body { padding-top: 185px; }
  #post-thumbnail-container { overflow: hidden; height: 300px; }
  #post-thumbnail-container img { position: relative; top: 50%; transform: translateY(-50%); }
  .attribution { position: relative; }
  .attribution span { display: initial; position: absolute; bottom: 0; right: 0; }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	.dropdown-menu { min-width: 100%; }
  .ticket-link { max-width: 50%; }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
}