/* styles.css */
:root{
  --text:#111111;
  --border:#e5e7eb;
  --primary:#111111;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Rubik",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  color:var(--text);
  background:#ffffff;
  position:relative;
  min-height:100svh;
}

.hero{
  position:absolute;
  top:15vh; /* start exactly 15vh from top */
  left:0;
  right:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:24px;
}

.logo{
  display:block;
  margin:0 auto 24px auto;
  height:auto;
  max-width:140px;
}

h1{
  margin:0 0 8px 0;
  font-weight:700;
  font-size:clamp(22px, 2.8vw, 28px);
  letter-spacing:0.2px;
}

/* 404 page spacing: separate title by 40px */
.page-404 h1{ margin-bottom:40px; }

.subtitle{
  margin:0;
  font-size:clamp(14px, 2vw, 16px);
  font-weight:400;
  opacity:.7;
}

/* Language switcher */
.lang-switcher{
  position:fixed;
  right:16px;
  top:16px;
  z-index:10;
}
.lang-switcher select{
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:6px;
  background:#fff;
}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Footer fixed 16px from bottom */
.footer{
  position:fixed;
  left:0;
  right:0;
  bottom:16px;
  width:100%;
  pointer-events:none;
}

.footer-links{
  list-style:none;
  margin:0 auto;
  padding:0 24px;
  max-width:1024px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
}

.footer a{
  pointer-events:auto;
  text-decoration:none;
  color:inherit;
  font-size:16px;
  opacity:.7;
}

.footer a:hover,
.footer a:focus{
  opacity:1;
  text-decoration:underline;
}

.footer-links li:nth-child(1){justify-self:start}
.footer-links li:nth-child(2){justify-self:center}
.footer-links li:nth-child(3){justify-self:end}

/* Contact form styles */
.form-wrap{
  width:100%;
  max-width:640px;
  margin:12px auto 0 auto;
  text-align:left;
}
.form{
  display:grid;
  gap:12px;
}
.label{font-weight:500}
.input, .select, .textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  font-family:inherit;
  font-size:16px;
}
.textarea{min-height:120px; resize:vertical}
.checkbox-line{display:flex; align-items:center; gap:8px}
.actions{display:flex; gap:12px; margin-top:8px}
.button{
  padding:10px 14px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-weight:500;
}
.button.primary{background:var(--primary); color:#fff; border-color:var(--primary)}
.button.secondary{background:#fff}

/* Contact page: footer should not be fixed and content should flow */
.page-contact .footer{
  position: static;
  bottom: auto;
}
.page-contact .hero{
  position: static;
  top: auto;
  margin-top: 20px; /* reduce top space per request */
  padding-bottom: 40px; /* breathing room above footer */
}

@media (max-width: 520px){
  .footer-links{
    grid-template-columns: 1fr;
    justify-items:center;
    row-gap:10px;
  }
  .footer-links li:nth-child(1),
  .footer-links li:nth-child(2),
  .footer-links li:nth-child(3){
    justify-self:center;
  }
}

/* Legal pages: footer should not be fixed and content should flow */
.page-legal .footer{
  position: static;
  bottom: auto;
}
.page-legal .hero{
  position: static;
  top: auto;
  margin-top: 20px;
  padding-bottom: 40px;
}