/* ============================================================
   Harrimont — shared chrome (header · nav · language switcher ·
   nav CTA · footer columns · focus rings)

   Loaded LAST on every page:
     css/fonts.css → css/styles.css → [page css] → css/chrome.css

   Everything here used to live in css/home.css, which only the four
   homepages load. It is lifted out so the header, the language
   switcher, the nav CTA and the footer columns render identically on
   legal pages (css/legal.css), the blog (css/blog.css) and
   business-systems (css/business-systems.css).

   Rules of the file:
   - tokens only from css/styles.css — no new colours, radii,
     shadows or fonts are introduced here;
   - nothing in here targets a homepage-only element (.hero, .anchor,
     .sector, .case-*, .level, .stage, .apill …), so loading it after a
     page stylesheet cannot disturb a page-specific layout;
   - nothing in here sets .site-header background, so
     .legal-page .site-header (css/legal.css) still wins;
   - nothing in here sets a border on .btn-gold, so
     .post-cta .btn-gold (css/blog.css) still wins.
   ============================================================ */

/* ---------- focus rings on light surfaces ---------- */
/* The default ring is tuned for the navy hero; on paper/tint sections it
   needs the darker gold so it stays visible at AA contrast. */
.section-light :focus-visible,.section-tint :focus-visible{outline-color:var(--gold-ink);}

/* ---------- the button arrow ---------- */
/* One arrow, one source. The glyph is drawn by CSS from an EMPTY
   <span class="arr" aria-hidden="true"></span>, so no "→" character is ever
   typed into a button label — which is what made the old pages inconsistent
   (some labels ended in a typed arrow, some in a span, some in neither).
   :empty is deliberate: a legacy span that still contains a typed "→" keeps
   rendering exactly one arrow, so pages can be converted one at a time
   without a page ever showing "→→".
   .btn .arr / .anchor-link .arr already carry the hover nudge in
   styles.css and home.css; this only supplies the character. */
