/* ============================================================
   landing-theme.css
   Workflow.ng — full theme for the shared layout + home page.

   This file is now the ONLY custom stylesheet loaded (headers.css
   and headers2.css have been retired as part of the app refactor).
   Bootstrap 5 + Bootstrap Icons + Font Awesome are still loaded via
   CDN in _Layout_home.cshtml, so Bootstrap's grid/utility classes
   (row, col-*, d-*, btn*, dropdown*, etc.) keep working untouched —
   everything below is either a small custom class that AppGlobal.js
   / AppNavigation.js / home.js depend on by name, or a new wf-*
   class for the redesigned sections.
   ============================================================ */

:root {
    --wf-primary: #0e6b4e;
    --wf-primary-dark: #0a4d38;
    --wf-primary-darker: #073a2a;
    --wf-accent: #16a375;
    --wf-accent-light: #e6f5ef;
    --wf-ink: #10201c;
    --wf-muted: #5b6b70;
    --wf-line: #e6ebe9;
    --wf-bg-soft: #f5f9f8;
    --wf-radius: 16px;
    --wf-shadow: 0 10px 30px rgba(16, 32, 28, .08);
}

/* ============================================================
   0. BASE
============================================================ */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--wf-ink);
}

a.noDecor, a.noDecorB {
    text-decoration: none;
}

.smallText {
    font-size: 14px;
}

/* Small custom utility classes that used to live in the retired
   files. Bootstrap 5 has no .hide class of its own (it uses
   .d-none), but AppGlobal.js's reflectSignInState() toggles this
   exact class name on #sign_up_li / #my_account_li, so it has to
   exist somewhere. */
.hide {
    display: none !important;
}

.clickElement {
    cursor: pointer;
}

/* ============================================================
   1. SITE-WIDE OVERLAYS
   (#page-mask, .signInBox/#msgModal, .selectOptionsContainer,
   .oMessage) are all part of _Layout_home.cshtml, so they render
   on every page that uses this layout — not just Home. They need
   full, self-contained rules now, not overrides.
============================================================ */
#page-mask {
    display: none;
    background: rgba(0, 0, 0, .35);
    position: fixed;
    inset: 0;
    z-index: 1100;
}

/* Notification / account dropdown popups that AppGlobal.js
   positions with inline top/left via JS — this just supplies the
   look and the default hidden state. */
.selectOptionsContainer,
.selectOptionsContainer2 {
    display: none;
    width: 100%;
    padding: 0;
    background: #fff;
    z-index: 9500;
    border: 1px solid var(--wf-line);
    border-radius: 14px;
    box-shadow: var(--wf-shadow);
}

#appendSelectOptions,
#appendSelectOptions2 {
    display: block;
    max-height: 310px;
    overflow-y: auto;
}

/* ------------------------------------------------------------------
   Service search suggestions (#appendSelectOptions2)
   Populated by home.js's loadServices() and browse-services.js's
   loadSearchServices() — both pages share this exact markup, so one
   set of rules here (rather than duplicated per-page CSS) keeps the
   Home hero search and the Browse Services search dropdown in sync.
------------------------------------------------------------------ */
#appendSelectOptions2 {
    padding: 8px 0;
}

    #appendSelectOptions2 .svc-sugg-section {
        padding: 14px 18px 8px 18px;
        font-size: .74rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--wf-muted);
        border-top: 1px solid var(--wf-line);
        margin-top: 6px;
    }

    #appendSelectOptions2 .svc-sugg-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 18px;
        cursor: pointer;
        transition: background .15s ease;
    }

        #appendSelectOptions2 .svc-sugg-row:hover {
            background: var(--wf-bg-soft);
        }

.svc-sugg-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--wf-accent-light);
    color: var(--wf-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}

.svc-sugg-icon--provider {
    background: var(--wf-bg-soft);
    color: var(--wf-primary-dark);
}

.svc-sugg-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
}

.svc-sugg-eyebrow {
    display: block;
    font-size: .74rem;
    color: var(--wf-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.svc-sugg-title {
    display: block;
    font-size: .92rem;
    font-weight: 600;
    color: var(--wf-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.svc-sugg-fee {
    flex: 0 0 auto;
    font-size: .88rem;
    font-weight: 700;
    color: var(--wf-ink);
    white-space: nowrap;
    text-align: right;
}

.svc-sugg-fee-unit {
    font-size: .68rem;
    font-weight: 600;
    color: var(--wf-muted);
    margin-left: 2px;
}

.svc-sugg-free {
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    color: var(--wf-primary-dark);
    background: var(--wf-accent-light);
    padding: 3px 10px;
    border-radius: 20px;
}

.svc-sugg-loc {
    font-size: .78rem;
    font-weight: 500;
    color: var(--wf-muted);
}

    .svc-sugg-loc i {
        color: var(--wf-muted);
        margin-right: 3px;
    }

#appendSelectOptions2 .svc-sugg-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--wf-muted);
    cursor: default;
}

    #appendSelectOptions2 .svc-sugg-empty:hover {
        background: transparent;
    }

    #appendSelectOptions2 .svc-sugg-empty i {
        font-size: 1.6rem;
        color: var(--wf-line);
        margin-bottom: 10px;
        display: inline-block;
    }

.svc-sugg-empty-title {
    display: block;
    font-weight: 700;
    color: var(--wf-ink);
    font-size: .92rem;
    margin-bottom: 4px;
}

.svc-sugg-empty-sub {
    display: block;
    font-size: .82rem;
}

@media (max-width: 575.98px) {
    .svc-sugg-fee {
        display: none;
    }

    #appendSelectOptions2 .svc-sugg-row {
        padding: 10px 14px;
    }
}

