@import url("/assets/swiper.min-38b59469.css");

@font-face {
  font-family: 'Halyard Display';
  src: url("/assets/Halyard-Display-Light-2f67cdd7.otf") format('opentype');
  font-weight: 300; 
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: 'Halyard Display';
  src: url("/assets/Halyard-Display-Book-8c80ff0a.otf") format('opentype');
  font-weight: 400; 
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: 'Halyard Display';
  src: url("/assets/Halyard-Display-Medium-83f57b5b.otf") format('opentype');
  font-weight: 500; 
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Halyard Display';
  src: url("/assets/Halyard-Display-SemiBold-09ba8cb0.otf") format('opentype');
  font-weight: 600; 
  font-style: normal;
  font-display: swap;
}

:root {
  --clr-white: #f0f0f0;
  --clr-white-1: #B2AFAF;
  --clr-grey: #c6c0b0;
  --clr-black: #2d2d2d;

  --clr-time: #B2AEAE;

  --clr-black-brown: #1e190c;
  
  --clr-green: #19fc05;


  --clr-bg: var(--clr-black-brown);
  --clr-fg: var(--clr-white);

  --clr-drawer-bg: #302C23;

  --clr-grey-100: #f4f4f5;
  --clr-grey-200: #e4e4e7;
  --clr-grey-300: #d4d4d8;
  --clr-grey-400: #a1a1aa;
  --clr-grey-500: #71717a;
  --clr-grey-600: #52525b;
  --clr-grey-700: #17176d;
  --clr-grey-750: #2e2f31;
  --clr-grey-800: #28292A;

  --clr-network-bg: #192B36;
  --clr-network-btn: #2D5A7B;
  --clr-network-txt: #6CC2F8;

  --clr-event-bg: #204E1D;
  --clr-event-btn: #347B2D;
  --clr-event-txt: #78F86D;

  --clr-tool-bg: #3A2D16;
  --clr-tool-btn: #4E7236;
  --clr-tool-txt: #C4F5A3;

  --clr-knowledge-bg: #16373B;
  --clr-knowledge-btn: #2D727B;
  --clr-knowledge-txt: #6DF3F8;

  --ff-base: 'Halyard Display', sans-serif;

  /*--fs-xxl: clamp(4.2rem, 6vw + 1rem, 8rem);
  --fs-xl: clamp(3.2rem, 4vw + 1rem, 5.6rem);
  --fs-l: clamp(2.4rem, 2vw + 1rem, 4.8rem);
  --fs-m: clamp(1.8rem, 1vw + 0.6rem, 2.4rem);
  --fs-s: clamp(1.4rem, 1vw + 0.4rem, 1.6rem);*/

  --fs-xxl: clamp(2.60rem, 1.509rem + 3.409vw, 5.60rem);
  --fs-xxl2: clamp(2.40rem, 1.964rem + 1.364vw, 3.60rem);
  
  --fs-xl: clamp(1.8rem, 1.477rem + 1.231vw, 2.4rem);
  --fs-l: clamp(1.8rem, 1.692rem + 0.41vw, 2rem);

  --ms-xs: .236em;
  --m-s: .345984em;
  --m-m: .786096em;
  --m-l: 1em;
  --m-xl: 1.618em;

  --m-outer: 12px;
  --m-gap: 20px;
  
  --r-base: 8px;

  --n-columns: 16;
  --m-column: calc(100vw / var(--n-columns));

  font: 10px/1.3 var(--ff-base);  

  interpolate-size: allow-keywords;

}

@media (min-width: 640px) {
  :root {
    --n-columns: 24;
  }


}


body {  
  background-color: var(--clr-bg);
  color: var(--clr-fg);
  margin: 0;
  display: flex;
  flex-direction: column;
  
  gap: 0;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

button, input {
  font: inherit;  
}

ul[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breakable {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

a {
  color: currentColor;
}

.base-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(var(--n-columns), minmax(0, 1fr));
  max-width: 100%;
}



#skip-to-content-link {
  position: absolute;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  font-size: 1.6rem;
  line-height: 1;
  background: var(--clr-black-brown);
  color: var(--clr-white);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--r-base);
  left: 50%;
  top: 1em;
  transform: translateX(-50%);

  &:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
  }
}

header {
  position: absolute;
  z-index: 200;
  left: 0;
  right: 0;
  margin: var(--m-column) 0;

  @media (min-width: 640px) {
    margin: calc(var(--m-column)/2) 0;
  }

}






