/** Variables **/
:root {
  /** Brand colours */
  --brand-colour-cream: #F8F3E6;
  --brand-colour-black: #0e1015;
  --brand-colour-white: #FFF;
  --brand-colour-grey: #EEE;
  --brand-colour-purple: #342e6a;
  --brand-colour-yellow: #f4d500;
  --brand-colour-mint: #AED5AC;
  --brand-colour-green: #28B36F;
  --brand-colour-orange: #DF6C26;
  --brand-colour-beige: #fbf4e9;
  /** Solutions */
  --brand-colour-wrkcloud: #F9D300;
  --brand-colour-stckcloud: #B7D5B0;
}

/** Breakpoints */
/** WordPress defaults **/
:root {
  /** Breakpoints - we use scss variables so they can be used in media queries */
  --breakpoint-mobile: 30rem;
  --breakpoint-tablet: 45rem;
  --breakpoint-desktop: 80rem;
  --breakpoint-desktop-large: 90rem;
  --breakpoint-widescreen: 108rem;
  /** WordPress vars - spacing **/
  --wp--preset--spacing--20: 20px;
  --wp--preset--spacing--30: 30px;
  --wp--preset--spacing--40: 40px;
  --wp--preset--spacing--50: 50px;
  --wp--preset--spacing--60: 60px;
  --wp--preset--spacing--70: 70px;
  --wp--preset--spacing--80: 80px;
  /** WordPress vars - typography **/
  --wp--preset--font-size--small: 0.9rem;
  --wp--preset--font-size--medium: 1.2rem;
  --wp--preset--font-size--large: 2rem;
  --wp--preset--font-size--x-large: 2.5rem;
  /** Position **/
  --move-2x-small: 1px;
  --move-x-small: 3px;
  --move-small: 10px;
  --move-medium: 20px;
  --move-large: 40px;
  --move-x-large: 60px;
  --move-2x-large: 100px;
  /** Rotation **/
  --rotate-2x-small: 1deg;
  --rotate-x-small: 2deg;
  --rotate-small: 3deg;
  --rotate-medium: 10deg;
  --rotate-large: 20deg;
  --rotate-x-large: 45deg;
  --rotate-2x-large: 70deg;
}

@media (max-width: 80rem) {
  :root {
    /** WordPress vars - spacing **/
    --wp--preset--spacing--20: 10px;
    --wp--preset--spacing--30: 15px;
    --wp--preset--spacing--40: 20px;
    --wp--preset--spacing--50: 25px;
    --wp--preset--spacing--60: 30px;
    --wp--preset--spacing--70: 35px;
    --wp--preset--spacing--80: 40px;
  }
}
/** Core styles **/
.wp-block-post-content {
  position: relative;
  margin-block-start: 0;
  z-index: 2;
}

footer {
  position: relative;
  z-index: 1;
}

.order-back {
  z-index: 0;
}

@media (max-width: 80rem) {
  .wp-block-post-content {
    padding: 0 20px;
  }
  .wp-block-post-content .wp-block-cover,
  .wp-block-post-content .quadzu-hero {
    margin-left: -20px;
    margin-right: -20px;
  }
}
.underline {
  text-decoration: underline;
  text-decoration-color: var(--brand-colour-yellow);
  text-decoration-thickness: 5px;
  text-underline-offset: 10px;
}

