/*
Theme Name: Off the Wall UK
Theme URI: https://www.45b.co.uk
Author: 45b
Version: 1.0
*/

@import "style-base.css"; 

/*--------------------------------------------------------------
# Body
--------------------------------------------------------------*/

html {
  height: 100%;
  width: 100%;
  overflow: visible; 
}

html, body {
  background: #fefefe;
  color: #000;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  overflow: visible;
}

.container {max-width: 100%;}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
  /*font-family: 'Oswald', serif;*/
font-family: 'Oswald', sans-serif;
font-weight: 400;
  font-style: normal;
  line-height: 1.2em;
  margin-bottom: 0.6em;
}

.handwritten {
font-family: "Gochi Hand", cursive;
font-weight: 400;
font-style: normal;}


h1 {font-size: 2.6em; }
h2 {font-size: 2em;}
h3 {font-size: 1.6em;}
h4 {font-size: 1.4em;}
h5 {font-size: 1.2em;}

p {font-weight: 300;}
.main-copy ul, .main-copy ol {font-weight: 300; color: #000; margin-bottom: 1.5em;}

a {text-decoration: none; color: #fb0472;}
a:hover {text-decoration: none; color: #1b1b1b;}

.row-tint {background: #f0f0f0;}
strong {font-weight: bold;}

.brand-blue {color: #3bc6d1;}
.brand-yellow {color: #fadd03;}
.brand-pink {color: #fb0472;}


.cta-button {font-family: 'Oswald', Helvetica, Arial, sans-serif; background: #fb0472; color: #fff; padding: 0.5em 1em; text-wrap: nowrap; text-transform: uppercase; font-size: 1.4em;
-moz-transition: allr 0.3s; 
transition: all 0.3s; 
transform: 0.3s;}
.cta-button:hover {background: #1b1b1b; color: #fff; text-decoration: none;}

.cta-button::after {
    content: "\f061";
    font-family: FontAwesome;
    margin-left: 0.5em;
}

.cta-button-white {background: transparent; color: #fff; border: 2px solid #fff;}
.cta-button-white:hover {background: #fff; color: #000;}



/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

header {width: 100%;}

.head-logo {padding-top: 1em; padding-bottom: 1em;}
.head-logo img {width: 100%; max-width: 250px;}

.head-social i {font-size: 1.4em; color: #fb0472;  margin-right: 0.1em;
-webkit-transition: all 0.3s;
-moz-transition: allr 0.3s; 
transition: all 0.3s; 
transform: 0.3s;}
.head-social i:hover {color: #1b1b1b;}
.head-social {text-align: right;}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

.main-menu-container {display: none;}
.main-menu-container ul {list-style: none; padding: 0; margin: 0;}
.main-menu-container ul li {position: relative; display: inline-block; cursor: pointer; margin: 0 0.5em;} 
.main-menu-container a {display: inline-block; margin: 0; padding: 0; color: #1b1b1b; text-decoration: none; font-family: 'Oswald', Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: bold;}
.main-menu-container a:hover {}
    
.main-menu-container ul li.current-menu-item a, .main-menu-container ul li.current-page-ancestor a  {color: #fb0472; font-weight: bold;}
.main-menu-links {}

/* Only apply the animated underline to non-dropdown links */
.main-menu-container li a:not(.dropdown-toggle)::after {
  content: "";
  position: absolute;
  width: 0;
  top: 100%;
  height: 2px;
  background: #fb0472;
  right: 0;
  transition: width 0.3s cubic-bezier(0.37, 0, 0.21, 1.02);
}

.main-menu-container li.current-menu-item a:not(.dropdown-toggle)::after,
.main-menu-container li a:not(.dropdown-toggle):hover::after {
  left: 0;
  right: auto;
  width: 100%;
}

/* Mobile */
.menu-wrapper {
    position: absolute;
    display: block;
	top: 30px;
	right: 0;
}

.hamburger-menu {
    position: absolute;
    right: 20px;
    z-index: 1000;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
}

body.logged-in .hamburger-menu {top: 30px;}
body.logged-in .hamburger-menu.active {top: 60px;}

.hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fb0472;
    border-radius: 2px;
    transition: 0.3s;
}

/* Full-page menu styles */
.full-page-menu {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	text-align: center;
    z-index: 999;
    transition: top 0.5s ease-in-out;
}

.full-page-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.full-page-menu ul li {
    margin: 0.2em 0;
}

.full-page-menu ul li a {
font-family: 'Oswald', sans-serif;
font-weight: 400;
  font-style: normal;
    text-decoration: none;
    font-size: 2em;
    color: #fff;
    transition: color 0.3s;
	text-transform: uppercase;
	
}

.full-page-menu ul li a:hover {
    color: #fb0472;
}

/* Active menu styles */
.full-page-menu.active {
    top: 0;
}

.hamburger-menu {
  position: relative;
  width: 25px;
  height: 20px;
}

.hamburger-menu span {
  position: absolute;
  left: 0;
  width: 25px;
  height: 3px;
  background: #fb0472;
  border-radius: 2px;
  transition: 0.3s;
}

.hamburger-menu span:nth-child(1) { top: 0; }
.hamburger-menu span:nth-child(2) { top: 8px; }
.hamburger-menu span:nth-child(3) { top: 16px; }

/* Active */
.hamburger-menu.active span:nth-child(1) {
  top: 8px;
  transform: rotate(45deg);
}

.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
  top: 8px;
  transform: rotate(-45deg);
}

button:focus {outline: none;}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/

/*  Hero */
.video-header {
  position: relative;
  width: 100%;
  min-height: 500px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.video-header video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .video-header, .page-hero-container  {
    min-height: auto;
  }
}

.page-hero-container {display: flex; align-items: center; background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url("assets/images/bg-graf1.png");}
.page-hero {padding-top: 2em; padding-bottom: 2em;}
.hero-image {align-self: flex-end; display: none;}

.hero-content {padding: 4em 0;}

.heading-text {width: 100%; color: #fff; z-index: 10; transform: skewY(-6deg);}
.heading-text h1 {font-size: clamp(4rem, 5vw, 5rem); color: #1b1b1b;  font-weight: bold; letter-spacing: -2px; line-height: 1;
font-family: 'Oswald', serif; margin-bottom: 0.75em;}
h2.handwritten {font-family: "Gochi Hand", cursive; font-weight: 400; font-size: clamp(2rem, 2vw, 2rem); color: #1b1b1b; line-height: 1; margin-bottom: 1em;}

.hero-content-no-image {padding: 2em 0;}
.hero-content-no-image .heading-text {width: 100%; color: #fff; z-index: 10; transform: skewY(-2deg);}
.hero-content-no-image .heading-text h1 {font-size: clamp(2rem, 3vw, 3rem); color: #1b1b1b;  font-weight: bold; letter-spacing: -2px; line-height: 1;
font-family: 'Oswald', serif; margin-bottom: 0.75em;}
.hero-content-no-image h2.handwritten {font-family: "Gochi Hand", cursive; font-weight: 400; font-size: clamp(1rem, 2vw, 2rem); color: #1b1b1b; line-height: 1; margin-bottom: 1em;}



/************/
/* Homepage */
/************/

.content-container {padding-top: 4em; padding-bottom: 4em;}

/* Intro */
.home-intro {background: #1b1b1b; overflow-x: hidden}
.home-intro-text {color: #fff; padding: 1em 2em;}
.home-intro-text h2 {font-size: clamp(2rem, 3vw, 3rem);}
.home-intro-text h2, .home-intro-text h3, .home-intro-text h4, .home-intro-text h5, .home-intro-text h6 {color: #fff; text-transform: uppercase;}
.home-intro-link {padding: 1em 2em; text-align: center;} 
.home-intro-link img {max-width: 120px; margin-bottom: 1em;} 


/* Info Panels */
.info-panels {padding-top: 4em; padding-bottom: 4em; background-color: #fff; background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url("assets/images/bg-decks.png");}
.info-panel-image {position: relative; width: 100%; height: 300px; padding: 0; margin: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; border-radius: 5px;}
.info-panels h2 {font-family: 'Oswald', serif; color: #1b1b1b; font-size: clamp(1.8rem, 2.2vw, 2.2rem); padding: 0; margin-bottom: 0; text-transform: uppercase;}
.underline {max-width: 150px;}
.info-panels h3 {margin-bottom: 0; text-transform: uppercase; font-weight: bold;}
.info-panels h4 {margin-bottom: 0; text-transform: uppercase; font-weight: bold;}
.info-panels p {margin-top: 1em;}

.distressed-image {
  position: relative;
  isolation: isolate;
 transform: rotate(1deg);
 border: 5px solid #fff; 
 box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}


.distressed-image img {
  display: block;
  width: 100%;

  /* Noise texture controls where the image disappears */
mask-image:
  radial-gradient(
    ellipse at center,
    black 55%,
    transparent 100%
  );
  mask-size: 100% 100%;
  mask-repeat: no-repeat;

  -webkit-mask-image:
  radial-gradient(
    ellipse at center,
    black 55%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}


/* DJ Carousel */
.slider {margin-top: 2em;}

.slick-track {
  display: flex!important;
}
.slick-track .slick-slide {
  position: relative;
  margin: 0;
  padding: 0 10px;
height: auto !important;
}

.slick-slide div {display: flex!important; flex-direction: column; width: 100%; height: 100%;}

.slick-slide .dj-slide-img {width: 100%; height: 100%; min-height: 200px; border: 5px solid #fff; text-align: center; background-size: cover; background-position: center center; background-repeat: no-repeat;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;}


.slick-prev, .slick-next {z-index: 100; bottom: 0;}
.slick-prev {}
.slick-next {right: -18px;}
.slick-prev:before, .slick-next:before {font-family: 'Font Awesome 6 Pro'; font-weight: bold; color: #999;}
.slider {margin-bottom: 2em;}
.slider img {overflow: hidden; margin: 0 auto;}

.slick-next:before {content: "\f33b"; font-weight: 600; color: #1b1b1b;}
.slick-prev:before {content: "\f33a"; font-weight: 600; color: #1b1b1b;}

/* Position arrows below the carousel */
.slick-arrow {
  position: absolute;
  top: 100%; /* move below the slider */
  transform: translateY(50%); /* fine-tune vertical offset */
}

/* Move prev arrow to the left side */
.slick-prev {
  left: 50%;
  transform: translateX(-150%) translateY(50%);
}

/* Move next arrow to the right side */
.slick-next {
  right: 50%;
  transform: translateX(150%) translateY(50%);
}

/* Newsletter */
.dark-smiley {padding-top: 4em; padding-bottom: 4em; color: #fff; background-color: #1b1b1b; background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url("assets/images/bg-smiley.png");}

.dark-smiley h2 {font-family: 'Oswald', serif; color: #fb0472; font-size: clamp(1.8rem, 2.2vw, 2.2rem); padding: 0; margin-bottom: 0; text-transform: uppercase;}
.dark-smiley h3 {color: #fff; font-weight: bold; font-size: 1.2em;}

.icon-block {}
.icon-block h4 {margin-bottom: 0; color: #fadd03;}


/* Polaroids */
.polaroid-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5em;
    padding: 2em;
}

.polaroid {
    background: #fff;
    padding: 1em 1em 1.5em;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    width: 220px;
    text-align: center;
    transition: transform 0.3s ease;
	margin: 0 auto 1em auto;
}

.polaroid img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.polaroid-caption {
    margin: 1em 0 0;
    font-family:  "Gochi Hand", cursive;
    font-size: 1.3em;
    color: #333;
	line-height: 1;
}

.polaroid:nth-child(5n + 1) { transform: rotate(-4deg); }
.polaroid:nth-child(5n + 2) { transform: rotate(2deg); }
.polaroid:nth-child(5n + 3) { transform: rotate(-2deg); }
.polaroid:nth-child(5n + 4) { transform: rotate(3deg); }
.polaroid:nth-child(5n)     { transform: rotate(-1deg); }

.polaroid:hover {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}


/* Repeating Content Blocks */
.content-block {}
.content-block-inner {padding-top: 4em; padding-bottom: 4em;}
.content-block a {text-decoration: underline;}

.row-pink {background-color: #fb0472; background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url("assets/images/bg-decks.png");}
.row-white {background-color: #fff; background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url("assets/images/bg-graf1.png");}
.row-blue {background-color: #3bc6d1; background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url("assets/images/bg-decks.png");}
.row-grey {background-color: #f0f0f0; background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url("assets/images/bg-smiley.png");}
.row-black {background-color: #1e1d1f; background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url("assets/images/bg-smiley.png");}


.row-black {color: #fff;}
.row-black :is(h1, h2, h3, h4, h5, h6, a) {color: #fff;} 

.row-pink {color: #fff;}
.row-pink :is(h1, h2, h3, h4, h5, h6, a) {color: #fff;}
.row-pink .cta-button {background: #1b1b1b; color: #fff;}
.row-pink .cta-button:hover {background: #fff; color: #1b1b1b;}

.content-block-image-left {text-align: left;}
.content-block-image-right {text-align: right;}

.content-block-image-left img, .content-block-image-right img {
border: 5px solid #fff; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;}
.content-block-image-left img {margin-bottom: 2em; transform:rotate(1.5deg);}
.content-block-image-right img {margin-top: 2em; transform:rotate(-1.5deg);}

.content-block .cta-button {display: inline-block; margin-top: 1em; text-decoration: none;}

/************/
/* Subpages */
/************/

.main-copy {padding-top: 3em; padding-bottom: 3em;}

.dj-card {padding: 2em;}

.event-name {margin-bottom: 0;}
.event-date {margin-bottom: 0; color: #fb0472!important; font-weight: bold; text-transform: uppercase;}
.event-location {margin-bottom: 1em; color: #3bc6d1!important;}

.divider-bottom {width: 100%; height: 50px; background-position: top center; background-repeat: no-repeat; background-size: cover; background-image: url("assets/images/divider-bottom.png");}





/* Forms */
form {display: inline-block; padding: 2em;}
label {width: 100%; color: #fb0472; font-weight: bold; font-family: "Gochi Hand", cursive; font-style: normal; font-size: 1.4em;}
select {width: 100%; background-color: #fff; border: 2px solid #000!important; border-radius: 0; margin: 0 0 1em 0;}
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea, select {font-family: 'Open Sans', Helvetica, Arial, sans-serif; padding: 0.3em; height: inherit; border: 2px solid #000; border-radius: 0; font-weight: 300; box-shadow: none; }
input.wpcf7-submit[type=submit] {display: inline-block; width: 100%; font-family: "Gochi Hand", cursive; font-style: normal; font-size: 1.2em; border: 0; border-radius: 0; padding: 0.5em 1.0em; color: #fff; background: #fb0472; text-transform: uppercase; font-weight: bold;}
input.wpcf7-submit[type=submit]:hover {color: #fff; background: #000;}

textarea[rows] {width: 100%; border: 2px solid #000; border-radius: 0; height: 139px;}





/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

footer {background-position: center center; background-repeat: no-repeat; background-image: url("assets/images/bg-graf2.png"); background-size: cover; color: #1b1b1b;  padding-bottom: 4em;}
footer h2 {margin-bottom: 0;}
footer i {color: #fb0472; font-size: 1.4em;}
footer i:hover {color: #1b1b1b;}
.footer-contact {text-align: left;}
.footer-contact a {font-family: 'Oswald', sans-serif; color: #fb0472; font-size: 1.4em;}
.footer-contact a:hover {color: #1b1b1b;}
.footer-contact img {max-width: 150px;}

footer p {line-height: 1.4;}
footer ul {list-style: none; margin: 0; padding: 0;}
footer ul li {padding: 0;}
footer a {color: #fb0472; text-decoration: none; font-weight: bold;}
footer a:hover {color: #1b1b1b;}

.footer-col {margin-bottom: 4em; padding-top: 3em;}
.footer-col h3 {font-family: "Gochi Hand", cursive; font-size: 2.4em;
font-weight: 400;
font-style: normal; transform: rotate(-1deg);}



.legal {padding-top: 6em; font-size: 0.8em; color: #1b1b1b;}
.legal a {color: #333; font-weight: normal;}
.legal a:hover {color: #000;}

/*--------------------------------------------------------------
# Media Query
--------------------------------------------------------------*/
/* MEDIA QUERIES */

@media screen and (min-width: 200px) {

}

@media screen and (min-width: 480px) {

}

@media screen and (min-width: 640px) {
.hero-image {display: block;}
}

@media screen and (min-width: 960px) {
.container {max-width: 90%;}
.page-hero-container {}
.head-logo {text-align: left;}
.head-logo img {max-width: 250px;}

.footer-col {margin-bottom: 0;}
.main-menu-container {display: block;}
.main-menu-container {display: flex; justify-content: right;}
.menu-wrapper {display: none;}
.main-menu {display: block;}

.footer-contact {text-align: right;}
.content-block-image-left img, .content-block-image-right img {margin-bottom: 0;}
}

	
@media screen and (min-width: 991px) {


}
@media screen and (min-width: 1200px) {

}

@media print {
/* Print CSS rules go here */

}