.addMenuAsset a {
    text-decoration: none;
    color: var(--wf-ink);
    font-weight: 600;
    display: block;
    padding: 6px 10px;
    border-radius: 8px;
}

    .addMenuAsset a:hover {
        background: var(--wf-accent-light);
        color: var(--wf-primary);
    }

    .addMenuAsset a small {
        color: var(--wf-muted);
        font-weight: 400;
    }

/* ============================================================
   2. TOP NAVBAR
============================================================ */
.wf-navbar {
    height: 78px;
    background: var(--wf-primary-darker);
    border-bottom: 0;
    box-shadow: 0 2px 14px rgba(7, 58, 42, .25);
}

    .wf-navbar .container-fluid {
        max-width: 1360px;
        margin: 0 auto;
    }

.wf-logo {
    display: flex;
    align-items: center;
    color: #fff !important;
}

.wf-logo-img {
    height: 44px;
    width: auto;
    display: block;
}

.wf-navbar .wf-logo-img {
    filter: brightness(0) invert(1);
}

.gov-footer .wf-logo-img {
    height: 32px;
}

.wf-nav-links {
    gap: 4px;
}

    .wf-nav-links .nav-link {
        color: #cfe3da !important;
        font-weight: 500;
        font-size: .95rem;
        padding: 10px 16px !important;
        border-radius: 10px;
        white-space: nowrap;
        transition: all .18s ease;
    }

        .wf-nav-links .nav-link:hover,
        .wf-nav-links .nav-link.dropdown-toggle:hover {
            color: #fff !important;
            background: rgba(255,255,255,.1);
        }

    .wf-nav-links .dropdown-menu {
        border: 1px solid var(--wf-line);
        border-radius: 12px;
        box-shadow: var(--wf-shadow);
        padding: 8px;
        background: #fff;
    }

        .wf-nav-links .dropdown-menu .dropdown-item {
            border-radius: 8px;
            padding: 9px 12px;
            font-size: .92rem;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--wf-ink);
        }

            .wf-nav-links .dropdown-menu .dropdown-item:hover {
                background: var(--wf-accent-light);
                color: var(--wf-primary);
            }

/* Guest CTA buttons (Log in / Sign up) — on the dark navbar, "Log
   in" becomes a light-outline ghost button and "Sign up" stays the
   same solid accent button (already high-contrast on dark green). */
.wf-nav-cta {
    gap: 10px;
}

.wf-navbar .wf-btn-ghost {
    border: 1px solid rgba(255,255,255,.35);
    background: transparent;
    color: #fff;
}

    .wf-navbar .wf-btn-ghost:hover {
        border-color: #fff;
        color: #fff;
        background: rgba(255,255,255,.1);
    }

.wf-btn-ghost {
    border: 1px solid var(--wf-line);
    background: #fff;
    color: var(--wf-ink);
    font-weight: 600;
    font-size: .92rem;
    padding: 9px 18px;
    border-radius: 10px;
    transition: all .18s ease;
    white-space: nowrap;
}

    .wf-btn-ghost:hover {
        border-color: var(--wf-primary);
        color: var(--wf-primary);
    }

.wf-btn-solid {
    background: var(--wf-primary);
    border: 1px solid var(--wf-primary);
    color: #fff !important;
    font-weight: 600;
    font-size: .92rem;
    padding: 10px 20px;
    border-radius: 10px;
    transition: all .18s ease;
    white-space: nowrap;
}

    .wf-btn-solid:hover {
        background: var(--wf-primary-dark);
        border-color: var(--wf-primary-dark);
        color: #fff;
    }

.wf-navbar .wf-btn-solid {
    border-color: transparent;
}

    .wf-navbar .wf-btn-solid:hover {
        background: var(--wf-accent);
        border-color: transparent;
    }

/* Signed-in account chip. #my_account_li carries the "hide" class
   by default and AppGlobal.js's reflectSignInState() shows/hides it
   — this is now the ONLY account indicator (the old separate
   Dashboard/Payments dropdown was folded out to reduce nav
   clutter), and it stays hidden until the user is actually signed
   in, matching the reference design's guest state exactly. */
#my_account_li {
    display: flex;
    align-items: center;
}

/* Below the navbar-collapse breakpoint the bell + account chip are
   redundant with the hamburger's sidebar (.oMessage), which already
   shows the signed-in name via the shared .sbSignUpId class in
   .userSignUpSideBar — see reflectSignInState() in AppGlobal.js.
   Without this, once signed in, the bell and chip render next to
   .sharpMenu instead of being replaced by it. */
@media (max-width: 991px) {
    #my_account_li {
        display: none !important;
    }
}

