/*
 * Design changes requested after the original HTML was converted.
 *
 * These are deliberate departures from the static source, so they live here
 * rather than in assets/css/style.css - that file stays a faithful copy of the
 * design as delivered, which keeps it easy to diff against a new export.
 *
 * Loaded after style.css, so equal-specificity rules win.
 */

/* ------------------------------------------------------------------
 * Capacity page FAQ - restyled to match the Pricing page FAQs.
 * Every value below is copied from the .pr-acc-* rules in style.css.
 * ------------------------------------------------------------------ */

/*
 * The green chevron becomes a plus that turns into a minus when open, drawn
 * the same way as .pr-acc-icon: a horizontal bar plus a vertical one that is
 * hidden while the item is expanded.
 *
 * Bootstrap's accordion only uses ::after for its indicator, so ::before is
 * free for the second bar. Both are positioned against the button rather than
 * sitting in the flex flow, so the two bars can overlap to form the plus.
 */
#capFAQ .accordion-button {
    position: relative;
}

#capFAQ .accordion-button::after,
#capFAQ .accordion-button::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 12px;
    height: 2px;
    margin: 0;
    background: #88CD00;
    background-image: none !important;
    transform: translateY(-50%);
    transition: opacity .2s ease;
}

#capFAQ .accordion-button::before {
    right: 5px;
    width: 2px;
    height: 12px;
}

/* Cancel the chevron's rotation, and drop the upright bar to leave a minus. */
#capFAQ .accordion-button:not(.collapsed)::after {
    transform: translateY(-50%);
}

#capFAQ .accordion-button:not(.collapsed)::before {
    opacity: 0;
}

/*
 * Answer text. Colour, size and leading copied from .pr-acc-a p; the padding
 * matches .pr-acc-a, with the source's right padding kept so long answers do
 * not run under the icon.
 */
#capFAQ .accordion-body {
    margin-left: 0;
    padding: 0 40px 17px 32px;
    font-size: 17px;
    line-height: 26px;
    color: #706f6f;
}

/*
 * Remove the thin grey accent line down the left of each answer. The pricing
 * FAQs have no such rule.
 */
#capFAQ .accordion-body::before {
    content: none;
}

/* ------------------------------------------------------------------
 * Company page - Founder & Associates cards, smaller type.
 * Was: name 1.6rem, role 1.5rem, desc 1.23rem (style.css .co-founder-*).
 * ------------------------------------------------------------------ */
.co-founder-name {
    font-size: 1.2rem;
}

.co-founder-role {
    font-size: 1.1rem;
}

.co-founder-desc {
    font-size: 1rem;
}

/* ------------------------------------------------------------------
 * BidFunction page - "Why BidFunction is better than an in-house bid
 * team" heading: the BidFunction (TM) wording was dark (#1d1d1b, from
 * style.css .bf-h2--mix strong), should be the site's brand green.
 * ------------------------------------------------------------------ */
.bf-h2--mix strong {
    color: #88CD00;
}

/* ------------------------------------------------------------------
 * Footer - blurb under the logo. style.css .fn-blurb has no max-width of
 * its own (only ever constrained by its .fn-c1 column, 28.6% of the
 * footer width), so the text ran to a fourth line. The copy now carries
 * two manual <br> tags (see bidspec_footer_blurb in footer.php and
 * inc/customizer.php) forcing the requested three-line break; max-width
 * here is set to the width of the longest of those three lines plus a
 * small margin, wide enough that it cannot itself force a further wrap.
 * ------------------------------------------------------------------ */
#FooterNew .fn-blurb {
    max-width: 250px;
}

/* ------------------------------------------------------------------
 * Capacity nav dropdown - redesigned per the client's mockup.
 *
 * The panel container itself (#megaWrap .mega-panel: white, rounded-bottom,
 * full width under the header, drop shadow) is untouched - it is shared
 * with the Company dropdown, which keeps the original design. Everything
 * below is new content inside that same container: a heading, four equal
 * cards in place of the original three cards plus two separate mini-links,
 * and a new closing promo. Colour is the site's own brand green (#88CD00,
 * used throughout the rest of the theme) rather than the mega-menu's own
 * paler --mm-accent token (#8BE04E), to match the mockup and the site.
 * ------------------------------------------------------------------ */

