/* The Fashion Lover - versione statica
   Livello di stile sopra Helix3 (template.css + preset2), fedele ai parametri
   del template originale: preset2 (bianco/nero), Quicksand body, Cinzel titoli,
   Quattrocento 700/14px navigazione. */

body.site {
  font-family: 'Quicksand', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #000;
  background: #fff;
}

h1, h2, h3, h4, .tfl-card-title, .sp-page-title h2 {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: .02em;
}

a { color: #000; }
a:hover, a:focus { color: #666; text-decoration: none; }

/* ---------- header / menu ---------- */
#sp-header {
  height: auto;
  min-height: 90px;
  background: #fff;
  border-bottom: 1px solid #ededed;
  box-shadow: none;
}
#sp-header .container { width: 100%; max-width: 1700px; }
#sp-header .sp-megamenu-wrapper { float: none; }
#sp-header .sp-megamenu-parent {
  float: none;
  display: inline-block;
  text-align: center;
  padding: 8px 0;
  max-width: 100%;
}
#sp-header .sp-megamenu-parent > li { float: none; display: inline-block; vertical-align: middle; }
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  font-family: 'Quattrocento', Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 90px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #000;
  padding: 0 12px;
}
.sp-megamenu-parent > li > a:hover { color: #999; }
.sp-megamenu-parent > li.active > a { color: #000; }
.sp-megamenu-parent > li.menu-logo > a { padding: 0 26px; line-height: 1; }
.sp-megamenu-parent > li.menu-logo img { max-height: 56px; width: auto; vertical-align: middle; }

#offcanvas-toggler { line-height: 90px; float: none; display: inline-block; margin-right: 12px; }
#offcanvas-toggler > i { color: #000; font-size: 20px; }

body.menu-open .sp-megamenu-parent { display: block; }

/* ---------- sottovoci di menu (dropdown) ---------- */
.sp-megamenu-parent > li.sp-has-child > a { padding-right: 22px; }
.sp-megamenu-parent > li.sp-has-child > a:after { font-size: 10px; }
.sp-megamenu-parent .sp-dropdown-inner {
  background: #fff;
  min-width: 230px;
  border: 1px solid #ededed;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  font-family: 'Quattrocento', Georgia, serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #000;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a { background: #000; color: #fff; }

/* sotto ~1700px il contenuto del menu (9 voci + logo + lente) non ci sta
   piu' su una riga con la spaziatura "larga": si stringe qui, cosi' resta
   su una riga fino a schermi piuttosto stretti invece di andare a capo. */
@media (max-width: 1699px) {
  .sp-megamenu-parent > li > a,
  .sp-megamenu-parent > li > span { padding: 0 8px; letter-spacing: .06em; font-size: 13px; }
  .sp-megamenu-parent > li.menu-logo > a { padding: 0 14px; }
  .sp-megamenu-parent > li.menu-logo img { max-height: 34px; }
}

@media (max-width: 1250px) {
  .sp-megamenu-parent > li > a,
  .sp-megamenu-parent > li > span { padding: 0 6px; letter-spacing: .03em; font-size: 12px; }
  .sp-megamenu-parent > li.menu-logo > a { padding: 0 10px; }
  .sp-megamenu-parent > li.menu-logo img { max-height: 28px; }
}

/* schermi molto stretti (piccoli laptop/tablet landscape): il menu va a
   capo su 2 righe con spaziatura piu' comoda invece di stringersi
   all'illeggibile - e' un fallback, non lo stato normale */
@media (max-width: 1023px) {
  .sp-megamenu-parent > li > a,
  .sp-megamenu-parent > li > span { font-size: 12px; padding: 0 8px; letter-spacing: .05em; }
  .sp-megamenu-parent > li.menu-logo img { max-height: 32px; }
}

@media (max-width: 767px) {
  #sp-header { min-height: 0; }
  #sp-header .sp-megamenu-parent {
    white-space: normal; display: block !important; width: 100%; padding: 6px 0;
  }
  #sp-header .sp-megamenu-parent > li > a,
  #sp-header .sp-megamenu-parent > li > span { line-height: 34px; font-size: 12px; padding: 0 9px; letter-spacing: .1em; }
  #sp-header .sp-megamenu-parent > li.menu-logo { display: block !important; }
  #sp-header .sp-megamenu-parent > li.menu-logo > a { padding: 0; }
  #sp-header .sp-megamenu-parent > li.menu-logo img { max-height: 44px; margin: 8px 0; }
  #offcanvas-toggler { display: none !important; }

  /* niente hover sul touch: le sottovoci restano sempre visibili, rientrate.
     "menu-slide-down" (classe del menu Helix3) le tiene invisibili di default
     via opacity/visibility in attesa dell'hover: le forziamo visibili qui. */
  #sp-header .sp-dropdown {
    position: static !important; display: block !important;
    opacity: 1 !important; visibility: visible !important;
    top: auto !important; transition: none !important;
    box-shadow: none; margin: 0;
  }
  #sp-header .sp-dropdown-inner { padding: 0; border: none; background: transparent; }
  #sp-header .sp-dropdown li.sp-menu-item > a {
    padding: 0 9px 0 26px; line-height: 30px; font-size: 11px; color: #666;
  }
  #sp-header .sp-dropdown li.sp-menu-item.active > a,
  #sp-header .sp-dropdown li.sp-menu-item > a:hover { background: transparent; color: #000; }
  #sp-header li.sp-has-child > a:after { display: none; }
}

