@import 'tailwindcss' theme(static);
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/aspect-ratio";
@source "../views/";
@source "../../app/";
@source "safelist.txt";
@source "../images/";

:root {
  --font-sans: Apercu, sans-serif;
  --font-heading: Apercu, sans-serif;
  --font-mono: Apercu-mono, sans-serif;
}

@theme {
  --aspect-*: initial;
  --aspect-1: 1;
  --aspect-2: 2;
  --aspect-3: 3;
  --aspect-4: 4;
  --aspect-5: 5;
  --aspect-6: 6;
  --aspect-7: 7;
  --aspect-8: 8;
  --aspect-9: 9;
  --aspect-10: 10;
  --aspect-11: 11;
  --aspect-12: 12;
  --aspect-13: 13;
  --aspect-14: 14;
  --aspect-15: 15;
  --aspect-16: 16;
  --aspect-auto: auto;
  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --aspect-initial: initial;
  --aspect-1_5: 3 / 2;
  --aspect-1_3333333333333333: 4 / 3;

  --color-granit-400: #f7f7f7;
  --color-granit-500: #e7e6e2;
  --color-granit-600: #ceccc3;
  --color-granit-700: #b4b1a5;
  --color-granit-800: #9b9786;
  --color-granit-900: #7f7b69;
  --color-granit-950: #808080;
  --color-granit: #e7e6e2;

  --color-bauer-50: #59ffcb;
  --color-bauer-100: #44ffc5;
  --color-bauer-200: #1bffb8;
  --color-bauer-300: #00f2a6;
  --color-bauer-400: #00c98a;
  --color-bauer-500: #00a06e;
  --color-bauer-600: #006847;
  --color-bauer-700: #003021;
  --color-bauer-800: #000000;
  --color-bauer-900: #000000;
  --color-bauer-950: #000000;
  --color-bauer: #00a06e;

  --color-vattern-200: #fcfefe;
  --color-vattern-300: #def2f2;
  --color-vattern-400: #c1e6e7;
  --color-vattern-500: #a3dadc;
  --color-vattern-600: #7acacd;
  --color-vattern-700: #52b9bd;
  --color-vattern-800: #3b989c;
  --color-vattern-900: #2c7073;
  --color-vattern-950: #245d5f;
  --color-vattern: #a3dadc;

  --color-black-text-200: #404040;
  --color-black-text: #1a1a1a;

  --color-gray-line: #eee;

  --grid-template-columns-18: repeat(18, minmax(0, 1fr));
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

/* Remove underline that WP sets by default */
a:where(:not(.wp-element-button)) {
  text-decoration: none;
}

/* Hide elements with the x-cloak attribute */
[x-cloak] {
  display: none !important;
}

/* Add smooth scroll  */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* Font-face */
@font-face {
  font-family: Apercu;
  src: url('../fonts/apercu-bold-desktop-web/apercu-bold.otf')
      format('opentype'),
    url('../fonts/apercu-bold-desktop-web/apercu-bold.woff') format('woff'),
    url('../fonts/apercu-bold-desktop-web/apercu-bold.woff2') format('woff2');

  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: Apercu;
  src: url('../fonts/apercu-medium-desktop-web/apercu-medium.otf')
      format('opentype'),
    url('../fonts/apercu-medium-desktop-web/apercu-medium.woff') format('woff'),
    url('../fonts/apercu-medium-desktop-web/apercu-medium.woff2')
      format('woff2');

  font-display: swap;
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: Apercu;
  src: url('../fonts/apercu-regular-desktop-web/apercu-regular.otf')
      format('opentype'),
    url('../fonts/apercu-regular-desktop-web/apercu-regular.woff')
      format('woff'),
    url('../fonts/apercu-regular-desktop-web/apercu-regular.woff2')
      format('woff2');

  font-display: swap;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: Apercu;
  src: url('../fonts/apercu-light-desktop-web/apercu-light.otf')
      format('opentype'),
    url('../fonts/apercu-light-desktop-web/apercu-light.woff') format('woff'),
    url('../fonts/apercu-light-desktop-web/apercu-light.woff2') format('woff2');

  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: Apercu-mono;
  src: url('../fonts/apercu-mono-regular-desktop-web/apercu-mono-regular.otf')
      format('opentype'),
    url('../fonts/apercu-mono-regular-desktop-web/apercu-mono-regular.woff')
      format('woff'),
    url('../fonts/apercu-mono-regular-desktop-web/apercu-mono-regular.woff2')
      format('woff2');
}

body {
  -webkit-font-smoothing: antialiased; /* looks better */
  -moz-osx-font-smoothing: grayscale; /* looks better */
}

[id] {
  @apply scroll-mt-36  lg:scroll-mt-24;
}

.bg-gradient {
  background: linear-gradient(95deg, #00a06e 37.82%, #0cc66d 94.99%);
}

.bg-gradient-b-to-t {
  background: linear-gradient(45deg, #00a06e 0%, #0cc66d 100%), #f7f7f7;
}

.padding-x-container {
  @apply px-4 lg:px-12;
}

/* .margin-x-container {
  @apply px-4 lg:px-0 lg:max-w-[608px] 2xl:max-w-4xl mx-auto;
} */

.bg-noise {
  background-image: url('../images/bg-noise.png');
}

/* .prose {
  @apply text-black max-w-full list-inside marker:text-black;
} */
/* 
.prose {
  @apply max-w-full list-inside;
}  */

/* .prose p {
  @apply max-w-3xl;
} */

.prose img {
  @apply h-full w-full;
}

.text-pretty {
  text-wrap: pretty;
}

.text-balance {
  text-wrap: balance;
}

.xlarge {
  @apply text-6xl hyphens-auto break-words;
  @media screen and (min-width: 1536px) {
    font-size: clamp(3.75rem, 5vw, 5rem);
  }
}
.large {
  @apply text-4xl lg:text-[55px] hyphens-auto break-words;
  @media screen and (min-width: 1536px) {
    font-size: clamp(3.45rem, 4vw, 3.8rem);
  }
}
.medium {
  @apply text-3xl;
  @media screen and (min-width: 1536px) {
    font-size: clamp(1.875rem, 2vw, 2.5rem);
    @apply leading-tight;
  }
}
.small {
  @apply text-2xl;
}
.xsmall {
  @apply text-xl;
}

/* Font size 18px */
.paragraph-large {
  @apply text-lg;
  @media screen and (min-width: 1536px) {
    font-size: clamp(1.125rem, 1.0833rem + 0.2222vw, 1.3rem);
  }
}

/* Font size 16px */
.paragraph-medium {
  @apply text-base;
  @media screen and (min-width: 1536px) {
    font-size: clamp(1rem, 0.9583rem + 0.2222vw, 1.1rem);
  }
}

/* Font size 14px */
.paragraph-small {
  @apply text-sm;
  @media screen and (min-width: 1536px) {
    font-size: clamp(0.875rem, 1vw, 1rem);
    @apply leading-tight max-w-xl;
  }
}

/* Knowledge content */

/* Fix line heigt for specific block */
.knowledgeContent .wp-block-knowledge-heading-block h1 {
  @apply leading-tight!;
}

.knowledgeContent .containerCoreBlock p,
ul,
ol {
  @apply prose max-w-3xl text-[var(--color-black-text)] mt-1 mb-4 leading-8;
}

.knowledgeContent ul {
  @apply prose max-w-3xl list-disc list-inside marker:text-black;
}

.knowledgeContent ol {
  @apply prose max-w-3xl list-decimal list-inside marker:text-black;
}

.knowledgeContent h1 {
  @apply text-4xl lg:text-5xl font-bold text-balance leading-8;
}

.knowledgeContent h2 {
  @apply text-3xl lg:text-4xl font-bold text-balance leading-8;
}

.knowledgeContent h3 {
  @apply text-2xl lg:text-2xl font-bold text-balance leading-8;
}

.knowledgeContent h4 {
  @apply text-xl lg:text-xl font-bold text-balance leading-8;
}

.knowledgeContent h5 {
  @apply text-lg lg:text-lg font-bold text-balance leading-8;
}

.knowledgeContent h6 {
  @apply text-base lg:text-base font-bold text-balance leading-8;
}

.knowledgeContent figure {
  @apply py-4 lg:py-8;
}

/* Breadcrumbs */
#breadcrumbs a:hover {
  @apply text-[var(--color-bauer)] transition-all;
}

/* Nav */
.nav-primary ul {
  @apply flex gap-6;
}

/* Sidebar nav */
.mobilMeny {
  max-height: calc(100dvh - 135px);
}

.nav-knowledge div {
  @apply p-4;
}

.nav-knowledge > div > ul > li {
  @apply border-b border-black py-2 font-medium text-base;
}

.nav-knowledge > div > ul > li > .sub-menu {
  @apply pl-2 py-1;
}

.nav-knowledge > div > ul > li > .sub-menu > li {
  @apply font-normal;
}

/* Jump to section */
#nav-jump-to-section {
  @apply font-normal text-sm mt-5 leading-tight;
}

#nav-jump-to-section li {
  @apply pl-3 border-[var(--color-gray-line)] border-l-[3px] py-1.5 text-left my-0;
}

