/* Find My Franchise — child theme baseline styles.
   Just enough to give pages a usable layout while individual page types are
   ported off DT9. Component-level styling will move into Elementor where
   possible, with this file kept lean. */

:root {
    --fmf-content-max: 1240px;
    --fmf-gap: 32px;
    --fmf-color-text: #1f2937;
    --fmf-color-muted: #6b7280;
    --fmf-color-brand: #FF0000;
    --fmf-color-bg-card: #ffffff;
    --fmf-color-border: #e5e7eb;
    --fmf-radius: 10px;
}

/* Homepage gets a slightly wider container — more breathing room for the
   modern hero + news grid. Other pages keep the default 1240px. */
.fmf-home .fmf-container { max-width: 1280px; padding: 0 24px; }

/* Hello Elementor's theme.css caps `body:not([class*=elementor-page-])
   .site-main` at 1140px, which constrains our full-bleed homepage hero
   to a narrow centred band. Release that constraint on the homepage —
   each section now controls its own width via its inner `.fmf-container`. */
body.home .site-main.fmf-home,
body.home .site-main.fmf-archive,
body.fmf-cities-page .site-main,
.site-main.fmf-cities-page,
body:not([class*=elementor-page-]) .site-main.fmf-home,
body:not([class*=elementor-page-]) .site-main.fmf-archive,
body:not([class*=elementor-page-]) .site-main.fmf-cities-page {
    max-width: none !important;
    width: 100% !important;
    padding-inline: 0 !important;
}

.fmf-container {
    max-width: var(--fmf-content-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* ------- Breadcrumb strip ------- */
.fmf-breadcrumb {
    background: #f3f4f6;
    border-bottom: 1px solid var(--fmf-color-border);
    padding: 10px 0;
    font-size: 14px;
    color: var(--fmf-color-muted);
}
.fmf-breadcrumb a { color: var(--fmf-color-brand); text-decoration: none; }
.fmf-breadcrumb a:hover { text-decoration: underline; }
.fmf-breadcrumb ol,
.fmf-breadcrumb ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* No "›" separator glyph — the theme5 chevron-banner breadcrumb already shows
   direction, so the extra ">" read as an odd stray character. Keep the small
   gap so the chevron banners don't butt together. */
.fmf-breadcrumb li + li::before { content: ""; padding-right: 6px; }

/* ------- Single-listing breadcrumb row (production-style) -------
   Sits below the title/logo header, separated by a red divider line.
   Breadcrumb on left, claim/Account button on right. */
/* Constrain the first .sl-pc-container (the breadcrumb wrapper, which sits
   OUTSIDE <main>) to the same 1140px max-width that the plugin's emitted
   rule applies to the second container (inside <main>). Without this, the
   breadcrumb container is the default 1240px wide and the breadcrumb sits
   ~50px to the left of the main content card. */
body.layout-profile-card .sl-pc-container {
    max-width: 1140px;
}
.fmf-listing-breadcrumb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* No top border, no margin-top — the previous brand-red divider was
       confusing visual noise above the breadcrumb on every listing page. */
    padding: 4px 0 0;
    margin-top: 0;
    border-top: 0;
    flex-wrap: wrap;
}
.fmf-listing-breadcrumb {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    color: var(--fmf-color-muted);
}
.fmf-listing-breadcrumb a { color: var(--fmf-color-brand); text-decoration: none; }
.fmf-listing-breadcrumb a:hover { text-decoration: underline; }
.fmf-listing-breadcrumb ol,
.fmf-listing-breadcrumb ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* No "›" glyph on the single-listing breadcrumb either — the theme5 chevron
   banners already show direction (matches the .fmf-breadcrumb fix above). */
.fmf-listing-breadcrumb li + li::before { content: ""; padding-right: 6px; }
.fmf-listing-breadcrumb-action {
    flex: 0 0 auto;
}
.fmf-listing-breadcrumb-action .claim_this_business {
    display: inline-block;
    padding: 8px 16px;
    background: var(--fmf-color-brand);
    color: #fff;
    text-decoration: none;
    border-radius: var(--fmf-radius);
    font-size: 13px;
    font-weight: 600;
    /* `white-space: nowrap` stops "Franchisor Claim" from wrapping to two
       lines. The `width: auto !important` overrides the legacy Customizer
       Additional CSS rule `.claim_this_business { width: 100% }` (post
       21873) which collapsed the button to its parent's min-content
       (~88px); without the override the text overflows the box. */
    width: auto !important;
    white-space: nowrap;
    transition: background-color .15s;
}
.fmf-listing-breadcrumb-action .claim_this_business:hover { background: #b1213e; }
/* On narrow screens the breadcrumb row wraps and the claim button drops to its
   own line; the legacy Customizer offset (`.claim_this_business.claim_business_link
   { left: -15% }`, post 21873, plus a negative margin) then pushed the button
   off the left edge so its label was clipped. Neutralise the offset on mobile
   only — desktop/tablet keep the intended right-aligned nudge. */
@media (max-width: 600px) {
    .fmf-listing-breadcrumb-action .claim_this_business.claim_business_link {
        left: 0 !important;
        margin-left: 0 !important;
    }
}

/* Tighten the vertical gap between the breadcrumb row and the main
   content card. The two .sl-pc-container wrappers (one for the breadcrumb,
   one for the body grid) previously added 14 + 48 + 24 = 86px of padding/
   margin between them. Drop both bottom-of-breadcrumb and top-of-body
   to zero — the .sl-card's intrinsic 28px top padding gives enough room. */
body.single-listing_type.layout-profile-card .sl-pc-container:has(.fmf-listing-breadcrumb-row) {
    padding-top: 6px;   /* breadcrumb→red-line gap: 6 + 4 (row) keeps it at 36px, matching the category archive */
    padding-bottom: 0;
}
body.single-listing_type.layout-profile-card main.single-listing-profile-card .sl-pc-container {
    padding-top: 8px;
}

/* ------- Single-listing profile-card layout grid -------
   Body has `layout-profile-card` class (set by listing-template-switch.php).
   Cards themselves (.sl-card, .sl-card-brand, .sl-card-keyfacts, .sl-logo-tile,
   .sl-eyebrow, .sl-title, .sl-blurb, .sl-cta-primary) are styled by
   franchise-custom-plugin.php — we only supply the page-level GRID here. */
body.single-listing_type.layout-profile-card .sl-pc-container {
    padding-top: 24px;
    padding-bottom: 48px;
}
body.layout-profile-card .sl-pc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) {
    body.layout-profile-card .sl-pc-row { grid-template-columns: 1fr; }
}
body.layout-profile-card .sl-pc-main { min-width: 0; }
body.layout-profile-card .sl-pc-rail { min-width: 0; }

/* Main content card title (the article H1 inside .sl-card-content).
   `float: none` is mandatory — there's a legacy DT9-era rule in
   Customizer Additional CSS (post 21873):
       .single-listing_type main h1 { float: left; width: 100%; ... }
   which would otherwise apply to .sl-content-title. With the h1 floating,
   the .fmf-tabs sibling block opens at the same top edge but its first
   child .fmf-tabs-nav (display:flex) ends up squashed into the right
   margin with width:0 — flex-wrap then stacks every tab onto its own
   line. Our selector beats the legacy one on specificity (3 classes +
   element vs 1 class + 2 elements) so no !important is required. The
   font-size will still land at 27px because the Customizer rule has
   `font-size: 27px !important`; harmless and not the user's complaint. */
body.layout-profile-card .sl-card-content .sl-content-title {
    float: none;
    clear: both;
    margin: 0 0 16px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fmf-color-text, #1f2937);
}

/* Content-card header — listing H1 on the left, BFA tier badge on the
   right (for member listings). Flex row so the badge sits inline-right of
   the title above the tab nav. */
body.layout-profile-card .sl-card-content .sl-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0;  /* header is now the sole content of its own card */
}
/* When inside the flex header the H1 must not keep its 16px bottom margin
   (the header owns that) and must NOT take the legacy `width: 100%` from
   the Customizer rule — otherwise it pushes the badge to a new line. Our
   selector (body + 3 classes) outranks `.single-listing_type main h1`. */
body.layout-profile-card .sl-card-content .sl-content-header .sl-content-title {
    margin: 0;
    width: auto;
    flex: 0 0 auto;          /* the wrap (below) is the flex:1 child now */
    min-width: 0;
}
/* The H1 + category chip stack vertically, beside the logo, and take the
   remaining row width so the BFA badge is pushed to the far right. */
body.layout-profile-card .sl-content-titlewrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
/* Category chip under the listing name (light-blue pill, mirrors the right-rail
   eyebrow). */
