.elementor-kit-886{--e-global-color-primary:#B1976B;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#000000;--e-global-color-accent:#D5AD69;--e-global-color-188e1669:#54595F;--e-global-color-2dad4c66:RGBA(29, 30, 32, 0.34);--e-global-color-5a7d01b2:#000000;--e-global-color-202945e9:#2A2C2D;--e-global-color-5524aeb7:#E0E0E0;--e-global-color-228ea47:#7A7A7A;--e-global-color-eac1a71:#E25200;--e-global-color-73a487a:#EEEEEE;--e-global-typography-primary-font-family:"Lora";--e-global-typography-primary-font-size:32px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-text-transform:none;--e-global-typography-secondary-font-family:"Times New Roman";--e-global-typography-secondary-font-size:2em;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-line-height:1.3px;--e-global-typography-text-font-family:"Lora";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-line-height:1.65em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Times New Roman";--e-global-typography-accent-font-size:14px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-text-transform:none;--e-global-typography-accent-line-height:1.4px;--e-global-typography-42ad748-font-family:"Times New Roman";--e-global-typography-42ad748-font-size:26px;--e-global-typography-42ad748-font-weight:400;background-color:var( --e-global-color-5524aeb7 );color:#343434;font-family:"Source Serif 4", Times new roman;font-size:18px;font-weight:400;text-transform:none;font-style:normal;text-decoration:none;line-height:1.75em;}.elementor-kit-886 e-page-transition{background-color:#FFBC7D;}.elementor-kit-886 a{font-family:"Lora", Times new roman;font-size:18px;font-weight:400;font-style:normal;text-decoration:none;line-height:1.75px;}.elementor-kit-886 h1{color:var( --e-global-color-primary );font-family:"Lora", Times new roman;font-size:34px;font-weight:700;text-transform:none;font-style:normal;text-decoration:none;line-height:1.75em;}.elementor-kit-886 h2{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Times new roman;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );}.elementor-kit-886 h3{font-family:"Lora", Times new roman;font-size:26px;font-weight:600;text-transform:none;font-style:normal;text-decoration:none;line-height:1.4em;}.elementor-kit-886 h4{font-family:var( --e-global-typography-secondary-font-family ), Times new roman;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-886 h5{font-family:var( --e-global-typography-text-font-family ), Times new roman;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-886 h6{font-family:var( --e-global-typography-accent-font-family ), Times new roman;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-886 label{line-height:3.5em;letter-spacing:1.6px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 20px;--widgets-spacing-row:0px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-886{--e-global-typography-primary-font-size:2em;--e-global-typography-primary-line-height:1.25em;--e-global-typography-secondary-font-size:1.7em;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-text-font-size:16px;--e-global-typography-text-line-height:1.7em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-size:13px;--e-global-typography-accent-line-height:1.45em;font-size:17px;line-height:1.75em;}.elementor-kit-886 a{font-size:17px;line-height:1.75em;}.elementor-kit-886 h1{font-size:30px;line-height:1.25em;}.elementor-kit-886 h2{font-size:var( --e-global-typography-primary-font-size );}.elementor-kit-886 h3{font-size:24px;line-height:1.4em;}.elementor-kit-886 h4{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-886 h5{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-886 h6{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-886{--e-global-typography-primary-font-size:1.7em;--e-global-typography-primary-line-height:1.3em;--e-global-typography-secondary-font-size:1.5em;--e-global-typography-secondary-line-height:1.35em;--e-global-typography-text-font-size:15px;--e-global-typography-text-line-height:1.75em;--e-global-typography-accent-font-size:12px;--e-global-typography-accent-line-height:1.5em;font-size:16px;line-height:1.75em;}.elementor-kit-886 a{font-size:16px;line-height:1.75em;}.elementor-kit-886 h1{font-size:26px;line-height:1.25em;}.elementor-kit-886 h2{font-size:var( --e-global-typography-primary-font-size );}.elementor-kit-886 h3{font-size:20px;line-height:1.4em;}.elementor-kit-886 h4{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-886 h5{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-886 h6{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//****************************************************
   OUR NARRATIVES — SINGLE POST STYLING (CLEAN)
   - Title: white
   - Meta: gold
   - Lang buttons: white → gold hover
   - Body: beige background, dark text
****************************************************/


/* -----------------------------------------------
   0. HERO IMAGE HELPER (no side padding)
------------------------------------------------- */

/* If your hero image section uses .bigcard-image, remove its side padding */
.bigcard-image {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* -----------------------------------------------
   A. HERO SECTION (black background + hero image)
------------------------------------------------- */

.single-post .on-hero-section {
    background-color: #050505;
    padding-top: 40px;
    padding-bottom: 60px;
}

/* Hero Image – full width, 16:9 */
.single-post .on-post-hero img {
    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: none !important;

    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    display: block !important;
    margin-bottom: 40px;
}


/* -----------------------------------------------
   B. POST TITLE (WHITE) – live + editor
------------------------------------------------- */

.single-post .elementor-widget-post-title .elementor-heading-title,
.elementor-editor-active .elementor-widget-post-title .elementor-heading-title {
    color: #ffffff !important;
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 16px;
}


/* -----------------------------------------------
   C. META ROW ("by Adelina · date") (GOLD)
------------------------------------------------- */

.on-meta-row,
.on-meta-row span,
.single-post .on-meta-row,
.single-post .on-meta-row span {
    color: #d4af63 !important;
    font-size: 1rem;
}

.single-post .on-meta-row {
    margin-bottom: 18px;
}

.single-post .on-meta-dot {
    margin: 0 8px;
}


/* -----------------------------------------------
   D. LANGUAGE BUTTONS (white → gold on hover)
------------------------------------------------- */

.single-post .on-lang-row {
    display: flex;
    gap: 14px;
    margin-bottom: 40px;
}

/* Base style: white text, gold border */
.single-post .on-lang-btn {
    padding: 6px 16px;
    font-size: 0.9rem;
    border: 1px solid #d4af63;
    border-radius: 999px;
    text-decoration: none;
    color: #ffffff;          /* white text */
    background: transparent;
    transition: 0.25s ease;
}

/* Force language links to be white by default (even if global colors exist) */
.single-post .on-lang-btn,
.on-lang-row .on-lang-btn,
.lang-en,
.lang-zh {
    color: #ffffff !important;
}

/* Hover: gold pill */
.single-post .on-lang-btn:hover {
    background: #d4af63;
    color: #050505;
}

/* Optional active language state */
.lang-active {
    background: #d4af63 !important;
    color: #050505 !important;
    font-weight: 600;
}


/* -----------------------------------------------
   E. BODY CONTENT SECTION (BEIGE)
------------------------------------------------- */

.single-post .on-body-section {
    background-color: #f6f1e5;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Inner content container */
.single-post .on-body-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 40px;
}

/* Headings inside content */
.single-post .on-body-inner h2,
.single-post .on-body-inner h3 {
    color: #111111;
    margin-top: 2.2em;
    margin-bottom: 0.7em;
}

/* Body text inside the inner wrapper */
.single-post .on-body-inner p,
.single-post .on-body-inner li {
    color: #222222;
    font-size: 1.05rem;
    line-height: 1.8;
}


/* -----------------------------------------------
   F. SAFETY NET: MAKE POST CONTENT TEXT DARK
   (even if .on-body-inner isn't applied)
------------------------------------------------- */

.single-post .elementor-widget-post-content,
.single-post .elementor-widget-post-content p,
.single-post .elementor-widget-post-content span,
.single-post .elementor-widget-post-content li {
    color: #111111 !important;
    opacity: 1 !important;
}
/* Beige background for the content block */
.single-post .tb-below-hero {
    background-color: #f6f1e5;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Inner padding + max width */
.single-post .tb-below-hero .elementor-widget-post-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 40px;
}

/* Body text */
.single-post .tb-below-hero .elementor-widget-post-content,
.single-post .tb-below-hero .elementor-widget-post-content p,
.single-post .tb-below-hero .elementor-widget-post-content li,
.single-post .tb-below-hero .elementor-widget-post-content span {
    color: #222222 !important;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Headings */
.single-post .tb-below-hero .elementor-widget-post-content h2,
.single-post .tb-below-hero .elementor-widget-post-content h3 {
    color: #111111;
    margin-top: 2.2em;
    margin-bottom: 0.7em;
}
/********************************************
 OUR NARRATIVES – SINGLE POST GLOBAL STYLES
*********************************************/

/* ---------------------------
 1. MAIN ARTICLE BODY WRAPPER
    (Column with Post Content)
   class: single-body
----------------------------*/

.single-post .single-body {
    max-width: 760px;            /* 720–800px sweet spot */
    margin: 0 auto;              /* center text column */
    padding: 0 24px;             /* side padding on desktop/tablet */
    box-sizing: border-box;
}

/* Slightly tighter padding on small phones */
@media (max-width: 480px) {
    .single-post .single-body {
        padding: 0 18px;
    }
}

/* Body text typography */
.single-post .single-body p,
.single-post .single-body li {
    line-height: 1.75;           /* good for EN + 中文 */
    margin-bottom: 1.15em;       /* consistent vertical rhythm */
}

/* Headings spacing inside article */
.single-post .single-body h2,
.single-post .single-body h3,
.single-post .single-body h4 {
    margin-top: 2.4em;
    margin-bottom: 0.6em;
}

/* Images inside article content */
.single-post .single-body img,
.single-post .single-body .wp-block-image,
.single-post .single-body .elementor-widget-image {
    margin: 2.2em 0;
    display: block;
    height: auto;
    max-width: 100%;
}

/* Make sure the very first element doesn't have extra top gap */
.single-post .single-body > :first-child {
    margin-top: 0;
}

/* ---------------------------
 2. HERO AREA WITH FEATURED IMAGE
    (Section containing hero image + title/meta)
    class: single-hero
----------------------------*/

.single-post .single-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 48px;         /* breathing room before article text */
}

/* Soft gradient at bottom of hero to help title readability */
.single-post .single-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35%;                 /* how tall the gradient band is */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
    pointer-events: none;
}

/* Ensure hero inner container (columns) sits above gradient */
.single-post .single-hero > .elementor-container,
.single-post .single-hero > .e-con {
    position: relative;
    z-index: 2;
}

/* ---------------------------
 3. AUTHOR BOX PANEL
    (Section / Column for author photo + bio)
    class: single-author-box
----------------------------*/

.single-post .single-author-box {
    max-width: 760px;
    margin: 56px auto 32px;
    padding: 20px 24px;
    background-color: #101010;   /* subtle dark panel */
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 99, 0.18);  /* soft gold tint */
    box-sizing: border-box;
}

