/* ============================================================================
 * Nav search — header icon button + command-palette overlay + mobile-menu field.
 * Own file (handle `cranium-nav-search`) because the October / December homepage
 * takeovers dequeue style.css and main.js but still render header.php.
 * Self-contained: literal colours, own resets, selectors scoped to #header /
 * .cr-search / .mobile-menu so they out-rank the takeovers' frozen chrome CSS.
 * ------------------------------------------------------------------------- */

/* ---- header icon button ---- */
#header .nav-search-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;padding:0;margin:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(205,130,255,.22);background:rgba(255,255,255,.035);color:#a59fc4;
  -webkit-appearance:none;appearance:none;font:inherit;line-height:0;
  transition:color .3s,border-color .3s,background .3s,box-shadow .45s cubic-bezier(.19,1,.22,1),transform .45s cubic-bezier(.19,1,.22,1)}
#header .nav-search-btn svg{width:17px;height:17px;display:block;transition:transform .45s cubic-bezier(.19,1,.22,1)}
#header .nav-search-btn:hover,#header .nav-search-btn:focus-visible,#header .nav-search-btn[aria-expanded="true"]{
  color:#fff;border-color:rgba(205,130,255,.62);background:rgba(135,82,250,.16);outline:none;
  box-shadow:0 0 0 4px rgba(135,82,250,.12),0 8px 30px rgba(135,82,250,.38)}
#header .nav-search-btn:hover svg{transform:rotate(-12deg) scale(1.06)}
#header .nav-right .nav-search-btn{margin-right:-6px}
#header .nav-search-btn--m{display:none;margin-left:auto;margin-right:6px}
@media(max-width:920px){#header .nav-search-btn--m{display:inline-flex}}

/* ---- overlay ---- */
html.crs-lock,html.crs-lock body{overflow:hidden}
.cr-search{position:fixed;inset:0;z-index:1200;visibility:hidden;pointer-events:none;
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;transition:visibility 0s linear .5s}
.cr-search.open{visibility:visible;pointer-events:auto;transition:visibility 0s}
.cr-search *,.cr-search *::before,.cr-search *::after{box-sizing:border-box}
.cr-search .crs-scrim{position:absolute;inset:0;background:rgba(4,2,12,.74);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  opacity:0;transition:opacity .45s cubic-bezier(.19,1,.22,1)}
.cr-search .crs-scrim::after{content:"";position:absolute;left:50%;top:-20vh;width:120vw;height:70vh;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(105,40,250,.32),rgba(69,0,249,.08) 60%,transparent);pointer-events:none}
.cr-search.open .crs-scrim{opacity:1}

.cr-search .crs-panel{position:relative;width:min(760px,calc(100% - 32px));margin:clamp(76px,14vh,148px) auto 0;
  padding:32px 34px 30px;border-radius:26px;color:#fff;
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(69,0,249,.30),transparent 55%),
    radial-gradient(90% 120% at 100% 100%,rgba(205,130,255,.16),transparent 60%),
    rgba(10,5,24,.95);
  border:1px solid rgba(205,130,255,.22);
  box-shadow:0 50px 140px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.05),0 0 90px rgba(105,40,250,.28);
  opacity:0;transform:translateY(-22px) scale(.975);
  transition:opacity .4s cubic-bezier(.19,1,.22,1),transform .7s cubic-bezier(.19,1,.22,1)}
