/*********************************************************************************

    Bliss Women's Health Clinic — custom.css
    Custom styles: language switching, logo, smart-link tweaks

**********************************************************************************/

/* ── Bilingual display: both EN and CN always visible ───────────────────────── */
.lang-en, .lang-cn { display: inline; }
div.lang-en, div.lang-cn { display: block; }

/* Separator dot after EN spans */
span.lang-en::after { content: " · "; }

/* No separator in paragraph body */
p span.lang-en::after { content: ""; }

/* CN paragraph body: gap + separator line + gap */
p .lang-cn {
    display: block;
    margin-top: 1.4em;
    padding-top: 1.1em;
    border-top: 1px solid rgba(0,0,0,0.12);
}

/* Separator on dark/maroon backgrounds */
.bg-theme p .lang-cn,
.banner-text2-inner p .lang-cn,
.bg-dark p .lang-cn {
    border-top-color: rgba(255,255,255,0.2);
}

/* Block-level CN section (e.g. about page 3-paragraph bilingual blocks) */
div.lang-cn {
    margin-top: 2em;
    padding-top: 1.5em;
    border-top: 1px solid rgba(0,0,0,0.12);
}

.bg-theme div.lang-cn,
.banner-text2-inner div.lang-cn,
.bg-dark div.lang-cn {
    border-top-color: rgba(255,255,255,0.2);
}

/* ── Navigation + top bar: English only ─────────────────────────────────────── */
.header-top-area-dark .lang-cn { display: none !important; }
.header-top-area-dark span.lang-en::after { content: "" !important; }
.bk-navigation .lang-cn { display: none !important; }
.bk-navigation span.lang-en::after { content: "" !important; }
.footer-bottom-area .widget-quick-links .lang-cn { display: none !important; }
.footer-bottom-area .widget-quick-links span.lang-en::after { content: "" !important; }

/* ── WhatsApp float: EN only (avoid "WhatsApp WhatsApp" repetition) ─────────── */
.wa-float .lang-cn { display: none !important; }
.wa-float span.lang-en::after { content: "" !important; }

/* ── All section headings: CN on new line, smaller ──────────────────────── */
h2 .lang-cn, h3 .lang-cn, h4 .lang-cn, h5 .lang-cn, h6 .lang-cn {
    display: block;
    font-size: 0.68em;
    font-weight: 500;
    margin-top: 0.15em;
    opacity: 0.8;
}
h2 .lang-en::after, h3 .lang-en::after, h4 .lang-en::after,
h5 .lang-en::after, h6 .lang-en::after {
    content: "" !important;
}

/* ── About page: clear space below interior photo before stats panel ─────── */
.pg-about-content-area {
    padding-bottom: 60px;
}

/* ── Banner: CN heading on new line, smaller ──────────────────────────────── */
.banner-text2-inner h1 .lang-cn {
    display: block;
    font-size: 0.6em;
    margin-top: 0.4em;
    font-weight: 500;
    opacity: 0.9;
}
.banner-text2-inner h1 .lang-en::after {
    content: "" !important;
}

/* ── Opening hours: stacked so bilingual day text doesn't squeeze time ─────── */
.timetable-block.opening-hours ul li {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.opening-hours-day .lang-en::after {
    content: "" !important;
}
.opening-hours-day .lang-cn {
    display: block;
    padding-left: 26px;
    font-size: 0.82em;
    opacity: 0.75;
}
.timetable-block.opening-hours ul li .opening-hours-time {
    padding-left: 26px;
}
.timetable-block.opening-hours .opening-hours-time.lang-en::after {
    content: "" !important;
}
.timetable-block.opening-hours .opening-hours-time.lang-cn {
    font-size: 0.82em;
    opacity: 0.75;
}

/* ── Clinic tagline: 医学，有温度。专业可见，关怀可感。 ───────────────────── */
.clinic-tagline {
    display: block;
    font-size: 1.15em;
    font-weight: 600;
    color: #903d5b;
    font-style: italic;
    margin-top: 1.1em;
    margin-bottom: 0.6em;
}
.bg-theme .clinic-tagline,
.banner-text2-inner .clinic-tagline {
    color: rgba(255,255,255,0.95);
}

/* ── Header logo sizing ─────────────────────────────────────────────────────── */
.header-logo img,
.mobile-menu .logo img {
    max-height: 60px;
    width: auto;
}

/* ── Clinic photos — CSS crop helpers ──────────────────────────────────────── */
.clinic-photo-storefront {
    object-fit: cover;
    object-position: top right;
    width: 100%;
    height: 350px;
}

.clinic-photo-interior {
    width: 100%;
    height: auto;
    display: block;
}

.clinic-photo-portrait {
    object-fit: cover;
    object-position: top center;
    width: 100%;
    height: 400px;
}

.clinic-photo-doctor {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 380px;
}

/* Contact page clinic cards: portrait 9/16 to match interior2.jpeg natural ratio */
.team-member-3-thumb .clinic-photo-interior,
.team-member-3-thumb .clinic-photo-storefront {
    aspect-ratio: 9 / 16;
    height: auto;
    object-fit: cover;
    width: 100%;
}

/* ── Doctor profile single layout ──────────────────────────────────────────── */
.doctors-profile-area .team-member-details-image img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    object-position: center 10%;
    border-radius: 4px;
}

