/*
Quick.Cms default stylesheet - refreshed theme for zerbinetta.eu
*/

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap");

:root {
  --bg-main: #f8f4ec;
  --bg-card: #fffdf9;
  --bg-soft: #fff6e8;
  --text-main: #2b221d;
  --text-muted: #6e6258;
  --brand: #d86f2b;
  --brand-dark: #a8521f;
  --accent: #2f8f6b;
  --line: #eadfce;
  --white: #ffffff;
  --shadow: 0 12px 28px rgba(67, 45, 29, 0.12);
}

body,
body *,
body *:before,
body *:after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

body,
table {
  color: var(--text-main);
  font-size: 1em;
  font-family: "Nunito", "Trebuchet MS", sans-serif;
}

body {
  background:
    radial-gradient(circle at 14% 5%, #fff6df 0%, transparent 26%),
    radial-gradient(circle at 88% 15%, #ffe7ce 0%, transparent 34%),
    var(--bg-main);
  line-height: 1.6;
}

a {
  color: var(--brand-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--brand);
}

.msg.error h1 {
  padding: 20px 0;
  text-align: center;
}

.wai {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
}

#container {
  position: relative;
  width: min(1180px, 94vw);
  margin: 18px auto;
  background: linear-gradient(180deg, #fffefb 0%, #fffaf2 100%);
  border: 1px solid #f0e5d4;
  border-radius: 24px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

#body,
#foot {
  margin: 0 auto;
  padding: 0;
}

#skiplinks {
  position: absolute;
  top: 0;
  left: 0;
}

#skiplinks a {
  position: absolute;
  top: -500px;
  left: 0;
  z-index: 10;
  min-width: 200px;
  padding: 10px;
  color: var(--white);
}

#skiplinks a:focus {
  top: 0;
  background: #000;
}

#header {
  position: relative;
  background: linear-gradient(110deg, #fff0d8 0%, #ffe3bf 44%, #f8d4b0 100%);
}

#header::after {
  content: "";
  position: absolute;
  inset: auto -160px -120px auto;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.header__navigation {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  z-index: 2;
  padding: 1.2rem 1.4rem 0.4rem;
}

#logo {
  padding: 0.8rem 0.2rem;
  flex: 1 1 300px;
}

#logo #title a {
  color: #3f2f26;
  font: 700 clamp(1.8rem, 5vw, 3rem) "Fraunces", Georgia, serif;
  line-height: 1;
  text-transform: none;
  text-decoration: none;
  letter-spacing: 0.01em;
}

#logo #title a strong {
  color: var(--brand);
}

#logo #title a span {
  color: var(--accent);
}

#logo #slogan {
  margin-top: 0.4rem;
  color: #5f4f44;
  font-size: 1rem;
  font-weight: 600;
}

.header__menu {
  flex: 1 1 420px;
}

.header__menu .level-0-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  list-style: none;
  gap: 0.45rem;
}

.header__menu .menu__link {
  display: block;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  color: #4a3a2f;
  font-weight: 700;
  text-decoration: none;
  transition: 0.2s ease;
}

.menu__link:hover,
.selected > .menu__link,
.selected-parent > .menu__link {
  background: rgba(255, 255, 255, 0.75);
  color: var(--brand-dark);
}

@media screen and (min-width: 641px) {
  button.hamburger {
    display: none;
  }
}

#slider {
  position: relative;
  clear: both;
  min-height: 300px;
  overflow: hidden;
  color: var(--white);
  border-top: 1px solid rgba(102, 77, 57, 0.14);
}

#slider li.img {
  line-height: 0;
}

#slider li.img img {
  max-width: 100%;
}

#slider li.no-img {
  min-height: 300px;
}

.quick-slider {
  position: relative;
  margin: auto;
  overflow: hidden;
}

.quick-slider ul {
  list-style: none;
}

.quick-slider-slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: none;
  text-align: left;
  overflow: hidden;
}

.quick-slider-slide:first-child {
  display: block;
}

.quick-slider-slide .description {
  z-index: 3;
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  max-width: 560px;
  width: calc(100% - 2.4rem);
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(35, 25, 19, 0.48);
  backdrop-filter: blur(2px);
  color: var(--white);
}

.quick-slider-slide .description a {
  color: inherit;
}

