/* ACCORDION */
[data-accordion] {

 width:100%;
  overflow: clip;
  grid-template-columns:1fr;
  interpolate-size:allow-keywords;
}


[data-accordion] summary {
  padding: 1rem;
  display: flex;
  gap:1rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--24);
  color: var(--grey-800);
  font-weight: 500;
  cursor: pointer;
   background:var(--grey-100);
  transition:background  .2s

}
[data-accordion] summary:after {
  --size: var(--16);
  content: "";
  display: inline-block;
  width: var(--size);
  height: var(--size);
  background: url(../images/icons/icon-arrow-down.svg) center center no-repeat;
  background-size: contain;
  transition: 0.2s ;
}
details::details-content {
  color: var(--grey-600);
  font-size:var(--18) !important;
  padding-inline: 1rem;
  margin-block: 1rem;
  block-size:0; 
  transition: block-size .15s, content-visibility .15s;
  transition-behavior:allow-discrete

}

[data-accordion] details{overflow:clip;   border-radius: var(--4);}
[data-accordion] details[open]{border:1px solid var(--grey-100); margin-bottom:var(--24)}
[data-accordion] details[open] summary:after {
  rotate: 180deg;
}
[data-accordion] details[open] summary {
  background: white
}
[data-accordion] details:not([open]) summary:hover {
  background: var(--grey-200);
}

details[open]::details-content {
  block-size:auto; 
}

/* fixed on top */

[fixed-on-top]{z-index:3333}
[fixed-on-top].stucked-offset{top:var(--mainHeader-height) !Important}



/* DIV MAX HEIGHT */
[data-maxheight-toggle]{display:none}
[data-maxheight-content]{height:var(--maxHeight, auto); overflow-y:clip; transition:all .2s linear; interpolate-size: allow-keywords;}


/* MODAL */
:where(dialog[data-modal], .data-modal) {
  top: 50%;
  left: 1rem;
  right: 1rem;
  translate: 0 -50%;
  background:transparent;
  border: 0;
  padding: var(--16) var(--32);
  max-width: 30rem;
  text-align:center;
  margin-inline:auto;
}
dialog[data-modal]::backdrop, dialog.data-modal::backdrop {
  background: rgb(from var(--grey-800) r g b / 0.9);
}

:is(dialog[data-modal], .data-modal).size-full{
  max-width:calc(var(--max-width) - 2rem);
  max-height:100vh; overflow:clip;
}

:is(dialog[data-modal], .data-modal).size-x-full{
  max-width:calc(var(--max-width) - 2rem)
}

:is(dialog[data-modal], .data-modal).large{
  max-width:60em
}


/* SLIDER */


[data-slider] {border-radius:var(--border-radius); overflow:clip; position:relative; isolation:isolate}
[data-slider] .each-slide img{border-radius:0}

[data-slider] button{--bgColor:hsla(0, 0%, 100%, 0.2); --borderColor:white; --borderWeight:1px; position:absolute; bottom:var(--24); z-index:9999 }
[data-slider]  button:hover{--bgColor:hsla(0, 0%, 100%, 0.5); }
[data-slider] button.prev-btn{right:calc(var(--24) + var(--buttonSize) + var(--16))}
[data-slider] button.next-btn{right:var(--24)}

[data-post-slider]{padding-bottom:calc(var(--24) + 2.5rem)}
[data-post-slider] button{--bgColor:var(--white); --borderColor:var(--grey-800); --borderWeight:1px; position:absolute; bottom:0;       margin-inline: auto;}
[data-post-slider] button:hover{--bgColor:hsla(0, 0%, 0%, 0.9); }
[data-post-slider] button.prev-btn{left:calc((100vw - min(100vw,var(--max-width)))/ 2 + 24px )}
[data-post-slider] button.next-btn{right:calc((100vw - min(100vw,var(--max-width)))/ 2 + 24px)}