/** Text fancy bits **/
.text-circled,
.text-circled-yellow,
.text-circled-mint,
.text-circled-thick {
  position: relative;
  z-index: 1;
  display: inline-block;
  &:before {
    z-index: -1;
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background-image: url(img/text-circled.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
}

.text-circled-yellow {
  &:before {
    background-image: url(img/text-circled-yellow.svg);
  }
}

.text-circled-mint {
  &:before {
    background-image: url(img/text-circled-mint.svg);
  }
}

.text-circled-thick {
  &:before {
    background-image: url(img/text-circled-thick.svg);
  }
}

/** CSS Properties **/
@media (max-width: 80rem) {
  .no-aspect-ratio-mobile {
    aspect-ratio: unset !important;
  }
}
@media (max-width: 45rem) {
  .margin-none-mobile {
    margin: 0;
  }
  .margin-none-l-mobile {
    margin-left: 0;
  }
  .margin-none-r-mobile {
    margin-right: 0;
  }
  .margin-none-t-mobile {
    margin-top: 0;
  }
  .margin-none-b-mobile {
    margin-bottom: 0;
  }
  .margin-none-mobile-important {
    margin: 0 !important;
  }
  .margin-none-l-mobile-important {
    margin-left: 0 !important;
  }
  .margin-none-r-mobile-important {
    margin-right: 0 !important;
  }
  .margin-none-t-mobile-important {
    margin-top: 0 !important;
  }
  .margin-none-b-mobile-important {
    margin-bottom: 0 !important;
  }
}
@media (max-width: 80rem) {
  .margin-none-tablet {
    margin: 0;
  }
  .margin-none-l-tablet {
    margin-left: 0;
  }
  .margin-none-r-tablet {
    margin-right: 0;
  }
  .margin-none-t-tablet {
    margin-top: 0;
  }
  .margin-none-b-tablet {
    margin-bottom: 0;
  }
  .margin-none-tablet-important {
    margin: 0 !important;
  }
  .margin-none-l-tablet-important {
    margin-left: 0 !important;
  }
  .margin-none-r-tablet-important {
    margin-right: 0 !important;
  }
  .margin-none-t-tablet-important {
    margin-top: 0 !important;
  }
  .margin-none-b-tablet-important {
    margin-bottom: 0 !important;
  }
}
@media (max-width: 45rem) {
  .padding-none-mobile {
    padding: 0;
  }
  .padding-none-l-mobile {
    padding-left: 0;
  }
  .padding-none-r-mobile {
    padding-right: 0;
  }
  .padding-none-t-mobile {
    padding-top: 0;
  }
  .padding-none-b-mobile {
    padding-bottom: 0;
  }
  .padding-none-mobile-important {
    padding: 0 !important;
  }
  .padding-none-l-mobile-important {
    padding-left: 0 !important;
  }
  .padding-none-r-mobile-important {
    padding-right: 0 !important;
  }
  .padding-none-t-mobile-important {
    padding-top: 0 !important;
  }
  .padding-none-b-mobile-important {
    padding-bottom: 0 !important;
  }
}
@media (max-width: 80rem) {
  .padding-none-tablet {
    padding: 0;
  }
  .padding-none-l-tablet {
    padding-left: 0;
  }
  .padding-none-r-tablet {
    padding-right: 0;
  }
  .padding-none-t-tablet {
    padding-top: 0;
  }
  .padding-none-b-tablet {
    padding-bottom: 0;
  }
  .padding-none-tablet-important {
    padding: 0 !important;
  }
  .padding-none-l-tablet-important {
    padding-left: 0 !important;
  }
  .padding-none-r-tablet-important {
    padding-right: 0 !important;
  }
  .padding-none-t-tablet-important {
    padding-top: 0 !important;
  }
  .padding-none-b-tablet-important {
    padding-bottom: 0 !important;
  }
}
/** Responsive styles **/
@media (max-width: 45rem) {
  .hide-on-mobile {
    display: none !important;
  }
}
@media (max-width: 80rem) {
  .hide-on-tablet {
    display: none !important;
  }
}
/** Components **/
.wp-block-cover {
  .wp-block-cover__inner-container {
    text-align: center;
    h1.has-background {
      display: inline-block;
      margin: 0 auto;
    }
  }
}

details.central-more-info {
  summary {
    text-decoration: none;
    text-align: center;
    &::marker {
      content: "";
    }
  }
}

details.underline-more-info {
  summary {
    text-decoration: underline;
    text-decoration-color: var(--brand-colour-black);
    text-decoration-thickness: 3px;
    text-underline-offset: 10px;
    &::marker {
      content: "";
    }
  }
}

@media (max-width: 45rem) {
  .grid-stack-on-mobile {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 80rem) {
  .grid-stack-on-tablet {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 90rem) {
  .grid-stack-on-desktop {
    grid-template-columns: 1fr;
  }
}
.yellow-tick-list {
  li {
    list-style: none;
    position: relative;
    padding-left: 2em;
    &::before {
      content: "";
      background: url(./img/yellow-tick.webp) no-repeat left center;
      background-size: contain;
      position: absolute;
      left: 0;
      top: 0.3em;
      width: 1em;
      height: 1em;
    }
  }
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
  margin: 0 auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation-submenu__toggle {
  cursor: unset;
  margin-bottom: var(--wp--preset--spacing--20);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container li {
  width: 100%;
  text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container li button {
  display: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container li.has-child > button {
  font-weight: bold;
  display: block;
  text-align: center;
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container li.has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  display: block;
  text-align: center;
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container li.has-child > .wp-block-navigation-item__content {
  font-weight: bold;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container li ul {
  padding: 0;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container li a {
  display: block;
  text-align: center;
  width: 100%;
  padding-top: var(--wp--preset--spacing--20);
  padding-bottom: var(--wp--preset--spacing--20);
  margin-bottom: calc(var(--wp--preset--spacing--20) / 2);
}

/** HAMBURGER MENU BREAKPOINT **/
/* Revert core styles at default breakpoint */
@media (min-width: 600px) {
  /* Keep hiding the expanded menu */
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
  /* Keep showing the button to open the menu */
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}
/** Apply the styles on anything smaller than large desktop */
@media (min-width: 90rem) {
  /* Show the expanded menu */
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block;
  }
  /* Hide the button to open the menu */
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none;
  }
}
/** FULL SIZE NAV - CHANGES DIRECTION OF SUB SUBMENU ITEMS FROM POPPING OUT LEFT TO POPPING OUT RIGHT **/
@media (min-width: 782px) {
  .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
  .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
  .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
  .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    left: 100%;
    right: auto;
  }
}
.nf-form-cont {
  .nf-field-container {
    margin-bottom: 5px;
  }
  .nf-form-fields-required,
  label {
    display: none;
  }
  input,
  select,
  textarea {
    border: none;
    border-radius: 0.2rem;
    padding: 10px;
    line-height: 1.5rem;
    font-family: var(--wp--preset--font-family--nunito-sans);
  }
  .submit-wrap {
    input[type=submit] {
      cursor: pointer;
      color: var(--brand-colour-white);
      background-color: var(--brand-colour-green);
      font-size: 1.2rem;
      padding: 10px 100px 10px 10px;
      position: relative;
      background-image: url(./img/kite-white.svg);
      background-size: 50px 30px;
      background-repeat: no-repeat;
      background-position: center right;
      &:active {
        top: 1px;
      }
    }
  }
}

/** Patterns **/
.pattern-lets-build-something-great-person {
  position: absolute !important;
  left: -50px;
  bottom: -60px;
}

.product-feature-icon {
  width: 80px;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  float: none !important;
  & + p {
    margin-top: 0;
  }
  &.alignright {
    position: absolute;
    top: -40px;
    left: calc(100% - 70px);
  }
  &.alignleft {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.wp-block-group:has(> .product-feature-icon.alignleft) {
  padding-left: 100px;
}

.wp-block-group:has(> .product-feature-icon.alignright) {
  margin-top: 20px;
}

/** Pages **/
.page-content-home .home-software-solutions-reimagined-person {
  position: absolute;
  top: -100px;
  left: -80px;
}
.page-content-home .home-what-we-do-best-s {
  position: absolute;
  top: 20px;
  right: 30px;
}
.page-content-home .home-why-choose-us-cog {
  position: absolute;
  bottom: -60px;
  right: 100px;
}
.page-content-home .home-end-to-end-expertise-jigsaw {
  position: absolute;
  bottom: -20px;
  right: -20px;
}

@media screen and (max-width: 45rem) {
  .page-content-home .home-what-we-do-best-s {
    top: unset;
    bottom: -70px;
    right: 30px;
  }
  .page-content-home .home-why-choose-us-cog {
    right: 30px;
  }
  .page-content-home .home-end-to-end-expertise-jigsaw {
    bottom: 10px;
    right: -60px;
  }
}
.page-content-who-are-we .about-s {
  position: absolute !important;
  top: 20px;
  right: -50px;
}
.page-content-who-are-we .about-meet-the-team-magnify {
  position: absolute !important;
  top: -37px;
  right: -30px;
}
.page-content-who-are-we .who-are-we-bio {
  overflow: hidden;
}
.page-content-who-are-we .who-are-we-bio figure > a {
  padding: 20px 20px 0 20px;
}
.page-content-who-are-we .who-are-we-bio div:has(details) {
  position: relative;
  top: -20px;
}
.page-content-who-are-we .who-are-we-bio details summary {
  position: relative;
  z-index: 2;
}
.page-content-who-are-we .who-are-we-bio details summary strong:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}

@media screen and (max-width: 80rem) {
  .page-content-who-are-we .about-s {
    position: relative !important;
    top: -20px;
    right: 0;
  }
  .page-content-who-are-we .about-book-a-demo {
    position: absolute !important;
    bottom: -60px;
    right: -10px;
  }
  .page-content-who-are-we .book-a-demo-wrapper h3 {
    margin-right: 250px;
  }
  .page-content-who-are-we .about-meet-the-team-magnify {
    right: auto;
    left: -30px;
    top: 50px;
    transform: scaleX(-1);
  }
}
@media screen and (max-width: 45rem) {
  .page-content-who-are-we .book-a-demo-wrapper h3 {
    margin-right: 0;
    padding-bottom: 100px;
  }
  .page-content-who-are-we .about-book-a-demo img {
    width: 75%;
  }
}

/*# sourceMappingURL=style-common.css.map */