.quick-slider-nav-arrows {
  z-index: 5;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  min-height: 56px;
  height: 40%;
  margin: 0;
  padding: 0 10px;
  border: 0;
  background: rgba(46, 28, 14, 0.42);
  opacity: 0.6;
  transition: 0.2s ease;
}

.quick-slider-nav-arrows:hover {
  opacity: 1;
}

.quick-slider-nav-arrows:before {
  content: "";
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: url("img/arrows.png") no-repeat 0 0;
}

.quick-slider-nav-arrows-prev:before {
  background-position: 0 -32px;
}

.quick-slider-nav-arrows-next {
  right: 0;
}

.quick-slider-nav-arrows-prev {
  left: 0;
}

.quick-slider-nav-dots-wrapper {
  position: absolute;
  bottom: 0.6rem;
  width: 100%;
  list-style: none;
  text-align: center;
}

.quick-slider-nav-dots {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  color: transparent;
  font-size: 0;
}

.quick-slider-nav-dots.active,
.quick-slider-nav-dots:hover {
  background: #ffffff;
}

div[id^="slider-"] > ul > li {
  display: none;
}

#body {
  clear: both;
  border-top: 1px solid var(--line);
}

#body:after {
  content: "";
  display: table;
  clear: both;
}

#page {
  position: relative;
  margin: 1.5rem 2.2% 2rem;
  padding: 1.4rem clamp(1rem, 3vw, 1.8rem) 1.6rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
}

#page h1 {
  margin: 0.2em 0 0.55em;
  color: #3d2b22;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.9rem, 3.3vw, 2.55rem);
  line-height: 1.15;
  font-weight: 700;
}

.breadcrumb {
  margin-bottom: 1rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.breadcrumb ol {
  list-style: none;
}

.breadcrumb li {
  display: inline-block;
}

.breadcrumb li:not(:first-child)::before {
  content: "\\203A";
  display: inline-block;
  padding: 0 0.48em;
  color: var(--text-muted);
  font-weight: bold;
}

#page div.content {
  line-height: 1.72;
  color: var(--text-main);
}

#page div.content > p {
  padding-bottom: 1rem;
}

#page div.content > h2,
#page div.content > h3 {
  margin: 1.2rem 0 0.45rem;
  font-family: "Fraunces", Georgia, serif;
  line-height: 1.3;
  font-weight: 700;
}

#page div.content > h2 {
  font-size: 1.7rem;
}

#page div.content > h3 {
  font-size: 1.3rem;
}

#page div.content > ul,
#page div.content > ol {
  padding-left: 1.4rem;
}

#page div.content > ul li,
#page div.content > ol li {
  margin: 0.5em 0;
}

#content li img:hover,
ul[class*="images-"] img:hover {
  opacity: 0.9;
}

ul[class*="images-"] {
  list-style: none;
}

ul[class*="images-"] li {
  margin-bottom: 1rem;
  text-align: center;
}

ul[class*="images-"] p {
  max-width: 250px;
  margin: 0.5rem auto 0;
  color: var(--text-muted);
  font-size: 0.92em;
}

ul[class*="images-"] img {
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid #e9dcc9;
  box-shadow: 0 9px 20px rgba(72, 53, 35, 0.14);
}

.images-1 {
  clear: left;
  float: left;
  margin: 0.35rem 1.4rem 0.8rem 0;
}

.images-2 {
  clear: right;
  float: right;
  margin: 0.35rem 0 0.8rem 1.2rem;
}