.slick-lightbox {    position: fixed;   inset:0;    z-index: 9999;   height:100vh;    -webkit-transition: opacity 0.5s ease;    transition: opacity 0.5s ease;}
.slick-lightbox .slick-loading .slick-list {    background-color: transparent;}
.slick-lightbox .slick-prev {    left: 15px;}
.slick-lightbox .slick-next {    right: 15px;}
.slick-lightbox-hide {  opacity: 0;}
.slick-lightbox-hide.slick-lightbox-ie {    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";    filter: alpha(opacity=0);}
.slick-lightbox-hide-init {    position: absolute;    top: -9999px;    opacity: 0;}
.slick-lightbox-hide-init.slick-lightbox-ie {    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";    filter: alpha(opacity=0);}
.slick-lightbox-inner {    position: fixed;  inset:0}
.slick-lightbox-slick-item {    text-align: center;    overflow: hidden;}
.slick-lightbox-slick-item:before {    content: "";    display: inline-block;    height: 100%;    vertical-align: middle;    margin-right: -0.25em;}
.slick-lightbox-slick-item-inner {    display: inline-block;    vertical-align: middle;    max-width: min(90%, var(--max-width));   max-height: calc(100vh - 200px);   width:100%;}
.slick-lightbox-slick-img {    margin: 0 auto;    display: block;    max-width: min(100%, var(--max-width));    max-height: calc(100vh - 200px);    width:100%; object-fit:contain}




.slick-lightbox button{ position:absolute; z-index:99999; bottom:24px;--bgColor: hsla(0, 0%, 100%, 0.2);    --borderColor: white;    --borderWeight: 1px;}
.slick-lightbox button.prev-btn{  left: calc((100vw - min(90vw, var(--max-width))) / 2 + 24px); }
.slick-lightbox button.next-btn{   right: calc((100vw - min(90vw, var(--max-width))) / 2 + 24px); }
.slick-lightbox button:hover{--bgColor:hsla(0, 0%, 0%, 0.9); }
.slick-lightbox-close{    display:block; --buttonSize:3rem; --borderRadius:50%;   aspect-ratio:1;      padding:0; top:24px; right:24px;    bottom: revert !important;
justify-content: center;    align-items: center;}
.slick-lightbox-close:after {    content: "";    display: inline-flex;    width: var(--iconSize, 1rem);    height: var(--iconSize, 1rem);    background-size: contain;
background-position: center center;    background-repeat: no-repeat; background-image:url(../images/icons/icon-close.svg); filter:invert(1)}
.slick-lightbox-close:focus { outline: none;}


/* SLIDER MENU */
[slider-menu-container]{isolation:isolate; overflow:clip;  position:relative;   width: 100%; max-width:100vw;--gradient-from:var(--bg-body);  border-left:2px solid var(--gradient-from); border-right:2px solid var(--gradient-from); margin-inline:auto; }

[slider-menu-container] .arrow-container{position:absolute; z-index:2; height:100%; width:3rem; display:flex; align-items:center; top:0 }
[slider-menu-container] .arrow-container button{display:none}
[slider-menu-container] .arrow-container.left{  --gradient-stops: var(--gradient-from) 30%,  transparent 100%; justify-content:start;  left:-2px;   background-image: linear-gradient(to right, var(--gradient-stops)); padding-left:1px}
[slider-menu-container] .arrow-container.right{  --gradient-stops: var(--gradient-from) 30%,  transparent 100%;justify-content:end; right:-2px;   background-image: linear-gradient(to left, var(--gradient-stops)); padding-right:2px}

[slider-menu-container] ul{overflow-x:auto; list-style:none; padding-inline:0;   padding-block:10px;  max-width: max-content;
    margin-inline: auto; flex-wrap:nowrap;scroll-behavior: smooth;     -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */}
[slider-menu-container] ul::-webkit-scrollbar {    display: none}
[slider-menu-container] ul li > * { text-wrap-mode: nowrap;}
[slider-menu-container] ul li a > * span{    text-wrap-mode:wrap;}
[slider-menu-container] ul.drag{scroll-behavior:auto; cursor:grab}
[slider-menu-container] ul.drag li, [slider-menu-container] ul.drag li a {pointer-events:none; user-select:none; -webkit-user-drag: none;
-moz-user-drag: none;
user-drag: none;}

@media (pointer:fine){
  [slider-menu-container] ul{padding-block:5px}
  [slider-menu-container] .arrow-container button{display:flex}
}