body.layout-profile-card .sl-content-chip {
    display: inline-block;
    background: color-mix(in srgb, #008cd5 12%, #fff);
    color: #008cd5;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    text-decoration: none;
    padding: 5px 13px;
    border-radius: 9999px;
    line-height: 1.4;
    transition: background .15s, color .15s;
}
/* Both the title chip AND the Key Facts category pills go RED on rollover.
   The text colour needs !important: a pre-existing inline rule
   `.sl-card-keyfacts a.selectorz { color: #008cd5 !important }` (from the plugin
   Key Facts CSS) otherwise pins the pill text blue even on hover. */
body.layout-profile-card .sl-content-chip:hover,
body.layout-profile-card .sl-card-keyfacts #catz .selectorz:hover {
    background: color-mix(in srgb, #FF0000 12%, #fff);
    color: var(--fmf-color-brand, #FF0000) !important;
}

/* Key Facts "Categories" row — render the category links as blue pills
   (same look as the title-card chip), wrapping in the value column. */
body.layout-profile-card .sl-card-keyfacts #catz {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
body.layout-profile-card .sl-card-keyfacts #catz .selectorz {
    display: inline-block;
    background: color-mix(in srgb, #008cd5 12%, #fff);
    color: #008cd5;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-decoration: none;
    padding: 4px 11px;
    border-radius: 9999px;
    line-height: 1.4;
    transition: background .15s, color .15s;
}
/* Drop the inline comma separator the widget prints (.selectorz:after{content:","}) —
   the flex gap spaces the pills. Higher specificity beats the inline rule. */
body.layout-profile-card .sl-card-keyfacts #catz .selectorz:after { content: none; }
body.layout-profile-card .sl-bfa-badge {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    object-fit: contain;
    border-radius: 50%;
}
/* Right-rail CTA card — a BLUE box mirroring the bottom Get-Your-Free-Information
   box: heading + snappy blurb + the "Add to Request List" button. Content is
   vertically centred, and JS (functions.php) sets its min-height to the title
   card's height so the two top boxes line up side-by-side (desktop only). */
body.layout-profile-card .sl-pc-rail .sl-card-brand {
    background: #044AAE !important;
    border-color: #044AAE !important;
    color: #fff !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body.layout-profile-card .sl-cta-intro-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}
body.layout-profile-card .sl-cta-intro-body {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.55;
    color: #fff;
}

/* Brand logo tile — sits to the LEFT of the listing H1 in the title card
   (matches the businessesforsale header layout). The H1 (flex:1) sits beside
   it and pushes the BFA badge to the far right. */
body.layout-profile-card .sl-content-logo {
    flex: 0 0 auto;
    width: 124px;
    height: 124px;
    background: #fff;
    border: 1px solid #e4e6ea;
    border-radius: 14px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.layout-profile-card .sl-content-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* Listing excerpt — full width, underneath the logo + title row. Uses the same
   colour as the main body copy (the_content renders black) rather than a muted
   grey, so the two read as one voice. */
body.layout-profile-card .sl-content-excerpt {
    margin: 16px 0 0;
    color: #000;
    font-size: 15px;
    line-height: 1.55;
    max-width: 72ch;
}
@media (max-width: 560px) {
    body.layout-profile-card .sl-bfa-badge { width: 64px; height: 64px; }
    body.layout-profile-card .sl-content-logo { width: 84px; height: 84px; padding: 8px; }
}

/* ------- Section jump-nav inside the main content card (.fmf-tabs) -------
   One-page layout: every section renders stacked down the page; this nav is a
   sticky row of anchor jump-links (pill buttons) with scrollspy highlighting
   the section currently in view. (functions.php wp_footer handles the smooth
   scroll + active-state.) Mirrors the single-page franchise profiles on
   businessesforsale.com — all of Profile / News / Case Studies / Testimonials
   visible on one page, the pills just jump you to each. */
body.layout-profile-card .fmf-tabs-nav {
    display: flex;
    align-items: center;          /* Safari: without this the flex default `stretch` inflates the pills into tall lozenges */
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 24px;              /* its own standalone sticky bar above the section cards */
    padding: 12px 16px;
    position: sticky;
    top: var(--fmf-sticky-top, 82px);  /* park just under the FIXED Elementor header (JS sets the var) */
    z-index: 20;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);  /* match the .sl-card look */
}
body.layout-profile-card .fmf-tab {
    background: #fff;
    border: 1px solid var(--fmf-color-border, #e5e7eb);
    border-radius: 9999px;
    padding: 7px 16px;
    margin: 0;
    color: var(--fmf-color-text, #1f2937);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1.4;
}
body.layout-profile-card .fmf-tab:hover {
    border-color: var(--fmf-color-brand, #FF0000);
    color: var(--fmf-color-brand, #FF0000);
}
body.layout-profile-card .fmf-tab.active {
    background: var(--fmf-color-brand, #FF0000);
    border-color: var(--fmf-color-brand, #FF0000);
    color: #fff;
}
body.layout-profile-card .fmf-tab-count {
    display: inline-block;
    background: #f1f5f9;
    color: var(--fmf-color-muted, #6b7280);
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 9999px;
    line-height: 1.4;
}
body.layout-profile-card .fmf-tab:hover .fmf-tab-count {
    background: color-mix(in srgb, #FF0000 12%, #f1f5f9);
    color: var(--fmf-color-brand, #FF0000);
}
body.layout-profile-card .fmf-tab.active .fmf-tab-count {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* Panels: ALL render, each in its OWN .sl-card box (white, rounded, soft shadow,
   24px gap via .sl-card margin-bottom). scroll-margin so an anchor jump lands the
   card just below the sticky nav. No inter-section rule — the card gaps separate
   them. */
body.layout-profile-card .fmf-tabs-panel { display: block; line-height: 1.6; scroll-margin-top: calc(var(--fmf-sticky-top, 82px) + 80px); }
body.layout-profile-card .fmf-tabs-panel:last-child { margin-bottom: 0; }
body.layout-profile-card .fmf-tabs-panel p { margin: 0 0 1em; }
body.layout-profile-card .fmf-tabs-panel h2,
body.layout-profile-card .fmf-tabs-panel h3 {
    margin-top: 1.3em;
    margin-bottom: .4em;
}

/* Related-content panels: News/Case Studies/Testimonials lists */
body.layout-profile-card .fmf-tabs-panel-title {
    margin: 0 0 18px;
    font-size: 27px;          /* match the listing H1 as RENDERED — the Customizer rule
                                 `.single-listing_type main h1{font-size:27px!important}`
                                 bumps the title to 27px, so mirror that here */
    line-height: 1.2;
    font-weight: 700;
    color: var(--fmf-color-text, #1f2937);
}
body.layout-profile-card .fmf-tabs-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.layout-profile-card .fmf-tabs-panel-item {
    display: flex;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid #f1f5f9;
}
body.layout-profile-card .fmf-tabs-panel-item:first-child { padding-top: 6px; }
body.layout-profile-card .fmf-tabs-panel-item:last-child { border-bottom: 0; padding-bottom: 6px; }
body.layout-profile-card .fmf-tabs-panel-thumb {
    position: relative;
    display: block;
    flex: 0 0 96px;
    height: 72px;
    overflow: hidden;
    border-radius: 6px;
    background: #f1f5f9;
}
body.layout-profile-card .fmf-tabs-panel-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;               /* sits on top of the placeholder; removed on error to reveal it */
}
/* Branded gradient + icon placeholder (mirrors the Popular Searches tiles). */
body.layout-profile-card .fmf-thumb-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2A6FD0 0%, #033A8A 100%);
    color: rgba(255, 255, 255, .95);
}
body.layout-profile-card .fmf-thumb-ph svg {
    width: 42%;
    height: 42%;
}
body.layout-profile-card .fmf-tabs-panel-body { flex: 1 1 auto; min-width: 0; }
body.layout-profile-card .fmf-tabs-panel-body h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
}
body.layout-profile-card .fmf-tabs-panel-body h4 a {
    color: var(--fmf-color-text, #1f2937);
    text-decoration: none;
}
body.layout-profile-card .fmf-tabs-panel-body h4 a:hover { color: var(--fmf-color-brand, #FF0000); }
body.layout-profile-card .fmf-tabs-panel-body p {
    margin: 0;
    color: var(--fmf-color-muted, #6b7280);
    font-size: 13px;
    line-height: 1.5;
}
/* News / Case Study excerpt — clamped to a UNIFORM 2 lines (so snippets are never
   a mix of 2- and 3-line). The browser appends its own … when it truncates. */
body.layout-profile-card .fmf-tabs-panel-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* "Read more" link. The --block variant sits on its OWN line under the excerpt
   (consistent placement); plain .fmf-readmore is the inline testimonial toggle. */
body.layout-profile-card .fmf-readmore {
    color: var(--fmf-color-brand, #FF0000);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
body.layout-profile-card .fmf-readmore:hover { text-decoration: underline; }
body.layout-profile-card .fmf-readmore--block { display: inline-block; margin-top: 8px; }

/* Testimonial collapse: the quote is clamped to ~5 lines until expanded. The
   toggle button (a link-styled <button>) only appears (un-hidden by JS) when the
   quote actually overflows. */
body.layout-profile-card [data-fmf-expandable] .fmf-tabs-panel-quote {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.layout-profile-card [data-fmf-expandable].is-expanded .fmf-tabs-panel-quote {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}
body.layout-profile-card .fmf-expand-toggle {
    margin-top: 8px;
    background: none;
    border: 0;
    padding: 0;
    /* Match the News/Case-Study "Read more" link exactly. This is a <button>, so
       a global theme rule `button, a.btn { font-weight: 800 !important }` forces
       it heavier than the .fmf-readmore <a> links (600) — the !important here is
       needed to beat it. (Don't use the `font` shorthand — it also resets weight.) */
    font-family: inherit;
    font-size: inherit;
    font-weight: 600 !important;
    line-height: 1.4;
    cursor: pointer;
}
body.layout-profile-card .fmf-expand-toggle[hidden] { display: none; }

/* ------- Single listing layout ------- */
.fmf-single-listing {
    padding: 32px 0 64px;
    color: var(--fmf-color-text);
}

/* (Legacy .fmf-listing-header block removed — that info now lives in the
   production-style 2-column .fmf-listing-headcard at the top.) */

.fmf-listing-grid {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--fmf-gap);
}
@media (max-width: 900px) {
    .fmf-listing-grid { grid-template-columns: 1fr; }
}

/* Key Facts sidebar sticks in view while scrolling the article (desktop only;
   it stacks below the content under 900px). align-self:start is required so the
   grid item doesn't stretch full-height, which would defeat position:sticky. */
@media (min-width: 901px) {
    .fmf-listing-sidebar {
        position: sticky;
        top: 24px;
        align-self: start;
        /* Cap to the viewport so a tall Key Facts box never overruns the screen
           and releases early — keeps the logo (box top) pinned for the whole
           article. Overflowing facts scroll within the box. */
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.fmf-listing-main {
    background: var(--fmf-color-bg-card);
    border: 1px solid var(--fmf-color-border);
    border-radius: var(--fmf-radius);
    padding: 28px;
}

.fmf-listing-content {
    line-height: 1.6;
}
.fmf-listing-content h2,
.fmf-listing-content h3 {
    margin-top: 1.4em;
    margin-bottom: .4em;
}
.fmf-listing-content p { margin: 0 0 1em; }

/* ------- Sidebar slim Add-to-Request-List button (production-style) ------- */
.fmf-listing-sidebar .fmf-sidebar-add-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 18px;
    margin: 0 0 14px;
    background: #FF0000;
    color: #fff;
    border: 0;
    border-radius: var(--fmf-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, transform .1s;
    box-shadow: 0 2px 6px rgba(253, 18, 0, 0.20);
}
.fmf-listing-sidebar .fmf-sidebar-add-button:hover {
    background: #cc0000;
    transform: translateY(-1px);
}
.fmf-listing-sidebar .fmf-sidebar-add-button i { font-size: 14px; }

/* ------- Key Facts widget (scoped) -------
   Replaces the DT9 stylesheet for the right-sidebar Key Facts panel.
   All rules are nested under .fmf-listing-sidebar so they don't leak. */
.fmf-listing-sidebar .glancerow {
    background: var(--fmf-color-bg-card);
    border: 1px solid var(--fmf-color-border);
    border-radius: var(--fmf-radius);
    padding: 18px 22px;
}
.fmf-listing-sidebar h3#glance_heading_main_custom {
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 2px solid var(--fmf-color-brand);
    color: var(--fmf-color-brand);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .02em;
}
.fmf-listing-sidebar dl {
    margin: 0;
}
/* The widget emits Bootstrap-grid markup but the global Bootstrap CSS
   isn't loaded here; supply just the rules we need. We stack columns
   vertically (label above value) because the sidebar is narrow and the
   default 50/50 split causes label/value text to wrap and overlap. */
.fmf-listing-sidebar .row {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    margin: 0;
}
.fmf-listing-sidebar .row:last-child { border-bottom: 0; }
.fmf-listing-sidebar .col-md-6 {
    display: block;
    width: 100%;
    min-width: 0;
}
.fmf-listing-sidebar .col-md-6:first-child { margin-bottom: 2px; }

/* Label cell — icon + text + tooltip-info badge */
.fmf-listing-sidebar .imgstyle3 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fmf-color-muted);
    font-size: 13px;
    font-weight: 500;
}
.fmf-listing-sidebar .imgstyle3 i.fa,
.fmf-listing-sidebar .imgstyle3 i.fas,
.fmf-listing-sidebar .imgstyle3 i.fab,
.fmf-listing-sidebar .imgstyle3 i.far {
    color: var(--fmf-color-brand);
    width: 18px;
    text-align: center;
    font-size: 14px;
    flex: 0 0 18px;
}
.fmf-listing-sidebar .acf-tooltip {
    margin-left: 4px !important;
    line-height: 1;
}
.fmf-listing-sidebar .acf-tooltip i {
    color: #94a3b8;
    font-size: 13px;
}

/* Value cell */
.fmf-listing-sidebar .glance_details {
    margin: 0;
    color: var(--fmf-color-text);
    font-size: 14px;
    font-weight: 600;
    word-wrap: break-word;
}
.fmf-listing-sidebar .glance_details a {
    color: var(--fmf-color-brand);
    text-decoration: none;
}
.fmf-listing-sidebar .glance_details a:hover { text-decoration: underline; }

/* Tag-style buttons (e.g. tags row) — DT9 renders them as inline pills */
.fmf-listing-sidebar .tagbtn {
    display: inline-block;
    padding: 3px 10px;
    margin: 2px 4px 2px 0;
    background: #f1f5f9;
    color: var(--fmf-color-muted);
    border-radius: 12px;
    font-size: 12px;
    text-decoration: none;
}

/* Categories row (Affiliate-only) — comma separator between links */
.fmf-listing-sidebar .selectorz:after { content: ", "; }
.fmf-listing-sidebar .selectorz:last-child:after { content: ""; }

/* Value cell sits flush with the label-icon column above it */
.fmf-listing-sidebar .col-md-6:nth-child(2) .glance_details { padding-left: 26px; }

/* ------- Image carousel (ACF image_1..10 gallery) ------- */
.fmf-listing-carousel {
    margin-top: 28px;
    background: var(--fmf-color-bg-card);
    border: 1px solid var(--fmf-color-border);
    border-radius: var(--fmf-radius);
    padding: 24px;
}
.fmf-listing-carousel-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: var(--fmf-color-text);
}
.fmf-listing-carousel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}
.fmf-listing-carousel-item {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 8px;
    background: #f8fafc;
}
.fmf-listing-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s;
}
.fmf-listing-carousel-item:hover img { transform: scale(1.04); }

/* ------- Related content (News / Case Studies / Testimonials) ------- */
.fmf-listing-related {
    margin-top: 28px;
    background: var(--fmf-color-bg-card);
    border: 1px solid var(--fmf-color-border);
    border-radius: var(--fmf-radius);
    padding: 24px;
}
.fmf-listing-related-title {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--fmf-color-brand);
    font-size: 18px;
    font-weight: 700;
    color: var(--fmf-color-text);
}
.fmf-listing-related-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fmf-listing-related-item {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}
.fmf-listing-related-item:last-child { border-bottom: 0; }
.fmf-listing-related-thumb {
    flex: 0 0 96px;
    height: 72px;
    overflow: hidden;
    border-radius: 6px;
    background: #f1f5f9;
}
.fmf-listing-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fmf-listing-related-body { flex: 1 1 auto; min-width: 0; }
.fmf-listing-related-body h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
}
.fmf-listing-related-body h4 a {
    color: var(--fmf-color-text);
    text-decoration: none;
}
.fmf-listing-related-body h4 a:hover { color: var(--fmf-color-brand); }
.fmf-listing-related-body p {
    margin: 0;
    color: var(--fmf-color-muted);
    font-size: 13px;
    line-height: 1.45;
}

/* ------- Add-to-Request-List CTA ------- */
.fmf-listing-cta {
    margin-top: 28px;
    background: linear-gradient(135deg, var(--fmf-color-brand) 0%, #9c1d39 100%);
    color: #fff;
    border-radius: var(--fmf-radius);
    padding: 28px;
    text-align: center;
}
.fmf-listing-cta-heading {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}
.fmf-listing-cta-sub {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}
.fmf-listing-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #fff;
    color: var(--fmf-color-brand);
    border: 0;
    border-radius: var(--fmf-radius);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: transform .15s;
}
.fmf-listing-cta-button:hover { transform: translateY(-1px); }

/* ------- Claim modal ------- */
.fmf-modal[hidden] { display: none; }
.fmf-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.fmf-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    cursor: pointer;
}
.fmf-modal-dialog {
    position: relative;
    background: #fff;
    border-radius: 12px;
    max-width: 620px;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 28px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.fmf-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--fmf-color-muted);
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
}
/* Rollover matches the submit button red (overrides Hello Elementor's reset.css
   `button:hover` which tints all buttons pink #CC3366). */
.fmf-modal-close:hover,
.fmf-modal-close:focus {
    background: #FF0000;
    color: #fff;
}
.fmf-modal-header h2 {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    padding-right: 24px;
}
.fmf-modal-claim-banner {
    text-align: center;
    margin-bottom: 16px;
}
.fmf-modal-claim-banner img {
    max-width: 200px;
    height: auto;
    object-fit: contain;
    /* Card-style border around the logo (matches the listing-card logo tiles). */
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px 22px;
    background: #fff;
    box-sizing: border-box;
}
/* Email-domain auto-approval explainer (mirrors the /join/ info box). */
.fmf-claim-info {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #eef6ff;
    border: 1px solid #d6e6fb;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
}
.fmf-claim-info svg { flex: 0 0 auto; margin-top: 1px; }
.fmf-claim-info strong { color: #1f2937; }
.claim_promp_text {
    margin: 0 0 16px;
    color: var(--fmf-color-muted);
    font-size: 14px;
}
#claim_form input[type=text],
#claim_form input[type=email] {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--fmf-color-border);
    border-radius: 8px;
    font-size: 14px;
}
.fmf-modal-delist {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 16px;
    font-size: 13px;
    color: var(--fmf-color-muted);
}
.fmf-modal-submit {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: var(--fmf-color-brand);
    color: #fff;
    border: 0;
    border-radius: var(--fmf-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.claim_success {
    margin-top: 12px;
    padding: 10px 14px;
    background: #ecfdf5;
    color: #047857;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
}

/* ============================================================
   Hero filter bar (production-style) — Category / Location /
   Investments dropdowns + red SEARCH button. Lives inside the
   .fmf-archive-hero section.
   ============================================================ */
.fmf-filter-bar {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin: 24px auto 0;
    max-width: 1080px;
    width: 100%;
}
.fmf-filter-field {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: var(--fmf-radius);
    padding: 14px 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    min-width: 0;
}
.fmf-filter-icon {
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fmf-color-brand);
    font-size: 18px;
}
.fmf-filter-field select {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: var(--fmf-color-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231f2937' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 10px 7px;
    min-width: 0;
}
.fmf-filter-field select:focus { outline: 0; box-shadow: none; }
.fmf-filter-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 28px;
    background: #FF0000;
    color: #fff;
    border: 0;
    border-radius: var(--fmf-radius);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background-color .15s;
    box-shadow: 0 2px 8px rgba(253, 18, 0, 0.30);
}
.fmf-filter-submit:hover { background: #cc0000; }
.fmf-filter-submit i { font-size: 16px; }

@media (max-width: 900px) {
    .fmf-filter-bar {
        flex-wrap: wrap;
    }
    .fmf-filter-field { flex: 1 1 calc(50% - 6px); }
    .fmf-filter-submit { flex: 1 1 100%; padding: 14px; }
}
@media (max-width: 540px) {
    .fmf-filter-field { flex: 1 1 100%; }
}

/* ============================================================
   Popular Searches chip strip (used between hero and body
   on archive + search pages — matches production)
   ============================================================ */
.fmf-popular-strip {
    background: transparent;
    /* Full-width 6px red separator along the top, matching the band above the
       footer's "Popular Franchise Searches" and the thin red strip below
       the site header (unified brand red #FF0000). */
    border-top: 6px solid #FF0000;
    border-bottom: none;
    padding: 12px 0;
    width: 100%;
    box-sizing: border-box;
}
/* Suppress the legacy Customizer-CSS red border-top on the inner
   section.trending-searches — it's container-width (1140px) so it only
   spans the centred column instead of edge-to-edge; we own the full-width
   border on the outer .fmf-popular-strip now. */
.fmf-popular-strip .trending-searches.simple,
.fmf-popular-strip section.trending-searches {
    border-top: none !important;
    padding-top: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
.fmf-popular-strip .trending-searches.simple .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}
.fmf-popular-strip .trending-searches.simple a {
    display: inline-block;
    padding: 6px 16px;
    background: #fff;
    color: var(--fmf-color-text);
    border: 1px solid var(--fmf-color-border);
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
.fmf-popular-strip .trending-searches.simple a:hover {
    background: var(--fmf-color-brand);
    color: #fff;
    border-color: var(--fmf-color-brand);
}
/* First anchor = "Popular Searches:" label — dark pill */
.fmf-popular-strip .trending-searches.simple a:first-child {
    background: #374151;
    color: #fff;
    border-color: #374151;
    font-weight: 600;
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   Archive page (/listing-category/, /listing_type/) layout
   ============================================================ */
.fmf-archive-hero {
    background-color: #0f172a;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 88px 0;
    text-align: center;
    margin-bottom: 32px;
}
/* On archive pages the hero is immediately followed by the Popular Searches
   strip (which carries its own red top border) — drop the hero's bottom margin
   so there's no white gap between the hero image and the chips. */
.fmf-archive-hero:has(+ .fmf-popular-strip) {
    margin-bottom: 0;
}
/* Pages that show the hero but NOT the Popular Searches strip (e.g.
   /popular-searches/, /news/, /events/, /testimonial/, /case-study/,
   /franchise-glossary/, /franchising-tips-and-advice/) still need the brand-red
   separator immediately below the hero — match the strip's 6px red line so they
   read like the category archives. Excluded when the strip already follows
   (archives) to avoid a double line. */
.fmf-archive-hero:not(:has(+ .fmf-popular-strip)) {
    border-bottom: 6px solid #FF0000;
}
/* Location + top-franchise cards on the region / counties / cities pages get the
   same rollover as the /industries/ category cards: a subtle lift + shadow and a
   red-highlighted border on hover. (`.cate_box_counties` = location tiles,
   `.golden_opportunity_link` = the "Top Franchise Opportunities" brand cards.) */
.cate_box_counties,
.golden_opportunity_link {
    border: 1px solid #e5e7eb;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
}
.cate_box_counties:hover,
.golden_opportunity_link:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .14), 0 30px 60px rgba(15, 23, 42, .10);
    border-color: color-mix(in srgb, #FF0000 30%, #e5e7eb);
}
/* Card-grid landing pages (Popular Searches / Franchises lifestyle): add breathing
   room between the bottom of the card grid and the global "Featured Franchises For
   Sale" band that footer.php appends. */
.page-template-page-popular-searches .fmf-home-featured--global,
.page-template-page-franchises .fmf-home-featured--global {
    margin-top: 48px;
}
.fmf-archive-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.fmf-archive-title {
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 4.5vw, 44px);
    font-weight: 700;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.fmf-archive-desc {
    margin: 0 auto;
    max-width: 760px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.55;
}
.fmf-archive-body { padding-bottom: 64px; }

/* BFA member-page hero — circular brand badge sits inline-left of the H1 on
   ONE line, subtitle centred below. Matches the production /all-bfa-members/
   layout. Inherits the dark overlay + background-image from
   .fmf-archive-hero.
   `flex-wrap: nowrap` keeps the logo beside the title (never stacked above),
   and the title font is sized down so even the longest tier heading
   ("International Members of the British Franchise Association") fits on a
   single line next to the badge at desktop widths. */
/* No-logo fallback: simple centred column. The subtext is constrained to
   the H1's width via the width:0 / min-width:100% technique — the H1
   (single line) is the only child that contributes intrinsic width, so the
   column sizes to it and the subtext fills that width. */
.fmf-bfa-hero-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.fmf-bfa-hero-logo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    padding: 6px;
    flex: 0 0 auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.fmf-bfa-hero-head .fmf-archive-title {
    text-align: left;
    margin: 0;
    /* Smaller than the generic archive title (clamp 32–44px) so the longer
       BFA headings fit on one line beside the badge. */
    font-size: clamp(22px, 2.5vw, 34px);
    white-space: nowrap;
}
.fmf-bfa-hero-head .fmf-archive-desc {
    /* Match the H1's width: contribute 0 to intrinsic sizing but fill the
       resolved column/grid-area width, so the subtext wraps to exactly the
       heading's width instead of the generic 760px max-width. */
    width: 0;
    min-width: 100%;
    max-width: 100%;
    margin: 0;
}

/* With a tier badge: 2-column grid. The logo sits left of the H1 (top row),
   the subtext spans the second row under the H1 — at the SAME width as the
   H1 (the title column is sized by the nowrap H1; the subtext's width:0 /
   min-width:100% makes it fill that column without widening it). */
.fmf-bfa-hero-head--has-logo {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "logo title"
        ".    desc";
    align-items: center;
    justify-content: center;
    column-gap: 22px;
    row-gap: 12px;
}
.fmf-bfa-hero-head--has-logo .fmf-bfa-hero-logo { grid-area: logo; }
.fmf-bfa-hero-head--has-logo .fmf-archive-title  { grid-area: title; }
.fmf-bfa-hero-head--has-logo .fmf-archive-desc   { grid-area: desc; }

/* Below ~820px the one-line heading no longer fits — stack logo / title /
   subtext in a single centred column, full width, title allowed to wrap. */
@media (max-width: 820px) {
    .fmf-bfa-hero-head--has-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }
    .fmf-bfa-hero-logo { width: 64px; height: 64px; }
    .fmf-bfa-hero-head .fmf-archive-title {
        text-align: center;
        white-space: normal;
    }
}

/* Legacy Bootstrap-grid layout restoration. The template uses
   `.row.fmf_search_results > .col-lg-3 / .col-lg-9` so existing fluent-
   snippet JS + franchise-custom-plugin JS keep working. Hello Elementor
   doesn't ship Bootstrap, so we supply just the rules needed. */
@media (min-width: 992px) {
    .row.fmf_search_results {
        display: flex;
        flex-wrap: nowrap;
        gap: 24px;
        align-items: flex-start;
    }
    .row.fmf_search_results > .col-lg-3,
    .row.fmf_search_results > .col-lg-9 {
        box-sizing: border-box;
        float: none;
        margin: 0;
    }
    /* Fixed-width sidebar; main column fills the rest. Avoids gap-math
       overflow that would otherwise wrap the main column onto its own
       row underneath the sidebar. */
    .row.fmf_search_results > .col-lg-3 {
        flex: 0 0 280px;
        width: 280px;
        max-width: 280px;
    }
    .row.fmf_search_results > .col-lg-9 {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
    }
}
@media (max-width: 991px) {
    .row.fmf_search_results > .col-md-12 {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 24px;
    }
}
.archive-right-column { min-width: 0; }
.archive-left-column  { min-width: 0; }

/* ----- My Account page layout (templates/tpl-page-account.php) -----
   Mirrors the .fmf_search_results grid above but scoped to
   .fmf-account-layout so widget/accordion CSS doesn't leak in. Same
   col-lg-3 / col-lg-9 split, plus a wider sidebar (320px vs. 280px)
   because the account-sidebar cards carry an avatar + member badge. */
.fmf-account-page { padding: 24px 0 48px; }
.fmf-account-layout.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.fmf-account-layout .row.my-5 {
    margin-top: 24px;
    margin-bottom: 24px;
}
@media (min-width: 992px) {
    .fmf-account-layout .row.my-5 {
        display: flex;
        flex-wrap: nowrap;
        gap: 28px;
        align-items: flex-start;
    }
    .fmf-account-layout .row.my-5 > .col-lg-3,
    .fmf-account-layout .row.my-5 > .col-lg-9 {
        box-sizing: border-box;
        float: none;
        margin: 0;
    }
    .fmf-account-layout .row.my-5 > .col-lg-3 {
        flex: 0 0 320px;
        width: 320px;
        max-width: 320px;
    }
    .fmf-account-layout .row.my-5 > .col-lg-9 {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
    }
}
@media (max-width: 991px) {
    .fmf-account-layout .row.my-5 > .col-12 {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 24px;
    }
}
.fmf-account-sidebar-col,
.fmf-account-main-col { min-width: 0; }

/* "Need help?" CTA card — sits at the bottom of the archive sidebar,
   uses the breadcrumb-blue (#044AAE) so it reads as a distinct branded
   stop after the long filter list. Includes a chat-style mascot via the
   `::before` ribbon at top-left so it pops more than a flat card. */
.fmf-sidebar-help-card {
    position: relative;
    background: #044AAE;
    color: #fff;
    border-radius: 14px;
    padding: 22px 22px 24px;
    /* margin spacing handled by parent .archive-left-column { gap: 20px } */
    margin-top: 0;
    box-shadow: 0 6px 24px rgba(4, 74, 174, 0.18);
    overflow: hidden;
}
.fmf-sidebar-help-card::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 130px;
    height: 130px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}
.fmf-sidebar-help-card__title {
    position: relative;
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}
.fmf-sidebar-help-card__body {
    position: relative;
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}
.fmf-sidebar-help-card__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #FF0000;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 2px 8px rgba(253, 18, 0, 0.30);
}
.fmf-sidebar-help-card__cta:hover,
.fmf-sidebar-help-card__cta:focus {
    background: #cc0000;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(253, 18, 0, 0.35);
}
.fmf-sidebar-help-card__cta svg {
    width: 14px;
    height: 14px;
}

/* "Use our Franchise Finder" CTA card — sidebar version of the homepage
   finder CTA (.fmf-home-finder-cta__card): same brand-blue gradient + white
   corner glow, compact for the narrow sidebar column. Links to the two-part
   quiz. Inter-card spacing comes from .archive-left-column { gap }. */
.fmf-sidebar-finder-card {
    position: relative;
    background: linear-gradient(120deg, #044AAE 0%, #008CD5 100%);
    color: #fff;
    border-radius: 14px;
    padding: 22px 22px 24px;
    box-shadow: 0 6px 24px rgba(4, 74, 174, 0.20);
    overflow: hidden;
}
.fmf-sidebar-finder-card::before {
    content: "";
    position: absolute;
    top: -45px;
    right: -45px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.fmf-sidebar-finder-card__kicker {
    position: relative;
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 6px;
}
.fmf-sidebar-finder-card__title {
    position: relative;
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
.fmf-sidebar-finder-card__body {
    position: relative;
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}
.fmf-sidebar-finder-card__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: #FF0000;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.30);
}
.fmf-sidebar-finder-card__cta:hover,
.fmf-sidebar-finder-card__cta:focus {
    background: #cc0000;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.35);
}
.fmf-sidebar-finder-card__cta svg {
    width: 14px;
    height: 14px;
}

/* "Search by keywords" card — sits at the very top of the archive sidebar
   above the accordion widgets. Mirrors the "Need help?" CTA card at the
   bottom of the sidebar (breadcrumb-blue #044AAE background, white title,
   decorative top-right circle, red CTA button) so the two cards visually
   bracket the filter accordions as a matching pair. */
.fmf-sidebar-keyword-search {
    position: relative;
    background: #044AAE;
    color: #fff;
    border-radius: 14px;
    padding: 22px 22px 24px;
    /* margin spacing handled by parent .archive-left-column { gap: 20px } */
    margin-bottom: 0;
    box-shadow: 0 6px 24px rgba(4, 74, 174, 0.18);
    overflow: hidden;
}
.fmf-sidebar-keyword-search::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 130px;
    height: 130px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}
.fmf-sidebar-keyword-search__title {
    position: relative;
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}
.fmf-sidebar-keyword-search__form {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: stretch;
}
/* Input border explicitly matches the outer card edge (thin 1px, light grey
   #e5e7eb) so the box reads as the same border family rather than the
   browser's default 2px charcoal field border. `!important` + a higher-
   specificity selector (`.archive-left-column …`) is required because
   Hello Elementor's input baseline + WP Rocket's minified output both
   re-introduce a darker border on plain `input[type="search"]`. */
.archive-left-column .fmf-sidebar-keyword-search .fmf-sidebar-keyword-search__input,
.fmf-sidebar-keyword-search input[type="search"].fmf-sidebar-keyword-search__input,
.fmf-sidebar-keyword-search .fmf-sidebar-keyword-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    font-size: 13.5px;
    line-height: 1.2;
    color: #0f172a;
    background: #fff;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px;
    outline: 0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.fmf-sidebar-keyword-search__input::placeholder { color: #94a3b8; }
.archive-left-column .fmf-sidebar-keyword-search .fmf-sidebar-keyword-search__input:focus,
.fmf-sidebar-keyword-search input[type="search"].fmf-sidebar-keyword-search__input:focus,
.fmf-sidebar-keyword-search .fmf-sidebar-keyword-search__input:focus {
    background: #fff;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.fmf-sidebar-keyword-search__btn {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: #FF0000;
    border: 1px solid #FF0000;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 2px 8px rgba(253, 18, 0, 0.30);
}
.fmf-sidebar-keyword-search__btn:hover,
.fmf-sidebar-keyword-search__btn:focus {
    background: #cc0000;
    border-color: #cc0000;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(253, 18, 0, 0.35);
}

/* ============================================================
   Sidebar widget accordion — modernised May 2026.
   Inspired by https://franchisefame.com/uk/ (clean white card,
   flat link list, soft chevron toggle, no decorative bullets/arrows).

   Hide empty/orphan widgets — the sidebar registers an empty Gutenberg
   `widget_block` placeholder (#block-2) between the real widgets.
   With our card styling it rendered as a stray thin horizontal slit
   between Popular Searches and Categories. */
.archive-left-column .widget.widget_block:not(:has(.widget-title)) {
    display: none;
}
.archive-left-column .widget_block .widget-block:empty {
    display: none;
}
.archive-left-column .widget_block:has(.widget-block:empty:only-child) {
    display: none !important;
}

/* Heavy use of !important is intentional below: it overrides a long stack
   of legacy DT9 / Customizer-CSS rules that put red checkbox-circle ::after
   glyphs, double-angle ::before chevrons, full 1px borders on every <li>,
   and Font Awesome icons before/after each link. */
/* Use flex + gap on the sidebar so each card spacing is consistent and
   immune to any !important margin-resets on `.widget` from the parent
   theme / Bootstrap mb-4 / Customizer cascade. */
aside.archive-left-column,
.row.fmf_search_results .archive-left-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}
.archive-left-column .widget,
.archive-left-column .widget.mb-4,
.archive-left-column > div.widget {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
.archive-left-column .widget-wrap { display: block; }
.archive-left-column .widget-block { display: block; background: transparent !important; border: none !important; }
.archive-left-column .widget-title {
    /* Fixed height + flex centring so every collapsed widget header is the
       same size with the title text vertically centred. */
    display: flex !important;
    align-items: center !important;
    min-height: 64px !important;
    background: #fff !important;
    padding: 0 56px 0 20px !important;
    cursor: pointer;
    position: relative;
    border: none !important;
    transition: background-color .15s;
    user-select: none;
}
.archive-left-column .widget-title:hover { background: #f9fafb !important; }
.archive-left-column .widget-title.open { background: #fff !important; }
.archive-left-column .widget-title .widget-content {
    flex: 1 1 auto;
    min-width: 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: .06em;
    padding-right: 0;
    line-height: 1.3;
}
/* When the accordion is collapsed, hide the empty wrapper (`.ve-cat-widget-div`)
   and the hidden `<ul>` immediately so they don't add empty padding inside the
   card. Some widgets emit an inline `style="display:none"` on the wrapper; we
   also tighten the cases where the wrapper stays visible but its <ul> is hidden. */
.archive-left-column .widget-title:not(.open) + div,
.archive-left-column .widget-title:not(.open) + ul {
    display: none !important;
}
/* Strip the stray <p> elements that Gutenberg `widget_block` widgets
   (e.g. Featured Listings #block-3) emit before/after the title. They have
   a default ~14.4px `margin-bottom` each, which would otherwise inflate the
   collapsed widget. CSS `:empty` doesn't match whitespace-only nodes so we
   also catch the whitespace case by zeroing the margin on every direct
   `<p>` child of the widget shell. */
.archive-left-column .widget-block > p,
.archive-left-column .widget-wrap > p {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* Suppress every leftover ::before / ::after the legacy rules might paint
   on the widget shell so only our chevron toggle below renders. */
.archive-left-column .widget-title .widget-content::before,
.archive-left-column .widget-title .widget-content::after,
.archive-left-column .widget-block::before,
.archive-left-column .widget-block::after,
.archive-left-column .widget-wrap::before,
.archive-left-column .widget-wrap::after {
    content: none !important;
    display: none !important;
}

/* Modern chevron toggle (SVG-style via Unicode) — replaces the boxy +/- circle. */
.archive-left-column .widget-title::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 18px !important;
    left: auto !important;
    bottom: auto !important;
    width: 10px !important;
    height: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-right: 2px solid #6b7280 !important;
    border-bottom: 2px solid #6b7280 !important;
    border-radius: 0 !important;
    transform: translateY(-75%) rotate(45deg) !important;
    transform-origin: center !important;
    box-shadow: none !important;
    transition: transform .2s ease !important;
}
.archive-left-column .widget-title.open::after {
    transform: translateY(-25%) rotate(-135deg) !important;
    border-color: #FF0000 !important;
}

/* Suppress the Customizer-CSS Font Awesome bullets + chevrons on each link.
   `ul.ve-cat-widget-listing li a::before` was a grey double-chevron
   (`\f101`) and `::after` was a red circle outline (`\f10c` / `\f096`).
   Override their content to empty + hide them entirely. */
.archive-left-column ul.ve-cat-widget-listing li a::before,
.archive-left-column ul.ve-cat-widget-listing li a::after {
    content: none !important;
    display: none !important;
}

/* Also kill the box-border-per-item rule from the Customizer CSS. */
.archive-left-column ul.ve-cat-widget-listing li,
.archive-left-column .ve-cat-widget-div ul.ve-cat-widget-listing li,
.archive-left-column .ve-cat-widget-div ul.ve-cat-widget-listing li:last-child {
    border: 0 !important;
    padding: 0 !important;
}
/* Kill the vertical left/right border on the <ul> wrapper — a legacy
   Customizer rule sets `border: 1px solid #d9d8d7` on `.ve-cat-widget-listing`,
   which surfaces as two faint vertical lines bracketing the categories list. */
.archive-left-column ul.ve-cat-widget-listing,
.archive-left-column .ve-cat-widget-div,
.archive-left-column .ve-cat-widget-div > ul.ve-cat-widget-listing {
    border: 0 !important;
    background: transparent !important;
}

.archive-left-column .widget-title + div,
.archive-left-column .widget-title + ul {
    padding: 4px 8px 12px !important;
    font-size: 14px;
    color: #1f2937;
    border-top: none !important;
    margin-top: 0 !important;
}
.archive-left-column .widget ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.archive-left-column .widget ul li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
.archive-left-column .widget ul li a {
    color: #334155 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
    transition: background-color .12s, color .12s !important;
}
.archive-left-column .widget ul li a:hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;
}
.archive-left-column .widget ul li.active > a,
.archive-left-column .widget ul li.active-cat > a,
.archive-left-column .widget ul li.current > a {
    color: #FF0000 !important;
    background: #fff5f4 !important;
    font-weight: 600 !important;
}
/* Investment widget radio-style markers */
.archive-left-column .widget input[type="checkbox"],
.archive-left-column .widget input[type="radio"] {
    margin-right: 8px;
}
/* "Featured Listings" content block (Gutenberg block widget) */
.archive-left-column .widget .lst-widgetb {
    padding: 0;
}
.archive-left-column .widget .lst-widgetb .row {
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    align-items: center;
}
.archive-left-column .widget .lst-widgetb .row:last-child { border-bottom: 0; }
.archive-left-column .widget .lst-widgetb .col-md-4 {
    flex: 0 0 56px;
    max-width: 56px;
    padding-right: 8px;
}
.archive-left-column .widget .lst-widgetb img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}
.archive-left-column .widget .lst-widgetb h5 {
    font-size: 13px;
    margin: 0;
    line-height: 1.3;
    font-weight: 600;
}
.archive-left-column .widget .lst-widgetb .card-text {
    margin: 4px 0 0;
    font-size: 12px;
}

/* Featured Listings shortcode output (replaces the legacy .row/.col-md-4
   markup so we don't depend on Bootstrap inside the widget). */
.archive-left-column .lst-widgetb .fmf-featured-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}
.archive-left-column .lst-widgetb .fmf-featured-row:last-child { border-bottom: 0; }
.archive-left-column .lst-widgetb .fmf-featured-thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid var(--fmf-color-border);
}
.archive-left-column .lst-widgetb .fmf-featured-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}
.archive-left-column .lst-widgetb .fmf-featured-body {
    flex: 1 1 auto;
    min-width: 0;
}
.archive-left-column .lst-widgetb .fmf-featured-title {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}
.archive-left-column .lst-widgetb .fmf-featured-title a {
    color: var(--fmf-color-text);
    text-decoration: none;
}
.archive-left-column .lst-widgetb .fmf-featured-title a:hover { color: #FF0000; }
.archive-left-column .lst-widgetb .fmf-featured-more {
    color: #FF0000;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}
.archive-left-column .lst-widgetb .fmf-featured-more:hover { text-decoration: underline; }
.archive-left-column .lst-widgetb .fmf-featured-more .fas { margin-left: 3px; }
.fmf-archive-empty {
    text-align: center;
    color: var(--fmf-color-muted);
    padding: 60px 0;
    font-size: 16px;
}

/* Featured Franchise hero card (above the result grid on archive pages).
   Background matches the breadcrumb dark blue (`#044AAE`) used by the
   Customizer CSS for `.breadcrumb-container.theme5 a` and similar chevrons. */
.fmf-featured-franchise {
    position: relative;
    background: #044AAE;
    color: #fff;
    border: 2px solid transparent;
    border-radius: var(--fmf-radius);
    padding: 32px;
    margin-bottom: 28px;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
}
/* Same rollover as the other cards — lift + shadow + red-highlighted border. A
   solid red reads as the highlight on the blue card (the faint 30%-mix used on the
   white cards would be invisible here). */
.fmf-featured-franchise:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .20), 0 30px 60px rgba(15, 23, 42, .12);
    border-color: #FF0000;
}
.fmf-featured-franchise-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    /* Brand red matches the "More Info" CTA on the same card (#FF0000). */
    background: #FF0000;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 12px;
    border-radius: 9999px;
}
.fmf-featured-franchise-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 32px;
    align-items: center;
}
@media (max-width: 720px) {
    .fmf-featured-franchise-grid { grid-template-columns: 1fr; text-align: center; }
}
.fmf-featured-franchise-body { min-width: 0; }
.fmf-featured-franchise-title {
    margin: 0 0 10px;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
.fmf-featured-franchise-title a { color: #fff; text-decoration: none; }
.fmf-featured-franchise-title a:hover { color: #fecaca; }
.fmf-featured-franchise-blurb {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1.5;
}
.fmf-featured-franchise-investment {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
}
.fmf-featured-franchise-investment strong { color: #fff; font-size: 16px; margin-left: 6px; }
.fmf-featured-franchise-cta {
    display: inline-block;
    padding: 12px 22px;
    background: #FF0000;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--fmf-radius);
    transition: background-color .15s;
    box-shadow: 0 2px 8px rgba(253, 18, 0, 0.30);
}
.fmf-featured-franchise-cta:hover { background: #cc0000; color: #fff; }

/* "More Info →" + "Add to Request List" row — sits inline so both CTAs
   share the bottom of the featured-franchise hero card. The toggle button
   borrows the brand-red treatment of .fmf-featured-franchise-cta plus the
   sl-cta-toggle checkbox indicator from the site-wide toggle. */
.fmf-featured-franchise-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;          /* generous gap between More Info and Add to Request List */
    align-items: stretch;
    margin-top: 4px;
}
/* Higher-specificity overrides — the mu-plugin's `.sl-cta-toggle` rule
   has `display: flex !important` which would stretch the button to fill
   the row. The two-class selector below wins because it has the same
   importance but higher specificity. The padding mirrors the More Info
   CTA so both CTAs share an exact pixel-perfect height. */
.fmf-featured-franchise-actions .fmf-featured-franchise-add.sl-cta-toggle,
.fmf-featured-franchise-add {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    background: #FF0000;
    color: #fff;
    border: 0;
    border-radius: var(--fmf-radius);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(253, 18, 0, 0.30);
    transition: background-color .15s;
    width: auto !important;
    /* Override `button.add_to_request_list { width: 100% !important }` in
       franchise-custom-plugin/assets/css/franchise_custom_layout.css that
       was forcing this button to fill the row and wrap below More Info. */
    flex: 0 0 auto;   /* don't grow / don't stretch — narrow inline button */
}
.fmf-featured-franchise-add:hover { background: #cc0000; }

/* Popular Searches chip rollover — brand red. The base chip styling
   (#f4f5f9 fill, #e3e3ed border, dark navy text) is defined in the
   Customizer Additional CSS (post 21873) under
   `section.trending-searches a` and `#search-modal ... a`. We add the
   :hover state here at higher specificity so it wins over the
   Customizer rules (which have no :hover treatment of their own). */
body section.trending-searches a:hover,
body section.trending-searches a:focus-visible,
body #search-modal .popular-searches section.trending-searches a:hover,
body #search-modal .popular-searches section.trending-searches a:focus-visible {
    background: #FF0000 !important;
    border-color: #FF0000 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ============================================================
   "Filter Results" card — production-style filter sitting at
   the top of archive / search pages, just under the Popular
   Searches chip strip. Card with rounded corners + soft shadow,
   4 labelled select fields + a red icon-only search button.
   ============================================================ */
.fmf-filter-results {
    margin: 0 0 20px;
    background: transparent;
}
/* When the shortcode is rendered inside the right column (the archive
   + search templates), drop the inner .fmf-container padding so the
   card hugs the column edges and aligns visually with the Featured
   Franchise hero beneath it. */
.archive-right-column .fmf-filter-results > .fmf-container {
    padding: 0;
    max-width: none;
}
.fmf-filter-results__card {
    background: #ffffff;
    border: 1px solid #e3e3ed;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
    padding: 14px 20px 16px;
    /* Flex at the card level — title sits inline-left of the controls
       instead of occupying its own vertical row. Reclaims ~50px of
       vertical space per page. */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 18px;
}
.fmf-filter-results__title {
    margin: 0;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0e1a2b;
    line-height: 1;
    letter-spacing: -0.01em;
    /* Align baseline with the field's <select> midline (8px label + 8px gap
       + half of 46px select height ≈ 39px from the top of the field). The
       16px line-height-1 title sits naturally at the same baseline when
       padded to roughly half the select's height. */
    padding-bottom: 14px;
    white-space: nowrap;
    flex: 0 0 auto;
}
.fmf-filter-results__row {
    display: flex;
    flex: 1 1 auto;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    min-width: 0;
}
.fmf-filter-results__field {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 150px;
}
.fmf-filter-results__field label {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 6px;
}
.fmf-filter-results__field select {
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff;
    border: 1px solid #e3e3ed;
    border-radius: 10px;
    padding: 11px 34px 11px 14px;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1f1747;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231f1747' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
    min-width: 0;
}
.fmf-filter-results__field select:hover {
    border-color: #c8c9d4;
}
.fmf-filter-results__field select:focus-visible {
    outline: none;
    border-color: #008CD5;
    box-shadow: 0 0 0 3px rgba(0, 140, 213, 0.18);
}
.fmf-filter-results__submit {
    width: 50px;
    height: 44px;          /* matches the new compact select outer height */
    background: #FF0000;
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    font-size: 17px;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.25);
    flex: 0 0 50px;
    align-self: flex-end;
}
.fmf-filter-results__submit:hover { background: #cc0000; transform: translateY(-1px); }
.fmf-filter-results__submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.35);
}

@media (max-width: 900px) {
    /* Title drops above the controls; fields wrap to 2-up. */
    .fmf-filter-results__title {
        flex: 1 1 100%;
        padding-bottom: 4px;
        padding-right: 0;
        border-right: 0;
        border-bottom: 1px solid #ececf3;
        padding-bottom: 10px;
        margin-bottom: 2px;
    }
    .fmf-filter-results__field {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }
    .fmf-filter-results__submit {
        flex: 1 1 100%;
        width: 100%;
        height: 44px;
    }
}
@media (max-width: 540px) {
    .fmf-filter-results__field { flex: 1 1 100%; }
    .fmf-filter-results__card { padding: 14px 16px 16px; }
    .fmf-filter-results__title { font-size: 15px; }
}
.fmf-featured-franchise-actions .fmf-featured-franchise-add .sl-cta-check,
.fmf-featured-franchise-add .sl-cta-check {
    width: 18px;
    height: 18px;
}
.fmf-featured-franchise-add.is-added .sl-cta-check::before {
    width: 11px;
    height: 11px;
}
.fmf-featured-franchise-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    min-height: 160px;
    text-decoration: none;
}
.fmf-featured-franchise-logo img {
    max-width: 100%;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Card grid */
.fmf-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

/* Grid/List result-layout toggle on the archive (swaps only the cards). */
.fmf-view-toggle {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 20px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--fmf-color-border, #e5e7eb);
    border-radius: 10px;
}
.fmf-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.fmf-view-btn svg { width: 16px; height: 16px; }
.fmf-view-btn:hover { color: #044AAE; }
.fmf-view-btn.is-active { background: #044AAE; color: #fff; }
.fmf-bfs-list { display: block; }

/* Card */
.fmf-card {
    position: relative;
    background: var(--fmf-color-bg-card);
    border: 1px solid var(--fmf-color-border);
    border-radius: var(--fmf-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
}
/* Match the /industries/ + location-card rollover: lift + shadow + red-highlighted
   border on hover, wherever a listing card is shown (category / investment / search
   / Popular Searches archives). */
.fmf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .14), 0 30px 60px rgba(15, 23, 42, .10);
    border-color: color-mix(in srgb, #FF0000 30%, var(--fmf-color-border, #e5e7eb));
}
.fmf-card-bfa {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.fmf-card-bfa span {
    position: absolute;
    top: 16px;
    left: -22px;
    width: 100px;
    transform: rotate(-45deg);
    /* Brand red matches "More Info" + "Add to Request List" + Featured chip. */
    background: #FF0000;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    padding: 3px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.fmf-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    background: #fff;
    padding: 16px;
    overflow: hidden;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
}
.fmf-card-image img {
    max-width: 80%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.fmf-card-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
}
/* Category eyebrow — restyled to match the Popular Searches chips at the
   top of archive pages: light pill on neutral background, proper case,
   no uppercase / letter-spacing. inline-block so the pill hugs the term
   name rather than stretching to full card width. */
.fmf-card-category {
    display: inline-block !important;
    align-self: flex-start; /* parent .fmf-card-body is display:flex column;
                               without this the pill stretches to full
                               cross-axis width instead of hugging text. */
    margin: 0 0 4px !important;
    padding: 5px 11px;
    background: transparent;  /* ghost pill — matches how Popular Searches
                                 chips read at the top of archive pages
                                 (their #f4f5f9 fill happens to match the
                                 page background there, so they read as
                                 borderless to the eye). */
    border: 1px solid #e3e3ed;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: #1f1747;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.3;
    text-decoration: none;
    width: auto;
}
/* Some browsers / global p rules give every <p> margin-bottom — the
   .fmf-card-body wrapper paragraph also sometimes wins display:block.
   Force inline-block so the pill hugs its label text. */
.fmf-card-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}
.fmf-card-title a {
    color: #044AAE;
    text-decoration: none;
}
.fmf-card-title a:hover { color: var(--fmf-color-brand); }
.fmf-card-excerpt {
    margin: 4px 0 0;
    color: var(--fmf-color-muted);
    font-size: 13px;
    line-height: 1.5;
}
.fmf-card-investment {
    margin: 8px 0 0;
    font-size: 13px;
}
.fmf-card-investment-label {
    color: var(--fmf-color-muted);
    margin-right: 4px;
}
.fmf-card-investment-value {
    /* Brand red unification — matches More Info / Add to Request List / BFA ribbon. */
    color: #FF0000;
    font-weight: 700;
}
.fmf-card-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 18px 16px;
}
.fmf-card-readmore {
    /* Brand red unification — matches the £ investment value on the same card. */
    color: #FF0000;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 0;
}
.fmf-card-readmore:hover { text-decoration: underline; }
.fmf-card-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: var(--fmf-color-brand);
    color: #fff;
    border: 0;
    border-radius: var(--fmf-radius);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background-color .15s;
}
.fmf-card-add:hover { background: #b1213e; }

/* ============================================================
   Single CPT — prnews / story / testimonial
   ============================================================ */
.fmf-cpt-eyebrow {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    font-weight: 700;
}
.fmf-cpt-related-line {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
}
.fmf-cpt-related-line a { color: #fff; text-decoration: underline; }
/* Hero band — solid brand gradient. The article image now renders inline in
   the body (just below the heading) instead of behind the title. */
.fmf-listing-banner {
    background: linear-gradient(135deg, #1f1747 0%, #0f1b2d 100%);
    padding: 40px 0;
}
/* The article <main> is capped at the Hello content width (1140px), narrower
   than the default .fmf-container (1240px). Match the banner inner so the
   eyebrow/title align with the body + Key Facts box below. */
.fmf-listing-banner-inner {
    max-width: 1140px;
}
/* Featured image — inline, just below the heading/byline. Shown at its natural
   size (capped to the column width) so small logos / images aren't upscaled and
   blurred. Tight gap to the first paragraph. */
.fmf-cpt-feature-img {
    margin: 0 0 14px;
}
.fmf-cpt-feature-img img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}
/* Hero title — white on the dark banner (was inheriting black -> invisible). */
.fmf-listing-banner-title {
    margin: 0;
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(26px, 3.6vw, 40px);
    line-height: 1.18;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
/* Article body typography — clean, readable press-release content.
   Also normalises legacy heading colours (some imported content rendered
   headings in raw red) to the brand navy. Scoped to .fmf-listing-content,
   which only the CPT single template (single-related-cpt.php) uses. */
.fmf-listing-content {
    color: #3a3a4d;
    font-size: 16.5px;
    line-height: 1.75;
}
.fmf-listing-content > :first-child { margin-top: 0; }
.fmf-listing-content p { margin: 0 0 1.1em; }
.fmf-listing-content h2,
.fmf-listing-content h3,
.fmf-listing-content h4,
.fmf-listing-content h5 {
    color: #1f1747;
    font-weight: 700;
    line-height: 1.25;
    margin: 1.6em 0 0.5em;
}
.fmf-listing-content h2 { font-size: 24px; }
.fmf-listing-content h3 { font-size: 20px; }
.fmf-listing-content h4 { font-size: 17px; }
.fmf-listing-content a { color: #008cd5; text-decoration: underline; }
.fmf-listing-content a:hover { color: #FF0000; }
.fmf-listing-content ul,
.fmf-listing-content ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.fmf-listing-content li { margin: 0 0 0.4em; }
.fmf-listing-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 0.6em 0; }
.fmf-listing-content blockquote {
    margin: 1.2em 0;
    padding: 10px 18px;
    border-left: 4px solid #008cd5;
    background: #f6f8fb;
    color: #1f1747;
    border-radius: 0 8px 8px 0;
}
/* Brand logo + name at the top of the Key Facts box (CPT singles, opt-in
   logo="1"). Left-aligned logo with the franchise name beside it. */
.sl-keyfacts-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 2px 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef0f5;
}
.sl-keyfacts-logo .fmf-listing-logo-link { display: inline-flex; flex: 0 0 auto; }
.sl-keyfacts-logo img,
.sl-keyfacts-logo .fmf-listing-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
}
.sl-keyfacts-brand {
    font: 700 16px/1.3 "Poppins", sans-serif;
    color: #1f1747;
    text-decoration: none;
}
a.sl-keyfacts-brand:hover { color: #FF0000; }
.fmf-cpt-header {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fmf-color-border);
}
.fmf-cpt-meta {
    margin: 4px 0 0;
    color: var(--fmf-color-muted);
    font-size: 13px;
}
.fmf-cpt-meta a {
    color: var(--fmf-color-brand);
    text-decoration: none;
}
.fmf-cpt-meta a:hover { text-decoration: underline; }
.fmf-cpt-back-link {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--fmf-color-border);
}
.fmf-cpt-back-link a {
    color: var(--fmf-color-brand);
    text-decoration: none;
    font-weight: 600;
}
.fmf-cpt-back-link a:hover { text-decoration: underline; }

/* ============================================================
   Homepage
   ============================================================ */
/* ==========================================================================
   Homepage — modernised design (2026).
   Big, generous, soft. Gradient hero, glass filter bar, icon quicklinks,
   kicker + heading + paragraph section headers, lifted cards.
   ========================================================================== */

/* Local variables scoped to the homepage block — keeps the palette
   self-contained without polluting other pages. */
.fmf-home {
    --fmf-h-ink:        #0b1220;   /* near-black for text */
    --fmf-h-ink-soft:   #475569;   /* secondary text */
    --fmf-h-line:       #e5e7eb;
    --fmf-h-paper:      #ffffff;
    --fmf-h-paper-2:    #f8fafc;   /* off-white wash */
    --fmf-h-paper-3:    #f1f5f9;   /* second wash */
    --fmf-h-brand:      #FF0000;
    --fmf-h-brand-2:    #ff4d6d;
    --fmf-h-accent:     #0085dd;
    --fmf-h-radius:     16px;
    --fmf-h-radius-lg:  24px;
    --fmf-h-shadow-sm:  0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
    --fmf-h-shadow-md:  0 4px 12px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
    --fmf-h-shadow-lg:  0 12px 32px rgba(15,23,42,.10), 0 24px 48px rgba(15,23,42,.08);
    --fmf-h-shadow-hov: 0 18px 40px rgba(15,23,42,.14), 0 30px 60px rgba(15,23,42,.10);
}

/* ----- Hero ------------------------------------------------------------- */

.fmf-home-hero {
    position: relative;
    background-color: #0b1220;
    background-size: cover;
    background-position: center;
    color: #fff;
    /* Top pad trimmed (was clamp(80px, 12vw, 140px)) so the eyebrow pill
       sits closer to the header. Bottom pad also trimmed (was clamp(80px,
       12vw, 120px)) — the quicklink cards live inside the hero so they
       need only a small gutter beneath them, not a full hero pad. */
    padding: clamp(32px, 5vw, 60px) 0 clamp(40px, 6vw, 60px);
    text-align: center;
    overflow: hidden;
}
/* Soft animated decorative blobs — adds visual depth without imagery. */
.fmf-hero-decor {
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 18% 22%, rgba(0,133,221,0.18), transparent 50%),
        radial-gradient(ellipse at 82% 78%, rgba(209,42,74,0.22), transparent 55%);
}
.fmf-home-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.fmf-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.fmf-home-hero-title {
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 6vw, 72px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.02em;
    /* Sentence case reads better at scale — drop the uppercase forcing. */
    text-transform: none;
    max-width: 14ch;
    background: linear-gradient(135deg, #ffffff 0%, #ffe7ec 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fmf-home-hero-sub {
    margin: 4px 0 8px;
    color: rgba(255,255,255,0.92);
    font-size: clamp(17px, 2vw, 21px);
    /* Wide enough to keep the full subtitle on one line at desktop (needs ~653px
       at the 21px ceiling). The cap still lets it wrap on narrower viewports
       where the parent is < this width. */
    max-width: 720px;
    line-height: 1.5;
    font-weight: 400;
}
/* Filter bar in glass card style */
.fmf-home-hero-inner .fmf-filter-bar {
    max-width: 1080px;
    width: 100%;
    margin-top: 24px;
    padding: 14px;
    background: rgba(255,255,255,0.96);
    border-radius: var(--fmf-h-radius);
    box-shadow: var(--fmf-h-shadow-lg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Trust strip below filter — 3 stats. */
.fmf-hero-trust {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 40px;
}
.fmf-hero-trust li {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: rgba(255,255,255,0.94);
    font-size: 14px;
}
.fmf-hero-trust-num {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
}
.fmf-hero-trust-lbl { color: rgba(255,255,255,0.80); }

/* ----- Quicklinks ------------------------------------------------------- */

/* In-hero variant: 4 quicklink cards live inside .fmf-home-hero-inner now,
   sitting under the trust strip. No bg/overlap needed since the hero owns
   the band; just give them top-margin to breathe from the trust strip. */
.fmf-home-quicklinks--in-hero {
    width: 100%;
    max-width: 1080px;
    margin: 28px auto 0;
}
.fmf-home-quicklinks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.fmf-home-quicklink {
    --fmf-ql-accent: #0085dd;
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 22px;
    color: var(--fmf-h-ink);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--fmf-h-line);
    border-radius: var(--fmf-h-radius);
    box-shadow: var(--fmf-h-shadow-sm);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
    overflow: hidden;
    isolation: isolate;
}
.fmf-home-quicklink:before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, color-mix(in srgb, var(--fmf-ql-accent) 12%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity .25s;
    z-index: -1;
}
.fmf-home-quicklink:hover {
    transform: translateY(-3px);
    box-shadow: var(--fmf-h-shadow-md);
    border-color: color-mix(in srgb, var(--fmf-ql-accent) 35%, var(--fmf-h-line));
}
.fmf-home-quicklink:hover:before { opacity: 1; }
.fmf-home-quicklink:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--fmf-ql-accent) 50%, white);
    outline-offset: 3px;
}
.fmf-home-quicklink-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fmf-ql-accent);
    background: color-mix(in srgb, var(--fmf-ql-accent) 12%, transparent);
}
.fmf-home-quicklink-icon svg { width: 22px; height: 22px; }
.fmf-home-quicklink-label {
    flex: 1 1 auto;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    color: inherit;
}
.fmf-home-quicklink-arrow {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--fmf-ql-accent);
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.fmf-home-quicklink:hover .fmf-home-quicklink-arrow { transform: translateX(4px); }

/* ----- Section rhythm (background washes) ------------------------------ */

/* Franchise Finder CTA band — sits between the hero and Search by Category. */
.fmf-home-finder-cta { padding: clamp(28px, 4vw, 44px) 0 0; background: var(--fmf-h-paper); }
.fmf-home-finder-cta__card {
    display: flex; align-items: center; justify-content: space-between; gap: 28px;
    background: linear-gradient(120deg, #044AAE 0%, #008CD5 100%);
    border-radius: 18px; padding: clamp(24px, 3vw, 38px) clamp(26px, 3.4vw, 46px);
    box-shadow: 0 16px 40px rgba(4, 74, 174, 0.22);
    position: relative; overflow: hidden;
}
.fmf-home-finder-cta__card::after {
    content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%); pointer-events: none;
}
.fmf-home-finder-cta__text { position: relative; z-index: 1; }
.fmf-home-finder-cta__kicker { display: block; color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; }
.fmf-home-finder-cta__title { margin: 0 0 8px; color: #fff; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.15; }
.fmf-home-finder-cta__sub { margin: 0; color: rgba(255,255,255,0.9); font-size: 15px; line-height: 1.55; max-width: 620px; }
.fmf-home-finder-cta__btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px;
    background: #FF0000; color: #fff; font-weight: 600; font-size: 16px; text-decoration: none;
    padding: 15px 28px; border-radius: 11px; box-shadow: 0 8px 20px rgba(255,0,0,0.28);
    transition: transform .12s ease, background .15s ease; position: relative; z-index: 1; white-space: nowrap;
}
.fmf-home-finder-cta__btn:hover { background: #d40000; transform: translateY(-1px); color: #fff; }
.fmf-home-finder-cta__btn svg { width: 20px; height: 20px; }
.fmf-home-finder-cta__actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 1; }
.fmf-home-finder-cta__alt { color: rgba(255,255,255,0.92); font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; transition: color .15s ease; }
.fmf-home-finder-cta__alt:hover { color: #fff; }
@media (max-width: 720px) {
    .fmf-home-finder-cta__card { flex-direction: column; align-items: flex-start; text-align: left; }
    .fmf-home-finder-cta__actions { width: 100%; align-items: stretch; }
    .fmf-home-finder-cta__btn { width: 100%; justify-content: center; }
    .fmf-home-finder-cta__alt { text-align: center; }
}

.fmf-home-search-cat { padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 7vw, 88px); background: var(--fmf-h-paper); }
.fmf-home-vault     { padding: 0 0 clamp(70px, 9vw, 100px); background: var(--fmf-h-paper); }
.fmf-home-featured  { padding: clamp(36px, 4vw, 56px) 0; background: #008CD5; }
/* On the blue background the section header text needs to flip white. The
   kicker pill also gets a translucent-white treatment (mirrors the existing
   .fmf-home-section-header--inverse modifier). Scoped to .fmf-home-featured
   so the same .fmf-home-section-header selectors stay dark on lighter
   sections of the homepage. */
.fmf-home-featured .fmf-home-section-header h2 { color: #ffffff; }
.fmf-home-featured .fmf-home-section-header p { color: rgba(255, 255, 255, 0.9); }
.fmf-home-featured .fmf-home-section-kicker {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.30);
}
.fmf-home-welcome   { padding: clamp(70px, 9vw, 100px) 0; background: var(--fmf-h-paper-2); }
.fmf-home-news      { padding: clamp(70px, 9vw, 110px) 0; background: var(--fmf-h-paper); }

.fmf-home-welcome h2 { margin-top: 0; }
.fmf-home-search-cat .fmf-home-section-header { margin-bottom: 0; }   /* heading sits on top of vault */

/* ----- Section headers (kicker / h2 / sub) ----------------------------- */

.fmf-home-section-header {
    text-align: center;
    margin: 0 auto 44px;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.fmf-home-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: color-mix(in srgb, var(--fmf-h-brand) 8%, white);
    color: var(--fmf-h-brand);
    border: 1px solid color-mix(in srgb, var(--fmf-h-brand) 20%, white);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.fmf-home-section-header h2 {
    margin: 0;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--fmf-h-ink);
    text-transform: none;
    padding-bottom: 0;
}
.fmf-home-section-header h2:after { content: none; }    /* remove old underline */
/* Keep the Vault + Investment section headings on a single line: the default
   760px header cap forces them to wrap, so widen those two and stop the wrap on
   wide screens (they still wrap gracefully below 1120px). */
.fmf-home-vault .fmf-home-section-header,
.fmf-home-investment .fmf-home-section-header {
    max-width: 1100px;
}
@media (min-width: 1120px) {
    .fmf-home-vault .fmf-home-section-header h2,
    .fmf-home-investment .fmf-home-section-header h2 {
        white-space: nowrap;
    }
}
.fmf-home-section-header p {
    margin: 4px 0 0;
    color: var(--fmf-h-ink-soft);
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.55;
    max-width: 640px;
}

/* Inverse variant — used on dark/coloured backgrounds (the investment section). */
.fmf-home-section-header--inverse .fmf-home-section-kicker {
    background: rgba(255,255,255,0.16);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.fmf-home-section-header--inverse h2 { color: #fff; }
.fmf-home-section-header--inverse p  { color: rgba(255,255,255,0.85); }

/* ----- Investment tiers section ---------------------------------------- */

.fmf-home-investment {
    position: relative;
    padding: clamp(64px, 9vw, 110px) 0;
    background:
        radial-gradient(ellipse at 12% 18%, rgba(255,255,255,0.08), transparent 55%),
        radial-gradient(ellipse at 92% 88%, rgba(0,0,0,0.20), transparent 55%),
        linear-gradient(135deg, #0a73c7 0%, #0085dd 45%, #0c4a87 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.fmf-home-investment-decor {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 22% 28%, rgba(255,255,255,0.10), transparent 45%),
        radial-gradient(circle at 78% 76%, rgba(255,255,255,0.06), transparent 45%);
}
.fmf-home-investment-inner { position: relative; z-index: 1; }

.fmf-invest-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.fmf-invest-card {
    --fmf-invest-accent: #0085dd;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 28px 26px 26px;
    background: #fff;
    border-radius: 18px;
    color: var(--fmf-h-ink);
    text-decoration: none !important;
    box-shadow: 0 10px 26px rgba(8,32,73,0.18), 0 2px 6px rgba(8,32,73,0.10);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s;
    overflow: hidden;
    isolation: isolate;
}
.fmf-invest-card:before {
    /* Subtle accent wash that strengthens on hover. */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, color-mix(in srgb, var(--fmf-invest-accent) 14%, transparent), transparent 60%);
    opacity: 0;
    transition: opacity .28s;
    z-index: -1;
}
.fmf-invest-card:after {
    /* Thin accent rule along the top edge — same colour as the accent. */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--fmf-invest-accent);
    border-radius: 18px 18px 0 0;
}
.fmf-invest-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(8,32,73,0.24), 0 6px 14px rgba(8,32,73,0.14);
}
.fmf-invest-card:hover:before { opacity: 1; }
.fmf-invest-card:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--fmf-invest-accent) 55%, white);
    outline-offset: 3px;
}
.fmf-invest-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--fmf-invest-accent) 14%, transparent);
    color: var(--fmf-invest-accent);
}
.fmf-invest-icon svg { width: 28px; height: 28px; }
.fmf-invest-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--fmf-h-ink);
}
.fmf-invest-body {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fmf-h-ink-soft);
    flex: 1 1 auto;
}
.fmf-invest-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 10px 18px;
    background: var(--fmf-invest-accent);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--fmf-invest-accent) 35%, transparent);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.fmf-invest-cta svg {
    width: 16px;
    height: 16px;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.fmf-invest-card:hover .fmf-invest-cta {
    box-shadow: 0 10px 22px color-mix(in srgb, var(--fmf-invest-accent) 45%, transparent);
}
.fmf-invest-card:hover .fmf-invest-cta svg { transform: translateX(4px); }

@media (max-width: 992px) {
    .fmf-invest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .fmf-invest-grid { grid-template-columns: 1fr; }
}

/* ----- Search-by-location (postcode-area table) ------------------------ */

/* Search-by-location palette — uses our brand light blue #008CD5 as
   the accent (was teal-green #14b8a6). All shades derive from #008CD5
   for visual cohesion with the rest of the site. */
.fmf-home-locations {
    position: relative;
    padding: clamp(70px, 9vw, 110px) 0;
    background:
        radial-gradient(ellipse at 8% 12%, rgba(0,140,213,0.08), transparent 55%),
        radial-gradient(ellipse at 92% 88%, rgba(15,23,42,0.04), transparent 55%),
        #eef6fc;
    overflow: hidden;
}
.fmf-postcode-table {
    background: #fff;
    border-radius: 18px;
    padding: clamp(28px, 4vw, 48px);
    box-shadow: 0 10px 26px rgba(15,23,42,0.06), 0 2px 6px rgba(15,23,42,0.04);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 48px;
}
.fmf-postcode-group { min-width: 0; }
.fmf-postcode-title {
    display: inline-block;
    margin: 0 0 10px;
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 800;
    color: var(--fmf-h-ink);
    letter-spacing: -0.01em;
    border-bottom: 2px solid #008CD5;
    padding-bottom: 4px;
}
.fmf-postcode-title-link {
    color: inherit;
    text-decoration: none !important;
    transition: color .15s;
}
.fmf-postcode-title-link:hover { color: #006fa8; }
.fmf-postcode-line {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--fmf-h-ink);
}
.fmf-postcode-lead {
    color: var(--fmf-h-ink-soft);
    font-style: italic;
    margin-right: 4px;
}
.fmf-postcode-link {
    color: #008CD5;
    font-weight: 600;
    text-decoration: none !important;
    border-bottom: 1px dotted rgba(0,140,213,0.4);
    transition: color .15s, border-color .15s, background .15s;
    padding: 0 2px;
    border-radius: 4px;
    white-space: nowrap;
}
.fmf-postcode-link:hover,
.fmf-postcode-link:focus-visible {
    color: #006fa8;
    background: rgba(0,140,213,0.10);
    border-bottom-color: #006fa8;
    outline: none;
}
.fmf-postcode-code {
    color: #64748b;
    font-weight: 500;
    font-size: 0.92em;
}

@media (max-width: 820px) {
    .fmf-postcode-table { grid-template-columns: 1fr; gap: 24px; }
}

/* ----- Featured Franchises For Sale grid ------------------------------- */

/* Subtitle is ~78 chars — widen the header so it lays out on a single line
   on desktop. Falls back to wrapping automatically below ~820px viewport. */
.fmf-home-featured .fmf-home-section-header { max-width: 900px; }
.fmf-home-featured .fmf-home-section-header p { max-width: 100%; }

.fmf-featured-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
/* The "Featured Franchises For Sale" band injected OUTSIDE the homepage
   (search results + listing/location archives, via the --global variant) was
   not stretching its header + grid to the container width: the grid collapsed
   to width 0 and the card content pushed off-screen, causing ~200px of
   horizontal scroll on mobile AND tablet. Force these children to full width
   in the --global context (the homepage instance already renders full-width,
   so it is unaffected). */
.fmf-home-featured--global .fmf-container > .fmf-home-section-header,
.fmf-home-featured--global .fmf-container > .fmf-featured-grid {
    width: 100%;
}
.fmf-featured-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(15,23,42,0.08), 0 1px 3px rgba(15,23,42,0.04);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s;
    overflow: hidden;
}
.fmf-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px rgba(15,23,42,0.14), 0 4px 10px rgba(15,23,42,0.08);
}
.fmf-featured-card-link {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 22px 22px;
    color: inherit;
    text-decoration: none !important;
    height: 100%;
}
.fmf-featured-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 200px;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    background: #fff;
    padding: 14px;
    box-sizing: border-box;
}
.fmf-featured-card-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.fmf-featured-card-logo-fallback {
    font-size: 48px;
    font-weight: 800;
    color: #9aa3b2;
    line-height: 1;
}
.fmf-featured-card-title {
    margin: 4px 0 0;
    font-size: 19px;
    font-weight: 800;
    color: var(--fmf-h-ink);
    letter-spacing: -0.01em;
    line-height: 1.25;
    /* Clamp to 1 line with ellipsis so cards keep equal height. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fmf-featured-card-cat {
    margin: 0;
    color: var(--fmf-h-ink-soft);
    font-size: 14px;
    line-height: 1.4;
}
.fmf-featured-card-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
}
.fmf-featured-card-price {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.fmf-featured-card-price-lbl {
    color: var(--fmf-h-ink-soft);
    font-size: 12px;
    margin-bottom: 4px;
}
.fmf-featured-card-price-val {
    color: var(--fmf-h-ink);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.fmf-featured-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid #FF0000;
    border-radius: 999px;
    /* Brand red rather than the ink colour — the previous outlined-ink
       variant was easy to miss visually and on hover became white on a
       white card body if the underlying CSS variable failed to resolve. */
    color: #FF0000;
    font-weight: 600;
    font-size: 13px;
    background: transparent;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.fmf-featured-card-cta svg {
    width: 14px;
    height: 14px;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.fmf-featured-card:hover .fmf-featured-card-cta {
    background: #FF0000;
    color: #ffffff;
    border-color: #FF0000;
}
.fmf-featured-card:hover .fmf-featured-card-cta svg { transform: translateX(3px); }
/* Add-to-Request-List button sits below the card link (outside the <a> so it
   doesn't navigate). Reuses the global .sl-cta-toggle box + tick styling. */
.fmf-featured-card { display: flex; flex-direction: column; }
.fmf-featured-card-link { height: auto; flex: 1 1 auto; padding-bottom: 14px; }
.fmf-featured-card-add { padding: 0 22px 20px; }
.fmf-featured-card-addbtn {
    width: 100%;
    gap: 10px;
    padding: 12px 14px;
    background: #FF0000;
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .15s;
}
.fmf-featured-card-addbtn:hover { background: #d40000; }

@media (max-width: 992px) {
    .fmf-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .fmf-featured-grid { grid-template-columns: 1fr; }
}

/* ----- Latest News grid ------------------------------------------------- */

.fmf-home-news-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.fmf-home-news-card {
    background: #fff;
    border-radius: var(--fmf-h-radius);
    overflow: hidden;
    border: 1px solid var(--fmf-h-line);
    box-shadow: var(--fmf-h-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
}
.fmf-home-news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fmf-h-shadow-hov);
    border-color: color-mix(in srgb, var(--fmf-h-brand) 30%, var(--fmf-h-line));
}
.fmf-home-news-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--fmf-h-paper-3);
    overflow: hidden;
    position: relative;
}
.fmf-home-news-card__media:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(11,18,32,0.18));
}
.fmf-home-news-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.fmf-home-news-card:hover .fmf-home-news-card__media img { transform: scale(1.05); }
.fmf-home-news-card__body {
    padding: 20px 22px 22px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fmf-home-news-card__date {
    margin: 0;
    font-size: 11px;
    color: var(--fmf-h-brand);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}
.fmf-home-news-card__title {
    font-size: 17px;
    line-height: 1.35;
    margin: 0;
    font-weight: 700;
    color: var(--fmf-h-ink);
    /* Clamp to 2 lines for grid alignment */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fmf-home-news-card__title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size .35s;
}
.fmf-home-news-card__title a:hover { background-size: 100% 1px; color: var(--fmf-h-brand); }
.fmf-home-news-card__excerpt {
    margin: 0;
    color: var(--fmf-h-ink-soft);
    font-size: 14px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----- "Search By Category" — 12-tile icon grid ------------------------ */

.fmf-home-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 36px;
}
.fmf-home-cat {
    --fmf-cat-bg: none;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 20px;
    border-radius: var(--fmf-h-radius);
    color: #fff;
    text-decoration: none;
    background-color: #1f2937;
    background-image: var(--fmf-cat-bg);
    background-size: cover;
    background-position: center;
    box-shadow: var(--fmf-h-shadow-sm);
    overflow: hidden;
    min-height: 110px;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
/* Dark gradient overlay — keeps label readable over any image. */
.fmf-home-cat:before {
    content: '';
    position: absolute; inset: 0;
    z-index: -1;
    background:
        linear-gradient(135deg, rgba(11,18,32,0.78) 0%, rgba(11,18,32,0.55) 60%, rgba(209,42,74,0.45) 100%);
    transition: opacity .25s;
}
.fmf-home-cat:hover {
    transform: translateY(-3px);
    box-shadow: var(--fmf-h-shadow-hov);
    color: #fff;
}
.fmf-home-cat:hover:before { opacity: .92; }
.fmf-home-cat:focus-visible {
    outline: 3px solid rgba(255,255,255,0.65);
    outline-offset: 3px;
}
.fmf-home-cat-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.20);
}
.fmf-home-cat-icon svg { width: 22px; height: 22px; }
.fmf-home-cat-meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.fmf-home-cat-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fmf-home-cat-count {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
}