/* ── WhatsApp floating button ──────────────────────────────────────────────── */
.wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9990;
    background: #25d366;
    color: #fff;
    border-radius: 50px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.wa-float:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* ── Contact map embed ──────────────────────────────────────────────────────── */
.map-embed-wrapper {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
}

.map-embed-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Contact info table: suppress separator, CN on own line ─────────────── */
.contact-information table span.lang-en::after { content: "" !important; }
.contact-information table .lang-cn {
    display: block;
    font-size: 0.82em;
    opacity: 0.75;
}

/* ── Chinese line-height ────────────────────────────────────────────────────── */
.cr-accordion-body { line-height: 1.9; }

/* ══════════════════════════════════════════════════════════════════════════════
   COLOR OVERRIDES
   style.css line 1573 bizarrely re-darkens headings/paragraphs even on colored
   backgrounds, so we re-assert the correct colors here.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Maroon bg (.bg-theme = #903d5b) → all text white ───────────────────── */
/* NOTE: span intentionally excluded — lang spans inherit from h5/p/li parents.
   Including span:not(.icon) here would win (0,2,0 > 0,1,1) over .bg-dark-light span
   on the opening-hours block that is nested inside the outer .bg-theme wrapper. */
.bg-theme,
.bg-theme h1, .bg-theme h2, .bg-theme h3, .bg-theme h4, .bg-theme h5, .bg-theme h6,
.bg-theme p, .bg-theme li,
.bg-theme label, .bg-theme small {
    color: #ffffff !important;
}
.bg-theme .bk-breadcrumb-list li,
.bg-theme .bk-breadcrumb-list li a,
.bg-theme .bk-breadcrumb-list li span {
    color: rgba(255,255,255,0.85) !important;
}
.bg-theme a {
    color: rgba(255,255,255,0.85) !important;
}
.bg-theme a:hover {
    color: #ffffff !important;
}

/* ── Blue bg (.bg-dark-light was #5a8ab5) → warm cream bg + dark grey text ─ */
.bg-dark-light {
    background: #f5f0e8 !important;
}
.bg-dark-light,
.bg-dark-light h1, .bg-dark-light h2, .bg-dark-light h3, .bg-dark-light h4,
.bg-dark-light h5, .bg-dark-light h6,
.bg-dark-light p, .bg-dark-light li, .bg-dark-light span,
.bg-dark-light label, .bg-dark-light td,
.bg-dark-light .opening-hours-day, .bg-dark-light .opening-hours-time,
.bg-dark-light .widget-quick-links ul li,
.bg-dark-light .widget-contact ul li {
    color: #1a1a1a !important;
}
.bg-dark-light a {
    color: #333333 !important;
}
.bg-dark-light a:hover {
    color: #903d5b !important;
}

/* ── Dark bg (.bg-dark = #2a2a2a) footer copyright → white text ─────────── */
.bg-dark,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-dark p, .bg-dark li, .bg-dark span, .bg-dark a {
    color: #ffffff !important;
}

/* ── Footer bottom link hover (cream bg area) ────────────────────────────── */
.footer-bottom-area .widget-quick-links ul li a:hover,
.footer-bottom-area .widget-contact ul li a:hover {
    color: #903d5b !important;
}

/* ── Timetable opening hours block — icon color on cream bg ─────────────── */
.opening-hours .fa {
    color: #903d5b !important;
}

/* ── Icons on maroon bg → white ─────────────────────────────────────────── */
.bg-theme .icon i,
.bg-theme i.fa {
    color: #ffffff !important;
}

/* ── Icons on cream bg → rose accent ────────────────────────────────────── */
.footer-bottom-area .widget-contact .icon i,
.footer-bottom-area .icon i {
    color: #903d5b !important;
}