/*
Theme Name: Crossbrand
Author: Leo
Version: 1.1
Requires at least: 6.2
Requires PHP: 7.4
Description: Base block theme with editable layout for casino satellites.
Tags: full-site-editing, block-theme
Text Domain: crossbrand
*/

body {
  padding-top: 79px;
}

body.admin-bar header {
  top: 32px;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.page-popup {
  display: flex;
  position: fixed;
  flex-direction: column;
  bottom: 20px;
  right: 8px;
  padding: 17px 20px 11px;
  max-width: 360px;
  border: 1px solid #000;
  border-radius: 8px;
  background: #252525;
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  text-align: center;
  transition: visibility 0s .2s, opacity .1s ease-in;
  z-index: 2;
}

.page-popup.show {
  visibility: visible;
  opacity: 1;
  transition: opacity .1s ease-in;
}

.page-popup.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s .2s, opacity .1s ease-in;
}

.page-popup .popup-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: #2f2f2f;
  transition: background .2s ease;
  cursor: pointer;
}

.page-popup .popup-close:hover {
  background: #444;
}

.page-popup .popup-close svg {
  width: 8px;
  height: 8px;
}

.page-popup h2 {
  font-size: 20px;
  line-height: 20px;
  color: #fff;
  letter-spacing: -.2px;
  margin-bottom: 0;
}

.page-popup strong {
  font-size: 40px;
  display: block;
  margin-bottom: 0;
  font-weight: 900;
  letter-spacing: -1.5px;
  color: red;
}

.page-popup p {
  font-size: 20px;
  color: #fff;
  margin-bottom: 20px;
  font-weight: 700;
}

.site-popup-link {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  background: #5a5a5a;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease;
}

.site-popup-link:hover {
  background: #777;
}



@media screen and (max-width: 767px) {
  header > .wp-block-group {
    padding: 0 20px;
  }

  header .wp-block-site-logo img {
    max-width: 100px;
  }

  header .wp-block-buttons .wp-block-button__link {
    padding: 10px;
  }

  body {
    padding-top: 74px;
  }

  body.admin-bar header {
    top: 46px;
  }

  .hero-block .hero-text-wrapper {
    bottom: 0;
    top: auto;
  }
}

@media screen and (max-width: 1023px) {
  section.g-container {
    margin: 0 20px;
  }
}