/* Optional helper if you add a class="author-name" inside */
.single-post .single-author-box .author-name {
    color: #d4af63;              /* brand gold */
    font-weight: 600;
}

/* ---------------------------
 4. OPTIONAL SECTION DIVIDERS
    Add a Divider / Spacer widget
    and give it class: single-section-divider
----------------------------*/

.single-post .single-body .single-section-divider {
    border-top: 1px solid rgba(212, 175, 99, 0.22);
    margin: 40px auto;
    width: 100%;
}

/* ---------------------------
 5. RELATED ARTICLES BLOCK
    Container for "Related articles"
    class: single-related
----------------------------*/

.single-post .single-related {
    max-width: 1100px;
    margin: 56px auto 0;
    padding: 0 24px 40px;
    box-sizing: border-box;
}

/* ---------------------------
 6. OPTIONAL "BACK TO TOP" BUTTON
    Any widget with class: single-back-to-top
----------------------------*/

.single-post .single-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 32px;
    z-index: 999;
    background: #050505;
    color: #d4af63;
    border: 1px solid rgba(212, 175, 99, 0.7);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.single-post .single-back-to-top:hover {
    opacity: 1;
    box-shadow: 0 0 10px rgba(212, 175, 99, 0.6);
}
/* Remove any gap / border between header and hero */
.single-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    box-shadow: none !important;
}
/********************************************
 FORCE SINGLE POST LAYOUT OVERRIDES
 (strong version with !important)
********************************************/