/* "View all categories" CTA under the 12-tile grid. Mirrors the news-CTA
   pill but without the gradient — outline style so it doesn't compete
   with the brighter coloured tiles above it. */
.fmf-home-cat-cta {
    text-align: center;
    margin: 36px 0 0;
}
.fmf-home-cat-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--fmf-h-brand);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 12px 26px;
    text-transform: uppercase;
    border: 2px solid var(--fmf-h-brand);
    border-radius: 999px;
    text-decoration: none;
    transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.fmf-home-cat-cta-btn:hover {
    background: var(--fmf-h-brand);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(209,42,74,0.25);
}
.fmf-home-cat-cta-btn svg { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.fmf-home-cat-cta-btn:hover svg { transform: translateX(4px); }

/* ==========================================================================
   WP category (blog) archive — used by category.php. Vertical post list.
   ========================================================================== */

.fmf-blog-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.fmf-blog-card {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 24px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
}
.fmf-blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15,23,42,.10);
    border-color: #FF0000;
}
.fmf-blog-card__media {
    display: block;
    height: 100%;
    overflow: hidden;
    background: #f1f5f9;
}
.fmf-blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.fmf-blog-card:hover .fmf-blog-card__media img { transform: scale(1.05); }
.fmf-blog-card__body {
    padding: 22px 26px 22px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
/* When the card has no thumbnail, pad the body all sides. */
.fmf-blog-card:not(:has(.fmf-blog-card__media)) {
    grid-template-columns: 1fr;
}
.fmf-blog-card:not(:has(.fmf-blog-card__media)) .fmf-blog-card__body {
    padding: 22px 26px;
}
.fmf-blog-card__meta {
    margin: 0;
    font-size: 12px;
    color: #FF0000;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.fmf-blog-card__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: #0b1220;
}
.fmf-blog-card__title a { color: inherit; text-decoration: none; }
.fmf-blog-card__title a:hover { color: #FF0000; }
.fmf-blog-card__excerpt {
    margin: 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.6;
}
.fmf-blog-card__cta {
    margin-top: auto;
    padding-top: 6px;
    color: #FF0000;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    align-self: flex-start;
}
.fmf-blog-card__cta:hover { text-decoration: underline; }

@media (max-width: 767px) {
    .fmf-blog-card { grid-template-columns: 1fr; }
    .fmf-blog-card__media { aspect-ratio: 16 / 10; }
    .fmf-blog-card__body { padding: 18px 22px 22px; }
}

/* ==========================================================================
   A-Z directory strip on the All Listings page (templates/page-all-listings.php).
   ========================================================================== */

.fmf-az-strip {
    background: #fff;
    /* No border-bottom AND no box-shadow — the prior 3px drop shadow
       was reading as a faint horizontal line under the A-Z keys. The
       sticky positioning still works without a visual separator. */
    padding: 18px 0;
    position: sticky;
    top: 0;
    z-index: 30;
}
.fmf-az-strip ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.fmf-az-strip a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    background: #f1f5f9;
    color: #1f2937;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background .15s, color .15s, transform .15s;
}
.fmf-az-strip a:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
}
.fmf-az-strip a.is-active {
    background: #FF0000;
    color: #fff;
    box-shadow: 0 4px 10px rgba(255,0,0,0.25);
}

