/* =========================================================
   LinuxNation Directory styles — high-density two-column layout
   Extends static/css/style.css theme:
   background #0e0e0e, text #d4d0c8, bright #e8e4e0, accent #c03030,
   accent-hover #ff6b6b, accent-press #a02828, borders #333,
   muted #666, panels #141414. Brand font: Courier (inherited).
   ========================================================= */

/* --- Max width --------------------------------------------------
   The site-wide .wrapper (in style.css) is 1200px on every page, so the
   whole site uses the available width — no per-section override needed.
   The two-column directory simply fills that wider wrapper. */

/* --- Sidebar + main two-column shell -----------------------
   On directory pages the site header and partner strip are pinned to the
   top of the viewport (non-scrolling), the sidebar is fixed to the left
   edge below the strip, and the main content fills the remaining width.
   These rules are scoped to directory pages so the rest of the site is
   untouched. */

/* Header: fixed at the very top, full width. */
body[data-section^="directory"] .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  background: #0e0e0e;
}

/* Partner strip: fixed directly under the header's red line.
   The actual top offset is set dynamically by directory.js (relocateStrip)
   based on the measured header height, so we only set the horizontal
   layout and appearance here. */
body[data-section^="directory"] .dir-strip {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 49;
  margin: 0;
  padding: 10px 60px 10px 360px;   /* clear the fixed sidebar (300+60 gutter) */
  box-sizing: border-box;
  background: #0a0a0a;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

/* Push the page content down past the fixed header + strip.
   The actual value is set dynamically by directory.js based on measured
   header + strip heights. This is a fallback if JS hasn't run yet. */
body[data-section^="directory"] .site-main {
  padding-top: 198px;
}

/* Let directory pages break out of the 1200px centered .wrapper so the
   main content can use the full viewport width to the right of the fixed
   sidebar. This targets the outer .wrapper (body > div.wrapper), NOT the
   .wrapper inside the fixed header. */
body[data-section^="directory"] > .wrapper {
  max-width: none;
  margin: 0;
  padding-right: 40px;
  padding-left: 0;
}

/* Offset the footer so it doesn't disappear under the fixed sidebar. */
body[data-section^="directory"] .site-footer {
  padding-left: 360px;   /* clear the fixed sidebar + gutter */
}

.dir-layout {
  display: block;
  margin-top: 0;
}

/* Sidebar: fixed to the left edge, below the header + strip.
   The search and action buttons stay pinned at the top; the category tree
   below scrolls independently so all categories are reachable on short
   viewports. The top offset is set dynamically by directory.js. */
.dir-sidebar {
  position: fixed;
  top: 180px;            /* fallback — overridden by JS */
  left: 0;
  width: 300px;
  height: calc(100vh - 180px);  /* fallback — overridden by JS */
  max-height: calc(100vh - 180px);
  overflow: hidden;       /* the sidebar itself doesn't scroll — the tree does */
  padding: 20px 20px 20px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-right: 1px solid #2a2a2a;
  background: #0e0e0e;
  z-index: 20;
}

/* The tree scrolls independently within the sidebar. */
.dir-sidebar .dir-toc {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* Thin scrollbar styled to match the dark theme. */
.dir-sidebar .dir-toc::-webkit-scrollbar { width: 6px; }
.dir-sidebar .dir-toc::-webkit-scrollbar-track { background: transparent; }
.dir-sidebar .dir-toc::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.dir-sidebar .dir-toc::-webkit-scrollbar-thumb:hover { background: #c03030; }

/* Main content: fill the viewport width to the right of the sidebar.
   Generous left gutter (60px) so content breathes away from the sidebar
   border, and a right gutter so it doesn't touch the viewport edge. */
.dir-main {
  min-width: 0;
  min-height: calc(100vh - 198px);
  margin-left: 360px;       /* sidebar width (300) + 60px gutter */
  margin-right: 60px;       /* right gutter */
}

/* --- Global sponsor/partner strip ---------------------------
   Base appearance only. Directory pages position it fixed under the header
   via the body[data-section^="directory"] scoping above. */
.dir-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 28px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  background: #0a0a0a;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #666;
}
.dir-strip-label {
  color: #666;
  font-weight: 700;
  flex-shrink: 0;
  padding-right: 8px;
}
.dir-strip a {
  color: #999;
  text-decoration: none;
  padding: 2px 10px;
  border: 1px solid #2a2a2a;
  flex-shrink: 0;
}
.dir-strip a:hover { color: #ff6b6b; border-color: #c03030; }
/* Tagged placements carry an explicit marker — paid ≠ editorial */
.dir-strip a.dir-strip-affiliate::after {
  content: " affiliate";
  color: #ff6b6b;
}

/* --- Breadcrumb (in main, under category title) ------------- */
.dir-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #666;
  margin: 0 0 28px;
}
.dir-breadcrumb a { color: #999; text-decoration: none; }
.dir-breadcrumb a:hover { color: #c03030; }
.dir-sep { color: #444; }

/* --- Section headers: uppercase ------------------------------------ */
.dir-main > .dir-section-title,  /* top-level sections */
.dir-section-title {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #e8e4e0;
  margin: 36px 0 16px;
  padding: 0 0 10px;
  border-bottom: 1px solid #2a2a2a;
}
.dir-section-title::before {
  content: "";
}
/* The global h2 red left border sticks to the text; pad it out so the
   heading clears the line like a classic blockquote/annotated heading. */
.dir-section-title {
  border-left: 4px solid #c03030;
  padding-left: 22px;
}

/* --- Main area headings ------------------------------------- */
.dir-cat-header { margin-bottom: 14px; }
.dir-cat-title {
  font-size: 2.2rem;
  letter-spacing: 2px;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.dir-cat-desc { color: #999; max-width: 70ch; font-size: 1.05rem; }
.dir-cat-count { color: #666; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 2px; }
.dir-count-num { color: #d4d0c8; font-weight: 700; }

/* --- Badges -------------------------------------------------- */
.dir-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.dir-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 1px solid #333;
  color: #d4d0c8;
}
.dir-badge-featured { border-color: #b8860b; color: #d9a938; }
.dir-badge-verified { border-color: #2e7d32; color: #66bb6a; }
.dir-badge-sponsored { border-color: #c03030; color: #ff6b6b; background: rgba(192,48,48,0.15); }
.dir-badge-status { border-color: #555; color: #aaa; }

/* --- Compact pill buttons ------------------------------------ */
.dir-btn {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid #333;
  border-radius: 999px;          /* pill */
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  color: #d4d0c8;
  background: #141414;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.dir-btn:hover { border-color: #c03030; color: #0e0e0e; background: #c03030; }
.dir-btn-primary { border-color: #c03030; color: #0e0e0e; background: #c03030; }
.dir-btn-primary:hover { background: #a02828; border-color: #a02828; }
.dir-btn-ghost { margin-top: 4px; }
.dir-arrow { margin-left: 5px; }

/* --- Sidebar: search ------------------------------------------ */
.dir-side-search { display: flex; gap: 0; }
.dir-search-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.85rem;
  color: #e8e4e0;
  background: #0e0e0e;
  border: 1px solid #333;
  border-right: none;
  outline: none;
}
.dir-search-input:focus { border-color: #c03030; }
.dir-search-input::placeholder { color: #666; }
.dir-search-btn {
  padding: 0 12px;
  border: 1px solid #c03030;
  background: #c03030;
  color: #0e0e0e;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.68rem;
  cursor: pointer;
}
.dir-search-btn:hover { background: #a02828; border-color: #a02828; }

/* --- Sidebar: submit button ------------------------------------ */
.dir-side-actions { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid #1f1f1f; }
.dir-side-actions .dir-btn { text-align: center; padding: 6px 12px; font-size: 0.72rem; letter-spacing: 1px; }

/* --- Sidebar: nested category tree ----------------------------- */
.dir-toc-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #666;
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #2a2a2a;
}
.dir-tree { list-style: none; margin: 4px 0 0; padding: 0; }
.dir-tree ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
.dir-tree li { margin: 0; border-bottom: 1px solid #191919; }

/* Whole row is clickable: the expander is the <a> itself */
.dir-tree-cat, .dir-tree-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 6px;
  color: #d4d0c8;
  text-decoration: none;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 1px solid transparent;
}
.dir-tree-cat:hover, .dir-tree-link:hover {
  background: #141414;
  color: #ff6b6b;
  border-bottom-color: #c03030;
}
.dir-tree-toggle {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: 0.4rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #c03030;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.dir-tree-toggle:hover { color: #ff6b6b; }
.dir-tree-toggle:focus-visible { outline: 1px solid #c03030; }
/* + when closed, - when opened. Driven by aria-expanded on the parent <a>. */
.dir-tree-cat .dir-tree-toggle::before { content: "+"; }
.dir-tree-cat[aria-expanded="true"] .dir-tree-toggle::before { content: "\2212"; }
/* Subcategory rows have no toggle marker — indent only. */
.dir-tree-link .dir-tree-toggle::before { content: ""; }

/* Active category highlighted in main + sidebar (server-side, current page) */
.dir-tree .dir-tree-cat.is-active,
.dir-tree .dir-tree-link.is-active {
  background: rgba(192,48,48,0.14);
  border-left: 3px solid #c03030;
  padding-left: 5px;
  color: #e8e4e0;
}
/* Clicked/selected state (client-side) — same treatment as is-active so the
   user sees the row they clicked stay highlighted. */
.dir-tree .dir-tree-cat.is-selected {
  background: rgba(192,48,48,0.18);
  border-left: 3px solid #c03030;
  padding-left: 5px;
  color: #e8e4e0;
}
.dir-tree .dir-tree-link.is-selected {
  background: rgba(192,48,48,0.16);
  border-left: 3px solid #c03030;
  padding-left: 5px;
  color: #ff6b6b;
}
.dir-tree-count { margin-left: auto; color: #666; font-size: 0.65rem; }

/* --- Subcategory groups within the listing --------------------
   Entries are grouped client-side into sub-sections that mirror the
   sidebar tree. The .dir-subgroup holds only .dir-list-item rows (kept
   pixel-identical); the heading is a smaller sibling of the section titles. */
.dir-list { list-style: none; margin: 0; padding: 0; }
.dir-subgroup { min-width: 0; }
.dir-subgroup-head {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.98rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #c03030;
  margin: 32px 0 10px;
  padding: 8px 4px;
  border-bottom: 1px solid #2a2a2a;
}
.dir-subgroup-head::before {
  content: "// ";
  color: #666;
}
.dir-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;      /* keep the row inline where possible */
  gap: 0 12px;
  padding: 12px 8px;
  border-bottom: 1px solid #1a1a1a;
}
.dir-list-item:hover { background: #141414; }
.dir-list-sigil { flex-shrink: 0; color: #c03030; font-size: 0.95rem; }
/* status-colored sigil */
.dir-list-sigil.sigil-verified { color: #66bb6a; }
.dir-list-sigil.sigil-sponsored { color: #ff6b6b; }
.dir-list-title {
  font-size: 1.12rem;
  font-weight: 700;
  color: #e8e4e0;
  text-decoration: none;
  letter-spacing: 0.5px;
}
.dir-list-title:hover { color: #ff6b6b; border-bottom-color: #ff6b6b; }
.dir-list-ext {
  flex-shrink: 0;
  color: #666;
  text-decoration: none;
  font-size: 0.98rem;
  display: inline-flex;
  align-items: center;
}
.dir-list-ext:hover { color: #ff6b6b; }
.dir-list-dash { color: #444; flex-shrink: 0; }
.dir-list-desc {
  color: #999;
  font-size: 1.02rem;
  flex: 1 1 40%;              /* wraps to its own line on narrow widths */
  min-width: 180px;
}
.dir-list-date {
  flex-shrink: 0;
  color: #666;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  margin-left: auto;
}

/* --- Filter bar (category page) --------------------------------- */
.dir-filter { margin: 14px 0 32px; padding: 0 0 26px; border-bottom: 1px solid #2a2a2a; }
.dir-filter-form { display: flex; flex-wrap: wrap; gap: 12px; }
.dir-filter-input {
  flex: 1;
  min-width: 200px;
  padding: 11px 14px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.05rem;
  color: #e8e4e0;
  background: #0e0e0e;
  border: 1px solid #333;
  outline: none;
}
.dir-filter-input:focus { border-color: #c03030; }
.dir-filter-clear {
  padding: 11px 18px;
  border: 1px solid #333;
  border-radius: 999px;
  background: #141414;
  color: #d4d0c8;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
.dir-filter-clear:hover { border-color: #c03030; }

.dir-no-results { border: 1px solid #333; background: #141414; padding: 20px; color: #999; font-size: 1.05rem; }

/* --- Active subcategory filter indicator -------------------------
   Shown above the listing when a subcategory is selected from the
   sidebar. Lets the user see what they're filtered to and clear it. */
.dir-filter-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 10px 14px;
  border: 1px solid #c03030;
  background: rgba(192,48,48,0.10);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #e8e4e0;
}
.dir-filter-status-label { color: #666; font-weight: 700; }
.dir-filter-status-name { color: #ff6b6b; font-weight: 700; }
.dir-filter-status-clear {
  margin-left: auto;
  padding: 5px 12px;
  border: 1px solid #c03030;
  border-radius: 999px;
  background: transparent;
  color: #d4d0c8;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
.dir-filter-status-clear:hover { background: #c03030; color: #0e0e0e; }

/* --- Home: category quick-nav as rows (not boxes) --------------- */
.dir-cat-nav { list-style: none; margin: 0; padding: 0; }
.dir-cat-nav li { border-bottom: 1px solid #1a1a1a; }
.dir-cat-nav a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 6px;
  color: #e8e4e0;
  text-decoration: none;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.dir-cat-nav a:hover { color: #ff6b6b; background: #141414; }
.dir-cat-nav .dir-cat-nav-sigil { color: #c03030; }

/* --- Home: intro list ------------------------------------------- */
.dir-home-list { margin: 0; padding-left: 22px; }
.dir-home-list li { margin: 8px 0; color: #999; line-height: 1.7; font-size: 0.95rem; }

/* --- Home: sponsored / featured spotlight grids ---------------- */
.dir-spotlight {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.dir-spotlight-item {
  border: 1px solid #333;
  background: #141414;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.dir-spotlight-item:hover { border-color: #c03030; background: #181818; }
.dir-spotlight-sponsored .dir-spotlight-item { border-color: #c03030; }
.dir-spotlight-sponsored .dir-spotlight-item:hover { border-color: #ff6b6b; }
.dir-spotlight-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #e8e4e0;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.3;
}
.dir-spotlight-title:hover { color: #ff6b6b; }
.dir-spotlight-desc {
  color: #999;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

/* --- Entry page ------------------------------------------------- */
.dir-entry-header { border: 1px solid #333; background: #141414; padding: 22px 24px 18px; margin-bottom: 24px; }
.dir-entry-titlebar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px; }
.dir-entry-title { font-size: 1.8rem; margin: 0; }
.dir-entry-tagline { color: #999; margin: 12px 0 0; max-width: 70ch; font-size: 0.98rem; }
.dir-entry-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.dir-sponsored-note, .dir-affiliate-note {
  margin-top: 14px;
  padding: 9px 14px;
  border: 1px solid #c03030;
  font-size: 0.82rem;
  color: #d4d0c8;
  background: rgba(192,48,48,0.08);
}
.dir-affiliate-note { border-color: #b8860b; color: #999; }

.dir-entry-section { margin: 20px 0; }
.dir-entry-body { line-height: 1.75; font-size: 0.98rem; }
.dir-entry-body p { margin: 0 0 14px; }

.dir-verification {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid #2e7d32;
  background: rgba(46,125,50,0.08);
  margin: 18px 0;
}
.dir-verification-badge { color: #66bb6a; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }
.dir-verification-date { color: #999; font-size: 0.85rem; }

.dir-details { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 0; }
.dir-detail { display: contents; }
.dir-detail dt {
  padding: 10px 14px 10px 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #666;
  border-top: 1px solid #222;
}
.dir-detail dd {
  margin: 0;
  padding: 10px 0;
  font-size: 1rem;
  color: #d4d0c8;
  border-top: 1px solid #222;
  word-break: break-word;
}
.dir-detail dd a { color: #c03030; text-decoration: none; }
.dir-detail dd a:hover { text-decoration: underline; }
.dir-detail:first-child dt, .dir-detail:first-child dd { border-top: none; }

.dir-links { display: flex; flex-wrap: wrap; gap: 10px; }
.dir-link {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid #333;
  border-radius: 999px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  color: #d4d0c8;
}
.dir-link:hover { border-color: #c03030; color: #ff6b6b; }

.dir-related { list-style: none; padding: 0; }
.dir-related li { margin: 7px 0; }
.dir-related a { color: #c03030; text-decoration: none; font-size: 0.95rem; }
.dir-related a:hover { text-decoration: underline; }

/* --- Submit page ------------------------------------------------- */
.dir-page-title { margin: 0 0 16px; }
.dir-submit-how p { color: #999; }
.dir-step-list { padding-left: 20px; }
.dir-step-list li { margin: 5px 0; }
.dir-submit-options { padding-left: 20px; }
.dir-submit-options li { margin: 5px 0; }
.dir-note {
  border: 1px solid #333;
  background: #141414;
  padding: 16px 18px;
  color: #999;
  font-size: 0.95rem;
}

/* --- Responsive: collapse fixed header/strip/sidebar on small screens ---- */
@media (max-width: 900px) {
  body[data-section^="directory"] .site-header { position: static; width: auto; }
  body[data-section^="directory"] .dir-strip {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    padding: 8px 16px;
    margin: 0 -16px;
  }
  body[data-section^="directory"] .site-main { padding-top: 48px; }
  body[data-section^="directory"] > .wrapper { padding-right: 16px; padding-left: 16px; }
  body[data-section^="directory"] .site-footer { padding-left: 16px; }
  .dir-layout { display: block; }
  .dir-sidebar {
    position: static;
    top: auto;
    width: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 16px;
    border-right: none;
    border-bottom: 1px solid #2a2a2a;
  }
  .dir-sidebar .dir-toc { overflow: visible; }
  .dir-main { margin-left: 0; margin-right: 0; }
}
@media (max-width: 640px) {
  .dir-list-desc { flex-basis: 100%; }
  .dir-details { grid-template-columns: 1fr; }
  .dir-entry-titlebar { flex-direction: column; }
  .dir-breadcrumb { font-size: 0.7rem; }
  .dir-cat-title { font-size: 1.5rem; }
  .dir-entry-title { font-size: 1.4rem; }
}