/* =========================
   SNCT Design System (clean)
   ========================= */

/* 1) Variables */
:root {
    --snct-blue: #0D4367;
    --snct-green: #99CD00;
    --snct-blue-600: #09324d;
    --snct-green-600: #85b900;
    --snct-light-blue: #b8dcff;
    --snct-light-green: #deffb8;
    --snct-link: #608100;
    
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --font-alt: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --radius: .375rem;
    --shadow-sm: 0 4px 8px rgba(0,0,0,.05);
}

/* 2) Base / Reset */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin: 0;
    font-family: var(--font-sans) !important;
    color: #222;
}

.width-md-50 {
    max-width: 50% !important;
}

@media (max-width: 768px) {
    .width-md-50 {
        max-width: 75% !important;
    }
}

header.snct-header, header.wiki-header {
    border-top: 8px double transparent;
    border-image: linear-gradient(to right, var(--snct-green) 50%, var(--snct-blue) 50%);
    border-image-slice: 1;
}

.wiki-header {
    border-bottom: 0px !important;
}

/* Reset base paragraph spacing so we control it */
.wiki-main p {
    margin: 0 0 1rem;
}

    /* Any paragraph that STARTS with a <strong> = heading-like */
    .wiki-main p:has(> strong:first-child) {
        margin-top: 50px; /* space ABOVE the heading para */
    }

    /* Style the heading text */
    .wiki-main p > strong:first-child {
        display: block; /* make it behave like a heading */
        font-size: 1.5rem;
        font-family: var(--font-alt);
        color: var(--snct-blue);
        margin-bottom: .25rem; /* small gap to following text (if any) */
    }

.wiki-main a:not(.btn):not([role="button"]):not(.nav-link) {
    color: var(--snct-link);
    text-decoration: underline;
}

.wiki-main a:hover:not(.btn):not([role="button"]),
.wiki-main a:focus-visible:not(.btn):not([role="button"]) {
    color: var(--snct-green);
    text-decoration-thickness: 2px;
}

/* Focus ring (kept compatible with Bootstrap) */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem #258cfb;
    outline: none;
}

/* 3) Typography — font utilities + helpers */
.font-inter {
    font-family: var(--font-sans) !important;
}

.font-public-sans {
    font-family: var(--font-alt) !important;
}

.text-main {
    color: var(--snct-blue) !important;
}

.text-sub,
.text-snct-green {
    color: var(--snct-green) !important;
}
/* kept alias for safety */

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

/* Optional heading styles using Public Sans for display look */
.h-display-1, .h-display-2, .h-display-3 {
    font-family: var(--font-alt);
    line-height: 1.2;
}

.h-display-1 {
    font-size: clamp(2rem, 4vw + 1rem, 3rem);
    font-weight: 700;
}

.h-display-2 {
    font-size: clamp(1.75rem, 3.5vw + .5rem, 2.5rem);
    font-weight: 600;
}

.h-display-3 {
    font-size: clamp(1.5rem, 3vw + .25rem, 2rem);
    font-weight: 600;
}

.subheading {

}

.section-heading {
    font-family: var(--font-alt);
}

/* 4) Buttons */
.btn-snct-green {
    background-color: var(--snct-green);
    color: #fff;
    border: none;
}

    .btn-snct-green:hover,
    .btn-snct-green:focus {
        background-color: var(--snct-green-600);
        color: #fff;
    }

.btn-snct-blue {
    background-color: var(--snct-blue);
    color: #fff;
    border: none;
}

    .btn-snct-blue:hover,
    .btn-snct-blue:focus {
        background-color: var(--snct-blue-600);
        color: #fff;
    }

.btn-outline-snct-green {
    border: 2px solid var(--snct-green);
    color: var(--snct-green);
    background-color: transparent;
}

    .btn-outline-snct-green:hover,
    .btn-outline-snct-green:focus {
        background-color: var(--snct-green);
        color: #fff;
    }

.btn-outline-snct-blue {
    border: 2px solid var(--snct-blue);
    color: var(--snct-blue);
    background-color: transparent;
}

    .btn-outline-snct-blue:hover,
    .btn-outline-snct-blue:focus {
        background-color: var(--snct-blue);
        color: #fff;
    }