/* ==========================================================================
   Generic DT9 fallback shell — used by `templates/dt9-fallback.php` for
   every legacy page template (tpl-page-single, tpl-page-faq, etc.) that
   would otherwise render blank.
   ========================================================================== */

/* Release the 1140px main-content cap on these pages. */
body:not([class*=elementor-page-]) .site-main.fmf-fallback-page {
    max-width: none !important;
    width: 100% !important;
    padding-inline: 0 !important;
}

.fmf-fallback-page {
    --fmf-fb-ink:      #0b1220;
    --fmf-fb-ink-soft: #475569;
    --fmf-fb-brand:    #FF0000;
    --fmf-fb-line:     #e5e7eb;
    --fmf-fb-paper:    #ffffff;
    --fmf-fb-paper-2:  #f8fafc;
    --fmf-fb-radius:   14px;
}

/* Hero — image bg + dark gradient. Title centered. */
.fmf-fallback-hero {
    background-color: #0b1220;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: clamp(60px, 9vw, 100px) 0;
    text-align: center;
}
.fmf-fallback-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.fmf-fallback-hero-sub {
    margin: 14px auto 0;
    color: rgba(255,255,255,0.90);
    font-size: clamp(15px, 1.6vw, 18px);
    max-width: 720px;
    line-height: 1.55;
}