.cr-search.open .crs-panel{opacity:1;transform:none}
.cr-search .crs-panel::before{content:"";position:absolute;left:40px;right:40px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,#cd82ff 30%,#8752fa 60%,transparent)}

.cr-search .crs-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px}
.cr-search .crs-kicker{display:inline-flex;align-items:center;gap:10px;margin:0;font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#cd82ff}
.cr-search .crs-kicker i{width:7px;height:7px;border-radius:50%;background:#cd82ff;box-shadow:0 0 12px #cd82ff}
.cr-search .crs-close{display:inline-flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;margin:0;border-radius:100px;cursor:pointer;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:rgba(255,255,255,.6);
  font-family:'Space Grotesk',system-ui,sans-serif;font-size:12px;font-weight:500;line-height:1;transition:color .3s,border-color .3s,background .3s}
.cr-search .crs-close:hover,.cr-search .crs-close:focus-visible{color:#fff;border-color:rgba(205,130,255,.5);background:rgba(135,82,250,.14);outline:none}
.cr-search kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:7px;
  font-family:'Space Grotesk',ui-monospace,monospace;font-size:11px;font-weight:600;color:#e6dcff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}

.cr-search .crs-form{margin:0}
.cr-search .crs-field{position:relative;display:flex;align-items:center;gap:14px;height:74px;padding:0 9px 0 22px;border-radius:18px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);
  transition:border-color .35s,box-shadow .5s cubic-bezier(.19,1,.22,1),background .35s}
.cr-search .crs-field:focus-within{border-color:rgba(205,130,255,.62);background:rgba(255,255,255,.06);
  box-shadow:0 0 0 5px rgba(135,82,250,.16),0 18px 54px rgba(105,40,250,.32)}
.cr-search .crs-field>svg{width:24px;height:24px;flex:none;color:#cd82ff}
.cr-search .crs-field input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;outline:0;background:none;box-shadow:none;border-radius:0;
  color:#fff;font-family:'Outfit',system-ui,sans-serif;font-size:clamp(20px,2.5vw,27px);font-weight:500;letter-spacing:-.01em;
  -webkit-appearance:none;appearance:none}
.cr-search .crs-field input::placeholder{color:rgba(255,255,255,.34);opacity:1}
.cr-search .crs-field input::-webkit-search-cancel-button,.cr-search .crs-field input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.cr-search .crs-go{flex:none;display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0;padding:0;border:0;border-radius:13px;cursor:pointer;
  color:#fff;background:linear-gradient(118deg,#4500f9,#8752fa 30%,#cd82ff 50%,#8752fa 70%,#4500f9);background-size:230% 100%;
  box-shadow:0 8px 28px rgba(105,40,250,.48);transition:transform .4s cubic-bezier(.19,1,.22,1),box-shadow .4s}
.cr-search .crs-go svg{width:22px;height:22px}
.cr-search .crs-go:hover,.cr-search .crs-go:focus-visible{transform:translateX(2px);box-shadow:0 12px 40px rgba(135,82,250,.62);outline:none}
@media (prefers-reduced-motion:no-preference){
  .cr-search .crs-go{animation:crs-grad 5.5s ease-in-out infinite}
  @keyframes crs-grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
}
.cr-search .crs-hint{display:flex;align-items:center;gap:8px;margin:13px 2px 0;font-size:12.5px;color:rgba(255,255,255,.42)}

.cr-search .crs-quick{display:grid;gap:20px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(168,150,255,.13)}
.cr-search .crs-lab{display:block;margin:0 0 11px;font-family:'Space Grotesk',system-ui,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.cr-search .crs-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cr-search .crs-chips a{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:100px;text-decoration:none;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#d9d3ea;font-size:13.5px;font-weight:500;line-height:1.2;
  transition:color .3s,border-color .3s,background .3s,transform .4s cubic-bezier(.19,1,.22,1)}
.cr-search .crs-chips a:hover,.cr-search .crs-chips a:focus-visible{color:#fff;border-color:rgba(205,130,255,.55);background:rgba(135,82,250,.18);transform:translateY(-1px);outline:none}
.cr-search .crs-chips a b{font-family:'Space Grotesk',system-ui,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.06em;
  background:linear-gradient(118deg,#8752fa,#cd82ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.cr-search .crs-chips a span{opacity:.5;transition:opacity .3s,transform .3s}
.cr-search .crs-chips a:hover span{opacity:1;transform:translateX(2px)}

@media(max-width:920px){.cr-search .crs-hint{display:none}}
@media(max-width:600px){
  .cr-search .crs-panel{margin-top:72px;padding:22px 18px 22px;border-radius:22px}
  .cr-search .crs-panel::before{left:24px;right:24px}
  .cr-search .crs-field{height:60px;gap:10px;padding:0 7px 0 16px;border-radius:15px}
  .cr-search .crs-field>svg{width:20px;height:20px}
  .cr-search .crs-field input{font-size:18px}
  .cr-search .crs-go{width:46px;height:46px;border-radius:11px}
  .cr-search .crs-quick{margin-top:20px;padding-top:18px;gap:16px}
  .cr-search .crs-chips a{padding:8px 13px;font-size:13px}
}
body.admin-bar .cr-search{top:32px}
@media(max-width:782px){body.admin-bar .cr-search{top:46px}}

/* ---- mobile menu field ---- */
.mobile-menu .m-search{display:flex;align-items:center;gap:12px;height:56px;margin:0 0 24px;padding:0 6px 0 18px;border-radius:15px;
  border:1px solid rgba(205,130,255,.26);background:rgba(255,255,255,.04);transition:border-color .3s,box-shadow .4s}
.mobile-menu .m-search:focus-within{border-color:rgba(205,130,255,.62);box-shadow:0 0 0 4px rgba(135,82,250,.16)}
.mobile-menu .m-search svg{width:19px;height:19px;flex:none;color:#cd82ff}
.mobile-menu .m-search input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;outline:0;background:none;box-shadow:none;
  color:#fff;font-family:'Montserrat',system-ui,sans-serif;font-size:16px;-webkit-appearance:none;appearance:none}
.mobile-menu .m-search input::placeholder{color:rgba(255,255,255,.4);opacity:1}
.mobile-menu .m-search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.mobile-menu .m-search button{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:11px;cursor:pointer;
  color:#fff;background:linear-gradient(118deg,#4500f9,#8752fa 55%,#cd82ff)}
.mobile-menu .m-search button svg{width:18px;height:18px;color:#fff}
.cr-search .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Narrow desktop (921–1100px): the extra icon would push "Get a Demo" onto two lines — tighten spacing there only. */
#header .nav-right .btn{white-space:nowrap}
@media(min-width:921px) and (max-width:1100px){
  #header .nav-item>a{padding:0 12px}
  #header .nav-item>a::after{left:12px;right:12px}
  #header .nav-right{gap:16px}
  #header .nav-right .nav-search-btn{margin-right:-2px}
}