/*
 Theme Name:   Santa Hustle
 Theme URI:    https://santahustle.com
 Description:  Santa Hustle
 Author:       Randy Baum
 Author URI:   https://randybaumdesign.com
 Template:     generatepress
 Version:      0.1
*/


/* CHICAGO */
.post-628 .marker {
  top: 34%;
  left: 65%;
}

/* GLENDALE */
.post-1025 .marker {
  top: 63%;
  left: 17.5%;
}

/* MEMPHIS */
.post-1765 .marker {
  top: 61%;
  left: 62%;
}

/* NASHVILLE */
.post-1029 .marker {
  top: 56%;
  left: 68%;
}

/* INDIANAPOLIS */
.post-1027 .marker {
  top: 42.5%;
  left: 68.2%;
}

/* ROSEVILLE */
.post-1031 .marker {
  top: 38%;
  left: 3%;
}

/* WINSTON-SALEM */
.post-1767 .marker {
  top: 54.5%;
  left: 82%;
}

/* TOWNSEND */
.post-1769 .marker {
  top: 56.5%;
  left: 75%;
}

/* ATLANTIC CITY */
.post-1019 .marker {
  top: 38.5%;
  left: 89.75%;
}

/* GALVESTON */
.post-1023 .marker {
  top: 84%;
  left: 53%;
}

/* ORLANDO */
.post-1771 .marker {
  top: 84%;
  left: 81.5%;
}

/* ATLANTA */
.post-1017 .marker {
  top: 64%;
  left: 73.5%;
}

/* ATHENS */
.post-3966 .marker {
  top: 63.5%;
  left: 75%;
}

/* MILWAUKEE */
.post-3972 .marker {
  top: 30%;
  left: 64.5%;
}

/* DETROIT */
.post-3953 .marker {
  top: 32.5%;
  left: 73%;
}

/* SAN ANTONIO */
.post-4013 .marker {
  top: 83.5%;
  left: 45%;
}

/* SEVIERVILLE
.post-1033 .marker {
	top: 56%;
	left: 74.5%;
}

/* CHATTANOOGA
.post-1021 .marker {
	left: 67.5%;
	top: 61.5%;
}*/

/* GLOBAL */

:root {
  --avenir: "Avenir Next LT Pro";
}

@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("./fonts/AvenirNextLTPro-Heavy.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

html {
  --sh-header-height: 180px;
  scroll-padding-top: var(--sh-header-height);
}

.block-editor-plain-text {
	line-height: 1.5;
}

.has-text-align-right {
  text-align: right;
}

.has-text-align-left {
  text-align: left;
}

.has-text-align-center {
  text-align: center;
}

.wp-block-table table thead {
  background: var(--red);
  color: var(--base-3);
  font-family: var(--avenir);
  text-transform: uppercase;
}

.wp-block-table table th,
.wp-block-table table td {
  line-height: 1.2;
  padding: 0.8em 1em;
}

.entry-content ol,
.entry-content ul {
  margin-left: 1.5em;
  list-style: none;
}

.entry-content ul li::marker {
  font-size: 1.5em;
}

.entry-content ul li {
  list-style-image: url(/wp-content/uploads/2023/08/candy.svg);
}

.gb-shape svg {
  height: clamp(30px, 6.25vw, 120px) !important;
}

.absolute-1 {
  position: absolute;
  z-index: -1;
}

.c-default {
  cursor: default;
}

.gb-button:not(.gb-accordion__toggle):focus {
  outline: 2px dotted var(--dk-red);
  outline-offset: 2px;
}

.spin .gb-icon {
  animation-name: spin;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spin.reverse .gb-icon {
  animation-name: reverse;
  animation-duration: 40s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.sticky-btn {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translatex(-50%);
	z-index: 1;
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.2s ease-out;
}

.headroom--unpinned .sticky-btn {
	top: 200px;
	opacity: 1;
}

.candy::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0.1em;
  width: 100%;
  background: var(--red);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--base-3),
    var(--base-3) 0.25em,
    var(--red) 0.25em,
    var(--red) 0.5em
  );
  border-radius: 99em;
  box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
}

