/*
Theme Name:    Believe Detox
Theme URI:     https://believedetoxcenter.com
Description:   Custom child theme for Believe Detox Center, built on Hello Elementor. Provides project-specific styles, hooks, and template overrides for the marketing site.
Author:        Glenar
Author URI:    https://glenar.com
Template:      hello-elementor
Version:       0.1.0
Requires PHP:  7.4
License:       GPL-2.0-or-later
License URI:   https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:   believe-detox
Tags:          elementor, custom
*/

/* ─────────────────────────────────────────────────────────────────────
   Header phone button — icon-only on small phones.

   The Paradise Phone Button widget's `button_text` isn't a responsive
   control, so we hide the label via CSS below the smallest breakpoint
   and tighten the padding into a circular button. This avoids a horizontal
   overflow on 360–390 px viewports where logo + burger + the full
   "(888) 780-0904" text wouldn't fit on one row.

   Scoped to widgets in a Theme-Builder header so it doesn't affect
   phone buttons that intentionally show text elsewhere on the site
   (e.g. inside a Contact page section).
   ───────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────
   Hero image fill — Home page chunk 1.

   The hero column places a portrait-orientation photo (600×800) next to
   a text column. Without intervention, the natural aspect ratio of the
   <img> would push the section taller than the text needs. This rule
   makes the image fill the column box exactly: width 100%, height 100%,
   object-fit: cover (crop to fit, never stretch).

   Scoped to .bdc-hero-image — applied via the image widget's CSS class.
   ───────────────────────────────────────────────────────────────────── */
.bdc-hero-image,
.bdc-hero-image .elementor-widget-container,
.bdc-hero-image .elementor-image {
    height: 100%;
    display: block;
}