#nav-jump-to-section li.active {
  @apply border-[var(--color-bauer)] font-bold border-l-[3px];
}

#nav-jump-to-section li a {
  @apply no-underline;
}

/** Crop image **/
.triangle-right {
  clip-path: polygon(0 0, 100% 0, calc(100% - 100px) 100%, 0% 100%);
  @media screen and (max-width: 1022px) {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
  }
}

.triangle-left {
  clip-path: polygon(calc(0% + 100px) 0, 100% 0, 100% 100%, 0% 100%);
  @media screen and (max-width: 1022px) {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
  }
}

.triangle-left-social {
  clip-path: polygon(calc(0% + 100px) 0, 100% 0, 100% 100%, 0% 100%);
  @media screen and (max-width: 1022px) {
    clip-path: polygon(0 0, 100% calc(0% + 100px), 100% 100%, 0% 100%);
  }
}

.triangle-top {
  clip-path: polygon(0 0, 100% calc(0% + 100px), 100% 100%, 0% 100%);
}

.triangle-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
}

.triangle-right-puff {
  clip-path: polygon(0 0, 100% 0, calc(100% - 50px) 100%, 0% 100%);
  @media screen and (min-width: 1022px) {
    clip-path: polygon(0 0, 100% calc(0% + 100px), 100% 100%, 0% 100%);
  }
}

