/* ========================================
 *  GENERAL
 * ======================================== */

:root
{
   /* Main text and background colors. */
   --black: black;
   --blue: #046BAF;

   /* Button and highlight color. */
   --grey: #CCC;

   /* Shadow color. */
   --orange: #FC8F00;

   /* Slider color. */
   --white: white;
}

body
{
   background-color: var(--blue);
   color: var(--white);
   font-family: Arial, Helvetica, sans-serif;
   margin: 0;
}

/* ========================================
 *  COLOUR SCHEMES
 * ======================================== */

.white-on-blue
{
   background-color: var(--blue);
   color: var(--white);
}

.blue-on-white
{
   background-color: var(--white);
   color: var(--blue);
}

/* Override default link color. */
.white-on-blue a
{
   color: var(--white);
}

.blue-on-white a
{
   color: var(--blue);
}

.logo-small,
.logo-big,
.logo-balls
{
   color: var(--white);
}

/* ========================================
 *  TYPOGRAPHY
 * ======================================== */

/* Main section title. */
.title
{
   font-size: 5rem;
   margin-left: 5vw;
   /* title should have at least 100px to prevent blocking by header. */
   margin-top: 120px;   
}

h3
{
   font-size: 2.5rem;
}

h4
{
   font-size: 1.5rem;
}


/* MOBILE */
@media (max-width: 768px)
{
   .title
   {
      box-sizing: border-box;
      font-size: 2rem;
      /* title should have at least 65px to prevent blocking by header. */
      margin-top: 85px;  
      
      max-width: 100%;
      overflow-wrap: anywhere;
   }
}


/* ========================================
 *  DARK MODE
 * ======================================== */

.dark-mode
{
   --blue: rgb(0, 0, 153);
   --orange: rgb(97, 54, 6);
   --white: #7979C9;

   --dark-mode-img-opacity: .5;
}

.dark-mode img
{
   opacity: var(--dark-mode-img-opacity);
   transition: opacity .5s ease-in-out;
}


/* ========================================
 *  BLOCKS LAYOUTS
 * ======================================== */

/*
┌───────────────┐     ┌───────────────┐
│    Block 1    │     │    Block 2    │
└───────────────┘     └───────────────┘
*/
.blocks
{
   align-items: stretch;
   column-gap: 3rem;
   /* Allow explicit row assignment. */
   /* grid-template-rows: auto auto; */

   display: grid;

   grid-template-columns: repeat(2, minmax(0, 700px));

   /* Center blocks on page. */
   margin: 0 auto;
}


/*
┌────┐  ┌────┐  ┌────┐  ┌────┐
│ 1  │  │ 2  │  │ 3  │  │ 4  │
└────┘  └────┘  └────┘  └────┘
*/

.four-blocks
{
   align-items: stretch;
   column-gap: 2rem;

   display: grid;
   grid-template-columns: repeat(4, minmax(0, 400px));

   /* center blocks on page. */
   margin: 0 auto;

   /* Stretch the block to the tallest. */
   row-gap: 2rem;
}

.four-blocks .block-button-wrapper
{
   /* max-width: 400px; */
   margin: 0 auto;
}


/*
┌──────┐  ┌──────┐
│  1   │  │  2   │
└──────┘  └──────┘

┌──────┐  ┌──────┐
│  3   │  │  4   │
└──────┘  └──────┘
*/

@media (max-width: 1400px)
{
   .four-blocks
   {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: 90%;
   }
}

/*
┌──────────────┐
│      1       │
└──────────────┘
┌──────────────┐
│      2       │
└──────────────┘
┌──────────────┐
│      3       │
└──────────────┘
┌──────────────┐
│      4       │
└──────────────┘
*/


@media (max-width: 768px)
{
   .blocks,
   .four-blocks
   {
      grid-auto-rows: auto;
      grid-template-columns: minmax(0, 1fr);
      row-gap: 2rem;
      width: 100%;
   }

   .blocks .block,
   .four-blocks .block
   {
      height: auto;
      min-height: 250px;
      min-width: 0;
      width: 100%;
   }

   .blocks .block-content-area,
   .four-blocks .block-content-area
   {
      height: auto;
      overflow: visible;
   }

   .blocks .block-image-area,
   .four-blocks .block-image-area
   {
      flex-shrink: 0;
      height: auto;
      margin-top: 1rem;
      overflow: visible;
   }

   .blocks .block-image-area img,
   .four-blocks .block-image-area img
   {
      height: auto;
      object-fit: contain;
      width: 100%;
   }
}

