/* FMST · department lines in every header
   Ported from the homepage's inline rules so all 72 pages share one treatment:
   two department lines - Electrical 0306 4758850, Pipes & Cables 0322 7803742 -
   each a split control, call on the left and WhatsApp on the right. Desktop
   shows them inline in the navbar; below 1200px they become a full-width strip
   under the navbar, in normal flow so it scrolls away with the page.
   index.html keeps its own copy of these rules; identical values, so the two
   cannot disagree on the page they share. */

.nav-lines { display:flex; align-items:center; margin-left:auto; margin-right:12px; }
.nav-line { display:flex; align-items:center; gap:8px; padding:0 10px; }
.nav-line + .nav-line { border-left:1px solid rgba(255,255,255,.08); }
.nl-call { display:flex; flex-direction:column; gap:2px; text-decoration:none; }
.nl-lbl {
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:7.5px; font-weight:600;
  letter-spacing:1.7px; text-transform:uppercase; color:var(--lc);
  display:flex; align-items:center; gap:5px;
}
.nl-lbl::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--lc); }
.nl-num {
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:12.5px; font-weight:600;
  letter-spacing:.2px; color:rgba(255,255,255,.88); white-space:nowrap; transition:color .2s;
}
.nl-call:hover .nl-num { color:var(--lc); }
.nl-wa {
  width:26px; height:26px; border-radius:8px; flex:none;
  display:flex; align-items:center; justify-content:center;
  color:#25D366; background:rgba(37,211,102,.1); border:1px solid rgba(37,211,102,.28);
  transition:all .2s;
}
.nl-wa:hover { background:#25D366; border-color:#25D366; color:#fff; }
.nl-wa svg { width:13px; height:13px; }

/* the strip: hidden on desktop, shown under the navbar on smaller screens */
.dept-strip {
  display:none; gap:8px; padding:7px 10px;
  background:rgba(9,12,19,.97); border-bottom:1px solid rgba(255,255,255,.07);
  margin-top:var(--fmst-nav-h, 66px);
}
.ds-chip {
  flex:1; min-height:44px; min-width:0; display:flex; align-items:stretch;
  border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07);
}
.ds-call {
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; text-decoration:none; padding:0 4px;
}
.ds-call:active { background:rgba(255,255,255,.08); }
.ds-lbl {
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:7px; font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--lc);
  display:flex; align-items:center; gap:4px;
}
.ds-lbl::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--lc); }
.ds-num {
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; font-weight:600;
  color:rgba(255,255,255,.92); white-space:nowrap;
}
.ds-wa {
  width:44px; flex:none; display:flex; align-items:center; justify-content:center;
  color:#25D366; background:rgba(37,211,102,.08); border-left:1px solid rgba(255,255,255,.07);
}
.ds-wa:active { background:#25D366; color:#fff; }
.ds-wa svg { width:14px; height:14px; }

html.light .nl-num, html.light .ds-num { color:rgba(0,0,0,.85); }
html.light .nav-line + .nav-line { border-left-color:rgba(0,0,0,.1); }
html.light .dept-strip { background:rgba(255,255,255,.97); border-bottom-color:rgba(0,0,0,.08); }
html.light .ds-chip { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.08); }

/* Below this the navbar has no room for two lines beside its links, so the
   strip takes over. The hero on every template reserves the fixed navbar's
   height once already; the strip sits in flow after the navbar, so that
   reservation is removed and the strip's own margin clears the navbar instead. */
@media (max-width:1199px) {
  .nav-lines { display:none; }
  .dept-strip { display:flex; }
  .dept-strip ~ main > .hero:first-child,
  .dept-strip ~ main > .cat-hero:first-child,
  .dept-strip ~ main > section:first-child { padding-top:24px !important; min-height:0 !important; }
}
@media (max-width:640px) {
  .dept-strip { padding:6px 8px; gap:6px; }
}
@media (prefers-reduced-motion:reduce) { .nl-num, .nl-wa { transition:none; } }