:root{
  --bg:#ffffff;
  --fg:#111111;
  --accent:#0066ff;
  --muted:#f5f5f5;
  --radius:12px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
}
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:2rem 3vw;
  border-bottom:1px solid var(--muted);
  flex-wrap:wrap;
}
header h1{
  font-size:1.5rem;
  font-weight:700;
}
nav a{
  margin-left:1.5rem;
  text-decoration:none;
  color:var(--fg);
  font-weight:500;
  transition:color .2s;
}
nav a:hover,
nav a.active{
  color:var(--accent);
}
.hero{
  min-height:60vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:0 3vw;
}
.hero h2{
  font-size:clamp(2rem,5vw,3.5rem);
  max-width:800px;
}
.hero p{
  max-width:600px;
  margin:1rem 0 2rem;
  font-size:1.1rem;
}
button{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:.9rem 2rem;
  border-radius:var(--radius);
  font-size:1rem;
  cursor:pointer;
  transition:background .2s;
}
button:hover{
  background:#0053d9;
}
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3vw;
  padding:4rem 3vw;
  align-items:center;
}
.grid-2 img{
  width:100%;
  border-radius:var(--radius);
}
.text-page{
  max-width:800px;
  margin:4rem auto;
  padding:0 3vw;
}
.text-page h2{
  margin-bottom:1.5rem;
  font-size:2rem;
}
.text-page h3{
  margin-top:2rem;
  margin-bottom:.75rem;
}
.text-page img{
  width:100%;
  margin-top:2rem;
  border-radius:var(--radius);
}
.tech-list{
  list-style:none;
  margin-top:1rem;
}
.tech-list li{
  padding:.5rem 0;
  border-bottom:1px solid var(--muted);
}
.downloads{
  display:flex;
  gap:1rem;
  margin-top:1.5rem;
  flex-wrap:wrap;
}
.downloads a{
  background:var(--muted);
  padding:.6rem 1.2rem;
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--fg);
  font-weight:500;
  transition:background .2s;
}
.downloads a:hover{
  background:#e5e5e5;
}
footer{
  text-align:center;
  padding:3rem 3vw 2rem;
  font-size:.85rem;
  color:#777;
}

/* ----- TEAM ----- */
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:2rem;
  margin-top:2rem;
}
.card{
  background:var(--muted);
  border-radius:var(--radius);
  padding:1.5rem;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.card img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:var(--radius);
  margin-bottom:1rem;
}
.card h3{
  margin-bottom:.5rem;
}
.card p{
  font-size:.95rem;
  margin:.25rem 0;
}




@media(max-width:700px){
  header{flex-direction:column;align-items:flex-start;}
  nav a{margin:.5rem 1rem 0 0;}
  .grid-2{grid-template-columns:1fr;}
}


/* ----- DARK MODE ----- */
body.dark{
  --bg:#121212;
  --fg:#e0e0e0;
  --muted:#1e1e1e;
  --accent:#4d8eff;
}

/* white island that stays white in dark mode */
.ig-card{
  background:#fff;
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  color:#000;          /* black text inside the card */
}
/* make sure the button is always visible */
#themeToggle{
  position:fixed;
  top:1rem;
  right:1rem;
  z-index:999;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:50%;
  width:40px;
  height:40px;
  font-size:1.2rem;
  cursor:pointer;
  transition:background .2s;
}
#themeToggle:hover{
  background:#0053d9;
}

/* ---------- SETTINGS PAGE ---------- */
.settings .setting-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 0;
  border-bottom:1px solid var(--muted);
  max-width:400px;
  margin:auto;
}

/* ---- toggle switch ---- */
.switch{
  position:relative;
  display:inline-block;
  width:50px;
  height:28px;
}
.switch input{
  opacity:0;
  width:0;
  height:0;
}
.slider{
  position:absolute;
  cursor:pointer;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#ccc;
  transition:.3s;
  border-radius:28px;
}
.slider:before{
  position:absolute;
  content:"";
  height:20px;
  width:20px;
  left:4px;
  bottom:4px;
  background:white;
  transition:.3s;
  border-radius:50%;
}
input:checked + .slider{
  background:var(--accent);
}
input:checked + .slider:before{
  transform:translateX(22px);
}