#megaWrap .mega-cap-title {
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
    color: #1d1d1b;
    margin: 4px 0 22px;
}

#megaWrap .mega-cap-title span {
    color: #88CD00;
}

/*
 * Four equal cards, 2x2 on desktop (col-md-6) - no arrow icon, no icon
 * badge, icon sits to the left of the title/kicker/description column
 * (mockup revision: was icon-above-text before).
 */
#megaWrap .cap-card--v2 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px;
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .04);
}

#megaWrap .cap-card--v2 .ico {
    flex: none;
    width: auto;
    height: auto;
    background: none;
    border: 0;
    border-radius: 0;
    color: #88CD00;
    font-size: 40px;
    line-height: 1;
    display: block;
}

#megaWrap .cap-card--v2 .cap-text {
    min-width: 0;
}

#megaWrap .cap-card--v2 h4 {
    margin: 0 0 2px;
    font-size: 19px;
    color: #1d1d1b;
}

#megaWrap .cap-card--v2 .kicker {
    color: #88CD00;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}

#megaWrap .cap-card--v2 p {
    font-size: 14px;
    color: #1d1d1b;
    margin: 0;
}

/* Closing promo: chat icon in a circle, "book a meeting" in the site green. */
#megaWrap .mega-promo--v2 .promo-ico {
    border-radius: 50%;
    color: #88CD00;
    border-color: #d9f0c4;
}

#megaWrap .mega-promo--v2 h4 {
    font-size: 17px;
}

#megaWrap .mm-btn-lime--v2 {
    background: #88CD00;
    border-color: #88CD00;
    color: #fff !important;
}

#megaWrap .mm-btn-lime--v2:hover {
    background: #7ac729;
    border-color: #7ac729;
}

@media (max-width: 767.98px) {
    #megaWrap .cap-card--v2 {
        padding: 22px 24px;
    }
}

/*
 * Mobile menu (#mMenu) green - mega-menu.css defines its own paler accent
 * token (--mm-accent:#8BE04E) for the whole component. Overriding it here,
 * scoped to #mMenu only, swaps every green in the mobile menu (submenu
 * icons, hover states, Sign up button, the CTA card) to the site's actual
 * brand green used on buttons everywhere else, without touching the
 * desktop mega panel - which still uses the same variable for its own
 * (not yet redesigned) Platform content.
 */
#mMenu {
    --mm-accent: #88CD00;
    --mm-accent-hover: #7ac729;
    --mm-accent-ink: #5a8f00;
}

/* ------------------------------------------------------------------
 * Company nav dropdown - redesigned per the client's mockup, same
 * treatment as the Capacity dropdown above: new "mega-co-*" classes of
 * its own rather than touching the shared .mega-item/.list-mega classes,
 * which stay in mega-menu.css for the still-dormant Platform panel.
 * ------------------------------------------------------------------ */

/* Three feature cards - plain content on the white panel, divided by a
   thin rule between columns rather than individual card boxes. */
#megaWrap .mega-co-top .col-lg-4:not(:last-child) {
    border-right: 1px solid #eef0f2;
}

#megaWrap .mega-co-card {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
    padding: 4px 32px 4px 4px;
}

#megaWrap .mega-co-card .ico {
    color: #88CD00;
    font-size: 34px;
    line-height: 1;
    display: block;
}

#megaWrap .mega-co-card h4 {
    margin: 18px 0 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #1d1d1b;
}

#megaWrap .mega-co-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #1d1d1b;
}

#megaWrap .mega-co-card .arr {
    display: inline-flex;
    margin-top: 16px;
    color: #88CD00;
    font-size: 18px;
    transition: transform .15s ease;
}

#megaWrap .mega-co-card:hover .arr {
    transform: translateX(4px);
}

#megaWrap .mega-co-divider {
    height: 1px;
    background: #eef0f2;
    margin: 28px 0 24px;
}

/* Closing two-up promo row - icon left, text (+ button) right. */
#megaWrap .mega-co-bottom .mega-co-promo {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    height: 100%;
}

#megaWrap .mega-co-promo .ico {
    flex: none;
    color: #88CD00;
    font-size: 38px;
    line-height: 1;
}