.bdc-hero-image img {
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────
   Hide header floating phone button on mobile + tablet.

   Bottom-nav center button (paradise_bottom_nav, mobile+tablet only)
   provides the phone CTA on small viewports — the header's floating
   phone widget becomes redundant there. Desktop keeps it because the
   bottom-nav is desktop-disabled, so removing it would leave desktop
   without a header-level tap-to-call.

   Setting hide_mobile/hide_tablet in the widget's _elementor_data did
   NOT produce the elementor-hidden-mobile wrapper class for this
   widget (Paradise's render path doesn't pick those up), so we
   express the rule directly here.

   Breakpoint matches Elementor's tablet upper bound (1024px).
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .elementor-element-96258c9 {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   Defensive root-level scroll containment — prevents the
   "swipe-once-scroll-everywhere" Android bug.

   Symptom: a single transient horizontal overflow anywhere on the
   page (an animation, a transform, a slider transition, a long
   word) unlocks the document's horizontal scroll. Once the user
   swipes even 1px to the right, scrollLeft > 0 and the browser
   keeps that state — they can now freely swipe left/right across
   the whole page, revealing the white area to the side.

   `overflow-x: clip` is the modern, side-effect-free containment:
   it visually clips any horizontal overflow WITHOUT establishing a
   scroll container, so `position: sticky` children (header, etc.)
   keep working. `hidden` is the fallback for browsers that don't
   know `clip` (pre-2022).

   Applied at root + body for defense-in-depth: some browsers honour
   it on html, some on body, some only on both.
   ───────────────────────────────────────────────────────────────────── */
html,
body {
    overflow-x: hidden;   /* fallback — universally supported */
    overflow-x: clip;     /* preferred — no scroll context, no sticky disruption */
}

/* ─────────────────────────────────────────────────────────────────────
   Defensive heading wrap — prevent horizontal-scroll regressions.

   Symptom: the home-page hero H1 ("Hope. Healing. Restoration." 64px
   Newsreader, letter-spacing -1.5px) renders its first text node at
   333px width on a 360px Android viewport — pushing the document
   scrollWidth past viewport and enabling horizontal scroll with a
   white strip on the right. Chrome on Android exposes this because
   `overflow-wrap: normal` (the Elementor default for headings) didn't
   wrap at the space between "Healing." and "Restoration." for this
   font + letter-spacing combo.

   `overflow-wrap: break-word` keeps preferring whitespace breaks (so
   normal sentences still wrap naturally) but ALLOWS the browser to
   break inside a word as a last resort to keep content inside the
   container. Scoped to Elementor heading widgets so it doesn't touch
   third-party UI.

   This addresses the reported home-page bug AND prevents the same
   pattern on other pages with long compound headings.
   ───────────────────────────────────────────────────────────────────── */
.elementor-widget-heading .elementor-heading-title {
    overflow-wrap: break-word;
    word-wrap: break-word; /* Legacy alias for older Android Chrome */
}

@media (max-width: 480px) {
    [data-elementor-type="header"] .elementor-widget-paradise_phone_button .paradise-pbn-text {
        display: none;
    }

    [data-elementor-type="header"] .elementor-widget-paradise_phone_button .paradise-pbn-btn {
        padding: 12px;
        aspect-ratio: 1 / 1;
        line-height: 1;
    }

    [data-elementor-type="header"] .elementor-widget-paradise_phone_button .paradise-pbn-icon {
        margin: 0;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile-app feel for Single Page v2 (template 42432).

   On phones, the page sheds its web layout for a bottom-sheet pattern
   reminiscent of telehealth apps:
   - Hero keeps its full-bleed background image but the duplicate right-
     column image card is hidden so the eye isn't split between two copies
     of the same photo.
   - The content wrapper lifts into a white "sheet" with 24px rounded top
     corners that overlap the hero by 32px -- the move that makes the page
     read as an app surface rather than a web canvas.
   - Section H3s from Gutenberg render as small-caps labels: app vocabulary
     for "section header", not magazine vocabulary.
   - A floating Book-Consultation CTA above the bottom-nav (injected via
     wp_footer in functions.php) makes the page feel transactional.

   Hooks are .bdc-page-* CSS classes baked into the template containers,
   so these rules don't depend on Elementor element IDs that change when
   templates are duplicated.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Hero: less bottom padding so the sheet can overlap cleanly. */
    .bdc-page-hero {
        padding-bottom: 72px !important;
    }

    /* The hero's right column on desktop is an image card that bleeds
       below the hero. On mobile, flex stacks it under the hero, doubling
       up the featured image (one as hero bg, one as a separate card).
       Hide the duplicate; the hero's background image is enough. */
    .bdc-page-hero-image {
        display: none !important;
    }

    /* Body wrap: the bottom-sheet move -- white surface, rounded top
       corners, lifted to overlap hero by 32px. */
    .bdc-page-body {
        background: #FFFFFF;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        margin-top: -32px !important;
        position: relative;
        z-index: 2;
        padding-top: 32px !important;
    }

    /* H2 in body content (Gutenberg H1 demoted via functions.php filter).
       Slightly tighter than the template's H1; this is the section-of-
       the-article level. */
    .bdc-page-body-col h2.wp-block-heading {
        font-family: 'Frank Ruhl Libre', serif;
        font-size: 26px;
        font-weight: 400;
        line-height: 1.25;
        color: #18212D;
        margin-top: 36px;
        margin-bottom: 16px;
    }

    /* H3 inside body content -- app-style section label.
       Small caps + letter-spacing reads as a "section divider" in apps
       like Apple Health and Calm. Border-bottom anchors the label. */
    .bdc-page-body-col h3.wp-block-heading {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        color: #385F71;
        margin-top: 32px;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid #EAE9E8;
    }

    /* Body paragraphs and lists -- tuned for thumb reading. */
    .bdc-page-body-col p {
        font-size: 16px;
        line-height: 1.65;
        color: #2A3441;
    }

    .bdc-page-body-col ul,
    .bdc-page-body-col ol {
        padding-left: 18px;
    }

    .bdc-page-body-col ul li,
    .bdc-page-body-col ol li {
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 1.5;
        color: #2A3441;
    }

    .bdc-page-body-col ul li strong,
    .bdc-page-body-col ol li strong {
        color: #18212D;
    }

    /* CTA section: tighter on mobile. */
    .bdc-page-cta {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    /* Reserve space at the bottom of body so sticky CTA + bottom-nav
       don't cover the last paragraph. */
    body.page {
        padding-bottom: calc(80px + var(--bdc-bottom-nav-h, 80px));
    }
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile-app feel for Single Post v2 (template 42431).

   Same bottom-sheet pattern as Single Page v2, with one extra concern:
   the post template has a sticky author-card sidebar (30%) next to the
   article body (70%). On mobile the flex stack would put the heavy
   author card ABOVE the article -- backwards for blog UX. So we flip
   the wrap to column-reverse on mobile (data side), and slim the author
   card to a horizontal byline (CSS side).

   The .paradise-author-card__credentials inline-block gets a small
   negative margin-left to absorb the line-break whitespace between the
   name span and the credentials span (a Paradise widget rendering
   quirk that produces "Reza Bagheri , MSc" with a stray space).
   ───────────────────────────────────────────────────────────────────── */

/* Whitespace fix is global, not mobile-only -- the stray space looks
   bad on desktop too. */
.paradise-author-card__credentials {
    margin-left: -0.25em;
}

@media (max-width: 767px) {

    /* Hero: less bottom padding for sheet overlap. */
    .bdc-post-hero {
        padding-bottom: 72px !important;
    }

    /* Body wrap: white sheet, rounded top, overlap hero. */
    .bdc-post-body {
        background: #FFFFFF;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        margin-top: -32px !important;
        position: relative;
        z-index: 2;
        padding-top: 32px !important;
    }

    /* Author column under content (column-reverse handles order).
       Shrink the card to a horizontal byline rather than a tall card. */
    .bdc-post-author-col {
        margin-top: 32px;
    }

    .bdc-post-author-card .paradise-author-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 16px !important;
        text-align: left !important;
    }

    .bdc-post-author-card .paradise-author-card__photo-wrap {
        flex: 0 0 56px;
        width: 56px !important;
        height: 56px !important;
    }

    .bdc-post-author-card .paradise-author-card__photo,
    .bdc-post-author-card .paradise-author-card__photo img {
        width: 56px !important;
        height: 56px !important;
        border-radius: 50%;
    }

    .bdc-post-author-card .paradise-author-card__body {
        text-align: left !important;
    }

    .bdc-post-author-card .paradise-author-card__name {
        font-size: 15px !important;
        line-height: 1.3 !important;
        margin-bottom: 2px !important;
    }

    .bdc-post-author-card .paradise-author-card__title {
        font-size: 11px !important;
        letter-spacing: 0.5px;
    }

    /* Hide the long bio paragraph on mobile -- too heavy for byline. */
    .bdc-post-author-card .paradise-author-card__bio {
        display: none;
    }

    /* H2 / H3 in content: same app-feel pattern as page v2. */
    .bdc-post-content-col h2.wp-block-heading,
    .bdc-post-content-col .elementor-widget-heading h2 {
        font-family: 'Frank Ruhl Libre', serif;
        font-size: 26px;
        font-weight: 400;
        line-height: 1.25;
        color: #18212D;
        margin-top: 36px;
        margin-bottom: 16px;
    }

    .bdc-post-content-col h3.wp-block-heading {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        color: #385F71;
        margin-top: 32px;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid #EAE9E8;
    }

    .bdc-post-content-col p {
        font-size: 16px;
        line-height: 1.65;
        color: #2A3441;
    }

    .bdc-post-content-col ul,
    .bdc-post-content-col ol {
        padding-left: 18px;
    }

    .bdc-post-content-col ul li,
    .bdc-post-content-col ol li {
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 1.5;
        color: #2A3441;
    }

    /* CTA section: tighter on mobile. */
    .bdc-post-cta {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    /* Reserve bottom space for sticky CTA + bottom-nav. */
    body.single-post {
        padding-bottom: calc(80px + var(--bdc-bottom-nav-h, 80px));
    }
}

/* ─────────────────────────────────────────────────────────────────────
   Sticky "Book Consultation" CTA -- mobile only.

   Injected via wp_footer in functions.php on singular pages. Sits above
   the Paradise bottom-nav. Pointer-events:none on the wrapper + auto on
   the button means the gradient fade-out doesn't block content taps.
   ───────────────────────────────────────────────────────────────────── */
.bdc-sticky-cta {
    display: none;
}

@media (max-width: 767px) {
    .bdc-sticky-cta {
        display: block;
        position: fixed;
        bottom: var(--bdc-bottom-nav-h, 80px);
        left: 0;
        right: 0;
        padding: 16px 16px 12px;
        z-index: 90;
        pointer-events: none;
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.92) 40%,
            #FFFFFF 100%);
    }

    .bdc-sticky-cta__btn {
        display: block;
        width: 100%;
        padding: 16px 24px;
        background: #18212D;
        color: #FFFFFF !important;
        text-align: center;
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 1px;
        text-transform: uppercase;
        border-radius: 14px;
        text-decoration: none;
        box-shadow: 0 8px 24px rgba(24, 33, 45, 0.25);
        pointer-events: auto;
        transition: transform 0.18s ease;
    }

    .bdc-sticky-cta__btn:hover,
    .bdc-sticky-cta__btn:focus {
        transform: translateY(-2px);
    }
}

/* ─────────────────────────────────────────────────────────────────────
   Off-canvas mobile menu — accordion hierarchy.

   Paradise's off-canvas widget renders the full menu tree flat:
   parents and children get the same visual weight, so a 16-item menu
   reads as one undifferentiated wall. This block:

   - hides every .sub-menu by default (max-height: 0)
   - reveals it when JS toggles `.is-expanded` on the parent <li>
     (see mobile-menu-accordion.js)
   - lifts the visual hierarchy: parent items are bolder, children are
     deeper-indented (40px), the chevron rotates 180° on expand

   Scoped under .paradise-ocm-menu so it never bleeds into the desktop
   nav-menu — desktop uses a different widget entirely.
   ───────────────────────────────────────────────────────────────────── */

/* ─── Panel-height fix — mobile Chromium bug ─────────────────────────────────
   Paradise's off-canvas panel is `position: fixed; height: 100%`. On Android
   Chrome (and headless Chromium at some viewports), `height: 100%` on a
   fixed-positioned element resolves to its CONTENT height instead of the
   viewport height — so the panel shrinks to fit only the header + first
   menu item, hiding everything below. User's bug report 2026-07-04: "only
   Detox Programs shows, refresh fixes it."

   Fix: force the panel to viewport height using `dvh` (dynamic viewport
   height — accounts for the mobile address bar retracting). Fall back to
   `vh` for older browsers. `min-height` too, as belt-and-braces so the
   panel can grow but never shrink below viewport.

   Lives in the theme (not the Paradise plugin) so we don't fork a vendor
   plugin — cascade beats plugin because theme CSS enqueues later. */
.paradise-ocm-panel {
    height: 100vh;      /* fallback */
    height: 100dvh;     /* mobile-safe */
    min-height: 100vh;
    min-height: 100dvh;
}

/* Parents need positioning context for the absolute chevron button */
.paradise-ocm-menu .menu-item-has-children {
    position: relative;
}

/* Make the parent <a> visually heavier so the eye distinguishes
   it from children at a glance */
.paradise-ocm-menu .menu-item-has-children > a {
    font-weight: 600;
    /* leave room so the chevron doesn't overlap the label */
    padding-right: 48px !important;
}

/* The toggle button — vertically centred on the row, sits to the
   right of the parent link. Touch target stays ≥ 40×40 for a11y. */
.paradise-ocm-menu .bdc-ocm-submenu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 1;
}

.paradise-ocm-menu .bdc-ocm-submenu-toggle svg {
    transition: transform 0.25s ease;
}

/* Expanded state: rotate the chevron 180° to point up */
.paradise-ocm-menu .menu-item-has-children.is-expanded > .bdc-ocm-submenu-toggle svg {
    transform: rotate(180deg);
}

/* Submenu collapsed by default — max-height + overflow animation */
.paradise-ocm-menu .sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(0, 0, 0, 0.04);
}

/* Expanded — generous max-height so 5-6 children fit on any device */
.paradise-ocm-menu .menu-item-has-children.is-expanded > .sub-menu {
    max-height: 600px;
}

/* Child items: deeper indent + slightly lighter weight, so the eye
   immediately reads them as nested */
.paradise-ocm-menu .sub-menu a {
    padding-inline-start: 40px !important;
    font-size: 0.93em;
    opacity: 0.9;
}

/* ─────────────────────────────────────────────────────────────────────
   Active menu item — readable on white header background.

   Elementor's nav-menu widget marks the current page with
   `.elementor-item-active`. The default treatment uses the same
   white background as the header itself — fine when the active
   state has an underline pointer, but our header is `pointer:none`
   (the design calls for no decoration), so the active state was
   invisible: white text on white background, no border.

   Fix: give the active item an accent-colored text + subtle sage
   underline so it's clear which page you're on without being
   visually loud. Applies to:
     - the current page (.current-menu-item)
     - the parent of the current page (.current-menu-parent)
     - any ancestor (.current-menu-ancestor) — e.g. an admissions
       sub-page makes "Admissions & Insurance" highlight too.

   Scoped to the desktop nav (`.elementor-nav-menu`) so the
   Paradise off-canvas mobile menu keeps its own treatment.
   ───────────────────────────────────────────────────────────────────── */
.elementor-nav-menu li.current-menu-item > a.elementor-item,
.elementor-nav-menu li.current-menu-parent > a.elementor-item,
.elementor-nav-menu li.current-menu-ancestor > a.elementor-item,
.elementor-nav-menu a.elementor-item-active {
    color: #b86d3c;            /* accent — distinguishable from default ink */
    background-color: transparent;
    position: relative;
    font-weight: 600;
}

.elementor-nav-menu li.current-menu-item > a.elementor-item::after,
.elementor-nav-menu li.current-menu-parent > a.elementor-item::after,
.elementor-nav-menu li.current-menu-ancestor > a.elementor-item::after,
.elementor-nav-menu a.elementor-item-active::after {
    content: "";
    position: absolute;
    left: 16px;                /* matches default item padding */
    right: 16px;
    bottom: 8px;
    height: 2px;
    background: #b86d3c;
    border-radius: 2px;
}

/* Sub-menu items use a tighter padding; align the underline to match. */
.elementor-nav-menu .sub-menu li.current-menu-item > a.elementor-item::after,
.elementor-nav-menu .sub-menu a.elementor-item-active::after {
    left: 12px;
    right: 12px;
    bottom: 6px;
}

/* ─────────────────────────────────────────────────────────────────────
   Skip-link focus styling — Hello Elementor parent theme prints the
   `.skip-link.screen-reader-text` anchor in <body> for keyboard
   accessibility. Default focus state is theme-generic; we override
   with BDC brand colours so the focused state matches the rest of
   the site's accent system. Reviewer item #19 work — single skip-link
   now (duplicate Elementor widget removed); this rule polishes its
   focus state to BDC-branded.
   ───────────────────────────────────────────────────────────────────── */
.skip-link.screen-reader-text:focus,
.skip-link:focus {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 100001 !important;
    background: #18212D !important;
    color: #fff !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    outline: 2px solid #FFAE73 !important;
    outline-offset: 2px !important;
    clip: auto !important;
    width: auto !important;
    height: auto !important;
}