/*
Theme Name: Buzztime-New
Author: Shea Holden - Buzztime Entertainment
Description: A buzztime modified version of the wordpress twenty twenty-four theme
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.0
*/

@import "styles/00-colours.css";

:root {
    --bg: rgba(0, 0, 0, 0.5);
    --bgDark: rgba(0, 0, 0, 0.8);
    --bgB: black;
    --bgBlue: rgba(0, 187, 242, 0.2);
    --borderThin: 0.1vw solid white;
    --borderThinHover: 0.1vw solid var(--blue);
    --borderBold: 0.3vw solid var(--white);
    --borderBoldHover: 0.3vw solid var(--blue);
    --borderBoldPx: calc(var(--borderBold) * 1px);
    --bRadPx: 9999px;
    --bRadPer: 50%;
    --shadowT: 0.2vw 0.2vw 0.5vw black; /*Text shadow*/

    --defaultBgColorLight: rgba(20, 0, 163, 1);
    --defaultBgColorDark:  rgba(3, 0, 47, 1);

    --glowLg: 0 0 3vw 0.1vw var(--blue); !important;
    --glowMd: 0 0 2vw 0.1vw var(--blue); !important;
    --glowSm: 0 0 1vw 0.1vw var(--blue); !important;

    --glowMdP: 0 0 2vw 0.1vw var(--purple); !important;
    --glowSmT: 0 0 1vw 0.1vw transparent; !important;

    --transition-all: all 0.25s ease-in-out;
    --transition-all-slow: all 0.3s linear;

    --font-size-px-browser: 16;
    --FS-BrowserX: calc(10 / var(--font-size-px-browser));
    --vwr: calc(1rem * var(--FS-BrowserX) / 10);

    --border-radius-normal: 40;
    --border-radius-normal-x2: 80;
    --responsive-spacing: 2vw;

    --rounded: calc(var(--border-radius-normal) * var(--vwr));
    --roundedx2: calc(var(--border-radius-normal-x2) * var(--vwr));

    /* Overriding WP styles */

    --wp--preset--color--contrast: white;

    /*font-size: calc(24 / var(--font-size-px-browser) * 1rem);*/
}

/* MOBILE */
@media screen and (max-width: 768px) {
    :root {
        --rounded: calc((var(--border-radius-normal) * var(--vwr)) / 2);
        --roundedx2: calc((var(--border-radius-normal-x2) * var(--vwr)) / 2);

        --glowLg: 0 0 2vw 0.8vw var(--blue); !important;
        --glowMd: 0 0 2vw 0.6vw var(--blue); !important;
        --glowSm: 0 0 1vw 0.3vw var(--blue); !important;
    }
}

.map-container {
    position: relative;
    width: 100%;
    padding-bottom: 70%; /* This percentage gives us a 16:9 aspect ratio */
    height: 0;
}
.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.wp-block-group .alignwide .has-base-background-color .has-background .is-nowrap .is-layout-flex .wp-container-core-group-is-layout-5 .wp-block-group-is-layout-flex{
padding-top:5px !important;padding-bottom: 5px !important; 
}
.wp-container-core-group-is-layout-5.wp-container-core-group-is-layout-5{
    padding-top:5px !important;padding-bottom: 5px !important;

}
.menu_container {
    display: flex;
    justify-content: space-between;
}

.s_home {
    margin-left: 2%;
    margin-top: 2%;
}

.s_login {
    margin-right: 2%;
    margin-top: 2%;
}

.home_menu a {
    text-align: left !important;
}

.login_menu a {
    text-align: right !important;
}


/* NEW */

@font-face {
    font-family: "Exo-Bold";
    src: local('Exo-Bold.ttf'), url('fonts/Exo-Bold.ttf');
}

@font-face {
    font-family: "Exo-Med";
    src: local('Exo-Medium.ttf'), url('fonts/Exo-Medium.ttf');
}

@font-face {
    font-family: "Exo-Reg";
    src: local('Exo-Regular.ttf'), url('fonts/Exo-Regular.ttf');
}

