@charset "UTF-8";

/**
 * Mandola Vihar — theme stylesheet
 * ============================================================================
 *
 * Built by Bakhoobi Services Private Limited
 * https://bakhoobiservices.com  |  online@bakhoobiservices.com
 * Copyright 2026 Bakhoobi Services Private Limited. Licensed GPL-2.0-or-later.
 *
 * CSS namespace: every class and custom property in this theme is
 * prefixed bspl_mv_ so nothing can collide with Bootstrap, WordPress core
 * or a plugin stylesheet.
 *
 * HOW THIS FILE IS ORGANISED
 *
 *   1.  Design tokens          Every colour, font and size, named once
 *   2.  Bootstrap overrides    Retheme Bootstrap via its own variables
 *   3.  Base & typography      Element defaults
 *   4.  Accessibility          Skip link, focus rings, reduced motion
 *   5.  Buttons & chips        Shared small components
 *   6.  Utility bar & masthead Site header
 *   7.  Hero
 *   8.  Sections               Headings, eyebrows, notes
 *   9.  Cards
 *   10. Tables                 The rate tables
 *   11. Features & panels
 *   12. Listings               Breadcrumb, pagination, empty state
 *   13. Single post & prose    Block editor output
 *   14. Sidebar & widgets
 *   15. Enquiry
 *   16. Footer
 *   17. Floating WhatsApp
 *   18. Print
 *   20. Comments            WordPress-emitted classes
 *
 * MOBILE FIRST
 *
 * Every rule outside a media query describes the PHONE layout. Larger screens
 * are handled only by `min-width` queries, matching Bootstrap's own
 * breakpoints:
 *
 *   sm 576px   md 768px   lg 992px   xl 1200px   xxl 1400px
 *
 * There is not a single `max-width` query in this file. That is deliberate:
 * mixing the two directions is how a stylesheet becomes impossible to reason
 * about, because a rule's effect then depends on where it sits in the file.
 *
 * NO INLINE STYLES
 *
 * Nothing in this theme's PHP emits a `style` attribute. Everything visual is
 * here, which means one place to look, and a Content-Security-Policy without
 * `unsafe-inline` remains possible.
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
    /* --- Colour ----------------------------------------------------------
     * A survey-sheet palette: institutional green as the primary, ochre and
     * a document red for status, on a cool paper ground. Chosen to read as
     * credible next to a government notice rather than as a sales brochure.
     */
    --bspl_mv_paper: #f2f3ef;
    --bspl_mv_surface: #ffffff;
    --bspl_mv_wash: #edefe9;
    --bspl_mv_wash-strong: #e3e5dd;

    --bspl_mv_ink: #0f1512;
    --bspl_mv_ink-soft: #39433d;
    --bspl_mv_muted: #6e7872;
    --bspl_mv_line: #d3d7cf;
    --bspl_mv_line-soft: #e6e8e1;

    --bspl_mv_green: #12574a;
    --bspl_mv_green-dark: #0c3d34;
    --bspl_mv_green-tint: #e3efea;
    --bspl_mv_green-line: #b7d3ca;
    --bspl_mv_green-onDark: #9db3ab;

    --bspl_mv_gold: #c9a227;
    --bspl_mv_gold-ink: #14200e;

    --bspl_mv_seal: #8b2b24;
    --bspl_mv_seal-tint: #f7eae8;
    --bspl_mv_seal-line: #d8b4b0;

    --bspl_mv_ochre: #8a6420;
    --bspl_mv_ochre-tint: #f3eddf;
    --bspl_mv_ochre-line: #dfcb9e;

    /* --- Type ------------------------------------------------------------
     * Three families, each doing one job:
     *   display — Tiro Devanagari Hindi, a serif with real Devanagari
     *   body    — Hind, Latin + Devanagari, by the Indian Type Foundry
     *   mono    — IBM Plex Mono, for figures that must line up in columns
     *
     * Both text families cover Devanagari, which matters: this site publishes
     * in Hindi as well as English.
     */
    --bspl_mv_font-display: "Tiro Devanagari Hindi", Georgia, "Times New Roman", serif;
    --bspl_mv_font-body: "Hind", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --bspl_mv_font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* --- Type scale ------------------------------------------------------
     * clamp() interpolates between a phone size and a desktop size against
     * the viewport, so headings scale smoothly instead of jumping at each
     * breakpoint. Minimums are chosen to stay readable on a 360px screen.
     */
    --bspl_mv_text-xs: 0.8125rem;    /* 13px — meta, captions */
    --bspl_mv_text-sm: 0.875rem;     /* 14px — secondary text */
    --bspl_mv_text-base: 1rem;       /* 16px — body */
    --bspl_mv_text-lg: 1.0625rem;    /* 17px — intro paragraphs */
    --bspl_mv_text-xl: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
    --bspl_mv_h3: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
    --bspl_mv_h2: clamp(1.5rem, 1.25rem + 1.4vw, 1.875rem);
    --bspl_mv_h1: clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem);
    --bspl_mv_hero: clamp(2rem, 1.35rem + 3.2vw, 3.375rem);

    /* --- Spacing ---------------------------------------------------------
     * A 4px-derived scale. Section padding is fluid so vertical rhythm
     * tightens on a phone without a separate breakpoint rule.
     */
    --bspl_mv_space-1: 0.25rem;
    --bspl_mv_space-2: 0.5rem;
    --bspl_mv_space-3: 0.75rem;
    --bspl_mv_space-4: 1rem;
    --bspl_mv_space-5: 1.5rem;
    --bspl_mv_space-6: 2rem;
    --bspl_mv_space-7: 3rem;
    --bspl_mv_section-y: clamp(2.5rem, 1.5rem + 4vw, 3.75rem);

    /* --- Shape -----------------------------------------------------------
     * Small radii throughout. A document-like design loses its authority
     * with heavily rounded corners.
     */
    --bspl_mv_radius: 4px;
    --bspl_mv_radius-sm: 3px;

    /* --- Measure ---------------------------------------------------------
     * Maximum line length for running text. Beyond roughly 70 characters the
     * eye loses the start of the next line.
     */
    --bspl_mv_measure: 68ch;

    /* --- Motion ---------------------------------------------------------- */
    --bspl_mv_transition: 160ms ease;
}

/* ==========================================================================
   2. Bootstrap overrides
   --------------------------------------------------------------------------
   Bootstrap 5.3 exposes its theme through CSS custom properties. Redefining
   those is far better than writing higher-specificity rules to fight it:
   every Bootstrap component picks these up automatically, so a button, a
   pill and a form control all become "ours" without being restyled one by one.
   ========================================================================== */

:root {
    --bs-primary: var(--bspl_mv_green);
    --bs-primary-rgb: 18, 87, 74;
    --bs-link-color: var(--bspl_mv_green);
    --bs-link-color-rgb: 18, 87, 74;
    --bs-link-hover-color: var(--bspl_mv_green-dark);

    --bs-body-bg: var(--bspl_mv_paper);
    --bs-body-color: var(--bspl_mv_ink-soft);
    --bs-body-font-family: var(--bspl_mv_font-body);
    --bs-body-font-size: var(--bspl_mv_text-base);
    --bs-body-line-height: 1.62;

    --bs-border-color: var(--bspl_mv_line);
    --bs-border-radius: var(--bspl_mv_radius);
    --bs-border-radius-sm: var(--bspl_mv_radius-sm);

    --bs-emphasis-color: var(--bspl_mv_ink);
    --bs-secondary-color: var(--bspl_mv_muted);

    --bs-font-monospace: var(--bspl_mv_font-mono);

    /* Bootstrap's default focus ring is Bootstrap-blue; make it ours. */
    --bs-focus-ring-color: rgba(18, 87, 74, 0.28);
    --bs-focus-ring-width: 3px;
}

/* ==========================================================================
   3. Base & typography
   ========================================================================== */

body {
    background-color: var(--bspl_mv_paper);
    color: var(--bspl_mv_ink-soft);
    font-family: var(--bspl_mv_font-body);
    font-size: var(--bspl_mv_text-base);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Stops iOS Safari inflating text in landscape, which breaks the
       carefully sized rate tables. */
    text-size-adjust: 100%;
}