#megaWrap .mega-co-promo h4 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1b;
}

#megaWrap .mega-co-promo p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #1d1d1b;
}

/* Buttons are shared with the dots menu's promo row (#appsPanel, below). */
#megaWrap .mega-co-btn,
#appsPanel .mega-co-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    border: 1px solid transparent;
}

#megaWrap .mega-co-btn--lime,
#appsPanel .mega-co-btn--lime {
    background: #88CD00;
    border-color: #88CD00;
    color: #fff !important;
}

#megaWrap .mega-co-btn--lime:hover,
#appsPanel .mega-co-btn--lime:hover {
    background: #7ac729;
    border-color: #7ac729;
}

#megaWrap .mega-co-btn--dark,
#appsPanel .mega-co-btn--dark {
    background: #1d1d1b;
    border-color: #1d1d1b;
    color: #88CD00 !important;
}

#megaWrap .mega-co-btn--dark:hover,
#appsPanel .mega-co-btn--dark:hover {
    background: #000;
    border-color: #000;
}

@media (max-width: 991.98px) {
    #megaWrap .mega-co-top .col-lg-4:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid #eef0f2;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    #megaWrap .mega-co-card {
        padding-right: 4px;
    }
}

/* ------------------------------------------------------------------
 * "Dots" apps menu - redesigned per the client's mockup, twice: first
 * from a plain white "Quick access" grid into a dark "Ecosystem" panel,
 * then widened to full header width with a two-up promo row (For
 * Organisations / For Bidding Professionals) above the ecosystem cards.
 * #appsPanel, .apps-grid and .app-item belong only to this component
 * (nothing else references them), so the new look is written straight
 * onto those classes rather than needing --v2 modifiers.
 * ------------------------------------------------------------------ */
#appsPanel {
    /* Spans the header container (logo edge to dots edge) like the mockup, and
       sits just under the nav bar with its notch pointing at the dots. */
    width: 1116px;
    max-width: calc(100vw - 40px);
    top: calc(100% + 46px);
    background: #0a0a0a;
    border: 1px solid #4a4a4a;
    border-radius: 16px;
    padding: 28px;
}

@media (min-width: 1400px) {
    #appsPanel {
        width: 1296px;
    }
}

#appsPanel::before {
    right: 13px;
    background: #0a0a0a;
    box-shadow: -1px -1px 0 0 #4a4a4a;
}

/* Promo row: two white cards, icon left, text + button right. */
#appsPanel .apps-promo-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

#appsPanel .apps-promo {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px;
    background: #fff;
    border-radius: 12px;
}

#appsPanel .apps-promo .ico {
    flex: none;
    color: #88CD00;
    font-size: 42px;
    line-height: 1;
}

#appsPanel .apps-promo h4 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
    color: #1d1d1b;
}

#appsPanel .apps-promo p {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #1d1d1b;
}

/* Ecosystem heading, with a rule beneath it before the cards. */
#appsPanel .apps-head {
    padding: 36px 4px 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #2a2a2a;
}

#appsPanel .apps-head h3 {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: #fff;
}

#appsPanel .apps-head p {
    margin: 0;
    font-size: 16px;
    letter-spacing: normal;
    text-transform: none;
    color: #b4b9bf;
}

#appsPanel .apps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/*
 * Each card: plain icon on the left, title + description to its right,
 * arrow along the bottom under the icon. Grid so the arrow stays pinned
 * to the bottom edge when neighbours in the row have longer text.
 */
#appsPanel .app-item {
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-rows: 1fr auto;
    column-gap: 22px;
    text-align: left;
    padding: 24px;
    border-radius: 14px;
    border: 1px solid #2a2a2a;
    background: #0a0a0a;
    transition: background .15s ease, border-color .15s ease;
}

#appsPanel .app-item:hover {
    background: #141414;
    border-color: #3a3a3a;
}

#appsPanel .app-item .ico {
    display: block;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    border: 0;
    color: #88CD00;
    font-size: 44px;
    line-height: 1;
}

#appsPanel .app-item .title {
    display: block;
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