.wf-account-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 30px;
    padding: 6px 14px 6px 8px;
    cursor: pointer;
    background: rgba(255,255,255,.06);
    transition: all .18s ease;
}

    .wf-account-chip:hover {
        border-color: #fff;
    }

    .wf-account-chip .wf-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(255,255,255,.14);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex: none;
    }

    .wf-account-chip .sbSignUpId {
        font-size: .88rem;
        font-weight: 600;
        color: #fff;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wf-account-chip .bi-chevron-down {
        color: #cfe3da;
    }

/* Bell / notifications */
.wf-navbar .notfWrap {
    position: relative;
    display: flex;
    align-items: center;
    /* AppGlobal.js's adjustNotificationPosition() sets an inline
       "right" offset sized for the old header layout — neutralise
       it here (an !important in a stylesheet beats a plain inline
       style) while still allowing position:relative so the dropdown
       below anchors correctly under the bell. */
    top: auto !important;
    right: auto !important;
}

.wf-bell {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.06);
    position: relative;
    text-decoration: none;
    transition: all .18s ease;
}

    .wf-bell:hover {
        color: #fff;
        border-color: #fff;
        background: rgba(255,255,255,.14);
    }

    /* AppGlobal.js toggles this class on #viewNotf on every click,
       independent of the slide state, so it's a reliable "the panel
       is open" hook. */
    .wf-bell.cOpen {
        color: #fff;
        background: rgba(255,255,255,.18);
        border-color: #fff;
    }

/* ------------------------------------------------------------
   Unread-count badge. AppGlobal.js swaps between two class pairs
   on the SAME span depending on state — .notfCa/.notDa (read /
   nothing new) and .notfC/.notD (unread) — so both need full,
   independent styling; there is no shared base to lean on.
------------------------------------------------------------ */
.wf-navbar .notfCa,
.wf-navbar .notfC {
    position: absolute;
    top: -4px;
    right: -4px;
    width: auto;
    min-width: 16px;
    height: 16px;
    line-height: 14px;
    font-size: 10px;
    padding: 0 4px;
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
}

    /* Muted state — nothing new. Understated on purpose: a loud red
   "0" reads as a false alarm. Lightened here so it still reads
   against the dark navbar bell it now sits on. */
    .wf-navbar .notfCa.notDa {
        background: rgba(255,255,255,.22);
        color: #fff;
        border: 2px solid var(--wf-primary-darker);
    }

    /* Unread state — the one that should actually grab attention. */
    .wf-navbar .notfC.notD {
        background: #e0473c;
        color: #fff;
        border: 2px solid var(--wf-primary-darker);
        box-shadow: 0 0 0 0 rgba(224, 71, 60, .55);
        animation: wf-notf-pulse 1.8s ease-out infinite;
    }

@keyframes wf-notf-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(224, 71, 60, .45);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(224, 71, 60, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(224, 71, 60, 0);
    }
}

/* ------------------------------------------------------------
   Notification dropdown panel (#viewNotf's .slideNotf).
   AppGlobal.js only ever touches this element's own visibility
   (slideToggle) and its INNER content (empty()/html()) — it never
   re-classes or replaces the element itself, so every box-level
   style below (position, size, chrome) survives every refresh.
   The "Notifications" title is a ::before pseudo-element for the
   same reason: content.html() replaces real children, never
   generated content.
------------------------------------------------------------ */
.slideNotf {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    right: -8px;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: 420px;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(16, 32, 28, .18);
    border: 1px solid var(--wf-line);
    z-index: 2000;
}

    .slideNotf::before {
        content: "Notifications";
        display: block;
        padding: 16px 18px;
        font-weight: 800;
        font-size: .95rem;
        color: var(--wf-ink);
        background: #fff;
        border-bottom: 1px solid var(--wf-line);
    }

    /* Individual notification row — covers both the populated-item
   markup (.messageCapsule.notfContent) and the empty-state markup
   (.notfContent alone, no .messageCapsule). */
    .slideNotf .notfContent {
        display: block;
        padding: 14px 18px;
        border-bottom: 1px solid var(--wf-line);
        text-decoration: none;
    }

    .slideNotf .messageCapsule {
        cursor: pointer;
        transition: background .15s ease;
    }

        .slideNotf .messageCapsule:hover {
            background: var(--wf-bg-soft);
        }

    /* Unread highlight — a soft tint plus a left accent bar, applied
   via box-shadow so it doesn't disturb the padding/border set
   above. */
    .slideNotf .bg-newnotf {
        background: var(--wf-accent-light);
        box-shadow: inset 3px 0 0 var(--wf-primary);
    }

    .slideNotf .notfTitle {
        margin: 0;
        font-size: .88rem;
        font-weight: 600;
        color: var(--wf-ink);
        line-height: 1.45;
        white-space: normal;
    }

    .slideNotf .notfTime {
        display: inline-block;
        margin-top: 4px;
        font-size: .75rem;
        font-weight: 500;
        color: var(--wf-muted);
    }

    .slideNotf #allNotf {
        padding: 4px 18px 14px 18px;
    }

        .slideNotf #allNotf p {
            margin: 0;
        }

        .slideNotf #allNotf a {
            color: var(--wf-primary);
            font-weight: 700;
            font-size: .85rem;
            text-decoration: none;
            cursor: pointer;
        }

            .slideNotf #allNotf a:hover {
                text-decoration: underline;
            }

