/* Header på det nye jyskss.dk: samme opbygning som på erab.jyskss.dk (kode/header.css dér), med JSS-logoet og
   firmanavnet ved siden af. Logoet er 62 px højt med 18 px luft over og under, så mobilmenuen er skærmens højde minus
   99 px. Sticky header, sprogmenu og mobilmenuens underpunkter som på ERAB-sitet. */
header > div { padding-top: 18px !important; padding-bottom: 18px !important; }
header .brand img { height: 62px !important; }
.nav-mob nav { height: calc(100dvh - 99px) !important; }
.nav-desk { column-gap: 28px !important; }

/* Firmanavnet ved logoet: teksten "GREDSTEDBRO / ERAB-KONCERNEN" skjules under 1360 px, så menuen kan være på én linje;
   på telefoner står kun logoet, så der er plads til ring-knappen og menuen */
@media (max-width: 1360px) { header .brand .hide-md { display: none !important; } }
@media (max-width: 1260px) { header details.lang { display: none !important; } .nav-desk { column-gap: 22px !important; } }
@media (max-width: 560px) { header .brand-name { display: none !important; } }

/* Ni sprog siden 2026-11-10: lange sammensatte ord på tysk, finsk og færøsk deles i brødtekst på smalle skærme (som
   tysk på erab.jyskss.dk); de store overskrifter gør fit.js mindre i stedet */
html:is([lang="de"], [lang="fi"], [lang="fo"]) :is(p, li, dd, address, label, span):not(h1 *, h2 *, h3 *):not([style*="Big Shoulders"]) {
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
h3 { overflow-wrap: break-word; }

/* Aktiv side i topmenuen */
.nav-desk a[aria-current="page"] { color: #E8900F; }
.nav-desk a[aria-current="page"]::after { transform: scaleX(1); }

/* Sprogvælgeren i headeren */
details.lang { position: relative; }
details.lang summary { list-style: none; }
details.lang summary::-webkit-details-marker { display: none; }
details.lang summary svg { transition: rotate .2s ease; }
details.lang[open] summary { border-color: #E8900F !important; color: #E8900F !important; }
details.lang[open] summary svg { rotate: 180deg; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 190px; display: flex;
             flex-direction: column; padding: 6px; background: #0B0B0A; border: 1px solid #2A2825;
             box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.lang-menu a { display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 0 12px; font-size: 14px; }
.lang-menu a span:first-child { flex: 0 0 22px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
                                font-size: 11px; letter-spacing: 0.12em; color: #8A857D; }
.lang-menu a[aria-current] { color: #E8900F; }
.lang-menu a[aria-current] span:first-child { color: #E8900F; }
.lang-menu a:hover { background: #131311; }

/* Med mobilmenuen åben er der på smalle telefoner ikke plads til ring-knappen; menuen viser selv nummeret stort */
@media (max-width: 480px) {
  header:has(details.nav-mob[open]) > div > div > a[href^="tel:"] { display: none !important; }
}
/* Under 400 px viser menuknappen kun ikonet (ordet står stadig til skærmlæsere) */
@media (max-width: 400px) {
  .nav-mob summary span { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
                          clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 720px) {
  header > div { padding-top: 12px !important; padding-bottom: 12px !important; }
  header .brand img { height: 54px !important; }
  .nav-mob nav { height: calc(100dvh - 79px) !important; }
}

/* Sticky header: sidens ydre ramme har overflow-x: hidden; clip klipper det samme uden at gøre den til en
   scroll-container, så sticky virker. Når man har scrollet, sætter site.js klassen "scrolled" på <html>. */
body > div:first-of-type { overflow-x: clip !important; }
header { position: sticky !important; top: 0; z-index: 50 !important; transition: box-shadow .25s ease; }
header > div { transition: padding .25s ease; }
header .brand img { transition: height .25s ease; }
html { scroll-padding-top: 112px; }
.scrolled header { box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.scrolled header > div { padding-top: 10px !important; padding-bottom: 10px !important; }
.scrolled header .brand img { height: 50px !important; }
.scrolled .nav-mob nav { height: calc(100dvh - 71px) !important; }
@media (max-width: 720px) {
  html { scroll-padding-top: 92px; }
  .scrolled header > div { padding-top: 8px !important; padding-bottom: 8px !important; }
  .scrolled header .brand img { height: 46px !important; }
  .scrolled .nav-mob nav { height: calc(100dvh - 65px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  header, header > div, header .brand img { transition: none; }
}
@media (max-width: 340px) {
  header .brand img { height: 46px !important; }
  header > div { column-gap: 8px !important; }
  header > div > div { gap: 6px !important; }
  header > div > div > a[href^="tel:"] { padding: 0 12px !important; }
  .nav-mob nav { height: calc(100dvh - 73px) !important; }
}

/* Lister og gitre, som ERAB-designet ikke har: tjeklisten på Service (24 punkter) og elementerne på Produktion */
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .g3 { grid-template-columns: minmax(0, 1fr) !important; } }
/* Tekst og billede side om side (Service, Om JSS): billedet først på smalle skærme */
@media (max-width: 900px) { .split { flex-direction: column !important; } .split > figure { min-height: 360px !important; } }