/* ================================
   DHDA docs layout (scoped)
   ================================ */

body.dhda-compat-docs{
  --docs-rail: 300px;          /* left rail width */
  --docs-gap: 2rem;            /* space between rail & content */
  --header-offset: 72px;       /* sticky offset under header */
}
@media (min-width:782px){
  body.admin-bar.dhda-compat-docs{ --header-offset: 104px; }
}

/* 2-column grid */
@media (min-width:1024px){
  .dhda-compat-docs .docs-grid{
    display:grid;
    grid-template-columns: var(--docs-rail) minmax(0,1fr);
    gap: var(--docs-gap);
  }
  .dhda-compat-docs .docs-rail{
    position: sticky;
    top: calc(var(--header-offset) + 16px);
    align-self: start;
    margin-top: 5px;
  }
}

/* Fallback for legacy templates using lg:grid-cols-4 */
@media (min-width:1024px){
  .dhda-compat-docs .grid.lg\:grid-cols-4,
  .dhda-compat-docs .grid.grid-cols-1.lg\:grid-cols-4,
  .dhda-compat-docs .grid[class*="lg:grid-cols-4"]{
    grid-template-columns: var(--docs-rail) minmax(0,1fr) !important;
    gap: var(--docs-gap) !important;
  }
  .dhda-compat-docs .grid[class*="lg:grid-cols-4"] > *{ grid-column:auto / auto !important; }
  .dhda-compat-docs .grid[class*="lg:grid-cols-4"] > :first-child{ grid-column:1 / 2 !important; }
  .dhda-compat-docs .grid[class*="lg:grid-cols-4"] > :not(:first-child){
    grid-column:2 / -1 !important; min-width:0;
  }
}

/* Let content expand */
.dhda-compat-docs .prose,
.dhda-compat-docs .prose *,
.dhda-compat-docs [class*="chapter-content"],
.dhda-compat-docs [class*="docs-content"],
.dhda-compat-docs article{
  max-width:none !important; width:100%; min-width:0;
}

/* Sidebar look — soft and readable */
.dhda-compat-docs #docs-sidebar .border,
.dhda-compat-docs .dhda-sidebar li.border{
  border: 0 !important;
  background: #fff;
  border-radius: 8px;
  box-shadow:
    0 0 0 1px var(--dhda-gray-200),
    0 1px 3px rgba(17,24,39,.05);
}
.dhda-compat-docs #docs-sidebar .section-title,
.dhda-compat-docs #docs-sidebar button,
.dhda-compat-docs .dhda-sidebar .section-title,
.dhda-compat-docs .dhda-sidebar button{
  color: var(--dhda-dark-600) !important;
}

/* Expanded chapter links visible without hover */
.dhda-compat-docs #docs-sidebar ul ul a,
.dhda-compat-docs .dhda-sidebar ul ul a{
  display:block;
  padding:.375rem .5rem;
  border-radius:.375rem;
  color: var(--dhda-dark-600) !important;
  -webkit-text-fill-color: var(--dhda-dark-600) !important;
  opacity:1 !important; visibility:visible !important;
  background: transparent !important;
  text-decoration:none !important;
}

/* Neutralize any forced white text */
.dhda-compat-docs #docs-sidebar .text-white,
.dhda-compat-docs #docs-sidebar [class*="text-white"],
.dhda-compat-docs .dhda-sidebar .text-white,
.dhda-compat-docs .dhda-sidebar [class*="text-white"]{
  color: var(--dhda-dark-600) !important;
  -webkit-text-fill-color: var(--dhda-dark-600) !important;
  opacity:1 !important;
}

/* Hover/active states */
.dhda-compat-docs #docs-sidebar ul ul a:hover,
.dhda-compat-docs .dhda-sidebar ul ul a:hover{
  background: color-mix(in oklch, var(--dhda-accent) 12%, transparent) !important;
  color: var(--dhda-primary-600) !important;
}
.dhda-compat-docs #docs-sidebar a.active{
  background: color-mix(in oklch, var(--dhda-accent) 18%, transparent) !important;
  color: var(--dhda-primary-600) !important;
  font-weight:600;
  border-radius:.375rem;
}

/* === Docs sidebar search — TechTalks-style (layout only) === */