.arr:empty::after{content:"→";}
/* ---------- nav: six links + language switcher + CTA ---------- */
.nav-menu{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);min-width:0;}
.nav-lang{display:flex;align-items:center;flex:none;}
.nav-lang a{
  display:inline-flex;align-items:center;padding:6px 5px;position:relative;
  font-size:.7rem;font-weight:600;letter-spacing:.12em;color:var(--gray-100);opacity:.68;
  transition:color .25s var(--ease),opacity .25s var(--ease);
}
.nav-lang a+a::before{content:"·";position:absolute;left:-4px;color:var(--gold);opacity:.7;font-weight:500;}
.nav-lang a::after{
  content:"";position:absolute;left:5px;right:5px;bottom:-2px;height:1px;width:auto;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-lang a:hover,.nav-lang a[aria-current="page"]{color:var(--white);opacity:1;}
.nav-lang a[aria-current="page"]::after,.nav-lang a:hover::after{transform:scaleX(1);}

/* Nav CTA. min-height is the WCAG 2.5.5 tap target (the painted pill was
   ~39px at rest and ~36px on narrow laptops). The text metrics never reach
   44px, so min-height alone does the work: font-size, letter-spacing and the
   horizontal padding are untouched, and .btn already centres its content
   (display:inline-flex;align-items:center). The pill grows a few pixels
   taller and matches the 44px .nav-toggle beside it. */
.nav-cta.btn{
  padding:11px 18px;font-size:.68rem;letter-spacing:.08em;flex:none;
  min-height:44px;justify-content:center;
  gap:7px; /* the tightest gold button on the page: the arrow is paid for out of the gap, not the label */
}

/* The tighter nav runs to 1799px, not 1499px: at 1500px --maxw caps the wrap
   at 1380px while the root font-size steps up to 16.5px, so the container
   stops growing while the type does not. Full-size nav metrics do not fit
   German or French in that band; they fit again at 1800px, where --maxw goes
   to 1520px. */
@media(max-width:1799px) and (min-width:1181px){
  .nav{gap:16px;}
  .nav-menu{gap:14px;}
  .nav-links{gap:13px;}
  .nav-links a{font-size:.78rem;letter-spacing:.02em;}
  .nav-lang a{font-size:.66rem;letter-spacing:.1em;padding-inline:4px;}
  .nav-lang a+a::before{left:-3px;}
  .nav-cta.btn{padding:10px 13px;font-size:.64rem;letter-spacing:.06em;gap:6px;}
  .logo-nav .navlogo-img{height:40px;}
  .site-header.scrolled .logo-nav .navlogo-img{height:35px;}
}
@media(max-width:1180px) and (min-width:881px){
  .nav{gap:14px;}
  .nav-menu{gap:10px;}
  .nav-links{gap:9px;}
  .nav-links a{font-size:.71rem;letter-spacing:.01em;}
  .nav-lang a{font-size:.62rem;letter-spacing:.08em;padding-inline:4px;}
  .nav-lang a+a::before{left:-3px;}
  .nav-cta.btn{padding:9px 11px;font-size:.6rem;letter-spacing:.05em;}
  .logo-nav .navlogo-img{height:32px;}
  .site-header.scrolled .logo-nav .navlogo-img{height:30px;}
}
@media(max-width:1000px) and (min-width:881px){
  .nav{gap:10px;}
  .nav-menu{gap:6px;}
  .nav-links{gap:5px;}
  .nav-links a{font-size:.64rem;letter-spacing:0;}
  .nav-lang a{font-size:.58rem;letter-spacing:.06em;padding-inline:3px;}
  .nav-lang a+a::before{left:-3px;}
  .nav-cta.btn{padding:8px 9px;font-size:.56rem;letter-spacing:.04em;}
  .logo-nav .navlogo-img{height:28px;}
  .site-header.scrolled .logo-nav .navlogo-img{height:26px;}
}

/* Narrow laptops and tablets in landscape: six nav links, four language codes
   and the CTA spend the whole width budget, and the longest translations (FR,
   DE) spend it exactly. The CTA's arrow is decorative and aria-hidden, so it
   is the one thing that can go — the empty span stays in the markup on every
   page, exactly as the contract requires, and the glyph comes back at 1301px
   and again inside the mobile overlay menu, where the CTA is full width. */
@media(max-width:1300px) and (min-width:881px){
  .nav-cta.btn .arr{display:none;}
}

/* ---------- mobile overlay menu (≤880px) ---------- */
@media(max-width:880px){
  /* top-aligned and scrollable so six links + switcher + CTA are never cut
     on a short viewport */
  .nav-menu{justify-content:flex-start;align-items:stretch;gap:0;padding:92px 30px 40px;overflow-y:auto;}
  .nav-links{margin:0 auto;flex:none;}
  .nav-links a{padding:13px 6px;font-size:1.35rem;}
  .nav-links a.active::after,.nav-links a:hover::after{width:auto;margin-left:auto;}
  .nav-lang{
    width:100%;max-width:440px;margin:22px auto 0;flex:none;
    display:flex;gap:8px;position:relative;z-index:1;
    opacity:0;transform:translateX(24px);
  }
  .nav-lang a{
    flex:1;justify-content:center;padding:12px 8px;font-size:.78rem;
    border:1px solid rgba(255,255,255,.14);border-radius:2px;
  }
  .nav-lang a+a::before{content:none;}
  .nav-lang a::after{content:none;}
  .nav-lang a[aria-current="page"]{border-color:var(--gold);color:var(--gold);}
  .nav-cta.btn{
    width:100%;max-width:440px;margin:16px auto 0;justify-content:center;flex:none;
    padding:15px 20px;font-size:.78rem;letter-spacing:.1em;position:relative;z-index:1;
    opacity:0;transform:translateX(24px);
  }
  .nav-menu.open .nav-lang,.nav-menu.open .nav-cta{
    opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease);
  }
  .nav-menu.open .nav-lang{transition-delay:.48s;}
  .nav-menu.open .nav-cta{transition-delay:.54s;}
}
@media(max-width:880px) and (min-height:720px){
  .nav-menu{justify-content:center;padding-top:80px;}
}

/* ---------- language dropdown (.nav-lang.lang-dd) ----------
   Replaces the inline EN·DE·FR·SQ row on desktop with a globe button
   opening a small panel. In the mobile overlay menu the button is
   hidden and the panel renders as the familiar 2×2 chip grid (the
   [hidden] attribute is overridden there), so no JS is needed ≤880px.
   The rules below neutralise the inline-row styling above for .lang-dd. */
.nav-lang.lang-dd{position:relative;}
.nav-lang.lang-dd a+a::before{content:none;}
.nav-lang.lang-dd a::after{content:none;}
.lang-btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:2px;padding:8px 10px;min-height:44px;
  font-family:"Montserrat",sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.12em;color:var(--gray-100);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.lang-btn:hover{color:var(--white);border-color:rgba(255,255,255,.25);}
