/* ============================================================
   Eco Bizzy — shared site chrome (header + footer).
   Self-contained + theme-aware so EVERY page (marketing + the tool)
   renders an identical header/footer. Nav groups are pure-CSS dropdowns
   (hover + focus-within); the mobile menu is a pure-CSS checkbox.
   Uses its own --c-* variables + .eb-* classes so it never collides
   with a page's own styles.
   ============================================================ */
.eb-header, .eb-footer{
  --c-bg:#101d15; --c-ink:#f0ece1; --c-dim:#9aada1; --c-line:#2c453d;
  --c-gold:#d3ae6a; --c-gold-ink:#101d15; --c-menu:#16271c;
  font-family:'Archivo', system-ui, -apple-system, sans-serif;
  box-sizing:border-box;
}
.eb-header *, .eb-footer *{ box-sizing:border-box; }
:root[data-theme="light"] .eb-header, :root[data-theme="light"] .eb-footer{
  --c-bg:#ffffff; --c-ink:#192d28; --c-dim:#5c6b62; --c-line:#e6e0d1;
  --c-gold:#8f7130; --c-gold-ink:#ffffff; --c-menu:#ffffff;
}

/* ---------- accessibility: skip link + focus rings (WCAG 2.4.1, 2.4.7) ---------- */
.skip-link{
  position:fixed; top:8px; left:8px; z-index:200; transform:translateY(-160%);
  background:#101d15; color:#fff; padding:11px 18px; border-radius:8px;
  font-family:'Space Mono', ui-monospace, monospace; font-size:13px; text-decoration:none;
  box-shadow:0 8px 30px -8px rgba(0,0,0,.6); transition:transform .18s ease;
}
:root[data-theme="light"] .skip-link{ background:#192d28; color:#fff; }
.skip-link:focus{ transform:translateY(0); outline:2px solid #d3ae6a; outline-offset:2px; }

.eb-header a:focus-visible, .eb-header button:focus-visible,
.eb-footer a:focus-visible, .eb-burger:focus-visible{
  outline:2px solid var(--c-gold); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce){
  .eb-toggle, .eb-cta, .eb-menu, .eb-nav > a, .eb-trigger, .eb-fcol a{ transition:none !important; }
  .eb-toggle:hover, .eb-toggle.spin{ transform:none; }
}

/* ---------- header ---------- */
.eb-header{
  position:sticky; top:0; z-index:80; background:var(--c-bg);
  border-bottom:1px solid var(--c-line); color:var(--c-ink); backdrop-filter:none; padding:0;
}
.eb-wrap{ max-width:1200px; margin:0 auto; padding:0 28px; height:64px; display:flex; align-items:center; gap:18px; position:relative; }
.eb-brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:19px; letter-spacing:-.01em; text-decoration:none; color:var(--c-ink); }
.eb-brand img{ width:28px; height:28px; object-fit:contain; display:block; }
.eb-brand .l-dark{ display:block; } .eb-brand .l-light{ display:none; }
:root[data-theme="light"] .eb-brand .l-dark{ display:none; }
:root[data-theme="light"] .eb-brand .l-light{ display:block; }

.eb-nav{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.eb-nav > a, .eb-trigger{
  font-family:'Space Mono', ui-monospace, monospace; font-size:12.5px; letter-spacing:.03em;
  color:var(--c-dim); text-decoration:none; background:none; border:0; cursor:pointer;
  padding:9px 12px; border-radius:6px; display:inline-flex; align-items:center; gap:6px;
  transition:color .2s ease, background .2s ease; white-space:nowrap;
}
.eb-nav > a:hover, .eb-trigger:hover, .eb-item:hover .eb-trigger, .eb-item:focus-within .eb-trigger{ color:var(--c-ink); }

/* dropdown group */
.eb-item{ position:relative; }
.eb-menu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:196px; background:var(--c-menu);
  border:1px solid var(--c-line); border-radius:10px; padding:7px; display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s ease, transform .16s ease;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.55); z-index:90;
}
/* transparent bridge across the visual gap so moving the cursor from the
   trigger into the menu doesn't leave .eb-item and snap it shut */
