/*###################################*/
/*   YOO MORENO LOGOTEL - SETTINGS   */
/*###################################*/

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

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


/* ====== TABLE OF CONTENTS ====== *//*
  
  + VARIABLES

  # BASE SETTING
  # JOOMLA SETTING
  # GRID
  # MAIN LAYOUT
  # HEADER
  # FOOTER
  
*//* ============================== */



/* --------------------- */
/* +++ + VARIABLES + +++ */
/* --------------------- */

/* multiplier */
:root {
  --LGTmultiplier: 1;
}
/*
@media (max-width: 899px) {
  :root { --LGTmultiplier: .8; }
}
@media (min-width: 900px) {
  :root { --LGTmultiplier: .9; }
}
@media (min-width: 1300px) {
  :root { --LGTmultiplier: 1; }
}

@media (min-width: 1700px) {
  :root { --LGTmultiplier: 1.1; }
}
@media (min-width: 2000px) {
  :root { --LGTmultiplier: 1.2; }
}
*/

/* Size & grid variables */
:root {
  --LGTgrid: 12; /* Default number of columns in the grid system */
  --LGTmaxlayout: none; /* max width of the page */ 
  --LGTbaseunit: 15px; /* the standard unit measure */

  --LGTspace: calc(var(--LGTbaseunit,15) * var(--LGTmultiplier,1));
}

@media (min-width: 768px) {
  :root {
    /*--LGTbaseunit: 30px;*/
    --LGTbaseunit: 25px;  
  }
}

  
/* Type & Font variables */

:root {
  --LGTtypebase: 16px;
  --LGTtypescale: 1.25;
  --LGTfontstack-body: proxima-nova, sans-serif;
  --LGTfontstack-heading: proxima-nova, sans-serif;

  --LGTtypesize: calc(1rem * var(--LGTmultiplier,1));
  --LGTtypesize-l-1: calc(1rem * var(--LGTtypescale) * var(--LGTmultiplier,1));
  --LGTtypesize-l-2: calc(var(--LGTtypesize-l-1) * var(--LGTtypescale) * var(--LGTmultiplier,1));
  --LGTtypesize-l-3: calc(var(--LGTtypesize-l-2) * var(--LGTtypescale) * var(--LGTmultiplier,1));
  --LGTtypesize-l-4: calc(var(--LGTtypesize-l-3) * var(--LGTtypescale) * var(--LGTmultiplier,1));
  --LGTtypesize-l-5: calc(var(--LGTtypesize-l-4) * var(--LGTtypescale) * var(--LGTmultiplier,1));
  --LGTtypesize-l-6: calc(var(--LGTtypesize-l-5) * var(--LGTtypescale) * var(--LGTmultiplier,1));

  --LGTtypesize-s-1: calc(1rem / var(--LGTtypescale) * var(--LGTmultiplier,1));
  --LGTtypesize-s-2: calc(var(--LGTtypesize-s-1) / var(--LGTtypescale) * var(--LGTmultiplier,1));
}


/* Color variables */
:root {
  /* colore primario & varianti */
  --LGTcolor-primary:             hsla(172,100%,43%,1); /* #00DABE */
  --LGTcolor-primary-dark:        hsla(172,100%,33%,1);
  --LGTcolor-primary-extradark:   hsla(172,100%,23%,1);
  --LGTcolor-primary-light:       hsla(166,100%,72%,1);
  --LGTcolor-primary-extralight:  hsla(166,100%,82%,1);
  --LGTcolor-primary-90a:         hsla(172,100%,43%,.9);
  --LGTcolor-primary-20a:         hsla(172,100%,43%,.2);
  --LGTcolor-primary-lighter:     hsla(172,100%,47%,1);

  /* colore contrasto & varianti */
  --LGTcolor-accent:             hsla(343,100%,39%,1);
  --LGTcolor-accent-dark:        hsla(343,100%,29%,1);
  --LGTcolor-accent-extradark:   hsla(343,100%,19%,1);
  --LGTcolor-accent-light:       hsla(343,100%,49%,1);
  --LGTcolor-accent-extralight:  hsla(343,100%,59%,1);
  --LGTcolor-accent-90a:         hsla(343,100%,39%,.9);
  --LGTcolor-accent-20a:         hsla(343,100%,39%,.2);
  
  /* colore testo & varianti */
  --LGTcolor-ink:             hsla(0,0%,0%,1);
  --LGTcolor-ink-dark:        hsla(0,0%,0%,1);
  --LGTcolor-ink-extradark:   hsla(0,0%,0%,1);
  --LGTcolor-ink-light:       hsla(0,0%,20%,1);
  --LGTcolor-ink-extralight:  hsla(0,0%,40%,1);
  --LGTcolor-ink-90a:         hsla(0,0%,0%,.9);
  --LGTcolor-ink-20a:         hsla(0,0%,0%,.2);
  
  /* colore neutral & varianti */
  --LGTcolor-neutral:             hsla(0,0%,85%,1);
  --LGTcolor-neutral-dark:        hsla(0,0%,80%,1);
  --LGTcolor-neutral-extradark:   hsla(0,0%,61%,1);
  --LGTcolor-neutral-light:       hsla(0,0%,96%,1);
  --LGTcolor-neutral-extralight:  hsla(0,0%,100%,1);
  --LGTcolor-neutral-90a:         hsla(0,0%,85%,.9);
  --LGTcolor-neutral-20a:         hsla(0,0%,85%,.2);

  /* altri colori */
  /*--LGTcolor-alert:   hsla(20,90%,48%,1);*/
  --LGTcolor-alert:   hsl(19,100%,50%,1);
  --LGTcolor-success: hsla(125,64%,34%,1);
}



