/* srvo chrome canonical v1 — shared header + footer + burger nav
 * Hosted at: https://assets.srvo.io/chrome/v1/chrome.css
 * Contract:  https://assets.srvo.io/chrome/v1/CONTRACT.md
 * Sites override: --warm, --warm2, --text, --bg, --border, --muted via :root
 */

/* ── CSS variables (defaults; sites override) ── */
:root {
  --srvo-mono: 'DM Mono', ui-monospace, monospace;
  --srvo-display: 'Syne', sans-serif;
  --srvo-warm: var(--warm, #da9123);
  --srvo-warm2: var(--warm2, #c47e18);
  --srvo-text: var(--text, #1a1916);
  --srvo-bg: var(--bg, #f5f2ec);
  --srvo-border: var(--border, #e5dfd2);
  --srvo-muted: var(--muted, #6b6860);
}

/* ── Header ── */
nav.srvo-chrome {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 900;
  padding: 1.1rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(245, 242, 236, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--srvo-border);
}
/* nav-logo: layout only. Each site styles its own typography/color. */
nav.srvo-chrome .nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}
nav.srvo-chrome .nav-logo:hover { opacity: 0.8; }
nav.srvo-chrome .nav-logo-mark { height: 2.4rem; width: auto; display: block; }
/* nav-logo-text: NO color/font here. Sites that want a branded wordmark
   (e.g. kit's amber Syne) override locally. Sites that just want a plain
   text label (srvo.io /consulting, /control-systems) get inherited text color. */

nav.srvo-chrome .nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  margin: 0; padding: 0;
}
/* nav-links: layout only. Sites style typography/color (most srvo.io family
   sites use DM Mono 0.72rem 0.12em uppercase muted; mycelium/prism differ). */
nav.srvo-chrome .nav-links a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s, opacity 0.2s;
  padding: 0.25rem 0;
  display: inline-block;
}

nav.srvo-chrome .nav-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
/* nav-cta: structural only. Sites paint their own background/color. */
nav.srvo-chrome .nav-cta {
  padding: 0.55rem 1.25rem;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  display: inline-block;
}
nav.srvo-chrome .nav-cta:hover { transform: translateY(-1px); }

/* Burger button (hidden on desktop) */
nav.srvo-chrome .nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0.5rem;
  margin: 0;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
nav.srvo-chrome .nav-toggle-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--srvo-text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
nav.srvo-chrome.nav-open .nav-toggle-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.srvo-chrome.nav-open .nav-toggle-line:nth-child(2) { opacity: 0; }
nav.srvo-chrome.nav-open .nav-toggle-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Submenu (desktop hover-reveal; mobile always-on) */
nav.srvo-chrome .nav-item.has-submenu { position: relative; }
nav.srvo-chrome .nav-submenu {
  position: absolute;
  top: 100%; left: 0;
  display: none;
  min-width: 180px;
  background: var(--srvo-bg);
  border: 1px solid var(--srvo-border);
  padding: 0.5rem 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 100;
  list-style: none;
  margin: 0;
}
nav.srvo-chrome .nav-item.has-submenu:hover .nav-submenu,
nav.srvo-chrome .nav-item.has-submenu:focus-within .nav-submenu { display: block; }
nav.srvo-chrome .nav-submenu a {
  display: block;
  padding: 0.5rem 1rem;
  font-family: var(--srvo-mono);
  font-size: 0.72rem;
  text-transform: lowercase;
  color: var(--srvo-muted);
  text-decoration: none;
  letter-spacing: 0;
  transition: background 0.2s, color 0.2s;
}
nav.srvo-chrome .nav-submenu a:hover {
  background: var(--srvo-border);
  color: var(--srvo-text);
}
nav.srvo-chrome .nav-submenu-heading {
  padding: 0.6rem 1rem 0.25rem;
  font-family: var(--srvo-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--srvo-muted);
}

/* ── Footer (one-liner; 3 segments) ── */
footer.srvo-chrome {
  margin-top: auto;
  padding: 1.25rem 2.5rem;
  border-top: 1px solid #2e2c28;
  background: #1a1916;
  color: #6b6860;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
}
footer.srvo-chrome .footer-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-self: start;
}
footer.srvo-chrome .footer-center {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-self: center;
  justify-content: center;
}
footer.srvo-chrome .footer-brand {
  font-family: var(--srvo-mono);
  font-size: 0.78rem;
  color: #4a4845;
  letter-spacing: 0.04em;
}
footer.srvo-chrome .footer-brand a {
  color: var(--srvo-warm);
  text-decoration: none;
  transition: color 0.2s;
}
footer.srvo-chrome .footer-brand a:hover { color: #f5f2ec; }
footer.srvo-chrome .footer-links {
  display: inline-flex;
  gap: 1rem;
  flex-wrap: wrap;
}
footer.srvo-chrome .footer-links a,
footer.srvo-chrome .footer-center a {
  font-family: var(--srvo-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3a3834;
  text-decoration: none;
  transition: color 0.2s;
}
footer.srvo-chrome .footer-links a:hover,
footer.srvo-chrome .footer-center a:hover { color: var(--srvo-warm); }
footer.srvo-chrome .footer-copyright {
  margin: 0;
  font-family: var(--srvo-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: #3a3834;
  justify-self: end;
  text-align: right;
}

/* ── Body padding for fixed nav ── */
body { padding-top: 4.5rem; }

/* ── Responsive ── */
@media (max-width: 960px) {
  nav.srvo-chrome { padding: 1rem 1.5rem; }
  nav.srvo-chrome .nav-links { gap: 1.5rem; }
}
@media (max-width: 900px) {
  footer.srvo-chrome {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.25rem;
    gap: 1rem;
    text-align: center;
  }
  footer.srvo-chrome .footer-left,
  footer.srvo-chrome .footer-center {
    justify-self: center;
    justify-content: center;
  }
  footer.srvo-chrome .footer-copyright {
    justify-self: center;
    text-align: center;
  }
}
@media (max-width: 720px) {
  /* Burger mode — explicit display: flex to override any desktop grid layout */
  nav.srvo-chrome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.85rem 1.25rem;
    gap: 0.5rem;
  }
  nav.srvo-chrome .nav-toggle { display: flex; }
  nav.srvo-chrome .nav-cta { display: none; }
  nav.srvo-chrome .nav-logo-mark { height: 1.8rem; }
  nav.srvo-chrome .nav-links {
    display: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
    order: 3;
    margin: 0.85rem -1.25rem 0;
    padding: 0.25rem 0 0;
    border-top: 1px solid var(--srvo-border);
  }
  nav.srvo-chrome .nav-links li { width: 100%; }
  nav.srvo-chrome .nav-links > li > a {
    display: block;
    padding: 0.95rem 1.25rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--srvo-border);
    color: var(--srvo-text);
  }
  nav.srvo-chrome .nav-links > li:last-child > a { border-bottom: 0; }
  /* Submenus always visible inside burger panel */
  nav.srvo-chrome .nav-submenu {
    display: block !important;
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0 1.25rem 0.5rem 2rem;
    background: transparent;
    min-width: 0;
  }
  nav.srvo-chrome .nav-submenu a { padding: 0.5rem 0; font-size: 0.78rem; }
  nav.srvo-chrome .nav-item.has-submenu {
    border-bottom: 1px solid var(--srvo-border);
    padding-bottom: 0.5rem;
  }
  nav.srvo-chrome.nav-open { background: rgba(245, 242, 236, 0.98); }
  nav.srvo-chrome.nav-open .nav-links { display: flex; }
  body { padding-top: 4rem; }
  body:has(nav.srvo-chrome.nav-open) { overflow: hidden; }
}