.eb-menu::before{ content:''; position:absolute; left:0; right:0; top:-10px; height:10px; }
.eb-item:hover .eb-menu, .eb-item:focus-within .eb-menu,
.eb-item.open .eb-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.eb-menu a{
  font-family:'Space Mono', ui-monospace, monospace; font-size:12.5px; color:var(--c-dim); text-decoration:none;
  padding:9px 11px; border-radius:6px; transition:color .15s ease, background .15s ease; white-space:nowrap;
}
.eb-menu a:hover{ color:var(--c-ink); background:color-mix(in srgb, var(--c-gold) 15%, transparent); }

.eb-cta{
  font-family:'Space Mono', ui-monospace, monospace; font-size:12.5px; font-weight:700; letter-spacing:.03em;
  background:transparent; color:var(--c-gold); text-decoration:none; padding:9px 16px;
  border:2px solid var(--c-gold); border-radius:3px; margin-left:6px;
  transition:background .2s ease, color .2s ease, transform .2s ease; white-space:nowrap;
}
.eb-cta:hover{ background:color-mix(in srgb, var(--c-gold) 15%, transparent); transform:translateY(-1px); }

.eb-toggle{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto; margin-left:8px; padding:0;
  background:color-mix(in srgb, var(--c-gold) 18%, var(--c-menu)); border:1.5px solid var(--c-gold);
  color:var(--c-ink); cursor:pointer; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), background .3s ease, border-color .3s ease, box-shadow .25s ease;
}
.eb-toggle:hover{ transform:rotate(-18deg) scale(1.1); background:color-mix(in srgb, var(--c-gold) 30%, var(--c-menu)); box-shadow:0 0 0 4px color-mix(in srgb, var(--c-gold) 22%, transparent); }
.eb-toggle:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-gold); }
.eb-toggle.spin{ transform:rotate(360deg) scale(1.05); }

/* mobile menu (pure CSS) */
.eb-navtoggle{ position:absolute; opacity:0; pointer-events:none; }
.eb-burger{ display:none; margin-left:auto; width:40px; height:40px; border:1px solid var(--c-line); border-radius:8px;
  color:var(--c-ink); cursor:pointer; font-size:20px; align-items:center; justify-content:center; }
@media (max-width:880px){
  .eb-burger{ display:flex; }
  .eb-nav{
    position:absolute; top:64px; left:0; right:0; margin:0; background:var(--c-bg);
    border-bottom:1px solid var(--c-line); flex-direction:column; align-items:stretch; gap:2px;
    padding:12px 24px 22px; display:none;
  }
  .eb-navtoggle:checked ~ .eb-nav{ display:flex; }
  .eb-item{ position:static; }
  .eb-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0;
    background:transparent; padding:0 0 6px 12px; min-width:0; }
  .eb-trigger{ pointer-events:none; color:var(--c-ink); font-weight:700; padding-bottom:2px; }
  .eb-cta{ margin:10px 0 0; text-align:center; }
  .eb-toggle{ position:absolute; top:13px; right:74px; margin:0; }
}

/* ---------- footer ---------- */
.eb-footer{ background:var(--c-bg); border-top:1px solid var(--c-line); color:var(--c-ink); margin-top:64px; padding:0; }
.eb-fwrap{ max-width:1200px; margin:0 auto; padding:52px 28px 32px; display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:28px; }
.eb-fbrand .eb-brand{ margin-bottom:14px; }
.eb-fbrand p{ color:var(--c-dim); font-size:14px; line-height:1.6; max-width:330px; margin:0; }
.eb-fcol h4{ font-family:'Space Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-dim); margin:0 0 14px; font-weight:400; }
.eb-fcol a{ display:block; color:var(--c-dim); text-decoration:none; font-size:14.5px; margin-bottom:11px; transition:color .2s ease; }
.eb-fcol a:hover{ color:var(--c-ink); }
.eb-fbot{ max-width:1200px; margin:0 auto; padding:20px 28px; border-top:1px solid var(--c-line);
  font-family:'Space Mono', ui-monospace, monospace; font-size:12.5px; color:var(--c-dim);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
@media (max-width:760px){ .eb-fwrap{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .eb-fwrap{ grid-template-columns:1fr; } }