:root {
    --col-yt: #FF0000;
    --col-tw: #6441a5;
    --col-ig: #cc39a4;
    --col-ds: #8c9eff;
    --col-tt: #000000;
    --col-bg: #0d1117;
    --col-fg: #161b22;
    --col-blue: #247BA0;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

.mod-breadcrumbs a, span {
    color:white;
}

.breadcrumb-item+.breadcrumb-item::before {
    color:white;
}

body {
    background: var(--col-bg);
}

main {
    border: 2px solid gray;
    background-color: lightcyan;

}

/* Navbar */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  background: transparent;
  gap: 20px;
  z-index: 9999; /* ensure navbar stays on top of pagepiling sections */
  transition: background-color 0.35s ease, height 0.35s ease, box-shadow 0.35s ease;
}

nav.scrolled-down {
  background: var(--col-fg);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}


nav button {
  background: transparent;
  border: none;
  z-index: 5;
}

nav img {
width: 24px;
height: 24px;
transform-origin: 0% 50%;
transition: 0.3s;
}

nav.scrolled-down {
height: 60px;
background: var(--col-bg);
}

nav.scrolled-down #KochibiTalk{
scale: 1.50;
}

.burger {
  display: none;
  cursor: pointer;  
}

.filter-white {
	filter: invert(81%) sepia(100%) saturate(1%) hue-rotate(321deg) brightness(109%) contrast(101%);
}

.menu-items,
.menu {
  display: flex;
  gap: 20px;
}

.menu-right {
  position: relative;
  margin-left: auto;
  gap: 20px;
}

.menu-right img {
  width: 30px;
  height: 30px;
  padding: 5px;
}

body.open .menu-items {
  display: flex;
} 

#KochibiTalk {
  padding-top: 20px;
  height: 70px;
  width: 70px;
  background: transparent;
  border: none;
}

#KochibiTalk:hover {
  content: url("../img/icons/KochibiSad.svg");
  scale: 1.10;
}


@media (width <= 640px) {
  .menu-right img:nth-child(n + 3) {
    display: none;
  }

  .menu-items {
    display: none;
    width: 100vw;
    flex-direction: column;
    gap: 16px;
    position: absolute;
    top: 56px;
    left: 0;
    padding: 0 20px 20px;
    background: var(--col-fg);
  }

  .menu-left {
    flex-direction: column;
    gap: 12px;
  }

  .menu-left a {
    border-bottom: 1px solid #30363d;
    padding-bottom: 10px;
  }

  .menu-right {
    margin-left: 0;
  }

  .burger {
    display: block;
  }
}

/* PagePiling stacking fixes: keep sections under navbar */
.pp-section {
  position: relative;
  z-index: 1;
}
/* Ensure active section sits on top to avoid occlusion when transitioning */
.pp-section.active {
  z-index: 3;
}
/* Make content inside sections render above decorative pseudo-elements */
.section > * {
  position: relative;
  z-index: 2;
}

/* Make sure sections cover viewport and have sensible defaults */
.section {
  position: relative; /* create stacking context so pseudo elements are contained */
  z-index: 0; /* keep default stacking below navbar and plugin z-index values */
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  overflow: hidden; /* contain rotated pseudo-elements and prevent them from overlapping adjacent sections */
}

/* Provide explicit background for sections that had none */
#socialbutton-id,
#video-id,
#progetti-id {
  background: linear-gradient(180deg, rgba(22,27,34,1), rgba(13,17,23,1));
  color: #fff;
  padding-top: 60px;
  padding-bottom: 60px;
}

/* First section: full background image + centered content */
#hero {
  background-image: url("../img/images/Pr_infettati.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* darken the background using blend so text is readable */
  background-color: rgba(0,0,0,0.35);
  background-blend-mode: multiply;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 56px; /* keep below navbar */
  position: relative;
  color: #fff;
}
#hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* stronger gradient overlay for contrast */
  background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Remove generic sec-1 pseudo for the hero to prevent extra dark box */
#hero.sec-1::before { display: none !important; }

#hero > div {
  position: relative; /* keep content above overlay */
  z-index: 2;
  max-width: 900px;
  padding: 40px;
}

#hero h2, #hero h3 {
  color: #fff;
  text-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

/* Slightly reduce overlay on small screens */
@media (max-width: 575px) {
  #hero::before { background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.45) 100%); }
  #hero > div { padding: 20px; }
}

/* Ensure sections with .container inside pagepiling take full width */
.section.container {
  width: 100%;
  max-width: 100%;
  padding-left: 5vw;
  padding-right: 5vw;
  box-sizing: border-box;
}

/* Center social and video content horizontally */
#socialbutton-id .row, #video-id .row {
  justify-content: center;
}

/* Footer fixed to bottom (restored) */
.footer-dark-fixed {
  position: fixed;
  left: 0;
  bottom: 0 !important;
  top: auto !important;
  height: 2.5rem;
  z-index: 9998; /* under navbar */
}

/* Floating to-top button should be above sections and clickable */
#tothetopFloat {
  z-index: 10001;
}