.signup-btn:hover .img-caption {
  transform: rotate(0);
}

.img-caption {
  pointer-events: none;
  cursor: pointer;
}

/* CONTACT / FAQ */

#faq .gb-accordion__item:last-child {
  padding-bottom: 0;
  border: none;
}

#faq .gb-accordion__content > *:last-child {
  margin-bottom: 0;
}

/* SNOW */

#snow {
  position: absolute;
  z-index: 11;
  width: 100vw;
  height: 1080px;
  min-height: 916px;
  max-height: 100vh;
  pointer-events: none;
}

/* TOOLTIP */

.tooltip {
  position: relative;
}

.tooltip::before,
.tooltip::after {
  --scale: 0;
  --arrow-size: 6px;
  position: absolute;
  top: -0.25rem;
  left: 50%;
  color: var(--base-3);
  transform: translateX(-50%) translateY(var(--translate-y, 0))
    scale(var(--scale));
  transition: 150ms transform;
  transform-origin: bottom center;
}

.tooltip::before {
  --translate-y: calc(-100% - var(--arrow-size));
  content: attr(data-tooltip);
  font-family: var(--avenir);
  text-transform: uppercase;
  color: var(--red);
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.4rem 0.6rem;
  width: max-content;
  background: var(--base-3);
  border-radius: 0.3rem;
  text-align: center;
}

.tooltip:hover::before,
.tooltip:hover::after,
.tooltip:active::before,
.tooltip:active::after,
.tooltip:focus::before,
.tooltip:focus::after {
  --scale: 1;
}

.tooltip::after {
  --translate-y: calc(-1 * var(--arrow-size));
  content: "";
  border: var(--arrow-size) solid transparent;
  border-top-color: var(--base-3);
  transform-origin: top center;
}

.tooltip:active,
.tooltip:focus {
  transform: rotate(-3deg);
}

footer .tooltip::before {
  background: var(--red);
  color: var(--base-3);
}

footer .tooltip::after {
  border-top-color: var(--red);
}

/* HEADER */

#masthead {
  position: fixed;
  width: 100%;
}

.inside-header {
  padding: 40px;
}

.inside-header.grid-container {
  max-width: 1920px;
}

.header-wrap .site-header,
.header-wrap .site-header.headroom--pinned.headroom--top {
  background: rgb(199 30 67 / 0%);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

.header-wrap .site-header.headroom--pinned,
.header-wrap .site-header.headroom--not-top.headroom--not-bottom {
  background: rgb(199 30 67 / 95%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.header-wrap .site-header {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.6, 1),
    background 0.2s ease-in-out;
}

.headroom--pinned {
  transform: translateY(0);
}

.headroom--unpinned,
.hystmodal__opened .headroom--pinned {
  transform: translateY(-100%);
}

.headroom--unpinned .header-image,
.hystmodal__opened .headroom--pinned .header-image {
  transform: translateY(-50%);
  transition: transform 0.15s cubic-bezier(0.36, 0, 0.66, -0.56);
}

/* NAVIGATON */

.main-navigation .main-nav ul li > a {
  position: relative;
  text-shadow: 0 1px 4px rgb(0 0 0 / 50%);
}

.main-navigation .main-nav ul li:hover > a::after,
.main-navigation .main-nav ul li:active > a::after,
.main-navigation .main-nav ul li:focus-within > a::after {
  content: "";
  position: absolute;
  bottom: 0.5em;
  left: 20px;
  height: 0.1em;
  width: calc(100% - 40px);
  background: var(--red);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--base-3),
    var(--base-3) 10px,
    var(--red) 10px,
    var(--red) 20px
  );
  border-radius: 99em;
  box-shadow: 0 0 4px rgb(0 0 0 / 42%);
}

.headroom--pinned:is(.headroom--not-top)
  .main-navigation
  .main-nav
  ul
  li:hover
  > a::after,
.headroom--pinned:is(.headroom--not-top)
  .main-navigation
  .main-nav
  ul
  li:active
  > a::after,
