/* ==========================================================================
   Boyer Home Automation - shared brand layer
   Single source of truth for brand tokens, type, the logo lockup, and the
   top bar / drawer / footer chrome. Consumed by:
     - the marketing site (this repo: index.html, clients/index.html)
     - the client portal documents (rockwell-rebuild/scripts/generate/site.py,
       which can <link> this file from https://boyerhomeautomation.com/assets/bha-brand.css)
   Keep classnames in sync with site.py so one stylesheet themes both.
   Written content: no em dashes.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* warm brand palette (the shared chrome is always this warm-dark treatment,
     so the header reads identically on the marketing site and the portal) */
  --bha-bg:        #15110C;
  --bha-surface:   #1E1812;
  --bha-surface-2: #261F17;
  --bha-rule:      #34291D;
  --bha-ink:       #F3ECDF;
  --bha-muted:     #B6A892;
  --bha-faint:     #7E7263;
  --bha-accent:    #E9B872;
  --bha-accent-deep:#C8954B;
  --bha-hover:     #241C15;
  --bha-scrim:     rgba(8,6,4,0.62);
  --bha-shadow:    0 18px 50px rgba(0,0,0,0.5);

  --bha-maxw: 1180px;
  --bha-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ----------
   box-sizing is scoped to the brand chrome, not a global * reset, so this file
   is safe to link into the client documents (rockwell-rebuild) without shifting
   their own layouts. Pages that want a global reset set it in their own style. */
.bha-bar, .bha-bar *, .bha-drawer, .bha-drawer *, .bha-footer, .bha-footer *,
.bha-logo, .bha-logo *, .bha-btn{box-sizing:border-box}
.bha-wrap{width:100%;max-width:var(--bha-maxw);margin:0 auto;padding:0 28px;box-sizing:border-box}

.bha-eyebrow{
  font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bha-accent); font-weight:500;
}
.bha-display{font-family:"Space Grotesk",sans-serif; font-weight:500; line-height:1.05; letter-spacing:-.015em}

/* ---------- logo lockup (the one wordmark, used everywhere) ---------- */
.bha-logo{display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--bha-ink)}
.bha-logo-mark{width:30px; height:30px; flex:none; color:var(--bha-ink); display:block}
.bha-logo-text{line-height:1}
.bha-logo-word{
  font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:1.02rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bha-ink);
  display:inline-flex; align-items:flex-start; line-height:1;
}
.bha-logo-dot{width:.3em; height:.3em; border-radius:50%; background:var(--bha-accent); margin-left:.18em; margin-top:.08em}
.bha-logo-sub{
  display:block; font-family:"JetBrains Mono",monospace; font-size:.52rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--bha-faint); margin-top:4px;
}
/* graceful fallback: if site.py still emits .bha-name text instead of the lockup,
   it at least picks up the brand face and color */
.bha-name{
  font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:1.05rem;
  letter-spacing:.06em; color:var(--bha-ink); text-decoration:none;
}