/* Plain header (when no ACF banner_image set) */
.fmf-fallback-header {
    /* Tight 8px bottom padding (was 16px) so the body content sits closer
       to the h1. Combined with the .fmf-fallback-body padding-top reset
       below, this closes the formerly ~130px gap that admin reports flagged
       on /privacy/, /cookie-policy/, and /terms/. */
    padding: 48px 0 8px;
    text-align: center;
}
.fmf-fallback-header h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--fmf-fb-ink);
}

/* Content body. */
.fmf-fallback-body {
    /* Trimmed top padding (was clamp(40, 6vw, 72)) so the body content
       hugs the header. Bottom stays generous for visual rhythm before
       the footer. */
    padding: 16px 24px clamp(60px, 9vw, 100px);
}
.fmf-fallback-content {
    max-width: 820px;
    margin: 0 auto;
    color: var(--fmf-fb-ink);
    font-size: 16px;
    line-height: 1.7;
}
/* Kill the default top margin of the first heading/paragraph inside the
   content so it lands flush under the page header. Without this, an h2
   leading the_content() inherits its 1.6em top margin (~45px) and the
   gap re-opens. */
.fmf-fallback-content > *:first-child {
    margin-top: 0;
}
.fmf-fallback-content h2 {
    margin: 1.6em 0 0.6em;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--fmf-fb-ink);
}
.fmf-fallback-content h3 {
    margin: 1.4em 0 0.4em;
    font-size: 20px;
    font-weight: 700;
    color: var(--fmf-fb-ink);
}
.fmf-fallback-content h4 {
    margin: 1.2em 0 0.4em;
    font-size: 17px;
    font-weight: 700;
    color: var(--fmf-fb-ink);
}
.fmf-fallback-content p { margin: 0 0 1.1em; }
.fmf-fallback-content a {
    color: var(--fmf-fb-brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.fmf-fallback-content a:hover { text-decoration-thickness: 2px; }
.fmf-fallback-content ul,
.fmf-fallback-content ol { margin: 0 0 1.2em 1.2em; padding: 0; }
.fmf-fallback-content li { margin: 0 0 0.4em; }
.fmf-fallback-content blockquote {
    margin: 1.4em 0;
    padding: 16px 20px;
    border-left: 4px solid var(--fmf-fb-brand);
    background: var(--fmf-fb-paper-2);
    color: var(--fmf-fb-ink-soft);
    font-style: italic;
    border-radius: 0 var(--fmf-fb-radius) var(--fmf-fb-radius) 0;
}
.fmf-fallback-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--fmf-fb-radius);
    margin: 1em 0;
}
.fmf-fallback-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4em 0;
    font-size: 14px;
}
.fmf-fallback-content table th,
.fmf-fallback-content table td {
    padding: 10px 14px;
    border: 1px solid var(--fmf-fb-line);
    text-align: left;
}
.fmf-fallback-content table th {
    background: var(--fmf-fb-paper-2);
    font-weight: 700;
}

