@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
  --color-ocean-50:   #e6f7fa;
  --color-ocean-100:  #c0eaf0;
  --color-ocean-200:  #96dce6;
  --color-ocean-300:  #5cc9d9;
  --color-ocean-400:  #00b7cc;
  --color-ocean-500:  #008CAA;
  --color-ocean-600:  #007693;
  --color-ocean-700:  #00617d;
  --color-ocean-800:  #004d66;
  --color-ocean-900:  #00394f;

  --color-lemon-50:   #ffffea;
  --color-lemon-100:  #ffffc5;
  --color-lemon-200:  #ffff85;
  --color-lemon-300:  #fffa46;
  --color-lemon-400:  #ffeb1d;
  --color-lemon-500:  #E6E68C;
  --color-lemon-600:  #d9d300;
  --color-lemon-700:  #b3a902;
  --color-lemon-800:  #938500;
  --color-lemon-900:  #7a6b06;

  --color-fire-50:    #fff3ec;
  --color-fire-100:   #ffe2d3;
  --color-fire-200:   #ffc0a5;
  --color-fire-300:   #ff926d;
  --color-fire-400:   #ff5d3f;
  --color-fire-500:   #FA4B00;
  --color-fire-600:   #eb3000;
  --color-fire-700:   #c32200;
  --color-fire-800:   #9c1d06;
  --color-fire-900:   #7d1a0b;

  --color-lavender-50:  #fbf7ff;
  --color-lavender-100: #f4e9ff;
  --color-lavender-200: #ead6ff;
  --color-lavender-300: #dab5ff;
  --color-lavender-400: #c484ff;
  --color-lavender-500: #C8A0DC;
  --color-lavender-600: #a368d2;
  --color-lavender-700: #8a4dbf;
  --color-lavender-800: #743fa3;
  --color-lavender-900: #603585;

  --color-black:      #000000;
  --color-white:      #FFFFFF;

  --color-orange-50:  #f9f5e5;
  --color-orange-100: #faefbf;
  --color-orange-200: #f6e580;
  --color-orange-300: #f2d13d;
  --color-orange-400: #eab413;
  --color-orange-500: #f7a823;
  --color-orange-600: #d56f05;
  --color-orange-700: #b45309;
  --color-orange-800: #93410f;
  --color-orange-900: #793511;

  --font-family-sans:    'Schibsted Grotesk', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-family-brush:   'BeastModeBrush', cursive;
  --font-family-heading: 'Schibsted Grotesk', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

  --font-sans:    var(--font-family-sans);
  --font-brush:   var(--font-family-brush);
  --font-heading: var(--font-family-heading);
}
/* BeastModeBrush - Regular */
@font-face {
  font-family: "BeastModeBrush";
  src: url("../fonts/BeastModeBrush/font.woff2") format("woff2"),
       url("../fonts/BeastModeBrush/font.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Schibsted Grotesk - BlackNormal */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk/SchibstedGrotesk-Black.woff2") format("woff2"),
       url("../fonts/SchibstedGrotesk/SchibstedGrotesk-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Schibsted Grotesk - BlackItalic */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk/SchibstedGrotesk-BlackItalic.woff2") format("woff2"),
       url("../fonts/SchibstedGrotesk/SchibstedGrotesk-BlackItalic.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
/* Schibsted Grotesk - Bold */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk/SchibstedGrotesk-Bold.woff2") format("woff2"),
       url("../fonts/SchibstedGrotesk/SchibstedGrotesk-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Schibsted Grotesk - BoldItalic */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk/SchibstedGrotesk-BoldItalic.woff2") format("woff2"),
       url("../fonts/SchibstedGrotesk/SchibstedGrotesk-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* Schibsted Grotesk - Extra Bold */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk/SchibstedGrotesk-ExtraBold.woff2") format("woff2"),
       url("../fonts/SchibstedGrotesk/SchibstedGrotesk-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* Schibsted Grotesk - Extra BoldItalic */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk/SchibstedGrotesk-ExtraBoldItalic.woff2") format("woff2"),
       url("../fonts/SchibstedGrotesk/SchibstedGrotesk-ExtraBoldItalic.woff") format("woff");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
/* Schibsted Grotesk - Italic */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk/SchibstedGrotesk-Italic.woff2") format("woff2"),
       url("../fonts/SchibstedGrotesk/SchibstedGrotesk-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* Schibsted Grotesk - Medium */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk/SchibstedGrotesk-Medium.woff2") format("woff2"),
       url("../fonts/SchibstedGrotesk/SchibstedGrotesk-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Schibsted Grotesk - MediumItalic */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk/SchibstedGrotesk-MediumItalic.woff2") format("woff2"),
       url("../fonts/SchibstedGrotesk/SchibstedGrotesk-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
/* Schibsted Grotesk - Regular */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk/SchibstedGrotesk-Regular.woff2") format("woff2"),
       url("../fonts/SchibstedGrotesk/SchibstedGrotesk-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Schibsted Grotesk - SemiBold */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk/SchibstedGrotesk-SemiBold.woff2") format("woff2"),
       url("../fonts/SchibstedGrotesk/SchibstedGrotesk-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Schibsted Grotesk - SemiBoldItalic */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk/SchibstedGrotesk-SemiBoldItalic.woff2") format("woff2"),
       url("../fonts/SchibstedGrotesk/SchibstedGrotesk-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
.container {
  @apply mx-auto w-11/12 md:w-full sm:max-w-[640px] md:max-w-[768px] lg:max-w-[1000px] xl:max-w-[1236px] 2xl:max-w-[1336px] px-4;
}

.menu-desktop {
  @apply flex flex-row space-x-2 text-gray-900 dark:text-white;
}

body {
  font-family: var(--font-family-sans);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
}

.site {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.site .site-main {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.mainContent {
  overflow: hidden;
  word-break: break-word;
  hyphens: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
span,
blockquote {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  -webkit-hyphens: auto !important;
  -moz-hyphens: auto !important;
  hyphens: auto !important;
}

#sb_instagram .sbi_info p {
  text-align: start;
  padding: 10px 0;
}

.draw, .draw-left, .draw-right {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.is-visible .draw,
.is-visible .draw-left,
.is-visible .draw-right {
  animation: draw 3s ease-in-out forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw-left {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw-right {
  to {
    stroke-dashoffset: 0;
  }
}

.post-content img {
  border-radius: 32px;
  width: 100%;
}

.post-content :is(p, h1, h2, h3, h4, h5, h6) {
  max-width: 952px;
}

.post-content :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-ocean-500);
  font-family: var(--font-family-heading);
  font-style: normal;
  font-weight: 700;
  line-height: 140.625%; /* 67.5px */
}

.post-content h1 {
  font-size: 64px;
}

.post-content h2 {
  font-size: 48px;
}

.post-content h3 {
  font-size: 36px;
}

.post-content h4 {
  font-size: 30px;
}

.post-content h5 {
  font-size: 24px;
}

.post-content h6 {
  font-size: 20px;
}

.post-content .wp-element-caption {
  margin-top: 32px;
  margin-bottom: 0 !important;
}

.post-content .wp-block-image, .wp-block-columns {
  margin-bottom: 0;
}