@media (max-width: 480px) {
    .slideNotf {
        position: fixed;
        top: 74px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
}

/* Mobile hamburger — hidden on desktop, the full nav-links row
   covers that; only relevant at <992px where Bootstrap collapses
   #mainNav (and the sign-in/up buttons that live inside it). */
.sharpMenu {
    display: none;
}

@media (max-width: 991px) {
    .sharpMenu {
        display: block;
    }
}

.wf-navbar .sharpMenu a {
    color: #fff !important;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px !important;
}

/* ============================================================
   3. LEFT MOBILE SIDEBAR (.oMessage)
   Full base rules — this used to come entirely from the retired
   files, so position/sizing/z-index all need to be defined here
   now, not just the color palette.
============================================================ */
.oMessage {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7110;
    width: 25%;
    min-width: 270px;
    height: 100%;
    /* extra bottom padding reserves room so the absolutely-positioned
       .userSignUpSideBar (below) never overlaps the last menu item */
    padding: 40px 32px 104px;
    box-sizing: border-box;
    overflow-y: auto;
    background: var(--wf-primary-darker);
    color: #eaf6f1;
}

@media (max-width: 414px) {
    .oMessage {
        width: 100%;
        padding: 32px 24px 100px;
    }
}

.oMessage .menItem {
    margin-bottom: 6px;
}

    .oMessage .menItem a {
        color: #eaf6f1 !important;
        font-weight: 500;
        text-decoration: none;
        display: block;
        padding: 10px 4px;
    }

        .oMessage .menItem a i {
            color: #7fb3a0 !important;
            width: 22px;
            display: inline-block;
        }

        .oMessage .menItem a:hover {
            color: #fff !important;
        }

.oMessage span[style*="color:#818181"],
.oMessage span[style*="color: #818181"] {
    color: #7fb3a0 !important;
}

.oMessage .userSignUpSideBar {
    /* .oMessage is position:fixed, so it's the containing block here —
       pin this to its bottom edge instead of letting it sit in normal
       flow right after the menu items (where it used to land roughly
       mid-sidebar on taller screens). It still scrolls into view along
       with the rest of the sidebar's content if that content ever
       grows taller than the viewport. */
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 32px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 10px 6px;
    margin-top: 0;
    color: #eaf6f1;
}

    /* The markup's .row/.col-10/.col-2 grid is only there for the two
       pieces (name-or-"Sign In or Sign Up" text + chevron) — it isn't
       meant to span the sidebar's full width, so it's re-flexed here as
       a centered, auto-sized group instead of stretched Bootstrap
       columns. Scoped to .userSignUpSideBar so it doesn't touch any
       other .row/.col usage on the page. */
    .oMessage .userSignUpSideBar a.openUserSignInOptions {
        display: block;
        width: 100%;
        text-decoration: none;
        color: inherit;
    }

    .oMessage .userSignUpSideBar .row {
        --bs-gutter-x: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 0;
    }

        .oMessage .userSignUpSideBar .row > .col-10 {
            flex: 0 1 auto;
            width: auto;
            max-width: calc(100% - 26px);
            padding: 0;
        }

        .oMessage .userSignUpSideBar .row > .col-2 {
            flex: 0 0 auto;
            width: auto;
            padding: 0;
        }

    .oMessage .userSignUpSideBar p {
        margin: 0;
        text-align: center;
    }

@media (max-width: 414px) {
    .oMessage .userSignUpSideBar {
        left: 24px;
        right: 24px;
        bottom: 24px;
    }
}

/* ============================================================
   4. SIGN-IN SIDE PANEL (#signInBox, shared by #msgModal)
   Full base rules — display:none default, fixed positioning, etc.
   all need to be self-contained now.
============================================================ */
.signInBox {
    display: none;
    position: fixed;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    max-width: 440px;
    border-radius: 0;
    padding: 0;
    background: var(--wf-primary-darker);
    box-shadow: -20px 0 60px rgba(0,0,0,.25);
    overflow-y: auto;
    z-index: 1200;
}

    .signInBox .close-btn {
        position: absolute;
        cursor: pointer;
        color: #fff;
        font-size: 26px;
        top: 22px;
        right: 26px;
        opacity: .85;
    }

        .signInBox .close-btn:hover {
            opacity: 1;
        }

    .signInBox .wf-signin-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 28px 32px 0 32px;
    }

        .signInBox .wf-signin-brand .wf-logo-img {
            height: 26px;
            filter: brightness(0) invert(1);
        }

    .signInBox h2.wf-signin-title {
        color: #fff;
        font-weight: 800;
        font-size: 1.5rem;
        margin: 22px 32px 4px 32px;
    }

    .signInBox p.wf-signin-sub {
        color: #b7d8cd;
        font-size: .92rem;
        margin: 0 32px 24px 32px;
    }

    .signInBox #activityDiv {
        padding: 0 32px 32px 32px;
        margin: 0;
    }

    .signInBox .form-control {
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.16);
        color: #fff;
        border-radius: 12px;
        height: 48px;
    }

        .signInBox .form-control::placeholder {
            color: #a9c9bd;
        }

        .signInBox .form-control:focus {
            border-color: var(--wf-accent);
            box-shadow: 0 0 0 3px rgba(22,163,117,.25);
        }

    .signInBox label {
        color: #cfe9de;
    }

    .signInBox .toggle-password {
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.16);
        color: #cfe9de;
    }

    .signInBox #trylogin_main {
        background: var(--wf-accent);
        border-radius: 12px;
        border: 0;
    }

        .signInBox #trylogin_main:hover {
            background: #12915f;
        }