h1,
h2,
h3,
h4 {
    color: var(--bspl_mv_ink);
    font-family: var(--bspl_mv_font-display);
    font-weight: 400;
    line-height: 1.2;

    /* Evens out ragged headline wrapping. Ignored by browsers that lack it,
       so it is a free improvement. */
    text-wrap: balance;
}

h5,
h6 {
    color: var(--bspl_mv_ink);
    font-family: var(--bspl_mv_font-body);
    font-weight: 600;
}

strong,
b {
    color: var(--bspl_mv_ink);
    font-weight: 600;
}

a {
    color: var(--bspl_mv_green);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--bspl_mv_green-dark);
}

img {
    max-width: 100%;
    height: auto;
}

/* Text selection in the brand green rather than the OS default blue. */
::selection {
    background-color: var(--bspl_mv_green-tint);
    color: var(--bspl_mv_ink);
}

/* ==========================================================================
   4. Accessibility
   ========================================================================== */

/**
 * Skip link.
 *
 * Off-screen until focused, then pinned to the top-left. The first thing a
 * keyboard user reaches, letting them jump past the navigation. WCAG 2.4.1.
 */
.bspl_mv_skip-link {
    position: absolute;
    top: -100px;
    left: var(--bspl_mv_space-4);
    z-index: 2000;
    padding: var(--bspl_mv_space-3) var(--bspl_mv_space-4);
    background-color: var(--bspl_mv_green);
    color: #ffffff;
    font-weight: 600;
    border-radius: 0 0 var(--bspl_mv_radius) var(--bspl_mv_radius);
    transition: top var(--bspl_mv_transition);
}

.bspl_mv_skip-link:focus {
    top: 0;
    color: #ffffff;
}

/**
 * Visually hidden, still announced.
 *
 * NOT prefixed, because this class is not ours to name. WordPress emits it
 * from core: `the_posts_pagination()` wraps its `screen_reader_text` argument
 * in an <h2 class="screen-reader-text">, and so do comment navigation and the
 * default search form.
 *
 * Until this rule existed the theme passed that argument from five templates
 * and had no rule for the class, so every one of those headings rendered
 * visibly: "Updates navigation" in <h2> type above the pager on /updates/,
 * and the same on search results, archives and any post with paged comments.
 * Not on the front page, which is a static page and never paginates.
 *
 * The argument looks like it hides the text. It does not — it only supplies
 * it, and hiding it is the theme's job.
 *
 * The clip-path/1px pattern rather than `display: none` or `visibility:
 * hidden`, because both of those remove the element from the accessibility
 * tree as well as from view, which defeats the entire purpose.
 */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
    word-wrap: normal;
}

/*
 * A skip link is the one case where this class must become visible again: it
 * is hidden until a keyboard user focuses it, and a permanently hidden skip
 * link helps nobody.
 */
.screen-reader-text:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
}

/**
 * Focus ring.
 *
 * `:focus-visible` rather than `:focus`, so a mouse click does not leave a
 * ring behind but keyboard navigation always shows one. Never remove this
 * without replacing it — an invisible focus state makes a site unusable
 * without a mouse.
 */
:focus-visible {
    outline: 3px solid var(--bspl_mv_green);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Honour the operating system's reduced-motion setting. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   5. Buttons & chips
   ========================================================================== */

.bspl_mv_btn-primary,
.bspl_mv_btn-outline,
.bspl_mv_btn-gold,
.bspl_mv_btn-onDark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bspl_mv_space-2);
    padding: 0.8rem 1.35rem;
    border-radius: var(--bspl_mv_radius-sm);
    font-size: var(--bspl_mv_text-base);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color var(--bspl_mv_transition), color var(--bspl_mv_transition),
        border-color var(--bspl_mv_transition);

    /* 44px minimum touch target — the padding above plus this floor keeps
       every button thumb-sized on a phone. WCAG 2.5.8. */
    min-height: 44px;
}

.bspl_mv_btn-primary {
    background-color: var(--bspl_mv_green);
    border: 1px solid var(--bspl_mv_green);
    color: #ffffff;
}

.bspl_mv_btn-primary:hover,
.bspl_mv_btn-primary:focus {
    background-color: var(--bspl_mv_green-dark);
    border-color: var(--bspl_mv_green-dark);
    color: #ffffff;
}

.bspl_mv_btn-outline {
    background-color: transparent;
    border: 1px solid var(--bspl_mv_green);
    color: var(--bspl_mv_green);
}

.bspl_mv_btn-outline:hover,
.bspl_mv_btn-outline:focus {
    background-color: var(--bspl_mv_green-tint);
    color: var(--bspl_mv_green-dark);
}

.bspl_mv_btn-gold {
    background-color: var(--bspl_mv_gold);
    border: 1px solid var(--bspl_mv_gold);
    color: var(--bspl_mv_gold-ink);
}

.bspl_mv_btn-gold:hover,
.bspl_mv_btn-gold:focus {
    background-color: #b8931f;
    color: var(--bspl_mv_gold-ink);
}