h1 {
    font-family: "Exo-Bold", sans-serif;
    /*font-size: 2.6vw !important;*/
    text-transform: capitalize;
    color: white !important;
}

h2 {
    font-family: "Exo-Bold", sans-serif;
    /*font-size: 2vw !important;*/
    text-transform: capitalize;
    color: white !important;
}

h4 {
    font-family: "Exo-Med", sans-serif;
    /*font-size: 2vw !important;*/
    color: white !important;
}

/* HEADER */

header {
    /*position: absolute;*/
    /*left: 0;*/
    margin-top: 0 !important;
    min-width: 100vw !important;
    background-color: var(--bg);
    border-bottom: var(--borderBold);
    box-shadow: var(--glowMd);
}

header .has-base-background-color {
    background-color: inherit !important;
}

header .custom-logo {
    width: 20vw;
}

nav {
    display: none !important;
}

/* SEARCH BAR */

div.search-container {
    margin-top: 3vw !important;
    width: 90vw;
    margin-left: 50%;
    transform: translateX(-50%);
    /*background: var(--bg);*/
    background: transparent;
    /*overflow: hidden;*/
}

div.search-container button {
    border-radius: var(--bRadPx);
    border: var(--borderThin);
    background: var(--blue);
    width: 5%;
    transition: var(--transition-all);
}

div.search-container button:hover {
    background: var(--dark-blue);
    border: var(--borderThinHover);
}

div.search-container input {
    border-radius: var(--bRadPx);
    border: var(--borderBold);
    text-transform: capitalize;
    /*box-shadow: var(--glowSm);*/
}

/* MOBILE */
@media screen and (max-width: 768px) {
    div.search-container button {
        width: unset;
    }
}

/* CONTENT */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, var(--defaultBgColorLight) 0%, var(--defaultBgColorDark) 65%);
    z-index: -1;
}

body {
    color: white !important;
    font-family: "Exo-Reg", sans-serif !important;
    text-shadow: var(--shadowT);
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw;
    height: 100vh;
    /*overflow-y: scroll;*/
    /*overflow-x: hidden;*/
}

body article {
    overflow-x: scroll;
}

body.wp-admin {
    text-shadow: none; !important;
}

.wp-block-site-tagline {
    color: white;
    text-transform: capitalize;
}

header .wp-block-site-tagline {
    font-size: 1.5em;
}

/* MOBILE */
@media screen and (max-width: 768px) {
    body {
        /*position: fixed;*/
    }
}

/* HOME PAGE GRID */

.image-container {
    border-radius: var(--rounded);
    border: var(--borderThin);
    box-shadow: var(--glowSmT);
    overflow: hidden;
    margin: calc(var(--responsive-spacing) * 0.4) !important;
    transition: var(--transition-all);
}

.image-container:hover {
    cursor: pointer;
    box-shadow: var(--glowSm);
}

/*.image-container:not(:hover) {*/
/*    filter: brightness(0.2);*/
/*}*/

/*.image-container:hover ~ .image-container,*/
/*.image-container:hover + .image-container,*/
/*.image-container:has(~ .image-container:hover) {*/
/*    filter: brightness(0.6);*/
/*}*/

.image-container img {
    height: 250px ;
    object-fit: cover;
    transition: var(--transition-all);
}

.image-container:hover img {
    scale: 1.2;
    filter: blur(3px) brightness(0.6);
    /*border: var(--borderBold);*/
    /*box-shadow: var(--glowMd);*/
}

.image-container .overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 20%;
    padding-bottom: calc(var(--responsive-spacing) / 2);
    text-wrap: balance;
    transition: var(--transition-all);
}

.image-container:hover .overlay {
    min-height: 100%;
    padding-bottom: 0;
    background: transparent;
}

.image-container .overlay > a {
    text-decoration: none;
    text-transform: capitalize;
    align-content: center;
    text-wrap: balance;
    border-radius: inherit;
    transition: var(--transition-all);
}
.image-container:hover .overlay > a {
    position: absolute;
    font-family: "Exo-Bold", sans-serif;
    height: 100%;
    width: 100%;
}