/* 5) Color utilities */
.bg-snct-blue {
    background-color: var(--snct-blue) !important;
    color: #fff;
}

.bg-snct-green {
    background-color: var(--snct-green) !important;
    color: #fff;
}

.bg-snct-light-blue {
    background-color: var(--snct-light-blue) !important;
}

.bg-snct-light-green {
    background-color: var(--snct-light-green) !important;
}

.border-snct-blue {
    border: 2px solid var(--snct-blue) !important;
}

.border-snct-green {
    border: 2px solid var(--snct-green) !important;
}

.border-start-snct-blue {
    border-left: 4px solid var(--snct-blue) !important;
}

.border-start-snct-green {
    border-left: 4px solid var(--snct-green) !important;
}

/* 6) Navbar */
.snct-navbar {
    padding: .75rem 0;
}

.snct-logo img {
    height: 40px;
    transition: transform .2s ease-in-out;
}

.snct-nav .snct-nav-item {
    margin: 0 .75rem;
}

.snct-nav .nav-link {
    font-weight: 500;
    padding: .5rem .75rem;
}

    .snct-nav .nav-link:hover {
        color: var(--snct-blue);
        text-decoration: underline;
    }

/* 7) Dropdowns (hover on desktop, accessible defaults) */
.dropdown-hover {
    position: relative;
}

    .dropdown-hover:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }

.dropdown-menu {
    background-color: #fff;
    border-radius: var(--radius);
    padding: .5rem;
    box-shadow: var(--shadow-sm);
    top: 100%;
    left: 0;
    z-index: 1000;
}

    /* animation defaults applied via .animate opt-in */
    .dropdown-menu.animate {
        display: none;
        opacity: 0;
        transform: translateY(10px);
        visibility: hidden;
        transition: all .3s ease;
        pointer-events: none;
    }

    .dropdown-menu .dropdown-item {
        color: #4a4a4a;
        padding: 10px;
        border-radius: .25rem;
    }

        .dropdown-menu .dropdown-item:hover {
            background-color: #004b75; /* intentional stronger hover */
            color: #fff;
        }

/* 8) Tables */
.snct-thead {
    background-color: #fff;
    border-bottom: 4px solid var(--snct-green);
}

    .snct-thead th {
        color: var(--snct-blue);
        font-weight: 600;
    }

/* 9) Media / Images */
.object-fit-cover {
    object-fit: cover;
    height: 100%;
}

/* 10) Wiki Sidebar */
.nav-sidebar .nav-link.active {
    background-color: #f0f0f0;
    border-left: 4px solid var(--snct-green);
}

/* 11) Mobile overrides */
@media (max-width: 991.98px) {
    .snct-navbar {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .snct-logo img {
        height: 36px;
    }

    .snct-nav .snct-nav-item {
        margin: 0;
        padding: .75rem 0;
        border-bottom: 1px solid #eee;
    }

    .snct-nav .nav-link {
        font-size: 1.05rem;
        padding: .75rem 1rem;
    }

    /* inline dropdowns on mobile */
    .navbar .dropdown-menu {
        position: static;
        float: none;
        box-shadow: none;
        background-color: transparent;
        padding: 0;
        border: none;
        margin-top: 0;
    }

        .navbar .dropdown-menu .dropdown-item {
            padding: 1rem 1.5rem;
            font-size: .95rem;
            color: #333;
            background: none;
            border-bottom: 1px solid #f1f1f1;
        }

            .navbar .dropdown-menu .dropdown-item:hover {
                background-color: #f9f9f9;
                color: var(--snct-blue);
            }

    /* ensure sticky sidebars don’t break mobile layout */
    .sidebar-sticky {
        position: static !important;
        height: auto !important;
    }
}

/* 12) Footer */
/* Footer polish */
.snct-footer a {
    color: inherit;
    text-decoration: none;
}

    .snct-footer a:hover {
        color: var(--snct-green);
        text-decoration: underline;
    }

.snct-footer .footer-heading {
    font-family: var(--font-alt);
    color: #fff;
    font-weight: 600;
    margin-bottom: .75rem;
    font-size: 1.5rem;
}

.snct-footer .list-unstyled li {
    margin-bottom: .35rem;
    color: #f6f6f6;
}

.snct-footer .footer-logo img {
    max-height: 48px;
    height: auto;
}

/* optional: tighter columns on xl+ if you’ve got long menus */
@media (min-width: 1200px) {
    .snct-footer .row > * {
        padding-right: 1rem;
    }
}

/* set this to your actual sidebar width */
:root {
    --wiki-sidebar-width: 280px;
}

/* Desktop: move/shrink footer so it doesn't sit under the sidenav */
@media (min-width: 992px) {
    .snct-footer--wiki {
        margin-left: var(--wiki-sidebar-width);
        width: calc(100% - var(--wiki-sidebar-width));
        position: relative; /* ensures it layers cleanly */
        z-index: 0;
    }
}

/* Mobile/tablet: footer returns to full width */
@media (max-width: 991.98px) {
    .snct-footer--wiki {
        margin-left: 0;
        width: 100%;
    }
}

/* Home Page */
.contact-list .bi {
    width: 1.25rem; /* align numbers vertically */
    flex: 0 0 1.25rem;
}

.contact-list a:hover {
    text-decoration: underline;
}

.contact-list a {
    text-decoration: none;
}

/* Ensure cards fill their columns */
.feature-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    width: 100%;
}