.bspl_mv_btn-onDark {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.bspl_mv_btn-onDark:hover,
.bspl_mv_btn-onDark:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/**
 * Chip — a category or tag label.
 */
.bspl_mv_chip {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background-color: var(--bspl_mv_green-tint);
    border: 1px solid var(--bspl_mv_green-line);
    border-radius: var(--bspl_mv_radius-sm);
    color: var(--bspl_mv_green);
    font-family: var(--bspl_mv_font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}

.bspl_mv_chip:hover {
    background-color: var(--bspl_mv_green-line);
    color: var(--bspl_mv_green-dark);
}

/**
 * Status pill — availability, project stage.
 *
 * Colour is never the only signal: each variant also carries distinct text,
 * so the meaning survives for a colour-blind reader. WCAG 1.4.1.
 */
.bspl_mv_status {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: var(--bspl_mv_radius-sm);
    font-size: var(--bspl_mv_text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.bspl_mv_status--open {
    background-color: var(--bspl_mv_green-tint);
    border: 1px solid var(--bspl_mv_green-line);
    color: var(--bspl_mv_green);
}

.bspl_mv_status--waitlist {
    background-color: var(--bspl_mv_wash);
    border: 1px solid var(--bspl_mv_line);
    color: var(--bspl_mv_muted);
}

/**
 * Eyebrow — the small uppercase label above a heading.
 */
.bspl_mv_eyebrow {
    margin: 0;
    color: var(--bspl_mv_muted);
    font-family: var(--bspl_mv_font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ==========================================================================
   6. Utility bar & masthead
   ========================================================================== */

.bspl_mv_utility {
    background-color: var(--bspl_mv_green-dark);
    color: var(--bspl_mv_green-onDark);
    font-size: var(--bspl_mv_text-xs);
}

.bspl_mv_utility__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bspl_mv_space-5);
    padding-block: 0.55rem;
}

.bspl_mv_utility__place {
    display: flex;
    align-items: center;
    gap: var(--bspl_mv_space-2);
    margin: 0;
}

.bspl_mv_utility__badge {
    padding: 0.15rem 0.5rem;
    background-color: var(--bspl_mv_green);
    border-radius: 2px;
    color: #eaf0ed;
    font-family: var(--bspl_mv_font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.bspl_mv_utility__actions {
    display: flex;
    align-items: center;
    gap: var(--bspl_mv_space-5);
}

.bspl_mv_utility__link {
    display: inline-flex;
    align-items: center;
    gap: var(--bspl_mv_space-2);
    color: var(--bspl_mv_green-onDark);
    text-decoration: none;
}

.bspl_mv_utility__link:hover {
    color: #ffffff;
}

.bspl_mv_utility__menu {
    display: flex;
    gap: var(--bspl_mv_space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bspl_mv_utility__menu a {
    color: var(--bspl_mv_green-onDark);
    text-decoration: none;
}

.bspl_mv_utility__menu a:hover {
    color: #ffffff;
}

/* --- Masthead ----------------------------------------------------------- */

.bspl_mv_masthead {
    background-color: var(--bspl_mv_paper);
    border-bottom: 1px solid var(--bspl_mv_line);
}

.bspl_mv_navbar {
    --bs-navbar-padding-y: 0.85rem;
}

.bspl_mv_brand {
    display: flex;
    align-items: center;
    gap: var(--bspl_mv_space-3);
    text-decoration: none;
}

.bspl_mv_brand__mark {
    display: block;
    color: var(--bspl_mv_green);
    line-height: 0;
}

/* The uploaded custom logo, when one is set. */
.bspl_mv_brand .custom-logo {
    width: auto;
    height: 42px;
}

.bspl_mv_brand__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bspl_mv_brand__name {
    color: var(--bspl_mv_ink);
    font-family: var(--bspl_mv_font-display);

    /* Smaller on a phone so a long site name does not force the toggle
       button onto a second line. */
    font-size: 1.125rem;
    line-height: 1.1;
}

.bspl_mv_brand__tagline {
    color: var(--bspl_mv_muted);
    font-family: var(--bspl_mv_font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    /* Hidden on the narrowest screens: the brand name alone identifies the
       site, and the tagline is what pushes the header to two lines. */
    display: none;
}

.bspl_mv_navbar__toggle {
    padding: var(--bspl_mv_space-2);
    border: 1px solid var(--bspl_mv_line);
    border-radius: var(--bspl_mv_radius-sm);
    color: var(--bspl_mv_ink);

    /* 44px touch target. */
    min-width: 44px;
    min-height: 44px;
}

.bspl_mv_navbar__toggle:focus {
    box-shadow: none;
}

/* --- Navigation --------------------------------------------------------- */

.bspl_mv_nav {
    gap: var(--bspl_mv_space-1);
}

.bspl_mv_nav .nav-link {
    padding: 0.7rem 0;
    color: var(--bspl_mv_ink-soft);
    font-size: var(--bspl_mv_text-base);
    font-weight: 500;
}

.bspl_mv_nav .nav-link:hover,
.bspl_mv_nav .nav-link:focus {
    color: var(--bspl_mv_green);
}

.bspl_mv_nav .nav-link.active {
    color: var(--bspl_mv_ink);
    font-weight: 600;
}

.bspl_mv_nav .dropdown-menu {
    --bs-dropdown-border-color: var(--bspl_mv_line);
    --bs-dropdown-border-radius: var(--bspl_mv_radius);
    --bs-dropdown-link-color: var(--bspl_mv_ink-soft);
    --bs-dropdown-link-hover-bg: var(--bspl_mv_green-tint);
    --bs-dropdown-link-hover-color: var(--bspl_mv_green-dark);
    --bs-dropdown-link-active-bg: var(--bspl_mv_green-tint);
    --bs-dropdown-link-active-color: var(--bspl_mv_green-dark);
    --bs-dropdown-font-size: var(--bspl_mv_text-sm);
}

/* --- Offcanvas drawer (below lg) ---------------------------------------- */

.bspl_mv_offcanvas {
    --bs-offcanvas-width: min(320px, 86vw);
    background-color: var(--bspl_mv_paper);
}

.bspl_mv_offcanvas__header {
    border-bottom: 1px solid var(--bspl_mv_line);
}

.bspl_mv_offcanvas__title {
    font-family: var(--bspl_mv_font-display);
    font-size: 1.125rem;
}

.bspl_mv_offcanvas__body {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-5);
}

.bspl_mv_offcanvas__actions {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-3);
    padding-top: var(--bspl_mv_space-4);
    border-top: 1px solid var(--bspl_mv_line);

    /* Pushed to the bottom of the drawer, where a thumb naturally rests. */
    margin-top: auto;
}

/* ==========================================================================
   7. Hero
   ========================================================================== */

.bspl_mv_hero {
    position: relative;
    padding-block: var(--bspl_mv_section-y);
    border-bottom: 1px solid var(--bspl_mv_line);

    /* The survey-grid ground: two repeating gradients crossing at 40px, so
       the hero reads as a plot layout without needing an image file. */
    background-color: var(--bspl_mv_wash);
    background-image:
        repeating-linear-gradient(0deg, transparent 0 39px, #dde1d9 39px 40px),
        repeating-linear-gradient(90deg, transparent 0 39px, #dde1d9 39px 40px);
}

/* When a background image is set, the grid is replaced by the photograph. */
.bspl_mv_hero--has-image {
    background-image: none;
}

.bspl_mv_hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.bspl_mv_hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Scrim over the photograph so white text stays legible whatever the image.
   Without this the hero copy fails contrast on a light photo. */
.bspl_mv_hero--has-image .bspl_mv_hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(12, 61, 52, 0.94) 0%,
        rgba(12, 61, 52, 0.82) 45%,
        rgba(12, 61, 52, 0.5) 100%
    );
}

.bspl_mv_hero .container {
    position: relative;
    z-index: 1;
}

.bspl_mv_hero__grid {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-6);
}

.bspl_mv_hero__body {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-4);
}

.bspl_mv_hero__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bspl_mv_space-2);
    margin: 0;
}

.bspl_mv_hero__badge {
    padding: 0.25rem 0.55rem;
    background-color: var(--bspl_mv_seal-tint);
    border: 1px solid var(--bspl_mv_seal-line);
    border-radius: 2px;
    color: var(--bspl_mv_seal);
    font-family: var(--bspl_mv_font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.bspl_mv_hero__authority {
    color: var(--bspl_mv_muted);
    font-family: var(--bspl_mv_font-mono);
    font-size: var(--bspl_mv_text-xs);
}

.bspl_mv_hero__heading {
    margin: 0;
    font-size: var(--bspl_mv_hero);
    letter-spacing: -0.005em;
    line-height: 1.14;
}

.bspl_mv_hero__text {
    max-width: 56ch;
    color: var(--bspl_mv_ink-soft);
    font-size: var(--bspl_mv_text-lg);
}

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

.bspl_mv_hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-3);
}

.bspl_mv_hero__trust {
    display: flex;
    align-items: flex-start;
    gap: var(--bspl_mv_space-2);
    margin: 0;
    color: var(--bspl_mv_muted);
    font-size: var(--bspl_mv_text-sm);
}

.bspl_mv_hero__trust svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: var(--bspl_mv_ochre);
}

/* Text colours flip when the hero sits on a dark photo scrim. */
.bspl_mv_hero--has-image .bspl_mv_hero__heading {
    color: #ffffff;
}

.bspl_mv_hero--has-image .bspl_mv_hero__text,
.bspl_mv_hero--has-image .bspl_mv_hero__trust {
    color: #d6e2dd;
}

.bspl_mv_hero--has-image .bspl_mv_hero__authority {
    color: #a9c0b8;
}

.bspl_mv_hero--has-image .bspl_mv_btn-outline {
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
}

.bspl_mv_hero--has-image .bspl_mv_btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/* --- Facts panel -------------------------------------------------------- */

.bspl_mv_hero__panel {
    background-color: var(--bspl_mv_surface);
    border: 1px solid var(--bspl_mv_line);
    border-radius: var(--bspl_mv_radius);
    overflow: hidden;
}

.bspl_mv_panel__header {
    padding: var(--bspl_mv_space-4) var(--bspl_mv_space-5);
    border-bottom: 1px solid var(--bspl_mv_line-soft);
}

.bspl_mv_panel__title {
    margin: 0;
    color: var(--bspl_mv_muted);
    font-family: var(--bspl_mv_font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.bspl_mv_panel__list {
    margin: 0;
}

.bspl_mv_panel__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bspl_mv_space-4);
    padding: 0.8rem var(--bspl_mv_space-5);
    border-bottom: 1px solid var(--bspl_mv_line-soft);
}

.bspl_mv_panel__row:last-child {
    border-bottom: 0;
}

.bspl_mv_panel__row dt {
    color: var(--bspl_mv_ink-soft);
    font-size: var(--bspl_mv_text-sm);
    font-weight: 400;
}

.bspl_mv_panel__row dd {
    margin: 0;
    color: var(--bspl_mv_ink);
    font-size: var(--bspl_mv_text-sm);
    font-weight: 600;
    text-align: right;
}

/**
 * Placeholder value.
 *
 * Deliberately conspicuous. These mark facts we do not have — an acreage, a
 * distance, a rate. Publishing an invented figure for a government plot
 * scheme would be worse than an obvious gap, so they are styled to be
 * noticed and replaced, never to blend in.
 */
.bspl_mv_panel__placeholder,
.bspl_mv_table__placeholder {
    color: var(--bspl_mv_seal);
    font-family: var(--bspl_mv_font-mono);
    font-weight: 500;
}

.bspl_mv_panel__note {
    display: flex;
    align-items: flex-start;
    gap: var(--bspl_mv_space-2);
    margin: 0;
    padding: var(--bspl_mv_space-4) var(--bspl_mv_space-5);
    background-color: #f7f8f5;
    border-top: 1px solid var(--bspl_mv_line-soft);
    color: var(--bspl_mv_muted);
    font-size: var(--bspl_mv_text-xs);
}

.bspl_mv_panel__note svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* ==========================================================================
   8. Sections
   ========================================================================== */

.bspl_mv_main {
    /* Removes the focus ring the skip link would otherwise draw around the
       whole page. The ring belongs on the link, not its target. */
    outline: none;
}

.bspl_mv_section {
    padding-block: var(--bspl_mv_section-y);
}

.bspl_mv_section__head {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-3);
    padding-bottom: var(--bspl_mv_space-4);
    margin-bottom: var(--bspl_mv_space-5);

    /* The heavy rule under a section heading is the document-like device
       that ties this design to land-record notices. */
    border-bottom: 2px solid var(--bspl_mv_ink);
}

.bspl_mv_section__titles {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-1);
}