/* With-sidebar variant (e.g. tpl-page-single legacy pages). */
.fmf-fallback-page.has-sidebar .fmf-fallback-grid {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
}
.fmf-fallback-page.has-sidebar .fmf-fallback-sidebar { min-width: 0; }
.fmf-fallback-page.has-sidebar .fmf-fallback-content { max-width: none; }

@media (max-width: 991.98px) {
    .fmf-fallback-page.has-sidebar .fmf-fallback-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ==========================================================================
   /industries/ page (post id 238937) — modernised card grid.
   Scoped to the page-id class so other pages don't pick up these rules.
   ========================================================================== */

body.page-id-238937 {
    --fmf-ind-ink:        #0b1220;
    --fmf-ind-ink-soft:   #475569;
    --fmf-ind-line:       #e5e7eb;
    --fmf-ind-brand:      #FF0000;
    --fmf-ind-brand-2:    #ff4d6d;
    --fmf-ind-paper:      #ffffff;
    --fmf-ind-paper-2:    #f8fafc;
    --fmf-ind-radius:     16px;
    --fmf-ind-shadow-sm:  0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
    --fmf-ind-shadow-md:  0 4px 12px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
    --fmf-ind-shadow-hov: 0 18px 40px rgba(15,23,42,.14), 0 30px 60px rgba(15,23,42,.10);
}

/* Release the 1140px main-content cap so the card grid can breathe. */
body.page-id-238937 .site-main {
    max-width: 1280px !important;
    width: 100% !important;
    padding-inline: 24px !important;
}

/* Page header — modern hero treatment with kicker + large display title. */
body.page-id-238937 .page-header {
    text-align: center;
    padding: 56px 0 0;
    margin: 0 auto 12px;
    border: 0;
}
body.page-id-238937 .page-header:before {
    content: 'Browse the directory';
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: color-mix(in srgb, var(--fmf-ind-brand) 8%, white);
    color: var(--fmf-ind-brand);
    border: 1px solid color-mix(in srgb, var(--fmf-ind-brand) 20%, white);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
body.page-id-238937 .page-header .entry-title {
    margin: 0 auto;
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--fmf-ind-ink);
}

/* /packages/ + /advertise/ — hide the theme page-title H1 (the Elementor content
   already titles each page; production renders neither title — matches prod). */
body.page-id-370972 .page-header,
body.page-id-369997 .page-header { display: none; }

/* /packages/ — constrain the "Begin Your Advertising Now…" enquiry form to the
   same 1120px (centred) as the Packages comparison tables, instead of spanning
   the full-width blue section. (The blue band stays full-width.) Target the form
   element (a block inside the widget) — auto-margins on the widget itself (a flex
   item) collapse it to content width. */
body.page-id-370972 form.fluent_form_15 { max-width: 1120px; margin-left: auto; margin-right: auto; }
/* …and constrain the section's heading + intro text to the same 1120px (centred)
   so they line up with the form (target the inner .elementor-widget-container —
   a block child — not the widget itself, which is a flex item). */
body.page-id-370972 .elementor-element-deaff89 .elementor-widget-container,
body.page-id-370972 .elementor-element-69d24f0 .elementor-widget-container { max-width: 1120px; margin-left: auto !important; margin-right: auto !important; }

/* Page-content wrapper: provide the section background + spacing. */
body.page-id-238937 .page-content {
    padding: 0 0 80px;
}

/* The intro H2 + paragraph above the grid. */
body.page-id-238937 .page-content > h2.wp-block-heading {
    text-align: center;
    margin: 0 auto 14px;
    max-width: 760px;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--fmf-ind-ink);
}
body.page-id-238937 .page-content > h2.wp-block-heading .ez-toc-section,
body.page-id-238937 .page-content > h2.wp-block-heading .ez-toc-section-end { display: none; }
body.page-id-238937 .page-content > p {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
    color: var(--fmf-ind-ink-soft);
    font-size: 16px;
    line-height: 1.6;
}

