/* ALGEMEEN SITE */
    html {background: rgb(72, 105, 215);margin: 0;padding: 0;}
    body {cursor: grab; margin: 0;height: 100vh;width: 100vw; overflow: hidden; background-repeat: no-repeat; background-size: cover; font-family: 'helvetica'; font-weight: lighter; color: white;}
    * {box-sizing: border-box;}
    div::-webkit-scrollbar {display: none;}
    input[type="button"]{outline:none;}
    input[type="button"]::-moz-focus-inner {border: 0;}

/* ALGEMEEN FONTS */
    h1, h2 {font-family:'minipax';}
    p, a {font-family:'minipax';}
    h1 a {color: rgb(223,222,44);}
    h1 a:hover {color: rgb(223,222,44);}
    a {text-decoration: none;color: rgb(223,222,44);}
    a:visited {color: rgb(223,222,44);}
    i, em, b, strong {font-family: 'cirrus'!important;}

    @font-face {
        font-family: 'foam';
        src: url(fonts/AfternoonFoam-Regular.otf) format('opentype');
        font-display: swap;
    }
    @font-face {
        font-family: 'cirrus';
        src: url(fonts/CirrusCumulus.otf) format('opentype');
        font-display: swap;
    }
    @font-face {
        font-family: 'minipax';
        src: url(fonts/Minipax-Regular.otf) format('opentype');
        font-display: swap;
    }

/* BUTTONS */
    #startButton, #addImage1, #mapButton, .dropbtn {color: rgb(223,222,44);position: fixed;z-index: 99999;padding: 0;margin: 25px;font-size: 2.5rem;}
    #addImage1 {right: 0; cursor: cell; bottom: 0;}
    #startButton {bottom: 0;cursor: alias;}
    #mapButton {top: 0;right:0; cursor: alias;margin-top: 20px;}
    .dropbtn {top: 0; left: 0;margin-top: 20px;}
    .Button {cursor: pointer;}

/* MENU */
    .dropdown {position: relative;}
    .dropdown-content {display: none;position: absolute;background-color: rgba(0,0,0,0);z-index: 99999;
    min-width: 170px;
    padding-top: 75px;}
    .dropdown-content a {color: white;text-decoration: none;display: block;cursor: zoom-in;
    padding-left: 50px;
    padding-top: 10px;}
    .dropdown-content a:hover {color: rgb(223,222,44);}
    .dropdown:hover .dropdown-content {display: block;}
    .menu-items {text-transform: lowercase;}
    #imagesButton {display: none;}
    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
    .show {display:block;}

/* SKYSHADES */
    .lucht_1 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade1.gif');}
    .lucht_2 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade2.gif');}
    .lucht_3 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade3.gif');}
    .lucht_4 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade4.gif');}
    .lucht_5 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade5.gif');}
    .lucht_6 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade6.gif');}
    .lucht_7 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade7.gif');}
    .lucht_8 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade8.gif');}
    .lucht_9 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade9.gif');}
    .lucht_10 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade10.gif');}
    .lucht_11 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade11.gif');}
    .lucht_12 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade12.gif');}
    .lucht_13 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade13.gif');}
    .lucht_14 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade14.gif');}
    .lucht_15 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade15.gif');}
    .lucht_16 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade16.gif');}
    .lucht_17 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade17.gif');}
    .lucht_18 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade18.gif');}
    .lucht_19 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade19.gif');}
    .lucht_20 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade20.gif');}
    .lucht_21 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade21.gif');}
    .lucht_22 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade22.gif');}
    .lucht_23 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade23.gif');}
    .lucht_24 {background-image: url('/wp-content/themes/noon/css-custom/skyshade/skyshade24.gif');}

/* MAP */
    #viewer {position: relative;width: 100vw;height: 100vh;overflow: auto;margin: 0;}
    #background{position: relative;background-repeat: no-repeat;width: 500vw;height: 500vw;background-image: url("/wp-content/themes/noon/css-custom/img/map.svg");}