.header-logo {
  grid-column: 2 / span 3;
  align-self: center;
  & svg {
    display: block;      
    height: auto;  
  }
}

.burger-menu-button {
  align-self: center;
  justify-self: end;
  grid-column: -4 / span 2;  
}


.burger-menu-button, .close-menu-button {    
  border: none;
  cursor: pointer;  
  background-color: transparent;
  font-size: 1.6rem;
  display: flex;
  gap: 0.4em;
  flex-direction: column;
  align-items: center;  
  color: var(--clr-white);
  padding: 0.4em 0.4em 0.3em 0.4em;
  min-width: 5rem;  
  box-sizing: border-box;
}

.burger-menu-button {
  background-color: var(--clr-black-brown); 
  border-radius: 0.8rem;
}

.burger-box {
  width: 23px;
  height: 23px;    
  position: relative;  
}

.burger-inner {
  width: 100%;
  height: 2px;
  left: 0px;
  top: 10px;
  background-color: currentColor;  
  position: absolute;
  
  &::before,
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    position: absolute;    
  }

  &:before {
    top: -6px;
  }

  &:after {
    top: 6px;
  }
}

.drawer-menu {
  position: fixed;
  top: 0;
  right: 0;    

  &.open {
    left: 0;
    bottom: 0;  
    z-index: 1000;
    overflow: hidden;
  }
  /*& .drawer-inner {
    transform: translateX(0);
  }*/
}


.drawer-inner {
  position: fixed;
  top: 0;
  right: 0;
  max-width: 450px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  background-color: var(--clr-drawer-bg);
  box-sizing: border-box;
  padding: var(--m-column);

  transform: translateX(100%);
  transition: transform 300ms ease; 

  display: flex;
  flex-direction: column;

  & a {
    color: currentColor;
    text-decoration: none;
  }
}

.close-menu-button {
  align-self: flex-end;
  order: -1;
}

.close-icon {
  width: 23px;
  height: 23px;  
  position: relative;  

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: currentColor;    
  }
}

.close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}



.burger-menu-title {
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;      
}


.drawer-menu nav {
  font-size: 3.2rem;
  line-height: 1.2;
  margin: var(--m-gap) 0;

  & ul + ul {
    margin-top: calc(var(--m-gap) * 2);
  }

  & li + li {
    margin-top: 0.2em;
  }
}


main {
  flex-grow: 1;

}