/* ---- The card grid ---------------------------------------------------- */

body.page-id-238937 .taxonomy--box {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
}
body.page-id-238937 .taxonomy--box > div {
    background: #fff;
    border: 1px solid var(--fmf-ind-line);
    border-radius: var(--fmf-ind-radius);
    box-shadow: var(--fmf-ind-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: auto;          /* override the inline ~285px */
    flex: 1 1 auto;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
}
body.page-id-238937 .taxonomy--box > div:hover {
    transform: translateY(-4px);
    box-shadow: var(--fmf-ind-shadow-hov);
    border-color: color-mix(in srgb, var(--fmf-ind-brand) 30%, var(--fmf-ind-line));
}

/* Card image — fill top, fixed aspect ratio. */
body.page-id-238937 .taxonomy--box > div > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
body.page-id-238937 .taxonomy--box > div:hover > img { transform: scale(1.04); }

/* Card title (h3 contains the link + count badge). */
body.page-id-238937 .taxonomy--box > div > h3 {
    margin: 20px 22px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
body.page-id-238937 .taxonomy--box > div > h3 .ez-toc-section,
body.page-id-238937 .taxonomy--box > div > h3 .ez-toc-section-end { display: none; }
body.page-id-238937 .taxonomy--box > div > h3 > a {
    color: var(--fmf-ind-ink) !important;
    text-decoration: none !important;
    flex: 1 1 auto;
    min-width: 0;
}
body.page-id-238937 .taxonomy--box > div:hover > h3 > a { color: var(--fmf-ind-brand) !important; }

/* Count badge. */
body.page-id-238937 .taxonomy--box > div .count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 4px 10px !important;
    background: color-mix(in srgb, var(--fmf-ind-brand) 10%, white) !important;
    color: var(--fmf-ind-brand) !important;
    border: 1px solid color-mix(in srgb, var(--fmf-ind-brand) 22%, white) !important;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Franchise list inside the card. */
body.page-id-238937 .taxonomy--box > div > ul {
    list-style: none !important;
    margin: 14px 22px 0;
    padding: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.page-id-238937 .taxonomy--box > div > ul > li {
    position: relative;
    padding: 0 0 0 18px;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}
body.page-id-238937 .taxonomy--box > div > ul > li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fmf-ind-brand) 35%, white);
}
body.page-id-238937 .taxonomy--box > div > ul > li > a {
    color: var(--fmf-ind-ink-soft) !important;
    text-decoration: none !important;
    transition: color .15s;
}
body.page-id-238937 .taxonomy--box > div > ul > li > a:hover {
    color: var(--fmf-ind-brand) !important;
}

/* "View All" trailing link — render as outlined pill at the bottom. */
body.page-id-238937 .taxonomy--box > div > div {
    margin: 18px 22px 22px;
    padding-top: 14px;
    border-top: 1px solid var(--fmf-ind-line);
}
body.page-id-238937 .taxonomy--box > div > div > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    color: var(--fmf-ind-brand) !important;
    border: 1px solid color-mix(in srgb, var(--fmf-ind-brand) 30%, transparent);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background .2s, color .2s, border-color .2s;
}
body.page-id-238937 .taxonomy--box > div > div > a:hover {
    background: var(--fmf-ind-brand);
    color: #fff !important;
    border-color: var(--fmf-ind-brand);
}

/* Hide the ">" chevron after the "View All" pill — it's a FontAwesome
   :before (\f105) from the taxonomy-grid plugin CSS, not an .icon element. */
body.page-id-238937 .taxonomy--box > div > div > a + .icon,
body.page-id-238937 .taxonomy--box > div > div > a > i:first-child,
body.page-id-238937 .taxonomy--box > div > div > a:before { content: none !important; display: none !important; }
/* Remove the red list markers — the small filled dot (theme li:before) AND
   the FontAwesome hollow circle (taxonomy-grid plugin li a:after, \f10c) —
   for a clean text list, and drop the now-redundant left indent. */
body.page-id-238937 .taxonomy--box > div > ul > li:before,
body.page-id-238937 .taxonomy--box > div > ul > li > a:after { content: none !important; display: none !important; }
body.page-id-238937 .taxonomy--box > div > ul > li { padding-left: 0; }
body.page-id-238937 .taxonomy--box > div > ul > li > a { padding-left: 0 !important; }

/* Responsive */
@media (max-width: 1199.98px) {
    body.page-id-238937 .taxonomy--box { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 891.98px) {
    body.page-id-238937 .taxonomy--box { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 575px) {
    body.page-id-238937 .taxonomy--box { grid-template-columns: 1fr; gap: 18px; }
    body.page-id-238937 .page-header { padding-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    body.page-id-238937 .taxonomy--box > div,
    body.page-id-238937 .taxonomy--box > div > img { transition: none; }
}

/* ----- [featured_listings] shortcode — card-grid style on homepage ----- */

/* The shortcode emits its own widget-style `<div class="widget-title">` +
   `.lst-widgetb > .fmf-featured-row{*}` — designed for narrow sidebar use.
   Inside the homepage's `.fmf-home-featured` we suppress that widget title
   (we already have a section header) and switch the rows to a 4-up grid
   of lifted cards. */

.fmf-home-featured .widget-title { display: none; }
.fmf-home-featured .lst-widgetb {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.fmf-home-featured .fmf-featured-row {
    background: #fff;
    border: 1px solid var(--fmf-h-line);
    border-radius: var(--fmf-h-radius);
    box-shadow: var(--fmf-h-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
}
.fmf-home-featured .fmf-featured-row:hover {
    transform: translateY(-4px);
    box-shadow: var(--fmf-h-shadow-hov);
    border-color: color-mix(in srgb, var(--fmf-h-brand) 30%, var(--fmf-h-line));
}
.fmf-home-featured .fmf-featured-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    padding: 28px;
    background: var(--fmf-h-paper-2);
    border-bottom: 1px solid var(--fmf-h-line);
}
.fmf-home-featured .fmf-featured-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.fmf-home-featured .fmf-featured-row:hover .fmf-featured-thumb img { transform: scale(1.04); }
.fmf-home-featured .fmf-featured-body {
    padding: 20px 18px 22px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.fmf-home-featured .fmf-featured-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fmf-h-ink);
}
.fmf-home-featured .fmf-featured-title a {
    color: inherit;
    text-decoration: none;
}
.fmf-home-featured .fmf-featured-title a:hover { color: var(--fmf-h-brand); }
.fmf-home-featured .fmf-featured-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 9px 18px;
    background: transparent;
    color: var(--fmf-h-brand);
    border: 1px solid color-mix(in srgb, var(--fmf-h-brand) 30%, transparent);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.fmf-home-featured .fmf-featured-more:hover {
    background: var(--fmf-h-brand);
    color: #fff;
    border-color: var(--fmf-h-brand);
}
.fmf-home-featured .fmf-featured-more i { font-size: 11px; }

/* ----- Modern CTA pill button (used by news + future) ------------------ */

.fmf-home-news-cta {
    text-align: center;
    margin: 44px 0 0;
}
.fmf-home-news-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--fmf-h-brand) 0%, var(--fmf-h-brand-2) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 14px 28px;
    text-transform: uppercase;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 8px 16px rgba(209,42,74,0.30);
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.fmf-home-news-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(209,42,74,0.36);
    color: #fff;
}

/* ----- Responsive ------------------------------------------------------ */

@media (max-width: 991.98px) {
    .fmf-home-news-grid,
    .fmf-home-featured .lst-widgetb,
    .fmf-home-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fmf-home-quicklink { padding: 18px 18px; }
    .fmf-home-quicklink-icon { width: 40px; height: 40px; }
}
@media (max-width: 575px) {
    .fmf-home-news-grid,
    .fmf-home-featured .lst-widgetb,
    .fmf-home-cat-grid { grid-template-columns: 1fr; }
    .fmf-hero-trust { gap: 8px 24px; }
    .fmf-hero-trust-num { font-size: 18px; }
    .fmf-home-quicklinks--in-hero { margin-top: 20px; }
    .fmf-home-quicklinks-grid { gap: 12px; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .fmf-home-quicklink, .fmf-home-news-card,
    .fmf-home-news-card__media img, .fmf-home-quicklink-arrow,
    .fmf-home-news-cta-btn { transition: none; }
}

/* Pagination */
.fmf-archive-pagination {
    margin-top: 32px;
    text-align: center;
}
.fmf-archive-pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 3px;
    background: var(--fmf-color-bg-card);
    border: 1px solid var(--fmf-color-border);
    border-radius: var(--fmf-radius);
    color: var(--fmf-color-text);
    text-decoration: none;
    font-size: 14px;
}
.fmf-archive-pagination .page-numbers.current {
    background: #FF0000;
    color: #fff;
    border-color: #FF0000;
}
.fmf-archive-pagination .page-numbers:hover:not(.current) {
    background: #FF0000;
    color: #fff;
    border-color: #FF0000;
}

/* Defensive: hide any DT9 leftover banners/breadcrumbs that the Hello
   Elementor header doesn't suppress and that we haven't yet rebuilt. */
body.single-listing_type .featuredContentSlider:empty { display: none; }

/* Bootstrap-style .modal classes (#requestModal, #claimModal) — Bootstrap
   CSS isn't loaded under Hello Elementor, so these render inline by
   default. Force `display: none` unless the .show class is added by
   trigger code. */
.modal.fade:not(.show),
.modal:not(.show) { display: none !important; }

/* "Add to Request List" CTA — used on single listings, archive cards, and
   the Franchise Vault hover-overlay. The button has a red background; on
   some legacy cascades the text inherits the brand red too, which makes
   the label unreadable. Force white for the button text + check icon in
   every context the class appears.
   `.fa-plus` is deliberately NOT covered — it has its own legacy rule
   (`.fa-plus { background:#fff; color:#000; border-radius:50% }`) which
   gives it a black-on-white-circle badge that must stay visible. */
.add_to_request_list,
.add_to_request_list:link,
.add_to_request_list:visited,
.add_to_request_list:hover,
.add_to_request_list:focus,
.add_to_request_list:active,
.add_to_request_list span,
.add_to_request_list .fa-check { color: #fff !important; }

/* Brand red unification — Add to Request List button matches the "More Info"
   CTA + BFA ribbon + Featured Franchise chip (#FF0000). Overrides the legacy
   `.btn-primary { background-color: #FF0000 }` rule in the Customizer CSS so
   `.btn-primary` elsewhere keeps that pure red; only `.add_to_request_list`
   shifts to the slightly warmer brand shade. */
button.add_to_request_list,
.add_to_request_list,
.add_to_request_list:link,
.add_to_request_list:visited,
.btn.add_to_request_list,
.btn-primary.add_to_request_list {
    background-color: #FF0000 !important;
    border-color: #FF0000 !important;
}
button.add_to_request_list:hover,
.add_to_request_list:hover,
.add_to_request_list:focus,
.btn.add_to_request_list:hover,
.btn-primary.add_to_request_list:hover,
.btn-primary.add_to_request_list:focus {
    background-color: #cc0000 !important;
    border-color: #cc0000 !important;
}

/* ============================================================
   Footer link-column rollover underline.

   The 3 footer columns (Navigation / Popular Searches / Information)
   are rendered by franchise-custom-plugin's footer_menu_links() into
   <ul class="footerLinks"><li><a>. Baseline anchors have no underline.
   Add a clear hover/focus underline so the link affordance is obvious.
   ============================================================ */
.footer_menu_row .footerLinks li a,
.footer_menu_row .footerLinks a {
    text-decoration: none;
    transition: text-decoration-color .15s, color .15s;
}
.footer_menu_row .footerLinks li a:hover,
.footer_menu_row .footerLinks li a:focus,
.footer_menu_row .footerLinks a:hover,
.footer_menu_row .footerLinks a:focus {
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    color: #ffffff !important;
}

/* ==========================================================================
   Contact Us page — templates/page-contact.php
   Single full-width form card (the "Other ways to reach us" aside was
   removed in May 2026).
   ========================================================================== */
/* Contact page — styled to match the /join/ branded screen: centered blue H1
   + subtitle, then a single white card with the same rounded/soft-shadow look. */
.fmf-contact-join {
    max-width: 720px;
    margin: 48px auto 76px;
    padding: 0 20px;
}
.fmf-contact-h1 {
    font-size: 32px;
    font-weight: 800;
    color: #044AAE;
    text-align: center;
    margin: 0 0 8px;
}
.fmf-contact-sub {
    text-align: center;
    color: #475569;
    font-size: 16px;
    margin: 0 0 38px;
}
.fmf-contact-body { padding: 40px 0 60px; }
.fmf-contact-form-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
    padding: 34px 30px;
    max-width: none;
    margin: 0;
}
.fmf-contact-form-card__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.fmf-contact-form-card__lede {
    margin: 0 0 22px;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}

/* Brand-blue field labels + a little more breathing room between fields. */
.fmf-contact-form-card .fluentform .ff-el-input--label label,
.fmf-contact-form-card .fluentform .ff-el-input--label {
    color: #044AAE !important;
    font-weight: 600 !important;
}
.fmf-contact-form-card .fluentform .ff-el-group {
    margin-bottom: 26px !important;
}

/* FluentForm layout overrides — make every row (.ff-t-container) span the
   full content width of the card and left-align by killing the 600px cap +
   auto-margin that FluentForm applies in some themes. */
.fmf-contact-form-card .fluentform .ff-t-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
.fmf-contact-form-card .fluentform .ff-t-cell {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}

/* First name + Last name on the SAME row — the input_name element wraps
   its sub-fields in [data-name="names"] > .ff-t-container. Override the
   container's flex-direction so the two cells sit side-by-side. */
.fmf-contact-form-card .fluentform [data-name="names"] .ff-t-container,
.fmf-contact-form-card .fluentform .ff-name-field-wrapper .ff-t-container {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}
.fmf-contact-form-card .fluentform [data-name="names"] .ff-t-container > .ff-t-cell,
.fmf-contact-form-card .fluentform .ff-name-field-wrapper .ff-t-container > .ff-t-cell {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 200px !important;
    max-width: 100% !important;
}
@media (max-width: 600px) {
    .fmf-contact-form-card .fluentform [data-name="names"] .ff-t-container > .ff-t-cell,
    .fmf-contact-form-card .fluentform .ff-name-field-wrapper .ff-t-container > .ff-t-cell {
        flex: 1 1 100% !important;
    }
}

/* FluentForm input styling scoped to the contact card */
.fmf-contact-form-card .fluentform .ff-el-input--content input[type="text"],
.fmf-contact-form-card .fluentform .ff-el-input--content input[type="email"],
.fmf-contact-form-card .fluentform .ff-el-input--content textarea {
    border-radius: 8px !important;
    border-color: #e5e7eb !important;
    padding: 10px 14px !important;
    width: 100% !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.fmf-contact-form-card .fluentform .ff-el-input--content input:focus,
.fmf-contact-form-card .fluentform .ff-el-input--content textarea:focus {
    border-color: #FF0000 !important;
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.12) !important;
    outline: 0 !important;
}
.fmf-contact-form-card .fluentform .ff-btn,
.fmf-contact-form-card .fluentform button.ff-btn-submit {
    background: #FF0000 !important;
    border-color: #FF0000 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.25);
    transition: background-color .15s, transform .15s, box-shadow .15s;
}
.fmf-contact-form-card .fluentform .ff-btn:hover,
.fmf-contact-form-card .fluentform button.ff-btn-submit:hover {
    background: #cc0000 !important;
    border-color: #cc0000 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}
/* Breathing room above the Send Message button (clears the consent checkbox). */
.fmf-contact-form-card .fluentform .ff_submit_btn_wrapper {
    margin-top: 26px !important;
}

/* ==========================================================================
   "You have N pending Requests" floating toast (#requestBar).
   Replaces the legacy full-width white bar with a centered pill toast that
   sits 24px above the viewport bottom. The original plugin CSS lives in
   franchise-custom-plugin/assets/css/franchise_custom_layout.css; the rules
   below load AFTER it and use higher specificity / !important on the parts
   the legacy rules hard-set.
   ========================================================================== */
body #requestBar {
    /* Centered floating pill — not full-width. */
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 24px !important;
    transform: translateX(-50%);
    width: auto !important;
    max-width: calc(100% - 48px);
    z-index: 9999;

    /* Frosted-white card surface with pill radius. */
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-radius: 999px !important;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06) !important;
    padding: 11px 14px 11px 26px !important;
    text-align: left !important;

    /* Slide-up entry. The existing JS toggles `display:none → block`;
       we hook into the visible state with @keyframes. */
    animation: fmf-reqbar-in .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes fmf-reqbar-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Inline-flex layout of inner <span>. */
body #requestBar > span {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

/* "You have N pending Requests" text — refined typography. */
body #requestBar #req,
body #requestBar p.cookie_counter {
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Poppins", system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    line-height: 1.3 !important;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

/* The counter itself becomes a red circular badge. */
body #requestBar #request_list_counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 999px;
    background: #FF0000;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}

/* "pending franchises" label — explicitly inherit the parent paragraph's
   font + colour so the trailing word lines up visually with "You have"
   and "pending". Was muted to #475569 which read as a different font/
   weight on close inspection. Same rule applies to both .request_text
   (legacy) and .franchise_text (current). */
body #requestBar .request_text,
body #requestBar .franchise_text,
body #requestBar .rb-label {
    font: inherit !important;
    color: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* CTA — compact pill, brand red, with the same hover lift used by the
   Featured Franchises More Info button. */
body #requestBar a.btn.fancyLeadForm,
body #requestBar a.btn.fancyLeadForm.clickEventAttached {
    margin: 0 !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    background: #FF0000 !important;
    border: 0 !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.30);
    transition: background-color .15s, transform .15s, box-shadow .15s;
    white-space: nowrap;
}
body #requestBar a.btn.fancyLeadForm:hover,
body #requestBar a.btn.fancyLeadForm.clickEventAttached:hover {
    background: #cc0000 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 0, 0, 0.35);
}

