/* ---------- Layout & sidebar ---------- */
@media (min-width: 992px) {
    .sidebar-sticky {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow: auto;
    }
}

/* Scroll offset for anchored sections (works with sticky headers) */
.section-title,
#content-root .privacy-activity-element {
    scroll-margin-top: 140px;
}


/* TOC active emphasis */
#toc .list-group-item.active {
    font-weight: 600;
}

/* ---------- Typographic tweaks ---------- */
#content-root h1.h2 {
    line-height: 1.25;
}

#content-root h2.section-title {
    font-size: 1.5rem;
    margin-bottom: .5rem;
}

#content-root h3 {
    font-size: 1.125rem;
    margin: 0;
}

#content-root h4 {
    font-size: 1rem;
    margin: 0;
    font-weight: 600;
}

#content-root p {
    margin-bottom: .75rem;
}

/* ---------- Privacy activity header row (two tiles) ---------- */
#privacy-activity-box .row > [class*="col-"] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .9rem;
}

#privacy-activity-box img[aria-hidden="true"] {
    width: 75px;
    height: 75px;
    flex: 0 0 auto;
}

/* ---------- Accordion cards (the “pre-accordion” style you liked) ---------- */
.privacy-activity-box {
    background: #fff;
    border-radius: .6rem;
}

.privacy-activity-box-main {
    margin-top: .35rem;
    border-top: 1px dashed #e3e6ec;
    padding-top: .35rem;
}

/* Each item looks like a tidy card with a title bar */
.privacy-activity-element {
    border: 1px solid #e6e8eb;
    border-radius: .6rem;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .2s ease;
}

    .privacy-activity-element + .privacy-activity-element {
        margin-top: .5rem;
    }

    .privacy-activity-element:hover {
        box-shadow: 0 1px 1px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.06);
    }

/* Title bar */
.privacy-activity-element-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .9rem;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(180deg, #fafbff, #f7f8fd);
}

    .privacy-activity-element-title:focus {
        outline: 2px solid #0d6efd33;
        outline-offset: 2px;
    }

    /* Chevron indicator (no images) */
    .privacy-activity-element-title::after {
        content: "›";
        margin-left: auto;
        font-size: 1.25rem;
        line-height: 1;
        transform: rotate(90deg);
        transition: transform .25s ease;
    }

.privacy-activity-element[aria-expanded="true"] .privacy-activity-element-title::after {
    transform: rotate(270deg);
}

/* Animated content reveal (CSS only, no inline JS heights) */
.privacy-activity-element-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    border-top: 1px solid #eef0f4;
    background: #fff;
}

.privacy-activity-element[aria-expanded="true"] .privacy-activity-element-content {
    max-height: 2000px; /* big enough for content */
}

/* Inner content spacing */
.privacy-activity-element-text {
    padding: .9rem .9rem 1rem;
}

    .privacy-activity-element-text ul {
        margin-bottom: .5rem;
    }

    .privacy-activity-element-text p:last-child {
        margin-bottom: 0;
    }

/* Table tweaks */
.table-sm th, .table-sm td {
    vertical-align: top;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
    .privacy-activity-element-content {
        transition: none;
    }

    .privacy-activity-element-title::after {
        transition: none;
    }
}


/* --- Left label panel (matches screenshot motif) --- */
.dpj-side-label {
    background: #C74900;
    border-radius: .5rem;
    padding: 1rem 1rem;
    display: flex;
    align-items: center;
    min-height: 100%;
}

.dpj-side-label-inner h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
    font-weight: 700;
    color: white;
}

/* Section spacing & anchors */
.dpj-section {
    margin-bottom: 1.25rem;
}

    .dpj-section .col-md-9 > h2,
    .dpj-section .col-md-9 > .section-title {
        margin-top: 0;
    }

/* --- Two-column flowing text without changing the words --- */
@media (min-width: 768px) {
    .dpj-columns-md-2 {
        column-count: 2;
        column-gap: 2rem;
    }

        .dpj-columns-md-2 > * {
            break-inside: avoid;
        }
}

/* Make in-page anchors settle below sticky header / top spacing */
#content-root section[id],
#content-root .section-title,
#content-root [id^="privacy-activity-"],
#content-root .privacy-activity-element {
    scroll-margin-top: 140px; /* match JS offset */
}

#content-root {
    position: relative;
}