/*
Theme Name: Twenty Twenty-four Child
Theme URI: https://loom-works.com/
Author: LOOM Works
Author URI: https://loom-works.com/
Template: twentytwentyfour
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* CSS reset */

body .is-layout-flow > * + * {
  margin-block-start: unset;
  margin-block-end: unset;
}
.wp-site-blocks {
  padding-bottom: unset;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  text-decoration: underline;
}

a {
  white-space: normal;
}

ul,
ol {
  list-style: none;
}

/* xx CSS reset xx */

@media screen and (min-width: 990px) {
  header .wp-block-navigation__responsive-close {
    display: initial;
  }
}

body,
html {
  height: 100%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 990px) {
  .mobile-center-header {
    justify-content: flex-start !important;
  }
  .offices-text {
    padding-right: 0 !important;
  }

  .brands-list {
    display: none;
  }

  .company-stats .stats-column > div.wp-block-column {
    flex-basis: 25% !important;
  }
}

/* wpcf-7 doubleform, singleform, singleform-textarea & input styling */
@media screen and (min-width: 990px) {
  .doubleform p {
    min-width: 45%;
  }
}

/* Doubleform = two inputfields on one line, singleform = one. */
.doubleform,
.singleform {
  margin-bottom: 3em;
}
@media screen and (max-width: 990px) {
  .doubleform p {
    margin-bottom: 3em;
  }
}

/* For singleform textareas */
.singleform-textarea {
  margin-bottom: 2em;
}

.doubleform input,
.singleform input,
.singleform-textarea textarea {
  max-width: 100%;
  display: block;
  width: 100%;
  padding: 0.5em;
  border: 1px solid black;
  border-bottom: 1px solid #000;
  background: transparent;
  font-size: 1em;
  border-top: none;
  border-left: none;
  border-right: none;
}
@media screen and (min-width: 990px) {
  .doubleform {
    display: flex;
    justify-content: space-between;
    -moz-column-gap: 20px;
    column-gap: 20px;
  }
}
/* Removes inputfield default styling outline */
:focus-visible {
  outline: inherit;
}

form.wpcf7-form * {
  transition: all 100ms;
}

form span.wpcf7-not-valid-tip {
  position: relative;
  color: #e87676;
}

div.wpcf7-response-output {
  padding: 1em !important;
  margin: 0 !important;
}

form.wpcf7-form p {
  margin-top: 0;
}

div.wpcf7 .ajax-loader {
  display: none;
  background: none;
  animation: spin 1s cubic-bezier(0.36, 0.09, 0.27, 0.97) infinite;
  border: 3px solid #dedede;
  border-top: 3px solid #000000;
  border-radius: 50%;
  height: 1em;
  width: 1em;
  margin: 0;
  vertical-align: middle;
}

.wpcf7-form-control.g-recaptcha.wpcf7-recaptcha {
  opacity: 0.75;
}

/* ** classes for editor ** */

/* class = "no-padding" removes padding from element - simon */
@media screen and (max-width: 990px) {
  .no-padding-mobile {
    padding: 0 !important;
  }
}

/* class = "fit-content" sets the element to fit content - simon */
.fit-content {
  width: fit-content !important;
}

/* class = "thin-seperator" sets the seperator to 0.5px - simon  (changed to 0.3px to get a total width of 0.6px - kristian) */
.thin-seperator {
  border: 0.3px solid #1e1e1e;
}
/* thin-seperator */
/* class = "desktop-hidden" hides on desktop - simon */
@media screen and (min-width: 990px) {
  .desktop-hidden {
    display: none !important;
  }
}
/* hide on desktop */

/* class = "no-link" removes link from element - simon */
.no-link a {
  pointer-events: none;
  cursor: default;
}
.no-link a:hover {
  text-decoration: none;
}
.no-link a:active {
  text-decoration: none;
}
.no-link a:focus {
  text-decoration: none;
}
.no-link a:visited {
  text-decoration: none;
}

/* class = "smooth-scroll" enables smoothscroll on body - simon */
html:has(.smooth-scroll) {
  scroll-behavior: smooth;
}
/* smooth scroll */

/* class = "desktop-hidden" hides on desktop - simon */
@media screen and (max-width: 990px) {
  .mobile-hidden {
    display: none !important;
  }
}
/* hide on desktop */

/* class = "sticky” sticky header - simon */
header.sticky.wp-block-template-part {
  position: sticky;
  top: 0;
  padding-top: 0.5em;
  z-index: 6;
  background-color: #fff;
}

@media screen and (min-width: 600px) {
  .logged-in header.sticky.wp-block-template-part {
    top: 32px;
  }
}
/* sticky header */

/* class = "xxl" set the text to wrap and reduces size on mobiel - simon */
h1,
h2,
h3,
h4,
.xxl {
  overflow-wrap: anywhere; /* wrap very large texts vertically */
}
@media screen and (max-width: 990px) {
  h1 {
    font-size: 1.5625em !important;
  }
  h2,
  h3,
  h4,
  .xxl {
    font-size: 2.3em !important;
  }
}
/* XXL text reduce and font size */

/* class = "right-arrow" arrow in button, works on a - simon */
.right-arrow a:after {
  content: url("data:image/svg+xml,%3Csvg width='19' height='14' viewBox='0 -1 19 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.4211 1L18 7M10.4211 13L18 7M18 7H0' stroke='black'/%3E%3C/svg%3E%0A");
  padding-left: 1em;
  vertical-align: middle;
}