/* .triangle-holder {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  @apply z-10;
} */

.triangle-list-right {
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
}

/* Embed Microsoft BI */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* For Webkit-based browsers (Chrome, Safari and Opera) */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.js-focus-point-image {
  @apply object-cover w-full h-full;
}

/* 
* Search WP
*/
.searchwp-form {
  @apply border-b border-[var(--color-gray-line)] w-full;
}

header .searchwp-form {
  @apply border-none lg:border-b lg:border-[var(--color-gray-line)] lg:border-solid;
}

form.searchwp-form input.swp-input--search {
  @apply bg-none bg-transparent text-2xl lg:text-5xl lg:font-bold placeholder:text-[var(--color-granit-950)] text-[var(--color-black-text)] lg:placeholder:text-[var(--color-bauer)] pl-0 active:border-none focus:outline-hidden;
  background-image: none !important; 
  background-repeat: no-repeat !important;
}

form.searchwp-form input.swp-input--search::after {
  @apply hidden;
}

form.searchwp-form .swp-flex--row {
  @apply flex items-center!;
}

.searchwp-form .search-submit {
  background-image: url('../images/icon-search.svg');
  background-repeat: no-repeat;
  @apply w-6 h-6 cursor-pointer;
}

/* clears the ‘X’ from Internet Explorer */
input[type='search']::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}
input[type='search']::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
/* clears the ‘X’ from Chrome */
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  display: none;
}

/**
* Facet
**/
.search_type .facet-label {
  @apply font-bold text-base font-sans;
}

.facetwp-facet-search_type {
  @apply flex gap-2;
}

.facetwp-facet-search_type .facetwp-radio {
  @apply bg-none bg-[var(--color-granit-400)] px-3 transition-all hover:bg-[var(--color-bauer)] hover:text-white hover:font-medium;
}

.facetwp-facet-search_type .facetwp-radio.checked {
  @apply bg-none bg-[var(--color-bauer)] text-white font-medium;
}

.facetwp-facet-search_type .facetwp-radio .facetwp-display-value {
  @apply p-0 text-sm;
}

.facetwp-facet-search_type .facetwp-counter {
  @apply hidden;
}

/*
.facetwp-facet-search_type .facetwp-radio{
  @apply text-bold
} */

button.facetwp-load-more {
  @apply bg-[var(--color-bauer)] text-white font-bold px-6 pt-4 pb-[16px] uppercase font-sans tracking-[2px] text-sm hover:bg-[var(--color-bauer-600)] transition-all;
}

.media_tags .facet-label,
.media_type .facet-label {
  @apply font-semibold text-xl font-sans mb-2;
}
.facetwp-facet-media_type,
.facetwp-facet-media_tags {
  @apply flex gap-3;
}

.facetwp-facet-media_type .facetwp-radio,
.facetwp-facet-media_tags .facetwp-checkbox {
  @apply bg-none bg-[var(--color-bauer)] px-5 py-2 transition-all hover:bg-[var(--color-bauer)] hover:text-white hover:font-medium;
}

.facetwp-facet-media_type .facetwp-radio.checked,
.facetwp-facet-media_tags .facetwp-checkbox.checked {
  @apply bg-none bg-[var(--color-bauer)] text-white font-medium relative;
}

