/* APS Site Styles - Wagtail Edition */
/* Cleaned from WordPress original, December 2024 */

/* ============================================
   FONTS
   ============================================ */
@import url("https://use.typekit.net/dvt1uyd.css");

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
    /* Colors */
    --aps-text:         #5A5A5A;
    --aps-link:         #cb3b2d;
    --aps-link-hover:   #5A5A5A;
    --aps-blue:         #3a53a4;
    --aps-orange:       #FFA800;
    --aps-orange-alt:   #f26522;
    --aps-green:        #7ebd01;
    --aps-footer:       #284b63;
    --aps-footer-nav:   #2A628F;
    --aps-white:        #FFFFFF;
    --aps-light-gray:   #f2f2f2;
    --aps-border-gray:  #ddd;
    --aps-cream:        #fffdd0;

    /* Accessible variants of two brand colours (WCAG 2.1 AA, 4.5:1 on white).
       The greys #777/#888/#999 scattered through the stylesheets measure
       4.47, 3.54 and 2.85 against white — all below the 4.5 needed for body
       text. --aps-text-muted is the single replacement at 5.33.
       --aps-green (#7ebd01) reads at 2.29 and cannot be used for text at all;
       --aps-green-dark keeps the brand hue at 5.56. The original green remains
       correct for borders and fills, which have no contrast minimum here. */
    --aps-text-muted:   #6b6b6b;
    --aps-green-dark:   #4e7300;

    /* Typography */
    --font-family:      "azo-sans-web", sans-serif;
    --font-size-base:   1.1em;
    --line-height-base: 1.3em;

    /* Spacing */
    --space-xs:  7px;
    --space-sm:  9px;
    --space-md:  19px;
    --space-lg:  29px;
    --space-xl:  39px;

    /* Container */
    --container-max:    1679px;
}

/* ============================================
   BASE RESET & TYPOGRAPHY
   ============================================ */
body {
    font-family: var(--font-family);
    color: var(--aps-text);
}

p {
    color: var(--aps-text);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    text-transform: none;
}

a {
    color: var(--aps-link);
    text-decoration: none;
}

/* WCAG 2.1 SC 1.4.1 (Use of Color).
   The link red (#cb3b2d) sits at 1.38:1 against body text (#5A5A5A) — nowhere
   near the 3:1 that would let colour alone mark a link inside a paragraph. So
   links in running text carry an underline. This is scoped to <main>, and to
   the elements that actually hold prose, so navigation, buttons and card
   affordances — which are standalone controls, not links embedded in text —
   keep their existing treatment. */
main p a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link),
main li a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link),
main dd a:not(.btn),
main td a:not(.btn),
main blockquote a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--aps-link-hover);
}

td {
    color: var(--aps-text);
    font-family: var(--font-family);
    font-size: 1.2em;
    line-height: 1.8em;
    font-weight: 400;
}

/* ============================================
   CONTAINER
   ============================================ */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

@media (min-width: 1679px) {
    .container {
        padding: 0;
    }
}

/* ============================================
   HEADER STYLES (Left Border Accent Pattern)
   ============================================ */

/* Main page header - large, red accent */
.main-page-header {
    font-weight: 400;
    font-size: 3em;
    margin-bottom: var(--space-md);
    padding-left: var(--space-xs);
    border-left: 3px solid var(--aps-link);
    line-height: 1em;
    letter-spacing: 0.01em;
}

/* Page top header - consistent red accent on all pages */
.page-top-header {
    font-weight: 300;
    font-size: 2em;
    margin-bottom: var(--space-lg);
    padding-left: var(--space-sm);
    margin-left: 0;
    border-left: 8px solid var(--aps-link);
    line-height: 1em;
    letter-spacing: 0.01em;
}

/* Secondary page header - no accent */
.secondary-page-header {
    font-weight: 400;
    font-size: 1.8em;
    margin-bottom: var(--space-md);
    line-height: 1em;
    letter-spacing: 0.01em;
    margin-top: 0;
}

/* Secondary header with top padding */
.secondary-header {
    font-weight: 400;
    font-size: 1.8em;
    padding-top: var(--space-md);
    margin-bottom: var(--space-md);
    line-height: 1em;
    letter-spacing: 0.01em;
}

