:root{--navy:#b0cbf7;--text:#000000;--bg:#ffffff;--accent:#1FB6B6}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;min-height:100vh;display:flex;flex-direction:column}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:none;margin:0 auto;padding:0 20vw} /* 20% each side */
@media (max-width: 1024px){ .container{padding:0 1rem} }
.site-header{position:sticky;top:0;z-index:1000;background:var(--navy);color:var(--text);border-bottom:1px solid rgba(0,0,0,.1)}
.site-header .container{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;padding-top:.75rem;padding-bottom:.75rem;padding-left:20vw;padding-right:20vw}
.brand{color:var(--text);text-decoration:none;font-weight:700;font-size:1.2rem;display:flex;align-items:center;gap:.5rem}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.site-nav a{color:var(--text);text-decoration:none;opacity:.9}
.site-nav a:hover{opacity:1}
.lang-switch{margin-left:auto;display:flex;gap:.5rem}
.lang-btn{background:#fff;color:#000;border:1px solid rgba(0,0,0,.15);border-radius:.5rem;padding:.35rem .6rem;font-weight:700;cursor:pointer}
.lang-btn[aria-pressed="true"]{outline:2px solid var(--accent)}
.site-main{padding:2rem 0;flex:1 0 auto}
.hero{display:grid;grid-template-columns:1fr;gap:1rem;padding:2rem;background:#f0f5ff}
.hero .cta{display:flex;gap:1rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:.6rem;border:2px solid #000;text-decoration:none;font-weight:700;color:#000}
.btn.primary{background:var(--navy);color:#000;border-color:#000}
.btn:hover{filter:brightness(1.05)}
.section{padding:2rem 0;border-top:1px solid #e5e7eb}
.section .grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
img.full{width:100%;height:auto;border-radius:.5rem}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;align-items:start}
.site-footer{background:var(--navy);color:var(--text);margin-top:auto;padding-top:10px}
.site-footer a{color:var(--text);text-decoration:none}
.site-footer .legal{opacity:.7;text-align:center;padding:.5rem}
/* CTA grid */
.cta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}
.cta-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;border:1px solid #e5e7eb;border-radius:.75rem;text-decoration:none;color:inherit;background:#fff}
.cta-card img{border-radius:.75rem}
.cta-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-1px)}
/* Forms */
form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
form label{display:block;font-weight:600;margin:.5rem 0 .25rem}
input,select,textarea{width:100%;padding:.6rem;border:1px solid #CBD5E1;border-radius:.5rem;font:inherit}
textarea{min-height:140px}
.help{font-size:.9rem;opacity:.75}
.notice{padding:.75rem 1rem;border-radius:.5rem;margin:.75rem 0}
.notice.success{background:#e8f8f6;border:1px solid #b7efe8}
.notice.error{background:#ffecec;border:1px solid #ffbebe}
/* Language visibility */
.lang-en{display:block}
.lang-fr{display:none}
html.show-fr .lang-en{display:none}
html.show-fr .lang-fr{display:block}

@media (max-width: 1024px){
  .site-header .container{padding-left:1rem;padding-right:1rem}
}
/* Mobile: put language toggle on its own line under the menu */
@media (max-width: 700px) {
  .site-header .container {
    flex-wrap: wrap;              /* allow items to wrap to a new line */
  }
  .site-header .lang-switch {
    flex: 0 0 100%;               /* take a full row */
    order: 3;                     /* appear after brand + nav */
    margin-left: 0;               /* override desktop auto alignment */
    padding-top: .25rem;
    display: flex;
    gap: .5rem;
    justify-content: flex-start;  /* align buttons to the left */
  }
  /* (optional) slightly tighten nav spacing on mobile */
  .site-header .site-nav ul {
    gap: .75rem;
    flex-wrap: wrap;
  }
}
/* Center the hero CTAs on the homepage */
.hero { text-align: center; }
.hero .cta { justify-content: center; }

/* Logo: keep mobile size, shrink on desktop */
.home-logo { max-width: 90%; height: auto; }

@media (min-width: 1024px) {
  .home-logo { max-width: 800px; } /* adjust to taste: 200–260px */
}

/* Footer column alignment */
.footer-grid > .left   { justify-self: start; }
.footer-grid > .center { justify-self: center; text-align: center; }
.footer-grid > .right  { justify-self: end;   text-align: right; }
/* Only make text-like inputs full width (not checkboxes/radios) */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
}

/* Nice inline checkbox + text */
label.checkbox {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;              /* keep body weight for the line */
  margin: .75rem 0 .25rem;
}
label.checkbox input[type="checkbox"] {
  width: auto;                   /* override any global width */
  margin: 0;
}

/* Make images responsive */
picture, img { max-width: 100%; height: auto; }

/* Hero logo caps */
.hero picture,
.hero img.brand-logo {
  display: block;
  margin-inline: auto;
  max-width: 680px;   /* desktop cap */
}
@media (max-width: 700px) {
  .hero picture,
  .hero img.brand-logo { max-width: 60vw; }
}

/* Route map caps */
#potential-routes picture,
#potential-routes img.route-map {
  display: block;
  margin: .5rem auto;
  max-width: 960px;   /* desktop cap */
}
@media (max-width: 700px) {
  #potential-routes picture,
  #potential-routes img.route-map { max-width: 92vw; }
}

/* Lightbox: keep inside the viewport (already mostly there) */
.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.85);
  padding: clamp(12px, 4vw, 24px);
  box-sizing: border-box;
  max-width: 100vw;
  max-height: 100vh;
  overflow: auto;
}
.lightbox:target { display: flex; }
.lightbox picture, .lightbox img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  height: auto; width: auto;
}

/* (Optional) belt-and-suspenders to kill any stray horizontal scroll */
html, body { overflow-x: hidden; }

/* policy example style */
.policy-example {
  background: #f8f9fa;
  padding: 1.5rem;
  border-left: 4px solid #007bff;
  margin: 2rem 0;
}

.policy-example h3 {
  color: #007bff;
  margin-bottom: 1rem;
}

.policy-example ul {
  line-height: 1.6;
}

/* hide site title */
.page-content .page-heading {
  display: none;
}