/* ========================================
 *  BLOCK ELEMENT
 * ======================================== */

.block
{
   box-shadow: 0 4px 12px var(--black);
   box-sizing: border-box;

   display: flex;
   /* height: 100%; */

   flex-direction: column;
   max-width: 650px;
   min-height: 250px;

   opacity: 1;

   padding: 1rem;
   transform: scale(1);
   transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Basic layout. */
/* ┌─────────────────────────┐
   │                         │
   │ text                    │
   │ text                    │
   │ text                    │
   │                         │
   │ ┌─────────────────────┐ │
   │ │                     │ │
   │ │       IMAGE         │ │
   │ │                     │ │
   │ └─────────────────────┘ │
   │                         │
   │          date           │
   └─────────────────────────┘ */


/* The text is allowed to grow. */
.block-content-area
{
   flex: 0 1 auto;
   height: auto;
   overflow: visible;
}

/* Push the image to the bottom. */
.block-image-area
{
   flex: 0 0 250px;
   margin-top: auto;

   overflow: hidden;
   /* height: 250px; */

   padding-top: 1rem;
}

/* Image fills the image area. */
.block-image-area img
{
   display: block;
   height: 100%;
   object-fit: cover;
   object-position: left top;
   /* Show top left part of image. */
   width: 100%;
}

/* Date stays below the image. */
.block .date
{
   flex: 0 0 auto;
   /* margin-top: auto; */
   margin-top: 1rem;
}


/* Change cursor since block is clickable. */
.block[role="link"]
{
   cursor: pointer;
}

/* Used on about page. */
.block h3
{
   text-align: center;
}

.block p
{
   line-height: 1.6;
   margin: 0 1rem;
}

/* ========================================
 *  BLOCK TITLE
 * ======================================== */

/* Used to place icon and header in one row. */
/* Used on markets page. */
.block-title-row
{
   align-items: center;
   display: flex;
   gap: 10px;
}

.block-title-row h4
{
   margin: 0;
}

/* ========================================
 *  BLOCK + BUTTON
 * ======================================== */


/* Basic block + button layout.

             grid column
    ┌─────────────────────────┐
    │                         │
    │    ┌───────────────┐    │
    │    │               │    │
    │    │     BLOCK     │    │
    │    │               │    │
    │    └───────────────┘    │
    │         [Button]        │
    │                         │
    └─────────────────────────┘
 */

/*  Keep button below block. */
.block-button-wrapper
{
   align-items: center;
   display: flex;

   flex-direction: column;
   margin-bottom: 20px;
   min-width: 0;

   width: 100%;
}

/* Stretch the wrapper to the tallest grid item in the row. */
.block-button-wrapper .block
{
   flex: 1;
   /* box-sizing: border-box; */
   width: 100%;
}

/* Position button below block. */
.button-container
{
   display: flex;
   justify-content: center;
   margin-top: 30px;
   width: 100%;
}

/* ========================================
 *  BLOCK STATES
 * ======================================== */


/* Apply hover effect unless block has a no hover class. */
/* Used for contact info to prevent text from getting fuzzy. */
.block:not(.no-hover):hover
{
   box-shadow: 0 10px 25px var(--black);
   transform: translateY(-0.25rem) scale(1.03);
}

/* Used in combination white checkboxes on all news page. */
.block.hide
{
   opacity: 0;
   transform: scale(0.95);
}

.block.hidden
{
   display: none;
}

/* ========================================
 *  BUTTON ELEMENT
 * ======================================== */

.button
{
   /* Shape, background. */
   align-items: center;
   background: var(--orange);
   border-radius: 10px;
   /* Niet te rond want dat mag niet van Chris. */
   box-shadow: 0 4px 12px var(--black);

   cursor: pointer;

   /* Label. */
   display: flex;
   font-size: 15px;
   font-weight: 600;
   height: 50px;

   /* Center label. */
   justify-content: center;
   letter-spacing: .5px;
   text-decoration: none;

   /* Other. */
   transition: .3s;
   width: 200px;
}

a.button
{
   /* NB button is inside an A. */
   color: var(--white);
}

.button:hover
{
   box-shadow: 0 10px 25px var(--blue);
   filter: brightness(1.15);
   transform: translateY(-3px);
}

.button:focus
{
   outline: 0.1rem solid var(--orange);
   outline-offset: 2px;
}


/* ========================================
 *  HEADER
 * ======================================== */

/* Normal section Header. */
.header
{
   /* Always on top.  */
   align-items: center;
   background-color: var(--blue);
   box-sizing: border-box;

   color: var(--white);
   display: flex;

   height: 100px;
   justify-content: space-between;
   left: 0;

   /* flex-direction: row; */
   padding-left: 5vw;
   padding-right: 5vw;
   position: fixed;

   /* Always on top header is outside section flow so does not inherit section color settings. */
   top: 0;
   transition: transform 0.3s ease,
               background-color 0.3s ease;

   width: 100%;
   /* transition: all 0.3s ease; */

   z-index: 2000;
}

.header-image-area
{
   align-items: center;
   display: flex;
}

.header-navbar-area
{
   align-items: center;
   display: flex;
   margin-left: auto;
}

/* ========================================
 *  SMALL LOGO
 * ======================================== */

.logo-small
{
   display: block;
   height: 50px;
   opacity: 0;
   transition: opacity 0.3s ease;
   width: auto;
}

/* Klein logo verschijnt bij scroll. */
.header.scrolled .logo-small
{
   opacity: 1;
}

/* Prevent dark mode to be overruled by the scrolled opacity. */
body.dark-mode .header.scrolled .logo-small
{
   opacity: var(--dark-mode-img-opacity);
}

.visible
{
   opacity: 1;
}

/* ========================================
 *  NAVIGATION
 * ======================================== */

/* Navbar / navbuttons contain navigation links. */
/* navbuttons is used for navigation links in menu klein.
   Distinction is because these are not needed in special full screen mobile menu. */
.navbar,
.navbuttons
{
   align-items: center;
   cursor: pointer;
   display: flex;

   font-size: 1.7rem;

   gap: 20px;
   padding: 30px 0;

   /* transition: all 0.3s ease; */
   transition: color 0.3s ease,
   gap 0.3s ease;
}

.navbar a,
.navbuttons a
{
   text-decoration: none;
}

.navbar a:hover,
.navbuttons a:hover
{
   color: var(--orange);
   transition: 1s;
}

/* ========================================
 *  MOBILE MENU TOGGLE
 * ======================================== */

/* Hamburger menu toggle , initially hidden, appears in Mobile screens. */
.menu-toggle
{
   background: none;

   border: none;
   color: var(--white);
   cursor: pointer;

   display: none;
   font-size: 2rem;
   padding: 0;
}

/* Default setting for logo in full screen mobile menu. */
.mobile-menu-logo
{
   display: none;
}


@media (max-width: 768px)
{
   .header
   {
      height: 65px;
   }

   .header-image-area .logo-small
   {
      height: auto;
      width: 150px;
   }

   /* Hamburger. */
   .menu-toggle
   {
      display: block;
      position: relative;
      z-index: 2100;

      /* background: none;
      border: none;
      color: var(--white);
      font-size: 2rem;
      cursor: pointer; */
   }

   /* Fullscreen mobile navigation. */
   .navbar
   {
      align-items: center;
      background-color: var(--blue);

      box-sizing: border-box;
      display: flex;

      flex-direction: column;
      gap: 2rem;

      height: 100vh;

      inset: 0;
      justify-content: flex-start;
      opacity: 0;
      padding: 20vh 0 0;
      position: fixed;

      transform: translateY(-20px);
      transition: opacity 0.3s ease,
                  transform 0.3s ease,
                  visibility 0.3s ease;
      visibility: hidden;

      width: 100%;

      z-index: 2050;
   }

   .navbar.open
   {
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
   }

   .navbar a
   {
      color: var(--white);
      font-size: 1.8rem;
      text-decoration: none;
   }

   /* Logo inside fullscreen menu. */
   .mobile-menu-logo
   {
      bottom: 50px;
      display: block;

      height: auto;
      left: 50%;
      position: absolute;

      transform: translateX(-50%);
      width: 100px;
   }

   /* Hide header while scrolling. */
   .header
   {
      transform: translateY(-100%);
      transition: transform 0.3s ease;
   }

   .header.scrolling
   {
      transform: translateY(0);
   }

   /* Keep header visible when menu is open. */
   .header:has(.navbar.open)
   {
      transform: translateY(0);
   }
}

/* ========================================
 *  HERO ELEMENTS
 * ======================================== */

.hero
{
   display: flex;
   flex-direction: column;
   height: 90vh;

   padding-top: 10vh;
   position: relative;
}

.logo-area
{
   height: 100%;
   left: 0;
   position: absolute;

   top: 0;
   width: 100%;

   pointer-events: none;
}

.buttons-area
{
   display: flex;

   height: 20%;
   margin-top: auto;
}

/* ========================================
 *  MAIN LOGO
 * ======================================== */

.logo-big
{
   display: block;

   height: auto;
   left: 50%;

   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);

   width: 60%;

   z-index: 1;
}