/* ============================================================
   5. HERO
============================================================ */
.hero-main-section {
    background: #ffffff;
    min-height: unset;
    padding: 56px 0 40px 0;
}

.wf-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--wf-accent-light);
    color: var(--wf-primary);
    font-weight: 600;
    font-size: .82rem;
    padding: 7px 16px;
    border-radius: 30px;
    margin-bottom: 18px;
}

.wf-hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1px;
    color: var(--wf-ink);
}

    .wf-hero-title .wf-accent-text {
        color: var(--wf-primary);
    }

.wf-hero-sub {
    color: var(--wf-muted);
    font-size: 1.05rem;
    max-width: 480px;
    line-height: 1.6;
}

.wf-hero-search-wrap {
    background: #fff;
    border: 1px solid var(--wf-line);
    border-radius: 18px;
    box-shadow: var(--wf-shadow);
    padding: 8px;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

    .wf-hero-search-wrap .editableContainer {
        background: transparent;
        height: 52px;
        padding-right: 10px;
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .wf-hero-search-wrap .editableDiv {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.3;
        padding: 0 6px;
        color: var(--wf-ink);
        width: 100%;
        max-width: 100%;
        outline: none;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }

        .wf-hero-search-wrap .editableDiv::-webkit-scrollbar {
            display: none;
        }

        .wf-hero-search-wrap .editableDiv:empty:before {
            content: attr(data-placeholder);
            color: #8a9793;
            font-weight: 400;
            font-size: 15px;
            white-space: nowrap;
            pointer-events: none;
        }

    .wf-hero-search-wrap .searchIcon {
        display: none;
    }

.wf-cat-select {
    border: 0;
    border-left: 1px solid var(--wf-line);
    background: transparent;
    color: var(--wf-muted);
    font-weight: 600;
    font-size: .9rem;
    padding: 0 30px 0 14px;
    width: 170px;
    max-width: 170px;
    flex: none;
    outline: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.wf-hero-search-btn {
    background: var(--wf-primary);
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: 0 26px;
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    transition: background .18s ease;
}

    .wf-hero-search-btn:hover {
        background: var(--wf-primary-dark);
    }

.wf-popular-searches {
    font-size: .85rem;
    color: var(--wf-muted);
    margin-top: 14px;
}

    .wf-popular-searches .wf-pill {
        display: inline-block;
        color: var(--wf-primary);
        font-weight: 600;
        cursor: pointer;
        margin-left: 6px;
    }

        .wf-popular-searches .wf-pill:hover {
            text-decoration: underline;
        }

.wf-hero-media {
    position: relative;
    min-height: 340px;
}

.wf-hero-photo {
    width: 100%;
    border-radius: 22px;
    box-shadow: var(--wf-shadow);
    display: block;
    object-fit: cover;
}

.wf-float-card {
    position: absolute;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(16,32,28,.16);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
    max-width: 210px;
}

    .wf-float-card .wf-float-icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        color: #fff;
        flex: none;
    }

    .wf-float-card.is-done .wf-float-icon {
        background: #16a375;
    }

    .wf-float-card.is-review .wf-float-icon {
        background: #f0a53d;
    }

    .wf-float-card.is-complete .wf-float-icon {
        background: #16a375;
    }

    .wf-float-card .wf-float-title {
        font-weight: 700;
        color: var(--wf-ink);
        display: block;
    }

    .wf-float-card .wf-float-time {
        color: var(--wf-muted);
        font-size: .75rem;
    }

.wf-float-1 {
    top: -6px;
    right: 8px;
}

.wf-float-2 {
    top: 44%;
    right: -12px;
}

.wf-float-3 {
    bottom: -6px;
    right: 30px;
}

@media (max-width: 991px) {
    .wf-hero-title {
        font-size: 2.1rem;
    }

    .wf-hero-media {
        display: none;
    }

    .wf-hero-search-wrap {
        flex-wrap: wrap;
    }

    .wf-cat-select {
        display: none;
    }

    .wf-hero-search-btn {
        width: 100%;
        padding: 12px;
    }
}

/* Add the hero's own bottom edge shadow so it reads as a distinct
   block from the trust bar underneath rather than bleeding into it
   (both are plain white otherwise). */
.hero-main-section {
    position: relative;
    z-index: 1;
    /*box-shadow: 0 12px 24px -20px rgba(16, 32, 28, .35);*/
    background: var(--wf-bg-soft);
    border-bottom: 1px solid var(--wf-line);
}

/* ============================================================
   6. TRUST BAR
============================================================ */
.wf-trustbar {
    background: #fff;
    border-bottom: 1px solid var(--wf-line);
    padding: 26px 0;
}

.wf-trustbar-label {
    text-align: center;
    font-size: .78rem;
    letter-spacing: .06em;
    color: var(--wf-muted);
    font-weight: 700;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.wf-trust-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.wf-trust-logo {
    border: 1px solid var(--wf-line);
    border-radius: 10px;
    padding: 10px 18px;
    font-size: .82rem;
    font-weight: 700;
    color: #46534f;
    background: var(--wf-bg-soft);
}

/* ============================================================
   7. CATEGORY GRID
============================================================ */
.wf-section-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--wf-ink);
}

.wf-section-link {
    color: var(--wf-primary);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    white-space: nowrap;
}

    .wf-section-link:hover {
        text-decoration: underline;
    }

@media (max-width: 575px) {
    .wf-section-head {
        flex-wrap: wrap;
        row-gap: 6px;
    }

        .wf-section-head .wf-section-title {
            font-size: 1.3rem;
        }

        .wf-section-head .wf-section-link {
            font-size: .82rem;
        }
}

.wf-cat-card {
    background: #fff;
    border: 1px solid var(--wf-line);
    border-radius: 14px;
    padding: 22px 16px;
    text-align: left;
    height: 100%;
    display: block;
    cursor: pointer;
    transition: all .2s ease;
}

    .wf-cat-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--wf-shadow);
        border-color: transparent;
    }

    .wf-cat-card .wf-cat-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: var(--wf-accent-light);
        color: var(--wf-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-bottom: 14px;
    }

        /* Alternating background/colour per tile — same icon glyphs as
       before (set in Home.cshtml's markup), just no longer all sharing
       one uniform accent-light square. Reuses the exact same cat-*
       palette as .oServeCatTag above so the category colour language
       is consistent across the whole site, not a second one invented
       just for this grid. */
        .wf-cat-card .wf-cat-icon.cat-green {
            background: #e6f5ef;
            color: #0e6b4e;
        }

        .wf-cat-card .wf-cat-icon.cat-orange {
            background: #fdece1;
            color: #c76a1f;
        }

        .wf-cat-card .wf-cat-icon.cat-purple {
            background: #f1ecfb;
            color: #6c4fd1;
        }

        .wf-cat-card .wf-cat-icon.cat-violet {
            background: #f2ebfb;
            color: #8b3fd6;
        }

        .wf-cat-card .wf-cat-icon.cat-blue {
            background: #e7f0fd;
            color: #2563eb;
        }

        .wf-cat-card .wf-cat-icon.cat-red {
            background: #fdeaea;
            color: #d1443f;
        }

        .wf-cat-card .wf-cat-icon.cat-neutral {
            background: #eef1f0;
            color: var(--wf-muted);
        }

    .wf-cat-card .wf-cat-name {
        font-weight: 700;
        font-size: .95rem;
        color: var(--wf-ink);
        display: block;
        margin-bottom: 3px;
    }

    .wf-cat-card .wf-cat-count {
        color: var(--wf-muted);
        font-size: .8rem;
    }

