/* Main Styles */

* {
  box-sizing: border-box;
}

body {
  background-color: var(--background-grey-2);
  font-family: var(--font-family);

  opacity: 0;
  transition: opacity 0.3s;
}

/* body::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: red;
  z-index: 999999;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background-color: red;
  z-index: 999999;
} */

body.fadeIn {
  opacity: 1;
}

body.fadeOut {
  opacity: 0;
}

a {
  -webkit-tap-highlight-color: transparent;
}

input:focus {
  outline: none;
}

[hidden], .hidden {
  display: none !important;
}

.page-spacer {
  height: 60px;
}

/* Grid system */
.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12 equal columns */
  column-gap: 12px; /* Gutter space */
  margin: 0 auto; /* Centre the grid */
  padding: 0 12px; /* Outer margins (left & right) */
  box-sizing: border-box; /* Ensure padding is included in width */
  width: 100%;
}

#content {
  background-color: var(--background-grey-2);
  position: relative;
  z-index: 2;
}

.home #content {
  margin-top: initial;
}


.bottom-nav-container {
  padding: 48px 0;
}

.bottom-nav-container a {
  color: var(--Grey-600, #666);
}

.bottom-nav-container .bottom-nav--link-back {
  grid-column: span 6;
}

.bottom-nav-container .bottom-nav--back-to-top {
  grid-column: span 6 / -1;
  justify-self: end;
}


/* Breakpoints */

/* 768px breakpoint - Tablet */
@media (min-width: 768px) {
  
}

/* 1440px breakpoint - Desktop */
@media (min-width: 1440px) {
  
}

/* 1920px breakpoint - Extra Large Desktop */
@media (min-width: 1920px) {
  
}


.no-padding {
  padding: 0;
}


.scrollTriggerEnd {
  height: 0px;
}

.scroll-down-icon {
  display: block;
  position: absolute;
  bottom: 104px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

/* Complianz styling --------------------------------------------------------------------------- */
.cmplz-document {
  grid-column: span 12;
  justify-self: center;
}

/* Default page template styles ---------------------------------------------------------------- */

.default-page-template-container .grid-container {
  justify-items: center;
}

.default-page-template-container .grid-container p{
  grid-column: span 12;
  max-width: 770px;
  width: 100%;
}

.default-page-template-container .grid-container .wp-block-heading {
  grid-column: span 12;
  max-width: 770px;
  width: 100%;
}

.default-page-template-container .grid-container .wp-block-image {
  grid-column: span 12;
  max-width: 770px;
  width: 100%;
}

.default-page-template-container .grid-container .wp-block-list {
  grid-column: span 12;
  max-width: 770px;
  width: 100%;
}

.wp-block-list li{
  margin-bottom: 8px; 
}



/* Custom cursor styles ------------------------------------------------------------------------ */
body, a, button, .hover-target, div {
  cursor: none !important; /* hide default cursor */
}

.cursor {
  background-color: initial;
  display: initial;
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1) ;
  transition: background-color 0.15s ease, transform 0.15s ease;
  z-index: 99999;

  backface-visibility: hidden;
  will-change: transform;
}

.cursor.hover {
  transform: translate(-50%, -50%) scale(0.6);
  background-color: #ffffff;
}

.cursor.click {
  transform: translate(-50%, -50%) scale(0.4);
  background-color: #ffffff;
}

/* .cursor::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border: 1px solid;
  border-color: transparent;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: 8px;
  transform: translate(-50%, -50%) scale(1) ;
  transition: width 0.15s ease, height 0.15s ease, border-color 0.15s ease, top 0.15s ease, left 0.15s ease;
} */

/* .cursor.click::before {
  border-color: #ffffff;
  width: 50px;
  height: 50px;
  top: 10px;
  left: 10px;
} */

.cursor::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 1px solid transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.2s ease, border-color 0.15s ease;
}

.cursor.click::before {
  border-color: #ffffff;
  transform: translate(-50%, -50%) scale(5); /* scale from 10px to ~50px */
}


/* Hide on touch devices */
@media (hover: none), screen and (max-width: 768px) {
  .cursor {
    display: none;
  }
}



/* Custom styles for the imported content */
.w-richtext-figure-type-video {
  position: relative;
  width: 100%;
}

.w-richtext-figure-type-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Animate in components */
.animate-in-component, .wp-block-lvhart-custom-image-block, .w-richtext-figure-type-image, .wp-block-heading, .journal-content-inner-container p, .exhibition-address, .exhibition-intro-title, .exhibition-details, .exhibition-ctas-container, .exhibition-featured-artists-container {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
  will-change: opacity, transform;
}

.animate-in-component--quick {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  will-change: opacity, transform;
}

.animate-in-component.in-view, .animate-in-component--quick.in-view, .wp-block-lvhart-custom-image-block.in-view, .w-richtext-figure-type-image.in-view, .wp-block-heading.in-view, .journal-content-inner-container p.in-view, .exhibition-address.in-view, .exhibition-intro-title.in-view, .exhibition-details.in-view, .exhibition-ctas-container.in-view, .exhibition-featured-artists-container.in-view {
  opacity: 1;
  transform: translateY(0);
}



/* Responsive image styles */
.responsive-image--mobile {
  display: initial;
}

.responsive-image--desktop {
  display: none;
}

@media screen and (min-width: 768px) {
  .responsive-image--mobile {
    display: none;
  }

  .responsive-image--desktop {
    display: initial;
  }
}