/* MAIN ARTICLE BODY – max width + centering */
.single-body {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

/* Body text line-height + paragraph spacing */
.single-body p,
.single-body li {
    line-height: 1.75 !important;
    margin-bottom: 1.15em !important;
}

/* Headings spacing */
.single-body h2,
.single-body h3,
.single-body h4 {
    margin-top: 2.4em !important;
    margin-bottom: 0.6em !important;
}

/* Images inside article */
.single-body img,
.single-body .wp-block-image,
.single-body .elementor-widget-image {
    margin: 2.2em 0 !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}

/* HERO SECTION – spacing + gradient */
.single-hero {
    position: relative !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 60px !important; /* more breathing room below hero */
}

/* gradient at the bottom of hero image */
.single-hero::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 35% !important;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.55) 100%
    ) !important;
    pointer-events: none !important;
}

/* Remove gold border/shadow from Single Post hero image */
.single-hero img {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}
/* Remove the thin black strip above hero image */
.single-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/* If the section above the hero is injecting a small gap */
.single-hero.elementor-section,
.single-hero.e-con {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove any bottom border/shadow from the header */
header,
.site-header,
.elementor-location-header,
.main-header-bar,
.ast-primary-header-bar {
    border-bottom: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* Fix hero image covering issue — bring hero above the logo */
.single-hero {
    position: relative !important;
    z-index: 100 !important;
}
/* Fix unwanted black bands in Single Post */
.single-post .elementor-section {
    background-color: #050505 !important;
}

/* Keep the beige body section beige */
.single-post .tb-below-hero,
.single-post .on-body-section {
    background-color: #f6f1e5 !important;
}
/* Unify dark background in Single Post hero area */
.single-post .post-hero,
.single-post .single-hero,
.single-post .post-hero .elementor-container,
.single-post .post-hero .elementor-column {
    background-color: #050505 !important;   /* use your site-wide dark */
}

/* Keep the beige content area beige */
.single-post .tb-below-hero,
.single-post .on-body-section {
    background-color: #f6f1e5 !important;
}
/********************************************
   OUR NARRATIVES — CONTENT WIDTH + IMAGE FIX
********************************************/

/* 1. WIDEN THE MAIN ARTICLE COLUMN
   Increase from ~760px → ~860px
   Safe for readability in both English + Chinese
*/
.single-post .single-body {
    max-width: 860px !important;     /* adjust to 820–900 if needed */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}


/* 2. PERFECTLY CENTER ALL IMAGES INSIDE CONTENT */
.single-post .single-body img,
.single-post .single-body .wp-block-image img,
.single-post .single-body figure img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: auto !important;
    max-width: 100% !important;
}


/* 3. Optional — center WordPress image captions */
.single-post .single-body figcaption {
    text-align: center !important;
    font-size: 0.9rem;
    opacity: 0.85;
    margin-top: 0.4em;
}
 /****************************************************
   OUR NARRATIVES — SINGLE POST STYLING (OPTION A)
   - Hero: black background, full-width image
   - Content: beige background
   - Inner images: centered, rounded, shadow
   - Lang buttons: white → gold hover
****************************************************/


/* -----------------------------------------------
   0. HERO IMAGE HELPER (no side padding)
   - For the big hero image container with class .bigcard-image
------------------------------------------------- */

.bigcard-image {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.bigcard-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;

    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;

    display: block !important;
    box-shadow: none !important;
    border-radius: 24px !important;  /* hero image also with rounded corners */
}


/* -----------------------------------------------
   A. HERO SECTION (black background)
   - Section/Container has class: .on-hero-section
------------------------------------------------- */

.single-post .on-hero-section {
    background-color: #050505;
    padding-top: 40px;
    padding-bottom: 60px;
}

/* Keep hero content boxed (adjust max-width to taste) */
.single-post .on-hero-section .elementor-container,
.single-post .on-hero-section .elementor-section {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}


/* -----------------------------------------------
   B. TITLE, META, AND LANGUAGE BUTTONS
------------------------------------------------- */

/* Post title – white */
.single-post .on-hero-section .elementor-heading-title,
.single-post .on-hero-section .post-title,
.single-post .on-hero-section .entry-title {
    color: #ffffff !important;
}

/* Meta row (author + date) – gold */
.single-post .on-meta-row,
.single-post .on-meta-row span,
.single-post .on-meta-row a {
    color: #d4af63 !important;
    font-size: 14px;
}

/* Language buttons row container (HTML widget or container with this class) */
.single-post .on-lang-row {
    margin-top: 12px;
}

/* Language buttons */
.single-post .on-lang-row a {
    display: inline-block;
    padding: 6px 14px;
    margin-right: 8px;

    border-radius: 999px;
    border: 1px solid #d4af63;

    font-size: 13px;
    text-decoration: none;

    color: #ffffff;
    background-color: transparent;

    transition: all 0.25s ease;
}

/* Hover: gold pill with glow */
.single-post .on-lang-row a:hover {
    background-color: #d4af63;
    color: #050505;
    box-shadow:
        0 0 0 1px #d4af63,
        0 0 18px rgba(212, 175, 99, 0.75);
}


/* -----------------------------------------------
   C. CONTENT AREA (beige background)
   - Outer content container should have class: .on-post-content
------------------------------------------------- */

/* Make the entire content section beige and centered */
.single-post .on-post-content {
    background-color: #f6f1e5;
    padding-top: 60px;
    padding-bottom: 80px;
}

/* Box the inner content width */
.single-post .on-post-content .elementor-container,
.single-post .on-post-content .elementor-section {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Base text color inside content */
.single-post .on-post-content,
.single-post .on-post-content p,
.single-post .on-post-content span,
.single-post .on-post-content li {
    color: #111111;
}

/* Optional: slightly larger, airy body text */
.single-post .on-post-content p {
    font-size: 18px;
    line-height: 1.8;
}


/* -----------------------------------------------
   D. INNER CONTENT IMAGES
   - Applies to images INSIDE the beige content area
   - Keeps them centered with rounded corners + shadow
------------------------------------------------- */

/* Center Elementor image widgets */
.single-post .on-post-content .elementor-widget-image,
.single-post .on-post-content figure {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* The actual image styling */
.single-post .on-post-content .elementor-widget-image img,
.single-post .on-post-content figure img {
    display: block;
    margin-left: auto;
    margin-right: auto;

    max-width: 800px;
    width: 100%;

    border-radius: 24px; /* round corners */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); /* stronger shadow */
}

/* Caption under image */
.single-post .on-post-content figcaption,
.single-post .on-post-content .image-caption {
    margin-top: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    color: #555555;
    text-align: center;
}


/* -----------------------------------------------
   E. SPACING TWEAKS BETWEEN BLOCKS
------------------------------------------------- */

.single-post .on-post-content .elementor-widget {
    margin-bottom: 24px;
}

.single-post .on-post-content .elementor-widget:last-child {
    margin-bottom: 0;
}


/* -----------------------------------------------
   F. RESPONSIVE TWEAKS
------------------------------------------------- */

@media (max-width: 767px) {

    .single-post .on-hero-section {
        padding-top: 24px;
        padding-bottom: 40px;
    }

    .single-post .on-post-content {
        padding-top: 40px;
        padding-bottom: 60px;
    }

    /* Let images breathe a bit on mobile */
    .single-post .on-post-content .elementor-widget-image img,
    .single-post .on-post-content figure img {
        max-width: 100%;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    }
}
 
 /****************************************************
   SINGLE POST — Image Styling (Light Gray Border)
****************************************************/
.single-post .elementor-widget-theme-post-content img,
.single-post .elementor-widget-post-content img,
.single-post .entry-content img,
.single-post .on-body-inner img,
.single-post .tb-below-hero img {
    border: 1.5px solid rgba(0, 0, 0, 0.12);  /* soft neutral border */
    border-radius: 8px;
    box-shadow: none;
    margin-top: 18px;
    margin-bottom: 24px;
    display: block;
    max-width: 100%;
    height: auto;
}
 /****************************************************
  SINGLE POST — Remove any existing shadows on images
****************************************************/
.single-post .elementor-widget-theme-post-content img,
.single-post .elementor-widget-post-content img,
.single-post .entry-content img,
.single-post .on-body-inner img,
.single-post .tb-below-hero img {
    box-shadow: none !important;  /* wipe all shadows */
}
 
 /* Single post content card – keep beige, remove heavy shadow */
.single-post .tb-below-hero,
.single-post .on-body-inner {
    box-shadow: none !important;
}
 
 /****************************************************
  SINGLE POST — Soft, Elegant Shadow for Page/Card
****************************************************/
.single-post .elementor-section.elementor-top-section,
.single-post .elementor-section.elementor-inner-section {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
}

/****************************************************
  SINGLE POST — Soft Shadow for Images
****************************************************/
.single-post .elementor-widget-theme-post-content img,
.single-post .elementor-widget-post-content img,
.single-post .entry-content img,
.single-post .on-body-inner img,
.single-post .tb-below-hero img {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.10) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.12);  /* soft subtle border */
}
 
 
 /* BACK TO TOP — centered + gold */