.bspl_mv_section__title {
    margin: 0;
    font-size: var(--bspl_mv_h2);
}

.bspl_mv_section__link {
    display: inline-flex;
    align-items: center;
    gap: var(--bspl_mv_space-2);
    color: var(--bspl_mv_green);
    font-size: var(--bspl_mv_text-sm);
    font-weight: 600;
    text-decoration: none;
}

.bspl_mv_note {
    display: flex;
    align-items: flex-start;
    gap: var(--bspl_mv_space-2);
    margin: var(--bspl_mv_space-4) 0 0;
    color: var(--bspl_mv_muted);
    font-size: var(--bspl_mv_text-xs);
}

.bspl_mv_note svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--bspl_mv_seal);
}

/* ==========================================================================
   9. Cards
   ========================================================================== */

.bspl_mv_card {
    display: flex;
    flex-direction: column;
    background-color: var(--bspl_mv_surface);
    border: 1px solid var(--bspl_mv_line);
    border-radius: var(--bspl_mv_radius);
    overflow: hidden;
    transition: border-color var(--bspl_mv_transition), transform var(--bspl_mv_transition);
}

.bspl_mv_card:hover {
    border-color: var(--bspl_mv_green-line);
}

.bspl_mv_card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--bspl_mv_wash);
}

.bspl_mv_card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bspl_mv_card__body {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-3);
    padding: var(--bspl_mv_space-5);

    /* As above: without this a long unbroken word in a title or excerpt
       widens the card and breaks the grid alignment. */
    min-width: 0;
    overflow-wrap: break-word;

    /* Fills the card so the "read update" line sits at the bottom whatever
       the excerpt length, keeping a grid of cards aligned. */
    flex-grow: 1;
}

.bspl_mv_card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bspl_mv_space-2);
}

.bspl_mv_meta__date {
    color: var(--bspl_mv_muted);
    font-family: var(--bspl_mv_font-mono);
    font-size: var(--bspl_mv_text-xs);
}

.bspl_mv_card__title {
    margin: 0;
    font-size: var(--bspl_mv_h3);
    line-height: 1.34;
}

.bspl_mv_card__title a {
    color: var(--bspl_mv_ink);
    text-decoration: none;
}

.bspl_mv_card__title a:hover {
    color: var(--bspl_mv_green);
}

.bspl_mv_card__excerpt {
    margin: 0;
    color: var(--bspl_mv_ink-soft);
    font-size: var(--bspl_mv_text-sm);
}

.bspl_mv_card__more {
    display: flex;
    align-items: center;
    gap: var(--bspl_mv_space-2);
    margin: 0;
    margin-top: auto;
    padding-top: var(--bspl_mv_space-2);
    color: var(--bspl_mv_green);
    font-size: var(--bspl_mv_text-sm);
    font-weight: 600;
}

/* ==========================================================================
   10. Tables
   --------------------------------------------------------------------------
   The most important component on the site. Rate and auction data is what
   buyers arrive for, and it is the hardest thing to render on a phone.
   ========================================================================== */

/**
 * Scroll container.
 *
 * The table scrolls INSIDE this box; the page body never scrolls sideways.
 * `tabindex="0"` in the markup makes it reachable by keyboard — a scrollable
 * region with no focusable content cannot be scrolled without a mouse.
 */
.bspl_mv_table-scroll {
    overflow-x: auto;
    background-color: var(--bspl_mv_surface);
    border: 1px solid var(--bspl_mv_line);
    border-radius: var(--bspl_mv_radius);

    /* Momentum scrolling on iOS. */
    -webkit-overflow-scrolling: touch;
}

.bspl_mv_table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;

    /* Below this the columns crush together and the figures stop being
       comparable; the container scrolls instead. */
    min-width: 560px;
}

.bspl_mv_table th,
.bspl_mv_table td {
    padding: 0.7rem var(--bspl_mv_space-4);
    border-bottom: 1px solid var(--bspl_mv_line-soft);
    text-align: left;
    vertical-align: middle;
}

.bspl_mv_table thead th {
    background-color: var(--bspl_mv_wash);
    border-bottom: 1px solid var(--bspl_mv_line);
    color: var(--bspl_mv_muted);
    font-family: var(--bspl_mv_font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.bspl_mv_table tbody tr:last-child th,
.bspl_mv_table tbody tr:last-child td {
    border-bottom: 0;
}

.bspl_mv_table tbody tr:nth-child(even) {
    background-color: #fafbf8;
}

.bspl_mv_table__sector {
    color: var(--bspl_mv_ink);
    font-family: var(--bspl_mv_font-body);
    font-size: var(--bspl_mv_text-sm);
    font-weight: 600;
    white-space: nowrap;
}

/**
 * Numeric cells.
 *
 * `tabular-nums` forces every digit to the same width, so figures line up in
 * their columns and can be compared down the page. Without it, a 1 is
 * narrower than a 7 and the column visibly wobbles.
 */
.bspl_mv_table__figure {
    font-family: var(--bspl_mv_font-mono);
    font-size: var(--bspl_mv_text-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Rate tabs ---------------------------------------------------------- */

.bspl_mv_rates__tabs {
    gap: var(--bspl_mv_space-2);
    margin-bottom: var(--bspl_mv_space-4);

    /* Tabs scroll horizontally on a phone rather than wrapping into a
       ragged block. */
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--bspl_mv_space-2);
}

.bspl_mv_rates__tabs .nav-link {
    --bs-nav-pills-border-radius: var(--bspl_mv_radius-sm);
    padding: 0.55rem 1rem;
    border: 1px solid var(--bspl_mv_line);
    color: var(--bspl_mv_ink-soft);
    font-size: var(--bspl_mv_text-sm);
    font-weight: 500;
    white-space: nowrap;
}

.bspl_mv_rates__tabs .nav-link.active {
    background-color: var(--bspl_mv_green);
    border-color: var(--bspl_mv_green);
    color: #ffffff;
}

/* ==========================================================================
   11. Features
   ========================================================================== */

.bspl_mv_feature {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-2);
    padding: var(--bspl_mv_space-5);
    background-color: var(--bspl_mv_surface);
    border: 1px solid var(--bspl_mv_line);
    border-radius: var(--bspl_mv_radius);
}

.bspl_mv_feature__icon {
    color: var(--bspl_mv_green);
    line-height: 0;
    margin-bottom: var(--bspl_mv_space-1);
}

.bspl_mv_feature__title {
    margin: 0;
    color: var(--bspl_mv_ink);
    font-family: var(--bspl_mv_font-body);
    font-size: var(--bspl_mv_text-base);
    font-weight: 600;
}

.bspl_mv_feature__text {
    margin: 0;
    color: var(--bspl_mv_ink-soft);
    font-size: var(--bspl_mv_text-sm);
}

.bspl_mv_feature__status {
    margin: 0;
    margin-top: auto;
    padding-top: var(--bspl_mv_space-2);
    font-family: var(--bspl_mv_font-mono);
    font-size: 0.6875rem;
}

.bspl_mv_feature__status--operational {
    color: var(--bspl_mv_green);
}

.bspl_mv_feature__status--progress,
.bspl_mv_feature__status--proposed {
    color: var(--bspl_mv_ochre);
}

/* ==========================================================================
   12. Listings
   ========================================================================== */

.bspl_mv_page-header {
    padding-block: var(--bspl_mv_space-6);
    background-color: var(--bspl_mv_wash);
    border-bottom: 1px solid var(--bspl_mv_line);
    background-image:
        repeating-linear-gradient(0deg, transparent 0 39px, #dde1d9 39px 40px),
        repeating-linear-gradient(90deg, transparent 0 39px, #dde1d9 39px 40px);
}

.bspl_mv_page-header__title {
    margin: var(--bspl_mv_space-3) 0 0;
    font-size: var(--bspl_mv_h1);
}

.bspl_mv_page-header__intro {
    max-width: var(--bspl_mv_measure);
    margin: var(--bspl_mv_space-3) 0 0;
    color: var(--bspl_mv_ink-soft);
    font-size: var(--bspl_mv_text-lg);
}

/* --- Breadcrumb --------------------------------------------------------- */

.bspl_mv_breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bspl_mv_space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--bspl_mv_muted);
    font-family: var(--bspl_mv_font-mono);
    font-size: var(--bspl_mv_text-xs);
}

/* The separator is generated content, so it is never read aloud as text and
   never selectable — it is punctuation, not content. */
.bspl_mv_breadcrumb__item + .bspl_mv_breadcrumb__item::before {
    content: "/";
    margin-right: var(--bspl_mv_space-2);
    color: var(--bspl_mv_line);
}

.bspl_mv_breadcrumb__item a {
    color: var(--bspl_mv_muted);
    text-decoration: none;
}

.bspl_mv_breadcrumb__item a:hover {
    color: var(--bspl_mv_green);
}

.bspl_mv_breadcrumb__item [aria-current="page"] {
    color: var(--bspl_mv_ink);
}

/* --- Pagination --------------------------------------------------------- */

.bspl_mv_pagination {
    margin-top: var(--bspl_mv_space-6);
}

.bspl_mv_pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bspl_mv_space-2);
}

