/* search.css — header search button + slide-down search panel.
   Load AFTER index1.css / index2.css. Reuses the site's theme tokens
   (--aqua, --card, --ink, --ink-dim, --line, --ease, --font-body) and
   follows html[data-theme="light"|"dark"]. */

/* ------------------------------------------------------------- tokens */
:root{
  --sx-bg:#0f1c27;            /* deep navy-charcoal */
  --sx-bg-2:#152635;
  --sx-field:#0b1620;
  --sx-ink:#eaf1f2;
  --sx-dim:#9fb2ba;
  --sx-line:rgba(234,241,242,.11);
  --sx-accent:var(--aqua,#2fd3c9);
  --sx-accent-2:#4c86ff;      /* blue accent already used on the site */
  --sx-accent-soft:rgba(47,211,201,.13);
  --sx-hover:rgba(76,134,255,.10);
  --sx-icon:#eaf1f2;
  --sx-shadow:0 28px 60px -18px rgba(0,0,0,.65), 0 2px 0 rgba(255,255,255,.03) inset;
  --sx-backdrop:rgba(5,10,16,.55);
}
html[data-theme="light"]{
  --sx-bg:#fffdf8;            /* warm cream */
  --sx-bg-2:#f6f1e4;
  --sx-field:#ffffff;
  --sx-ink:#14283f;           /* navy */
  --sx-dim:#5a6b7d;
  --sx-line:rgba(20,40,63,.13);
  --sx-accent:var(--aqua,#0b9c8f);
  --sx-accent-2:#2563eb;
  --sx-accent-soft:rgba(11,156,143,.12);
  --sx-hover:rgba(11,156,143,.08);
  --sx-icon:#14283f;
  --sx-shadow:0 24px 50px -18px rgba(20,40,63,.28);
  --sx-backdrop:rgba(20,40,63,.28);
}

/* ------------------------------------------------- header search button */
.sx-trigger{
  flex-shrink:0; width:40px; height:40px; padding:0; margin:0;
  display:inline-grid; place-items:center;
  border:0; border-radius:12px; background:transparent; cursor:pointer;
  color:var(--sx-icon);
  transition:color .2s var(--ease,ease), background-color .2s var(--ease,ease), transform .2s var(--ease,ease);
  -webkit-tap-highlight-color:transparent;
}
.sx-trigger svg{ width:22px; height:22px; display:block; transition:transform .25s var(--ease,ease); }
.sx-trigger:hover{ color:var(--sx-accent); background:var(--sx-accent-soft); }
.sx-trigger:hover svg{ transform:scale(1.1) rotate(-6deg); }
.sx-trigger:active{ transform:scale(.94); }
.sx-trigger[aria-expanded="true"]{ color:var(--sx-accent); background:var(--sx-accent-soft); }
.sx-trigger:focus-visible,
.sx-panel :focus-visible{ outline:2px solid var(--sx-accent); outline-offset:2px; }

/* ----------------------------------------------------------- backdrop */
.sx-backdrop{
  position:fixed; left:0; right:0; bottom:0; top:var(--sx-top,0px); z-index:9990;
  background:var(--sx-backdrop);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; touch-action:none;
  transition:opacity .22s ease, visibility 0s linear .22s;
}
.sx-backdrop.is-open{ opacity:1; visibility:visible; transition:opacity .22s ease, visibility 0s; }

/* -------------------------------------------------------------- panel */
.sx-panel{
  position:fixed; z-index:9995; left:0; right:0; top:var(--sx-top,0px);
  padding:10px 12px 0; pointer-events:none;
  visibility:hidden; opacity:0; transform:translateY(-12px);
  transition:opacity .22s ease, transform .26s var(--ease,ease), visibility 0s linear .26s;
}
.sx-panel.is-open{
  visibility:visible; opacity:1; transform:none; pointer-events:auto;
  transition:opacity .22s ease, transform .26s var(--ease,ease), visibility 0s;
}
.sx-card{
  width:100%; max-width:680px; margin:0 auto;
  display:flex; flex-direction:column;
  max-height:calc(var(--sx-vh,100vh) - var(--sx-top,0px) - var(--sx-bottom,0px) - 22px);
  background:var(--sx-bg); color:var(--sx-ink);
  border:1px solid var(--sx-line); border-radius:18px; box-shadow:var(--sx-shadow);
  font-family:var(--font-body,"IBM Plex Sans",system-ui,sans-serif);
  overflow:hidden;
}

/* search field row */
.sx-bar{ display:flex; align-items:center; gap:6px; padding:12px; border-bottom:1px solid var(--sx-line); }
.sx-field{
  flex:1; min-width:0; display:flex; align-items:center; gap:10px;
  height:46px; padding:0 6px 0 14px;
  background:var(--sx-field); border:1px solid var(--sx-line); border-radius:12px;
  transition:border-color .2s, box-shadow .2s;
}
.sx-field:focus-within{ border-color:var(--sx-accent); box-shadow:0 0 0 3px var(--sx-accent-soft); }
.sx-field > svg{ width:18px; height:18px; flex-shrink:0; color:var(--sx-dim); }
.sx-input{
  flex:1; min-width:0; height:100%; padding:0; border:0; outline:0; background:transparent;
  color:var(--sx-ink); font:500 16px/1.2 var(--font-body,"IBM Plex Sans",system-ui,sans-serif); /* 16px stops iOS zoom */
  -webkit-appearance:none; appearance:none;
}
.sx-input::placeholder{ color:var(--sx-dim); opacity:.9; font-weight:400; }
.sx-input::-webkit-search-cancel-button{ display:none; }
.sx-btn{
  flex-shrink:0; width:40px; height:40px; display:inline-grid; place-items:center;
  border:0; border-radius:10px; background:transparent; color:var(--sx-dim); cursor:pointer;
  font-size:1rem; transition:background-color .15s, color .15s;
  -webkit-tap-highlight-color:transparent;
}
.sx-btn:hover{ background:var(--sx-hover); color:var(--sx-ink); }
.sx-clear[hidden]{ display:none; }
.sx-close{ width:42px; height:42px; }

/* scrolling body */
.sx-body{ overflow-y:auto; overscroll-behavior:contain; padding:8px 8px 10px; -webkit-overflow-scrolling:touch; }
.sx-head{
  margin:6px 8px 6px; font-size:.8rem; font-weight:600; color:var(--sx-dim); letter-spacing:.01em;
}
.sx-list{ list-style:none; margin:0; padding:0; }
.sx-item{
  display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px;
  color:inherit; text-decoration:none; cursor:pointer; min-height:56px;
  transition:background-color .15s;
}
.sx-item:hover,.sx-item.is-active{ background:var(--sx-hover); }
.sx-item.is-active{ box-shadow:inset 0 0 0 1.5px var(--sx-accent); }
.sx-ico{
  flex-shrink:0; width:38px; height:38px; display:grid; place-items:center;
  border-radius:11px; background:var(--sx-accent-soft); color:var(--sx-accent); font-size:1rem;
}
.sx-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sx-title{ font-weight:600; font-size:.95rem; line-height:1.3; color:var(--sx-ink); overflow-wrap:anywhere; }
.sx-desc{
  font-size:.82rem; line-height:1.4; color:var(--sx-dim);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sx-meta{ flex-shrink:0; display:flex; align-items:center; gap:10px; color:var(--sx-dim); }
.sx-tag{
  font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:999px;
  background:var(--sx-bg-2); color:var(--sx-dim); white-space:nowrap;
}
.sx-go{ font-size:.8rem; transition:transform .2s var(--ease,ease), color .2s; }
.sx-item:hover .sx-go,.sx-item.is-active .sx-go{ color:var(--sx-accent); transform:translateX(3px); }
.sx-item mark{ background:var(--sx-accent-soft); color:inherit; border-radius:3px; padding:0 1px; font-weight:700; }

/* popular searches: plain buttons that run the search */
.sx-pop{ display:flex; align-items:center; gap:12px; width:100%; padding:10px; border:0; border-radius:12px;
  background:transparent; color:var(--sx-ink); font:500 .95rem/1.3 var(--font-body,"IBM Plex Sans",system-ui,sans-serif);
  text-align:left; cursor:pointer; min-height:48px; transition:background-color .15s; }
.sx-pop:hover,.sx-pop.is-active{ background:var(--sx-hover); }
.sx-pop.is-active{ box-shadow:inset 0 0 0 1.5px var(--sx-accent); }
.sx-pop .sx-ico{ width:34px; height:34px; border-radius:10px; font-size:.9rem; }
.sx-pop .sx-title{ flex:1; font-weight:500; }

/* empty state */
.sx-empty{ padding:22px 14px 14px; text-align:center; }
.sx-empty .sx-empty-ico{ width:54px; height:54px; margin:0 auto 12px; display:grid; place-items:center;
  border-radius:16px; background:var(--sx-accent-soft); color:var(--sx-accent); font-size:1.3rem; }
.sx-empty h3{ margin:0 0 6px; font:700 1.05rem/1.3 var(--font-body,"IBM Plex Sans",system-ui,sans-serif); color:var(--sx-ink); }
.sx-empty p{ margin:0 auto 14px; max-width:42ch; font-size:.88rem; line-height:1.5; color:var(--sx-dim); }
.sx-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:16px; }
.sx-chip{ padding:8px 14px; min-height:38px; border:1px solid var(--sx-line); border-radius:999px; background:var(--sx-bg-2);
  color:var(--sx-ink); font:500 .84rem/1 var(--font-body,"IBM Plex Sans",system-ui,sans-serif); cursor:pointer; transition:border-color .15s, color .15s, background-color .15s; }
.sx-chip:hover{ border-color:var(--sx-accent); color:var(--sx-accent); }
.sx-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.sx-cta a{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px;
  border-radius:12px; font:600 .88rem/1 var(--font-body,"IBM Plex Sans",system-ui,sans-serif); text-decoration:none; color:#fff; }
.sx-cta .sx-call{ background:linear-gradient(135deg,var(--rust,#c1571e),var(--rust-light,#e07a3d)); }
.sx-cta .sx-wa{ background:#1fa855; }
.sx-cta a:hover{ filter:brightness(1.08); }

/* footer hint (desktop only) */
.sx-foot{ display:none; padding:9px 16px; border-top:1px solid var(--sx-line); font-size:.76rem; color:var(--sx-dim); gap:14px; }
.sx-foot kbd{ font:600 .72rem/1 var(--font-body,system-ui,sans-serif); padding:2px 6px; border:1px solid var(--sx-line); border-bottom-width:2px; border-radius:5px; background:var(--sx-bg-2); }
@media (hover:hover) and (min-width:861px){ .sx-foot{ display:flex; } }

/* arrival highlight on the section the user picked */
.sx-flash{ animation:sxFlash 1.8s ease-out 1; }
@keyframes sxFlash{
  0%,35%{ outline:2px solid var(--sx-accent); outline-offset:6px; }
  100%{ outline:2px solid transparent; outline-offset:10px; }
}

/* small screens */
@media (max-width:480px){
  .sx-panel{ padding:8px 8px 0; }
  .sx-card{ border-radius:16px; }
  .sx-tag{ display:none; }
  .sx-trigger{ width:38px; height:38px; }
}
@media (max-width:360px){ .sx-trigger{ width:36px; height:36px; } .sx-trigger svg{ width:20px; height:20px; } }
@media (min-width:861px){ .sx-panel{ padding-top:14px; } .sx-body{ padding:10px 10px 12px; } }

@media (prefers-reduced-motion:reduce){
  .sx-panel,.sx-backdrop,.sx-trigger,.sx-trigger svg,.sx-go{ transition:none !important; }
  .sx-flash{ animation:none; outline:2px solid var(--sx-accent); outline-offset:6px; }
}

/* screen-reader-only live region */
.sx-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* the field's own ring (.sx-field:focus-within) shows focus; stop the site-wide input outline drawing a box inside it */
.sx-panel .sx-input,
.sx-panel .sx-input:focus,
.sx-panel .sx-input:focus-visible{ outline:0 !important; box-shadow:none !important; border:0 !important; background:transparent !important; padding:0 !important; border-radius:0 !important; }

/* --- mobile header: give the brand name room (search button added to the row) --- */
@media (max-width:860px){
  .navbar .title{ min-width:0; flex:1 1 0; }
  .navbar .title-text{ min-width:0; flex:1 1 0; }
  .navbar .brand-title{ white-space:nowrap; overflow:hidden; text-overflow:clip; letter-spacing:0; }
  .sx-trigger{ width:34px; height:34px; border-radius:10px; }
  .sx-trigger svg{ width:20px; height:20px; }
}
@media (max-width:480px){ .sx-trigger{ width:34px; height:34px; } }
@media (max-width:360px){ .sx-trigger{ width:32px; height:32px; } .sx-trigger svg{ width:19px; height:19px; } }