/* Give the media a consistent height so bodies can flex */
.feature-media img {
    width: 100%;
    object-fit: cover;
    display: block;
}

/* Body flexes to take remaining space; actions push to bottom */
.feature-body {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border-top: 1px solid #eee;
    min-height: 0; /* avoids weird flex overflow in some browsers */
    flex: 1 1 auto; /* <— key: body fills available space */
}

.feature-actions {
    margin-top: auto;
}

/* gentle hover lift */
.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
    transition: transform .2s ease, box-shadow .2s ease;
}

/* Desktop/tablet: keep 50/50 horizontal split */
.snct-meeting-cta {
    background: linear-gradient(90deg, var(--snct-green) 0 50%, var(--snct-blue) 50% 100%);
    border-radius: .75rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    position: relative;
    overflow: hidden;
}

    .snct-meeting-cta::after {
        content: none !important;
    }

/* Divider + arrow as you had */
.split-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0;
    pointer-events: none;
}

    .split-arrow::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -1px;
        width: 5px;
        background: #fff;
        opacity: .98;
    }

    .split-arrow::after {
        content: "";
        position: absolute;
        left: 1px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 14px solid transparent;
        border-bottom: 14px solid transparent;
        border-left: 14px solid #fff;
    }

/* Mobile: stack vertically with green then navy */
@media (max-width: 991.98px) {
    /* remove parent split and arrow on mobile */
    .snct-meeting-cta {
        background: none;
    }

    .split-arrow {
        display: none;
    }

    /* make each half a colored band */
    .snct-meeting-cta .cta-left,
    .snct-meeting-cta .cta-right {
        padding: 1.25rem 1rem;
        border-radius: 0; /* let the parent rounding handle edges */
    }

    .snct-meeting-cta .cta-left {
        background: var(--snct-green);
        border-bottom: 2px solid #fff; /* subtle separation */
    }

    .snct-meeting-cta .cta-right {
        background: var(--snct-blue);
        color: #fff !important;
        text-align: left; /* optional: drop right-align on mobile */
    }

        /* make links readable on colored bands */
        .snct-meeting-cta .cta-left a,
        .snct-meeting-cta .cta-right a {
            text-decoration: underline;
        }
}

.snct-centered-hero .fw-700 {
    font-weight: 700;
}

/* Subheading style like the screenshot */
.snct-hero-sub {
    font-size: 1.125rem;
    color: rgba(0,0,0,.7);
    font-family: var(--font-alt); /* Public Sans, from your vars */
}

/* Link-style CTA */
.snct-link-cta {
    font-weight: 700;
    color: var(--snct-blue);
    text-decoration: none;
}

    .snct-link-cta:hover {
        text-decoration: underline;
    }

    .snct-link-cta .bi {
        vertical-align: -.125em;
        transition: transform .15s ease;
    }

    .snct-link-cta:hover .bi {
        transform: translateX(2px);
    }

