/* ==========================================================================
   ECJ Omnibar — slim sticky search bar shared by EatCookJoy playbook pages
   Uses the playbook design tokens (cream / terracotta / ink / gold,
   Playfair Display + Inter + Space Grotesk). Both /eatcookjoy-Playbook/ and
   /eatcookjoy-playbook-US-SF/ mount the same component.
   ========================================================================== */

:root{
  --ecj-cream:#FBF7F1;
  --ecj-cream-soft:#F4EDE2;
  --ecj-terracotta:#C45A3D;
  --ecj-terracotta-d:#A4452C;
  --ecj-ink:#16110D;
  --ecj-charcoal:#2A2622;
  --ecj-mute:#6E665C;
  --ecj-mute-l:#8B8275;
  --ecj-line:#E4DDD0;
  --ecj-line-2:#EFE8DC;
  --ecj-gold:#D9A86C;
  --ecj-paper:#FFFFFF;
}

.ecj-omnibar{
  position:sticky; top:0; z-index:95;
  background:rgba(251,247,241,0.92);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--ecj-line);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ecj-ink);
  isolation:isolate;
}

.ecj-omnibar__row{
  max-width:1280px; margin:0 auto; padding:10px 22px;
  display:flex; align-items:center; gap:16px; min-height:68px;
}

.ecj-omnibar__brand{
  display:flex; align-items:baseline; gap:10px;
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-weight:800; font-size:19px; color:var(--ecj-ink);
  letter-spacing:-0.012em; text-decoration:none; white-space:nowrap; flex-shrink:0;
  padding-right:14px; border-right:1px solid var(--ecj-line);
}
.ecj-omnibar__brand em{ color:var(--ecj-terracotta); font-style:italic; }
.ecj-omnibar__brand .ecj-tag{
  font-family:"Space Grotesk","Inter",sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--ecj-mute);
  position:relative; top:-1px;
}

.ecj-omnibar__search{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:12px;
  background:var(--ecj-paper);
  border:1px solid var(--ecj-line); border-radius:14px;
  padding:10px 10px 10px 18px;
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 6px 18px rgba(20,16,12,.05);
  transition:border-color .18s, box-shadow .18s;
}
.ecj-omnibar__search:focus-within{
  border-color:var(--ecj-terracotta);
  box-shadow:0 4px 18px rgba(196,90,61,.18);
}
.ecj-omnibar__search > svg{
  width:18px; height:18px; color:var(--ecj-mute); flex-shrink:0;
}
.ecj-q{
  flex:1; min-width:0;
  border:none; background:none; outline:none;
  font:inherit; font-size:16px; color:var(--ecj-ink);
  padding:9px 0;
}
.ecj-q::placeholder{ color:var(--ecj-mute); font-style:italic; }
.ecj-mic{
  border:none; background:transparent; cursor:pointer;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ecj-mute); flex-shrink:0;
  transition:background .15s, color .15s;
}
.ecj-mic svg{ width:14px; height:14px; }
.ecj-mic:hover{ color:var(--ecj-terracotta); background:var(--ecj-cream-soft); }
.ecj-mic.on{ color:#fff; background:var(--ecj-terracotta); animation:ecj-pulse 1.2s ease-in-out infinite; }
@keyframes ecj-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(196,90,61,.5); }
  50%{ box-shadow:0 0 0 7px rgba(196,90,61,0); }
}

.ecj-omnibar__cta{
  background:var(--ecj-ink); color:#fff;
  padding:8px 16px; border-radius:99px;
  font-size:12px; font-weight:600; letter-spacing:0.01em;
  white-space:nowrap; text-decoration:none; flex-shrink:0;
  transition:background .15s, transform .15s;
}
.ecj-omnibar__cta:hover{ background:var(--ecj-terracotta); transform:translateY(-1px); }
.ecj-omnibar__cta::after{ content:" →"; }

/* chips row */
.ecj-omnibar__chips{
  max-width:1280px; margin:0 auto; padding:0 22px 10px;
  display:flex; gap:6px; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.ecj-omnibar__chips::-webkit-scrollbar{ display:none; }
.ecj-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"Inter",sans-serif; font-size:11.5px; font-weight:600; letter-spacing:0.01em;
  color:var(--ecj-charcoal); background:var(--ecj-paper);
  border:1px solid var(--ecj-line); border-radius:99px;
  padding:5px 12px; text-decoration:none; white-space:nowrap; flex-shrink:0;
  transition:color .15s, border-color .15s, background .15s, transform .12s;
}
.ecj-chip:hover{
  color:var(--ecj-terracotta);
  border-color:var(--ecj-terracotta);
  transform:translateY(-1px);
}
.ecj-chip .ic{ font-size:13px; line-height:1; }
.ecj-chip.lock{
  background:#FCF3E1; border-color:var(--ecj-gold); color:#8A6A2B;
}
.ecj-chip.lock:hover{ background:var(--ecj-gold); color:#3a2c10; border-color:var(--ecj-gold); }

/* dropdown */
.ecj-omnibar__dropdown{
  position:absolute; left:0; right:0; top:100%;
  display:none;
  background:var(--ecj-paper);
  border-top:1px solid var(--ecj-line);
  box-shadow:0 22px 50px rgba(20,16,12,.16);
  max-height:min(60vh, 480px); overflow-y:auto;
  z-index:2;
}
.ecj-omnibar__dropdown.open{ display:block; }
.ecj-omnibar__dropdown-inner{
  max-width:1280px; margin:0 auto; padding:6px 14px 10px;
}
.ecj-result{
  display:flex; align-items:center; gap:14px;
  padding:11px 12px; border-radius:10px;
  text-decoration:none; color:var(--ecj-charcoal);
  border-bottom:1px solid var(--ecj-line-2);
}
.ecj-result:last-child{ border-bottom:none; }
.ecj-result:hover, .ecj-result.sel{ background:var(--ecj-cream-soft); }
.ecj-result .r-ic{
  font-size:17px; width:26px; height:26px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--ecj-cream-soft); border-radius:8px;
}
.ecj-result .r-body{ flex:1; min-width:0; }
.ecj-result .r-t{
  font-size:14px; font-weight:600; color:var(--ecj-ink); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ecj-result .r-c{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ecj-mute); margin-top:2px;
}
.ecj-result mark{
  background:var(--ecj-gold); color:var(--ecj-ink);
  padding:0 2px; border-radius:2px;
}
.ecj-result .r-arr{
  font-size:14px; color:var(--ecj-mute-l); flex-shrink:0;
  transition:transform .15s;
}
.ecj-result:hover .r-arr{ color:var(--ecj-terracotta); transform:translateX(3px); }

.ecj-section-label{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size:10px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ecj-mute-l);
  padding:14px 12px 6px;
}
.ecj-section-label:first-child{ padding-top:8px; }

.ecj-empty{
  padding:32px 16px; text-align:center; color:var(--ecj-mute);
  font-family:"Playfair Display",serif; font-style:italic; font-size:18px;
}

@media(max-width:760px){
  .ecj-omnibar__row{ height:48px; gap:10px; padding:0 14px; }
  .ecj-omnibar__brand{ font-size:16px; padding-right:10px; }
  .ecj-omnibar__brand .ecj-tag{ display:none; }
  .ecj-omnibar__cta{ display:none; }
  .ecj-omnibar__chips{ padding:0 14px 8px; }
  .ecj-q{ font-size:14px; }
}