.right-arrow-white a:after {
  content: url("data:image/svg+xml,%3Csvg width='19' height='14' viewBox='0 -1 19 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.4211 1L18 7M10.4211 13L18 7M18 7H0' stroke='white'/%3E%3C/svg%3E%0A");
  padding-left: 1em;
  vertical-align: middle;
}
.right-arrow a {
  padding-right: 1em !important;
}
.right-arrow {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
/* right arrow in button */

/* class = "line-seperator" seperator with line - simon */
.line-separator a:has(+ span):after {
  content: "|";
  padding: 0.5em;
}

.line-separator span {
  display: none;
}

/* class = "full-height-block" sets element to height 100% and spaces content evenly - simon */

.full-height-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* full height block */
/* class = "height-100" sets element to height 100% - simon */
.height-100 {
  height: 100%;
}
.height-100 > .wp-block-column > .wp-block-group {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.height-100 .wp-block-cover {
  height: 100%;
}
/* height 100 */
/* class = "height-100vh" sets element to height 100vh - simon */
.height-100vh {
  height: calc(100dvh - 6.5rem);
  height: calc(100vh - 10em);
}
.height-100vh > .wp-block-column > .wp-block-group {
  height: 100vh;
}
/* height 100 */

/* class = "list-spacing" arrow in button, works on a - simon */
.list-spacing li {
  padding: 1em 0.5em;
}

.list-spacing {
  padding-left: 1em;
}
/* list spacing */

/* class = "right-arrow" arrow in button, works on a - simon */
@media screen and (max-width: 990px) {
  .row-wrap {
    flex-direction: column;
    align-items: flex-start !important;
  }
}
/* right arrow in button */

/* xx classes for editor xx */

/* ** BI menu styling ** */

/* hide menu when open - temp */
button.wp-block-navigation__responsive-container-close {
  left: 0;
  top: 1em;
}

nav:has(.is-menu-open) > button {
  opacity: 0;
}

.open-on-hover-click.wp-block-navigation-item > a,
.wp-block-navigation__container > li:not(.has-small-font-size) > a {
  font-size: 3em !important;
  font-weight: 500;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  position: relative;
}
ul.wp-block-navigation__submenu-container {
  display: block;
}
.wp-block-navigation__responsive-container > div {
  padding-left: calc((100vw - var(--wp--style--global--content-size)) / 2);
  margin: 0;
}
@media screen and (max-width: 1650px) {
  .wp-block-navigation__responsive-container > div {
    padding-left: var(--wp--style--root--padding-left);
  }
}

/* ** new blog styling ** */
body:has(.news-wrap) .wp-site-blocks {
  display: flex;
  flex-direction: column;
  /* height: 100%; */
}
body:has(.news-wrap) header.sticky.wp-block-template-part {
  flex-shrink: 0;
}
body:has(.news-wrap) footer.wp-block-template-part {
  flex-shrink: 1;
  margin-block-start: unset !important;
}
body:has(.news-wrap) main#wp--skip-link--target {
  flex-grow: 1;
  margin-top: unset !important;
}
body:has(.news-wrap) .news-wrap.page-width {
  height: 100%;
  margin-block-start: unset !important;
}
body:has(.news-wrap) .entry-content:has(.news-wrap) {
  height: 100%;
}
body:has(.news-wrap) .wp-block-group {
  margin-block-start: unset !important;
}

/* xx new blog styling xx */
#page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#header,
#footer {
  flex-shrink: 0;
}

/* unset wp-site-blocks padding top - simon */
.wp-site-blocks {
  padding-top: unset !important;
}

/* ** half width overlay menu ** */
.wp-block-navigation__responsive-container.is-menu-open {
  top: 50px;
  max-width: 45%;
  padding: 0;
  background-color: #edd3ca;
}

@media screen and (max-width: 990px) {
  .wp-block-navigation__responsive-container.is-menu-open {
    max-width: 100%;
  }
}

.logged-in .wp-block-navigation__responsive-container.is-menu-open {
  top: calc(50px + 35px);
}
/* xx half width overlay menu xx */
.open-on-hover-click.wp-block-navigation-item > a,
.wp-block-navigation__container > li > div {
  font-size: 3em !important;
  font-weight: 500;
}

@media screen and (min-width: 990px) {
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .has-child
    .submenu-container,
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .has-child
    .wp-block-navigation__submenu-container {
    background-color: inherit;
    color: inherit;
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: normal;
    opacity: 0;
    transition: opacity 0.1s linear;
    transition-duration: 0.1s;
    transition-timing-function: linear;
    transition-delay: 0s;
    transition-property: opacity;
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;
    left: -1px;
    top: 100%;
  }

  .wp-block-navigation
    .has-child:not(.open-on-click):hover
    > .wp-block-navigation__submenu-container {
    position: static !important;
    visibility: visible;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    opacity: 1;
    width: auto;
    height: auto;
    min-width: 200px;
  }
}

.button_previous,
.button_back {
  padding-right: 20px;
  padding-left: 10px;
}

.button_next {
  padding-left: 20px;
  padding-right: 10px;
  margin-left: auto;
}

.button_back {
  width: 120px !important;
}

@media screen and (min-width: 990px) {
  .button_back {
    display: none !important;
  }
}
@media screen and (max-width: 990px) {
  .mobile-hidden {
    display: none;
  }

  .button-container {
    flex-direction: column;
    column-gap: 20px;
  }

  .button_back {
    margin-bottom: 40px;
  }

  .button_next {
    order: -1;
    margin-left: 0;
    margin-bottom: 20px;
    margin-top: 20px;
  }
}

p:has(.remote-url) {
  position: relative;
}

.remote-url {
  position: absolute;
  right: 50;
  bottom: 0;
}