/* MOBILE */
@media screen and (max-width: 768px) {
    div.gallery {
        padding: 0 !important;
    }

    .image-container {
        border-radius: var(--rounded);
        margin: calc(var(--responsive-spacing)) !important;
        box-shadow: var(--glowMd);
    }

    .image-container img {
        height: 75vw !important;
        width: 90vw !important;
    }

    .image-container .overlay {
        background: var(--bgDark);
    }

    .image-container .overlay > a {
        font-family: "Exo-Bold", sans-serif;
    }
}

/* FEATURED SPOT */

div.featured-header {
    margin-top: 3vw;
    margin-bottom: 1vw;
    width: 90vw;
    background: var(--bg);
    border-radius: var(--bRadPx);
    border: var(--borderBold);
    box-shadow: var(--glowMd);
}

.home .image-container:last-child,
.home .image-container:last-child img {
    width: 50vw;
    height: 30vw !important;
}

/*.home .image-container:last-child .overlay > a {*/

/*}*/

.home div.listing {
    max-width: unset;
    width: 100%;
    margin: 0 !important;
    /*padding: var(--responsive-spacing);*/
}

div.listing a:where(:not(.wp-element-button)) {
    color: var(--blue) !important;
}

.home div.info {
    background: var(--bg);
    border: var(--borderBold);
    border-radius: var(--rounded);
}

.home div.info p.socialmedialinks a {
    padding: calc(var(--responsive-spacing) / 3);
}

.home p.socialmedialinks a > img {
    border-radius: var(--bRadPx);
}

.home div.info p > span#prizeEnabled,
.home div.info p > span#prizeEnabled {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*.home div.info p {*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/

.home div.info p > span#prizeEnabled > img {
    margin-left: calc(var(--responsive-spacing) / 4);
    border-radius: var(--bRadPx);
}

.home div.info .venue-features {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.home div.listing div.slideshow-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    margin-top: calc(var(--responsive-spacing) * 2);
}

/* Hiding h2 heading, in this case just "photo gallery" */
.home div.listing > h2 {
    display: none;
}

.home div.listing div.slideshow-container .mySlides :not(img) {
    display: none;
}



.home div.listing div.slideshow-container .mySlides {
    width: 20vw;
    /*height: 20vw; !* Use fixed height instead of max-height *!*/
    overflow: hidden;
    object-fit: fill;
    border-radius: var(--rounded);
    transition: var(--transition-all-slow); /* Specify transition properties explicitly */
}

.home div.listing div.slideshow-container img {
    width: 100%;
    height: 20vw;
    border-radius: var(--rounded);
    object-fit: cover;
    transition: var(--transition-all-slow); /* Match the transition of the container */
}

.home div.listing div.slideshow-container .mySlides:hover {
    width: 100vw;
    /*height: auto; !* Use a specific height value *!*/
    object-fit: contain;
}

.home div.listing div.slideshow-container .mySlides:hover img {
    height: 100%;
}




/*.home div.listing div.slideshow-container .mySlides {*/
/*    max-height: 20vw;*/
/*    width: 20vw;*/
/*    overflow: hidden;*/
/*    border-radius: var(--rounded);*/
/*    transition: var(--transition-all-slow);*/
/*}*/

/*.home div.listing div.slideshow-container img {*/
/*    !*max-height: 100%;*!*/
/*    min-height: 100%;*/
/*    !*height: 100%;*!*/
/*    width: 100%;*/
/*    border-radius: var(--rounded);*/
/*    object-fit: cover;*/
/*    transition: var(--transition-all);*/
/*}*/

/*.home div.listing div.slideshow-container .mySlides:hover {*/
/*    max-height: 100%;*/
/*    width: 100vw;*/
/*}*/



/*.home div.listing div.slideshow-container .mySlides:hover img {*/
/*    object-fit: contain;*/
/*}*/