footer {
  border-top: 1px solid var(--clr-white);
  padding: var(--m-column) 0;  
  font-size: 1.6rem;
  line-height: 1.4;

  & a {
    color: var(--clr-white);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  & svg {
    display: block;
  }

  & .dkod-logo_link svg {
    max-width: min(280px, 60%);    
  }

  & .dkod-logo_link, .dkod-links, .legal-links, .some-links {
    grid-column: 2 / -2;

    & + * {
      margin-top: var(--m-column);
    }
  }

  & .some-links {
    fill: var(--clr-white);
    
    align-self: center;
    
    display: flex;
    gap: var(--m-gap);
    & svg {
      width: 28px;
    }

    & a:hover {
      fill: var(--clr-green);      
    }
  }

  @media (min-width: 640px) {

    &.base-grid {
      gap: calc(var(--m-column)/2) 0;
    }    

    & .dkod-logo_link, .dkod-links, .legal-links, .some-links {
      & + * {
        margin-top: 0;
      }
    }

    & .dkod-logo_link, .dkod-links {
      grid-column: 2 / span calc((var(--n-columns) - 2) / 2); 
    }
    
    & .dkod-logo_link, .legal-links {
      grid-row: 1;
    }

    & .legal-links, .some-links {
      grid-column: span calc((var(--n-columns) - 2) / 2); 
      justify-self: end;
      text-align: right;
    }
    
  }
  
}


.article-plain {  
  font-size: 1.8rem;
  line-height: 1.33333333;
  margin: calc(var(--m-column) * 5) auto calc(var(--m-xl) * 4) auto;

  grid-column: 2 / -2;

  & h1 {
    margin: 0 0 var(--m-m) 0;
    font-size: 3.2rem;
    line-height: 1.125;    
    font-weight: 400;
  }

  & > * {
    max-width: 48ch;
  }

  & figure {
    margin: 0;
  }

  & figcaption {
    font-style: normal;
    font-size: 1.4rem;
    margin-top: 0.4em;
  } 

  & img {
    display: block;
    width: 100%;
    height: auto;
  }
  
}

.swiper {
  
  user-select: none;
  grid-column: 1 / -1;
  aspect-ratio: 3 / 4;  
  position: relative;
  width: 100%;

  @media (orientation: landscape) {
    aspect-ratio: 2.34201954;   
    
    & .swiper-button-prev {
      left: var(--m-column);
    }
    
    & .swiper-button-next {
      right: var(--m-column);
    }

  }
}



.swiper, .swiper-slide {
  max-height: 60dvh;  
  @media (orientation: landscape) {    
    max-height: 50dvh;
  }

  @media (min-width: 1200px) {
    max-height: 70dvh;
  }
}

.swiper-slide {
  position: relative;
  color: var(--clr-fgcolor, var(--clr-white));  
  font-size: var(--fs-l);
  overflow: hidden;  
  
  & h1 {
    font-size: var(--fs-xxl);
    line-height: 1.125;    
    font-weight: 500;
    margin: 0;    
  }

  & h2 {
    font-size: var(--fs-xl);
    line-height: 1.125;    
    font-weight: 500;
    margin: 0;    
  }

  &>a {
    text-decoration: none;
    color: currentColor;
  }
  
  & picture {
    position: absolute;
    inset: 0 0 0 0;
  }

  & figcaption {
    position: absolute;
    left: 2em;
    bottom: 2em;
    font-style: normal;
    font-size: 1.4rem;

    
  }


  & .swiper-slide-inner {
    position: absolute;
    inset: calc(var(--m-column) * 1.5) calc(var(--m-column) * 2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.4em;
    
    
    &.align__se,
    &.align__s, 
    &.align__sw {
      justify-content: flex-end;
    }

    &.align__nw,
    &.align__n, 
    &.align__ne {
      justify-content: flex-start;
    }

    &.align__se, 
    &.align__e, 
    &.align__ne {
      align-items: flex-end;      
      text-align: right;
    }

    &.align__sw, 
    &.align__w, 
    &.align__nw {
      align-items: flex-start;
      text-align: left;
    }  

  }

  & img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

.swiper-pagination {
  bottom: var(--m-outer);
  position: absolute;
  left: 50%;
  z-index: 10;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.swiper-pagination-bullet {
  background-color: var(--clr-white);
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 50%;
  opacity: 0.5;

  &.swiper-pagination-bullet-active {
    opacity: 1;
  }
}

.swiper-button {
  position: absolute;
  top: 50%;
  z-index: 2;
  fill: var(--clr-white);
  transform: translateY(-50%);
  cursor: pointer;  
  width: 16px;
  display: inline-flex;
  justify-content: center;
  & svg {
    display: block;
    width: 100%;    
    height: auto;
  }
}

.swiper-button-prev {
  left: 8px;
}
.swiper-button-next {
  right: 8px;
}

#postsFeed, #postView {
  grid-column: 2 / -2;
  margin: calc(var(--m-column) * 4) 0 calc(var(--m-column)/2) 0;
}


#postsFeed:has(.posts-container:empty) {
  display: none;
}


.tmpl-index + #postsFeed {
  margin-top: 0;
}

.posts-container + #postsFeed {
  margin-top: calc(var(--m-column)/2);
}


.tmpl-index em, 
.swiper-slide-inner em {
  position: relative;
  display: inline-block;
  font-style: normal;
  isolation: isolate;
  &::before {
    content: "";
    position: absolute;      
    background-color: rgba(25, 252, 5, .8);
    height: 90%;
    width: calc(100% + 0.2em);
    left: -0.1em;
    bottom: 0;
    transform: rotate(-2deg) translateY(0.1em);
    animation: reveal 400ms cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    z-index: -1;
  }

}

@keyframes reveal {
  from {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);    
  }
  to {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);    
  }
}


.tmpl-index {
  margin: calc(var(--m-column)/2) 0;
  grid-column: 2 / -2;
  font-size: var(--fs-xxl2);
  line-height: 1.125;    
  font-weight: 400;

  & .article-section {
    max-width: 56ch;
  }

}


.posts-filters-nav {
  position: sticky;
  top: 0;
  background-color: var(--clr-black-brown);
  z-index: 100;
  padding: calc(var(--m-column)/2) 0;  

  

}

