/* ==========================================================================
   Basuto UX — Components
   Subnav, sticky CTA bar, key facts sidebar/bar, review cards, CTA strip,
   process steps. Loaded when any component feature is enabled.
   ========================================================================== */

/* ── Mobile Sticky CTA Bar ── */
@media (max-width: 768px) {
    .basuto-sticky-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        display: flex;
        gap: 0;
        background: var(--wp--preset--color--forest, #4A5E52);
        /* Safe area padding on container — avoids doubling per button */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transform: translateY(100%);
        transition: transform 300ms ease;
    }

    .basuto-sticky-cta.visible {
        transform: translateY(0);
    }

    .basuto-sticky-cta.hidden {
        transform: translateY(100%);
    }

    .basuto-sticky-cta__btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
        font-family: var(--wp--preset--font-family--sans, 'DM Sans', sans-serif);
    }

    .basuto-sticky-cta__book {
        background: var(--wp--preset--color--forest, #4A5E52);
        color: #fff;
    }

    .basuto-sticky-cta__call {
        background: #fff;
        color: #2A2D2B;
    }

    .basuto-sticky-cta__whatsapp {
        background: #25D366;
        color: #fff;
    }
}

@media (min-width: 769px) {
    .basuto-sticky-cta {
        display: none;
    }
}

/* ── One mobile booking bar, not two ──────────────────────────────────────
   The theme's header template part ships its own fixed booking bar,
   `.mobile-cta-bar`, on every page of the site. This plugin's bar is a second
   one, and after about 450px of scroll both are on screen at once: measured on
   Home, About, the Insights hub, an article and Contact, at 320, 390 and 768,
   and reproduced independently. At 450 they overlap — the header bar occupies
   777-844 and this one 803-844 — so the result reads as a broken build and eats
   two rows of a phone viewport.

   This is the root fix in the owner that adds the duplicate. It is conditional
   rather than a deletion, which matters:

     - it only applies where the theme's bar is actually in the document, so a
       page, a theme or a future header without one still gets this bar. The
       acceptance note asks for exactly that;
     - it respects the existing `sticky_cta` setting. Turning the feature off
       still turns it off; this does not turn it back on;
     - `display: none` takes the bar out of the accessibility tree and the tab
       order together, so there is no focusable control sitting invisibly over
       the page.

   `:has()` is supported by every current browser. Where it is not, both bars
   show — which is today's behaviour, so the failure mode is the status quo
   rather than a new one.

   There is a narrower rule to the same effect in the theme's GLOBAL styles,
   scoped to `body.category`. That is why a category archive already showed one
   bar while every other page showed two. It is left alone: global styles are
   shared by the whole site and are not this release's to edit. It becomes
   redundant once this ships and can be removed separately. */
@media (max-width: 768px) {
    body:has(.mobile-cta-bar) .basuto-sticky-cta {
        display: none;
    }
}

/* ── CTA Bar Content Offset ──
   CSS padding on the content wrapper, scoped to a JS-toggled body class.
   Only active when the bar is visible AND not hidden near the footer.
   JS toggles body.basuto-cta-visible in sync with bar state. */
@media (max-width: 768px) {
    body.basuto-cta-visible .wp-site-blocks {
        padding-bottom: calc(38px + env(safe-area-inset-bottom, 0px));
    }

    /* The script still toggles `basuto-cta-visible` when this plugin's bar is
       suppressed above — it is tracking its own bar's state and has no reason to
       know the bar is not drawn. Without this, the page would reserve 38px at
       the bottom for a bar that is not there, on top of whatever the theme's own
       bar already reserves. The suppression and the offset are kept on the same
       condition so they cannot disagree. */
    body:has(.mobile-cta-bar).basuto-cta-visible .wp-site-blocks {
        padding-bottom: 0;
    }
}

/* ── On-Page Subnav ──
   Uses position:sticky — browser compositor handles sticking natively,
   including during iOS momentum scrolling. No JS needed for show/hide.
   Hub injects the subnav before the first H2 inside .entry-content.
   ── */
.basuto-subnav {
    position: sticky;
    top: 0;
    z-index: 990; /* Below main nav dropdowns (999) */
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #E5E0D8;
}

