/*
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;
}

@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);
    }
}