/* FlouLabs site header and menu, loaded by every page (privacy included, so it falls back to its own colours when main.css is absent).
   From 1100 px up the links, language switch and contact button sit in the bar; below that they live in a flat panel opened by the Menu button. */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--cream, #F6F0E8); border-bottom: 1px solid var(--line, #252525); }
.nav { position: relative; width: min(100%, var(--max-width, 1240px)); min-height: 76px; margin: 0 auto; padding: 0 var(--gutter, clamp(18px, 4vw, 52px)); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; margin-block: -3.5px; text-decoration: none; }
.brand-logo { display: block; width: 140px; height: auto; aspect-ratio: 220.05 / 58; flex: none; }
.menu-button { min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line, #252525); border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.menu-button:hover, .menu-button[aria-expanded="true"] { background: var(--charcoal, #1A1A1A); color: var(--paper, #FFFFFF); }
.nav-panel { position: absolute; top: 100%; left: 0; right: 0; padding: 0 var(--gutter, 18px) 20px; background: var(--cream, #F6F0E8); border-bottom: 1px solid var(--line, #252525); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms; }
.menu-button[aria-expanded="true"] + .nav-panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav-links { display: grid; }
.nav-links a { min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid var(--line, #252525); font-size: 15px; font-weight: 600; text-decoration: none; }
.nav-links a:hover { color: var(--orange-text, #A93600); }
.nav-links a[aria-current="page"] { padding-left: 11px; border-left: 3px solid var(--orange, #FF5B11); }
.nav-actions { display: flex; align-items: center; gap: 10px; padding-top: 16px; }
.language-button { min-width: 44px; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line, #252525); color: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; }
.language-button:hover { background: var(--charcoal, #1A1A1A); color: var(--paper, #FFFFFF); }
.nav-actions .button { flex: 1; min-height: 46px; padding: 12px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line, #252525); border-radius: 0; background: var(--orange, #FF5B11); color: var(--charcoal, #1A1A1A); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; }
.nav-actions .button::after { content: "\2197"; content: "\2197" / ""; font-size: 17px; line-height: 1; }
.nav-actions .button:hover { background: var(--charcoal, #1A1A1A); color: var(--paper, #FFFFFF); }
.site-header a:focus-visible, .menu-button:focus-visible { outline: 3px solid var(--charcoal, #1A1A1A); outline-offset: 3px; }
/* The header is sticky only where it leaves room: not below 681 px wide and not in short (landscape) windows; html keeps anchor targets clear of it in the same cases. */
@media (min-width: 681px) and (min-height: 501px) { html { scroll-padding-top: 96px; } }
@media (max-height: 500px) { .site-header { position: static; } }
@media (max-width: 680px) { .site-header { position: static; } .nav-actions .button { min-height: 44px; padding: 10px 12px; font-size: 12px; } }
@media (min-width: 600px) { .nav-actions .button { flex: none; } }
@media (min-width: 1100px) {
  .menu-button { display: none; }
  .nav-panel { position: static; flex: 1; padding: 0; display: flex; align-items: center; background: none; border: 0; visibility: visible; opacity: 1; transform: none; transition: none; }
  .nav-links { display: flex; gap: clamp(18px, 2.2vw, 34px); margin: 0 auto; white-space: nowrap; }
  .nav-links a { position: relative; min-height: 0; border-bottom: 1px solid transparent; font-size: 13px; letter-spacing: 0.02em; }
  .nav-links a::before { content: ""; position: absolute; inset: -12px -6px; }
  .nav-links a:hover, .nav-links a[aria-current="page"] { padding-left: 0; border-left: 0; border-bottom-color: var(--orange, #FF5B11); color: inherit; }
  .nav-actions { padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .nav-panel { transition: none; } }