.bspl_mv_pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.75rem;
    background-color: var(--bspl_mv_surface);
    border: 1px solid var(--bspl_mv_line);
    border-radius: var(--bspl_mv_radius-sm);
    color: var(--bspl_mv_ink-soft);
    font-family: var(--bspl_mv_font-mono);
    font-size: var(--bspl_mv_text-sm);
    text-decoration: none;
}

.bspl_mv_pagination .page-numbers:hover {
    border-color: var(--bspl_mv_green-line);
    color: var(--bspl_mv_green);
}

.bspl_mv_pagination .page-numbers.current {
    background-color: var(--bspl_mv_green);
    border-color: var(--bspl_mv_green);
    color: #ffffff;
}

/* --- Empty state -------------------------------------------------------- */

.bspl_mv_empty {
    padding: var(--bspl_mv_space-7) var(--bspl_mv_space-5);
    background-color: var(--bspl_mv_surface);
    border: 1px solid var(--bspl_mv_line);
    border-radius: var(--bspl_mv_radius);
    text-align: center;
}

.bspl_mv_empty__title {
    margin: 0 0 var(--bspl_mv_space-3);
    font-size: var(--bspl_mv_h2);
}

.bspl_mv_empty__text {
    max-width: 52ch;
    margin: 0 auto;
    color: var(--bspl_mv_ink-soft);
}

.bspl_mv_empty__search {
    max-width: 420px;
    margin: var(--bspl_mv_space-5) auto 0;
}

/* --- Search form -------------------------------------------------------- */

.bspl_mv_search__group {
    display: flex;
    align-items: stretch;
    background-color: var(--bspl_mv_surface);
    border: 1px solid var(--bspl_mv_line);
    border-radius: var(--bspl_mv_radius-sm);
    overflow: hidden;
}

.bspl_mv_search__input {
    flex-grow: 1;

    /* Lets the input shrink inside its group rather than forcing the search
       form wider than its container on a narrow screen. */
    min-width: 0;
    min-height: 44px;
    padding: 0.6rem var(--bspl_mv_space-4);
    background: transparent;
    border: 0;
    color: var(--bspl_mv_ink);
    font-family: var(--bspl_mv_font-body);
    font-size: var(--bspl_mv_text-base);
}

.bspl_mv_search__input:focus {
    outline: none;
}

/* Focus ring on the GROUP, not the bare input, so the whole control reads as
   one focused object. */
.bspl_mv_search__group:focus-within {
    outline: 3px solid var(--bspl_mv_green);
    outline-offset: 2px;
}

.bspl_mv_search__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 0 var(--bspl_mv_space-3);
    background-color: var(--bspl_mv_green);
    border: 0;
    color: #ffffff;
    cursor: pointer;
}

.bspl_mv_search__submit:hover {
    background-color: var(--bspl_mv_green-dark);
}

/* ==========================================================================
   13. Single post & prose
   ========================================================================== */

.bspl_mv_single__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bspl_mv_space-3);
}

.bspl_mv_single__reading {
    color: var(--bspl_mv_muted);
    font-family: var(--bspl_mv_font-mono);
    font-size: var(--bspl_mv_text-xs);
}

.bspl_mv_single__figure,
.bspl_mv_page__figure {
    margin: 0 0 var(--bspl_mv_space-6);
}

.bspl_mv_single__image,
.bspl_mv_page__image {
    width: 100%;
    border-radius: var(--bspl_mv_radius);
}

.bspl_mv_single__caption {
    margin-top: var(--bspl_mv_space-2);
    color: var(--bspl_mv_muted);
    font-size: var(--bspl_mv_text-xs);
}

/**
 * Prose — whatever the block editor produced.
 *
 * The owner writes in Gutenberg and this styles the result. It has to cope
 * with everything they might use, including the very heavy table usage their
 * existing site shows.
 */
.bspl_mv_prose {
    max-width: var(--bspl_mv_measure);
    color: var(--bspl_mv_ink-soft);
    font-size: var(--bspl_mv_text-lg);
}

.bspl_mv_prose > * + * {
    margin-top: var(--bspl_mv_space-4);
}

.bspl_mv_prose h2 {
    margin-top: var(--bspl_mv_space-7);
    padding-bottom: var(--bspl_mv_space-2);
    border-bottom: 2px solid var(--bspl_mv_ink);
    font-size: var(--bspl_mv_h2);
}

.bspl_mv_prose h3 {
    margin-top: var(--bspl_mv_space-6);
    font-size: var(--bspl_mv_h3);
    font-family: var(--bspl_mv_font-body);
    font-weight: 600;
}

.bspl_mv_prose ul,
.bspl_mv_prose ol {
    padding-left: 1.35rem;
}

.bspl_mv_prose li + li {
    margin-top: var(--bspl_mv_space-2);
}

.bspl_mv_prose blockquote {
    padding-left: var(--bspl_mv_space-5);
    border-left: 3px solid var(--bspl_mv_green-line);
    color: var(--bspl_mv_ink);
    font-family: var(--bspl_mv_font-display);
    font-size: var(--bspl_mv_text-xl);
}

.bspl_mv_prose img {
    border-radius: var(--bspl_mv_radius);
}

.bspl_mv_prose figcaption {
    margin-top: var(--bspl_mv_space-2);
    color: var(--bspl_mv_muted);
    font-size: var(--bspl_mv_text-xs);
}

/**
 * Tables inside post content.
 *
 * Wrapped so they scroll independently. The owner's existing site puts 65
 * table blocks on a single page, so this is a load-bearing rule, not an
 * edge case.
 */
.bspl_mv_prose .wp-block-table {
    overflow-x: auto;
    max-width: 100%;
}

.bspl_mv_prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--bspl_mv_text-sm);
}

.bspl_mv_prose th,
.bspl_mv_prose td {
    padding: 0.6rem var(--bspl_mv_space-3);
    border: 1px solid var(--bspl_mv_line);
    text-align: left;
}

.bspl_mv_prose thead th {
    background-color: var(--bspl_mv_wash);
    color: var(--bspl_mv_ink);
    font-weight: 600;
}

