/*####################################*/
/*   YOO MORENO LOGOTEL - UTILITIES   */
/*####################################*/

/* ============ INFO ============ *//* 
  
  # Version:  0.1;
  # Upadated: 15/09/2021;
  # Authors:
      Andrea Tondo (a.tondo@logotel.it)

*//* ============================== */


/* ====== TABLE OF CONTENTS ====== *//*
  
  # HIDING CLASSES
  # IMAGERY
  # SCROLLABLE ELEMENTS
  # MODALS
  # ACCESSIBILITY CLASSES

  to do:
  - FLOAT UTILITIES
  - PRINT STYLES
  - ...

*//* ============================== */



/* -------------------------- */
/* +++ # HIDING CLASSES # +++ */
/* -------------------------- */

.LGThidden {
  display: none;
}

/* switch desktop/mobile visibility */
@media (max-width: 1023px) {
  .LGThidden--mobile {
    display: none;
  }
}
@media (min-width: 1024px) {
  .LGThidden--desktop {
    display: none;
  }
}

:is([lang*="en"]) :is([class*="-visible--"]:not(.STEPX-visible--en):not(.ENLWG-visible--en)) { display: none !important; }
:is([lang*="it"]) :is([class*="-visible--"]:not(.STEPX-visible--it):not(.ENLWG-visible--it)) { display: none !important; }
:is([lang*="es"]) :is([class*="-visible--"]:not(.STEPX-visible--es):not(.ENLWG-visible--es)) { display: none !important; }
:is([lang*="fr"]) :is([class*="-visible--"]:not(.STEPX-visible--fr):not(.ENLWG-visible--fr)) { display: none !important; }
:is([lang*="pt"]) :is([class*="-visible--"]:not(.STEPX-visible--pt):not(.ENLWG-visible--pt)) { display: none !important; }
:is([lang*="ro"]) :is([class*="-visible--"]:not(.STEPX-visible--ro):not(.ENLWG-visible--ro)) { display: none !important; }
:is([lang*="de"]) :is([class*="-visible--"]:not(.STEPX-visible--de):not(.ENLWG-visible--de)) { display: none !important; }

/* --------------- */
/* +++ IMAGERY +++ */
/* --------------- */


/* block images */
.LGTimg--block {
  display: block;
  margin: 2rem auto 2rem;
}

/* rounded images */
.LGTimg--circle { border-radius: 100vw; }



/* ------------------------------- */
/* +++ # SCROLLABLE ELEMENTS # +++ */
/* ------------------------------- */

/* scollable box (horizontal) for content with fixed width */
.LGTscrollable--H{
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* scollable box (vertical) for content with fixed height */
.LGTscrollable--V{
  display: block;
  max-height: 80vh;
  overflow-y: auto;
}


/* overflow-x hidden on LGTcontent */
body.LGTcontent-overflow-x-hidden div.LGTcontent {
  overflow-x: hidden;
}


/* ------------------ */
/* +++ # MODALS # +++ */
/* ------------------ */

.no-scroll {
  overflow: hidden;
}

/* content wrapper */
body > #js-modal-page {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* overlay covers everything */
.LGToffcanvas-modal-overlay,
.LGTsimple-modal-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 666;
  opacity: 1;
  background: var(--LGTcolor-ink-20a, hsla(0, 0%, 13%, .2));
  animation: LGTfadein .2s ease 1;
}

/* modal */
.LGTsimple-modal,
.LGTsimple-modal--reverse {
  position: fixed;
  top: 15%;
  left: 0;
  right: 0;
  width: 90vw;
  max-width: 860px;
  max-height: 70%;
  overflow: auto;
  border: 0;
  padding: var(--LGTspace, 15px);
  background: var(--LGTcolor-white, #fff);
  color: var(--LGTcolor-ink, #222);
  z-index: 667;
  animation: LGTfadein .3s ease 1, LGTslidein--t .3s ease 1;
}

.LGTsimple-modal--reverse {
  animation: LGTfadeout .3s ease 1, LGTslideout--t .3s ease 1;
}

.LGToffcanvas-modal,
.LGToffcanvas-modal--reverse {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* bottom: 0; */
  margin: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  overflow-y: auto;
  border: 0;
  padding: calc(var(--LGTspace, 15px) * 2) var(--LGTspace, 15px) var(--LGTspace, 15px);
  background-color: var(--LGTcolor-ink-90a);
  color: var(--LGTcolor-white, white);
  z-index: 667;
  animation: LGTfadein .3s ease 1;
}

.LGToffcanvas-modal--reverse {
  animation: LGTfadeout .3s ease 1;
}

/* close button */
.LGTsimple-modal-close,
.LGToffcanvas-modal-close {
  position: absolute;
  top: 5px;
  right: 5px;
  margin: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  border: 0;
  background: var(--LGTcolor-white, #fff);
  cursor: pointer;
}

.LGToffcanvas-modal-close {
  background: none;
}

.LGTsimple-modal-close svg,
.LGToffcanvas-modal-close svg {
  color: var(--LGTcolor-primary, #2A55F9);
}

.LGToffcanvas-modal-close svg {
  color: var(--LGTcolor-neutral-extralight, #FFF);
}

.LGTsimple-modal-close:focus,
.LGToffcanvas-modal-close:focus {
  outline: 1px dotted currentcolor;
  outline-offset: -3px;
}

.LGTsimple-modal-close:focus:not(:focus-visible),
.LGToffcanvas-modal-close:focus:not(:focus-visible) {
  outline: 0;
}

.LGTsimple-modal-close:focus-visible,
.LGToffcanvas-modal-close:focus-visible {
  outline: 1px dotted currentcolor;
}



/* --------------------------------- */
/* +++ # ACCESSIBILITY CLASSES # +++ */
/* --------------------------------- */

.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.LGTskip-nav {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 1em;
  z-index: 9999;

  font-weight: 700;
  text-align: center;
  text-decoration: underline;
  
  transform: translate(-50%,-110%);
  opacity: 0;
  /*visibility: hidden;*/
  pointer-events: none;

  transition: transform .2s ease, opacity .1s ease;

  background: #fff;
  color: #000;
}

.LGTskip-nav:focus {
  /*visibility: visible;*/
  opacity: 1;
  pointer-events: all;

  outline: 1px dotted;
  outline-offset: -.3em;

  transform: translate(-50%);
}