/* ============================================================
   StickerBell site header + footer — one family, three page kinds (2026-10-12).
   Markup and the rules for which page gets what: includes/site_chrome.php.
   Behaviour: site-chrome.js.

   One look: a WHITE 64px header (the help centre's height) and a DARK footer.
   Contents differ: .is-marketing (the homepage), .is-shared (pages anyone can
   open: logo + Return), .is-app (signed-in pages), .is-minimal (sign-in pages:
   logo only); footer full (homepage) or .is-compact (one row, everywhere else).
   Every rule is scoped to .sbh / .sbf and sets what it relies on, so a page's
   own stylesheet (dashboard.css, site.css, the legal pages) cannot restyle it.
   ============================================================ */

/* THE FRAME — one max width and one gutter for the header, the footer and
   every page's content, so their left and right edges line up (owner, 2026-10-12:
   the logo, the page title and Add Doorbell sat on three different edges).
   dashboard.css (.page-header, .page-content) and site.css (.wrap) use these
   too. 1120px is the homepage's original content width. */
:root { --sb-frame: 1120px; --sb-gutter: 20px; }
@media (max-width: 760px) { :root { --sb-gutter: 16px; } }
@media (max-width: 380px) { :root { --sb-gutter: 12px; } }

@font-face {
  font-family: "Outfit";
  src: url("../site/fonts/Outfit-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

.sbh, .sbf {
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
}
.sbh *, .sbf * { box-sizing: border-box; }
.sbh a:focus-visible, .sbf a:focus-visible, .sbh-menu:focus-visible {
  outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px;
}

/* ---- Header ---------------------------------------------------------- */
.sbh {
  position: sticky; top: 0; z-index: 50;          /* under every modal (100) */
  background: #fff; border-bottom: 1px solid #e2e8f0;
  padding-top: env(safe-area-inset-top, 0px);
}
.sbh-bar {
  max-width: var(--sb-frame); height: 64px; margin: 0 auto; padding: 0 var(--sb-gutter);
  display: flex; align-items: center; gap: 28px;
}
.sbh-logo { display: flex; align-items: center; gap: .5rem; flex: none; text-decoration: none; }
.sbh-logo > img { height: 30px; width: auto; display: block; }
.sbh-logo > img.sbh-mark { width: 30px; height: 30px; }   /* homepage: mark + animated wordmark */
.sbh-logo > svg { height: 22px; width: auto; display: block; }

.sbh-nav { display: flex; align-items: stretch; gap: 28px; height: 100%; }
.sbh-nav a {
  position: relative; display: flex; align-items: center;
  font-size: 15px; font-weight: 400; color: #475569; text-decoration: none;
}
.sbh-nav a:hover { color: #0f172a; }

.sbh-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.sbh-signin { font-size: 15px; color: #475569; text-decoration: none; padding: 8px 4px; }
.sbh-signin:hover { color: #0f172a; }
.sbh-cta {
  font-size: 15px; font-weight: 600; color: #fff; text-decoration: none; white-space: nowrap;
  background: #BE0126; padding: 9px 18px; border-radius: 999px;
  box-shadow: 0 6px 16px -8px rgba(190, 1, 38, .6);
}
.sbh-cta:hover { background: #96011e; color: #fff; }
/* Signed in on a public page: the way back into the app, not a sales button. */
.sbh-cta.is-dark { background: #0f172a; box-shadow: none; }
.sbh-cta.is-dark:hover { background: #1e293b; }
/* Shared pages: back to the calling page (site-chrome.js), else the homepage. */
.sbh-return {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1px solid #e2e8f0; border-radius: 999px; background: #fff;
  font-size: 15px; font-weight: 500; color: #334155; text-decoration: none; white-space: nowrap;
}
.sbh-return:hover { background: #f1f5f9; color: #0f172a; }
.sbh-menu {
  display: none; width: 40px; height: 40px; padding: 0; place-items: center;
  border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #0f172a; cursor: pointer;
}

.sbh-user {
  display: flex; align-items: center; gap: 9px; padding: 4px 12px 4px 4px; border-radius: 999px;
  margin-right: -12px;   /* the hover pill reaches into the gutter, so the NAME ends on the frame edge */
  font-size: 15px; color: #334155; text-decoration: none;
}
.sbh-user:hover { background: #f1f5f9; }
.sbh-av {
  width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: #e2e8f0; color: #0f172a; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.sbh-name { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Public pages print both right-hand sets; .is-in (set before paint by the
   inline script) shows the signed-in one. */
.sbh .sbh-in { display: none; }
.sbh.is-in .sbh-out { display: none; }
.sbh.is-in .sbh-in { display: inline-block; }

/* The phone menu (public pages) */
.sbh-drawer:not([hidden]) {
  display: grid; padding: 4px 16px 14px; border-top: 1px solid #f1f5f9; background: #fff;
}
.sbh-drawer a {
  padding: 12px 4px; border-bottom: 1px solid #f1f5f9;
  font-size: 16px; color: #334155; text-decoration: none;
}
.sbh-drawer a:last-child { border-bottom: 0; }

@media (max-width: 760px) {
  .sbh-bar { gap: 12px; }
  .sbh-logo > img { height: 26px; }
  .sbh.is-marketing .sbh-nav, .sbh .sbh-signin { display: none; }
  .sbh.is-marketing .sbh-menu { display: grid; }
}
@media (min-width: 761px) { .sbh-drawer { display: none !important; } }
@media (max-width: 560px) { .sbh-name { display: none; } .sbh-user { padding-right: 4px; margin-right: -4px; } }
@media (max-width: 380px) {
  .sbh-bar { gap: 8px; }
  .sbh-logo > img { height: 22px; }
  .sbh-logo > img.sbh-mark { width: 24px; height: 24px; }   /* the homepage's mark + wordmark */
  .sbh-logo > svg { height: 17px; }
  .sbh-cta { padding: 8px 13px; font-size: 14px; }
  .sbh-menu { width: 36px; height: 36px; }
}

/* ---- Footer ---------------------------------------------------------- */
.sbf { background: #0f172a; color: #cbd5e1; padding-bottom: env(safe-area-inset-bottom, 0px); }
.sbf-in { max-width: var(--sb-frame); margin: 0 auto; padding: 44px var(--sb-gutter) 26px; display: grid; gap: 30px; }
.sbf-cols {
  display: grid; gap: 28px;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
}
.sbf-brand { display: grid; gap: 12px; align-content: start; }
.sbf-brand img { height: 28px; width: auto; display: block; }
.sbf-brand p { margin: 0; max-width: 28ch; font-size: 14px; line-height: 1.5; color: #94a3b8; }
.sbf h2 {
  margin: 0 0 12px; font-size: 12px; font-weight: 600; line-height: 1.3;
  letter-spacing: .08em; text-transform: uppercase; color: #8291a7;
}
.sbf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sbf a { font-size: 14px; color: #e2e8f0; text-decoration: none; }
.sbf a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* Blog: a place held for it, greyed out until it exists (owner, 2026-10-12). */
.sbf-soon { font-size: 14px; color: #64748b; cursor: default; }
.sbf-soon small {
  margin-left: 6px; padding: 1px 6px; border: 1px solid #334155; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px;
}
.sbf-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px;
  border-top: 1px solid #1e293b; padding-top: 18px; font-size: 13px; color: #8291a7;
}

/* Compact: one row for task and app pages. Still every link a page needs:
   Guides, FAQ, Contact, Blog (soon), Privacy, Terms. */
.sbf.is-compact .sbf-row {
  max-width: var(--sb-frame); margin: 0 auto; padding: 18px var(--sb-gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px;
}
.sbf-copy { font-size: 13px; color: #8291a7; }
.sbf.is-compact nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.sbf.is-compact nav a, .sbf.is-compact .sbf-soon { font-size: 13.5px; }

@media (max-width: 860px) {
  .sbf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  .sbf-brand { grid-column: 1 / -1; }
  .sbf-in { padding-top: 34px; }
}

/* ---- The help centre on the site frame ---------------------------------
   The help module (2.4.0+) prints this header and footer in place of its own
   and marks the body .help-host-header. Its own column is a 1100px --max with
   1.25rem gutters; ours is --sb-frame / --sb-gutter. These rules put its tab
   strip and content on OUR frame, so the tab boxes and the text line up with
   the logo, Return and the footer. (Since 2.4.1 the module's tab strip and
   content share one geometry; these stay needed because our frame differs.)
   Module class names as of 2.4.1 (.help-tabs-inner, .help-content): re-check
   after a module copy. */
body.help-host-header .help-tabs-inner,
body.help-host-header .help-content { max-width: var(--sb-frame); padding-inline: var(--sb-gutter); }

/* ---- Print: a printed guide, policy or terms page is the document, not the site chrome. */
@media print {
  .sbh, .sbf { display: none !important; }
}