/* Wide and full-width blocks break out of the reading measure. */
.bspl_mv_prose .alignwide {
    max-width: min(1100px, 100%);
    margin-inline: auto;
}

.bspl_mv_prose .alignfull {
    max-width: none;
}

/* --- Page layout modifiers ---------------------------------------------
 *
 * Chosen per page in wp-admin under Page > Settings > Template. The
 * default (no modifier) keeps the reading measure above.
 *
 * These lift the measure only. Type scale, colour and vertical rhythm stay
 * exactly as they are, so a page does not change character when it changes
 * width - only how far a line is allowed to run.
 * ---------------------------------------------------------------------- */

/*
 * Wide: fill the container. For tables, grids and listing shortcodes.
 *
 * A three-column property grid inside the 68ch measure rendered at roughly
 * 640px inside a 1320px container, which is the half-empty page this was
 * written for.
 */
.bspl_mv_prose--wide,
.bspl_mv_prose--full {
    max-width: none;
}

/*
 * Prose that IS prose, inside a wide page, still gets a measure - otherwise
 * an intro paragraph above a grid runs the full 1320px and is unreadable.
 * Only the direct text children are held back; a grid, table, figure or
 * aligned block is left at full width.
 *
 * :is() keeps this to one selector. It is Baseline across every browser
 * this theme supports, and Bootstrap 5.3 already requires that floor.
 */
.bspl_mv_prose--wide > :is(p, ul, ol, blockquote, h2, h3, h4) {
    max-width: var(--bspl_mv_measure);
}

/*
 * Full width opts out of even that. A landing page is composed of sections
 * that set their own widths, and holding its paragraphs to a measure the
 * page did not ask for fights the layout rather than helping it.
 */
.bspl_mv_prose--full > * {
    max-width: none;
}

/* --- Tags, post navigation ---------------------------------------------- */

.bspl_mv_single__tags {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-3);
    margin-top: var(--bspl_mv_space-7);
    padding-top: var(--bspl_mv_space-5);
    border-top: 1px solid var(--bspl_mv_line);
}

.bspl_mv_tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bspl_mv_space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bspl_mv_post-nav {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-3);
    margin-top: var(--bspl_mv_space-6);
}

.bspl_mv_post-nav__link {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-1);

    /* A flex item defaults to min-width:auto, which REFUSES to shrink below
       its content width. A long post title therefore pushed this card past
       the viewport and the text was clipped mid-word. min-width:0 lets it
       shrink; overflow-wrap breaks a title with no spaces to break on. */
    min-width: 0;
    overflow-wrap: break-word;
    padding: var(--bspl_mv_space-4);
    background-color: var(--bspl_mv_surface);
    border: 1px solid var(--bspl_mv_line);
    border-radius: var(--bspl_mv_radius);
    text-decoration: none;
}

.bspl_mv_post-nav__link:hover {
    border-color: var(--bspl_mv_green-line);
}

.bspl_mv_post-nav__title {
    color: var(--bspl_mv_ink);
    font-family: var(--bspl_mv_font-display);
    font-size: var(--bspl_mv_text-base);
    line-height: 1.35;
}

/* ==========================================================================
   14. Sidebar & widgets
   ========================================================================== */

.bspl_mv_sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-5);
}

.bspl_mv_sidebar .widget {
    background-color: var(--bspl_mv_surface);
    border: 1px solid var(--bspl_mv_line);
    border-radius: var(--bspl_mv_radius);
}

.bspl_mv_sidebar .widget-title {
    margin: 0 0 var(--bspl_mv_space-3);
}

.bspl_mv_sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bspl_mv_sidebar li + li {
    margin-top: var(--bspl_mv_space-2);
    padding-top: var(--bspl_mv_space-2);
    border-top: 1px solid var(--bspl_mv_line-soft);
}

.bspl_mv_sidebar li a {
    color: var(--bspl_mv_ink-soft);
    font-size: var(--bspl_mv_text-sm);
    text-decoration: none;
}

.bspl_mv_sidebar li a:hover {
    color: var(--bspl_mv_green);
}

/* ==========================================================================
   15. Enquiry
   ========================================================================== */

.bspl_mv_enquiry {
    padding-block: var(--bspl_mv_section-y);
}

.bspl_mv_enquiry__panel {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-5);
    padding: var(--bspl_mv_space-6) var(--bspl_mv_space-5);
    background-color: var(--bspl_mv_green);
    border-radius: var(--bspl_mv_radius);
}

.bspl_mv_enquiry__heading {
    margin: 0 0 var(--bspl_mv_space-3);
    color: #ffffff;
    font-size: var(--bspl_mv_h2);
}

.bspl_mv_enquiry__text {
    max-width: 46ch;
    margin: 0;
    color: #c9d6d0;
}

.bspl_mv_enquiry__actions {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-3);
}

.bspl_mv_enquiry__hint {
    display: flex;
    align-items: flex-start;
    gap: var(--bspl_mv_space-2);
    margin: var(--bspl_mv_space-4) 0 0;
    color: #a9c0b8;
    font-size: var(--bspl_mv_text-xs);
}

.bspl_mv_enquiry__hint svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* Contact Form 7 fields, restyled to match. Scoped to this panel so a form
   placed anywhere else keeps the plugin's own styling. */
.bspl_mv_enquiry__form input[type="text"],
.bspl_mv_enquiry__form input[type="email"],
.bspl_mv_enquiry__form input[type="tel"],
.bspl_mv_enquiry__form select,
.bspl_mv_enquiry__form textarea {
    width: 100%;
    min-height: 44px;
    margin-bottom: var(--bspl_mv_space-3);
    padding: 0.7rem var(--bspl_mv_space-4);
    background-color: #ffffff;
    border: 0;
    border-radius: var(--bspl_mv_radius-sm);
    color: var(--bspl_mv_ink);
    font-family: var(--bspl_mv_font-body);
    font-size: var(--bspl_mv_text-base);
}

.bspl_mv_enquiry__form input[type="submit"] {
    width: 100%;
    min-height: 44px;
    padding: 0.75rem var(--bspl_mv_space-5);
    background-color: var(--bspl_mv_gold);
    border: 0;
    border-radius: var(--bspl_mv_radius-sm);
    color: var(--bspl_mv_gold-ink);
    font-family: var(--bspl_mv_font-body);
    font-size: var(--bspl_mv_text-base);
    font-weight: 700;
    cursor: pointer;
}

/* ==========================================================================
   16. Footer
   ========================================================================== */

.bspl_mv_footer {
    padding-top: var(--bspl_mv_space-7);
    background-color: var(--bspl_mv_green-dark);
    color: var(--bspl_mv_green-onDark);
}

.bspl_mv_footer__grid {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-6);
}

.bspl_mv_footer__name {
    margin: 0 0 var(--bspl_mv_space-3);
    color: #ffffff;
    font-family: var(--bspl_mv_font-display);
    font-size: 1.25rem;
}

.bspl_mv_footer__blurb {
    max-width: 42ch;
    margin: 0;
    font-size: var(--bspl_mv_text-sm);
}

