@import url('https://fonts.googleapis.com/css2?family=Sloop+Script+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;900&display=swap');

:root{
  --bg: #f8f8f3;
  --muted: #f5f5f5;
  --hero: #e9ecef;
  --primary: #f9b707;
  --text: #212529;
  --alt-text: #eae8e8;
  --footer-bg: #343a40;
  /* Slightly stronger, layered shadow for better depth */
  --card-shadow: 0 6px 16px rgba(15,20,25,0.10), 0 12px 28px rgba(15,20,25,0.08);
  --radius: 8px;
  --hero-space-large: 40vh;
  --hero-space-compact: 12vh;

  /* layout helpers */
  --topbar-height: 42px;
  --navbar-height: 70px;
}

/* Global styles */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Navbar */
.navbar{
  position: absolute; /* overlay the hero-cover */
  top: 0; /* start at top; no hidden offset */
  left: 0;
  right: 0;
  z-index: 60; /* above hero-cover but below logo (70) */
  padding-top:0.75rem;
  padding-bottom:0.75rem;
  padding-left: calc(clamp(180px, 22vw, 280px) + 1.5rem); /* reserve space equal to logo width plus margin */
  padding-right: calc(clamp(180px, 22vw, 280px) + 1.5rem); /* mirror space on right to keep nav centered */
  background: transparent; /* ensure transparency */
  /* backdrop-filter: blur(8px); /* optional visual effect */
  /* -webkit-backdrop-filter: blur(8px); */
  border-bottom: none;
  box-shadow: none;
}

/* plain nav links (no fill or border) */
.nav-plain-links{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap: nowrap; /* prevent wrapping */
  flex-shrink: 1; /* allow shrinking */
  min-width: 0; /* allow flex children to shrink below content size */
}
.nav-plain-link{
  font-weight:600;
  color:var(--alt-text);
  text-decoration:none;
  padding:0.25rem 0.35rem;
  border:none;
  background:none;
  white-space: nowrap; /* keep link text on one line */
  flex-shrink: 1; /* allow individual links to shrink */
  min-width: 0; /* allow text truncation if needed */
}
.nav-toggle{
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.nav-toggle:hover,
.nav-toggle:focus{ background: transparent; color: var(--primary); outline: none; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
.nav-toggle .bar{ width: 20px; height: 2px; background: currentColor; position: relative; display: block; }
.nav-toggle .bar::before,
.nav-toggle .bar::after{ content:""; position:absolute; left:0; width:20px; height:2px; background: currentColor; }
.nav-toggle .bar::before{ top:-6px; }
.nav-toggle .bar::after{ top:6px; }
.nav-plain-link:hover,
.nav-plain-link:focus,
.nav-plain-link:focus-visible,
.nav-plain-link:active{
  color: var(--primary);
  text-decoration: underline;
}

/* Active page style: yellow, underlined, thicker and offset for visibility */
.nav-plain-link.active{
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--primary);
}

/* Keep the 'Servizi' link from ever turning yellow on the root page
   It should use the same base nav color instead of the primary color. */
.nav-plain-link.no-highlight,
.nav-plain-link.no-highlight:focus,
.nav-plain-link.no-highlight:focus-visible,
.nav-plain-link.no-highlight:hover,
.nav-plain-link.no-highlight:active,
.nav-plain-link.no-highlight.active{
  color: var(--alt-text) !important;
  text-decoration: none !important;
  text-decoration-color: transparent !important;
}

/* Center the links inside the container */
.navbar .container {
  justify-content: center !important; /* override inline justify-content */
}
.nav-plain-links {
  position: static;
  justify-content: center; /* center the links inside the container */
  gap: 1rem; /* adjust spacing between links if desired */
}

/* Mobile navbar: hide links, show hamburger, slide-down menu */
@media (max-width: 768px){
  .navbar{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .navbar .container{
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }
  .nav-toggle{ display: inline-flex; position: absolute; right: 1rem; top: 0.5rem; }
  .navbar.nav-open .nav-toggle{ display: none; }
  .nav-plain-links{
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    max-height: 0;
    overflow: clip;
    transition: max-height 200ms ease, overflow 200ms ease, opacity 200ms ease;
    opacity: 0;
    padding-right: 1rem;
  }
  .navbar.nav-open .nav-plain-links{
    overflow: visible;
    max-height: none;
    opacity: 1;
  }
}

/* Fullscreen cover image below header */
.hero-cover{
  min-height: 100vh;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.25)),
    url('./media/Foto sito/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative; /* enable absolutely positioned children (logo) */
}

/* Scroll indicator shown on the hero to suggest scrolling */
.scroll-indicator{
  position: absolute;
  left: 50%;
  bottom: calc(2.25rem + 40px);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  color: #fff;
  text-decoration: none;
  font-size: .85rem;
  opacity: 0.95;
  z-index: 55; /* above logo but below navbar (60) */
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.scroll-indicator svg{ width: 26px; height: 26px; display:block; fill: currentColor; }
.scroll-indicator .label{ font-size: .8rem; letter-spacing: .02em; }

@keyframes si-bounce {
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
  100%{ transform: translateY(0); }
}
.scroll-indicator svg{ animation: si-bounce 1.6s infinite ease-in-out; }

@media (max-width: 576px){
  .scroll-indicator{ bottom: calc(1.5rem + 24px); }
}

/* Hero (Chi siamo) now a normal white section below the cover */
.hero{
  --hero-space: 72px;
  padding-top: var(--hero-space);
  padding-bottom: var(--hero-space);
  background: var(--bg);
  text-align: center;
  transition: padding 320ms ease, background-color 320ms ease;
  position: relative;
  min-height: auto;
  display: block;
  scroll-margin-top: calc(var(--topbar-height) + var(--navbar-height) + 16px);
}

/* Make the hero H1 match the H3 size (La nostra missione) */
.hero h1{ font-size: 1.75rem; }

.hero.hero--compact{
  --hero-space: 56px;
}

/* remove large bottom offset since hero is no longer full-screen */
.hero{
  padding-bottom: var(--hero-space);
}

/* anchor offset so navbar doesn't cover the services heading */
#services{
  scroll-margin-top: calc(var(--topbar-height) + var(--navbar-height) + 16px);
}

/* Buttons */
.btn-outline-primary{
  color: #333333;
  border: 2px solid #333333;
  background: transparent;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: all 220ms ease;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background: #333333;
  color: white;
  border-color: #333333;
  box-shadow: 0 6px 18px rgba(51, 51, 51, 0.3);
}

/* make the 'Scopri i nostri servizi' button yellow */
#scroll-to-services.btn-outline-primary {
  background: var(--primary);
  color: #212529;
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(249,183,7,0.14);
}
#scroll-to-services.btn-outline-primary:hover,
#scroll-to-services.btn-outline-primary:focus{
  background: #e0a400; /* slightly darker yellow on hover */
  color: #212529;
  border-color: #e0a400;
  box-shadow: 0 10px 26px rgba(224,164,0,0.18);
}