/* ------------------------ */
/* +++ # BASE SETTING # +++ */
/* ------------------------ */

html {
  font-size: var(--LGTtypebase, 15px);
  scroll-behavior: smooth;
}

@media(max-width: 500px) {
  body {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }
}

img {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}


/* -------------------------- */
/* +++ # JOOMLA SETTING # +++ */
/* -------------------------- */

#yoo-zoo .edit-item {
  display: none!important;
}



/* ---------------- */
/* +++ # GRID # +++ */
/* ---------------- */

.LGTgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  width: calc(100% + var(--LGTspace, 15px));
  margin-left: calc(var(--LGTspace, 15px) / 2 * -1);
  margin-right: calc(var(--LGTspace, 15px) / 2 * -1);
}

.LGTgrid--center {
  justify-content: center;
}
.LGTgrid--end {
  justify-content: flex-end;
}
.LGTgrid--around {
  justify-content: space-around;
}
.LGTgrid--between {
  justify-content: space-between;
}

.LGTgrid > * {
  --LGTcolumn: 1; /* Default width of the element */
  --LGTpush: 0; /* Default push of the element */

  margin-left: calc(var(--LGTpush) / var(--LGTgrid) * 100% + var(--LGTspace) / 2);
  margin-right: calc(var(--LGTspace) / 2);

  flex-basis: calc(var(--LGTcolumn) / var(--LGTgrid) * 100%);

  /*max-width: 100%;*/
  max-width: calc(100% - (var(--LGTpush) / var(--LGTgrid) * 100% + var(--LGTspace)));
}

.LGTgrid > .LGTgrid__grow {
  flex-grow: 1;
}



/* ----------------------- */
/* +++ # MAIN LAYOUT # +++ */
/* ----------------------- */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

.LGTrootwrapper {
  flex-grow: 1;
  display: flex;
}

.LGTcontent {
  flex-grow: 1;
}

.LGTheader > *,
.LGTcontent > *,
.LGTfooter > * {
  margin: 0 auto;
  padding: 0 var(--LGTspace, 15px);
  max-width: var(--LGTmaxlayout, none);
  /*  box-sizing: content-box;*/
}

.LGTcontent__main,
.LGTcontent__main > * {
  height: 100%;
}



/* switch to destop menu */
@media (max-width: 1023px) {
  .LGTheader__menu > *:not(.LGToffcanvas__trigger) {
    display: none;
  }
  .LGToffcanvas__trigger {
    margin: 0;
    width: 40px;
    height: 40px;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;

    position: fixed;
    top: 0;
    right: 0;
    margin: var(--LGTspace, 15px);
    
  }
}
@media (min-width: 1024px) {
  .LGTheader__menu > .LGToffcanvas__trigger {
    display: none;
  }
}

/* switch desktop main layout */
.LGTcontent__main > * {
  --LGTgrid: 1;
}
@media (min-width: 1024px) {
  .LGTcontent__main > * {
    --LGTgrid: 12;
  }
  .LGTsidebar--a {
    --LGTcolumn: 2;
  }
  .LGTsidebar--b {
    --LGTcolumn: 3;
  }
}



/* ------------------ */
/* +++ # HEADER # +++ */
/* ------------------ */

.LGTheader {
  background-color: var(--LGTcolor-neutral-extralight, #FFF);
  border-bottom: 2px solid;
  
}

.LGTheader__wrap {
  display: flex;
  /*flex-wrap: wrap;*/
  align-items: center;
}

.LGTheader__toolbar--a,
.LGTheader__menu {
  flex-grow: 1;
  /*width: 100%;*/
}

.LGTheader__toolbar--b {
  margin-left: auto;
  order: 2;
}

.LGTheader__logo {
  margin-right: var(--LGTspace, 15px);
}





/* ------------------ */
/* +++ # FOOTER # +++ */
/* ------------------ */

.LGTfooter {
  background-color: var(--LGTcolor-neutral-extralight, #FFF);
  border-top: 1px solid var(--LGTcolor-ink-extralight, #222);
}