.bspl_mv_footer__heading {
    margin: 0 0 var(--bspl_mv_space-3);
    color: #7e938b;
    font-family: var(--bspl_mv_font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.bspl_mv_footer__menu,
.bspl_mv_footer__contact {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bspl_mv_footer__menu a,
.bspl_mv_footer__contact a {
    display: inline-flex;
    align-items: center;
    gap: var(--bspl_mv_space-2);
    color: var(--bspl_mv_green-onDark);
    font-size: var(--bspl_mv_text-sm);
    text-decoration: none;
}

.bspl_mv_footer__menu a:hover,
.bspl_mv_footer__contact a:hover {
    color: #ffffff;
}

.bspl_mv_footer__address {
    margin: 0 0 var(--bspl_mv_space-3);
    font-size: var(--bspl_mv_text-sm);
    font-style: normal;
    line-height: 1.55;
}

.bspl_mv_footer__widgets {
    margin-top: var(--bspl_mv_space-6);
}

.bspl_mv_footer__legal {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-2);
    margin-top: var(--bspl_mv_space-6);
    padding-block: var(--bspl_mv_space-4) var(--bspl_mv_space-6);
    border-top: 1px solid #17554a;
}

/* The copyright and the builder's credit are one unit: they stack on a phone,
   sit shoulder to shoulder from sm up, and stay opposite the source note. The
   inner gap is one step tighter than the strip's own gap so the two related
   lines read as a pair rather than as three equal items. */
.bspl_mv_footer__attribution {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-1);
}

.bspl_mv_footer__copyright,
.bspl_mv_footer__credit,
.bspl_mv_footer__source {
    margin: 0;
    color: #7e938b;
    font-family: var(--bspl_mv_font-mono);
    font-size: 0.6875rem;
}

/* The credit carries the only link in this strip. At 11px the muted legal grey
   is not enough to mark it as clickable, so it takes the brighter footer link
   colour. Its underline is left alone on purpose: the menu and contact links
   above strip theirs because they sit in obvious link lists, while this one
   sits inside a sentence and needs the underline to be found at all. */
.bspl_mv_footer__credit a {
    color: var(--bspl_mv_green-onDark);
    transition: color var(--bspl_mv_transition);
}

.bspl_mv_footer__credit a:hover,
.bspl_mv_footer__credit a:focus {
    color: #ffffff;
}

/* ==========================================================================
   17. Floating WhatsApp button
   --------------------------------------------------------------------------
   The owner's existing sites both run a floating WhatsApp widget through a
   plugin, and it is their primary conversion path. Building it in removes
   that plugin dependency.
   ========================================================================== */

.bspl_mv_whatsapp-float {
    position: fixed;
    right: var(--bspl_mv_space-4);
    bottom: var(--bspl_mv_space-4);
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background-color: #25d366;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(15, 21, 18, 0.28);
    color: #ffffff;
    transition: transform var(--bspl_mv_transition), background-color var(--bspl_mv_transition);
}

.bspl_mv_whatsapp-float:hover,
.bspl_mv_whatsapp-float:focus {
    background-color: #1da851;
    color: #ffffff;
    transform: scale(1.06);
}

/* ==========================================================================
   Breakpoints — sm (576px)
   ========================================================================== */

@media (min-width: 576px) {
    .bspl_mv_hero__actions,
    .bspl_mv_enquiry__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .bspl_mv_brand__name {
        font-size: 1.3125rem;
    }

    .bspl_mv_footer__legal {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* Baseline, not centre: the two lines share a font and a size, so aligning
       their baselines is what makes them read as one sentence. */
    .bspl_mv_footer__attribution {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--bspl_mv_space-1) var(--bspl_mv_space-3);
    }
}

/* ==========================================================================
   Breakpoints — md (768px)
   ========================================================================== */

@media (min-width: 768px) {
    .bspl_mv_brand__tagline {
        display: block;
    }

    .bspl_mv_section__head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .bspl_mv_page-header {
        padding-block: var(--bspl_mv_space-7);
    }

    .bspl_mv_post-nav {
        flex-direction: row;
    }

    .bspl_mv_post-nav__link {
        flex: 1 1 0;
    }

    .bspl_mv_post-nav__link--next {
        text-align: right;
    }
}

/* ==========================================================================
   Breakpoints — lg (992px)
   --------------------------------------------------------------------------
   The navbar becomes inline here, so the drawer-specific rules stop applying
   and the hero and footer move to their multi-column layouts.
   ========================================================================== */

@media (min-width: 992px) {
    .bspl_mv_brand__name {
        font-size: 1.4375rem;
    }

    .bspl_mv_nav {
        gap: var(--bspl_mv_space-5);
    }

    .bspl_mv_nav .nav-link {
        padding: 0.25rem 0;
    }

    /* Underline the current top-level item, echoing the section rules used
       throughout the design. */
    .bspl_mv_nav > .nav-item > .nav-link.active {
        border-bottom: 2px solid var(--bspl_mv_green);
    }

    .bspl_mv_navbar__cta {
        margin-left: var(--bspl_mv_space-5);
        padding: 0.6rem 1.25rem;
    }

    .bspl_mv_hero__grid {
        display: grid;

        /* minmax(0, Nfr) rather than plain Nfr: a bare fr track has a
           min-content floor and will not shrink below its widest child,
           which overflows the row. */
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--bspl_mv_space-7);
        align-items: start;
    }

    .bspl_mv_enquiry__panel {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: var(--bspl_mv_space-7);
        align-items: center;
        padding: var(--bspl_mv_space-7);
    }

    .bspl_mv_footer__grid {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
        gap: var(--bspl_mv_space-6);
    }

    .bspl_mv_sidebar {
        position: sticky;
        top: var(--bspl_mv_space-5);
    }
}

/* ==========================================================================
   20. Comments
   --------------------------------------------------------------------------
   WordPress emits its own class names here (comment-respond, comment-form,
   form-submit and the rest) and the theme has to meet them — they are not
   ours to rename. Until these rules existed the comment form fell back to
   raw browser defaults: an unstyled textarea, a grey system button, and the
   Comment label sitting beside the box instead of above it.

   Comments are off by default on most WordPress installs. If this site never
   wants them, switch them off in Settings > Discussion rather than hiding
   them with CSS — a hidden form still accepts spam.
   ========================================================================== */

.bspl_mv_comments {
    max-width: var(--bspl_mv_measure);
    margin-top: var(--bspl_mv_space-7);
    padding-top: var(--bspl_mv_space-6);
    border-top: 1px solid var(--bspl_mv_line);
}

/* --- Heading ------------------------------------------------------------ */

.bspl_mv_comments .comment-reply-title,
.bspl_mv_comments .comments-title {
    margin: 0 0 var(--bspl_mv_space-4);
    color: var(--bspl_mv_ink);
    font-family: var(--bspl_mv_font-display);
    font-size: var(--bspl_mv_h2);
    font-weight: 400;
}

/* The "Cancel reply" link sits inside the heading; it must not inherit the
   display face and size, or it reads as part of the title. */
.bspl_mv_comments .comment-reply-title small {
    display: block;
    margin-top: var(--bspl_mv_space-2);
    font-family: var(--bspl_mv_font-body);
    font-size: var(--bspl_mv_text-sm);
    font-weight: 400;
}

/* --- Intro lines -------------------------------------------------------- */

.bspl_mv_comments .comment-notes,
.bspl_mv_comments .logged-in-as,
.bspl_mv_comments .must-log-in,
.bspl_mv_comments .required-field-message {
    margin: 0 0 var(--bspl_mv_space-4);
    color: var(--bspl_mv_muted);
    font-size: var(--bspl_mv_text-sm);
}

.bspl_mv_comments .required {
    color: var(--bspl_mv_seal);
}

/* --- Form --------------------------------------------------------------- */

.bspl_mv_comments .comment-form {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-4);
}

/*
 * Each field is a <p> containing a label and a control. WordPress puts them
 * as siblings with no wrapper, so making the paragraph a flex column is what
 * moves the label above its input — the default inline flow is why the
 * Comment label appeared beside the textarea.
 */
.bspl_mv_comments .comment-form p {
    display: flex;
    flex-direction: column;
    gap: var(--bspl_mv_space-2);
    margin: 0;
}

.bspl_mv_comments .comment-form label {
    color: var(--bspl_mv_ink);
    font-size: var(--bspl_mv_text-sm);
    font-weight: 600;
}

.bspl_mv_comments .comment-form input[type="text"],
.bspl_mv_comments .comment-form input[type="email"],
.bspl_mv_comments .comment-form input[type="url"],
.bspl_mv_comments .comment-form textarea {
    width: 100%;
    padding: 0.7rem var(--bspl_mv_space-4);
    background-color: var(--bspl_mv_surface);
    border: 1px solid var(--bspl_mv_line);
    border-radius: var(--bspl_mv_radius-sm);
    color: var(--bspl_mv_ink);
    font-family: var(--bspl_mv_font-body);
    font-size: var(--bspl_mv_text-base);

    /* 44px minimum touch target, as everywhere else. WCAG 2.5.8. */
    min-height: 44px;
}

.bspl_mv_comments .comment-form textarea {
    min-height: 140px;

    /* Vertical only: horizontal resize lets a visitor drag the textarea
       wider than the page and introduce a sideways scrollbar. */
    resize: vertical;
}