@media (max-width: 480px) {
    body #requestBar { padding: 8px 8px 8px 14px !important; }
    body #requestBar #req,
    body #requestBar p.cookie_counter { font-size: 13px !important; gap: 6px; }
    body #requestBar > span { gap: 10px; }
    body #requestBar a.btn.fancyLeadForm,
    body #requestBar a.btn.fancyLeadForm.clickEventAttached { padding: 8px 14px !important; font-size: 12.5px !important; }
}

/* =====================================================================
   Header "Category" mega-menu — "Browse by Industry"
   Restyle the industries list to an icon-led layout (muted slate links
   with an amber arrow-in-square marker + thin row dividers), à la the
   reference design. Scoped to the Superfish vertical menu that ONLY the
   Category dropdown uses (other header dropdowns don't carry .sf-vertical),
   so it covers both the desktop and mobile Category panels.
   ===================================================================== */
.e-n-menu-content .sf-menu.sf-vertical > li { break-inside: avoid; }
.e-n-menu-content .sf-menu.sf-vertical > li > a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 6px 9px 2px;
    color: #475569 !important;
    font-weight: 500;
    line-height: 1.35;
    border-bottom: 1px solid #eef0f5;
    transition: color .15s ease;
}
/* Amber arrow-in-rounded-square marker before each industry name. */
.e-n-menu-content .sf-menu.sf-vertical > li > a::before {
    content: "\2192"; /* → */
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border: 1.5px solid #FF0000;
    border-radius: 7px;
    color: #FF0000;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}
.e-n-menu-content .sf-menu.sf-vertical > li > a:hover {
    color: #0e1a2b !important;
}
.e-n-menu-content .sf-menu.sf-vertical > li > a:hover::before {
    background: #FF0000;
    color: #fff;
}
/* Names-only in the dropdown, like the reference — hide the (NN) counts. */
.e-n-menu-content .sf-menu.sf-vertical .cat-count { display: none; }

/* "View All Industries" button (bottom of the Category dropdown) — match the
   red "Add to Request List" button: red bg, white text, hover + active press. */
.e-n-menu-content .elementor-button-wrapper .elementor-button,
.e-n-menu-content .elementor-button {
    background-color: #FF0000 !important;
    background-image: none !important;
    color: #fff !important;
    fill: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.28);
    transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.e-n-menu-content .elementor-button:hover,
.e-n-menu-content .elementor-button:focus {
    background-color: #cc0000 !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.34);
}
.e-n-menu-content .elementor-button:active {
    background-color: #b30000 !important;
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(255, 0, 0, 0.30);
}

/* The other header dropdowns (Popular Searches / Investment Level / Location /
   Resources) use Elementor icon-lists — give them the SAME look as the
   Category dropdown: muted slate links + a red arrow-in-square marker + thin
   row dividers. Hide the stock Elementor icon, add our arrow via ::before. */
.e-n-menu-content .elementor-icon-list-items {
    margin: 0;
    padding: 0;
}
.e-n-menu-content .elementor-icon-list-item {
    border-bottom: 1px solid #eef0f5;
    margin: 0 !important;
    padding: 0 !important;
}
.e-n-menu-content .elementor-icon-list-item > a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 5px 6px 5px 2px;
    color: #475569 !important;
}
.e-n-menu-content .elementor-icon-list-item .elementor-icon-list-icon {
    display: none !important;
}
.e-n-menu-content .elementor-icon-list-item > a::before {
    content: "\2192"; /* → */
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border: 1.5px solid #FF0000;
    border-radius: 7px;
    color: #FF0000;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}
.e-n-menu-content .elementor-icon-list-item > a:hover {
    color: #0e1a2b !important;
}
.e-n-menu-content .elementor-icon-list-item > a:hover::before {
    background: #FF0000;
    color: #fff;
}
.e-n-menu-content .elementor-icon-list-item .elementor-icon-list-text {
    color: inherit !important;
    font-weight: 500;
}

/* ============================================================
   Latest Franchise News — /news/ page + prnews grid
   (template-parts/news-card.php, templates/page-news.php)
   ============================================================ */
.fmf-news-body { padding: 38px 0 60px; }
/* Breathing room below the pagination before the footer's Featured Franchises band. */
.fmf-news-page .fmf-archive-pagination { margin-top: 30px; }
.fmf-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
}
.fmf-news-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #eef0f5;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(31, 23, 71, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fmf-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(31, 23, 71, 0.12);
}
.fmf-news-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    background: #0f1b2d;
    position: relative;
    overflow: hidden;
}
.fmf-news-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.fmf-news-card:hover .fmf-news-card__media img { transform: scale(1.04); }
.fmf-news-card__media--logo { background: #f4f6fa; }
.fmf-news-card__media--logo img { object-fit: contain; padding: 24px; }
.fmf-news-card__media--logo:hover img { transform: none; }
.fmf-news-card__media--none {
    background: linear-gradient(135deg, #008cd5 0%, #0f1b2d 100%);
}
.fmf-news-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.92);
    background: linear-gradient(135deg, #2A6FD0 0%, #033A8A 100%);
}
.fmf-news-card__placeholder i { font-size: 58px; line-height: 1; }
.fmf-news-card__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
}
.fmf-news-card__chip {
    align-self: flex-start;
    display: inline-block;
    font: 700 11px/1 "Poppins", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #FF0000;
    background: #fff0f0;
    border-radius: 999px;
    padding: 6px 12px;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.fmf-news-card__chip:hover { background: #FF0000; color: #ffffff; }
.fmf-news-card__title {
    margin: 0;
    font: 700 18px/1.3 "Poppins", sans-serif;
}
.fmf-news-card__title a { color: #1f1747; text-decoration: none; }
.fmf-news-card__title a:hover { color: #FF0000; }
.fmf-news-card__excerpt {
    margin: 0;
    color: #5b5b75;
    font-size: 14px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fmf-news-card__meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #f1f2f7;
}
/* Single-post sidebar: hide the "Business Franchise Magazine" promo image (Elementor
   element 743acd4) and the "Latest Posts" heading/button (1bd70e06) in the
   clone_single template (350008). Hidden via CSS to avoid editing Elementor JSON. */
.single-post .elementor-element-743acd4,   /* magazine promo image */
.single-post .elementor-element-1bd70e06,  /* sidebar "Latest Posts" heading */
.single-post .elementor-element-4617c1eb,  /* sidebar latest-posts list (stray "todd") */
.single-post .elementor-element-582b0ea5,  /* bottom "Related Articles" red heading */
.single-post .elementor-element-34796a5f,  /* bottom related posts widget (replaced below) */
.single-post .elementor-element-43663dd0 { /* duplicate Yoast breadcrumb (header one already shows at top) */
    display: none !important;
}
/* …and un-hide the header breadcrumb on blog posts (it was hidden because the single
   template used the Yoast one) so the top breadcrumb matches the category pages. */
.single-post .fmf-breadcrumb .breadcrumb-container { display: block !important; }

/* Keep the site header (and its Resources mega-menu dropdown) above sticky page
   content — e.g. the sticky "Contents" TOC on single articles, which is a positioned
   element and otherwise paints over the static header. Below modals (9999+). */
.fmf-site-header { position: relative; z-index: 999; }

/* News-style "Related Articles" injected after the article body (mu-plugins/fmf-article-related.php) */
.fmf-related { margin: 36px 0 8px; padding-top: 26px; border-top: 1px solid #e5e7eb; }
.fmf-related__title { font-size: 22px; color: #0f172a; margin: 0 0 18px; }
.fmf-related .fmf-news-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* Match the News card styling inside the article body (which otherwise restyles links blue/underlined) */
.fmf-related .fmf-news-card__title a,
.fmf-related .fmf-news-card__title a:link,
.fmf-related .fmf-news-card__title a:visited { color: #1f1747 !important; text-decoration: none !important; }
.fmf-related .fmf-news-card__title a:hover { color: #FF0000 !important; }
.fmf-related .fmf-news-card__more,
.fmf-related .fmf-news-card__more:link,
.fmf-related .fmf-news-card__more:visited,
.fmf-related .fmf-news-card__more:hover { color: #FF0000 !important; text-decoration: none !important; }

.fmf-news-card__meta--nodate { justify-content: flex-end; }

/* ---- Franchise Glossary (templates/page-glossary.php) ---- */
.fmf-glossary-body { max-width: 880px; margin: 0 auto; padding: 30px 20px 60px; }
.fmf-glossary-body #content-atoz {
    padding: 0; margin: 0 0 28px; background: transparent; border: 0;
}
.fmf-glossary-body #content-atoz ul {
    display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;
    background: transparent; border-radius: 0;
}
.fmf-glossary-body #content-atoz li { margin: 0; }
.fmf-glossary-body #content-atoz li a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 9px;
    border: 1px solid #e2e8f0; border-radius: 9px; background: #fff;
    color: #0f4c81; font-weight: 700; font-size: 15px; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.fmf-glossary-body #content-atoz li a:hover,
.fmf-glossary-body #content-atoz li a:focus,
.fmf-glossary-body #content-atoz li a:active {
    background: #FF0000 !important; color: #fff !important; border-color: #FF0000 !important;
}
.fmf-glossary-body .fmf-gloss-term {
    font-size: 19px; color: #0f172a; line-height: 1.3; font-weight: 700;
    margin: 26px 0 4px; padding-top: 10px; border-top: 1px solid #f1f2f7;
    scroll-margin-top: 100px;
}
.fmf-glossary-body .fmf-gloss-term:first-of-type { margin-top: 6px; padding-top: 0; border-top: 0; }
.fmf-glossary-body p { color: #475569; font-size: 16px; line-height: 1.7; margin: 0 0 6px; max-width: none; }
.fmf-news-card__date { color: #8a87a3; font-size: 12px; white-space: nowrap; }
.fmf-news-card__date i { color: #008cd5; margin-right: 5px; }
.fmf-news-card__more {
    color: #FF0000;
    font: 700 13px/1 "Poppins", sans-serif;
    text-decoration: none;
    white-space: nowrap;
}
.fmf-news-card__more:hover { text-decoration: underline; }
.fmf-news-card__more i { font-size: 11px; transition: transform 0.15s ease; }
.fmf-news-card:hover .fmf-news-card__more i { transform: translateX(3px); }
@media (max-width: 600px) {
    .fmf-news-grid { grid-template-columns: 1fr; }
}

/* Related Articles block at the bottom of a single news / case study / testimonial */
.fmf-related-news {
    margin-top: 44px;
    padding-top: 36px;
    border-top: 1px solid #eef0f5;
}
.fmf-related-news__title {
    margin: 0 0 22px;
    padding-left: 14px;
    border-left: 5px solid #FF0000;
    font: 800 24px/1.2 "Poppins", sans-serif;
    color: #1f1747;
}

/* "View more news stories" CTA at the bottom of a single article */
.fmf-news-more {
    margin-top: 36px;
    text-align: center;
}
.fmf-news-more__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #FF0000;
    color: #ffffff !important;
    font: 700 15px/1 "Poppins", sans-serif;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 999px;
    transition: background 0.15s ease, transform 0.05s ease;
}
.fmf-news-more__btn:hover { background: #d40000; color: #ffffff !important; transform: translateY(-1px); }
.fmf-news-more__btn i { font-size: 12px; transition: transform 0.15s ease; }
.fmf-news-more__btn:hover i { transform: translateX(3px); }

/* News category nav (chips) on /news/ and /news/<category>/ */
.fmf-news-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 24px 0 2px;
}
.fmf-news-cats__chip {
    display: inline-block;
    font: 600 13px/1 "Poppins", sans-serif;
    color: #1f1747;
    background: #f1f5f9;
    border: 1px solid #e3e8f0;
    border-radius: 999px;
    padding: 8px 14px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fmf-news-cats__chip:hover { background: #fff0f0; color: #FF0000; border-color: #FF0000; }
.fmf-news-cats__chip.is-active { background: #FF0000; color: #ffffff; border-color: #FF0000; }

/* Table of Contents (Easy TOC) — match link colour to the body H2 navy (#044AAE).
   The TOC box uses id="ez-toc-container" (NOT a class), so the ID selector
   (specificity 1,0,1) beats the per-post Elementor rule
   `.post-template-default .post_content a { color: blue !important }` (post-350008.css). */
#ez-toc-container a,
#ez-toc-container a:visited,
#ez-toc-container a:focus,
.ez-toc-widget-container a,
.ez-toc-widget-container a:visited { color: #044AAE !important; }
#ez-toc-container a:hover,
.ez-toc-widget-container a:hover { color: #FF0000 !important; } /* brand-red rollover, consistent with the rest of the site */

/* Header top-right icon cluster (search / request-list clipboard / My Account) — slightly larger.
   Base sizes were 18 / 20 / 22px. */
[data-elementor-type="header"] .fa-search { font-size: 22px !important; }
[data-elementor-type="header"] .fa-clipboard-list { font-size: 24px !important; }
.fmf-account-trigger-icon { font-size: 26px !important; }

/* Single-post breadcrumb — left-align with the main content column.
   The article uses an Elementor container (max-width 1140 + 10px column inset →
   text at the content edge); the header breadcrumb used the wider 1240
   fmf-container, so it sat ~23px too far left. Match it to the content column. */
.single-post .fmf-breadcrumb .fmf-container { max-width: 1140px; padding-left: 10px; padding-right: 10px; }
/* Shift left so the first chevron's block edge lines up with the content column
   (270px) and its text (chevron has 10px inset) lines up with the article text
   (280px). -24 = the 14px first-item lead margin + the chevron's 10px padding. */
.single-post .fmf-breadcrumb .breadcrumb-container { margin-left: -24px; padding-left: 0; }

/* A little more breathing room between the header action icons
   (search / request-list clipboard / My Account). The search + clipboard icon
   widgets are flex children of container a6f020f; widen its gap, and nudge the
   separate account menu wrap. */
[data-elementor-type="header"] .elementor-element-a6f020f { gap: 34px; }
.fmf-account-menu-wrap { margin-left: 10px; }