/* MOBILE */
@media screen and (max-width: 768px) {
    div.featured-header {
        margin-top: 4vw;
        margin-bottom: 4vw;
    }

    .home .image-container:last-child,
    .home .image-container:last-child img {
        width: 90vw;
        height: 75vw !important;
    }

    .home div.listing {
        padding: 0;
    }

    .home div.listing div.slideshow-container {
        flex-direction: column;
        margin-top: calc(var(--responsive-spacing));
    }

    .home div.listing div.slideshow-container .mySlides {
        height: auto;
        width: unset;
    }

    .home div.listing div.slideshow-container img {
        object-fit: contain;
    }

    .home div.listing div.slideshow-container .mySlides:hover {
        height: initial;
        width: initial;
    }

    .home div.listing div.slideshow-container .mySlides:hover img {
        object-fit: initial;
    }
}

/* MAP */

.map-container {
    margin-top: var(--responsive-spacing);
    border-radius: var(--rounded);
    box-shadow: var(--glowSm);
}

.gm-style .gm-style-iw-c {
    /*position: relative;*/
    background-color: var(--bgDark) !important;
    max-width: 5% !important;
    padding: calc(var(--responsive-spacing) / 6) !important;
}

.gm-style .gm-style-iw-c a{
    color: white !important;
    font-size: 1.4em;
    font-weight: 800;
}

.gm-style .gm-style-iw-c div {
    background: transparent !important;
}

.gm-style .gm-style-iw-c div:has(div.gm-style-iw-d) {
    position: relative !important;
}

.gm-style .gm-style-iw-c .poi-info-window div {
    color: white !important;
}

.gm-style .gm-style-iw-c .poi-info-window a {
    background: transparent !important;
}

.gm-style .gm-style-iw-ch {
    padding-top: 0;
}

/* close button container */
.gm-style .gm-style-iw-c .gm-style-iw-chr {
    position: absolute;
    right: calc(var(--responsive-spacing) / 6);
}

/*.gm-style .gm-style-iw-c:has(.gm-style-iw-d) .gm-style-iw-chr {*/
/*    position: relative;*/
/*}*/

/* close button */
.gm-style .gm-style-iw-c button {
    height: fit-content !important;
    width: fit-content !important;
}

/* close button content*/
.gm-style .gm-style-iw-c button > span {
    background-color: white !important;
    margin: 0 !important;
}

/* infowindow container */
#iw-container {
    display: flex;
    flex-direction: row;
    padding: calc(var(--responsive-spacing) / 6) !important;
    color: white !important;
    background-color: transparent !important;
}

#iw-container div {
    color: white !important;
    background-color: transparent !important;
}

#iw-container-img {
    flex: 0 0 auto;
    align-content: center;
    height: auto;
    width: 20% !important;
}

#iw-container-img img {
    height: auto;
    width: 100%;
}

#iw-container-img > a {
    outline: none !important;
}

#iw-container-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: calc(var(--responsive-spacing) / 4);
}

#iw-container-info {
    margin-bottom: calc(var(--responsive-spacing) / 4);
}

.gm-style-iw-tc::after {
    background: var(--bgDark) !important;
}
.gm-style-iw-d{
    width: 270px;
    overflow:visible !important;
}
/* MOBILE */
@media screen and (max-width: 768px) {
    .map-container {
        border-radius: var(--rounded);
        /*width: 90vw ;*/
        height: 90vw;
    }

    .gm-style .gm-style-iw-c {
        max-width: 5% !important;
        max-height: 7%;
    }
}

/* SEARCH RESULTS PAGE */

div#mapsearchresult {
    margin-bottom: var(--responsive-spacing);
}

div#mapsearchresult > div > form {
    height: 0 !important;
}

div#mapsearchresult div#map {
    margin-top: 0 !important;
    height: unset;
    margin-left: var(--responsive-spacing);
}

div#mapsearchresult1 {
    background: var(--bg);
    border-radius: var(--rounded);
    border: var(--borderBold);
    box-shadow: var(--glowSm);
    padding: calc(var(--responsive-spacing) / 3);
}

div#mapresultlist a {
    color: white !important;
}