body.admin-bar .basuto-subnav {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .basuto-subnav {
        top: 46px;
    }
}

.basuto-subnav__track {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.basuto-subnav__track::-webkit-scrollbar {
    display: none;
}

.basuto-subnav__link {
    flex-shrink: 0;
    padding: 20px 24px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: #888;
    position: relative;
    transition: color 200ms ease;
    font-family: var(--wp--preset--font-family--sans, 'DM Sans', sans-serif);
    white-space: nowrap;
}

/* GPU-composited underline via opacity on pseudo-element */
.basuto-subnav__link::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 2px;
    background: var(--wp--preset--color--gold, #C5A96A);
    opacity: 0;
    transition: opacity 200ms ease;
}

.basuto-subnav__link.active,
.basuto-subnav__link:hover {
    color: #2A2D2B;
}

.basuto-subnav__link.active::after,
.basuto-subnav__link:hover::after {
    opacity: 1;
}

@media (max-width: 768px) {
    .basuto-subnav__link {
        padding: 16px 18px;
        font-size: 12px;
    }
    .basuto-subnav__link::after {
        left: 18px;
        right: 18px;
    }
}

/* ── Sticky Sidebar ── */
@media (min-width: 960px) {
    .basuto-sidebar-sticky {
        position: sticky;
        top: calc(var(--basuto-subnav-top, 80px) + 60px);
        align-self: start;
    }
}

body.admin-bar .basuto-sidebar-sticky {
    top: calc(var(--basuto-subnav-top, 80px) + 60px + 32px);
}

@media (max-width: 959px) {
    .basuto-sidebar-sticky {
        position: static;
    }
}

/* ── Key Facts Card ── */
.basuto-key-facts {
    background: #fff;
    border: 1px solid #E5E0D8;
    border-radius: 14px;
    padding: 32px 28px;
}

.basuto-key-facts__heading {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--wp--preset--color--forest, #4A5E52);
    margin-bottom: 20px;
    font-family: var(--wp--preset--font-family--sans, 'DM Sans', sans-serif);
}

.basuto-key-facts__row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #E5E0D8;
    font-size: 14px;
    line-height: 1.5;
}

.basuto-key-facts__row:last-of-type {
    border-bottom: none;
}

.basuto-key-facts__label {
    font-weight: 600;
    color: #2A2D2B;
}

.basuto-key-facts__value {
    color: #666;
    text-align: right;
}

/* ── Key Facts Horizontal Bar ── */
.basuto-facts-bar {
    display: flex;
    justify-content: center;
    background: #fff;
    border-top: 1px solid #E5E0D8;
    border-bottom: 1px solid #E5E0D8;
}

.basuto-facts-bar__item {
    flex: 1;
    text-align: center;
    padding: 20px 16px;
    border-right: 1px solid #E5E0D8;
}

.basuto-facts-bar__item:last-child {
    border-right: none;
}

.basuto-facts-bar__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #2A2D2B;
    margin-bottom: 4px;
    font-family: var(--wp--preset--font-family--sans, 'DM Sans', sans-serif);
}

.basuto-facts-bar__value {
    display: block;
    font-size: 14px;
    color: #666;
}

@media (max-width: 600px) {
    .basuto-facts-bar {
        flex-direction: column;
    }
    .basuto-facts-bar__item {
        border-right: none;
        border-bottom: 1px solid #E5E0D8;
    }
    .basuto-facts-bar__item:last-child {
        border-bottom: none;
    }
}

/* ── Review Cards (dark background upgrade) ── */
.basuto-reviews {
    background: #2A2D2B;
    padding: 60px 0;
}

.basuto-reviews .wp-block-column {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 32px 28px;
}

