/* NMC overrides. Loaded last so it wins over the Monoline stylesheets.
   Keep project-specific changes here rather than editing the template CSS,
   so the ported files stay comparable with the original.

   Colour mapping applied in place across style.css and menu.css, recorded here
   so the change back to Monoline's palette stays traceable:
     Monoline accent gold #ca9964  ->  NMC accent green #327632
   The accent keeps the logo green's hue (120deg) but sits light enough to carry
   white button text and dark enough to read as a link on white: it clears 5:1
   against white either way. Links inside the footer use #8fc98f instead, because
   the footer artwork behind them is the deep green. */

/* The NMC seal is circular artwork on a white square. Clip it to a circle and
   bring it down from the template's 150px. */
.site-logo img {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}

.footer_logo img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}

/* The sticky header shrinks; keep the seal proportional. */
.sticky-wrapper.is-sticky .site-logo img {
    width: 50px;
    height: 50px;
}

/* Footer.
   Monoline gives .footer no background colour at all — its whole appearance
   came from the template's footer.png, which is navy.

   img/bg/footer-green.png is that same artwork recoloured to the logo green:
   every opaque pixel keeps its alpha and its relative lightness, and only hue
   and saturation are replaced, so the wave and the faint interior circle
   survive. The original footer.png is kept alongside it.

   The wave is transparent, so .footer must not carry a background-color of its
   own — the page behind it is what makes the curve read.

   Previous flat-colour treatment, before the artwork was recoloured:
   .footer {
       background-color: #162d16;
       background-image: none !important;
   }
*/
.footer {
    background-color: transparent;
    background-image: url('../img/bg/footer-green.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.footer h4,
.footer .footer_logo p {
    color: #fff;
}

.footer a {
    color: #cfd8cf;
}

.footer a:hover {
    color: #8fc98f;
}

.copyright {
    background-color: #1e3c1e;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.copyright p {
    color: #cfd8cf;
    margin: 0;
    font-size: 14px;
}

/* Blog pagination. Monoline has no paginated listing, so there is nothing to
   port here — these rules match the theme's button treatment. */
.blog_pagination {
    padding-top: 20px;
}

.blog_pagination a,
.blog_pagination span {
    display: inline-block;
    min-width: 40px;
    padding: 8px 12px;
    margin: 0 3px;
    text-align: center;
    border: 1px solid #e3e3e3;
    color: #161616;
}

.blog_pagination a:hover {
    background-color: #327632;
    border-color: #327632;
    color: #fff;
    text-decoration: none;
}

.blog_pagination .current {
    background-color: #327632;
    border-color: #327632;
    color: #fff;
}

.blog_pagination .gap {
    border-color: transparent;
}

/* Error pages. Monoline ships no styles for .zero_area or .error_page — its
   404 is a bare image — so these are written for the typographic treatment. */
.zero_area {
    text-align: center;
}

.error_page .error_code {
    font-family: 'Poppins', sans-serif;
    font-size: 140px;
    line-height: 1;
    color: #1e3c1e;
    margin: 0 0 10px;
}

.error_page p {
    max-width: 520px;
    margin: 0 auto 30px;
}

@media (max-width: 767px) {
    .error_page .error_code {
        font-size: 90px;
    }
}

/* ------------------------------------------------------------------ *
 * Conference section.
 *
 * Monoline has no conference pages, so none of these classes ship with
 * a style and the markup rendered unstyled. These rules borrow the
 * theme's existing treatments — the white card with the soft shadow
 * from .single_service, the ruled list from .single_latest_blog — so
 * the section sits with the rest of the site rather than beside it.
 * ------------------------------------------------------------------ */

/* Hero fallback. Monoline's .home_bg::before is only rgba(0,0,0,.2),
   which is not enough to carry white text over the light placeholder. */
.home_bg::before {
    background: rgba(30, 60, 30, 0.72);
}

/* Edition tabs */
.edition_nav_area {
    padding: 30px 0 0;
}

.edition_nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.edition_nav li {
    margin: 0;
}

.edition_nav a {
    display: block;
    padding: 10px 22px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    letter-spacing: 0.4px;
    color: #161616;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    transition: 0.3s;
}

.edition_nav a:hover,
.edition_nav a.active {
    background-color: #327632;
    border-color: #327632;
    color: #fff;
    text-decoration: none;
}

/* Programme */
.programme_day {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    color: #1e3c1e;
    margin: 40px 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #327632;
}

.single_session {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    box-shadow: 0 10px 40px -10px rgba(30, 60, 30, 0.12);
    padding: 28px 30px;
    margin-bottom: 20px;
    transition: 0.3s;
}

.single_session:hover {
    box-shadow: 0 14px 44px -10px rgba(30, 60, 30, 0.22);
}

.single_session h4 {
    margin: 0 0 8px;
}

.session_time {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #327632;
}

.session_speakers {
    font-weight: 600;
    margin-bottom: 4px;
}

.session_room {
    font-size: 14px;
    color: #777;
    margin-bottom: 8px;
}

.single_session p:last-child {
    margin-bottom: 0;
}

/* Sponsors */
.sponsor_tier {
    margin-bottom: 40px;
}

.tier_name {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1e3c1e;
    margin-bottom: 25px;
}

.single_sponsor {
    background: #f7faf7;
    border: 1px solid #eee;
    border-radius: 5px;
    min-height: 140px;
    margin-bottom: 30px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.3s;
}

.single_sponsor:hover {
    border-color: #327632;
}

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

.single_sponsor span {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    text-align: center;
    color: #161616;
}

/* Communiqué and other documents */
.single_document {
    background: #fff;
    border: 1px solid #eee;
    border-left: 4px solid #327632;
    border-radius: 3px;
    padding: 26px 30px;
    margin-bottom: 20px;
}

.single_document h4 {
    margin: 0 0 10px;
}

.document_meta {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #777;
    margin: 0;
}

/* Gallery */
.single_gallery_item {
    margin-bottom: 30px;
}

.single_gallery_item img {
    width: 100%;
    border-radius: 3px;
}

.gallery_caption {
    font-size: 14px;
    color: #777;
    margin: 12px 0 0;
}

/* The edition overview and other plain-content sections had no spacing
   of their own; section-padding supplies the rest. */
.about_area .section-title {
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .single_session,
    .single_document {
        padding: 22px 20px;
    }

    .edition_nav a {
        padding: 8px 14px;
        font-size: 14px;
    }
}

/* Image before text on narrow screens.
   The markup puts the text column first so it leads on desktop, but stacked on
   a phone the image should come first. grid.css is mobile-first with col-lg-*
   taking effect at 992px, so the row reverses below that and returns to source
   order at the same breakpoint. Columns are already 100% wide by default, so
   nowrap keeps the two children in one column. */
.row-media-first {
    flex-direction: column-reverse;
    flex-wrap: nowrap;
}

@media (min-width: 992px) {
    .row-media-first {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Brand icons. */
.brand-icon {
    display: block;
    font-size: 46px;
    line-height: 1;
    color: #327632;
    margin-bottom: 25px;
}

.single-project .brand-icon {
    margin-bottom: 20px;
}

.hire_img .brand-icon,
.single_why_choose .brand-icon {
    font-size: 60px;
}

/* Social chips sit on the green footer, so they share one treatment. */
.social_profile ul li a.f_facebook,
.social_profile ul li a.f_twitter,
.social_profile ul li a.f_instagram,
.social_profile ul li a.f_linkedin,
.social_profile ul li a.f_youtube {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
}

.social_profile ul li a.f_facebook:hover,
.social_profile ul li a.f_twitter:hover,
.social_profile ul li a.f_instagram:hover,
.social_profile ul li a.f_linkedin:hover,
.social_profile ul li a.f_youtube:hover {
    background: #fff;
    border-color: #fff;
    color: #1e3c1e;
}

/* Counter band. */
.counter_feature {
    background: #fff;
    border-top: 1px solid #e8ece8;
    border-bottom: 1px solid #e8ece8;
}

.single-project {
    border-right: 1px solid #e8ece8;
}

.single-project .brand-icon {
    color: #327632;
}

.single-project h2 {
    color: #1e3c1e;
}

.single-project h4 {
    color: #327632;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

h1 {
    font-weight: 700;
}

a {
    font-weight: inherit;
}

/* The bar carries nine items in a non condensed face. */
.site-navigation .site-menu > li > a {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    letter-spacing: -0.01em;
}

@media (min-width: 1400px) {
    .site-navigation .site-menu > li > a {
        padding-left: 14px;
        padding-right: 14px;
        font-size: 15px;
    }
}

.site-navigation .site-menu > li > a,
.site-navigation .site-menu .dropdown a {
    white-space: nowrap;
}

.copyright a {
    color: #fff;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.copyright a:hover,
.copyright a:focus {
    color: #fff;
    border-bottom-color: #fff;
    text-decoration: none;
}

/* Blog sidebar cards. */
.blog_search,
.latest_blog,
.advertisement_post,
.video_post,
.categories,
.tag,
.banner {
    border: 1px solid #e8ece8;
    border-radius: 4px;
    box-shadow: 0 2px 10px -4px rgba(30, 60, 30, 0.14);
    padding: 26px 26px;
}

.blog_sidebar_title {
    position: relative;
    border-bottom: 0;
    padding-bottom: 12px;
    margin-bottom: 18px;
}

.blog_sidebar_title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background-color: #327632;
}