/* INHOUD MAP */
    /* ZINNEN */
        /* #tekst_zin1 {top: 188vw; left: 346vw;}
        #tekst_zin2 {top: 77vw; left: 246vw;}
        #tekst_zin3 {top: 136vw; left: 255vw;}
        #tekst_zin4 {top: 354vw; left: 64vw;}
        #tekst_zin5 {top: 88vw; left: 29vw;}
        #tekst_zin6 {top: 15vw;  left: 155vw;}
        #tekst_zin7 {top: 20vw; left: 434vw;} */
    
    /* FOTO'S */
        img {top: 0;left: 0;position: absolute;display: none;cursor: all-scroll;width: 25vw;margin-left: 20vw;margin-top: 5vh;}
        img:hover{z-index: 10000 !important;}
        .hover {display: none;background-color: rgba(0,0,0,0);color: rgb(223,222,44);border: none;z-index: 99999;
        top: 0;
        right: 0;
        margin-top: 30px;
        margin-right: 20px;
        font-size: 1.2rem;
        position: fixed;}
        .photo:hover + .hover {display: block; z-index: 99999;}
        #images {display: none;}

    /* EILANDEN */
        /* ALGEMEEN */
            .eiland {color: white;position: absolute;z-index: 9999;width: 40vw;font-size: 1.5vw;}
            .eiland-titel {text-transform: uppercase;}
            .eiland-tekst a {color: rgb(223,222,44);}
            .eiland-tekst a:hover {color: rgb(223,222,44);}

        /* START */
            #start {font-weight: bold; top: 83vw;left: 98vw;width: 45vw;}

        /* MAP */
            #map{top: 320vw;left: 380vw;}
            #grondplan {position: absolute;width: 66vw;margin-top: 4vw;display: block;margin-left: 0;}
            #grondplan_mobile {position: absolute;width: 80vw;display: none;margin: 0;}
        
        /* ABOUT */
            #about {top: 170vw; left: 32vw;}  
            
            #collabrators {top: 310vw;left: 90vw;}

        /* TEXTS */
            /* #texts {top: 132vw; left: 425vw;} */
            #table-texts {width: 65vw;border-spacing: 0px;border-bottom: 2px solid;border-top: 2px solid;}
            .texts-info {width: 35%}
            .texts-info p , .texts-intro p {margin-top: 0; margin-bottom: 5px;}
            .texts-intro {width: 65%;}
            #table-texts td {border-top: 1px solid;text-align: left;vertical-align: text-top;padding-top: 10px;padding-bottom: 10px;padding-right: 5px;}

        /* PUBLICATIONSITE */
            #publicationsite {top: 16vw;left: 319vw;}

        /* PERFORMATIVEPRACTICE */
            #performativepractice {top: 203vw;left: 256vw; width: 41vw;padding-bottom: 8vw;line-height: 1.2;}
            #performativepractice p {margin-bottom: auto;}
            .pdflink {display: block;margin: 2vh 0;}
            .pdflink:hover {color: rgb(223,222,44);}
           

        /* AGENDA */
            #agenda {top: 132vw; left: 425vw;}
            #table-agenda {width: 50vw;border-spacing: 0px;border-bottom: 2px solid;}
            .td-inhoud {border-bottom: 1px solid;text-align: left;vertical-align: text-top;padding-top: 10px;padding-bottom: 10px;padding-right: 5px;}
            .td-inhoud p {margin-bottom: 0;margin-top: 0;}
            .type {border-bottom: 3px solid;border-top:3px solid;}

        /* CONTACT */
            #contact {top: 12vw;left: 37vw;}
            #contact a {color: rgb(223,222,44);}

        /* TRAILER */
            #trailer {top: 260vw;left: 350vw;color: white;position: absolute;z-index: 9999;width: 65vw;font-size: 1.5vw; }
            #trailers {display: flex;}
    
        /* ARCHIVE */
        .documentation-page .layout-toggle-controls {
  margin-bottom: 1.5rem;
}
.documentation-page .layout-toggle-controls button {
  margin-right: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.documentation-page .layout-toggle-controls .active {
  font-weight: bold;
}

#docs-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Grid View: 3 columns */
#docs-container.grid-view .doc-item {
  flex: 1 1 calc(33.333% - 1rem);
  box-sizing: border-box;
  text-align: center;
}

/* Full Width View: single item spans full width */
#docs-container.full-view .doc-item {
  flex: 1 1 100%;
  box-sizing: border-box;
}

