/* Shared person block styles */
.od-person {
    margin: 0 0 14px;
}

.od-person-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.od-person-link:focus,
.od-person-link:hover {
    text-decoration: none; /* keep it clean */
}

.od-person__details {
    margin: 0 0 14px;
}

.od-person__label {
    line-height: 1.2;
    font-weight: 600;
    color: #F68B1F; /* OrangeQC brand */
    margin-bottom: 2px;
}

.od-person__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.od-person__avatar {
    width: 45px;
    height: 45px !important;
    border-radius: 50% !important;
    object-fit: cover;
    flex: 0 0 45px;
    background: #f3f4f6;
}

/* Placeholder when no profile image exists */
.od-person__avatar--placeholder {
    display: inline-block;
    width: 45px;
    height: 45px !important;
    border-radius: 50% !important;
    background: #d1d5db;
}

h3.od-person__name {
    font-size: 23px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 15px;
}

/* -------- Full layout (large headshot + bio) -------- */
.od-person--full .od-person__row {
    align-items: center; /* vertical center for full layout */
    gap: 50px;
}

.od-person__avatar--xl {
    width: 220px;
    height: 220px !important;
    border-radius: 50% !important;
    flex: 0 0 220px;
}

.od-person__content {
    display: flex;
    flex-direction: column;
}

.od-person__bio {
    margin-top: 0; /* No extra gap below h3 */
    max-width: 62ch;
}

@media (max-width: 768px) {
    .od-person__avatar--xl {
        width: 160px !important;
        height: 160px !important;
        flex-basis: 160px !important;
    }

    .od-person--full .od-person__row {
        align-items: flex-start;
        gap: 50px;
        flex-direction: column;
        gap: 20px;
    }
}


/* -------- Resources archive / listing -------- */
.resource-posts h3.elementor-post__title {
    font-size: 23px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.resource-posts .elementor-post__meta-data {
    display: none;
}

.resources.two-column-content-wrapper h3.elementor-heading-title {
    font-size: 23px;
}

/* -------- Sticky TOC sidebar (single resources) -------- */
#sidebar-toc {
    margin-top: -32px;
}

#sidebar-toc .elementor-toc__list-wrapper {
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
    #sidebar-toc {
        margin-top: 0;
    }
}

/* -------- Single resource typography + tables -------- */
body.single-resources p,
body.single-resources li,
body.single-resources td,
body.single-resources th {
    font-size: 16px;
}

body.single-resources th {
    font-weight: bold;
}

body.single-resources table th,
body.single-resources table td {
    padding: 8px;
}

body.single-resources table tr {
    border-bottom: 1px solid #808080;
}

/* Make resource tiles fully clickable via a stretched anchor.
   Keyboard, right-click, and screen readers all work because the
   real <a> is what's covering the card — no JS hijack needed. */
.elementor-post.resources {
    position: relative;
}

.elementor-post.resources .elementor-post__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Any other interactive element inside the card must sit above the overlay */
.elementor-post.resources a:not(.elementor-post__title a),
.elementor-post.resources button {
    position: relative;
    z-index: 2;
}

.elementor-post.resources:hover img {
    opacity: 0.75;
    transition: opacity 0.2s ease-in-out;
}