/* Secondary homepage header - blue accent */
.secondary-homepage-header-left {
    font-weight: 600;
    font-size: 1.5em;
    margin-bottom: var(--space-md);
    padding-left: var(--space-xs);
    border-left: 4px solid var(--aps-blue);
    line-height: 1em;
    letter-spacing: 0.01em;
    margin-top: 0;
}

/* Smaller blue accent header */
.secondary-homepage-header-left-2 {
    font-weight: 600;
    font-size: 1.3em;
    margin-bottom: var(--space-md);
    padding-left: var(--space-xs);
    border-left: 4px solid var(--aps-blue);
    line-height: 1em;
    letter-spacing: 0.01em;
    margin-top: var(--space-xl);
}

/* News header - orange accent */
.news-header {
    font-weight: 600;
    color: var(--aps-blue);
    font-size: 1.2em;
    margin-bottom: var(--space-md);
    padding-left: var(--space-xs);
    border-left: 4px solid var(--aps-orange);
    line-height: 1em;
    letter-spacing: 0.03em;
    margin-top: 0;
}

/* Publication info header - orange accent */
.publication-info {
    font-weight: 600;
    font-size: 1.3em;
    margin-bottom: 17px;
    padding-left: var(--space-xs);
    border-left: 4px solid var(--aps-orange);
    line-height: 1em;
    letter-spacing: 0.03em;
    margin-top: var(--space-md);
}

/* Media header - orange-alt accent */
.media-header-four {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
    font-weight: 600;
    font-size: 1.6em;
    padding-left: var(--space-xs);
    border-left: 7px solid var(--aps-orange-alt);
    line-height: 1em;
    letter-spacing: 0.01em;
}

/* Social header - green accent */
.social-header {
    font-weight: 600;
    color: var(--aps-text);
    font-size: 1.2em;
    margin-top: var(--space-xl);
    padding-left: var(--space-xs);
    border-left: 4px solid var(--aps-green);
    line-height: 1em;
    letter-spacing: 0.05em;
}

/* Memoriam header */
.memoriam-header {
    font-weight: 400;
    font-size: 1.8em;
    margin-bottom: var(--space-sm);
    line-height: 1em;
    letter-spacing: 0.01em;
}

/* Detail page subheader - blue accent (used on research, postdoc, pioneer, student detail pages) */
.detail-subheader {
    font-size: 1.4em;
    font-weight: 600;
    padding-left: 8px;
    border-left: 4px solid var(--aps-blue);
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--aps-text);
    line-height: 1.2em;
}

/* Article body heading - orange accent (for use inside body/article content fields) */
.article-heading {
    font-size: 1.3em;
    font-weight: 600;
    padding-left: 8px;
    border-left: 4px solid var(--aps-orange);
    margin-top: var(--space-sm);
    margin-bottom: 12px;
    color: var(--aps-text);
    line-height: 1.2em;
}

/* ============================================
   TEXT UTILITY CLASSES
   ============================================ */

.intro {
    font-size: 1.5em;
    line-height: 1.3em;
}

.welcome {
    color: var(--aps-text);
    font-family: var(--font-family);
    font-size: 1.5em;
    line-height: 1.4em;
    font-weight: 400;
}

.subheader {
    font-size: 1.5em;
    line-height: 1.7em;
    font-weight: 600;
}

.small {
    color: var(--aps-text);
    font-family: var(--font-family);
    font-size: 0.9em;
    line-height: 1.3em;
    font-weight: 400;
}

.justify {
    text-align: justify;
    font-size: 1.3em;
    line-height: 1.4em;
}

.bullet-type {
    color: var(--aps-text);
    font-family: var(--font-family);
    font-size: 1.2em;
    line-height: 1.4em;
    font-weight: 400;
}

.setting {
    color: var(--aps-text);
    font-family: var(--font-family);
    font-size: 1.2em;
    line-height: 1.4em;
    font-weight: 400;
}

.location {
    color: var(--aps-text);
    font-family: var(--font-family);
    font-size: 1.2em;
    line-height: 1.4em;
    font-weight: 400;
}

.sidebar {
    color: var(--aps-text);
    font-family: var(--font-family);
    font-size: 1em;
    line-height: 1.4em;
    font-weight: 400;
}

.labinfo {
    font-size: 0.9em;
    margin-top: var(--space-sm);
    font-style: italic;
    font-weight: 600;
}

.year {
    color: var(--aps-blue);
    font-family: var(--font-family);
    font-size: 2em;
    line-height: 1.4em;
    font-weight: 600;
}

