/*
Theme Name: Inspiro Child
Template: inspiro
Author: Millo Magnocavallo
Description: A child theme of Inspiro.
Version: 1.0
*/

/* ------------------------------------------ */
/* COMMON STYLES */
/* ------------------------------------------ */

.navbar-nav > li > a:hover,
.navbar-nav > li.current-menu-item > a,
.navbar-nav > li.current-menu-parent > a,
.navbar-nav > li.current_page_item > a {
    border-bottom: 2px solid #4db5ac !important;
    color: inherit;
    opacity: 1;
}

.event-thumbnail img,
.project-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
    display: block;
}

.read-more-button {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    border-radius: 4px;
    background-color: #4db5ac;
    text-decoration: none !important;
    color: #fff !important;
}

.read-more-button:hover {
    text-decoration: none;
    background-color: #59d3c7;
}

.entry-header .entry-title {
    margin-bottom: 0px !important;
}

@media (max-width: 768px) {
    .event-thumbnail,
    .project-thumbnail {
        width: 100%;
        max-width: none;
        flex: 1 1 auto;
    }
}

.entry-content h2 a {
    color: #000;
    text-decoration: none;
}

.entry-content h3 {
    font-size: 1.1rem;
}

table#conference td {
    font-size: 0.8rem;
}

/* ------------------------------------------ */
/* LISTING PAGE STYLING */
/* ------------------------------------------ */

.page-template-page-event-list .event-list,
.page-template-page-project-list .project-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.event-item-inner,
.project-item-inner,
.discussion-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 20px;
    margin-bottom: 0;
}

.page-template-page-event-list .event-thumbnail,
.page-template-page-project-list .project-thumbnail {
    flex: 0 0 200px;
    max-width: 200px;
    min-width: 200px;
}

.page-template-page-event-list .event-details,
.page-template-page-project-list .project-details {
    flex: 1;
}

.page-template-page-event-list .event-details h2,
.page-template-page-project-list .project-details h2 {
    margin-top: 0;
}

.page-template-page-event-list .event-summary,
.page-template-page-project-list .project-summary {
    margin: 10px 0;
}

.page-template-page-project-list .project-meta-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 200px;
    max-width: 200px;
    gap: 10px;
}

.page-template-page-project-list .project-meta-left {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
}


.page-template-page-project-list .project-status {
    font-size: 0.9rem;
    margin-top: 8px;
    color: #555;
}

@media (max-width: 768px) {
    .event-item-inner,
    .project-item-inner {
        flex-direction: column;
    }

    .page-template-page-project-list .project-meta-left {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 10px;
    }

    .page-template-page-project-list .project-thumbnail {
        width: 100px;
    }
}

/* ADDITIONAL OPTIONAL PRE AND POST CONTENT TEXT ON LISTING PAGES */

.event-page-content-top, .project-page-content-top, .discussion-page-content-top {
    padding: 0px 20px 0px 20px;
}

.event-page-content-bottom, .project-page-content-bottom, .discussion-page-content-bottom {
    padding: 30px 20px 0px 20px;
}

/* ------------------------------------------ */
/* SINGLE PAGES STYLING */
/* ------------------------------------------ */

.single-event .event,
.single-project .project,
.single-discussion .single-discussion {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 0px 0 20px 0;
    border-bottom: 1px solid #ddd;
}

.single-event .event-thumbnail,
.single-project .project-thumbnail {
    flex: 0 0 200px;
    max-width: 200px;
}

.single-event .event-body,
.single-project .project-body,
.single-discussion .discussion-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.single-event .entry-header,
.single-project .entry-header {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

.single-event .entry-title,
.single-project .entry-title {
    margin: 0;
    font-size: 1.75rem;
}

.single-event .event-date,
.project-status,
.single-discussion .discussion-category,
.single-discussion .discussion-status {
    margin: 0;
    font-weight: 500;
    color: #444;
}

.single-project .project-tagline {
    font-style: italic;
    color: #666;
    margin: 0 0 10px 0;
}

.single-event .event-full-description,
.single-event .event-content,
.single-project .project-full-description,
.single-discussion .discussion-summary,
.single-discussion .discussion-content {
    margin-bottom: 0;
}

.single-event .event-full-description h2,
.single-event .event-content h2,
.single-project .project-full-description h2,
.single-discussion .discussion-summary h2 {
    margin: 0 0 16px 0 !important;
    font-size: 1.25rem;
    color: #222;
}

.single-event .event-full-description h2 {
    margin: 0 !important;
}

.single-event .entry-cover-image .entry-header,
.single-project .entry-cover-image .entry-header {
    text-align: center;
    padding: 40px 0;
    color: #fff;
}

.single-event .entry-cover-image .entry-title,
.single-project .entry-cover-image .entry-title {
    font-size: 2.5rem;
    margin: 0;
}

.single-project .project-github-link {
    margin-top: -10px;
    margin-bottom: 20px;
}

.single-project .project-github-link i.fab.fa-github {
    margin-right: 8px;
    font-size: 1.1em;
    vertical-align: middle;
}

.single-project .project-github-link a {
    display: inline-block;
    background-color: #24292e;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.single-project .project-github-link a:hover {
    background-color: #444c56;
}

.single-project .project-meta-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.single-project .project-thumbnail {
    width: 200px;
    max-width: 100%;
}

.single-project .project-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

@media (max-width: 768px) {
    .single-event .event,
    .single-project .project,
    .single-discussion .single-discussion {
        flex-direction: column;
    }

    .single-event .event-thumbnail,
    .single-project .project-thumbnail {
        max-width: none;
        width: 100%;
    }
}

/* ------------------------------------------ */
/* STATUS BUTTONS (Shared Styles) */
/* ------------------------------------------ */

.project-status-button,
.discussion-status-button {
    display: inline-block;
    padding: 2px 20px;
    border-radius: 5px;
    background-color: #999;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: normal;
    font-size: 0.8rem !important;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-top: 0px;
}

/* Status colours and hover states */
.status-button-available,
.status-button-published {
    background-color: #5db766;
}
.status-button-available:hover,
.status-button-published:hover {
    background-color: #77cc7d;
}

.status-button-indevelopment {
    background-color: #dc7633;
}
.status-button-indevelopment:hover {
    background-color: #e59866;
}

.status-button-closed {
    background-color: #a93226;
}
.status-button-closed:hover {
    background-color: #c0392b;
}

.status-button-prototype,
.status-button-inprep {
    background-color: #c1b95e;
}
.status-button-prototype:hover,
.status-button-inprep:hover {
    background-color: #d6cf79;
}

/* ------------------------------------------ */
/* STATUS BUTTON CONTEXT OVERRIDES */
/* ------------------------------------------ */

/* Ensure buttons don’t stretch in single discussion */
.single-discussion .discussion-status-button {
    display: inline-block;
    width: auto;
    max-width: none;
    margin-top: 0;
    align-self: flex-start; /* prevents stretching in flex column */
}

/* ------------------------------------------ */
/* DISCUSSION LIST TWEAKS */
/* ------------------------------------------ */

.discussion-item .read-more-button {
    margin-top: 0px;
}

.discussion-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.discussion-item {
    display: flex;
    flex-direction: column;
}

.discussion-item h2 {
    margin: 0 0 0 0 !important;
}

.discussion-item p {
    margin-bottom: 0px !important;
}

/* CONTENT TITLE AMENDS */

strong.content-title {
    font-size: 1.4em;
}

/* ------------------------------------------ */
/* DATA AND PRIVACY POLICY ANCHOR TARGETS */
/* ------------------------------------------ */

h3.wp-block-heading {
    scroll-margin-top: 150px;
}