/*
Theme Name: Deshi Organic Directory
Theme URI: https://deshi.organic/
Author: Raz + ChatGPT
Author URI: https://deshi.organic/
Description: A no-dependency, lightweight directory grid theme to list product landing pages as cards (path, subdomain, or external domains). Uses a custom post type "Directory Items" with a Target URL field and featured image for the banner.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: deshi-directory
Tags: minimal, grid, directory, portfolio, cards
*/

:root{
  --bg: #0b0e14;
  --card: #ffffff;
  --cardBorder: #e5e7eb;
  --muted: #6b7280;
  --text: #111827;
  --brand: #0ea5a4; /* teal */
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0e14;
    --card: #111827;
    --cardBorder: #1f2937;
    --muted: #9ca3af;
    --text: #e5e7eb;
  }
}

html, body { height: 100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.wrap{max-width:1200px;margin-inline:auto;padding:24px}

header.deshi-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:var(--brand);color:#fff;font-weight:800
}
h1.site-title{font-size:clamp(22px,4vw,30px);margin:0}
.tag{color:var(--muted);font-size:14px}

.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search{position:relative}
.search input{
  background: var(--card);
  color: var(--text);
  border:1px solid var(--cardBorder);
  outline:none;border-radius:10px;padding:10px 12px 10px 36px;min-width:260px
}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.6}
.badge{
  padding:6px 10px;border-radius:999px;border:1px solid var(--cardBorder);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.04));
  color:var(--muted);font-size:12px
}

.grid{
  display:grid;gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.card{ 
  display:block;background:var(--card); border:1px solid var(--cardBorder); border-radius:16px; overflow:hidden;
  text-decoration:none;color:inherit; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 12px 30px rgba(0,0,0,.08);
}
.card:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.card:hover{ transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 12px 30px rgba(14,165,164,.25); }

.thumb{ width:100%; aspect-ratio: 16 / 9; object-fit: cover; background:#111; display:block }
.meta{ padding:12px 14px }
.title{ font-weight:700; font-size:16px; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.empty{ display:none; text-align:center; color:var(--muted); padding:30px }

footer.deshi-footer{margin-top:28px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.nano{font-size:12px;color:var(--muted)}

/* Utility: visually-hidden for a11y labels */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}