.tagline {
    color: var(--aps-text);
    font-family: var(--font-family);
    font-size: 1.6em;
    line-height: 1.4em;
    font-weight: 400;
}

/* ============================================
   PEOPLE / PROFILES
   ============================================ */

/* Postdoc article tagline — italic standfirst used in body HTML generated by APS-MATRIX */
.postdoc-tagline {
    font-style: italic;
    font-size: 0.95em;
    color: #666;
    margin-bottom: var(--space-md);
}

.people-name {
    font-weight: 300;
    font-size: 2em;
    line-height: 1.2em;
    letter-spacing: 0.05em;
    margin: var(--space-md) 0 var(--space-xs) 0;
}

.people-title {
    font-weight: 700;
}

.person-descript {
    font-weight: 600;
    font-size: 2em;
    margin-bottom: var(--space-md);
    margin-left: 0;
    line-height: 1em;
    letter-spacing: 0.01em;
    color: var(--aps-blue);
}

.work-location {
    font-weight: 400;
    font-size: 1.8em;
    padding-top: 0;
    font-style: italic;
    margin-bottom: var(--space-md);
    line-height: 1em;
    margin-left: 21px;
    letter-spacing: 0.01em;
}

.chair-head {
    color: var(--aps-text);
    font-family: var(--font-family);
    font-size: 1.2em;
    line-height: 1.4em;
    font-weight: 700;
    padding-top: 5px;
}

.chair {
    color: var(--aps-text);
    font-family: var(--font-family);
    font-size: 1.2em;
    line-height: 1.4em;
    font-weight: 400;
    padding-top: 5px;
}

/* ============================================
   LISTS
   ============================================ */

li.litlist {
    color: var(--aps-text);
    font-family: var(--font-family);
    font-size: 1em;
    line-height: 1.3em;
    font-weight: 400;
    margin-bottom: var(--space-sm);
}

.ul-link-text {
    font-size: 1.2em;
}

/* ============================================
   TABLES
   ============================================ */

.aps-table {
    border-collapse: collapse;
    width: 100%;
}

.aps-table th,
.aps-table td {
    border: 1px solid var(--aps-border-gray);
    padding: 8px;
}

.aps-table th {
    background-color: #e0e0e0;
    text-align: left;
}

.aps-table tbody tr:nth-child(even) {
    background-color: var(--aps-light-gray);
}

.iam-table {
    color: var(--aps-text);
    font-family: var(--font-family);
    font-size: 0.8em;
    line-height: 0.8em;
    font-weight: 400;
    border: none;
    border-collapse: collapse;
    width: 70%;
}

.iam-table td {
    border: none;
    vertical-align: top;
}

/* ============================================
   BACKGROUND BOXES
   ============================================ */

.backgrblue {
    background: rgba(75, 156, 211, 0.2);
    padding: var(--space-lg);
    border-radius: 9px;
    border: 1px solid #555555;
}

.backgrgray {
    background: rgba(153, 153, 152, 0.2);
    padding: var(--space-lg);
    border-radius: 9px;
    border: 1px solid #555555;
}

