/* =============================================================================
   BetterDocs Category Shortcode – Frontend Styles
   Matches BetterDocs' default card design language.
   ============================================================================= */

/* ── Custom properties (override to theme the cards) ── */
:root {
    --bdcs-primary:        #7b52ab;   /* BetterDocs purple */
    --bdcs-primary-light:  #f3eeff;
    --bdcs-border:         #e5e7eb;
    --bdcs-bg:             #ffffff;
    --bdcs-text:           #1f2937;
    --bdcs-text-muted:     #6b7280;
    --bdcs-link:           #7b52ab;
    --bdcs-link-hover:     #5a3a80;
    --bdcs-radius:         12px;
    --bdcs-shadow:         0 1px 4px rgba(0,0,0,.07), 0 4px 18px rgba(0,0,0,.05);
    --bdcs-shadow-hover:   0 4px 12px rgba(123,82,171,.18);
    --bdcs-gap:            24px;
    --bdcs-transition:     .2s ease;
}

/* ── Grid (used by [betterdocs_categories]) ── */
.bdcs-grid {
    display:  grid;
    gap:      var(--bdcs-gap);
}
.bdcs-grid.bdcs-cols-1 { grid-template-columns: 1fr; }
.bdcs-grid.bdcs-cols-2 { grid-template-columns: repeat(2, 1fr); }
.bdcs-grid.bdcs-cols-3 { grid-template-columns: repeat(3, 1fr); }
.bdcs-grid.bdcs-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .bdcs-grid.bdcs-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .bdcs-grid.bdcs-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .bdcs-grid.bdcs-cols-4,
    .bdcs-grid.bdcs-cols-3,
    .bdcs-grid.bdcs-cols-2 { grid-template-columns: 1fr; }
}

/* ── Category card wrapper ── */
.bdcs-category-wrap {
    background:    var(--bdcs-bg);
    border:        1px solid var(--bdcs-border);
    border-radius: var(--bdcs-radius);
    box-shadow:    var(--bdcs-shadow);
    padding:       0;
    display:       flex;
    flex-direction: column;
    transition:    box-shadow var(--bdcs-transition), transform var(--bdcs-transition);
    overflow:      hidden;
}
.bdcs-category-wrap:hover {
    box-shadow: var(--bdcs-shadow-hover);
    transform:  translateY(-2px);
}

/* ── Card header ── */
.bdcs-cat-header {
    display:     flex;
    align-items: center;
    gap:         14px;
    padding:     20px 22px 16px;
    border-bottom: 1px solid var(--bdcs-border);
    background:  var(--bdcs-primary-light);
}

.bdcs-cat-icon {
    flex-shrink: 0;
    width:   52px;
    height:  52px;
    border-radius: 10px;
    background:  var(--bdcs-bg);
    display:     flex;
    align-items: center;
    justify-content: center;
    box-shadow:  0 1px 4px rgba(0,0,0,.08);
    overflow:    hidden;
}
.bdcs-cat-icon img {
    width:  100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}
.bdcs-cat-icon--default {
    color: var(--bdcs-primary);
}
.bdcs-cat-icon--default svg {
    fill: var(--bdcs-primary);
}

.bdcs-cat-title-wrap {
    min-width: 0;
}
.bdcs-cat-title {
    margin:      0 0 4px;
    font-size:   16px;
    font-weight: 700;
    line-height: 1.3;
    color:       var(--bdcs-text);
}
.bdcs-cat-title a {
    color:           var(--bdcs-text);
    text-decoration: none;
    transition:      color var(--bdcs-transition);
}
.bdcs-cat-title a:hover {
    color: var(--bdcs-primary);
}
.bdcs-cat-count {
    font-size:  12px;
    color:      var(--bdcs-text-muted);
}
.bdcs-cat-count strong {
    color: var(--bdcs-primary);
}

/* ── Doc list ── */
.bdcs-doc-list {
    list-style:  none;
    margin:      0;
    padding:     12px 0;
    flex:        1;
}
.bdcs-doc-item {
    margin:  0;
    padding: 0;
}
.bdcs-doc-link {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     8px 22px;
    font-size:   14px;
    color:       var(--bdcs-text);
    text-decoration: none;
    transition:  background var(--bdcs-transition), color var(--bdcs-transition);
    border-radius: 0;
}
.bdcs-doc-link:hover {
    background: var(--bdcs-primary-light);
    color:      var(--bdcs-primary);
}
.bdcs-doc-icon {
    flex-shrink: 0;
    color:       var(--bdcs-primary);
    display:     flex;
    align-items: center;
    opacity:     .7;
}
.bdcs-doc-link:hover .bdcs-doc-icon {
    opacity: 1;
}

.bdcs-no-docs {
    padding: 12px 22px;
    color:   var(--bdcs-text-muted);
    font-size: 13px;
    margin:  0;
    font-style: italic;
}

/* ── Card footer ── */
.bdcs-cat-footer {
    padding:     12px 22px 16px;
    border-top:  1px solid var(--bdcs-border);
    margin-top:  auto;
}
.bdcs-view-all {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    font-size:   13px;
    font-weight: 600;
    color:       var(--bdcs-primary);
    text-decoration: none;
    transition:  gap var(--bdcs-transition);
}
.bdcs-view-all:hover {
    gap: 8px;
}
.bdcs-view-all svg {
    stroke: var(--bdcs-primary);
}

/* ── Sub-categories (full blocks, recursive) ── */
.bdcs-subcat-block {
    border-top: 1px solid var(--bdcs-border);
}
.bdcs-subcat-header {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     10px 22px 8px;
    background:  #fafafa;
}
.bdcs-subcat-indicator {
    width:        3px;
    height:       16px;
    border-radius: 2px;
    background:   var(--bdcs-primary);
    opacity:      .5;
    flex-shrink:  0;
}
.bdcs-subcat-depth-2 .bdcs-subcat-indicator { opacity: .35; }
.bdcs-subcat-depth-3 .bdcs-subcat-indicator { opacity: .2; }

.bdcs-subcat-title {
    margin:      0;
    font-size:   13px;
    font-weight: 700;
    flex:        1;
    color:       var(--bdcs-text);
}
.bdcs-subcat-title a {
    color:           inherit;
    text-decoration: none;
}
.bdcs-subcat-title a:hover {
    color: var(--bdcs-primary);
}
.bdcs-subcat-count {
    font-size:    11px;
    background:   var(--bdcs-primary-light);
    color:        var(--bdcs-primary);
    border-radius: 10px;
    padding:      2px 8px;
    font-weight:  700;
}

/* indent nested levels */
.bdcs-subcat-depth-2 .bdcs-subcat-header { padding-left: 34px; }
.bdcs-subcat-depth-3 .bdcs-subcat-header { padding-left: 46px; }
.bdcs-subcat-depth-2 .bdcs-doc-list--sub .bdcs-doc-link { padding-left: 40px; }
.bdcs-subcat-depth-3 .bdcs-doc-list--sub .bdcs-doc-link { padding-left: 52px; }

.bdcs-cat-header + .bdcs-no-docs {
    display: none;
}

/* ── Misc ── */
.bdcs-notice {
    padding:       12px 16px;
    background:    #fff8e1;
    border-left:   4px solid #ffc107;
    border-radius: 4px;
    color:         #856404;
    font-size:     14px;
    margin:        8px 0;
}