/* =========================================================
   Moost localization — header, switcher, overflow guards
   ========================================================= */

/* ---- Header: 2-column grid (logo left, controls right) ---- */
.header-area-8__inner{
  display:grid !important;
  grid-template-columns:auto 1fr !important;
  align-items:center !important;
  gap:24px;
  padding:26px 0;
  overflow:visible;
}
.header-area-8__inner > .header__logo{
  grid-column:1;
  text-align:left;
}
.header-area-8__inner > .header__navicon{
  grid-column:2;
  justify-self:end;
  text-align:right;
  display:flex;
  align-items:center;
  gap:18px;
}

/* MENU button — keep its existing visual but tighten line-height */
.header-area-8 .menu-toggle{
  font-family:var(--font_bdogrotesk);
  font-weight:500;
  font-size:15px;
  line-height:1;
  letter-spacing:-0.05em;
  text-transform:uppercase;
}

/* ---- Language switcher chip & dropdown ---- */
.lang-switcher{
  position:relative;
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  z-index:2000;
}
.lang-switcher .lang-current{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:1px solid currentColor;
  color:inherit;
  border-radius:999px;
  padding:6px 12px;
  cursor:pointer;
  font:inherit;
  line-height:1;
  transition:opacity .2s ease;
}
.lang-switcher .lang-current:hover{opacity:.85}
.lang-switcher .lang-current:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.lang-switcher .lang-flag{font-size:1.05em;line-height:1}
.lang-switcher .lang-code{font-size:.85em;letter-spacing:.04em;font-weight:600}
.lang-switcher .lang-caret{transition:transform .25s ease}
.lang-switcher.open .lang-caret{transform:rotate(180deg)}
.lang-switcher .lang-list{
  list-style:none;
  padding:6px 0;
  margin:0;
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  left:auto;
  min-width:200px;
  background:#fff;
  color:#111;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
}
.lang-switcher.open .lang-list{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear 0s;
}
.lang-switcher .lang-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  color:#111;
  text-decoration:none;
  font-size:.92em;
  line-height:1.2;
  white-space:nowrap;
}
.lang-switcher .lang-option:hover{background:#f4f4f4}
.lang-switcher .lang-option.active{font-weight:700;background:#f0f0f0}
.lang-switcher .lang-option .lang-flag{font-size:1.15em}
@media (max-width:991px){
  .lang-switcher .lang-code{display:none}
  .header-area-8__inner{gap:14px}
  .header-area-8__inner > .header__navicon{gap:12px}
}
@media (max-width:767px){
  .header-area-8__inner > .header__navicon{gap:10px}
}

/* ---- Side menu (offcanvas) "Language" group ---- */
.lang-nav-list{list-style:none;padding:0;margin:0}
.lang-nav-list li a{display:inline-flex;align-items:center;gap:8px}
.lang-nav-list li.active a{font-weight:700;text-decoration:underline}
.lang-nav-list .lang-flag{font-size:1.15em;line-height:1}

/* =========================================================
   Hero overflow guards — translations are MUCH longer than the
   original "Boost - your mobility". Force the title to scale
   to viewport width and keep within the hero area.
   ========================================================= */
.hero-8-title{
  font-size:clamp(2.5rem, 8vw, 12rem) !important;
  line-height:1 !important;
  letter-spacing:-0.04em !important;
  word-break:break-word;
  hyphens:auto;
  max-width:100%;
}
@media (max-width:1199px){
  .hero-8-title{font-size:clamp(2.2rem, 9vw, 8rem) !important;}
}
@media (max-width:767px){
  .hero-8-title{font-size:clamp(2rem, 11vw, 5rem) !important;}
}
.hero-8-subtitle{
  display:inline-block;
  max-width:100%;
  word-break:break-word;
  hyphens:auto;
  font-size:clamp(0.9rem, 1.3vw, 1.4rem) !important;
}
.section-subtitle-4,
.section-title,
.portfolio-8-title,
.page-title{
  word-break:break-word;
  hyphens:auto;
}
.video-popup span,
.rr-btn-underline{
  display:inline-block;
  max-width:100%;
  word-break:break-word;
  hyphens:auto;
}
.footer-widget-box .title{word-break:break-word;hyphens:auto}

/* Per-locale hero scaling — Portuguese, Polish, German, Italian,
   Dutch, Spanish, French are all longer than English. */
html[lang="pt"] .hero-8-title,
html[lang="pl"] .hero-8-title,
html[lang="de"] .hero-8-title,
html[lang="it"] .hero-8-title,
html[lang="nl"] .hero-8-title,
html[lang="es"] .hero-8-title,
html[lang="fr"] .hero-8-title{
  font-size:clamp(2rem, 6.8vw, 10rem) !important;
}
@media (max-width:1399px){
  html[lang="pt"] .hero-8-title,
  html[lang="pl"] .hero-8-title,
  html[lang="de"] .hero-8-title,
  html[lang="it"] .hero-8-title,
  html[lang="nl"] .hero-8-title{
    font-size:clamp(1.8rem, 6vw, 6.5rem) !important;
  }
}

/* Constrain hero outer container so the page doesn't grow past one
   screen, BUT keep the template's internal .hero-8-content layout
   intact (padding-top + justify-content:space-between) so that
   "BASED IN BELGIUM / SCROLL / SINCE 1957" stays anchored at the
   bottom of the hero, not floating right under the title. */
.hero-area-8{
  position:relative;
  z-index:1;
  min-height:100vh;
  max-height:100vh;
  overflow:hidden;
}
@media (max-width:991px){
  .hero-area-8{max-height:none;min-height:auto;height:auto}
}


/* ---- Side menu (offcanvas .side-info-4) — Language column ---- */
.side-info-4 .offcanvas-4 .contact-meta{
  grid-template-columns: 200px auto 200px 182px;
  gap: 24px;
}
@media (min-width:1920px){
  .side-info-4 .offcanvas-4 .contact-meta{
    grid-template-columns: 325px auto 220px 182px;
  }
}
@media (max-width:1399px){
  .side-info-4 .offcanvas-4 .contact-meta{
    grid-template-columns: 180px auto 180px 160px;
    gap: 20px;
  }
}
@media (max-width:991px){
  .side-info-4 .offcanvas-4 .contact-meta{
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }
}
@media (max-width:575px){
  .side-info-4 .offcanvas-4 .contact-meta{
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
}

/* Language list itself — compact, vertical, never huge */
.side-info-4 .offcanvas-4 .contact-item .lang-nav-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:8px;
  max-width:100%;
}
.side-info-4 .offcanvas-4 .contact-item .lang-nav-list li{
  list-style:none; transform:none; line-height:1.3;
}
.side-info-4 .offcanvas-4 .contact-item .lang-nav-list li a{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font_bdogrotesk);
  font-size:18px; font-weight:400; line-height:1.4;
  letter-spacing:-0.3px;
  color:var(--primary);
  text-decoration:none; white-space:nowrap;
}
.side-info-4 .offcanvas-4 .contact-item .lang-nav-list li a:hover{
  color:var(--secondary);
}
.side-info-4 .offcanvas-4 .contact-item .lang-nav-list li.active a{
  font-weight:700; text-decoration:underline; text-underline-offset:4px;
}
.side-info-4 .offcanvas-4 .contact-item .lang-nav-list .lang-flag{
  font-size:1.1em; line-height:1; flex-shrink:0;
}


/* =========================================================
   COMPREHENSIVE RESPONSIVE OVERFLOW GUARDS (post-i18n audit)
   ========================================================= */

/* --- Portfolio "TUTORIAL" / "SEMINARIUM" / "Handleiding" --- */
.portfolio-8-title{
  font-size: clamp(3rem, 17vw, 380px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.04em !important;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
}
@media (max-width:1399px){
  .portfolio-8-title{ font-size: clamp(2.6rem, 15vw, 240px) !important; }
}
@media (max-width:991px){
  .portfolio-8-title{ font-size: clamp(2.4rem, 14vw, 170px) !important; }
}
@media (max-width:575px){
  .portfolio-8-title{ font-size: clamp(2rem, 13vw, 90px) !important; }
}
/* Long-word locales scale down further (Polish "Seminarium", Dutch "Handleiding", German "Anleitung", Italian "Tutorial") */
html[lang="pl"] .portfolio-8-title,
html[lang="nl"] .portfolio-8-title,
html[lang="de"] .portfolio-8-title{
  font-size: clamp(2.5rem, 13vw, 240px) !important;
}

/* --- Subpage h2 "How to assemble Moost on Trigo/Sagitta/V500" --- */
.page-title-wrapper .page-title{
  font-size: clamp(2rem, 7vw, 140px) !important;
  line-height: 1.05 !important;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
}
@media (max-width:991px){
  .page-title-wrapper .page-title{ font-size: clamp(1.8rem, 6vw, 80px) !important; }
}

/* --- About / CTA section titles (very long in NL/DE/FR) --- */
.section-title{
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
}
.section-title.font-bdogrotesk-regular-50{
  font-size: clamp(1.6rem, 3.4vw, 50px) !important;
  line-height: 1.15 !important;
}

/* --- Tagline letters "WE CARE FOR YOUR MOBILITY" stay big but capped --- */
.tagline-8-list li{
  font-size: clamp(3rem, 14vw, 265px) !important;
  line-height: 1 !important;
  word-break: break-word;
}
.tagline-8-list{
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}

/* --- Work-box (preview card) title (NL/DE long phrases) --- */
.work-box-8 .title,
.works-wrapper-8 .work-box-8 .title{
  word-break: break-word;
  hyphens: auto;
}
.work-box-8 .title a{
  font-size: clamp(1.1rem, 1.6vw, 1.6rem) !important;
  line-height: 1.25 !important;
}

/* --- Footer CTA "Let's start a great work right now" --- */
.footer-area .footer-widget-box.content .title,
.footer-area-2 .footer-widget-box.content .title{
  font-size: clamp(1.6rem, 3vw, 55px) !important;
  line-height: 1.15 !important;
  word-break: break-word;
  hyphens: auto;
}

/* --- Generic safety: no horizontal scroll on body --- */
html, body { overflow-x: hidden; }

/* --- Side-panel offset-header h6 (NL/DE long heading) --- */
.side-info-4 .offcanvas-4 .offset-header h6{
  word-break: break-word;
  hyphens: auto;
}

/* --- Mobile: stack the controls cleanly --- */
@media (max-width:767px){
  .header-area-8__inner{
    grid-template-columns: auto auto !important;
    padding: 16px 0;
  }
  .header-area-8 .header__logo img{ width: 90px !important; }
  .header-area-8__inner > .header__navicon{
    gap: 8px;
  }
  .lang-switcher .lang-current{
    padding: 5px 9px;
  }
  /* Hero subtitle wraps cleanly */
  .hero-8-subtitle{
    font-size: clamp(0.85rem, 3.5vw, 1.1rem) !important;
  }
  .meta-list ul{
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
  }
}

/* --- Hero meta list (Belgium / Scroll / 1957) shouldn't sit on top of huge title on mobile --- */
@media (max-width:991px){
  .hero-8-inner{ padding: 80px 0 40px; }
  .hero-8-title{ margin: 16px 0 !important; }
}