/* omnisigns.app -- the site HEADER and FOOTER only (2026-10-02), split out of site.css.

   WHY A SEPARATE FILE. support.html, contact.html and web-kiosk.html are standalone pages with
   their own styles, and site.css would restyle them wholesale (body, h1, .wrap, .card...). They
   still need the site's header and footer -- Gary: Support from the header "loses the header to
   navigate back", and the footer every other page has. So the chrome lives here, self-contained:
   its own colours on its own elements, and .cwrap rather than .wrap, which every one of those
   pages already defines differently. site.js writes the markup; this file is all it needs. */
.site-header,.site-footer{
  --c-bg:#04213f; --c-panel:#00295c; --c-line:#1f5aa8; --c-text:#ffffff; --c-dim:#bcdcff;
  --c-accent:#3fa0ff; --c-accent2:#0060c2;
  font-family:Arial,'Segoe UI',sans-serif;line-height:1.55;text-align:left;
}
.site-header .cwrap,.site-footer .cwrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px;box-sizing:border-box;}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(4,33,63,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(31,90,168,.55);}
.site-header .cwrap{display:flex;align-items:center;gap:22px;height:68px;position:relative;}
.site-header .logo img{height:40px;width:auto;display:block;}
.site-nav{display:flex;gap:4px;margin-left:auto;align-items:center;}
.site-nav a{color:var(--c-dim);text-decoration:none;font-size:15px;font-weight:700;padding:8px 12px;border-radius:8px;white-space:nowrap;}
.site-nav a:hover{color:var(--c-text);background:var(--c-panel);}
.site-nav a.active{color:var(--c-text);}
.site-nav a.active::after{content:'';display:block;height:2px;background:var(--c-accent);border-radius:2px;margin-top:3px;}
.site-nav .nav-signin{border:1px solid var(--c-line);margin-left:8px;}
.site-nav .nav-cta{background:var(--c-accent2);color:#fff;margin-left:4px;}
.site-nav .nav-cta:hover{background:var(--c-accent);}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--c-line);color:var(--c-text);
  border-radius:8px;padding:8px 12px;font-size:15px;font-weight:700;cursor:pointer;width:auto;}
@media (max-width:1040px){ /* the full menu needs ~1015px since OmniSigns joined it */
  .nav-toggle{display:block;}
  .site-nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--c-bg);border-bottom:1px solid var(--c-line);padding:10px 24px 18px;gap:2px;}
  .site-nav.open{display:flex;}
  .site-nav .nav-signin,.site-nav .nav-cta{margin:6px 0 0;text-align:center;}
  .site-nav a.active::after{display:none;}
}

/* ---------------------------------------------------------------- footer */
/* footer.site-footer, and opacity/letter-spacing/margin set outright: the standalone pages have a
   bare `footer{...}` rule of their own (small, faded) that would otherwise leak into this one. */
footer.site-footer{border-top:1px solid rgba(31,90,168,.55);padding:36px 0 44px;margin:20px 0 0;font-size:14px;
  color:var(--c-dim);opacity:1;letter-spacing:normal;width:100%;}
.site-footer .cwrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;}
.site-footer h4{color:var(--c-text);font-size:13px;letter-spacing:1px;text-transform:uppercase;margin:0 0 10px;}
.site-footer a{color:var(--c-dim);text-decoration:none;display:block;padding:3px 0;}
.site-footer a:hover{color:var(--c-text);text-decoration:underline;}
.site-footer .legal{grid-column:1 / -1;font-size:12px;opacity:.7;border-top:1px solid rgba(31,90,168,.35);padding-top:18px;}
/* The Privacy Policy and Terms links sit inside that line (2026-10-14): inline, not the columns' blocks. */
.site-footer .legal a{display:inline;padding:0;color:inherit;text-decoration:underline;}
@media (max-width:760px){ .site-footer .cwrap{grid-template-columns:1fr 1fr;} }

/* ---------------------------------------------------------------- standalone pages */
/* support/contact/web-kiosk centre a column in a padded flex body. With the chrome, the body
   stacks header / page / footer edge to edge, and the page column keeps its own width and
   side padding. Their own small copyright line gives way to the site footer. */
body.has-site-chrome{flex-direction:column;align-items:stretch;padding:0;}
body.has-site-chrome > .wrap{align-self:center;padding:40px 24px 24px;box-sizing:border-box;}
body.has-site-chrome .page-footer{display:none;}