/* Services (moved from inline <style>) */
.services h2{
  font-weight: 500;
}
.services .card{
  cursor:pointer;
  border:1px solid rgba(0,0,0,0.04);
  border-radius:var(--radius);
  padding:1.25rem;
  transition:transform .18s ease, box-shadow .18s ease;
  background:#fff;
  box-shadow:var(--card-shadow);
  height:100%;
  display:flex;
  flex-direction:column;
}
.services .card:hover,
.services .card:focus-within{
  transform:translateY(-6px);
  box-shadow: 0 10px 24px rgba(15,20,25,0.14), 0 18px 42px rgba(15,20,25,0.12);
}

/* Footer (moved from inline <style>) */
.footer{
  background:var(--footer-bg);
  color:#fff;
  padding:24px 0;
  text-align:center;
  font-size:14px;
}
.footer a{color:#f8f9fa;text-decoration:underline}

/* Responsive map container */
.map-responsive{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  border-radius:8px;
}
.map-responsive iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

/* Small tweaks */
.container{max-width:1140px;margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px}

/* Accessibility focus outlines */
a:focus-visible, button:focus-visible, .card:focus-within{
  outline:3px solid rgba(13,110,253,0.15);
  outline-offset:3px;
}

/* Responsive typography */
@media (max-width:768px){
  .hero{padding:48px 18px}
  .hero h1{font-size:1.75rem}
  .hero p{font-size:1rem}
}

/* Print */
@media print{
  .hero, .map-responsive, .navbar, .top-bar, .footer{display:none}
  body{background:#fff;color:#000}
}

/* Utility: fixed readable line length */
.measure {
  /* 65ch is a good default for readable lines; change to 700px if you want a pixel value */
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
  /* keep text centered within its column but left-aligned inside the block */
  text-align: left;
  display: block;
}

/* optional: ensure hero paragraphs still center visually on small screens */
@media (max-width: 576px){
  .measure { max-width: 90%; }
}

/* make mission title smaller and match body font */
.hero .small-hero-title{
  font-size: 1rem;        /* smaller, adjust if needed */
  font-weight: 400;       /* same weight as body text */
  font-family: inherit;   /* use same font as rest of site */
  margin-top: 0;
  margin-bottom: .75rem;
}

/* align hero columns to top so paragraphs line up */
.hero .row{
  align-items: flex-start;
}

/* spacing for hero paragraphs to ensure consistent vertical rhythm */
.hero .measure{
  margin-bottom: 1.25rem; /* increases spacing between paragraphs */
}

/* ensure the right-aligned H1 behaves responsively:
   on small screens it will be centered naturally (Bootstrap utilities can override if needed) */
@media (max-width: 767.98px){
  .hero .text-md-end { text-align: center !important; }
}

/* compact state applied by JS when page is scrolled */
.hero.hero--compact{
  --hero-space: var(--hero-space-compact);
}

/* ensure button sits visually near bottom of hero area */
.hero .btn{
  transition: transform 220ms ease, opacity 220ms ease;
}
.hero.hero--compact .btn{
  transform: translateY(0);
}

/* smaller screens tweak */
@media (max-width:768px){
  .hero{ padding-top: calc(var(--hero-space) / 2); padding-bottom: calc(var(--hero-space) / 2); }
  .hero h1{ font-size:1.75rem; }
}

/* Tile reveal for service cards: slide in from off-screen over ~400ms */
.tile-reveal{
  opacity: 0;
  transform: translateY(160px);
  transition: opacity 420ms cubic-bezier(.16,.84,.3,1), transform 420ms cubic-bezier(.16,.84,.3,1);
  will-change: transform, opacity;
}
.tile-reveal.from-right{ transform: translateY(160px); }
.tile-reveal.in-view{ opacity: 1; transform: translateY(0); }

/* Hero/inline reveals (titles, paragraphs) use the same off-screen slide behavior */
.reveal{
  opacity: 0;
  transform: translateY(160px);
  transition: opacity 420ms cubic-bezier(.16,.84,.3,1), transform 420ms cubic-bezier(.16,.84,.3,1);
  will-change: transform, opacity;
}
.reveal.from-right{ transform: translateY(160px); }
.reveal.in-view{ opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .tile-reveal, .reveal{ transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* Fotovoltaico expandable card */
.expandable-card{
  cursor: pointer;
  overflow: wrap;
  /* ensure card fits compact layout */
  --fv-img-w: 160px;
  --fv-img-h: 100px;
  padding: .75rem;
}
.expandable-card:focus{ box-shadow: 0 8px 24px rgba(13,110,253,0.12); outline:none; }

/* image sizing + smooth resize */
.fotovoltaico-img{
  width: var(--fv-img-w);
  height: var(--fv-img-h);
  object-fit:cover;
  border-radius:8px;
  transition: width 280ms ease, height 280ms ease, transform 280ms ease;
  flex-shrink:0;
}

/* content area: title always visible; text hidden by default */
.fotovoltaico-content{ flex:1; min-width:0; }
.fotovoltaico-content h5{ margin:0 0 .5rem 0; }
.fotovoltaico-text{
  max-height: 0;
  overflow: wrap;
  opacity: 0;
  transition: max-height 360ms ease, opacity 260ms ease, margin 260ms ease;
  margin: 0;
}

/* expanded state: show text and enlarge image */
.expandable-card.expanded{
  /* increase internal padding so it visually matches expanded card */
  padding: 1.25rem;
}
.expandable-card.expanded .fotovoltaico-img{
  --fv-img-w: 220px;
  --fv-img-h: 140px;
  transform: none;
}
.expandable-card.expanded .fotovoltaico-text{
  max-height: 480px; /* large enough for the paragraph */
  opacity: 1;
  margin-top: .25rem;
}

/* prevent card hover lift while collapsed for stable click UX */
.expandable-card:not(.expanded):hover{ transform:none; box-shadow: var(--card-shadow); }

/* ensure transitions look good on small screens */
@media (max-width:768px){
  .fotovoltaico-img{ width:140px; height:90px; }
  .expandable-card.expanded .fotovoltaico-img{ width:180px; height:120px; }
}

/* Service-card layout: title on top, image below; static (no expand) */
.service-card{
  cursor: default;
  transition: box-shadow 220ms ease, transform 220ms ease;
  padding: 0; /* reset padding to control spacing precisely */
  display: flex;
  flex-direction: column;
}
.service-card:hover,
.service-card:focus-within{
  box-shadow: 0 8px 20px rgba(15,20,25,0.14), 0 14px 32px rgba(15,20,25,0.12);
  transform: translateY(-4px);
}
.service-card .service-title{
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  padding: 1.1rem 0.75rem 0 0.75rem;
  text-align: center;
  line-height: 1.2;
  min-height: 3.6rem; /* reserve space so images align even if title wraps */
}

/* image: always visible, no expansion */
.service-figure{
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  margin: 0;
  padding-bottom: 5px; /* 5px padding below image */
}

/* hide description text entirely */
.service-card .service-body{
  display: none;
}

/* Service Modal Overlay */
.service-modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
  z-index: 1000;
}

.service-modal.active{
  opacity: 1;
  visibility: visible;
}

.service-modal-content{
  position: relative;
  background: white;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 300ms ease;
  padding: 2rem;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.service-modal-close{
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #666;
  transition: color 200ms ease;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-modal-close:hover,
.service-modal-close:focus{
  color: #000;
  outline: none;
}

.service-modal-header{
  margin-bottom: 1.5rem;
}

.service-modal-header h3{
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
}

.service-modal-image{
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  display: block;
}

.service-modal-text{
  margin-bottom: 2rem;
  line-height: 1.6;
  color: #444;
}

.service-modal-text p{
  margin: 0;
  font-size: 1rem;
}

.service-modal-contact{
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 220ms ease, box-shadow 220ms ease;
}

.service-modal-contact:hover,
.service-modal-contact:focus{
  background: #0b5ed7;
  box-shadow: 0 6px 18px rgba(13, 110, 253, 0.3);
  outline: none;
}

/* top-right overlay logo */
.site-logo{
  position: absolute; /* positioned relative to .hero-cover */
  left: 1rem;
  top: 1rem;
  width: clamp(180px, 22vw, 280px); /* shrink with viewport but keep presence */
  height: auto;
  z-index: 70; /* above navbar so it never gets overlapped */
  pointer-events: none;
  display: block;
}

/* responsive logo size on small/medium screens */
@media (max-width: 768px){
  .site-logo{
    width: clamp(160px, 32vw, 220px);
    left: 0.75rem;
    top: 0.75rem;
  }
}

/* Carousel controls visibility: add drop-shadows to prev/next icons */
.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45)) drop-shadow(0 8px 18px rgba(0,0,0,0.25));
  width: 2.5rem;
  height: 2.5rem;
}

/* Optional: make the hit area slightly more opaque on hover/focus for clarity */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-prev:focus .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon,
.carousel-control-next:focus .carousel-control-next-icon{
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55)) drop-shadow(0 10px 22px rgba(0,0,0,0.3));
}

