/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/
@font-face {
  font-family: 'Ivar Display';
  src: url('./assets/custom-fonts/IvarDisplay-Regular.woff2') format('woff2'),
       url('./assets/custom-fonts/IvarDisplay-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FK Grotesk';
  src: url('./assets/custom-fonts/fk-grotesk/FKGrotesk-Regular.woff2') format('woff2'),
       url('./assets/custom-fonts/fk-grotesk/FKGrotesk-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FK Grotesk';
  src: url('./assets/custom-fonts/fk-grotesk/FKGrotesk-Bold.woff2') format('woff2'),
       url('./assets/custom-fonts/fk-grotesk/FKGrotesk-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* Custom fonts */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { 
    font-family: 'Ivar Display', 'Playfair Display', serif;
    font-weight: normal;
}

body {
    font-family: 'FK Grotesk','Manrope', sans-serif;
}
/* Other headlines such as logo banner etc and menu links */
.logo-carousel-block__header h2, .quotation-slider__quote-text, .kicker-text, .site-navigation, .lang_switcher_link {
    font-family: 'FK Grotesk','Manrope', sans-serif;
}
.columns__card h3 {
    font-family: 'FK Grotesk','Manrope', sans-serif;
    font-weight: bold;
    font-size: var(--title-xsmall-size);
}
/* CTA adjusments */
.button, .cta, input[type="submit"], .hs-button, .hsfc-Button {
    font-family: 'FK Grotesk','Manrope', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
}
/* Removing arrow from CTA */
.cta.-primary:after, .cta.-secondary:after {
    content: unset;
    letter-spacing: 0.03em;
}
a[class*='cta']:after {
    margin-bottom: 4px;
}

/* Special Kicker Style */
p.kicker-text {
    display: inline-block;
    text-transform: uppercase;
    font-size: 16px;
    padding: 5px 13px 4px 13px;
    border-radius: 48px;
    border: 1px solid #000000;
    letter-spacing: 0.03em;
    width: max-content;
}
/* Background color adjustments to accomodate more "light" intensties on the dark background variables */
.background-dark-1, .background-dark-2, .background-dark-3, .background-dark-4 {
  --site-brand-color: var(--site-brand-dark-color);
  --site-text-color: var(--site-text-dark);
  --cta-background-color: var(--site-brand-dark-color);
  --cta-text-color: var(--site-text-light);
  --cta-border-color: var(--site-brand-color);
  --cta-hover-background-color: var(--hover-ct-bg);
  --cta-hover-text-color: var(--site-text-light);
  --cta-focus-background-color: var(--site-brand-color);
  --cta-focus-text-color: var(--site-text-light);
  --cta-focus-border-color: #ffffff;
  --cta-secondary-hover-background-color: var(--site-brand-color);
  --cta-secondary-hover-text-color: var(--site-text-light);
  --cta-overlay-color: black;
}

/* Helper classes */
.padding-0-bottom {
    padding-bottom: 0;
}
.padding-0-top {
    padding-top: 0;
}
.padding-small-bottom {
    padding-bottom: calc(var(--block-padding-vertical) * 0.5);
}
.padding-small-top {
    padding-top: calc(var(--block-padding-vertical) * 0.5);
}
.padding-medium-bottom {
    padding-bottom: calc(var(--block-padding-vertical) * 0.75);
}
.padding-medium-top {
    padding-top: calc(var(--block-padding-vertical) * 0.75);
}
.purple-text {
    color: #8A40E8;
}

/* Overlap helper classes */
.overlap {
    position: relative;
}
.overlap .visma-module {
    z-index: 1;
}
.overlap::after {
    content: "";
    position: absolute;
}

.overlap.-top::after, .overlap.-bottom::after {
    width: 100%;
    left: 0;
    background-color: #ffffff;
    height: calc(var(--block-padding-vertical) * 1.25);
}
.overlap.-top::after {
    top: 0;
}
.overlap.-bottom::after {
    bottom: 0;
    padding-bottom: 0;
}

.overlap.-to-white::after {
    background-color: #ffffff;
}
.overlap.-to-light-1::after {
    background-color: var(--background-light-1);
}
.overlap.-to-light-2::after {
    background-color: var(--background-light-2);
}
.overlap.-to-light-3::after {
    background-color: var(--background-light-3);
}
.overlap.-to-light-4::after {
    background-color: var(--background-light-4);
}
.overlap.-to-dark-1::after {
    background-color: var(--background-dark-1);
}
.overlap.-to-dark-2::after {
    background-color: var(--background-dark-2);
}
.overlap.-to-dark-3::after {
    background-color: var(--background-dark-3);
}
.overlap.-to-dark-4::after {
    background-color: var(--background-dark-4);
}

.overlap.-small::after {
    height: calc(var(--block-padding-vertical) * 1.25);
}
.overlap.-medium::after {
    height: calc(var(--block-padding-vertical) * 2);
}
.overlap.-large::after {
    height: 40%;
}
/* Adjusting banner image position and text max-width */
.background:has(.banner-block) {
    background-position-y: center;
}
@media screen and (min-width: 1000px) {
    .banner-block__text.-narrow {
        max-width: 50% !important;
    }
}
/* FAQ module tweak */
.faq-module .accordion.h4 {
    font-family: 'FK Grotesk','Manrope', sans-serif;
    font-size: var(--title-xsmall-size);
    font-weight: bold;
}
.faq-module .faq-accordion {
    border-bottom: 1px solid #F5F2E8;
}
/* Image + graphic overlay */
.text-block:has(.image-and-graphic-overlay) {
    align-items: center !important;
}
@media screen and (max-width: 767px) {
    .image-and-graphic-overlay {
        --image-and-graphicic-overlay-image-padding: 10%;
        --image-and-graphicic-overlay-graphic-scaling: 1.12;
    }
} 
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .image-and-graphic-overlay {
        --image-and-graphicic-overlay-image-padding: 8%;
        --image-and-graphicic-overlay-graphic-scaling: 1.10;
    }
} 
@media screen and (min-width: 1200px) {
    .image-and-graphic-overlay {
        --image-and-graphicic-overlay-image-padding: 5%;
        --image-and-graphicic-overlay-graphic-scaling: 1.25;
    }
}   
.image-and-graphic-overlay {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: var(--image-and-graphicic-overlay-image-padding);
}
.image-and-graphic-overlay {
    position: relative;
}
.image-and-graphic-overlay .graphic-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(var(--image-and-graphicic-overlay-graphic-scaling));
    max-height: none !important;
    max-width;: none !important;
}
.image-and-graphic-overlay .main-image {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
    aspect-ratio: 1/1;
    max-height: none !important;
    max-width;: none !important;
}

/* Interactivity for product offering section */
.section-product-offering .columns__card :has(a),
.section-product-offering .product-finder__card:has(a) {
    transition: 0.2s all ease-in-out;
}
.section-product-offering .columns__card :has(a):hover,
.section-product-offering .product-finder__card:has(a):hover {
    transform: scale(1.02);
    -webkit-filter: drop-shadow(0px 4px 32px rgba(0, 0, 0, 0.06));
    filter: drop-shadow(0px 4px 32px rgba(0, 0, 0, 0.06));
}


/* Menu restyling */
:root {
    --menu-backgroud-color: #F5F2E8;
}
/* 2. Create the overlay on the header-wrapper, hidden by default */
.header-wrapper::before {
  content: '';
  position: fixed; /* Fix the overlay to the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* 20% black background */
  background: rgba(0, 0, 0, 0.3);
  
  /* Sit just behind the header content */
  z-index: -1; 
  
  /* Animate the fade effect */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  
  /* Make it unclickable */
  pointer-events: none;
}

/* 3. Show the overlay when a menu is expanded inside the header-wrapper */
.header-wrapper:has(.menu-item__submenu-button[aria-expanded="true"])::before {
  opacity: 1;
}
.header-wrapper:has(.menu-item__submenu-button[aria-expanded="true"]) .is-relative.background {
  background-color: var(--menu-backgroud-color) !important;
}

/* Adjust padding */
.header-wrapper .submenu-column-wrapper.-multi-col {
	  padding: var(--space-48) 0;
}
/* Legacy solution, introduces shifts
.header-wrapper button.menu-item__submenu-button[aria-expanded="true"] {
    font-variation-settings: 'wght' 700;
    border-bottom: 4px solid #121212;
    --active-link-bg: transparent;
}
*/
/* Add bold to dropdown primary link without introducing shifts */
.bold-without-offset {
  position: relative;
}

.bold-without-offset::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-text-color); 
  visibility: hidden;
	letter-spacing: -0.2px;
}
.menu-item__submenu-button[aria-expanded="true"] .bold-without-offset,
.header-wrapper.-sticky.-transparent .menu-item__submenu-button[aria-expanded="true"] .bold-without-offset {
  color: transparent !important;
}
.menu-item__submenu-button[aria-expanded="true"] .bold-without-offset::after {
  visibility: visible;
}
.menu-item.has-submenu .menu-item__submenu-button[aria-expanded="true"] {
  border-bottom: 4px solid #121212;
  --active-link-bg: transparent;
}

