/* ============================================================================
 * ii-topbar.css — GLOBAL PORTAL TOPBAR (II-90)
 *
 * The .gtopbar (global search + plan chip + Ask Indie + tour) is injected
 * server-side (inc/ii-portal.php -> ii_portal_topbar_html) immediately after the
 * sidenav on every portal page. Markup + the .gtopbar/.gsearch/.gplan/.askbtn/
 * .helpbtn rules are reproduced from the approved mockup
 * (II-90-Member-Directory-Profile-Connections-Messages-v1.4.html).
 *
 * Layout note: the mockup nests the bar in a flex-column `.pagecol`. The live
 * portal pages have no such column (the .shell flex row is [sidenav][content]),
 * so instead of a wrapper the bar is position:fixed across the content area
 * (left of it is the 228px sidenav) and the content column that follows it gains
 * top padding via `.gtopbar + *`. This lands identically on every page shape.
 * ==========================================================================*/

.gtopbar{
  position:fixed; top:0; left:228px; right:0; z-index:40;
  background:rgba(246,242,233,.95);
  backdrop-filter:saturate(150%) blur(6px);
  -webkit-backdrop-filter:saturate(150%) blur(6px);
  border-bottom:1px solid #E7E1D6;
  display:flex; align-items:center; gap:13px; padding:11px 30px; flex:0 0 auto;
}
/* Clear the WP admin bar for logged-in members. */
body.admin-bar .gtopbar{ top:32px; }

.gsearch{position:relative;flex:1 1 auto;max-width:560px;min-width:150px}
.gsearch svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;
  height:16px;fill:none;stroke:#7A7168;stroke-width:2;pointer-events:none}
.gsearch input{width:100%;border:1px solid #E7E1D6;background:#fff;border-radius:10px;
  padding:9px 34px 9px 38px;font-size:14px;color:#171717;font-family:'Lato',sans-serif}
.gsearch input::placeholder{color:#1C1411}
.gsearch input:focus{outline:none;border-color:#DE804D;box-shadow:0 0 0 3px #F7DFD2}
.gsearch input::-webkit-search-cancel-button,
.gsearch input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}

.gspacer{flex:1 1 0;min-width:0}

.gplan{display:inline-flex;align-items:center;font-family:'Montserrat',sans-serif;
  font-weight:700;font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:#9A5327;
  background:#F7DFD2;border:1px solid #EBB394;border-radius:999px;padding:4px 11px;
  flex:0 0 auto;white-space:nowrap}

.askbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;
  border:none;border-radius:9999px;background:linear-gradient(109.52deg,#3B82F6 0%,#7C3AED 100%);
  color:#fff;font-family:'Lato',sans-serif;font-weight:600;font-size:14px;line-height:20px;
  box-shadow:0 1px 1.5px rgba(0,0,0,.10);white-space:nowrap;cursor:pointer;flex:0 0 auto}
.askbtn:hover{filter:brightness(1.06)}
.askbtn.on{outline:2px solid rgba(124,58,237,.35);outline-offset:2px}
.askbtn svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.helpbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:9999px;border:1px solid #E7E1D6;background:#fff;color:#1C1411;cursor:pointer;
  flex:0 0 auto;padding:0}
.helpbtn:hover{background:#FDF4EB;color:#404041}
.helpbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* Push the page's content column clear of the fixed bar. The content column is the
 * element that immediately follows the injected topbar on every page shape
 * (.content / <main> / an unclassed <div> / .maincol). */
.gtopbar + main,
.gtopbar + div,
.gtopbar + section,
.gtopbar + aside{ padding-top:59px; }

/* ---- dark mode (portal .ii-dark on <html>) ---- */
.ii-dark .gtopbar{ background:rgba(20,16,13,.94); border-bottom-color:#332D26; }
.ii-dark .gsearch svg{ stroke:#A69D93; }
.ii-dark .gsearch input{ background:#191510; border-color:#332D26; color:#E9E3DB; }
.ii-dark .gsearch input::placeholder{ color:#8b8279; }
.ii-dark .gplan{ background:#33261A; border-color:#8A5A3A; color:#E0A379; }
.ii-dark .helpbtn{ background:#191510; border-color:#332D26; color:#A69D93; }
.ii-dark .helpbtn:hover{ background:#2A201B; color:#fff; }

/* ---- responsive: sidenav collapses to a drawer at <=1000px (matches ii-theme.css) ---- */
@media(max-width:1000px){
  .gtopbar{ left:0; padding-left:64px; }      /* clear the fixed hamburger (top-left) */
  body.admin-bar .gtopbar{ top:46px; }         /* admin bar is 46px tall <=782px */
}
@media(max-width:820px){
  .gtopbar{ padding:9px 16px 9px 62px; gap:9px; flex-wrap:wrap; }
  .gsearch{ order:3; flex:1 1 100%; max-width:none; }
  .gspacer{ display:none; }
  /* the bar is two rows tall when wrapped — give the content a little more room */
  .gtopbar + main, .gtopbar + div, .gtopbar + section, .gtopbar + aside{ padding-top:104px; }
}