/* let the dropdown overflow the rail if needed */
#docs-sidebar{ overflow: visible; }

/* Card shell */
#docs-sidebar .card{
  background:#fff;
  border:1px solid var(--dhda-gray-200);
  border-radius:.75rem;
  padding:1rem;
  box-shadow:0 1px 2px rgba(17,24,39,.04);
}
#docs-sidebar .card + .card{ margin-top:.75rem; }
#docs-sidebar .card label{
  display:block;
  margin-bottom:.5rem;
  font-weight:600;
  color:var(--dhda-dark-600);
}

/* Input */
#dhda-scope-search{
  width:100%;
  height:44px;
  padding:0 .75rem;
  border:1px solid var(--dhda-gray-200);
  border-radius:10px;
  background:#fff;
  font-size:.95rem;
}
#dhda-scope-search:focus{
  outline:none;
  border-color:var(--dhda-accent-300);
  box-shadow:0 0 0 2px color-mix(in oklch, var(--dhda-accent) 35%, transparent);
}
#dhda-scope-search::placeholder{ color:var(--dhda-gray); }

/* Results list — inline (no overlay), immediately under the input.
   These rules are EXTRA specific to beat Tailwind's `.hidden`
   and any old absolute-position rules. */
#dhda-search-results,
.dhda-search-results,
#tt-side-suggest{
  display:none;
  margin-top:.5rem;
  background:#fff;
  border:1px solid var(--dhda-gray-200);
  border-radius:.5rem;
  box-shadow:0 1px 2px rgba(17,24,39,.04);
  max-height:60vh;
  overflow:auto;
  padding:.25rem 0;
  position:static !important;   /* undo any absolute from older CSS */
  inset:auto !important;        /* reset top/left/right/bottom */
  z-index:auto !important;      /* keep inside the rail */
}

/* Show when there’s content, even if `.hidden` is still present */
#dhda-search-results:not(:empty),
.dhda-search-results:not(:empty),
#tt-side-suggest:not(:empty){
  display:block !important;
}
#dhda-search-results.hidden:not(:empty),
.dhda-search-results.hidden:not(:empty),
#tt-side-suggest.hidden:not(:empty){
  display:block !important;     /* override Tailwind `.hidden` */
}

/* Items */
#dhda-search-results .tt-item,
#dhda-search-results .item,
#dhda-search-results a,
.dhda-search-results .tt-item,
.dhda-search-results .item,
.dhda-search-results a,
#tt-side-suggest .tt-item,
#tt-side-suggest .item,
#tt-side-suggest a{
  display:block;
  padding:.55rem .75rem;
  color:var(--dhda-primary);
  text-decoration:none;
  line-height:1.25;
}

/* Separators */
#dhda-search-results .tt-item + .tt-item,
#dhda-search-results .tt-item + .item,
#dhda-search-results .item + .tt-item,
#dhda-search-results .item + .item,
#dhda-search-results a + a,
.dhda-search-results .tt-item + .tt-item,
.dhda-search-results .item + .item,
#tt-side-suggest .tt-item + .tt-item,
#tt-side-suggest .item + .item{
  border-top:1px solid var(--dhda-gray-200);
}

/* Hover/active & excerpts */
#dhda-search-results .tt-item:hover,
#dhda-search-results .item:hover,
#dhda-search-results a:hover,
.dhda-search-results .tt-item:hover,
.dhda-search-results .item:hover,
.dhda-search-results a:hover,
#tt-side-suggest .tt-item:hover,
#tt-side-suggest .item:hover,
#tt-side-suggest a:hover,
#dhda-search-results .tt-item.is-active,
#dhda-search-results .item.is-active,
.dhda-search-results .tt-item.is-active,
.dhda-search-results .item.is-active,
#tt-side-suggest .tt-item.is-active,
#tt-side-suggest .item.is-active{
  background: color-mix(in oklch, var(--dhda-accent) 12%, #fff);
  color:var(--dhda-primary-600);
}
#dhda-search-results .excerpt,
.dhda-search-results .excerpt,
#tt-side-suggest .excerpt{
  color:var(--dhda-dark-300); font-size:.9rem;
}

/* Mobile: rail not sticky to avoid overlap */
@media (max-width:1023px){
  .dhda-compat-docs .docs-rail{ position:static; top:auto; }
}