.basuto-reviews blockquote,
.basuto-reviews .review-text {
    font-family: var(--wp--preset--font-family--serif, 'Cormorant Garamond', serif);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.basuto-reviews .review-stars {
    color: var(--wp--preset--color--gold, #C5A96A);
    letter-spacing: 0.15em;
}

.basuto-reviews .review-author {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 16px;
}

/* ── CTA Strip (refined) ── */
.basuto-cta-strip {
    padding: 40px 0 !important;
}

.basuto-cta-strip .wp-block-button__link {
    letter-spacing: 0.08em;
    font-size: 14px;
}

/* ── Process Steps ── */
.basuto-process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.basuto-process-step__number {
    font-family: var(--wp--preset--font-family--serif, 'Cormorant Garamond', serif);
    font-size: 3rem;
    color: var(--wp--preset--color--forest, #4A5E52);
    line-height: 1;
    margin-bottom: 16px;
}

.basuto-process-step__title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-family: var(--wp--preset--font-family--sans, 'DM Sans', sans-serif);
}

.basuto-process-step__text {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
}

@media (max-width: 600px) {
    .basuto-process-steps {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ==========================================================================
   Service Page Layout
   Two-column grid with sticky Key Facts sidebar on desktop.
   Single column with inline Key Facts card on tablet/mobile.
   Subnav is position:fixed (outside content flow) — managed by JS.
   ========================================================================== */

/* ── Desktop: two-column grid (960px+) ── */
/* The grid has exactly TWO direct children:
   1. .basuto-service-content  — column 1 (all blocks + subnav flow normally)
   2. .basuto-service-sidebar  — column 2 (sticky Key Facts card)
   The subnav is INSIDE the content wrapper at the correct block position.
   It sticks when scrolled to — it does not pin from page load. */
@media (min-width: 960px) {
    .basuto-service-page .entry-content {
        display: grid !important;
        grid-template-columns: 1fr 320px;
        gap: 0 48px;
        align-items: start;
        overflow: visible;
    }

    /* Content wrapper: left column, blocks flow normally inside */
    .basuto-service-page .entry-content > .basuto-service-content {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    /* Sidebar: right column, sticky */
    .basuto-service-page .entry-content > .basuto-service-sidebar {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 120px;
        align-self: start;
    }

    body.admin-bar.basuto-service-page .entry-content > .basuto-service-sidebar {
        top: 152px;
    }

    /* Override WordPress is-layout-constrained max-width inside content wrapper */
    .basuto-service-content > * {
        max-width: none !important;
    }

    /* Process steps: reflow to single column within the narrower left column */
    .basuto-service-page .basuto-process-steps {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ── Tablet & Mobile: single column (below 960px) ── */
@media (max-width: 959px) {
    .basuto-service-page .entry-content {
        display: block !important;
        /* overflow must stay visible on all axes for position:sticky to work
           inside the content wrapper. iOS Safari has issues with overflow:clip
           breaking sticky. */
        overflow: visible !important;
    }

    .basuto-service-page .entry-content > * {
        max-width: 100%;
    }

    /* Content wrapper: no overflow constraints — sticky subnav needs
       the viewport as the scroll container. */
    .basuto-service-page .basuto-service-content {
        overflow: visible;
    }

    /* Sidebar becomes a full-width inline card */
    .basuto-service-page .entry-content > .basuto-service-sidebar {
        position: static;
        margin: 32px 20px;
    }
}

/* ── Small mobile (below 480px) ── */
@media (max-width: 480px) {
    .basuto-service-page .entry-content > .basuto-service-sidebar {
        margin: 24px 16px;
    }

    .basuto-key-facts {
        padding: 24px 20px;
    }

    .basuto-service-sidebar .basuto-key-facts__cta {
        padding: 12px 16px;
        font-size: 12px;
    }
}

/* ── Key Facts card — Service page sidebar override (dark theme) ──
   Scoped to .basuto-service-sidebar so it only applies in the
   service page sidebar context. Base (light) styles at line ~184. */
.basuto-service-sidebar .basuto-key-facts {
    background: #2A2D2B;
    border: none;
    border-radius: 12px;
}

.basuto-service-sidebar .basuto-key-facts__heading {
    font-size: 11px;
    letter-spacing: 2px;
    color: #C5A96A;
}

.basuto-service-sidebar .basuto-key-facts__row {
    align-items: baseline;
    border-bottom-color: #3A3D3B;
}

.basuto-service-sidebar .basuto-key-facts__label {
    font-size: 13px;
    color: #ffffff;
    font-family: var(--wp--preset--font-family--sans, 'DM Sans', sans-serif);
}

.basuto-service-sidebar .basuto-key-facts__value {
    font-size: 13px;
    color: #B8B5B0;
    font-family: var(--wp--preset--font-family--sans, 'DM Sans', sans-serif);
}

.basuto-service-sidebar .basuto-key-facts__actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.basuto-service-sidebar .basuto-key-facts__cta {
    display: block;
    text-align: center;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    font-family: var(--wp--preset--font-family--sans, 'DM Sans', sans-serif);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

@media (hover: hover) {
    .basuto-service-sidebar .basuto-key-facts__cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }
}

.basuto-service-sidebar .basuto-key-facts__cta--primary {
    background: #4A5E52;
    color: #ffffff;
}

.basuto-service-sidebar .basuto-key-facts__cta--secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
}

/* Accessibility: enlarge the header submenu chevron buttons to a 24x24px
   minimum tap/click target on desktop. The chevron icon itself stays the
   same visual size - only the button's hit area grows, centred around it. */
@media (min-width: 782px) {
    .wp-block-navigation-submenu__toggle {
        min-width: 24px;
        min-height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Service-page pricing cards: the white price box inside the dark CTA
   banner. Narrower than its section by ~40px each side on larger screens
   so it reads as a card, not a full-width strip; on small phones the
   section is already tight, so the reduction is much smaller there. */
.basuto-price-card {
    max-width: calc(100% - 80px);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 600px) {
    .basuto-price-card {
        max-width: calc(100% - 16px);
    }
}

/* ── Homepage trust band ──────────────────────────────────────────────────
   The band ("Exceptional private GP care…" over 1985 / CQC / 30 min / GMC) is
   ONE shared reusable block — `wp_block` 1375, "Global — Trust Bar" — pulled
   into 41 records on staging. It is not a copy per page, so its inline spacing
   is a single authored value serving every consumer at once.

   That is why the correction lives here rather than in the block. The block's
   `margin-bottom:-30px` tightens the seam for the inset sections that follow
   it on service and About pages; only the homepage puts an opaque full-bleed
   teal panel immediately underneath, and there the negative margin covers the
   whole of the block's own 30px bottom padding. Measured at 0.00px of
   clearance on the homepage at 320, 390, 768 and 1440 against 26px above the
   heading. Changing the shared block would move every other consumer to fix
   one page; a homepage-scoped rule in the site's component stylesheet fixes
   the page that is wrong and leaves every other consumer unchanged, which was
   checked in a browser across the shared routes before release.

   `!important` is required, not preferred: the declaration being corrected is
   an inline `style` attribute, which no selector outranks.

   Nothing here touches the band's top treatment (-55px over the hero), its
   colours, its typography or the existing `@media (max-width: 599px)
   body:not(.home)` rule that hides the band on other pages at phone widths —
   all of those stay exactly as they are. */

body.home .basuto-tb-section {
    margin-bottom: 0 !important;
}

/* Below the desktop breakpoint the four facts stack into one tall column —
   roughly two and a half times the desktop band height at 768px — which pushes
   the services and the clinicians off a phone screen. Two columns of two keeps
   the whole band in view and the figures comparable side by side.

   781px, not 600px: WordPress stacks `.wp-block-columns` at `max-width: 781px`,
   so a 600px breakpoint would leave 768px — a tablet in portrait — in the
   single-column state this is correcting. The prototype was previewed at 600px;
   this is the same layout applied at the breakpoint that actually governs.

   Two rules, because core stacks in two independent ways at this breakpoint:
   `.wp-block-columns { flex-direction: column }` on the container — which is
   what actually puts one fact per row, so `flex-basis` alone does nothing —
   and `flex-basis: 100% !important` on each column. The container is returned
   to a wrapping row and the columns to half-width.

   The block's own 30px column padding drops to 12px here: at 320px two columns
   of 30px padding leave the longest label, "STANDARD GP APPOINTMENT", too
   little room to wrap at its space. 12px keeps a 24px gutter between the two
   columns and was checked in a browser with the real typeface at 320, 390, 768
   and 1440. The padding and `flex-basis` need `!important` for the
   same reason as above — inline styles and core's own `!important` — while the
   container rule wins on specificity alone. */

@media (max-width: 781px) {
    body.home .basuto-tb-section .wp-block-columns {
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 24px;
        column-gap: 0;
    }

    body.home .basuto-tb-section .wp-block-column {
        flex-basis: 50% !important;
        flex-grow: 0;
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
}