#appsPanel .app-item .desc {
    display: block;
    font-size: 14px;
    line-height: 1.55;
    color: #b4b9bf;
    font-weight: 400;
}

#appsPanel .app-item .arr {
    grid-column: 1 / -1;
    display: inline-flex;
    align-self: end;
    margin-top: 20px;
    color: #88CD00;
    font-size: 24px;
    line-height: 1;
    transition: transform .15s ease;
}

#appsPanel .app-item:hover .arr {
    transform: translateX(4px);
}

/* ------------------------------------------------------------------
 * Header Sign up button - solid brand green on every page (was an
 * outlined button like Log in, which stays outlined with bold green
 * text). style.css .btn-signup is the outlined version; the hover also
 * stays green rather than flipping to a fill, since it's already filled.
 * ------------------------------------------------------------------ */
.btn.btn-signup {
    background: #88CD00;
    border-color: #88CD00;
    color: #1d1d1b;
}

.btn.btn-signup:hover,
.btn.btn-signup:focus {
    background: #7ac729;
    border-color: #7ac729;
    color: #1d1d1b;
}

/* Capacity FAQ answers come from an editor now, so they arrive wrapped in <p>. */
#capFAQ .accordion-body p {
    margin: 0 0 12px;
}

#capFAQ .accordion-body p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
 * Company page - founder cards. A person with no photo and no stand-in
 * crop (anyone added after launch, before their picture is uploaded)
 * gets a neutral grey circle rather than a broken image.
 * ------------------------------------------------------------------ */
.co-founder-avatar--empty {
    background-color: #d6d6d6;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8z'/%3E%3C/svg%3E");
    background-size: 62%;
    background-position: center 60%;
}

/* ------------------------------------------------------------------
 * Company page - "Bidding Specialists with experience from leading
 * organisations" label: small capitals, centred between two short rules,
 * like the "Trusted by" heading, instead of plain left-aligned text.
 * The slider arrows stay to the right.
 * ------------------------------------------------------------------ */
.co-logos-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 16px 18px 0;
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: center;
}

.co-logos-label::before,
.co-logos-label::after {
    content: "";
    flex: none;
    width: 48px;
    height: 1px;
    background: #8c8c8c;
}

@media (max-width: 575.98px) {
    .co-logos-label::before,
    .co-logos-label::after {
        width: 20px;
    }
}

/* ==========================================================================
   Capacity "Ready to build" band - brand grey, so it separates from the
   darker footer below it.
   ========================================================================== */
#capReady {
    background: #3C3C3B;
}

/* Contact details: WhatsApp block under Email, aligned with "Follow Us". */
#ContactDetails .cd-whatsapp .cd-label i {
    color: #88CD00;
    font-size: 18px;
    margin-left: 4px;
    vertical-align: -1px;
}

/* Legal pages (Terms of Service / Privacy Policy / Cookie Policy) and other plain pages. */
.bidspec-plain-wrap {
    background: #fff;
    color: #3C3C3B;
    padding: 72px 0 88px;
}

.bidspec-plain-page {
    max-width: 860px;
}

.bidspec-plain-page h1 {
    color: #1D1D1B;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-weight: 700;
    margin: 0 0 28px;
}

.bidspec-plain-content {
    font-size: 1.05rem;
    line-height: 1.7;
}

.bidspec-plain-content h2,
.bidspec-plain-content h3 {
    color: #1D1D1B;
    margin: 32px 0 12px;
}

.bidspec-plain-content a {
    color: #5f9a00;
}

/* Portal (Coming Soon) holding page - message styled like the Contact hero. */
#PortalIntro {
    background: #F0F6ED;
    padding: 50px 0 55px;
}

#PortalIntro .ct-title {
    font-size: 45px;
    line-height: 54px;
    font-weight: 700;
    color: #1d1d1b;
    margin: 0 0 14px;
}

#PortalIntro .ct-lead {
    font-size: 18px;
    line-height: 27px;
    color: #707070;
    margin: 0;
    max-width: 860px;
}

@media (max-width: 991.98px) {
    #PortalIntro {
        padding: 40px 0 44px;
    }
}

@media (max-width: 575.98px) {
    #PortalIntro .ct-title {
        font-size: 32px;
        line-height: 40px;
    }
}