/* ============================================================
   8. TRACK & VERIFY CARD
============================================================ */
.wf-tv-card {
    background: var(--wf-bg-soft);
    border-radius: 22px;
    padding: 36px;
}

.wf-tv-icon {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--wf-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--wf-primary);
}

.wf-tv-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--wf-line);
    margin-bottom: 14px;
}

    .wf-tv-tabs .wf-tv-tab {
        border: 0;
        background: none;
        padding: 8px 4px 12px 4px;
        font-weight: 700;
        font-size: .88rem;
        color: var(--wf-muted);
        border-bottom: 2px solid transparent;
        margin-right: 22px;
        cursor: pointer;
    }

        .wf-tv-tabs .wf-tv-tab.active {
            color: var(--wf-primary);
            border-bottom-color: var(--wf-primary);
        }

.wf-tv-card .form-control {
    border-radius: 12px 0 0 12px;
    border-color: #d7e4df;
}

.btn_app {
    background: var(--wf-primary);
    color: #fff;
    border-radius: 0 12px 12px 0;
    border: 1px solid var(--wf-primary);
}

    .btn_app:hover {
        background: var(--wf-primary-dark);
        color: #fff;
    }

.wf-tv-help {
    font-size: .85rem;
    color: var(--wf-muted);
}

/* ============================================================
   9. POPULAR SERVICES
   (.oServe is generated by home.js's loadRandomServices() — the
   element itself is untouched, but since headers2.css is gone the
   card now needs a complete, self-contained definition rather than
   an override.)
============================================================ */
.oServeContainer .oServe {
    background: #fff;
    border: 1px solid var(--wf-line);
    border-radius: 14px;
    padding: 20px 20px 22px 20px;
    height: 100%;
    min-height: 230px;
    cursor: pointer;
    transition: all .2s ease;
    margin-bottom: 0;
    box-shadow: none;
}

    .oServeContainer .oServe:hover {
        transform: translateY(-3px);
        box-shadow: var(--wf-shadow);
    }

    .oServeContainer .oServe h4 {
        font-size: 1rem;
        font-weight: 700;
        color: var(--wf-ink);
        margin-top: 14px;
    }

    .oServeContainer .oServe .smallText {
        color: var(--wf-muted);
    }

    .oServeContainer .oServe p {
        font-size: .85rem;
        color: var(--wf-muted);
        margin-bottom: 6px;
    }

    /* home.js's .multicolor-dash div is hidden, not styled — matching
   browse-services.css exactly. The .oServeCatTag chip above it now
   carries the category signal these cards show, so the old fixed
   file-icon badge (every card showed the same glyph regardless of
   category) is redundant and has been removed rather than recoloured. */
    .oServeContainer .oServe .multicolor-dash {
        display: none;
    }

    /* home.js wraps the fee + duration lines in a d-flex row with
   inline pill backgrounds; this stacks them as plain text instead,
   matching the reference design. */
    .oServeContainer .oServe > .d-flex.align-items-center.mt-4 {
        display: block !important;
        margin-top: 14px !important;
    }

        .oServeContainer .oServe > .d-flex.align-items-center.mt-4 p {
            display: block !important;
            margin: 0 0 2px 0 !important;
        }

    .oServeContainer .oServe span[style*="background:#000000"],
    .oServeContainer .oServe span[style*="background:#28a778"] {
        background: transparent !important;
        color: var(--wf-primary) !important;
        font-weight: 800 !important;
        font-size: 1rem !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .oServeContainer .oServe span[style*="background:#f1f3f5"] {
        background: transparent !important;
        color: var(--wf-muted) !important;
        font-weight: 500 !important;
        font-size: .82rem !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

/* oServeCatTag — the sample category chip on every service card
   (Home's Popular Services, Browse Services' results, Description's
   hero). Promoted here so it's styled globally rather than duplicated
   per page; getServiceCategoryTag() in home.js/browse-services.js/
   description.js all pick one of these same cls values from the same
   hashed institution name, so a given provider always shows the same
   tag+colour everywhere on the site. */
.oServeCatTag {
    display: inline-block;
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .01em;
    padding: 4px 12px;
    border-radius: 20px;
}

    .oServeCatTag:empty {
        display: none;
    }

    .oServeCatTag.cat-green {
        background: #e6f5ef;
        color: #0e6b4e;
    }

    .oServeCatTag.cat-orange {
        background: #fdece1;
        color: #c76a1f;
    }

    .oServeCatTag.cat-purple {
        background: #f1ecfb;
        color: #6c4fd1;
    }

    .oServeCatTag.cat-violet {
        background: #f2ebfb;
        color: #8b3fd6;
    }

    .oServeCatTag.cat-blue {
        background: #e7f0fd;
        color: #2563eb;
    }

    .oServeCatTag.cat-red {
        background: #fdeaea;
        color: #d1443f;
    }

    .oServeCatTag.cat-teal {
        background: #e3f6f5;
        color: #0f8e88;
    }

/* ============================================================
   10. STATS BAR
============================================================ */
.wf-statsbar {
    background: linear-gradient(120deg, var(--wf-primary-darker), var(--wf-primary));
    padding: 64px 0;
}

.wf-stat {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: left;
}

    .wf-stat .wf-stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(255,255,255,.12);
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
    }

    .wf-stat i {
        font-size: 1.3rem;
        color: #b7e6d3;
    }

    .wf-stat .wf-stat-num {
        font-size: 1.5rem;
        font-weight: 800;
        display: block;
        line-height: 1.2;
    }

    .wf-stat .wf-stat-label {
        font-size: .82rem;
        color: #cdeadd;
        display: block;
    }

@media (max-width: 767px) {
    .wf-stat {
        justify-content: flex-start;
    }
}

/* ============================================================
   11. HOW IT WORKS
   (.step-circle itself is defined inline in _Layout_home.cshtml;
   these are just the supporting text styles.)
============================================================ */
#how-it-works {
    background: #fff;
    padding: 70px 0;
}

    #how-it-works .wf-step-title {
        font-weight: 700;
        font-size: 1rem;
        margin-bottom: 4px;
    }

    #how-it-works .wf-step-text {
        color: var(--wf-muted);
        font-size: .85rem;
    }

    #how-it-works .wf-step-arrow {
        color: #c9d6d1;
        font-size: 1.4rem;
    }

