/* ===== Tunables ===== */
@media (max-width: 780px) {
  :root{
    /* Mobile header search width (right-aligned; JS caps to safe space between logo & burger) */
    --bwb-mobile-search-width: 300px;
    --bwb-mobile-search-maxvw: 72vw;
    --bwb-burger-gap: 50px;  /* space from right edge (hamburger + padding) */
    --bwb-top-gap: 50%;
  }
}

/* ===== Tighter line-height knobs ===== */
:root{
  --bwb-title-lh-d: 1.22;   /* desktop title line-height */
  --bwb-text-lh-d:  1.32;   /* desktop excerpt line-height */
}
@media (max-width:780px){
  :root{
    --bwb-title-lh-m: 1.18;  /* mobile title line-height */
    --bwb-text-lh-m:  1.28;  /* mobile excerpt line-height */
  }
}

/* ===== Search toggle ===== */
.menu-item-bwb-search .bwb-search-toggle,
.bwb-search-toggle-wrap .bwb-search-toggle{
  background:transparent;border:0;cursor:pointer;padding:6px 10px;
  line-height:1;display:inline-flex;align-items:center;color:#fff;
}
.menu-item-bwb-search .bwb-search-toggle:hover,
.menu-item-bwb-search .bwb-search-toggle:focus,
.bwb-search-toggle-wrap .bwb-search-toggle:hover,
.bwb-search-toggle-wrap .bwb-search-toggle:focus{opacity:.9;}
.bwb-search-svg{width:20px;height:20px;display:block;}

/* ===== Header layer order (fix dimmed text when results open) ===== */
@media (max-width: 780px){
  /* Your theme sets this to 9999 !important; we must be above the overlay (9999) */
  .bwb-header-logo-nav{ z-index: 10020 !important; }
}

/* ===== Mobile header search (right aligned, non-overlapping) ===== */
@media (max-width: 780px){
  .bwb-mobile-header-search{
    position:absolute;top:var(--bwb-top-gap);transform:translateY(-50%);
    right:var(--bwb-burger-gap);
    width:min(var(--bwb-mobile-search-width), var(--bwb-mobile-search-maxvw));
    height:38px;
    z-index:10030; /* above overlay */
  }
  .bwb-mh-form{position:relative;height:38px;}
  .bwb-mh-input{
    position:relative; z-index:10040; /* keep input itself on top */
    width:100%;height:38px;font-size:16px;padding:8px 38px 8px 12px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.06);
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    caret-color:#fff !important;
    border-radius:10px;outline:none;appearance:none;background-clip:padding-box;

    /* kill any platform dimming while overlay is open */
    opacity:1 !important; filter:none !important; mix-blend-mode:normal; text-shadow:0 0 0 #fff;
  }
  .bwb-mh-input::placeholder{color:#cfcfcf;opacity:1;}
  .bwb-mh-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}
  .bwb-mh-btn{
    position:absolute;right:6px;top:50%;transform:translateY(-50%);
    background:transparent;border:0;padding:6px;color:#fff;cursor:pointer;
  }

  /* tiny visual gaps for header elements (including your classes) */
  .bwb-header-logo-nav .mh-header-image,
  .bwb-header-logo-nav .custom-logo{margin-right:8px;}
  .bwb-header-logo-nav .mh-mobile-nav-toggle,
  .bwb-header-logo-nav .mobile-nav-toggle,
  .bwb-header-logo-nav .menu-toggle,
  .bwb-header-logo-nav .nav-toggle,
  .bwb-header-logo-nav .mobile-menu-button,
  .bwb-header-logo-nav .mobile-nav-open-button{margin-left:8px;}

  /* prevent autofill tint */
  .bwb-mh-input:-webkit-autofill,
  .bwb-mh-input:-webkit-autofill:focus{-webkit-text-fill-color:#fff !important;transition:background-color 99999s ease-out;}
}

/* ===== Overlay (kept below header on mobile) ===== */
.bwb-search-panel{position:fixed;inset:0;display:none;z-index:9999;background:rgba(0,0,0,.5);}
.bwb-search-panel[hidden]{display:none;}
.bwb-search-panel.show{display:block;}

.bwb-search-inner{
  position:relative;max-width:520px;margin:8vh auto 0;
  background:#1b1b1b;color:#eee;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.4);
  padding:16px;
}