/* ---------- page title ---------- */
.sp-page-title { padding: 60px 0; background: #000; }
.sp-page-title h2 { color: #fff; font-size: 30px; text-transform: uppercase; letter-spacing: .1em; margin: 0; }
.sp-page-title p { color: rgba(255,255,255,.65); margin: 8px 0 0; font-size: 13px; letter-spacing: .08em; }

#sp-main-body { padding: 50px 0 70px; }

/* ---------- hero ---------- */
.tfl-hero {
  position: relative;
  min-height: 520px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  margin-bottom: 60px;
}
.tfl-hero:before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%);
}
.tfl-hero-inner { position: relative; padding: 40px; color: #fff; width: 100%; }
.tfl-hero-cat, .tfl-card-cat {
  font-family: 'Quattrocento', Georgia, serif;
  font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .18em;
  margin-bottom: 10px;
}
.tfl-hero-cat { color: rgba(255,255,255,.85); }
.tfl-card-cat a { color: #999; }
.tfl-hero-title { font-size: 38px; margin: 0 0 8px; line-height: 1.2; }
.tfl-hero-title a { color: #fff; }
.tfl-hero-title a:hover { color: #eee; }
.tfl-hero-date { font-size: 12px; letter-spacing: .1em; color: rgba(255,255,255,.75); margin-bottom: 18px; }
.tfl-hero .btn-primary {
  border-radius: 0; border-color: #fff; background: transparent; color: #fff;
  font-family: 'Quattrocento', Georgia, serif; font-weight: 700;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding: 12px 26px;
}
.tfl-hero .btn-primary:hover { background: #fff; color: #000; border-color: #fff; }

@media (max-width: 767px) {
  .tfl-hero { min-height: 320px; }
  .tfl-hero-title { font-size: 24px; }
  .tfl-hero-inner { padding: 22px; }
}

/* ---------- sezioni e griglia ---------- */
.tfl-section-title {
  font-size: 20px; text-transform: uppercase; letter-spacing: .18em;
  text-align: center; margin: 50px 0 30px; position: relative;
}
.tfl-section-title:after {
  content: ''; display: block; width: 46px; height: 1px;
  background: #000; margin: 14px auto 0;
}
.tfl-section-title a { color: #000; }

/* flex sulla riga: evita che schede di altezza diversa (es. senza foto,
   o con testo piu' lungo) rompano l'allineamento a 3/2 colonne del
   grid float di Bootstrap 3 */
.tfl-grid { margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: stretch; }
.tfl-col { margin-bottom: 40px; display: flex; float: none; }
.tfl-card { height: 100%; width: 100%; display: flex; flex-direction: column; }
.tfl-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.tfl-card-img { display: block; overflow: hidden; background: #f5f5f5; }
.tfl-card-img img {
  width: 100%; height: 260px; object-fit: cover; display: block;
  transition: transform .6s ease, opacity .3s ease;
}
.tfl-card:hover .tfl-card-img img { transform: scale(1.05); }
.tfl-card-body { padding: 18px 4px 0; text-align: center; }
.tfl-card-title { font-size: 17px; line-height: 1.35; margin: 0 0 8px; }
.tfl-card-date { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #999; }
.tfl-card-text { font-size: 13px; color: #666; margin-top: 10px; line-height: 1.7; }
.tfl-cat-card { border: 1px solid #ededed; padding: 30px 10px; }
.tfl-cat-card .tfl-card-body { padding-top: 0; }

/* ---------- articolo ---------- */
.tfl-article { max-width: 820px; margin: 0 auto; }
.tfl-article-head { text-align: center; margin-bottom: 30px; }
.tfl-article-head h1 { font-size: 32px; line-height: 1.25; margin: 6px 0 10px; }
.tfl-article-img { margin: 0 0 34px; }
.tfl-article-img img { width: 100%; height: auto; display: block; }
.tfl-article-img figcaption {
  font-size: 12px; color: #999; text-align: center; padding-top: 8px; letter-spacing: .04em;
}
.tfl-article-body { font-size: 15px; line-height: 1.9; color: #222; }
.tfl-article-body img { max-width: 100%; height: auto; margin: 14px auto; display: block; }
.tfl-article-body p { margin-bottom: 18px; }
.tfl-article-body iframe { max-width: 100%; }
.tfl-related { margin-top: 70px; border-top: 1px solid #ededed; padding-top: 10px; }

.tfl-about { max-width: 760px; margin: 0 auto; }
.tfl-mail { font-size: 20px; font-family: 'Cinzel', serif; margin: 14px 0 26px; }

/* ---------- paginazione ---------- */
.tfl-pagination { margin-top: 20px; }
.tfl-pagination .pagination > li > a {
  border-radius: 0; border-color: #e6e6e6; color: #000;
  font-family: 'Quattrocento', Georgia, serif; font-weight: 700; font-size: 13px;
}
.tfl-pagination .pagination > .active > a { background: #000; border-color: #000; color: #fff; }

/* ---------- ricerca ---------- */
.tfl-search #tfl-q {
  max-width: 520px; margin: 0 auto 10px; border-radius: 0; height: 52px;
  border: 1px solid #ddd; text-align: center; font-size: 15px; box-shadow: none;
}
#tfl-count { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #999; margin-bottom: 30px; }

/* ---------- bottom ---------- */
#sp-bottom { background: #f5f5f5; padding: 70px 0; }
#sp-bottom .sp-module-title {
  font-family: 'Cinzel', serif; font-size: 16px; text-transform: uppercase;
  letter-spacing: .18em; text-align: center; margin-bottom: 22px;
}
.archive-cloud { text-align: center; margin: 0; }
.archive-cloud a {
  display: inline-block; margin: 4px 5px; padding: 6px 14px;
  border: 1px solid #ddd; background: #fff; font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em;
  font-family: 'Quattrocento', Georgia, serif; font-weight: 700;
}
.archive-cloud a:hover { background: #000; color: #fff; border-color: #000; }

/* ---------- footer ---------- */
#sp-footer { background: #000; color: #fff; padding: 50px 0; }
#sp-footer a { color: #fff; }
#sp-footer a:hover { color: #bbb; }
#sp-footer .footer-logo { max-width: 240px; height: auto; }
#sp-footer .social { font-size: 22px; margin: 22px 0 18px; }
#sp-footer .social a { display: inline-block; margin: 0 10px; }
#sp-footer .copy { font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.6); margin: 0; }