.bspl_mv_comments .comment-form input:focus-visible,
.bspl_mv_comments .comment-form textarea:focus-visible {
    outline: 3px solid var(--bspl_mv_green);
    outline-offset: 2px;
}

/* --- Cookie consent checkbox -------------------------------------------- */

/*
 * The one field that is genuinely a row, not a column: a checkbox belongs
 * beside its label. This overrides the column rule above for this field only.
 */
.bspl_mv_comments .comment-form-cookies-consent {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--bspl_mv_space-2);
}

.bspl_mv_comments .comment-form-cookies-consent input {
    width: auto;
    min-height: 0;
    margin-top: 0.25rem;
}

.bspl_mv_comments .comment-form-cookies-consent label {
    font-size: var(--bspl_mv_text-sm);
    font-weight: 400;
}

/* --- Submit ------------------------------------------------------------- */

.bspl_mv_comments .form-submit {
    margin: 0;
}

.bspl_mv_comments .comment-form .submit {
    align-self: flex-start;
    min-height: 44px;
    padding: 0.75rem 1.5rem;
    background-color: var(--bspl_mv_green);
    border: 1px solid var(--bspl_mv_green);
    border-radius: var(--bspl_mv_radius-sm);
    color: #ffffff;
    font-family: var(--bspl_mv_font-body);
    font-size: var(--bspl_mv_text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--bspl_mv_transition);
}

.bspl_mv_comments .comment-form .submit:hover,
.bspl_mv_comments .comment-form .submit:focus {
    background-color: var(--bspl_mv_green-dark);
}

/* --- Existing comments -------------------------------------------------- */

.bspl_mv_comments .comment-list {
    margin: 0 0 var(--bspl_mv_space-6);
    padding: 0;
    list-style: none;
}

.bspl_mv_comments .comment-list ol.children {
    margin: var(--bspl_mv_space-4) 0 0;
    padding-left: var(--bspl_mv_space-5);
    list-style: none;
    border-left: 2px solid var(--bspl_mv_line);
}

.bspl_mv_comments .comment-body {
    padding: var(--bspl_mv_space-4) 0;
    border-bottom: 1px solid var(--bspl_mv_line-soft);
}

.bspl_mv_comments .comment-author {
    display: flex;
    align-items: center;
    gap: var(--bspl_mv_space-2);
    color: var(--bspl_mv_ink);
    font-weight: 600;
}

.bspl_mv_comments .comment-author .avatar {
    border-radius: 50%;
}

.bspl_mv_comments .comment-metadata {
    margin-bottom: var(--bspl_mv_space-2);
    color: var(--bspl_mv_muted);
    font-family: var(--bspl_mv_font-mono);
    font-size: var(--bspl_mv_text-xs);
}

.bspl_mv_comments .comment-metadata a {
    color: var(--bspl_mv_muted);
    text-decoration: none;
}

.bspl_mv_comments .reply {
    margin-top: var(--bspl_mv_space-2);
}

.bspl_mv_comments .reply a {
    font-size: var(--bspl_mv_text-sm);
    font-weight: 600;
}

.bspl_mv_comments .comment-awaiting-moderation {
    display: inline-block;
    margin-bottom: var(--bspl_mv_space-2);
    padding: 0.2rem 0.55rem;
    background-color: var(--bspl_mv_ochre-tint);
    border: 1px solid var(--bspl_mv_ochre-line);
    border-radius: var(--bspl_mv_radius-sm);
    color: var(--bspl_mv_ochre);
    font-size: var(--bspl_mv_text-xs);
    font-weight: 600;
}

.bspl_mv_comments .no-comments {
    color: var(--bspl_mv_muted);
    font-size: var(--bspl_mv_text-sm);
}

/* --- Comment pagination ------------------------------------------------- */

.bspl_mv_comments .comment-navigation {
    display: flex;
    gap: var(--bspl_mv_space-4);
    margin-bottom: var(--bspl_mv_space-5);
    font-size: var(--bspl_mv_text-sm);
}

/* --- Wider screens ------------------------------------------------------ */

@media (min-width: 768px) {
    /*
     * Name, email and website sit in a row once there is space. The comment
     * box and the submit button keep the full width.
     */
    .bspl_mv_comments .comment-form-author,
    .bspl_mv_comments .comment-form-email,
    .bspl_mv_comments .comment-form-url {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ==========================================================================
   18. Print
   --------------------------------------------------------------------------
   Rate tables and scheme notices get printed and carried to site meetings.
   Worth getting right rather than leaving to the browser.
   ========================================================================== */

@media print {
    .bspl_mv_utility,
    .bspl_mv_navbar__toggle,
    .bspl_mv_navbar__cta,
    .bspl_mv_whatsapp-float,
    .bspl_mv_enquiry,
    .bspl_mv_pagination,
    .bspl_mv_post-nav,
    .bspl_mv_footer__widgets,
    .bspl_mv_skip-link {
        display: none !important;
    }

    body {
        background: #ffffff;
        color: #000000;
        font-size: 11pt;
    }

    .bspl_mv_hero,
    .bspl_mv_page-header {
        background: none;
        border-bottom: 1pt solid #000000;
    }

    /* Never split a rate table across a page break mid-row. */
    .bspl_mv_table-scroll {
        overflow: visible;
        border: 1pt solid #000000;
    }

    .bspl_mv_table {
        min-width: 0;
    }

    .bspl_mv_table tr {
        break-inside: avoid;
    }

    /* Print the destination of a link, since a printed page cannot be
       clicked. */
    .bspl_mv_prose a::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        word-break: break-all;
    }
}

/* ==========================================================================
   19. JavaScript-enhanced states
   --------------------------------------------------------------------------
   These classes are applied by assets/js/main.js. They are listed last so it
   is obvious which visual states depend on JavaScript being available — with
   it disabled, none of these apply and the page still works.
   ========================================================================== */

/**
 * Masthead shadow once the page has scrolled away from the top.
 * Applied by initStickyHeaderShadow().
 */
.bspl_mv_masthead.is-scrolled {
    box-shadow: 0 1px 12px rgba(15, 21, 18, 0.08);
}

/**
 * Scroll affordance on a wide table.
 *
 * Applied by initTableScrollHints() when there is more table beyond the
 * visible edge. A fade at the edge is the cue that tells a visitor the
 * columns continue — without it, most people never scroll and assume the
 * columns they can see are all the data there is.
 */
.bspl_mv_table-scroll {
    position: relative;
}

.bspl_mv_table-scroll.has-overflow-right::after,
.bspl_mv_table-scroll.has-overflow-left::before {
    content: "";
    position: sticky;
    top: 0;
    display: block;
    width: 28px;
    height: 100%;
    pointer-events: none;
}

.bspl_mv_table-scroll.has-overflow-right::after {
    float: right;
    margin-left: -28px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96));
}

.bspl_mv_table-scroll.has-overflow-left::before {
    float: left;
    margin-right: -28px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96));
}

/**
 * Scroll sentinel.
 *
 * A 1px marker inserted at the top of the document by initStickyHeaderShadow().
 * Invisible and inert; its only job is to give IntersectionObserver something
 * to watch so we can tell "at the top of the page" from "scrolled".
 *
 * Defined here rather than set from JavaScript so this theme keeps its rule
 * that every visual property lives in the stylesheet.
 */
.bspl_mv_scroll-sentinel {
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    pointer-events: none;
}

/**
 * Syndication credit.
 *
 * Shown above a post that was first published elsewhere. Both an honest
 * signal to the reader and part of what makes cross-domain syndication
 * legible to search engines rather than looking like scraped duplicate
 * content. See src/Seo/Syndication.php.
 */
.bspl_mv_syndication-credit {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 var(--bspl_mv_space-5);
    padding: var(--bspl_mv_space-3) var(--bspl_mv_space-4);
    background-color: var(--bspl_mv_ochre-tint);
    border-left: 3px solid var(--bspl_mv_ochre-line);
    border-radius: 0 var(--bspl_mv_radius-sm) var(--bspl_mv_radius-sm) 0;
    color: var(--bspl_mv_ochre);
    font-size: var(--bspl_mv_text-sm);
}

.bspl_mv_syndication-credit a {
    color: var(--bspl_mv_ochre);
    font-weight: 600;
    text-decoration: underline;
}