.doc-item .doc-thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.doc-title {
  margin-top: 0.5rem;
  font-family: var(--font-heading);
}
  


/* MOBILE */
@media screen and (max-width: 780px) {
    /* BUTTONS */
      #startButton {font-size: 3rem; margin: 20px;}
      #addImage1{display: none;}
    /* MENU */
      .dropbtn{padding:20px;font-size: 3.5vw;}
      .dropdown-content {padding-top: 40px;}
      .dropdown-content a {padding-left:40px;padding-top: 10px;font-size: 3vw;}
      #imagesButton {display: block !important;}
    /* INHOUD MAP */
      #background {background-image: url("img/map_mobile.svg");width: 560vw;height: 560vw;}
      #tekst_zin1 {top: 440vw; left: 250vw;}
      #tekst_zin2 {top: 87vw; left: 272vw;}
      #tekst_zin3 {top: 60vw; left: 40vw;}
      #tekst_zin4 {top: 373vw; left: 420vw;}
      #tekst_zin5 {top: 230vw; left: 33vw;}
      #tekst_zin6 {top: 24vw;  left: 148vw;}
      #tekst_zin7 {top:720vw; left: 50vw;}
      #map{top: 633vw;left: 230vw;margin-bottom: 15px;}
      #grondplan{display:none}
      #grondplan_mobile{display: block;}
      img {width: 60vw;margin-left: 15vw;margin-bottom: 25vh}
      .hover {display: none;margin-top: 60px;margin-right: 15px;font-size: 1rem;}
      .eiland {font-size: 3.6vw;width: 75vw;}
      h1 {font-size: 5vw}
      h2 {font-size: 4vw}
      #start {width: 75vw;top: 264vw;left:179vw;}
      #about {top: 30vw; left: 405vw;}
      #texts {top: 511vw; left: 178vw;}
      #publicationsite {top: 355vw;left: 20vw;}
      #performativepractice {top: 420vw;left: 360vw;width: 75vw;padding-bottom: 8vh;}
      #agenda {top: 705vw;left: 468vw;}
      #contact {top: 129vw;left: 55vw;}
      #trailer {top: 487vw;left: 463vw;}
      #images {top: 253vw;left: 490vw; margin-bottom: 10vh;}
      table {width: 85vw;}
      #table-texts, #table-agenda {width: 85vw}
      .what_empty, .what {width: 30vw}
      .type_empty, .type {width: 30vw;}
      td {padding-top: 10px;padding-bottom: 10px;}
      .collapsible{font-size: 3.5vw;padding: 8px;}
      #video {width: 600px;height: 350px;}
      #images {display: block !important;}
      #map {display: none;}
   }
     @media screen and (max-width: 600px) {#video {width: 450px;height: 263px;}}
  
      @media screen and (max-width: 480px) {
          #startButton {font-size: 2rem; margin: 15px;}
          .dropbtn{padding:15px;font-size: 1rem;}
          .dropdown-content {padding-top: 30px;}
          .dropdown-content a {padding-left:35px;padding-top: 10px;font-size: 4vw;}
          .eiland {font-size: 3.5vw;width: 75vw;}
          h1 {font-size: 5vw}
          h2 {font-size: 4vw}
          table {width: 90vw;}
          td {padding-top: 4px;padding-bottom: 4px;}
          #table-texts, #table-agenda {width: 90vw}
          .what_empty, .what {width: 30vw}
          .type_empty, .type {width: 30vw;}
          .collapsible{font-size: 3.5vw;padding: 8px;}
          #video {width: 300px;height: 175px;}
          #images {display: block !important;}
       }
  
      @media screen and (max-width: 280px) {
        img {width: 60vw;margin-left: 5vw;margin-bottom: 25vh}
        #start {width: 80vw;}
        #performativepractice {width: 80vw;}
        table {width: 80vw;}
        #table-texts, #table-agenda {width: 85vw}
        .collapsible{font-size: 3.5vw;padding: 7px;}
        #video {width: 250px;height: 146px;}
       }
  


      
/* Documentation Page Layout */
.docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.docs-grid.full-view {
  grid-template-columns: 1fr;
}

.doc-item {
  text-decoration: none;
}

.doc-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
#map-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  z-index: 100000;
}

#mapButton.close {
  background-color: rgba(0, 0, 0, 0.5);
}