/* Overlay input (desktop / when using overlay field) */
.bwb-search-bar{position:relative;}
.bwb-search-input{
  width:100%;font-size:16px;line-height:1.2;
  padding:8px 44px 8px 12px;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);
  color:#fff !important;-webkit-text-fill-color:#fff !important;caret-color:#fff !important;
  border-radius:8px;outline:none;

  /* anti-dim for overlay input too */
  opacity:1 !important; filter:none !important; mix-blend-mode:normal; text-shadow:0 0 0 #fff;
}
/* Make DESKTOP placeholder nicely dim (mobile header placeholder is set above) */
@media (min-width: 781px){
  .bwb-search-input::placeholder{ color:#b8b8b8; opacity:1; }
}

.bwb-search-close{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;font-size:22px;line-height:1;color:inherit;cursor:pointer;
}

/* ===== Results ===== */
.bwb-search-results{margin-top:12px;max-height:60vh;overflow:auto;}
.bwb-search-results:empty{display:none;} /* no ghost bar */
.bwb-search-result{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center;padding:8px;border-radius:8px;}
.bwb-search-result:hover{background:rgba(255,255,255,.06);}
.bwb-search-result.bwb-empty{display:block;text-align:center;opacity:.8;}
.bwb-search-thumb{width:56px;height:56px;object-fit:cover;border-radius:6px;background:#333;}
.bwb-thumb-ph{width:56px;height:56px;border-radius:6px;background:#2a2a2a;}

/* Typography + tighter line heights */
.bwb-search-title{margin:0 0 2px;font-weight:600;font-size:14px;line-height:var(--bwb-title-lh-d);}
.bwb-search-title a{color:#fff;text-decoration:none;display:block;}
.bwb-search-title a:hover,.bwb-search-title a:focus{color:#fff;text-decoration:underline;}
.bwb-search-excerpt{margin:0;font-size:12px;opacity:.85;line-height:var(--bwb-text-lh-d);}

/* Show more */
.bwb-search-more{
  display:block;width:100%;box-sizing:border-box;margin-top:12px;padding:10px 12px;text-align:center;
  border-radius:8px;text-decoration:none;border:1px solid rgba(255,255,255,.2);color:#fff;background:transparent;
}
.bwb-search-more[hidden]{display:none !important;}
.bwb-search-panel a:hover{color:inherit;}

/* Overlay link: hidden by default so it can't break desktop layout */
.bwb-search-result > a.bwb-row-link{ display:none; }

/* ===== Mobile overlay density + line-height overrides ===== */
@media (max-width:780px){
  .bwb-search-panel.bwb-from-header .bwb-search-bar{display:none;}
  .bwb-search-inner{padding:12px;margin-top:48px;}
  .bwb-search-results{margin-top:6px;max-height:65vh;}
  .bwb-search-result{grid-template-columns:44px 1fr;gap:8px;padding:6px;}
  .bwb-search-thumb,.bwb-thumb-ph{width:44px;height:44px;border-radius:5px;}
  .bwb-search-title{font-size:13px;margin:0 0 1px;line-height:var(--bwb-title-lh-m);}
  .bwb-search-excerpt{font-size:11px;opacity:.9;line-height:var(--bwb-text-lh-m);}
  .bwb-search-title a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}

/* Desktop ONLY — dim placeholder even with text-fill-color on input */
@media (min-width: 781px){
  /* When the input is empty and showing the placeholder */
  body .bwb-search-panel .bwb-search-input:placeholder-shown {
    color: #9aa0a6 !important;                 /* dim gray */
    -webkit-text-fill-color: #9aa0a6 !important; /* override the white text-fill */
    opacity: 1 !important;
  }

  /* Optional: ensure placeholder pseudo-elements also match (non-WebKit, legacy) */
  body .bwb-search-panel .bwb-search-input::placeholder { color:#9aa0a6 !important; opacity:1 !important; }
  body .bwb-search-panel .bwb-search-input::-webkit-input-placeholder { color:#9aa0a6 !important; opacity:1 !important; }
  body .bwb-search-panel .bwb-search-input:-ms-input-placeholder { color:#9aa0a6 !important; opacity:1 !important; }
  body .bwb-search-panel .bwb-search-input::-ms-input-placeholder { color:#9aa0a6 !important; opacity:1 !important; }
}

/* ===== Mobile: whole row is a link (overlay) ===== */
@media (max-width: 780px){
  .bwb-search-result{ position: relative; }

  /* Overlay on top of everything */
  .bwb-search-result > a.bwb-row-link{
    display:block;
    position:absolute;
    inset:0;
    z-index: 1000;          /* higher than any child */
    text-indent:-9999px;
    overflow:hidden;
  }

  /* Let taps pass through child elements to the overlay link */
  .bwb-search-result > *:not(.bwb-row-link){
    position: relative;
    pointer-events: none;    /* <- this makes tapping the image work */
  }
}