@media (max-width: 991px) {
    #how-it-works .wf-step-arrow {
        display: none;
    }
}

/* ============================================================
   12. TESTIMONIAL
============================================================ */
.wf-testimonial {
    background: var(--wf-bg-soft);
    border-radius: 22px;
    padding: 40px;
}

.wf-testimonial-quote {
    font-size: 1.5rem;
    color: var(--wf-primary);
    line-height: 1;
}

.wf-testimonial-text {
    font-size: 1.05rem;
    color: #2a3a36;
    line-height: 1.7;
}

.wf-testimonial-author {
    font-weight: 700;
    color: var(--wf-ink);
}

.wf-testimonial-photo {
    width: 100%;
    border-radius: 18px;
    object-fit: cover;
}

/* ============================================================
   13. FOOTER
   Full, self-contained rewrite — the old base rules for these
   classes lived in a block of Home.cshtml that was removed along
   with the legacy sections, which is why the footer went unstyled.
============================================================ */
/* Solid dark-green footer, matching the reference design — same
   deep tone as .wf-statsbar / .svc-hiw-card elsewhere on the site. */
.gov-footer {
    background: var(--wf-primary-darker);
    border-top: 0;
    color: #cfe3da;
}

    .gov-footer .wf-logo-img {
        filter: brightness(0) invert(1);
    }

