/* ══════════════════════════════════════════════
   Infosei Overrides — WP-specific styles on top of Sniter
   ══════════════════════════════════════════════ */

/* ── Myriad Pro (local web fonts in theme /font folder) ──────── */
@font-face {
  font-family: 'Myriad Pro';
  src: url('../../font/MyriadPro-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('../../font/MYRIADPRO-REGULAR.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('../../font/MYRIADPRO-BOLD.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('../../font/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* ── Brand blue + shared overlay ──────────────────────────────
   Single source of truth for the blue "veil" used on top of media:
   - Hero video, Stats/counter background image, and Portfolio photos.
   Mechanism everywhere: a media layer (video / image / photo) with this
   translucent blue on top. Over a solid #1e375b base (no media) it reads as
   flat dark blue; over bright media it reads lighter — same color, different
   result depending on what is behind it. */
:root {
  --infosei-blue: #1e375b;
  --infosei-overlay: rgb(30 55 91 / 80%);
}

/* ── Global font ──────────────────────────────── */
body, h1, h2, h3, h4, h5, h6, p, a, span, li, button, input, textarea, div {
  font-family: 'Myriad Pro', sans-serif !important;
}

/* ── Scroll-reveal — elements start invisible, animate on viewport entry ── */
.wow {
  opacity: 0;
  transition: none;
}
.wow.animated {
  opacity: 1;
}

.default-color { color: #1e375b !important; }
.section-title h4.default-color { color: #e9bd2c !important; }
#progetti .section-title { text-align: center !important; }
.section-title h3 { color: #e9bd2c !important; }
.section-title h1 { font-weight: 800 !important; font-size: 56px !important; }

#chi-siamo,
#lavori,
#progetti {
  padding-top: 56px;
}
#chi-siamo {
  padding-bottom: 48px;
}
#progetti {
  padding-bottom: 56px;
}
#chi-siamo .mt-50,
#progetti .mt-50 {
  margin-top: 28px;
  margin-bottom: 0;
}
.icon-text.feature-box-2 .icon { background-color: #1e375b !important; }
.btn-color { background-color: #1e375b !important; border-color: #1e375b !important; }
.btn-color:hover, .btn-color:active, .btn-color:focus { background-color: #1e375b !important; border-color: #1e375b !important; opacity: 1; }

/* ── Navbar dropdown — width matches the "Servizi" underline ─ */
/* The white dropdown box is exactly as wide as the parent "Servizi" link
   (same width as the blue underline that appears under it) and aligned to
   its left edge. Item text keeps a 12px left padding so it starts under the
   "S" of "Servizi". */
nav.navbar.bootsnav li.dropdown ul.dropdown-menu {
  width: 100% !important;
  min-width: 0 !important;
  left: 0 !important;
}

nav.navbar.bootsnav li.dropdown ul.dropdown-menu > li > a {
  padding: 8px 12px !important;
  font-size: 13px !important;
}

/* ── Navbar logo — fit Infosei brand in brand-center layout ── */
.brand-center .logo img {
  max-height: 30px !important;
  max-width: 120px !important;
  width: auto !important;
  height: auto !important;
}

/* ── Servizi — Latin text overlaid on the service photo ──────── */
.bg-flex .svc-latin {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 7%;
  pointer-events: none;
  color: var(--infosei-blue);
}

.bg-flex .svc-latin--right {
  align-items: flex-end;
  text-align: right;
}

.bg-flex .svc-latin--left {
  align-items: flex-start;
  text-align: left;
}

.svc-latin__pre,
.svc-latin__post {
  font-style: italic;
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1.05;
}

.svc-latin__hl {
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  font-size: clamp(48px, 7.5vw, 96px);
  letter-spacing: 1px;
  line-height: 1;
  margin: 0.08em 0;
}

/* Service bands: always the same height (tallest of Eventi/Grafica/Video/Editoria) */
@media (min-width: 768px) {
  .svc-stack {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
  }
  .svc-band {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .svc-band > .container-fluid,
  .svc-band > .container-fluid > [class*="col-"] {
    height: 100%;
  }
  .svc-band .col-inner.spacer {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ── Profilo section — responsive height to fully contain mockup images
   The .img-container is absolutely positioned (left:57% → right:0),
   and .mockup-1 height = 82% of that width.  The bottom images
   (object-5 at top:68%) need the section to be ≈ 38 vw tall so they
   aren't hidden behind the next section.  This mirrors Sniter's own
   behavior where longer text content keeps the section tall enough. ── */
#profilo {
  position: relative !important;
  min-height: clamp(500px, 38vw, 800px);
}


@media (max-width: 767px) {
  #profilo {
    min-height: auto;
  }
}

.hero-text-wrap {
  background-color: rgb(0 0 0 / 35%);
}

.pb-120 {
  padding-bottom: 0px;
}

.mt-50 {
  margin-bottom: 50px;
}

/* ── Hero text spacing between elements ───────── */
.hero-text-wrap > .hero-anim + .hero-anim {
  margin-top: 25px;
}

/* ── Hero video ─────────────────────────────────── */
.hero-video-wrap {
  overflow: hidden;
}

/* ── Hero entrance — emphasized & sequenced ──────────────
   1) logo slides in from the LEFT, then
   2) the upper text and 3) the lower text both slide in from the RIGHT.
   Movements use a long travel + overshoot easing so they stand out. */
.hero-text-wrap > .hero-anim {
  opacity: 0;
  animation-duration: 1.1s;
  animation-fill-mode: both;
  will-change: transform, opacity;
}

/* 1) Logo — from the left, first */
.hero-anim--logo {
  animation-name: heroLogoIn;
  animation-delay: 1.3s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2) Upper text — from the right, second (+1s delay) */
.hero-anim--top {
  animation-name: heroTextFromRight;
  animation-delay: 2.2s;
  animation-timing-function: cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* 3) Lower text — from the right, third (subtitle, then tagline) (+1s delay) */
.hero-anim--bottom {
  animation-name: heroTextFromRight;
  animation-delay: 2.85s;
  animation-timing-function: cubic-bezier(0.34, 1.4, 0.5, 1);
}

.hero-anim--bottom2 {
  animation-delay: 3.15s;
}

@keyframes heroLogoIn {
  0% {
    opacity: 0;
    transform: translateX(-360px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes heroTextFromRight {
  0% {
    opacity: 0;
    transform: translateX(320px);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Hero video section ─────────────────────── */
.hero-video-wrap { min-height: 100vh; }
.hero-video-wrap .overlay-bg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
}

/* ── Portfolio — CubePortfolio overlay color override ── */
.cbp-item .folio-overlay {
  background: rgb(30 55 91 / 80%);
}

.portfolio-description .links {
  font-size: 24px;
}

p {
  font-size: 18px;
}

.blog-list .post-text p {
  font-size: 18px;
}

.blog-list .post-text h3 {
  font-size: 24px;
}

/* ── Section titles + service text: staggered slide-in from the left ──── */
.section-title > *,
.mission-section > p {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .7s ease, transform .7s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-title.in-view > *,
.mission-section.in-view > p {
  opacity: 1;
  transform: translateX(0);
}

.section-title.in-view > *:nth-child(1) { transition-delay: 0s; }
.section-title.in-view > *:nth-child(2) { transition-delay: .12s; }
.section-title.in-view > *:nth-child(3) { transition-delay: .24s; }
.section-title.in-view > *:nth-child(4) { transition-delay: .36s; }
.section-title.in-view > *:nth-child(5) { transition-delay: .48s; }
/* Service text enters together, slightly delayed */
.mission-section .section-title.in-view > *:nth-child(1),
.mission-section .section-title.in-view > *:nth-child(2),
.mission-section.in-view > p { transition-delay: .3s; }

/* Service text: clear slow slide-in (less fade) */
.mission-section .section-title > *,
.mission-section > p {
  transition: opacity .6s ease, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Grafica + Editoria (testo a sinistra): entra da sinistra verso destra */
.mission-section.reveal-left .section-title > *,
.mission-section.reveal-left > p {
  transform: translateX(-60px);
}

/* Eventi + Video (testo a destra): entra da destra verso sinistra */
.mission-section.reveal-right .section-title > *,
.mission-section.reveal-right > p {
  transform: translateX(60px);
}

/* Reset after the slide-in (both left and right columns) */
.mission-section.in-view .section-title > *,
.mission-section.in-view > p {
  transform: translateX(0);
}


/* ── Filter buttons ─────────────────────────── */
.cbp-l-filters-alignCenter .cbp-filter-item {
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 13px;
  padding: 10px 30px;
  border-radius: 0;
  margin: 0 8px;
  transition: all .3s ease;
  color: #888;
}

.cbp-l-filters-alignCenter .cbp-filter-item:hover {
  background-color: #e9bd2c !important;
  color: #fff !important;
}

/* Selected (white) filter button → text stays grey, not yellow */
.cbp-l-filters-alignCenter .cbp-filter-item.cbp-filter-item-active,
.cbp-l-filters-alignCenter .cbp-filter-item.cbp-filter-item-active:hover {
  color: #888 !important;
  background-color: #fff !important;
  border-bottom-color: #e9bd2c !important;
}

/* ── Project description read-more ──────────── */
.infosei-project-desc {
  position: relative;
  overflow: hidden;
  transition: max-height .5s ease;
}

.infosei-project-desc--clamped {
  max-height: 100px;
}

.infosei-project-desc--clamped::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(transparent, #fff);
  pointer-events: none;
}

.infosei-project-desc--open {
  max-height: 2000px;
}

.infosei-project-desc--open::after {
  display: none;
}

.infosei-readmore {
  background: none;
  border: none;
  color: #000;
  cursor: pointer;
  font-size: 13px;
  padding: 5px 0;
  text-transform: none;
  letter-spacing: 0.5px;
  font-weight: 600;
  transition: color .3s;
}

.infosei-readmore i {
  margin-left: 5px;
  font-size: 11px;
  transition: transform .3s ease;
}

.infosei-readmore:hover {
  color: #333;
}

.infosei-readmore.is-hidden {
  display: none;
}

/* ── Lightbox ───────────────────────────────── */
.infosei-lightbox {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}

.infosei-lightbox.is-open {
  display: flex;
}

.infosei-lightbox__overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.92);
}

.infosei-lightbox__content {
  position: relative; z-index: 2;
  max-width: 90vw; max-height: 85vh;
}

.infosei-lightbox__img {
  max-width: 90vw; max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
}

.infosei-lightbox__close,
.infosei-lightbox__prev,
.infosei-lightbox__next {
  position: absolute; z-index: 3;
  background: none; border: none;
  color: #fff; font-size: 30px;
  cursor: pointer;
  opacity: .7;
  transition: opacity .3s;
}

.infosei-lightbox__close:hover,
.infosei-lightbox__prev:hover,
.infosei-lightbox__next:hover {
  opacity: 1;
}

.infosei-lightbox__close { top: 20px; right: 30px; font-size: 40px; }
.infosei-lightbox__prev  { left: 20px; top: 50%; transform: translateY(-50%); }
.infosei-lightbox__next  { right: 20px; top: 50%; transform: translateY(-50%); }

.infosei-lightbox__counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 3; color: rgba(255,255,255,.7); font-size: 14px;
}

/* ── Clients marquee ────────────────────────── */
.infosei-marquee {
  width: 100%;
  overflow: hidden;
}

.infosei-marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}

.infosei-marquee:hover .infosei-marquee__track {
  animation-play-state: paused;
}

.infosei-marquee__item {
  flex: 0 0 auto;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.infosei-marquee__item img {
  max-height: 110px;
  max-width: 200px;
  object-fit: contain;
  border-radius: 6px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Footer override for Infosei brand color ── */
.footer {
  background-color: #1e375b !important;
}
.footer-copyright {
  background-color: #1e375b !important;
}

.footer .copy-right {
  color: rgba(255,255,255,.6);
}

.footer .social-media li a {
  color: rgba(255,255,255,.6);
}

.footer .social-media li a:hover {
  color: #fff;
}

/* ── Admin bar offset ───────────────────────── */
.admin-bar nav.navbar.navbar-fixed {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  .admin-bar nav.navbar.navbar-fixed {
    top: 46px !important;
  }
}

/* ── Blog list overrides ──── */
.blog-list .post-img img { opacity: 1 !important; }
.blog-list span { color: #000; }

/* ── Project card image carousel ───────────── */
.infosei-project-img {
  position: relative;
  overflow: hidden;
}

.infosei-project-img .carousel-item {
  display: none;
}

.infosei-project-img .carousel-item.active {
  display: block;
}

.infosei-project-img .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(255,255,255,.85);
  border: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #1e375b;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease;
}

.infosei-project-img:hover .carousel-arrow {
  opacity: 1;
}

.infosei-project-img .carousel-arrow--prev {
  left: 10px;
}

.infosei-project-img .carousel-arrow--next {
  right: 10px;
}

/* ── No-gutters utility ──────────────────── */
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.row.no-gutters > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}

/* ── Responsive marquee ──────────────────── */
@media (max-width: 767px) {
  .infosei-marquee__item {
    padding: 15px 25px;
  }
  .infosei-marquee__item img {
    max-height: 50px;
    max-width: 120px;
  }
}

/* ── Contact form messages ───────────────── */
#formMessage {
  margin-bottom: 15px;
}

#formMessage.success {
  color: #27ae60;
  font-weight: 600;
}

#formMessage.error {
  color: #e74c3c;
  font-weight: 600;
}

/* ── Stats counters font ───────────────────────── */
.counter-wrap h2 {
  font-family: 'Myriad Pro', sans-serif !important;
  font-size: 60px !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.counter-wrap h2 .counter {
  font-family: 'Myriad Pro', sans-serif !important;
  font-size: 60px !important;
}

/* ── Stats / counter font icons — yellow → move & turn white on hover ── */
#stats .counter-wrap i.icofont.stat-ico {
  color: #e9bd2c !important;
  display: inline-block;
  transition: color .35s ease, transform .45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#stats .counter-wrap:hover i.icofont.stat-ico {
  color: #fff !important;
  transform: translateY(-12px) scale(1.12);
}

/* ── Stats image icons — recolored via CSS mask (yellow → white on hover) ── */
.stat-icon-wrap {
  position: relative;
  display: inline-block;
}

#stats .stat-ico-img {
  display: inline-block;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  background-color: #e9bd2c;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color .35s ease, transform .45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#stats .counter-wrap:hover .stat-ico-img {
  background-color: #fff;
  transform: translateY(-12px) scale(1.12);
}

/* ── Cookie consent banner ─────────────────── */
.infosei-cookie {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  background: #1e375b;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1), opacity .5s ease;
}

.infosei-cookie[hidden] { display: none; }

.infosei-cookie.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.infosei-cookie__inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.infosei-cookie__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  flex: 1 1 320px;
}

.infosei-cookie__text a {
  color: #e9bd2c;
  text-decoration: underline;
}

.infosei-cookie__actions {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}

.infosei-cookie__btn {
  cursor: pointer;
  border: 0;
  border-radius: 4px;
  padding: 10px 26px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: opacity .25s ease, background-color .25s ease;
}

.infosei-cookie__btn--accept {
  background: #e9bd2c;
  color: #1e375b;
}

.infosei-cookie__btn--decline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
}

.infosei-cookie__btn:hover { opacity: .85; }

@media (max-width: 600px) {
  .infosei-cookie__inner { justify-content: center; text-align: center; }
  .infosei-cookie__actions { width: 100%; justify-content: center; }
}