/* header.css — masthead + navbar for the Swiss Minimal (h6) theme.
   Extracted from home.css so every page shares one header, not just
   the front page. Requires <body class="h6">. */

/* These three are declared in home.css, which only the front page loads.
   Re-declare them here so the shared header renders identically everywhere.
   Values are copied verbatim from home.css. */
.h6 {
  --rule-thick: 2px solid var(--swiss-black);
  --rule-thin:  1px solid var(--swiss-border);
  --red: var(--swiss-red);
}

.h6-wrap { max-width: 1280px; margin-inline: auto; padding-inline: 40px; }
.h6-mast { border-bottom: var(--rule-thick); padding: 1.5rem 0 1.25rem; }
.h6-mast-in {
  display: grid;
  /* logo | founding line + offices | licences — the logo sits at the left
     edge, the two text blocks follow, the licences stay right-aligned. */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}
.h6-mast-side { display: flex; flex-direction: column; gap: 0.2rem; }
.h6-mast-side span {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--swiss-gray);
}
.h6-mast-right { text-align: right; }
.h6-mast-logo { grid-column: 1; grid-row: 1; justify-self: start; }
.h6-mast-left { grid-column: 2; grid-row: 1; }
.h6-mast-right { grid-column: 3; grid-row: 1; }
.h6-mast-logo img { height: 44px !important; }
.h6 .h6-navbar {
  background: var(--swiss-white);
  border-bottom: var(--rule-thin);
  box-shadow: none;
}
.h6-navbar-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 46px; }
.h6 .h6-navbar .nav-links { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.h6 .h6-navbar .nav-link {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--swiss-black);
  padding: 0;
}
.h6 .h6-navbar .nav-link:hover { color: var(--red); }
.h6 .h6-navbar .chevron { display: none; }
.h6 .h6-navbar .nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  background: var(--swiss-white);
  border: var(--rule-thin);
  border-top: 2px solid var(--red);
  padding: 0.35rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 60;
}
.h6 .h6-navbar .nav-item { position: relative; }
.h6 .h6-navbar .nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; }
.h6 .h6-navbar .nav-dropdown a {
  padding: 0.45rem 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--swiss-dark);
}
.h6 .h6-navbar .nav-dropdown a:hover { background: var(--swiss-light); color: var(--red); }
.h6 .h6-navbar .nav-actions { display: flex; gap: 0.4rem; }
@media (max-width: 820px) {
  .h6-wrap { padding-inline: 22px; }
  /* On a phone the masthead stacked three blocks and pushed the page down
     before any content. Keep the logo and drop the founding line, the office
     list and the licence line — all of which appear in the footer. */
  .h6-mast { padding: 0.9rem 0 0.8rem; }
  .h6-mast-in { grid-template-columns: 1fr; justify-items: start; text-align: left; gap: 0; }
  .h6-mast-side { display: none; }
}
.h6-navbar-in { position: relative; min-width: 0; }
.h6-navbar-in .nav-main { min-width: 0; flex-shrink: 1; }
.h6 .h6-navbar .nav-links { flex-wrap: nowrap; min-width: 0; }
@media (max-width: 1180px) {
  .h6 .h6-navbar .nav-links { gap: 1.1rem; }
  .h6 .h6-navbar .nav-link { font-size: 0.66rem; letter-spacing: 0.1em; }
}
@media (max-width: 1180px) {
  /* main.css hides .nav-main below 768px, which collapsed the <ul> inside it
     to zero size — the menu opened but had nothing to lay out. Keep the
     wrapper in flow here and let .nav-links itself do the hiding. */
  .h6 .h6-navbar .nav-main { display: block; }
  .h6 .h6-navbar .nav-links { display: none; }
  .h6 .h6-navbar .nav-actions { display: none; }
  .h6 .nav-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .h6 .nav-toggle span { background: var(--swiss-black); }
  .h6 .h6-navbar .nav-links.mobile-open {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%; left: 0; right: 0;
    /* main.css's own mobile rule sets bottom:0, and it is a separate
       declaration this one never overrides — leaving the panel pinned between
       top:100% and bottom:0 inside a 46px navbar, i.e. squeezed to nothing.
       State it here so the panel sizes to its content. */
    bottom: auto; height: auto;
    z-index: 80;
    background: var(--swiss-white);
    border-bottom: var(--rule-thick);
    box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.35);
    padding: 0.5rem 1.5rem;
    max-height: 74vh;
    overflow-y: auto;
  }
  .h6 .h6-navbar .nav-links.mobile-open .nav-item { border-top: var(--rule-thin); }
  .h6 .h6-navbar .nav-links.mobile-open .nav-item:first-child { border-top: 0; }
  .h6 .h6-navbar .nav-links.mobile-open .nav-link { display: block; padding: 0.85rem 0; font-size: 0.72rem; }
  .h6 .h6-navbar .nav-links.mobile-open .nav-dropdown {
    position: static; opacity: 1; visibility: visible;
    border: 0; border-left: var(--rule-thin);
    margin: 0 0 0.75rem 0.75rem; padding: 0; display: none;
  }
  .h6 .h6-navbar .nav-links.mobile-open .nav-item.mobile-expanded .nav-dropdown { display: flex; }
  .h6 .h6-navbar .nav-links.mobile-open .mobile-nav-cta { display: flex; gap: 0.5rem; padding: 1rem 0 0.5rem; border-top: var(--rule-thin); }
  .h6 .h6-navbar .nav-links.mobile-open .mobile-nav-cta .btn { flex: 1; }
}
@media (min-width: 1181px) {
  .h6 .h6-navbar .nav-actions { display: flex; align-items: center; gap: 0.45rem; flex: none; flex-wrap: nowrap; }
  .h6 .h6-navbar .nav-actions > div { display: flex; align-items: center; gap: 0.45rem; flex: none; }
  .h6 .h6-navbar .nav-actions .btn { white-space: nowrap; padding: 0.5rem 0.9rem; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; }
}
@media (min-width: 1181px) {
  .h6-navbar-in { gap: 1.25rem; }
  .h6 .h6-navbar .nav-links { gap: 1.25rem; }
}
@media (min-width: 1181px) {
  .h6-navbar-in { gap: 14px; }
  .h6 .h6-navbar .nav-links { gap: 0.7rem; }
  .h6 .h6-navbar .nav-link { font-size: 0.62rem; letter-spacing: 0.08em; }
}

/* ── mobile drawer: freeze the page behind it ────────────────────────────
   main.js stores the scroll offset and pins the body here, so dragging on
   the open menu cannot pan the site behind it. overscroll-behavior stops the
   drawer's own scroll from chaining to the document at either end. */
/* Locking <html> overflow as well would stop the page scrolling, but it also
   removes the scroll container the sticky header depends on, and the header
   drops back to the top of the document with the drawer attached to it.
   touch-action stops the drag that prompted this without touching layout. */
body.h6.nav-open {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}
.h6 .h6-navbar .nav-links.mobile-open { touch-action: pan-y; }
.h6 .h6-navbar .nav-links.mobile-open {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}