/* ---------- top bar ---------- */
.bha-bar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px;
  background:linear-gradient(to bottom, rgba(21,17,12,.94), rgba(21,17,12,.72));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bha-rule);
  padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px));
  padding-top:calc(10px + env(safe-area-inset-top,0px));
}
.bha-here{
  font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bha-muted); padding-left:12px; border-left:1px solid var(--bha-rule); align-self:center;
}
.bha-bar-end{margin-left:auto; display:flex; align-items:center; gap:10px}
.bha-barlink{
  font-family:"Hanken Grotesk",sans-serif; font-size:.86rem; font-weight:500; color:var(--bha-ink);
  text-decoration:none; padding:8px 14px; border:1px solid var(--bha-accent); border-radius:999px; transition:.2s ease;
}
.bha-barlink:hover{background:var(--bha-accent); color:#1a130b}

.bha-burger{
  flex:none; display:inline-grid; place-items:center; width:40px; height:40px; margin:0; padding:0;
  border:1px solid transparent; border-radius:9px; background:transparent; color:var(--bha-ink); cursor:pointer;
}
.bha-burger:hover{background:var(--bha-hover)}
.bha-burger svg{width:22px; height:22px}

/* ---------- drawer ---------- */
.bha-scrim{position:fixed; inset:0; z-index:1000; background:var(--bha-scrim); opacity:0; visibility:hidden}
.bha-drawer{
  position:fixed; z-index:1001; top:0; bottom:0; left:0; width:min(330px,86vw); overflow-y:auto;
  background:var(--bha-surface); color:var(--bha-ink); box-shadow:var(--bha-shadow);
  transform:translateX(-102%); visibility:hidden;
  padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(18px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));
  font:400 15px/1.45 "Hanken Grotesk","Segoe UI",sans-serif;
}
.bha-open .bha-scrim{opacity:1; visibility:visible}
.bha-open .bha-drawer{transform:none; visibility:visible}
@media(prefers-reduced-motion:no-preference){
  .bha-scrim{transition:opacity 160ms ease, visibility 160ms}
  .bha-drawer{transition:transform 210ms var(--bha-ease), visibility 210ms}
  .bha-open .bha-drawer{transition:transform 210ms var(--bha-ease), visibility 0s}
}
.bha-dhead{display:flex; align-items:center; gap:8px; padding:0 0 14px 2px; margin-bottom:8px; border-bottom:1px solid var(--bha-rule)}
.bha-close{
  margin-left:auto; width:36px; height:36px; border:0; border-radius:8px; background:transparent;
  color:var(--bha-muted); font:600 1.5rem/1 sans-serif; cursor:pointer;
}
.bha-close:hover{background:var(--bha-hover); color:var(--bha-ink)}
.bha-group{
  font:600 .7rem/1 "JetBrains Mono",monospace; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bha-faint); margin:18px 0 6px 10px;
}
.bha-drawer ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.bha-drawer a{
  display:block; padding:10px 10px 10px 12px; border-radius:9px; color:var(--bha-ink);
  text-decoration:none; border-left:3px solid transparent;
}
.bha-drawer a:hover{background:var(--bha-hover)}
.bha-drawer a[aria-current="page"]{background:var(--bha-hover); border-left-color:var(--bha-accent)}
.bha-drawer a b{display:block; font-weight:600}
.bha-drawer a span{display:block; font-size:.82rem; color:var(--bha-muted); margin-top:1px}

/* ---------- buttons ---------- */
.bha-btn{
  display:inline-block; text-decoration:none; font-family:"Hanken Grotesk",sans-serif; font-weight:500;
  font-size:.95rem; padding:13px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:.25s ease;
}
.bha-btn-primary{background:var(--bha-accent); color:#1a130b}
.bha-btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px -10px var(--bha-accent)}
.bha-btn-ghost{border-color:var(--bha-rule); color:var(--bha-ink)}
.bha-btn-ghost:hover{border-color:var(--bha-accent); color:var(--bha-accent)}

/* ---------- footer ---------- */
.bha-footer{border-top:1px solid var(--bha-rule); padding:40px 0; background:var(--bha-bg); position:relative; z-index:2}
.bha-footer-inner{
  width:100%; max-width:var(--bha-maxw); margin:0 auto; padding:0 28px;
  display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center; justify-content:space-between;
  font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.06em; color:var(--bha-faint);
}
.bha-footer-inner a{color:var(--bha-muted); text-decoration:none}
.bha-footer-inner a:hover{color:var(--bha-accent)}

/* focus ring scoped to chrome so it does not override client-document focus styles */
.bha-bar :focus-visible, .bha-drawer :focus-visible, .bha-footer :focus-visible,
.bha-burger:focus-visible, .bha-barlink:focus-visible{outline:2px solid var(--bha-accent); outline-offset:3px; border-radius:4px}

@media(max-width:560px){
  .bha-wrap,.bha-footer-inner{padding-left:20px; padding-right:20px}
  .bha-here{display:none}
}