/* style.css — Minimalist, semantic, and responsive styles for Atelier ASTvinci */
:root{
  --bg: #ffffff;
  --fg: #000000;
  --max-width: 66rem;
  --measure: 60ch;
  --accent-weight: 700;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.serif{font-family: 'Merriweather', Georgia, serif; font-weight:300}

/* Layout container */
main{max-width:var(--max-width);margin:2.5rem auto;padding:0 1rem}
header{border-bottom:1px solid rgba(0,0,0,0.06)}
nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;margin:0 auto;max-width:var(--max-width)}
.brand{font-weight:700;text-decoration:none;color:var(--fg);font-family:'Merriweather', serif}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.nav-list a{text-decoration:none;color:inherit;font-weight:600}

/* Hero */
#hero{padding:4rem 0 2rem;
/* Set the image path */
  background-image: url('./public/logo.png');
  
  /* Align to the right and vertically center (or top) */
  background-position: right center;
  
  /* Ensure the image covers the full height */
  background-size: auto 100%;
  
  /* Prevent the image from repeating */
  background-repeat: no-repeat;
  
  /* Optional: Ensure the container has height */
  min-height: 300px;}
#hero h1{font-size:clamp(1.6rem,4vw,3rem);margin:0 0 .5rem;line-height:1.05; text-shadow: 1px 1px white;}
.lead{max-width:var(--measure);font-size:1.05rem;margin:0 0 1.25rem}
.actions .button{display:inline-block}

/* Buttons (subtle) */
.button{
  display:inline-block;padding:.6rem 1rem;border:1px solid currentColor;border-radius:4px;text-decoration:none;color:inherit;font-weight:600;background:transparent
}
.button:focus{outline:2px solid rgba(0,0,0,0.12);outline-offset:2px}

/* Sections */
section{padding:2rem 0;border-top:1px solid rgba(0,0,0,0.04)}
h2{font-family:'Merriweather', serif;font-weight:700;margin:0 0 .75rem}

/* Team */
.team-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1rem}
article{padding:1rem;border:1px solid rgba(0,0,0,0.04);border-radius:6px}
.role{font-weight:600;margin:.25rem 0 .5rem}
.profile-pic {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}

/* Partner logos */
.partner-logos{display:flex;align-items:center;gap:2rem;overflow-x:auto;padding:1rem 0;&::-webkit-scrollbar {display: none;}
  /* Hide scrollbar for IE, Edge, and Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;    /* Firefox */}
.partner-logos img{height:6rem;}

/* Contact form */
aside{padding:2rem 0}
form{display:grid;gap:.5rem;width:100%;max-width:30rem}
label{font-size:.95rem}
input[type="text"],input[type="email"],textarea{padding:.5rem;border:1px solid rgba(0,0,0,0.08);border-radius:4px}
.checkbox{display:flex;align-items:center;gap:.5rem}
button[type="submit"]{margin-top:.5rem}

/* Footer */
footer{padding:2rem 1rem;border-top:1px solid rgba(0,0,0,0.06);text-align:center;font-size:.9rem}

/* Accessibility helpers */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

#bootcamps article {
  display: flex;
  flex-direction: column;
}

/* Responsive tweaks */
@media (max-width:600px){
  nav{padding:.75rem}
  #hero{padding:2rem 0; background: none;}
  #bootcamps article{display: flex;flex-direction:column;align-items:center;text-align:center}
}

.scroll-wrapper {
  animation: scroll 15s linear infinite;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* Adjust this value based on your content width */
    transform: translateX(-50%); 
  }
}