.search-form {
  margin: 0 0 calc(var(--m-column)/2) 0;
  font-size: 1.8rem;
  font-weight: 500;
  background-color: #302C23;
  padding: 0.2em 0 0.2em 0.5em;
  border-radius: 0.8rem;

  & a.search-form-reset {
    text-decoration: none;  
    font-weight: 700;  
    color: var(--clr-white);
  }

  & button {
    appearance: none;
    background-color: transparent;
    border: none;
    outline: none;
    display: inline-flex;   
    align-items: center;
    padding: 0 0.6ch; 
    cursor: pointer;

    & svg {
      width: 1.6ch;
      fill: #C6C0B0;
      height: auto;
    }
  }

  & input[type=text] {
    background-color: transparent;
    border: none;
    outline: none;
    flex: 1;
    line-height: 1;
    padding: 0; 
    color: var(--clr-white);
  }

  &:has(input:placeholder-shown) {
    & .search-form-reset {
      display: none;
    }
  }

  & > div {
    display: flex;
    gap: 0.2em;
    align-items: center;
  }

}


.posts-filters, .tag-facets {
  & a {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: currentColor;
    text-decoration: none;

    &:hover, &.current {

      & span:nth-child(1) {
        text-decoration-thickness: 0.2rem;
        text-decoration: underline;
        text-underline-offset: 0.5rem;
        text-decoration-color: currentColor;
      }      
    }

    & span:nth-child(2), &.current span:nth-child(2) {
      opacity: 0.8;
      text-decoration-thickness: 0;
      color: var(--clr-white);
      text-decoration: none !important;
    }
    
  }
}

.tag-facets {
  margin-top: calc(var(--m-column)/2);
  font-size: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 1em;
  color: var(--clr-white-1);

  & input[type=checkbox] {
    display: none;
  }

  & h4 {
    font-weight: 500;    
    margin: 0;
    &::after {
      content: ':';
    }
  }

  
}


@media (max-width: 639px) {
  .tag-facets {

    & label {
      cursor: pointer;
      user-select: none;
      display: flex;
      align-items: center;      
      &::after {
        font-size: 1.0rem;
        margin-left: 0.8em;
        content: '▼';
      }
    }

    & h4::after {
      content: unset;     
    }

    & a {
      display: none;
    }

    &:has(input:checked) {

      & label {      
        &::after {
          content: '▲';
        }
      }
      & a {
        display: inherit;
      }
    }
  
  }
}

  


.posts-feed-header {
  font-size: 1.8rem;
  font-weight: 500;
  margin: 0;
}

.posts-filters {
  font-size: 1.8rem;
  font-weight: 500;

  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 1em;

  & a {
    


    &.network.current,
    &.network:hover {
      color: var(--clr-network-txt);
    }
    &.event.current,
    &.event:hover {
      color: var(--clr-event-txt);
    }
    &.tool.current,
    &.tool:hover {
      color: var(--clr-tool-txt);
    }
    &.knowledge.current,
    &.knowledge:hover {
      color: var(--clr-knowledge-txt);
    }
  }
}

.posts-container {
  
  display: flex;
  flex-direction: column;
  gap: max(20px, calc(var(--m-column)/2)) 0;
  margin: calc(var(--m-column)/2) 0 var(--m-column) 0;
  
}

.post-container {
  color: var(--clr-white);

  --clr-post-bg: var(--clr-drawer-bg);  
  --clr-post-txt: var(--clr-white);  
  --clr-post-tags: var(--clr-white);    
  
  &.network {
    --clr-post-btn: var(--clr-network-btn);    
    --clr-post-tags: var(--clr-network-txt);    
  }

  &.event {
    --clr-post-btn: var(--clr-event-btn);      
    --clr-post-tags: var(--clr-event-txt);    
  }

  &.tool {
    --clr-post-btn: var(--clr-tool-btn);      
    --clr-post-tags: var(--clr-tool-txt);    
  }

  &.knowledge {
    --clr-post-btn: var(--clr-knowledge-btn);
    --clr-post-tags: var(--clr-knowledge-txt);         
  }
}