.rounded {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.disclaimer-box {
    padding: var(--space-lg) var(--space-lg) var(--space-sm) var(--space-lg);
    border: 1px solid red;
    margin-bottom: var(--space-md);
    background-color: var(--aps-cream);
}

.panel-title {
    background-color: var(--aps-link);
    padding: 12px;
    margin-bottom: var(--space-lg);
}

.panel-title p {
    font-weight: 700;
    font-size: 1.8em;
    color: var(--aps-white);
    margin: 0;
}

/* ============================================
   IMAGE ALIGNMENT
   ============================================ */

.img-align {
    margin-top: 45px;
    max-width: 100%;
    height: auto;
    display: block;
}

.align-right {
    float: right;
    margin-left: 15px;
    max-width: 100%;
    height: auto;
    padding-bottom: var(--space-sm);
}

.float-center {
    margin: var(--space-lg) 0;
    text-align: center;
}

.float-center img {
    width: auto;
    height: auto;
    max-width: 100%;
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

.nopad {
    padding: 0 var(--space-lg) 0 0;
}

.nopad-none {
    padding: 0;
}

/* ============================================
   DIVIDERS
   ============================================ */

hr.blue {
    border: none;
    border-top: 1px solid rgba(58, 83, 164, 1);
    margin: var(--space-xl) 0 var(--space-md) 0;
}

/* ============================================
   VIDEO EMBEDS
   ============================================ */

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.iframecontainer {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* ============================================
   STICKY SIDEBAR
   ============================================ */

.floating-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}

/* ============================================
   NAVBAR
   ============================================ */

.navbar {
    min-height: 100px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    z-index: 10;
}


.navbar-brand img {
    height: 70px;
    max-height: 70px;
    width: auto;
}

.navbar .nav-link {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #000000;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #FFA500;
}

.navbar .nav-link.active,
.navbar .nav-item.show > .nav-link,
.navbar .nav-link[aria-expanded="true"] {
    color: #CB3B2D !important;
}

.navbar .dropdown-item {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 0.95rem;
    text-transform: none;
    color: #000000;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: #DCDCDC;
    color: #000000;
}

/* ============================================
   FOOTER
   ============================================ */

#colophon,
.site-footer {
    background-color: var(--aps-footer);
}

#footer-nav,
.footer-nav {
    background-color: var(--aps-footer-nav);
}

/* ============================================
   BUTTONS - APS Blue Override
   ============================================ */

.btn-outline-primary {
    color: var(--aps-blue);
    border-color: var(--aps-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--aps-blue);
    border-color: var(--aps-blue);
    color: var(--aps-white);
}

.btn-primary {
    background-color: var(--aps-blue);
    border-color: var(--aps-blue);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #2d4283;
    border-color: #2d4283;
}

/* Nav Pills - APS Blue */
.nav-pills .nav-link {
    color: var(--aps-blue);
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
    color: #2d4283;
}

.nav-pills .nav-link.active {
    background-color: var(--aps-blue);
    color: var(--aps-white);
}

/* Pagination - APS Blue */
.page-link {
    color: var(--aps-blue);
}

.page-link:hover,
.page-link:focus {
    color: #2d4283;
}

.page-item.active .page-link {
    background-color: var(--aps-blue);
    border-color: var(--aps-blue);
}

/* ============================================
   RESEARCH CARDS - Flexbox Grid
   ============================================ */

.research-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
}

.research-card-link {
    text-decoration: none;
    color: inherit;
    flex: 0 0 calc(50% - 0.5rem);  /* Mobile: 2 per row */
    max-width: calc(50% - 0.5rem);
}

/* ============================================
   CARD IMAGES
   ============================================ */

/* Card images carry width/height attributes so the browser can reserve a
   correctly shaped box before the file arrives. Bootstrap's .card-img-top sets
   width: 100% but no height, so without this rule the height attribute becomes
   the rendered height and the image is stretched or squashed to whatever the
   column happens to be. The attributes and height: auto need each other:
   together they give an aspect ratio, either one alone distorts or reflows. */
.card-img-top,
.card-img-bottom,
.card-img {
    height: auto;
}

.research-card {
    height: 100%;
}

.research-card .card-img-top {
    aspect-ratio: 400 / 275;
    object-fit: cover;
    width: 100%;
}

.research-card .card-img-placeholder {
    aspect-ratio: 400 / 275;
    width: 100%;
}

.research-card .card-title {
    color: var(--aps-text);
    font-weight: 600;
    font-size: 1em;
    line-height: 1.2;
}

.research-card-link:hover .card {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: box-shadow 0.2s ease;
}

.research-view-all .card {
    min-height: 150px;
    background-color: var(--aps-light-gray);
}

/* Tablet: 3 per row */
@media (min-width: 576px) {
    .research-card-link {
        flex: 0 0 calc(33.333% - 0.667rem);
        max-width: calc(33.333% - 0.667rem);
    }
}

/* Desktop: 4 per row */
@media (min-width: 768px) {
    .research-card-link {
        flex: 0 0 calc(25% - 0.75rem);
        max-width: calc(25% - 0.75rem);
    }
}

/* Large Desktop: 6 per row */
@media (min-width: 1200px) {
    .research-card-link {
        flex: 0 0 calc(16.666% - 0.833rem);
        max-width: calc(16.666% - 0.833rem);
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .img-align {
        margin-top: 20px;
    }

    .align-right {
        float: none;
        margin: 0 auto;
        display: block;
    }

    .float-center img {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 576px) {
    .img-align {
        margin-top: 10px;
    }
}

/* ============================================
   MERRIFIELD ESSAY PAGE
   ============================================ */
.template-merrifield-essay .lead {
    font-size: 1.15rem;
    margin-bottom: 1.5rem;
}

.merrifield-media-sidebar {
    padding: 1.5rem;
    position: sticky;
    top: 100px;
}

.merrifield-media-sidebar .sidebar-header {
    color: var(--aps-blue, #3a53a4);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--aps-orange, #FFA800);
}

.merrifield-media-sidebar .media-item a {
    display: block;
    transition: transform 0.2s ease;
}

.merrifield-media-sidebar .media-item a:hover {
    transform: scale(1.02);
}

.merrifield-media-sidebar .media-item img {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.merrifield-media-sidebar .media-caption {
    font-size: 0.9rem;
    color: var(--aps-text, #5A5A5A);
}

@media (max-width: 991.98px) {
    .merrifield-media-sidebar {
        position: static;
        margin-top: 2rem;
    }
}

/* ============================================
   STUDENT ACTIVITIES COMMITTEE PAGE
   ============================================ */
.template-student-activities .sac-subheader {
    color: var(--aps-blue, #3a53a4);
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
    border-left: 4px solid var(--aps-orange, #FFA800);
}

.template-student-activities h3.sac-subheader {
    font-size: 1.1rem;
    border-left: none;
    padding-left: 0;
}

.template-student-activities .sac-person {
    margin-bottom: 1rem;
}

.template-student-activities .sac-sidebar-header {
    color: var(--aps-blue, #3a53a4);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--aps-orange, #FFA800);
}

.template-student-activities .sac-image-block {
    margin-bottom: 1rem;
}

.template-student-activities .sac-image-block img {
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.template-student-activities .sac-caption {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.5rem;
    line-height: 1.5;
}

.template-student-activities .sac-divider {
    border: 0;
    border-top: 2px solid var(--aps-blue, #3a53a4);
    margin: 1.5rem 0;
}

/* ============================================
   IN MEMORIAM PAGES
   ============================================ */

/* Index Page - Card Layout */
.memoriam-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.memoriam-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.memoriam-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.memoriam-photo-link {
    display: block;
}

.memoriam-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 973/1200;
    object-fit: cover;
    object-position: center top;
    border-radius: 8px 8px 0 0;
}

.memoriam-photo-placeholder {
    width: 100%;
    aspect-ratio: 973/1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    border-radius: 8px 8px 0 0;
    color: #adb5bd;
    font-size: 3rem;
}

.memoriam-info {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.memoriam-name {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.memoriam-name a {
    color: var(--aps-blue, #3a53a4);
    text-decoration: none;
}

.memoriam-name a:hover {
    text-decoration: underline;
}

.memoriam-blurb {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    flex-grow: 1;
    margin-bottom: 0.75rem;
}

.memoriam-read-more {
    font-size: 0.85rem;
    color: var(--aps-link, #cb3b2d);
    text-decoration: none;
    font-weight: 500;
}

.memoriam-read-more:hover {
    text-decoration: underline;
}

/* Detail Page */
.memoriam-detail-photo-container {
    position: sticky;
    top: 100px;
}

.memoriam-detail-photo {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.memoriam-detail-photo-placeholder {
    width: 100%;
    aspect-ratio: 4/5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    border-radius: 8px;
    color: #adb5bd;
    font-size: 5rem;
}

.memoriam-detail-name {
    color: var(--aps-blue, #3a53a4);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--aps-orange, #FFA800);
}

.memoriam-detail-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
}

.memoriam-detail-content p {
    margin-bottom: 1rem;
}

/* Navigation to other entries */
.memoriam-nav-section h4 {
    font-size: 1rem;
}

.memoriam-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.memoriam-nav-item:hover {
    opacity: 0.8;
}

.memoriam-nav-photo {
    width: 80px;
    height: 100px;
    object-fit: cover;
    object-position: top;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.memoriam-nav-placeholder {
    width: 80px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    border-radius: 4px;
    color: #adb5bd;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.memoriam-nav-name {
    font-size: 0.8rem;
    color: var(--aps-text, #5A5A5A);
    text-align: center;
}

@media (max-width: 991.98px) {
    .memoriam-detail-photo-container {
        position: static;
        margin-bottom: 1.5rem;
    }
}

/* ============================================
   NEWS ITEMS (Homepage Sidebar)
   ============================================ */

.news-item {
    /* Container for each news item */
}

.news-item-title {
    font-weight: 600;
    font-size: 1.1em;
    margin-bottom: var(--space-sm);
    padding-left: var(--space-xs);
    border-left: 4px solid var(--aps-green);
    line-height: 1.2em;
    letter-spacing: 0.01em;
    color: var(--aps-text);
}

.news-item-image {
    width: 100%;
    height: auto;
    margin-bottom: var(--space-md);
    display: block;
    border-radius: 6px;
}

.news-item-body {
    font-size: 0.95em;
    line-height: 1.4em;
    color: var(--aps-text);
    margin-bottom: var(--space-sm);
}

.news-item-body p {
    margin-bottom: 0.5em;
    font-size: inherit;
    line-height: inherit;
}

/* ============================================
   IMAGE LIGHTBOX
   ============================================ */
.lightbox-link {
    cursor: zoom-in;
    display: block;
}

.lightbox-link img {
    transition: opacity 0.2s ease;
}

.lightbox-link:hover img {
    opacity: 0.9;
}

.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    cursor: zoom-out;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-overlay img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 2.5rem;
    font-weight: 300;
    cursor: pointer;
    z-index: 10000;
    line-height: 1;
}

.lightbox-close:hover {
    color: var(--aps-orange);
}

.lightbox-caption {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    font-size: 0.9rem;
    padding: 10px 20px;
}

/* ============================================
   SIDEBAR HEADINGS
   Consistent styling for sidebar section headers.
   Use: sidebar-heading-green, sidebar-heading-blue, or sidebar-heading-orange
   ============================================ */
.sidebar-heading-green,
.sidebar-heading-blue,
.sidebar-heading-orange {
    font-weight: 600;
    font-size: 1.3em;
    padding-left: 8px;
    margin-bottom: 0.75rem;
    color: var(--aps-text);
}

.sidebar-heading-green {
    border-left: 4px solid var(--aps-green);
}

.sidebar-heading-blue {
    border-left: 4px solid var(--aps-blue);
}

.sidebar-heading-orange {
    border-left: 4px solid var(--aps-orange);
}

/* Additional Authors — masonry 2-column layout */
.additional-authors-grid {
    columns: 2;
    column-gap: 1.5rem;
}
.additional-author-card {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}
@media (max-width: 575.98px) {
    .additional-authors-grid {
        columns: 1;
    }
}

/* Legacy aliases for backwards compatibility */
.connect-heading {
    font-weight: 600;
    font-size: 1.3em;
    padding-left: 8px;
    border-left: 4px solid var(--aps-green);
    margin-bottom: 0.75rem;
    color: var(--aps-text);
}

/* ============================================
   SOCIAL SHARE BUTTONS
   ============================================ */
.social-share {
    margin-top: var(--space-lg);
}

.social-share .share-heading,
.social-share .sidebar-heading-orange {
    font-weight: 600;
    font-size: 1.3em;
    padding-left: 8px;
    border-left: 4px solid var(--aps-orange);
    margin-bottom: 0.75rem;
    color: var(--aps-text);
}

.social-share .share-btn {
    transition: all 0.2s ease;
    border-color: #dee2e6;
    color: var(--aps-text);
}

.social-share .share-btn:hover {
    background-color: var(--aps-blue);
    border-color: var(--aps-blue);
    color: white;
}

.social-share .share-btn i {
    font-size: 1.1em;
}

/* ============================================
   INLINE CITATION (Between Paragraphs)
   ============================================ */
.inline-citation {
    margin: var(--space-lg) 0;
    padding: 0 0 0 var(--space-lg);
    max-width: 85%;
    position: relative;
    background: none;
    border: none;
    font-size: 1.05em;
    line-height: 1.5;
    color: #6b6b6b;
    font-style: italic;
}

.inline-citation::before {
    content: "\201C";
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4em;
    line-height: 0.8;
    color: var(--aps-link);
    position: absolute;
    left: -5px;
    top: -5px;
    font-style: normal;
}

.inline-citation .citation-text {
    margin: 0;
    padding-left: 1.5em;
    font-style: italic;
}

.inline-citation .citation-source {
    margin: 0.5em 0 0 0;
    padding-left: 1.5em;
    font-style: normal;
    font-weight: 600;
    font-size: 0.9em;
    color: var(--aps-blue);
}