.facetwp-facet-media_tags .facetwp-checkbox.checked::after {
  content: url('../images/icon-close.svg');
  @apply w-5 h-5  absolute -right-1 -top-2 p-1 rounded-full;
}

.facetwp-facet-media_type .facetwp-counter,
.facetwp-facet-media_tags .facetwp-counter {
  @apply hidden;
}

.reset .facet-label {
  @apply hidden;
}

.search .facet-label {
  @apply font-semibold text-3xl font-sans mb-4;
}

.search .facetwp-search {
  @apply bg-[var(--color-granit-400)] px-5 py-2 transition-all focus:outline-hidden;
}

.search .facetwp-facet-search .facetwp-icon {
  @apply hidden!;
}

.search .facetwp-facet-search .facetwp-search-submit {
  @apply bg-[var(--color-bauer)] text-white font-medium px-5 py-2 hover:bg-[var(--color-bauer-600)] transition-all;
}

.search .facetwp-input-wrap {
  @apply flex gap-2;
}

.facetwp-reset {
  @apply underline underline-offset-2 text-xs;
}

/* Video Hero */
.wp-block-hero-block .video-wrapper {
  height: 105%;
}

.wp-block-hero-block video {
  max-width: initial;
  min-width: 100%;
  min-height: 100%;
  height: -webkit-fill-available;
  object-fit: cover;
}

.wp-block-hero-block video::-webkit-media-controls {
  display: none;
}

/* Rotate arrow */
.rotateArrow {
  transform: rotate(-45deg);
}

/* Newsletter form */
.hf-form input[type='submit'] {
  @apply bg-white text-[var(--color-bauer)] h-12 text-sm uppercase font-bold px-6 py-4 hover:bg-[var(--color-bauer-700)] hover:text-white transition-all tracking-[2px];
}

.hf-form .hf-message.hf-message-success {
  @apply text-white font-semibold;
}

/* Use specifik block on normal page */
.pageContent .wp-block-inner-heading-block {
  @apply px-4 lg:px-0 lg:max-w-[608px] 2xl:max-w-4xl mx-auto;
}

.pageContent .wp-block-inner-heading-block .inner-heading {
  @apply max-w-(--breakpoint-2xl) mx-auto;
}

.pageContent .containerCoreBlock {
  @apply px-4 lg:px-0 lg:max-w-[608px] 2xl:max-w-4xl mx-auto;
}

.pageContent .containerCoreBlock > .innerCoreBlock {
  @apply max-w-(--breakpoint-2xl) mx-auto prose text-[var(--color-black-text)];
}

.pageContent .containerCoreBlock > .innerCoreBlock p {
  @apply max-w-3xl my-1;
}

.pageContent .containerCoreBlock > li {
  @apply max-w-(--breakpoint-2xl) mx-auto prose text-[var(--color-black-text)];
}

.pageContent ul {
  @apply prose list-disc list-inside marker:text-[var(--color-black)] max-w-none;
}

.pageContent .wp-block-knowledge-highlights {
  @apply px-4 lg:px-0 lg:max-w-[608px] 2xl:max-w-4xl mx-auto;
}

.pageContent .wp-block-knowledge-highlights .inner-highligts {
  @apply max-w-(--breakpoint-2xl) mx-auto;
}

.pageContent .wp-block-knowledge-images {
  @apply px-4 lg:px-0 lg:max-w-[608px] 2xl:max-w-4xl mx-auto;
}

.pageContent .wp-block-knowledge-image-simple {
  @apply px-4 lg:px-0 lg:max-w-[608px] 2xl:max-w-4xl mx-auto;
}

.pageContent .wp-block-knowledge-images .inner-images {
  @apply max-w-(--breakpoint-2xl) mx-auto;
}

.pageContent .wp-block-knowledge-numbered-list {
  @apply px-4 lg:px-0 lg:max-w-[608px] 2xl:max-w-4xl mx-auto;
}

.pageContent .wp-block-knowledge-numbered-list .inner-list {
  @apply max-w-(--breakpoint-2xl) mx-auto;
}

.pageContent > .wp-block-button-block {
  @apply px-4 lg:px-0 lg:max-w-[608px] 2xl:max-w-4xl mx-auto;
}

.pageContent > .wp-block-button-block .inner-button {
  @apply max-w-(--breakpoint-2xl) mx-auto;
}

/* Event card */
.eventCardBorder {
  &:not(:first-child) {
    @apply xl:pl-2 border-0 xl:border-l border-[var(--color-black-text-200)];
  }
}

/* Video embed */
.wp-block-embed {
  @apply px-4 lg:px-0 lg:max-w-[608px] 2xl:max-w-4xl mx-auto;
}