/* Reveal-on-scroll animations for hero section */
.reveal{
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 520ms cubic-bezier(.2,.9,.2,1), transform 520ms cubic-bezier(.2,.9,.2,1);
  will-change: transform, opacity;
}

/* Logos section */
.logos-section {
  background: var(--bg);
  padding: 40px 20px;
}

.logo-img {
  max-width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
}

.logo-reveal {
  opacity: 0;
  transition: opacity 600ms ease-out;
}

.logo-reveal.in-view {
  opacity: 1;
}

.hero h1,
.hero h3,
.hero p{
  /* Ensure hero text is hidden by default (prevent flash before JS runs) */
  opacity: 0;
  transform: translateX(-24px);
}
.reveal.from-right{ transform: translateX(24px); }
.reveal.in-view{
  opacity: 1;
  transform: translateX(0);
}

/* small tweaks for mobile so movement is less pronounced */
@media (max-width: 576px){
  .reveal{ transform: translateY(12px) !important; }
  .reveal.from-right{ transform: translateY(12px) !important; }
  .reveal.in-view{ transform: translateY(0) !important; }
}

/* Mobile font scaling: keep paragraph text at 16px, scale titles accordingly */
@media (max-width: 768px) {
  html {
    font-size: 16px; /* keep base at 16px for paragraphs */
  }

  .hero h1 { font-size: 1.5rem; } /* 24px */
  .hero h3 { font-size: 1.125rem; } /* 18px */
  .hero p { font-size: 1rem; } /* 16px */
  
  .services h2 { font-size: 1.75rem; } /* 28px */
  .service-card .service-title { font-size: 1.25rem; } /* 20px */
}

@media (max-width: 576px) {
  html {
    font-size: 16px;
  }

  .hero h1 { font-size: 1.375rem; } /* 22px */
  .hero h3 { font-size: 1rem; } /* 16px */
  .hero p { font-size: 0.9375rem; } /* 15px */
  
  .services h2 { font-size: 1.5rem; } /* 24px */
  .service-card .service-title { font-size: 1.125rem; } /* 18px */
}