.lang-btn[aria-expanded="true"]{color:var(--white);border-color:var(--line-gold);}
.lang-btn .ic{width:15px;height:15px;stroke:var(--gold);flex:none;}
.lang-btn .lang-chev{width:11px;height:11px;stroke:currentColor;transition:transform .3s var(--ease);}
.lang-btn[aria-expanded="true"] .lang-chev{transform:rotate(180deg);}
.lang-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:176px;z-index:210;
  background:rgba(13,19,33,.97);border:1px solid rgba(200,164,106,.25);border-radius:4px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.7);padding:8px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.nav-lang.lang-dd .lang-menu a{
  display:flex;align-items:center;gap:14px;
  padding:11px 12px;border-radius:3px;opacity:1;
  font-size:.8rem;font-weight:500;letter-spacing:.04em;color:var(--gray-100);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.nav-lang.lang-dd .lang-menu a:hover{background:rgba(255,255,255,.07);color:var(--white);}
.nav-lang.lang-dd .lang-menu a[aria-current="page"]{color:var(--gold);}
.nav-lang.lang-dd .lang-menu a[aria-current="page"]::before{
  content:"";width:6px;height:6px;flex:none;order:2;margin-left:auto;
  border:1px solid var(--gold);background:var(--gold);transform:rotate(45deg);position:static;
}
@media(max-width:880px){
  .nav-lang.lang-dd{display:block;position:static;width:100%;max-width:440px;margin:22px auto 0;}
  .nav-lang.lang-dd .lang-btn{display:none;}
  /* the chips replace the button on mobile, so they carry readable type */
  .nav-lang.lang-dd .lang-menu a{font-size:.86rem;letter-spacing:.06em;min-height:48px;}
  .nav-lang.lang-dd .lang-menu,
  .nav-lang.lang-dd .lang-menu[hidden]{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;position:static;min-width:0;
    background:none;border:0;box-shadow:none;padding:0;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .nav-lang.lang-dd .lang-menu a{
    border:1px solid rgba(255,255,255,.14);border-radius:2px;
    justify-content:center;padding:13px 8px;font-size:.8rem;
  }
  .nav-lang.lang-dd .lang-menu a[aria-current="page"]{border-color:var(--gold);}
  .nav-lang.lang-dd .lang-menu a[aria-current="page"]::before{content:none;}
}

/* ---------- footer columns ---------- */
/* The footer column headings are <h3> so the document outline stays legal on
   pages whose last section heading is an <h2>. styles.css styles .footer h5;
   this is the same treatment bound to the heading level we actually ship. */
.footer h3{font-family:"Montserrat",sans-serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 22px;}
/* Offices column: e-mail + phone list under the city line. */
.footer-direct{margin-top:18px;}
/* Offices column: language list, second heading in the same column. */
.footer .footer-lang-h{margin-top:30px;}
.footer-lang a[aria-current="page"]{color:var(--gold);opacity:1;}

/* ============================================================
   PRINT / PDF
   Executives print a page or save it as PDF to forward it on.
   On screen this changes nothing; on paper it turns a navy site
   into a readable document: no chrome, no ink-heavy panels,
   link targets spelled out, and no section split across a page.
   ============================================================ */
@media print{
  /* ink and legibility */
  *,*::before,*::after{
    background:transparent!important;color:#000!important;
    box-shadow:none!important;text-shadow:none!important;
    -webkit-print-color-adjust:economy;print-color-adjust:economy;
  }
  html,body{background:#fff!important;font-size:11pt;line-height:1.45;}
  @page{margin:16mm 14mm;}

  /* interface furniture has no meaning on paper */
  .site-header,.nav,.nav-menu,.nav-toggle,.nav-backdrop,.nav-cta,
  .scroll-progress,.to-top,.cookie-banner,.skip,.scroll-cue,
  .nav-lang,.lang-dd,.lang-menu,.footer-lang,.footer-lang-h,
  .hero-motif,.hero-photo,.shine,.arr,
  .bsys-hero .hero-photo,form,.contact-form,.bsys-form-wrap{
    display:none!important;
  }

  /* reclaim the space a full-viewport hero would waste */
  .hero,.bsys-hero,.img-hero{min-height:0!important;height:auto!important;padding:0 0 12pt!important;}
  .section{padding:14pt 0!important;}
  .wrap{max-width:none!important;padding:0!important;}

  /* stop motion and reveal states from hiding content on paper */
  .reveal,.rv,.chain__row,.js .reveal{opacity:1!important;transform:none!important;animation:none!important;transition:none!important;}

  /* keep a thought on one page */
  h1,h2,h3,h4{break-after:avoid-page;page-break-after:avoid;}
  h1{font-size:20pt;} h2{font-size:15pt;} h3{font-size:12.5pt;}
  .partner,.case,.apill,.feat,.bsys-card,.value,.office,.faq,figure,table,blockquote{
    break-inside:avoid;page-break-inside:avoid;
  }
  p,li{orphans:3;widows:3;}
  img{max-width:100%!important;break-inside:avoid;}

  /* a printed link is useless without its destination */
  a[href^="http"]::after,a[href^="mailto:"]::after{
    content:" (" attr(href) ")";font-size:9pt;word-break:break-all;
  }
  a[href^="#"]::after,a[href^="/"]::after{content:"";}

  /* the approval panel is the product demo: it must print, dots and all */
  .chain,.chain__row,.chain-row,.panel,.hero-panel{
    opacity:1!important;transform:none!important;break-inside:avoid;page-break-inside:avoid;
  }
  .chain__dot,.chain-dot{border:1pt solid #000!important;}

  /* rules instead of fills, so borders survive economy mode */
  .section-dark,.contact,.case,.stats{border-top:1pt solid #000;}
}