.headroom--pinned:is(.headroom--not-top)
  .main-navigation
  .main-nav
  ul
  li:focus-within
  > a::after {
  background: repeating-linear-gradient(
    -45deg,
    var(--base-3),
    var(--base-3) 10px,
    var(--lt-green) 10px,
    var(--lt-green) 20px
  );
}

.mobile-menu-open #masthead {
  background: var(--red);
}

button.menu-toggle.menu-toggle {
  background: var(--dk-red);
  border-radius: 0.25em;
  line-height: 50px;
}

button.menu-toggle.menu-toggle:hover {
  background: var(--dk-red);
}

.social-icons svg {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 40%));
}

/* LOCATIONS MAP */

.sh-map * {
  --marker-size: 1.25em;
}

.gb-grid-wrapper.race-locations {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sh-map .marker {
  position: absolute;
  width: var(--marker-size);
  height: var(--marker-size);
  background: var(--red);
  border-radius: 99em;
  border: calc(var(--marker-size) / 10) solid var(--base-3);
  box-shadow: inset 0 0 0 calc(var(--marker-size) / 5) var(--red),
    0 calc(var(--marker-size) / 5) calc(var(--marker-size) / 2) rgb(0 0 0 / 15%);
  transition: background 0.15s ease-out;
  transform: translate(-25%, -25%);
}

.sh-map .marker:hover,
.sh-map .marker[aria-expanded="true"] {
  background: var(--base-3);
  outline: none;
}

/* MAP POPOVERS */

.tippy-box {
  background: rgb(255 255 255 / 85%);
  border-radius: 24px;
  font-size: 1em;
  color: var(--contrast);
  box-shadow: 0px 0.5rem 2.5rem -1rem rgb(0 0 0 / 25%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.tippy-arrow {
  color: rgb(255 255 255 / 85%);
  top: calc(100% - 15px);
}

.tippy-content {
  padding: 32px;
  text-align: center;
  width: 420px;
  max-width: 100%;
  font-family: var(--avenir);
  text-transform: uppercase;
}

.race-name {
  display: inline-flex;
  position: relative;
  color: var(--red);
  font-size: 24px;
}

.tippy-content .race-date {
  font-size: 20px;
  color: var(--dk-blue);
  margin-bottom: 15px;
}

.btn-wrap {
  display: flex;
  gap: 0.5em;
}

.tippy-content .button.button {
  flex: 1;
  font-size: 0.75em;
  color: var(--base-3);
  padding: 0;
  line-height: 2.75em;
  border-radius: 0.5em;
}

/* FIND A RACE */

.sticky-sidebar > .gb-container:last-child {
  position: sticky;
  top: calc(40px + var(--sh-header-height));
}

.race-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.race-types .post-term-item {
  background: var(--xlt-blue);
  padding: 0.6em 1em;
  border-radius: 0.25em;
}

.race-types .term-half-marathon {
  order: 0;
}

.race-types .term-10k {
  order: 1;
}

.race-types .term-5k {
  order: 2;
}

.race-types .term-kids-dash {
  order: 3;
}

/* WPFORMS */

div.wpforms-container-full .wpforms-form * {
  --wpforms-field-size-input-spacing: 0.5em;
  --wpforms-button-size-margin-top: 0;
}

div.wpforms-container-full .wpforms-form .wpforms-field-label {
  margin-bottom: 0.25em;
}

div.wpforms-container .wpforms-form .wpforms-field-layout,
.wpforms-recaptcha-container.wpforms-recaptcha-container.wpforms-recaptcha-container {
  padding: 0;
}

.wpforms-recaptcha-container.wpforms-recaptcha-container.wpforms-recaptcha-container {
  height: 0;
}

div.wpforms-container .wpforms-form .wpforms-confirmation-container-full {
  background: rgb(102 165 186 / 15%);
  border: 1px solid rgb(102 165 186 / 15%);
  padding: 30px;
}

.wpforms-submit-container {
  text-align: center;
}

div.wpforms-container-full.wpforms-container-full button[type="submit"] {
  font-family: var(--avenir);
}

div.wpforms-container-full .wpforms-confirmation-container-full,
div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
  background: var(--base-3);
  border: none;
  padding: 30px;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0 5px 20px 0 rgba(102, 165, 186, 0.15);
}

@media only screen and (max-width: 600px) {
  div.wpforms-container
    .wpforms-form
    .wpforms-field-layout
    .wpforms-field-layout-columns.wpforms-field-layout-columns {
    margin-right: 0;
    margin-left: 0;
  }

  div.wpforms-container
    .wpforms-form
    .wpforms-field-layout
    .wpforms-layout-column.wpforms-layout-column {
    padding: 0;
  }
}

/* FOOTER */

#footer-nav,
.footer-nav .gb-post-template .gb-post-template-wrapper {
  justify-content: space-around;
}

/* MADE WITH LOVE */

.made-with-love svg {
  position: relative;
  top: 0.15em;
  width: 1em;
  margin-right: 0.05em;
}

.made-with-love svg path {
  fill: var(--red);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.6, 1);
}

.made-with-love a:hover,
.made-with-love a:active,
.made-with-love a:focus {
  text-decoration: underline;
}

.made-with-love a:hover svg,
.made-with-love a:active svg,
.made-with-love a:focus svg {
  animation: heartbeat 1.2s linear infinite both;
}

.made-with-love a:hover svg path,
.made-with-love a:active svg path,
.made-with-love a:focus svg path {
  fill: #ff647f;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.85);
  }
}