.post-thumbnail-container {
  width: 100%;
  aspect-ratio: 2.7;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--clr-post-btn);
  margin-bottom: 0.5rem;
  cursor: pointer;
  position: relative;
  /* transition: aspect-ratio 300ms ease-in-out; */

  &:has(img) {    
    aspect-ratio: 16/9;
    background-color: transparent;
  }

  & figure {
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    display: block;
  }
  
  & figcaption {
    position: absolute;
    left: 1em;
    bottom: 1em;
    font-style: normal;
    font-size: 1.4rem;
    color: var(--clr-white);

    &.darkmode-1 {
      color: var(--clr-black);
    }
  }

  & cite {
    font-style: normal;
  }
  
}

.post-occasions {
  position: absolute; 
  color: var(--clr-black);
  left: 1.6rem;
  top: 1.6rem;
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.4rem 0;
    
  & li {
    margin-right: 1.6rem;
    border-radius: 0.6rem;
    padding: 0.2em 0.4em 0.3em 0.4em;
    background-color: var(--clr-event-txt);
  }
}

.post-container:has(details[open]) .post-thumbnail-container:has(img),
#postView .post-thumbnail-container {
  aspect-ratio: 4/3;
}


.post-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0 0 0 0;
  object-fit: cover;  
  object-position: 50% 50%;
}

.post-details {
  padding: calc(var(--m-column)/2) var(--m-column); 
  font-size: 1.6rem;
  line-height: 1.125;
  background-color: var(--clr-post-bg);
  border-radius: 0.8rem;
  overflow: hidden;

  & address {
    margin: 0;
    font-style: normal;        
  }
  
  & summary {
    list-style: none; 
    cursor: pointer;
  }
  
}

.post-ctrls {
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;

  & a, button {
    box-sizing: border-box;
    appearance: none;
    background-color: transparent;
    text-decoration: none;
    color: var(--clr-post-txt);
    border: 1px solid var(--clr-post-txt);    
    fill: var(--clr-post-txt);
    padding: 0 1.2rem;
    height: 3rem;
    border-radius: 0.8rem;    
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    gap: 0.8rem;

    &:has(svg) {
      padding-right: 8px;
    }
    
  }

  .close-post-button {
    display: none;
  }

  &:not(:has(.post-go-to-link)) {
    justify-content: end;

  }

}



details[open] ~ .post-ctrls {
  .close-post-button {
    display: inherit;
  }

  .open-post-button {
    display: none;
  }
}

time {
  color: var(--clr-time);
  display: none;
}

.post-body {
  line-height: 1.33333333;
  font-size: 1.8rem;

  a {
    color: currentColor;
  }

  p {
    margin: 1em 0;
  }
}


ul.post-tags, .post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 0.6em;  
  margin: 0 0 1rem 0;
  color: var(--clr-post-tags);

  &::before {
    content: attr(data-title)":";
    font-weight: 700;
  }
}

.post-title {
  font-size: 2.4rem;
  line-height: 1.16666667;
  font-weight: 500;
  margin: 0 0 1rem 0;
}

@media (min-width: 700px) {
  .post-container {
    display: grid;
    grid-template-columns: 4fr 5fr;
    gap: 0 calc(var(--m-column)/3);
    grid-template-rows: min-content;
    align-items: start;
    box-sizing: border-box;

    &:has(details[open]) {
      align-items: start;

      & .post-thumbnail-container {
        align-self: start;
      }
    }
    
  }

  .post-title {
    font-size: 3.2rem;
  }

  #postView .post-container {
    align-items: start;
    & .post-thumbnail-container {
      align-self: start;
    }
  }

  .post-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .post-thumbnail-container {
    margin: 0;
    aspect-ratio: auto;
    align-self: stretch;
    transition: none;

    &:has(img) {    
      aspect-ratio: auto;      
    }
    
  }

  .post-ctrls {
    gap: 0 calc(var(--m-column)/2);
    /*justify-content: flex-end;*/
  }

  .search-form, .posts-filters, .posts-feed-header {
    font-size: 2.4rem;
  }


  
}

@media (min-width: 1000px) {
  
  .header-logo {
    grid-column: 2 / span 2;
  }
  
  #postsFeed, #postView, .tmpl-index {
    grid-column: 4 / -4;
  }

  #postsFeed, #postView {
    margin: calc(var(--m-column) * 2.5) 0 calc(var(--m-column)/2) 0;
  }

  .article-plain {
    margin-top: calc(var(--m-column) * 3);
  }
  


  .posts-filters-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0 1em;
  }

  .search-form {
    order: 2;
    margin: 0;
  }

  .tag-facets {
    flex-basis: 100%;
    order: 3;
  }
  
}