/* ========================================
 *  LOGO BALLS
 * ======================================== */

.logo-balls-container
{
   height: auto;

   left: 50%;
   position: absolute;

   top: 50%;
   transform: translate(-165%, -85%);

   width: 18%;

   z-index: 10;
}

.logo-balls
{
   display: block;
   height: auto;
   transform-origin: 47% 54.5%;

   /* Prevent wobble when rotating. */
   width: 100%;

   pointer-events: auto;
}

.rotate-balls
{
   animation: rotate-balls 0.2s forwards;
}

@keyframes rotate-balls
{
   from
   {
      transform: rotate(-120deg);
   }
   to
   {
      transform: rotate(0deg);
   }
}

@media (max-width: 768px)
{

   .logo-big,
   .logo-balls-container
   {
      top: 33%;
   }

   .buttons-area
   {
      margin-bottom: 20vh;
      margin-top: auto;
   }
}

/* ========================================
 *  LANGUAGE SWITCH
 * ======================================== */
/* NL-EN Translate knoppen. */

.lang-switch
{
   display: flex;

   flex-direction: column;
   gap: 1vh;
   margin-left: 10px;

   position: absolute;
}

.lang-option
{
   display: block;
   position: relative;
}

.lang-switch img
{
   border: 1px solid var(--grey);
   border-radius: 4px;

   cursor: pointer;
   height: 24px;

   transition: opacity 0.3s ease,
   transform 0.3s ease,
   border-color 0.3s ease;

   width: 32px;
}