.images-3 {
  clear: both;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.images-3 li {
  flex: 1 0 100%;
  padding: 0.35rem 0.4rem;
}

@media screen and (min-width: 960px) {
  .images-3 li {
    flex: 0 0 calc(100% / 3);
  }
}

.files-list {
  margin: 1rem 0 0.6rem;
  list-style: none;
  border-left: 2px solid var(--line);
  font-size: 0.95rem;
}

.files-list li {
  min-height: 20px;
  margin: 0 0 0.9rem 1rem;
  padding-left: 2rem;
  background: url("img/files-ext.gif") no-repeat 0 -260px;
}

.files-list p {
  display: inline;
  color: var(--text-muted);
  font-style: italic;
}

.files-list p:before {
  content: " - ";
}

.files-list .zip { background-position: 0 0; }
.files-list .xml { background-position: 0 -20px; }
.files-list .xls { background-position: 0 -40px; }
.files-list .web { background-position: 0 -60px; }
.files-list .vcf { background-position: 0 -80px; }
.files-list .txt { background-position: 0 -100px; }
.files-list .sys { background-position: 0 -120px; }
.files-list .swf { background-position: 0 -140px; }
.files-list .psd { background-position: 0 -160px; }
.files-list .pps { background-position: 0 -180px; }
.files-list .png { background-position: 0 -200px; }
.files-list .pic { background-position: 0 -220px; }
.files-list .pdf { background-position: 0 -240px; }
.files-list .nn { background-position: 0 -260px; }
.files-list .eml { background-position: 0 -280px; }
.files-list .media { background-position: 0 -300px; }
.files-list .fla { background-position: 0 -320px; }
.files-list .exe { background-position: 0 -340px; }
.files-list .chm { background-position: 0 -360px; }
.files-list .cdr { background-position: 0 -380px; }

.pages-list {
  clear: both;
  margin: 1rem 0 0.3rem;
  list-style: none;
}

.pages-list .page {
  margin: 0 0 1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-left: 4px solid #e6b180;
  border-radius: 14px;
  background: var(--bg-soft);
}

.pages-list .page:after {
  content: "";
  display: table;
  clear: both;
}

.pages-list .image {
  float: left;
  margin: 0 1.2rem 0.45rem 0;
}

.pages-list .title {
  padding: 0 0 0.4em;
  font-size: 1.45rem;
}

.pages-list .title a {
  color: #4b3428;
  font-weight: 700;
  text-decoration: none;
}

.pages-list .title a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.pages-list div.description {
  line-height: 1.55;
}

.pages-list ul,
.pages-list ol {
  margin: 0.5em 2em;
}

#foot {
  background: #3d2c22;
  color: #f7ebdf;
  font-size: 1rem;
}

#foot .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#foot .container > * {
  padding: 1.2rem 1.6rem;
}

#foot a {
  color: #ffd7b0;
  text-decoration: none;
}

#foot a:hover {
  text-decoration: underline;
}

#foot .options ul {
  display: flex;
  list-style: none;
}

#foot .options li:not(:last-child) {
  margin-right: 1.5rem;
}

#foot .options a {
  display: block;
  font-size: 1%;
  color: transparent;
}

#foot .options .icon {
  width: 1rem;
}

#foot .options a:hover .icon {
  fill: #ffffff;
}

#powered {
  clear: both;
  width: 100%;
  margin: 14px 0 34px;
  text-align: center;
}

#powered a {
  display: inline-block;
  width: 192px;
  height: 26px;
  opacity: 0.9;
}

.icon {
  display: inline-block;
  content: "";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  fill: #ffd7b0;
}

.icon--labeled {
  margin-left: 0.75em;
  width: 1.5em;
  height: 1.5em;
}

@media screen and (max-width: 900px) {
  .header__navigation {
    padding: 1rem 1rem 0.3rem;
  }

  .header__menu .level-0-menu {
    justify-content: flex-start;
  }

  #page {
    margin: 1rem 2% 1.6rem;
    padding: 1rem;
  }

  .images-1,
  .images-2 {
    float: none;
    margin: 0.4rem auto 1rem;
  }
}

@media screen and (max-width: 640px) {
  #container {
    width: calc(100vw - 14px);
    margin: 7px auto;
    border-radius: 14px;
  }

  #logo #slogan {
    font-size: 0.93rem;
  }

  .quick-slider-slide .description {
    font-size: 0.92rem;
    line-height: 1.45;
  }

  #foot .container > * {
    padding: 1rem 1.1rem;
  }
}

@media print {
  * {
    color: #000 !important;
    background: #fff !important;
    border-color: #444 !important;
    border-width: 1px !important;
  }

  body {
    margin: 0.5cm 0;
    font-size: 0.875em;
  }

  #container {
    position: static;
    width: 17.2cm;
    height: auto;
    margin: 0;
    box-shadow: none;
  }

  #logo {
    padding: 0 0 0.2cm;
  }

  #logo #title a {
    font-size: 2em;
  }

  #body {
    clear: none;
    border-top: 0;
  }

  #page {
    clear: both;
    position: static;
    margin: 0;
    padding: 0;
    border: 0;
  }

  #page h1 {
    margin: 0.5cm 0 0;
    font-size: 1.25rem;
  }

  #menu-main,
  #foot .options,
  #slider,
  .quick-slider img,
  .quick-slider-nav-arrows,
  .quick-slider-nav-dots {
    display: none;
  }
}

/* PLUGINS */