.on-back-to-top {
    display: block;                 /* take full row */
    text-align: center !important;  /* center the text */
    margin: 40px auto 20px;
    font-family: "Lora", serif;
    font-size: 15px;
    color: #b89b4f;
    cursor: pointer;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: 0.25s ease;
}

.on-back-to-top:hover {
    color: #d8c186;
    transform: translateY(-1px);
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}
 /* FORCE HEADER LOGO TO LEFT */
header .elementor-widget-image,
.elementor-location-header .elementor-widget-image {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}
 
 /* FORCE ELEMENTOR HEADER LOGO TO LEFT */
.elementor-location-header .on-logo-left,
.elementor-location-header .on-logo-left img {
    display: block !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
}
 
 /* HEADER: force logo column and image to the far left */
.elementor-location-header .on-header-logo-col {
    display: flex !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.elementor-location-header .on-header-logo-col .elementor-widget-image {
    text-align: left !important;
}

.elementor-location-header .on-header-logo-col .elementor-widget-image img {
    display: block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}
 
 /* HOME PAGE — CENTER LOGO (override all header forces) */
body.home .elementor-widget-image {
    text-align: center !important;
}

body.home .elementor-widget-image img {
    margin-left: auto !important;
    margin-right: auto !important;
}

body.home .on-header-logo-col {
    justify-content: center !important;
}
 
 /****************************************************
  SINGLE POST — HAMBURGER ICON GOLD
****************************************************/
body.single-post .elementor-menu-toggle,
body.single-post .elementor-menu-toggle *,
body.single-post button.elementor-menu-toggle,
body.single-post button.elementor-menu-toggle * {
    color: #d4af63 !important;   /* gold */
    fill: #d4af63 !important;
    stroke: #d4af63 !important;
    border-color: #d4af63 !important;
}
 
 
 /* Desktop */
.chinese-content {
  font-family:
    "Noto Serif SC",
    "Source Han Serif SC",
    "Songti SC",
    "STSong",
    "SimSun",
    "PingFang SC",
    "Microsoft YaHei",
    serif !important;
  font-size: 18px;
  line-height: 1.9;
  color: #1f1d1b;
  text-rendering: auto;
  letter-spacing: 0;
}

/* Headings */
.chinese-content h1,
.chinese-content h2,
.chinese-content h3,
.chinese-content h4,
.chinese-content h5,
.chinese-content h6 {
  font-family:
    "Noto Serif SC",
    "Source Han Serif SC",
    "Songti SC",
    "PingFang SC",
    serif !important;
  font-weight: 700;
  color: #1f1d1b;
  letter-spacing: 0;
  text-rendering: auto;
}

/* Paragraphs */
.chinese-content p {
  font-family:
    "Noto Serif SC",
    "Source Han Serif SC",
    "Songti SC",
    serif !important;
  font-size: 18px;
  line-height: 1.9;
  color: #1f1d1b;
}

/* Keep English italic elegant */
.chinese-content em,
.chinese-content i {
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-style: italic;
}

/* Captions */
.chinese-content figcaption,
.chinese-content .wp-caption-text {
  font-family:
    "Noto Serif SC",
    "Source Han Serif SC",
    serif !important;
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(31,29,27,0.72);
}

/* Tablet */
@media (max-width: 1024px) {
  .chinese-content,
  .chinese-content p {
    font-size: 17px;
    line-height: 1.85;
  }
  .chinese-content figcaption,
  .chinese-content .wp-caption-text {
    font-size: 14px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .chinese-content,
  .chinese-content p {
    font-size: 16.5px;
    line-height: 1.8;
  }
  .chinese-content figcaption,
  .chinese-content .wp-caption-text {
    font-size: 13px;
  }
}


/* Enhanced fix for left-right shifting */
html, body {
  overflow-x: hidden !important;
  position: relative;
  width: 100%;
}

/* Force the main Elementor wrapper to clip any "bleeding" elements */
body.home #page-content, 
body.home .elementor-inner, 
body.home .elementor {
  overflow: hidden !important;
}/* End custom CSS */