.wp-block-query .wp-block-post img {
    border-radius: var(--rounded);
    border: var(--borderBold);
    box-shadow: var(--glowSm);
}

/* MOBILE */
@media screen and (max-width: 768px) {
    div#mapsearchresult div#map {
        height: 90vw;
        margin-left: unset;
        margin-top: var(--responsive-spacing) !important;
    }
}

/* MISC */

/*div.listing a:where(:not(.wp-element-button)) {*/
/*    color: var(--blue) !important;*/
/*}*/

/* SPOT EDIT PAGE */

div.listing > div[id^="edit"] {
    border-radius: var(--rounded);
    color: black;
    text-shadow: none;
}

div.preview-toggle {
    display: flex;
    flex-direction: row-reverse;
    justify-content: end;
    align-items: center;
}

div.preview-toggle > label {
    margin-left: var(--responsive-spacing);
}

p.socialmedialinks {
    margin: var(--responsive-spacing);
}

/* MOBILE */
@media screen and (max-width: 768px) {
    .map-container {
        border-radius: var(--rounded);
        /*width: 90vw ;*/
        height: 90vw;
    }
}

/* GAME/ PLAYER DATA */

div#taby {
    margin-top: var(--responsive-spacing);
    background: var(--bg);
    border: var(--borderBold);
    border-radius: var(--rounded);
    box-shadow: var(--glowSm);
    overflow: hidden;
}

div#taby > div.tab {
    background: transparent;
    border: none;
    border-bottom: var(--borderThin);
}

div#taby > div.tab a {
    color: var(--blue);
}

div#taby > div.tab button:hover {
    background: var(--blue);
}


div#taby > div.tab a.active {
    background: transparent;
    font-weight: 800;
    text-transform: uppercase;
    /*text-decoration: underline;*/
    border-bottom: var(--borderBoldHover);
    padding-bottom: calc(var(--responsive-spacing) / 4);
}


div#taby > div.tabcontent {
    border: none;
}

/* FOOTER */

footer {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: absolute !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    background-color: var(--bg);
    border-top: var(--borderBold);
    box-shadow: var(--glowMd);
    padding: var(--responsive-spacing) 0;
    margin-top: var(--responsive-spacing) !important;
}

footer > div {
    display: flex;
    flex-direction: row;
}

footer .footer-left {
    width: 20vw !important;
    margin: var(--responsive-spacing) !important;
}

footer .custom-logo {
    width: 80% !important;
}


footer form {
    padding-bottom: var(--responsive-spacing);
}

footer form button {
    border-radius: var(--bRadPx) !important;
    border: var(--borderThin) !important;
    background: var(--blue) !important;
    transition: var(--transition-all) !important;
}

footer form button:hover {
    background: var(--dark-blue) !important;
    border: var(--borderThinHover) !important;
}

footer form input {
    border-radius: var(--bRadPx) !important;
    border: var(--borderBold) !important;
    text-transform: capitalize !important;
    color: black !important;
    /*box-shadow: var(--glowSm);*/
}

/* MOBILE */
@media screen and (max-width: 768px) {
    footer {
        /*width: 96vw !important;*/
        /*padding: 0;*/
    }

    footer > div {
        flex-direction: column-reverse;
    }
}
.review-btn {
    text-decoration: none;
    margin-left:15px;
  appearance: none;
  position:relative;
  border: 0;
  background: #00bbf2;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 16px;
  border-radius: 9999px;

  font: 600 14px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.1px;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  box-shadow: 0 10px 18px rgba(0, 187, 242, 0.28);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.review-btn__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.review-btn:hover {
  filter: brightness(0.97);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0, 187, 242, 0.34);
}

.review-btn:active {
  transform: translateY(0px);
  box-shadow: 0 8px 16px rgba(0, 187, 242, 0.26);
}

.review-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.9),
    0 0 0 7px rgba(0, 187, 242, 0.55),
    0 12px 22px rgba(0, 187, 242, 0.34);
}

.review-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.review-btn__text {
  white-space: nowrap;
}