.footer-brand {
    font-weight: 800;
    font-size: 1.15rem;
    color: #fff;
    margin-bottom: 12px;
}

.footer-text {
    color: #a9c4ba;
    font-size: .88rem;
    line-height: 1.6;
    max-width: 320px;
}

.footer-title {
    font-weight: 800;
    font-size: .92rem;
    color: #fff;
    margin-bottom: 16px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-links li {
        margin-bottom: 10px;
    }

    .footer-links a {
        color: #a9c4ba;
        text-decoration: none;
        font-size: .88rem;
        transition: color .15s ease;
    }

        .footer-links a:hover {
            color: #fff;
        }

.wf-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

    .wf-footer-social a {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: rgba(255,255,255,.08);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

        .wf-footer-social a:hover {
            background: rgba(255,255,255,.16);
            color: #fff;
        }

.wf-footer-bottom {
    padding-top: 20px;
    margin-top: 10px;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: .85rem;
    color: #a9c4ba;
}

@media (max-width: 767px) {
    .footer-brand-col {
        text-align: center;
    }

    .footer-text {
        max-width: 360px;
        margin: 0 auto;
    }

    .wf-footer-social {
        justify-content: center;
    }

    .wf-footer-bottom {
        text-align: center;
        justify-content: center !important;
    }
}

/* ============================================================
   14. MISC SHARED-CHROME DETAILS
============================================================ */
.closeOMessage {
    color: #eaf6f1 !important;
    position: absolute;
    right: 20px;
    top: 16px;
    font-size: 20px;
    opacity: .85;
}

    .closeOMessage:hover {
        opacity: 1;
    }

/* .userSignUpSideBar's sign-in prompt inherits the sidebar's light
   text color now that its old .text-dark utility classes have been
   removed (dark text was unreadable on the dark sidebar). */
.oMessage .userSignUpSideBar .sbSignUpId,
.oMessage .userSignUpSideBar i {
    color: #eaf6f1;
}

/* ============================================================
   15. REMAINING SITE-WIDE OVERLAYS
   These all live in _Layout_home.cshtml (so they render on every
   page, not just Home) and previously relied entirely on the
   retired files for their hidden-by-default state. Without this,
   they'd render as permanently-visible blocks at the top of every
   page.
============================================================ */
a {
    text-decoration: none;
}

.overlayApp {
    background: rgba(255,255,255,.74);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    display: none;
}

.oModal {
    display: none;
    background: #fff;
    color: #000;
    position: fixed;
    margin: auto;
    inset: 0;
    z-index: 7120;
    bottom: 0;
    left: 0;
    width: 90%;
    max-width: 420px;
    height: fit-content;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--wf-shadow);
}

.oMessage2 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7110;
    width: 100%;
    max-width: 420px;
    height: 100%;
    padding: 40px 32px;
    overflow-y: auto;
    background: #fff;
    color: #202123;
}

    .oMessage2 .form-control {
        border: 1px solid #d7e4df;
        border-radius: 10px;
    }

.overlayModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

    .overlayModal .modalBox {
        background: #fff;
        border-radius: 16px;
        padding: 24px;
        width: 90%;
        max-width: 420px;
        box-shadow: var(--wf-shadow);
    }

/* In-page async work indicator (form submission, background
   lookups, etc.) — AppGlobal.js's stageSetter() toggles the "show"
   class rather than calling .show()/.hide() directly. */
.processOverlay {
    position: fixed;
    inset: 0;
    z-index: 8000;
    background: rgba(255,255,255,.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}

    .processOverlay.show {
        opacity: 1;
        visibility: visible;
    }

.processOverlaySpinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--wf-line);
    border-top-color: var(--wf-primary);
    border-radius: 50%;
    animation: wf-spin .8s linear infinite;
}

@keyframes wf-spin {
    to {
        transform: rotate(360deg);
    }
}

.processOverlayMsg {
    font-weight: 600;
    color: var(--wf-ink);
    font-size: .9rem;
}

.appWideNotification {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: none;
    z-index: 9960;
    padding: 30px 15px 17px;
    font-weight: 700;
    width: 260px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--wf-shadow);
}

/* Legacy full-page spinner overlay (#page-mask's sibling) — sits
   before the navbar in the DOM, so without display:none + being
   taken out of flow, it was rendering as a blank block and pushing
   the navbar down the page. */
.oGif {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 7200;
    background: rgba(255,255,255,.85);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
}

.oGifSpinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--wf-line);
    border-top-color: var(--wf-primary);
    border-radius: 50%;
    animation: wf-spin .8s linear infinite;
}