body.dark{
  --bg:#121212;
  --fg:#e0e0e0;
  --muted:#1e1e1e;
  --accent:#4d8eff;
}

/* ---------- UPDATES PAGE ---------- */
.updates-page{
  max-width:800px;
  margin:4rem auto;
  padding:0 3vw;
}

.text-block{
  background:var(--muted);
  border-radius:var(--radius);
  padding:2rem;
  margin-bottom:3rem;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.text-block h2{
  margin-bottom:.75rem;
}
.text-block p{
  font-size:1.05rem;
}

.ig-feed{
  display:flex;
  flex-direction:column;
  gap:3rem;          /* ruimte tussen posts */
}
.ig-item{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  overflow:hidden;   /* ronde hoeken blijven mooi */
}

/* ---------- IG-TEXT + IG-POST  ---------- */
.ig-item{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:center;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  padding:2rem;
}
.ig-text h3{
  margin-bottom:.5rem;
}
.ig-text p{
  font-size:1rem;
  line-height:1.5;
}
.ig-post{
  width:100%;        /* zorg dat iframe netjes meeschaalt */
}

/* mobiel: onder elkaar */
@media(max-width:700px){
  .ig-item{
    grid-template-columns:1fr;
  }
}

/*more*/
/* 1  base timeline list */
.timeline{list-style:none;padding:0;max-width:700px}

/* 2  button look */
.stage{
  width:100%;
  text-align:left;
  background:var(--muted);
  border:none;
  border-radius:var(--radius);
  padding:1rem 1.25rem;
  font-size:1.05rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s;
}
.stage:hover{background:#e5e5e5}

/* 3  open / close */
.stage-detail{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  padding:0 1.25rem;
}
.stage-detail p{margin:1rem 0}
.stage.open + .stage-detail{
  max-height:300px;
  padding-bottom:1rem;
}


/*  pure black text on light background  */
body{
  color:#000;
}

/*  pure white text on dark background  */
body.dark{
  color:#fff;
}
/* white card that ignores dark mode */
/* white island that stays white in dark mode */
/* logo + title on same line */

/* white logo-link, no underline */
.logo-text{
  color:#fff;
  text-decoration:none;
  font-size:1.5rem;
  font-weight:700;
}

/* ---------- ROOT & RESET ---------- */
:root{
  --neutral-100:#ffffff;
  --neutral-200:#f5f7fa;
  --neutral-700:#1f2937;
  --neutral-900:#111827;
  --accent:#0066ff;
  --radius:12px;
  --font-body:'Inter',sans-serif;
  --font-head:'Space Grotesk',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);background:var(--neutral-100);color:var(--neutral-700);line-height:1.6}
.container{max-width:900px;margin:0 auto;padding:0 1.5rem}


/* ---------- HEADER ---------- */
header{display:flex;align-items:center;gap:1rem;padding:2rem 3vw;border-bottom:1px solid var(--neutral-200)}
.logo-text{font-family:var(--font-head);font-size:1.5rem;font-weight:700;color:var(--neutral-900);text-decoration:none}
nav a{margin-left:1.5rem;text-decoration:none;color:var(--neutral-700);font-weight:500;transition:color .2s}
nav a:hover,nav a.active{color:var(--accent)}

/* ---------- HERO ---------- */
.hero{padding:6rem 0 4rem;text-align:center;background:var(--neutral-200)}
.hero h1{font-family:var(--font-head);font-size:clamp(2.2rem,5vw,3.5rem);font-weight:700;margin-bottom:1rem}
.hero p{font-size:1.1rem;max-width:600px;margin:0 auto 2rem}
.btn-primary{display:inline-block;background:var(--accent);color:#fff;padding:.9rem 2rem;border-radius:var(--radius);text-decoration:none;font-weight:600;transition:background .2s}
.btn-primary:hover{background:#0053d9}

/* ---------- SECTIONS ---------- */
.section{padding:4rem 0}
.section h2{font-family:var(--font-head);font-size:2rem;margin-bottom:1rem}


/* ---------- FOOTER ---------- */
footer{text-align:center;padding:3rem 3vw 2rem;font-size:.85rem;color:#777}
footer small{color:var(--neutral-700)}

/* ---------- DARK-MODE RESTORE ---------- */
body.dark{
  --bg:#121212;
  --fg:#e0e0e0;
  --muted:#1e1e1e;
  --accent:#4d8eff;
}

/* ===== DARK-MODE RESTORE ===== */
/* 1.  force black text on light background  */
body{
  color:#000;
  background:var(--bg);
}

/* 2.  force white text on dark background   */
body.dark{
  color:#fff;
  background:#121212;
}

/* 3.  white cards stay white (IG embeds)   */
.ig-card{
  background:#fff;
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  color:#000;          /* black text inside card */
}

/* 4.  make sure the toggle still works     */
#themeToggle{
  position:fixed;
  top:1rem;
  right:4.5rem;
  z-index:1000;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:50%;
  width:40px;
  height:40px;
  font-size:1.2rem;
  cursor:pointer;
  transition:background .2s;
}
#themeToggle:hover{background:#0053d9}

/* ===== READABILITY & FONT UPGRADE ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--fg);
}

/* light mode → almost-black on white */
body{
  --fg:#111111;        /* softer than #000 */
  --bg:#ffffff;
}

/* dark mode → off-white on soft charcoal */
body.dark{
  --bg:#1a1a1a;        /* softer than #000 */
  --fg:#e5e5e5;        /* softer than #fff */
}

/* white cards stay white (Instagram, etc.) */
.ig-card{background:#fff;color:#111;border-radius:var(--radius);padding:1rem;box-shadow:0 2px 8px rgba(0,0,0,.08)}

/* ===== MAIN-PAGE CONTRAST & PROFESSIONAL TABS ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;700&display=swap');

/* 1.  base font → Inter (body) */
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--fg);
}

/* 2.  softer high-contrast colours */
body{--fg:#111111;--bg:#ffffff}
body.dark{--bg:#1a1a1a;--fg:#e5e5e5}

/* 3.  hero & cards → always readable */
.hero{background:var(--neutral-200);color:var(--neutral-900)}
.hero h1,.hero p{color:var(--neutral-900)}   /* never white-on-white */
.card{background:var(--neutral-100);color:var(--neutral-800)}

/* 4.  professional tab font */
nav a{font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:.02em}

/* ===== MAIN-PAGE CONTRAST & PROFESSIONAL TABS ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;700&display=swap');

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--fg);
}

body{--fg:#111111;--bg:#ffffff}
body.dark{--bg:#1a1a1a;--fg:#e5e5e5}

.hero{background:var(--neutral-200);color:var(--neutral-900)}
.hero h1,.hero p{color:var(--neutral-900)}
.card{background:var(--neutral-100);color:var(--neutral-800)}

/*  white tab text  */
nav a{
  font-family:'Space Grotesk',sans-serif;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--fg);        /* ← white in dark, black in light */
}

/* ===== TEAM CARD TEXT CONTRAST ===== */
.card{
  background:var(--neutral-100);
  color:var(--neutral-800);   /* soft black → readable on white card */
}
body.dark .card{
  background:#252525;         /* slightly lighter than page bg */
  color:#e5e5e5;              /* off-white → readable on dark card */
}

/* ===== LOGO CONTRAST ===== */
.logo-text{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.5rem;
  font-weight:700;
  text-decoration:none;
  color:var(--fg);        /* black in light, white in dark */
}

/* ===== FOOTER TEXT CONTRAST ===== */
footer small{
  color:var(--fg);        /* black in light, white in dark */
  font-size:.85rem;
}

/* ===== BOTTOM-RIGHT LANGUAGE SWITCHER ===== */
.lang-bar{
  position:fixed;
  bottom:1.5rem;          /* bottom edge */
  right:1.5rem;            /* right edge */
  z-index:1000;
  display:flex;
  gap:.25rem;
  background:rgba(255,255,255,.9);  /* semi-transparent white */
  backdrop-filter:blur(4px);
  padding:.3rem;
  border-radius:20px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.lang-bar button{
  border:none;
  background:transparent;
  padding:.4rem .6rem;
  font-size:.7rem;
  cursor:pointer;
  border-radius:16px;
  transition:background .2s,color .2s;
}
.lang-bar button.active,
.lang-bar button:hover{
  background:var(--accent);
  color:#fff;
}

/* ===== PLANNING BUTTON CONTRAST ===== */
.stage{
  width:100%;
  text-align:left;
  background:var(--muted);
  color:var(--fg);        /* black in light, white in dark */
  border:none;
  border-radius:var(--radius);
  padding:1rem 1.25rem;
  font-size:1.05rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s,color .2s;
}
.stage:hover{background:#e5e5e5}
body.dark .stage:hover{background:#2a2a2a}

/* ===== CLEAN LOGO BAR ===== */
.logo-link{
  display:flex;
  align-items:center;
  gap:.75rem;               /* space between logos + text */
  text-decoration:none;
}
.logo-img{
  height:40px;              /* uniform height */
  width:auto;               /* keep aspect */
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.logo-text{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.5rem;
  font-weight:700;
  color:var(--fg);          /* follows dark/light mode */
}

/* ===== INDEX EXPANSION ===== */
.section{padding:4rem 0}
.container{max-width:900px;margin:0 auto;padding:0 1.5rem}
.neutral-bg{background:var(--neutral-200)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:3vw;align-items:center}
.rounded{border-radius:var(--radius);box-shadow:0 4px 16px rgba(0,0,0,.1)}

.tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}
.tech-card{background:var(--neutral-100);border-radius:var(--radius);padding:2rem;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.tech-card h3{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;margin-bottom:.5rem}
.tech-card p{font-size:.9rem;color:var(--neutral-600)}

.cta-band{background:var(--accent);color:#fff;text-align:center}
.cta-inner{max-width:600px;margin:0 auto}
.cta-band h2{font-family:'Space Grotesk',sans-serif;font-size:2rem;margin-bottom:1rem}
.cta-band p{margin-bottom:2rem;font-size:1.1rem}
.cta-band .btn-primary{background:#fff;color:var(--accent)}
.cta-band .btn-primary:hover{background:#f5f7fa}
/* ===== TECH-CARD CONTRAST ===== */
.tech-card{
  background:var(--neutral-100);
  color:var(--neutral-800);   /* black in light, off-white in dark */
  border-radius:var(--radius);
  padding:2rem;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
body.dark .tech-card{
  background:#252525;         /* slightly lighter than page bg */
  color:#e5e5e5;
}
/* ===== TECH HEADING LIGHTER ===== */
/* ===== TECH HEADING = PURE BLACK ===== */
.techsnap-title,
.section h2{
  color:#e0e0e0;                     /* pure black, always */
  font-family:'Space Grotesk',sans-serif;
}
/* ===== CTA HEADING = WHITE ===== */
.cta-band h2{
  color:#fff;                         /* force white */
  font-family:'Space Grotesk',sans-serif;
}

/* ===== TECH FOLD-OUT COMPARTMENTS ===== */
.tech-acc {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.tech-fold {
  background: var(--muted);
  border-radius: var(--radius);
  overflow: hidden;
}

.tech-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  list-style: none; /* removes default arrow */
}

.tech-label::-webkit-details-marker {
  display: none; /* hides default arrow on Chrome */
}

.tech-label .chev {
  transition: transform 0.25s ease;
}

.tech-fold[open] .tech-label .chev {
  transform: rotate(90deg);
}

.tech-inner {
  padding: 0 1.25rem 1.5rem;
}

.tech-inner img {
  width: 100%;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.tech-inner ul {
  margin: 0;
  padding-left: 1.2rem;
}

.tech-inner li {
  margin: 0.4rem 0;
}

/* ----- Modern Instagram card ----- */
.ig-card-link{
  display:inline-flex;
  align-items:center;        /* vertical centre */
  gap:.75rem;
  background:#fff;
  color:#000;
  padding:.9rem 1.6rem;
  border-radius:var(--radius);
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  text-decoration:none;
  font-weight:600;
  font-size:1.05rem;
  transition:transform .25s, box-shadow .25s;
}
.ig-card-link:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.ig-card-link img{
  height:32px;
  width:auto;
  display:block;         /* removes baseline gap */
  margin:0;              /* reset any UA margin */
}
/* ===== MODERN MISSION CARDS ===== */
.mission-page{max-width:900px;margin:4rem auto;padding:0 1.5rem}
.mission-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;
  margin:2.5rem 0;
}

.mission-card{
  background:var(--neutral-100);
  border-radius:var(--radius);
  padding:2rem;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  text-align:center;
}
body.dark .mission-card{background:#252525;color:#e5e5e5}

.mission-icon{
  font-size:2.5rem;
  margin-bottom:.75rem;
}
.mission-card h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.25rem;
  margin-bottom:.5rem;
}
.mission-card p{
  font-size:1rem;
  line-height:1.55;
}

.mission-figure{
  margin:3rem 0 0;
  text-align:center;
}
.mission-figure img{
  width:100%;
  max-width:650px;
  border-radius:var(--radius);
}

/* =====  YOUTUBE INTRO  ===== */
.youtube-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(2rem,4vw,2.75rem);
  margin-bottom:1rem;
  color:#000;          /* always black */
}
body.dark .youtube-title{color:#000000;} /* white in dark mode */

.youtube-desc{
  font-size:1.05rem;
  margin-bottom:1.5rem;
  line-height:1.6;
}

.youtube-wrapper{
  position:relative;
  padding-bottom:56.25%; /* 16:9 */
  height:0;
  overflow:hidden;
  border-radius:var(--radius);
  box-shadow:0 4px 16px rgba(0,0,0,.1);
}
.youtube-wrapper iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

/* mobile: stack instead of side-by-side */
@media(max-width:700px){
  .grid-2{grid-template-columns:1fr;}
}

/* force black text on light bg, white on dark bg */
.youtube-title,
.youtube-desc{ color:#000; }
body.dark .youtube-title,
body.dark .youtube-desc{ color:#000; }


/*  “Onze Doelen” pure black  */
[data-i18n="techsnap.title"]{
  color:#000 !important;
}
/*  “Wat is CanSat?” pure black  */
.youtube-title{
  color:#000 !important;
}
/* =====  CONTACT CARD  ===== */
.contact-card{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  background:#fff;
  color:#000;
  padding:.9rem 1.6rem;
  border-radius:var(--radius);
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  text-decoration:none;
  font-weight:600;
  margin-top:.5rem;
  transition:transform .25s, box-shadow .25s;
}
body.dark .contact-card{background:#252525;color:#e5e5e5}

.contact-card:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.contact-icon{font-size:1.4rem;}
.contact-mail{color:inherit;}

.card img {
  max-width: 250px;       /* Set a maximum width */
  max-height: 250px;       /* Set a maximum height */
  width: auto;           /* Maintain aspect ratio */
  height: auto;
  object-fit: cover;      /* Cover the container while maintaining aspect ratio */
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

html {
  scroll-behavior: smooth;
}
/* ==========  ENKEL MOBIEL  ========== */
#mobMenuBtn{
  display:none;                     /* desktop: niets */
  position:absolute;
  top:1.5rem; right:3vw;           /* rechts boven */
  flex-direction:column;
  gap:4px;
  background:none; border:none;
  cursor:pointer; padding:.4rem;
}
#mobMenuBtn span{
  width:24px; height:3px;
  background:var(--fg);
  transition:.3s;
}
body.dark #mobMenuBtn span{background:var(--fg);}

@media (max-width:700px){
  header{position:relative}         /* nodig voor absolute knop */
  #mobMenuBtn{display:flex}         /* toon knop */

  nav{                                /* het menu zelf */
    width:100%;
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    margin-top:.75rem;
  }
 
  nav a{margin:0; padding:.6rem 0; font-size:1.05rem}
}

/* desktop: no focus ring on hamburger (because button is hidden anyway) */
@media (min-width:701px){
  #mobMenuBtn:focus{outline:none}
}

/* mobile: keep default ring, but make sure the 3 dashes are visible */
@media (max-width:700px){
  #mobMenuBtn{display:flex}          /* already set, but explicit */
  #mobMenuBtn span{display:block}    /* the 3 lines */
}

/* LAST RULE – overrides everything before it */
@media (min-width:701px){
  #mobMenuBtn{display:none !important;}
}

/* ---------- HAMBURGER LINES (mobile only) ---------- */
#mobMenuLines{
  display:none;               /* desktop */
  cursor:pointer;
  padding:.4rem;
}
#mobMenuLines>span{
  display:block;
  width:24px;
  height:3px;
  background:var(--fg);
  margin:4px 0;
  transition:.3s;
}
body.dark #mobMenuLines>span{background:var(--fg);}

@media (max-width:700px){
  header{position:relative}
   header{overflow:visible}           /* anchor for absolute lines */
  #mobMenuLines{
    display:flex;                    /* show 3 lines */
    flex-direction:column;
    
    position:absolute;
    top:1.5rem;
    right:3vw;
  }

  nav{                                /* the menu itself */
    width:100%;
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    margin-top:.75rem;
  }
  nav.open{max-height:none}         /* slide open */
  nav a{margin:0;padding:.6rem 0;font-size:1.05rem}
}

/* desktop: always show menu, no lines */
@media (min-width:701px){
  #mobMenuLines{display:none}
 
}
/* give the three spans a colour in light mode */
#mobMenuLines > span { background: currentColor; }

#settingsBtn{
  margin-left:auto;          /* push to the right of the logo row */
  background:none;
  border:none;
  font-size:1.4rem;
  cursor:pointer;
  padding:.2rem .4rem;
}

/* ===== SETTINGS GEAR BUTTON ===== */
#settingsBtn {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  text-decoration: none;      /* ← removes blue underline */
  color: inherit;             /* ← inherits body text color */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

#settingsBtn:hover {
  transform: rotate(30deg);
}

/* ===== MOBILE: slightly bigger tap target ===== */
@media (max-width: 700px) {
  #settingsBtn {
    font-size: 1.6rem;
    padding: 0.4rem 0.6rem;
  }
}

/* ===== CLEAN MOBILE HEADER ===== */
@media (max-width: 700px) {
  header{
    position:relative;
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    padding:1rem 3vw;
  }

  /* 1. gear – far left */
  #settingsBtn{
    order:-1;
    margin-right:auto;   /* pushes everything else to the right */
    font-size:1.6rem;
    padding:.4rem;
  }

  /* 2. logos – centre */
  .logo-link{
    margin:0 auto;       /* centres the brand */
  }

  /* 3. hamburger – far right */
  #mobMenuLines{
    margin-left:auto;
    font-size:1.6rem;
    padding:.4rem;
    cursor:pointer;
  }

  /* nav below icons */
  nav{
    width:100%;
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    margin-top:.75rem;
  }
  nav.open{max-height:50vh}
  nav a{margin:0;padding:.6rem 0;font-size:1.05rem}
}