.header-wrapper button.menu-item__submenu-button[aria-expanded="true"] .submenu-button-text,
.header-wrapper button.menu-item__submenu-button[aria-expanded="true"] .submenu-button-icon.-drop-down {
    transform: translateY(2px);
}
/* Fix bug with the sideways position of dropdown */
.header-wrapper .un-list.submenu-list {
    --subnav-left-position: 0 !important;
}
/* This selector targets the header when the button is active */
.header-wrapper:has(button[aria-expanded="true"]:not(.navigation-toggle)),
.header-wrapper .un-list.submenu-list.background {
    background-color: var( --menu-backgroud-color) !important;
}
.header-wrapper .submenu-column-wrapper.-multi-col {
	  border-top: 1px solid #121212;
}

/* Restyle links and column headers */
.header .submenu-column-header {
	  text-transform: uppercase;
	  font-size: var(--text-small-size);
	  font-weight: bold;
}

@media screen and (min-width: 1200px) and (max-width: 1599px) {
	  .header {
			  padding-left: 0; 
			  padding-right: 0;
	  }
	  .submenu-column-wrapper.-multi-col,
	  .header {
			  margin: var(--header-padding);
	  }	
}
.header .submenu-item__link {
	  text-transform: uppercase;
    font-weight: bold;
    font-size: var(--text-size-small);
}
/* Primary link */
.header .submenu-column:has(.link-tile) {
    padding: var(--space-32); 
    background-color: #D6BDFF;
	  height: 100%;
	  display: flex;
    flex-direction: column;
	  background-image: url(https://26202244.fs1.hubspotusercontent-eu1.net/hubfs/26202244/raw_assets/public/product-pages-theme-drafit_v2/assets/images/DrafiItTheme-menu-primary-tile-bg.svg);
	  background-size: cover;
	  background-position: bottom;
	  min-height: 354px;
	  text-decoration: none;
}
.header .link-tile {
    font-size: var(--title-small-size);
	  font-weight: bold;
	  font-family: 'Ivar Display', 'Playfair Display', serif;
    font-weight: normal;
	  text-transform: none;
}
.header .submenu-column:has(.link-tile) .submenu-column-list {
	  height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.header .submenu-column:has(.link-tile) .submenu-item:nth-child(1) {
    font-size: var(--text-size-medium);
}
.header .submenu-column:has(.link-tile) .submenu-item__link {
    padding: 0;
}

.header .submenu-column:has(.submenu-tile) .submenu-column-header {
	  display: none;
}
.header .submenu-column .submenu-item:has(.submenu-tile) {
	  position: relative;
	  background: #ffffff;
	  padding: var(--space-16);
}
.header .submenu-column .submenu-item:has(.submenu-tile)::after {
	  position: absolute;
	  content: "";
	  right: 20px;
	  top: 50%;
    transform: translateY(-50%);
	  height: 23px;
	  width: auto; 
	  aspect-ratio: 27 / 21;
	  background-image: url(https://26202244.fs1.hubspotusercontent-eu1.net/hubfs/26202244/raw_assets/public/product-pages-theme-drafit_v2/assets/icons/arrow-right-large.svg);
	  background-size: cover;
}
.header .submenu-column .submenu-tile {
	  text-decoration: none;
	  cursor: pointer;
}
.header .submenu-column .submenu-tile .submenu-item__link {
	  padding: 0;
	  margin-bottom: 8px;
	  font-weight: bold;
	  font-size: var(--text-medium-size);
}
.header .submenu-column .submenu-tile .link-description {
	  margin-bottom: 0;
	  font-size: 14px;
}
.header .menu-item:has(.tab-resources) .submenu-column {
	  background-color: #ffffff;
	  padding: var(--space-16);
	  position: relative;
}

.header .menu-item:has(.tab-resources) .submenu-column-header {
    font-size: var(--title-xsmall-size);
	  font-weight: bold;
	  font-family: 'Ivar Display', 'Playfair Display', serif;
    font-weight: normal;
	  text-transform: none;
}
.header .menu-item:has(.tab-resources) p:has(.link-description) {
    font-size: var(--text-small-size);
	  margin-bottom: 0;
}
.header .menu-item:has(.tab-resources) a {
    position: absolute;
	  width: 100%;
	  height: 100%;
	  left: 0;
	  top: 0;
	  opacity: 0;
	  z-index: 1;
}

/* Dropdown specific code */
.header .menu-item:has(.tab-our-solutions) .submenu-column-wrapper.-multi-col {
	  grid-column-gap: 0;
}
.header .menu-item:has(.tab-our-solutions) .submenu-column-wrapper.-multi-col .submenu-column:nth-child(n + 2):nth-child(-n + 3) {
	  padding-left: var(--space-64);
}
.header .menu-item:has(.tab-resources) .submenu-column-wrapper.-multi-col {
	  grid-column-gap: var(--space-16);
}