/* ============================================================================
   docs-index.css — /docs/ hub page styles
   ============================================================================
   Styles specific to the /docs/index.html hub page.
   Extends styles.css — uses all the same design tokens.

   Contains:
     1. Search bar
     2. Category filter tabs
     3. Docs card grid
     4. Doc card component
     5. No-results state
   ============================================================================ */


/* ============================================================================
   1. SEARCH BAR
   ============================================================================ */

.docs-search-wrap {
  position: relative;
  max-width: 480px;
  margin-bottom: var(--space-6);
}

.docs-search {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
  /* Remove default search input styling */
  -webkit-appearance: none;
  appearance: none;
}

.docs-search:focus {
  border-color: var(--border-strong);
}

.docs-search::placeholder {
  color: var(--text-dim);
}

/* Search icon */
.docs-search-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--silver-dim);
  font-size: var(--text-lg);
  pointer-events: none;
  /* Prevent icon from inheriting search input focus outline */
  line-height: 1;
}


/* ============================================================================
   2. CATEGORY FILTER TABS
   ============================================================================ */

.docs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.docs-filter {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--silver-dim);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.docs-filter:hover {
  border-color: var(--border-strong);
  color: var(--silver);
}

.docs-filter.active {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-tint);
}


/* ============================================================================
   3. DOCS CARD GRID
   ============================================================================
   Auto-fill grid — cards are minimum 280px wide, fill the row.
   On very wide screens the third column caps at a readable width.
   ============================================================================ */

.docs-index-section {
  padding: var(--space-12) 0 var(--space-20);
}

.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}


/* ============================================================================
   4. DOC CARD COMPONENT
   ============================================================================
   Each card is an <a> element — the whole thing is clickable.
   Uses the site's corner bracket system for the hover state.
   ============================================================================ */

.doc-card[hidden] { display: none !important; }

.doc-card {
  /* Layout */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);

  /* Visual */
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  text-decoration: none;
  color: inherit;

  /* Transition */
  transition: border-color var(--duration-normal) var(--ease-out),
              transform   var(--duration-fast)   var(--ease-out),
              background  var(--duration-fast)   var(--ease-out);
}

.doc-card:hover {
  border-color: var(--border-red);
  transform: translateY(-2px);
  background: var(--bg-elevated);
}

/* Corner brackets — same system as the rest of the site */
.doc-card .corner {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--border-strong);
  transition: background var(--duration-fast) var(--ease-out);
}
.doc-card:hover .corner { background: var(--red); }
.doc-card .corner--tl   { top: 0; left: 0; }
.doc-card .corner--tr   { top: 0; right: 0; }
.doc-card .corner--bl   { bottom: 0; left: 0; }
.doc-card .corner--br   { bottom: 0; right: 0; }

/* Card header — badge + category label in a row */
.doc-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

/* FREE / PAID badge */
.doc-card-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px var(--space-2);
  border: 1px solid;
}

.doc-card-badge--free {
  color: var(--red);
  border-color: var(--border-red);
  background: var(--red-tint);
}

.doc-card-badge--paid {
  color: var(--silver-dim);
  border-color: var(--border-default);
}

.doc-card-badge--member {
  color: rgba(255, 215, 0, .4);
  border-color: rgba(255, 215, 0, .4);
  background: rgba(212, 196, 57, 0.05);
}

/* Category label — e.g. "WIDGET", "SYSTEM", "OBS TOOL" */
.doc-card-category {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-dim);
}

/* Card title */
.doc-card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Card description */
.doc-card-desc {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-body);
  flex: 1; /* pushes the link to the bottom */
  margin: 0;
}

/* "Read the guide →" link at the bottom */
.doc-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin-top: var(--space-3);
  transition: color var(--duration-fast) var(--ease-out);
}

.doc-card:hover .doc-card-link {
  color: var(--red);
}


/* ============================================================================
   5. NO-RESULTS STATE
   ============================================================================ */

.docs-no-results {
  grid-column: 1 / -1; /* span full grid width */
  padding: var(--space-12) var(--space-8);
  text-align: center;
}

.docs-no-results-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--silver-dim);
  margin-bottom: var(--space-3);
}

.docs-no-results-msg {
  font-size: var(--text-base);
  color: var(--text-muted);
}


/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 600px) {
  .docs-grid {
    grid-template-columns: 1fr;
  }

  .docs-filters {
    gap: var(--space-1);
  }

  .docs-filter {
    font-size: 10px;
    padding: var(--space-1) var(--space-3);
  }
}