.lang-option:hover .tooltip
{
   opacity: 1;
   visibility: visible;
}

.lang-switch img:hover,
.lang-switch .active
{
   border-color: var(--white);
   opacity: 1;
   transform: scale(1.1);
}




/* ========================================
 *  DARK MODE SWITCH
 * ======================================== */

.mode-switch
{
   display: inline-block;

   height: 28px;

   margin-left: 8px;
   position: relative;

   top: 100px;
   width: 40px;
}

.mode-switch input
{
   height: 0;
   width: 0;

   opacity: 0;
   position: absolute;

   touch-action: none;
}

.mode-switch .slider
{
   background-color: var(--grey);
   border-radius: 34px;

   cursor: pointer;

   inset: 0;
   position: absolute;

   transition: background-color 0.3s ease;

   width: 38px;
}

.mode-switch .slider:before
{
   background-color: var(--white);

   border-radius: 50%;

   bottom: 4px;
   content: "";

   height: 20px;
   left: 2px;

   position: absolute;
   transition: transform 0.3s ease;

   width: 20px;
}

.mode-switch input:checked + .slider
{
   background-color: var(--black);
}

.mode-switch input:checked + .slider:before
{
   transform: translateX(14px);
}

.mode-switch:hover .tooltip
{
   opacity: 1;
   visibility: visible;
}

