/*
 Theme Name:   Twenty Twenty-Five Child
 Theme URI:    https://example.com/twentytwentyfive-child/
 Description:  A child theme for the Twenty Twenty-Five WordPress theme.
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentyfive
 Version:      1.0.6d
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Add your custom CSS rules below this line */

html {
    scroll-behavior: smooth;
}

.site-name.is-layout-flex {
    gap: 12px;
}

[id] {
    scroll-margin-top: 120px;
}

.neg-zindex {
    z-index: -1;
}

.entry-content a:not(.wp-element-button) {
    color: #002d72;
    font-weight: bold;
}

.publications .date {
    font-weight: 600;
    font-size: 1.5rem;
    color: #ff6f00; /* #ff4500; */
    margin-top: 0.25rem;

    @media (max-width: 768px) {
        margin-bottom: -24px;
        padding-top: 24px;
        border-top: 1px solid #ccc;
    }
}

@media (max-width: 768px) {
    .publications .sticky-panel:nth-of-type(1) {
        .date {
            padding-top: 0;
            border-top: 0;
        }
    }
}

.publications h3 {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #002d72;

    @media (max-width: 768px) {
        font-size: 1.6rem;
    }

    a {
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }
}

.publications p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-top: 0;
}

@media (min-width: 768px) {
    header {
        position: fixed;
        top: 0;
        width: 100%;
        background: white;
        z-index: 2;
    }

    .admin-bar header {
        top: 32px;
    }

    main {
        padding-top: 108px;
    }

    ul.wp-block-navigation {
        background-color: #ffffff;
        border-radius: 9999px; /* A large value creates the pill shape */
        padding: 0.5rem; /* Space between the links and the outer edge */
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07); /* A subtle shadow for depth */

        /* Use flexbox to align items */
        display: inline-flex;
        gap: 0.5rem;
    }

    a.wp-block-navigation-item__content {
        display: block;
        padding: 0.6rem 1.2rem; /* Vertical and horizontal padding for the link */
        border-radius: 9999px; /* All links are pills, but only the active one has a background */
        text-decoration: none;
        font-weight: 500;
        color: #002d72 !important; /* Dark text color for non-active links */
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    a.wp-block-navigation-item__content.active {
        background-color: #ff6f00; /* The terracotta/orange color from the image */
        color: #ffffff !important; /* White text for the active link */
    }

    /* 4. (Optional) A subtle hover effect for non-active links */
    a.wp-block-navigation-item__content:not(.active):hover {
        background-color: #f1f1f1; /* A light gray background on hover */
    }


    /* The wrapper for our panels */
    .stacking-sticky-wrapper {
        position: relative;
    }

    /* THE CORE LOGIC: Individual Sticky Panels */
    .sticky-panel {
        position: sticky;
        top: calc((var(--i, 0)) * 90px + 180px); /* Default to 0 if --i isn't set */
    }

    .sticky-panel:nth-of-type(1) {
        --i: 0;
    }

    .sticky-panel:nth-of-type(2) {
        --i: 1;
    }

    .sticky-panel:nth-of-type(3) {
        --i: 2;
    }

    .sticky-panel:nth-of-type(4) {
        --i: 3;
    }

    .sticky-panel:nth-of-type(5) {
        --i: 4;
    }

    .sticky-panel:nth-of-type(6) {
        --i: 5;
    }

    .sticky-panel:nth-of-type(7) {
        --i: 6;
    }

    .sticky-panel:nth-of-type(8) {
        --i: 7;
    }

    .sticky-panel:nth-of-type(9) {
        --i: 8;
    }

    .sticky-panel:nth-of-type(10) {
        --i: 9;
    }

    .sticky-panel:nth-of-type(11) {
        --i: 10;
    }

    .final-spacer {
        min-height: 100vh;
        z-index: -1;
    }

    .publications h3 {
        height: 90px;
    }
}

@media (max-width: 767px) {
    .wp-block-columns.column-reverse {
        flex-direction: column-reverse;
    }
}