/* 404 */

.error404 #page {
  max-width: 100%;
  background-image: linear-gradient(0deg, var(--xlt-blue), var(--base-3));
}

.error404 .inside-article {
  padding: 4em;
  text-align: center;
}

.error404 h1 {
  font-size: 1.5em;
}

/* FIND A RACE */

.page-id-164 .date,
.date-container {
  line-height: 1;
}

.page-id-164 .date span {
  z-index: 1;
  text-shadow: rgb(0 0 0 / 50%) 0 1px 4px;
}

.page-id-164 span.date-day {
  font-size: 72px;
  line-height: 1.1;
}

.date-container span.date-day {
  font-size: 175%;
  color: var(--lt-blue);
}

/* NAVIGATION BREAKPOINT */

@media (min-width: 1366px) and (max-width: 1559px) {
  .main-navigation a {
    font-size: 20px;
  }

  .site-header .header-image {
    width: 25vw;
  }
}

@media (min-width: 1366px) {
  html:not(.mobile-menu-open) .inside-header > .site-logo {
    position: absolute;
    left: 50%;
    top: calc(50% + 40px);
    transform: translate(-52%, -50%);
    z-index: 101;
  }

  #site-navigation,
  #primary-menu,
  .main-navigation .inside-navigation {
    flex: 1;
  }

  .main-navigation ul li:nth-child(4) {
    margin-left: auto;
  }
}

@media (max-width: 1365px) {
  /* HEADER */

  .inside-header {
    padding: 20px 30px 20px 20px;
  }

  .site-header .header-image {
    width: auto;
    height: 76px;
  }

  /* NAVIGATION */

  .has-inline-mobile-toggle .mobile-menu-control-wrapper {
    flex-wrap: nowrap;
  }

  .main-navigation.toggled .main-nav > ul {
    display: flex;
    flex-direction: column;
  }

  .main-navigation.toggled .main-nav li {
    width: auto;
    text-align: center;
  }
}

@media screen and (min-width: 783px) {
  .admin-bar .sticky-sidebar > .gb-container:last-child {
    top: calc((40px + var(--sh-header-height)) + var(--wp-admin--admin-bar--height));
  }
}

/* MOBILE */

@media (max-width: 768px) {
  /* LOCATIONS MAP */

  .sh-map * {
    --marker-size: 15px;
  }
}

@media (max-width: 767px) {
  .race-types {
    justify-content: center;
  }

  a.gb-button.reg-link {
    background-color: var(--red);
    color: var(--base-3);
  }

  a.gb-button.reg-link:hover,
  a.gb-button.reg-link:active,
  a.gb-button.reg-link:focus {
    background-color: var(--dk-red);
    color: var(--base-3);
  }
}