.mode-switch.tooltip-hidden .tooltip {
    opacity: 0;
    visibility: hidden;
}

.mode-switch,
.mode-switch .slider {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.mode-switch .slider {
    -webkit-tap-highlight-color: transparent;
}


@media (max-width: 768px) {
    .mode-switch,
    .lang-switch {
        left: 50%;
        margin-left: 0;
        transform: translateX(-50%);
    }
}








/* ========================================
 *  TOOLTIPS
 * ======================================== */

.tooltip
{
   border-radius: 6px;

   bottom: 0;
   color: var(--white);

   left: 100%;
   margin-left: 20px;
   opacity: 0;

   padding: 5px 0;
   position: absolute;

   text-align: left;

   transition: opacity 0.6s ease,
   visibility 0.6s ease;
   visibility: hidden;

   width: 120px;

   z-index: 1;
}

@media (hover: none) {
    .lang-option:hover .tooltip,
    .mode-switch:hover .tooltip {
        opacity: 0;
        visibility: hidden;
    }
}



/* ========================================
 *  ALL SECTIONS
 * ======================================== */

.flex-column-section
{
   display: flex;
   flex-direction: column;
   min-height: 90vh;
   padding-bottom: 10vh;
}

@media (min-width: 1000px) and (orientation: portrait)
{
   .flex-column-section
   {
      min-height: auto;
   }
}

/* ========================================
 *  ABOUT SECTION
 * ======================================== */

.image-row
{
   align-items: flex-end;
   display: flex;
   /* Align all images at the bottom. */
   flex-direction: row;
   gap: 15px;
   margin-top: auto;
}

.image-row img
{
   flex: 1;
   max-height: 200px;
   min-width: 0;
   object-fit: contain;
}

.image-row img.small-image
{
   max-height: 120px;
}

/* ========================================
 *  MARKET SECTION
 * ======================================== */

.icon
{
   font-size: 3.5rem;
   margin-bottom: 1rem;
}

/* PRODUCTS SECTION. */

/* PROJECTS SECTION. */

/* ========================================
 *  LATEST NEWS SECTION
 * ======================================== */

.news-big
{
   grid-row: span 2;
}

.news-small
{
   grid-row: span 1;
}

/* Used to put a button in the latest cell of the latest news grid. */
.grid-button
{
   align-self: center;
   justify-self: center;
}

/* Used to remove the default link styling from a clickable block. */
.news-block-link
{
   color: inherit;
   display: block;
   text-decoration: none;
}

/* ========================================
 *  NEWS FILTER PAGE
 * ======================================== */

.checkbox-container
{
   display: flex;
   flex-wrap: wrap;
   gap: 1rem 2rem;
   justify-content: center;
   padding-bottom: 20px;
}

.checkbox
{
   align-items: center;
   border-radius: 50px;
   color: var(--white);

   /* Makes clickable area larger. */
   cursor: pointer;
   display: flex;

   gap: 10px;
   padding: 12px 20px;

   transition: backgound 0.3s ease;
}

.checkbox:hover
{
   background: var(--orange);
}

.checkbox input[type="checkbox"]
{
   accent-color: var(--orange);
   cursor: pointer;

   height: 18px;
   margin: 0;

   width: 18px;
}


@media (max-width: 768px)
{
   .checkbox-container
   {
      gap: 0.25rem 0.5rem;
      padding-bottom: 10px;
   }

   .checkbox
   {
      gap: 6px;
      padding: 8px 12px;
   }

   .checkbox input[type="checkbox"]
   {
      height: 16px;
      width: 16px;
   }
}


/* ========================================
 *  ARTICLE PAGE
 * ======================================== */

.article
{
   display: flex;
   flex-direction: column;

   font-family: "Segoe UI", Arial, sans-serif;
   line-height: 1.7;

   margin: 0 auto;
   max-width: 900px;

   padding-top: 60px;
   transform: scale(1);

   transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
   width: 90%;
}

.article-wide
{
   max-width: 1400px;
}

.article .title
{
   border-bottom: 4px solid var(--orange);   

   margin-left: 0;
   padding-top: 0;
}

.article h3
{
   align-self: baseline;
   border-bottom: 4px solid var(--orange);
   font-size: 26px;
   margin-top: 40px;
   padding-bottom: 10px;
}

.image-text-section
{
   align-items: center;
   box-sizing: border-box;
   display: grid;

   gap: 3rem;
   grid-template-columns: 400px minmax(0, 1fr);

   margin: 0 auto;
   width: 100%;
}

.image-column
{
   width: 400px;   
}

.image-column img
{
   display: block;
   height: auto;
   width: 100%;
}

.text-column
{
   min-width: 0;
}


@media (max-width: 768px)
{
   .article
   {
      max-width: 500px;
   }

   .image-text-section
   {
      gap: 2rem;
      grid-template-columns: 1fr;
      max-width: 500px;
      width: 90%;
   }

   .image-column,
   .text-column
   {
      width: 100%;
   }
}


.date
{
   align-self: baseline;
   font-size: 12px;
   margin-left: auto;
   margin-top: auto;
}

@media (max-width: 768px) {
    .article .date {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 50px;        
    }
}


/* ========================================
 *  CONTACT SECTION
 * ======================================== */

.contact
{
   align-items: center;
   display: flex;

   flex-direction: column;

   gap: 1.5rem;
   margin-top: 2rem;
   width: 100%;
}

.contact-group
{
   align-items: start;
   display: grid;
   grid-template-columns: 35px 100px 1fr;
   max-width: 500px;
   width: 100%;
}

.contact-icon
{
   font-size: 1.5rem;
   text-align: center;
}

.contact-label
{
   font-weight: 600;
   margin: 0;
}

.map-block
{
   height: 100%;
   min-height: 0;
   overflow: hidden;
}

.map-block #map
{
   height: 100%;
   width: 100%;
}

.dark-mode .map-block #map
{
   opacity: var(--dark-mode-img-opacity);
}


@media (max-width: 768px)
{
   .contact-group
   {
      grid-template-columns: 30px 1fr;
   }

   .contact-label
   {
      grid-column: 2;
   }

   .contact-content
   {
      grid-column: 2;
   }

   .blocks .map-block
   {
      height: 400px;
   }
}


/* ========================================
 *  FOOTER SECTION
 * ======================================== */

.footer
{
   align-items: center;
   box-sizing: border-box;
   display: grid;

   grid-template-columns: 1fr 1fr;
   padding: 2rem 3rem;
   width: 100%;
}

.footer-text-area
{
   display: flex;
   flex-direction: row;
   gap: 4vh;
   justify-self: start;
}

.footer-text-area > div
{
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.footer-text-area a
{
   text-decoration: none;
   transition: color 1s;
}

.footer-text-area a:hover
{
   color: var(--orange);
}

.footer-image-area
{
   align-items: center;
   display: flex;
   justify-self: end;
}

.footer-image-area .logo-small
{
   height: auto;
   opacity: 1;
   width: 200px;
}

.copyright
{
   grid-column: 1 / -1;
   justify-self: center;
   margin-top: 2rem;
}


@media (max-width: 768px)
{
   .footer
   {
      gap: 2rem;
      grid-template-columns: 1fr;
      padding: 2rem;
   }

   .footer-text-area
   {
      gap: 2rem;
      justify-content: center;
      justify-self: center;
      text-align: center;
   }

   .footer-image-area
   {
      justify-self: center;
   }

   .copyright
   {
      grid-column: 1;
      margin-top: 0;
   }
}

/* ========================================
 *  GAME
 * ======================================== */

#game
{
   margin-top: 10px;
   position: relative;
   width: 100vw;
}

.ball
{
   background: var(--white);
   border-radius: 50%;
   cursor: pointer;
   height: 40px;
   position: absolute;
   touch-action: none;
   transition: left 1s linear, top 1s linear;
   width: 40px;
}

.info
{
   margin: 10vw 20vw;
   padding-bottom: 1px;
}

.info h1,
.info h2
{
   border-left: 4px solid var(--detail);
   padding-left: 10px;
}