/* /assets/header.css */
:root{
  --ss-green:#186e23;   /* primary (for headings) */
  --ss-blue:#6991b4;    /* secondary (for buttons + "small shift" text) */
  --ss-purple:#764f7c;  /* accent (for underlines, hovers, chips, tiny flares) */
  --ss-ink:#1b1b1b;
}

html,body{color:var(--ss-ink);background:#fff}

.site-header{
  border-bottom:1px solid #eef2f6;background:#fff;position:sticky;top:0;z-index:50
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 0
  /* Reasonable, responsive logo sizing */
  .header-inner { min-height: 64px; } /* keeps header tidy */
}
.brand-block{display:flex;align-items:center;gap:10px;min-height:48px}
.brand-logo{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none
}
.brand-logo img{
  /* Height-first control so header stays consistent */
  max-height:clamp(44px, 6vh, 56ph); /* mobile -> desktop */
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;

  /* Prevent ultra wide text logos from sprawling */
  max-width: clamp(180px, 20vw, 280px);
}
.brand-name{
  font-family:"Advent Pro",sans-serif;font-weight:700;letter-spacing:.3px;
  line-height:1; display:inline-block;
  color:var(--ss-blue); /* company name in secondary color */
}

.main-nav{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.main-nav a{
  text-decoration:none;color:#223;border-radius:10px;padding:6px 10px;
  border:1px solid transparent
}
.main-nav a[aria-current="page"]{background:var(--ss-blue);color:#fff}
.main-nav a:hover{border-color:#dfe5ec}

h1,h2,h3,h4,h5,h6{
  color:var(--ss-green); /* headings use primary color */
  font-family:"Advent Pro",sans-serif
}

/* Global button style: all buttons = secondary color */
.btn, .main-nav .btn {
  display:inline-block;border-radius:12px;border:1px solid var(--ss-blue);
  padding:10px 14px;text-decoration:none;color:#fff;background:var(--ss-blue);
  font-weight:600
}
.btn:hover{filter:brightness(0.95)}
.btn.ghost{background:transparent;color:#223;border-color:#cfd6dd}
.btn.accent-outline{background:transparent;border-color:var(--ss-purple);color:var(--ss-purple)}

/* Tiny "oomph": accent underlines on focusables */
a:not(.btn){text-decoration:none;position:relative}
a:not(.btn):after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:linear-gradient(90deg,var(--ss-purple),var(--ss-blue));
  transition:width .18s ease
}
a:not(.btn):hover:after{width:100%}