.snct-hero-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    text-align: center; /* align with the section’s centered layout */
    font-size: 1.05rem;
}

    .snct-hero-list li {
        margin-bottom: .4rem;
    }

    .snct-hero-list .text-muted {
        color: rgba(0,0,0,.6) !important;
    }


/* WIKI STYLES */

.wiki-main table th{
    color: var(--snct-blue) !important;
    background-color: white !important;
}

/* Meta below the heading */
/* Subheading look for "Published" row */
.article-meta .meta-heading {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-family: var(--font-alt);
    font-weight: 700;
    color: #5d5d5d;
    font-size: 1.05rem; /* subheading size */
    margin-bottom: .5rem; /* space before badges */
}

/* Stats row: badges on their own line */
.article-meta .meta-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .5rem;
}

/* Custom badge style (brand-aligned) */
/* Base pill — SNCT green */
.meta-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: 9999px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--snct-link);
    font-size: 0.80rem;
    /* subtle tinted background + border from green */
    background: color-mix(in srgb, var(--snct-green) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--snct-link) 35%, #fff);
}

    /* Hover/keyboard focus */
    .meta-badge:hover,
    .meta-badge:focus-visible {
        text-decoration: none;
        background: color-mix(in srgb, var(--snct-green) 14%, #fff);
        border-color: color-mix(in srgb, var(--snct-green) 45%, #fff);
        outline: 0;
    }

/* Optional: on dark/navy backgrounds */
.meta-badge--inverse {
    color: #0b2e00; /* readable dark green text on lightened bg */
    background: color-mix(in srgb, var(--snct-green) 18%, #fff);
    border: 1px solid color-mix(in srgb, var(--snct-green) 42%, #fff);
}

/* Icon alignment (optional) */
.meta-badge .bi {
    font-size: 1em;
    transform: translateY(-1px);
}



/* White toolbar below the blue header */
.wiki-toolbar-wrap {
    background: var(--snct-blue);
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

/* Nav look */
.wiki-toolbar {
    display: flex;
    gap: .5rem;
    padding: .5rem 0;
}

    .wiki-toolbar .nav-link {
        color: var(--snct-blue);
        font-weight: 600;
        padding: .5rem .75rem;
        border-radius: .5rem;
        text-decoration: none;
        background: color-mix(in srgb, var(--snct-blue) 8%, #fff);
    }

        .wiki-toolbar .nav-link:hover,
        .wiki-toolbar .nav-link:focus-visible {
            background: color-mix(in srgb, var(--snct-blue) 20%, #fff);
            text-decoration: none;
        }

        /* Optional: show an "active" state if you set it server-side */
        .wiki-toolbar .nav-link.active {
            background: color-mix(in srgb, var(--snct-blue) 12%, #fff);
            outline: 1px solid color-mix(in srgb, var(--snct-blue) 30%, #fff);
        }

/* Optional brand token */
:root {
    --snct-yellow: #ffc107;
}

/* Edit pill (yellow) */
.wiki-toolbar .nav-link.edit {
    color: #4a3b00; /* readable on light yellow */
    background: color-mix(in srgb, var(--snct-yellow, #ffc107) 28%, #fff);
    border-radius: .5rem;
    font-weight: 700; /* a touch bolder to stand out */
}

    .wiki-toolbar .nav-link.edit:hover,
    .wiki-toolbar .nav-link.edit:focus-visible {
        background: color-mix(in srgb, var(--snct-yellow, #ffc107) 40%, #fff);
        text-decoration: none;
        outline: 1px solid color-mix(in srgb, var(--snct-yellow, #ffc107) 55%, #fff);
    }

    /* If you mark it active server-side */
    .wiki-toolbar .nav-link.edit.active {
        background: color-mix(in srgb, var(--snct-yellow, #ffc107) 34%, #fff);
        outline: 1px solid color-mix(in srgb, var(--snct-yellow, #ffc107) 60%, #fff);
    }



/* Compact on small screens: let links wrap nicely */
@media (max-width: 575.98px) {
    .wiki-toolbar {
        flex-wrap: wrap;
        gap: .25rem;
    }
}