/* ============================================================
   Olliers Related Content — Frontend Styles
   Designed to match the existing Olliers sidebar aesthetic.
   ============================================================ */

.orc-related-sidebar {
    margin-top: -20px; /* Aligns with main content top in Elementor sidebar */
}

.orc-related-section {
    margin-bottom: 28px;
}

.orc-related-section:last-child {
    margin-bottom: 0;
}

.orc-section-heading {
    font-size: 18px;
    font-weight: 700;
    color: #1a2744;     /* Olliers navy */
    margin: 0 0 12px;
    padding: 0;
    line-height: 1.3;
}

.orc-related-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.orc-related-item {
    padding: 4px 0;
    position: relative;
    padding-left: 14px;
}

/* Bullet matching existing sidebar style */
.orc-related-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #1a2744;
}

.orc-related-link {
    color: #1a2744;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    transition: color 0.15s;
    display: inline-block;
}

.orc-related-link:hover {
    color: #c8102e;     /* Olliers red */
    text-decoration: none;
}

.orc-related-link span {
    /* itemprop="name" wrapper — no extra styling needed */
}

/* Admin-only placeholder ----------------------------------- */
.orc-placeholder {
    border: 2px dashed #fca5a5;
    border-radius: 6px;
    background: #fff8f8;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.orc-placeholder-inner {
    text-align: center;
}

.orc-placeholder-icon {
    display: block;
    font-size: 22px;
    margin-bottom: 6px;
    opacity: 0.5;
}

.orc-placeholder strong {
    display: block;
    font-size: 13px;
    color: #dc2626;
    margin-bottom: 4px;
}

.orc-placeholder p {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 10px;
}

.orc-placeholder-link {
    display: inline-block;
    background: #1d4ed8;
    color: #fff;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.15s;
}

.orc-placeholder-link:hover {
    background: #1e40af;
    color: #fff;
    text-decoration: none;
}

/* ============================================================
   Responsive — nothing needed, it's a sidebar list.
   Full-width inline placement inherits from column context.
   ============================================================ */

/* ============================================================
   Hierarchical collapsible children — Option A (full-width row + count badge)
   ============================================================ */

/* Normal item row (no children) */
.orc-related-item-row {
    display: flex;
    align-items: center;
}

/* Suppress bullet on parent items — the full-width button replaces it */
.orc-has-children::before {
    display: none;
}

/* Full-width parent button */
.orc-parent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #f0f3f8;
    border: 1px solid #dde3ee;
    border-radius: 5px;
    padding: 6px 10px 6px 10px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
    margin: 1px 0;
}

.orc-parent-row:hover {
    background: #e2e8f3;
    border-color: #b8c5de;
}

.orc-parent-row:hover .orc-related-link {
    color: #c8102e;
}

/* Link inside the button — click goes to page, not toggle */
.orc-parent-row .orc-related-link {
    flex: 1;
    font-size: 14px;
    color: #1a2744;
    text-decoration: none;
    pointer-events: auto;
}

/* Count badge: +6 / -6 */
.orc-child-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    background: #1a2744;
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 8px;
    transition: background 0.15s;
    letter-spacing: 0.02em;
}

.orc-parent-row:hover .orc-child-count {
    background: #c8102e;
}


/* +/- prefix set by JS via textContent */
.orc-parent-row .orc-child-count {
    font-variant-numeric: tabular-nums;
}

/* Children container */
.orc-children-list {
    margin: 4px 0 4px 0;
    padding: 0 0 0 14px;
    list-style: none;
    border-left: 2px solid #dde3ee;
}

.orc-child-item {
    padding: 3px 0;
}

.orc-child-item::before {
    display: none;
}

.orc-child-link {
    font-size: 13px;
    color: #374151;
    text-decoration: none;
}

.orc-child-link:hover {
    color: #c8102e;
}