/*
============================================================
 YANG GIA YẾN — UNIVERSAL ARTICLE SYSTEM v1.1
 Royal Editorial / Responsive / Nest-safe
============================================================
*/

body.yang-article-enabled .yang-article{
    --yang-red:#86131a;
    --yang-red-deep:#5e0c12;
    --yang-red-soft:#a52b31;
    --yang-gold:#b9914d;
    --yang-gold-bright:#d6b66f;
    --yang-gold-pale:#eee0bc;
    --yang-ivory:#fffaf0;
    --yang-paper:#fffdf9;
    --yang-ink:#332a25;
    --yang-brown:#503c31;
    --yang-muted:#796f68;
    --yang-line:rgba(185,145,77,.34);

    width:100%;
    max-width:900px;
    margin:0 auto;
    color:var(--yang-ink);
    font-family:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
    font-size:17px;
    font-weight:400;
    line-height:1.85;
    letter-spacing:0;
    word-spacing:normal;
    overflow-wrap:anywhere;
}

body.yang-article-enabled .yang-article *,
body.yang-article-enabled .yang-article *::before,
body.yang-article-enabled .yang-article *::after{
    box-sizing:border-box;
}

/* ---------- BODY COPY ---------- */
body.yang-article-enabled .yang-article p{
    margin:0 0 22px;
    color:var(--yang-ink);
    font-family:inherit;
    font-size:1em;
    font-weight:400;
    line-height:1.85;
    letter-spacing:0;
    word-spacing:normal;
}

/* Respect old justified body copy, but never headings */
body.yang-article-enabled .yang-article p[style*="text-align: justify"]{
    text-align:justify;
    text-justify:inter-word;
}

/* ---------- HEADING RESET: critical Nest fix ---------- */
body.yang-article-enabled .yang-article h1,
body.yang-article-enabled .yang-article h2,
body.yang-article-enabled .yang-article h3,
body.yang-article-enabled .yang-article h4,
body.yang-article-enabled .yang-article h5,
body.yang-article-enabled .yang-article h6,
body.yang-article-enabled .yang-article h1 strong,
body.yang-article-enabled .yang-article h2 strong,
body.yang-article-enabled .yang-article h3 strong,
body.yang-article-enabled .yang-article h4 strong,
body.yang-article-enabled .yang-article h5 strong,
body.yang-article-enabled .yang-article h6 strong{
    text-align:left !important;
    text-align-last:left !important;
    text-justify:auto !important;
    letter-spacing:-.018em !important;
    word-spacing:normal !important;
    white-space:normal !important;
    text-transform:none !important;
    font-stretch:normal !important;
    font-family:"Playfair Display",Georgia,"Times New Roman",serif !important;
    font-weight:700 !important;
    color:var(--yang-red-deep) !important;
    text-wrap:balance;
}

/* ---------- H1 ---------- */
body.yang-article-enabled .yang-article h1{
    margin:0 0 34px !important;
    font-size:clamp(34px,4.2vw,46px) !important;
    line-height:1.18 !important;
}

/* ---------- H2: royal chapter heading ---------- */
body.yang-article-enabled .yang-article h2{
    position:relative;
    margin:58px 0 27px !important;
    padding:0 0 18px 30px !important;
    border:0 !important;
    background:none !important;
    font-size:clamp(27px,3vw,32px) !important;
    line-height:1.32 !important;
}

body.yang-article-enabled .yang-article h2::before{
    content:"✦";
    position:absolute;
    left:0;
    top:.15em;
    color:var(--yang-gold);
    font-family:Georgia,serif;
    font-size:.62em;
    line-height:1;
    font-weight:400;
}

body.yang-article-enabled .yang-article h2::after{
    content:"";
    position:absolute;
    left:30px;
    bottom:0;
    width:112px;
    height:2px;
    background:linear-gradient(90deg,var(--yang-gold),var(--yang-gold-bright),transparent);
}

/* ---------- H3 ---------- */
body.yang-article-enabled .yang-article h3{
    position:relative;
    margin:40px 0 18px !important;
    padding-left:20px !important;
    font-size:clamp(21px,2.4vw,25px) !important;
    line-height:1.38 !important;
    color:var(--yang-red) !important;
}

body.yang-article-enabled .yang-article h3::before{
    content:"◆";
    position:absolute;
    left:0;
    top:.38em;
    color:var(--yang-gold);
    font-size:.38em;
}

/* ---------- H4/H5/H6 regular, unless SAPO ---------- */
body.yang-article-enabled .yang-article h4:not(.yang-auto-sapo),
body.yang-article-enabled .yang-article h5:not(.yang-auto-sapo),
body.yang-article-enabled .yang-article h6:not(.yang-auto-sapo){
    margin:30px 0 15px !important;
    font-size:20px !important;
    line-height:1.5 !important;
}

/* ---------- SAPO / royal decree card ---------- */
body.yang-article-enabled .yang-article .yang-auto-sapo,
body.yang-article-enabled .yang-article .sapo,
body.yang-article-enabled .yang-article .article-sapo,
body.yang-article-enabled .yang-article .post-sapo,
body.yang-article-enabled .yang-article .entry-sapo,
body.yang-article-enabled .yang-article .yang-sapo,
body.yang-article-enabled .yang-article .yd-blog-sapo,
body.yang-article-enabled .yang-article .lead,
body.yang-article-enabled .yang-article .article-intro{
    position:relative !important;
    display:block !important;
    margin:22px 0 54px !important;
    padding:40px 54px 38px !important;
    border:1px solid rgba(185,145,77,.58) !important;
    border-radius:4px !important;
    background:
        radial-gradient(circle at 0 0,rgba(185,145,77,.11),transparent 26%),
        radial-gradient(circle at 100% 100%,rgba(134,19,26,.055),transparent 27%),
        linear-gradient(135deg,#fffefb 0%,#fff8e9 50%,#fffdf8 100%) !important;
    box-shadow:
        0 18px 45px rgba(71,43,22,.09),
        inset 0 0 0 5px rgba(255,255,255,.92),
        inset 0 0 0 6px rgba(185,145,77,.14) !important;
    color:#564236 !important;
    font-family:"Playfair Display",Georgia,serif !important;
    font-size:clamp(18px,2vw,21px) !important;
    font-weight:400 !important;
    font-style:italic !important;
    line-height:1.78 !important;
    letter-spacing:0 !important;
    word-spacing:normal !important;
    text-align:center !important;
    text-align-last:center !important;
}

body.yang-article-enabled .yang-article .yang-auto-sapo strong,
body.yang-article-enabled .yang-article .sapo strong,
body.yang-article-enabled .yang-article .article-sapo strong,
body.yang-article-enabled .yang-article .yd-blog-sapo strong{
    color:var(--yang-red-deep) !important;
    font-weight:700 !important;
}

body.yang-article-enabled .yang-article .yang-auto-sapo::before,
body.yang-article-enabled .yang-article .sapo::before,
body.yang-article-enabled .yang-article .article-sapo::before,
body.yang-article-enabled .yang-article .post-sapo::before,
body.yang-article-enabled .yang-article .entry-sapo::before,
body.yang-article-enabled .yang-article .yang-sapo::before,
body.yang-article-enabled .yang-article .yd-blog-sapo::before,
body.yang-article-enabled .yang-article .lead::before,
body.yang-article-enabled .yang-article .article-intro::before{
    content:"✦";
    position:absolute;
    top:-18px;
    left:50%;
    transform:translateX(-50%);
    display:grid;
    place-items:center;
    width:56px;
    height:36px;
    background:var(--yang-ivory);
    color:var(--yang-gold);
    font-size:19px;
    font-style:normal;
}

body.yang-article-enabled .yang-article .yang-auto-sapo::after,
body.yang-article-enabled .yang-article .sapo::after,
body.yang-article-enabled .yang-article .article-sapo::after,
body.yang-article-enabled .yang-article .post-sapo::after,
body.yang-article-enabled .yang-article .entry-sapo::after,
body.yang-article-enabled .yang-article .yang-sapo::after,
body.yang-article-enabled .yang-article .yd-blog-sapo::after,
body.yang-article-enabled .yang-article .lead::after,
body.yang-article-enabled .yang-article .article-intro::after{
    content:"◆  ─────  ✦  ─────  ◆";
    position:absolute;
    bottom:-10px;
    left:50%;
    transform:translateX(-50%);
    padding:0 13px;
    background:#fff;
    color:var(--yang-gold);
    font-size:8px;
    line-height:20px;
    letter-spacing:2px;
    white-space:nowrap;
    font-style:normal;
}

/* ---------- Links / emphasis ---------- */
body.yang-article-enabled .yang-article a{
    color:var(--yang-red);
    text-decoration:none;
    border-bottom:1px solid rgba(134,19,26,.23);
    transition:color .2s ease,border-color .2s ease;
}
body.yang-article-enabled .yang-article a:hover{
    color:var(--yang-gold);
    border-color:var(--yang-gold);
}
body.yang-article-enabled .yang-article p strong,
body.yang-article-enabled .yang-article li strong{
    color:#463329;
    font-weight:700;
}

/* ---------- Lists ---------- */
body.yang-article-enabled .yang-article ul,
body.yang-article-enabled .yang-article ol{
    margin:23px 0 30px;
    padding-left:31px;
    color:var(--yang-ink);
}
body.yang-article-enabled .yang-article li{
    margin:9px 0;
    padding-left:5px;
    line-height:1.75;
}
body.yang-article-enabled .yang-article ul li::marker{color:var(--yang-gold)}
body.yang-article-enabled .yang-article ol li::marker{
    color:var(--yang-red);
    font-weight:700;
}

/* FAQ pattern used in existing content */
body.yang-article-enabled .yang-article ol[start]{
    position:relative;
    margin:22px 0 8px;
    padding:18px 22px 18px 48px;
    border:1px solid rgba(185,145,77,.22);
    border-left:3px solid var(--yang-gold);
    border-radius:4px;
    background:linear-gradient(90deg,rgba(255,250,240,.95),#fff);
}
body.yang-article-enabled .yang-article ol[start] > li{
    margin:0;
    color:var(--yang-red-deep);
}
body.yang-article-enabled .yang-article ol[start] > li strong{
    color:var(--yang-red-deep);
    font-family:"Playfair Display",Georgia,serif;
    font-size:18px;
}

/* ---------- Blockquote ---------- */
body.yang-article-enabled .yang-article blockquote{
    position:relative;
    margin:42px 0;
    padding:30px 38px 30px 43px;
    border:0;
    border-left:4px solid var(--yang-gold);
    background:linear-gradient(90deg,#fff7e7,#fffdf9);
    color:#594638;
    font-family:"Playfair Display",Georgia,serif;
    font-size:clamp(18px,2vw,21px);
    font-style:italic;
    line-height:1.75;
}
body.yang-article-enabled .yang-article blockquote p:last-child{margin-bottom:0}

/* ---------- Images ---------- */
body.yang-article-enabled .yang-article img{
    display:block;
    max-width:100% !important;
    height:auto !important;
    border-radius:5px;
}
body.yang-article-enabled .yang-article p > img:only-child{
    width:100%;
    margin:34px auto;
    box-shadow:0 12px 34px rgba(53,35,23,.10);
}
body.yang-article-enabled .yang-article figure,
body.yang-article-enabled .yang-article .wp-block-image,
body.yang-article-enabled .yang-article .wp-caption{
    width:100% !important;
    max-width:100% !important;
    margin:35px auto;
}
body.yang-article-enabled .yang-article figcaption,
body.yang-article-enabled .yang-article .wp-caption-text{
    margin-top:10px;
    color:var(--yang-muted);
    font-size:13px;
    font-style:italic;
    line-height:1.6;
    text-align:center;
}

/* ---------- Tables ---------- */
body.yang-article-enabled .yang-article table{
    width:100% !important;
    margin:36px 0;
    border:1px solid #e8dbc4;
    border-collapse:separate;
    border-spacing:0;
    border-radius:6px;
    background:#fff;
    overflow:hidden;
    font-size:15px;
    line-height:1.6;
    box-shadow:0 10px 30px rgba(70,45,25,.055);
}
body.yang-article-enabled .yang-article th,
body.yang-article-enabled .yang-article td{
    padding:15px 17px;
    border-right:1px solid #eadfce;
    border-bottom:1px solid #eadfce;
    vertical-align:top;
    text-align:left;
}
body.yang-article-enabled .yang-article tr > :last-child{border-right:0}
body.yang-article-enabled .yang-article tbody tr:last-child > td{border-bottom:0}
body.yang-article-enabled .yang-article thead th,
body.yang-article-enabled .yang-article thead td{
    background:linear-gradient(135deg,var(--yang-red-deep),var(--yang-red));
    color:#fff !important;
    font-weight:700;
}
body.yang-article-enabled .yang-article thead strong{color:#fff !important}
body.yang-article-enabled .yang-article tbody tr:nth-child(even){background:#fffaf2}

/* ---------- Media ---------- */
body.yang-article-enabled .yang-article iframe,
body.yang-article-enabled .yang-article video{
    display:block;
    width:100%;
    max-width:100%;
    margin:34px auto;
    border:0;
    border-radius:6px;
}
body.yang-article-enabled .yang-article .wp-block-embed{width:100%;margin:35px 0}

/* ---------- WP helpers ---------- */
body.yang-article-enabled .yang-article .aligncenter{
    display:block;
    margin-left:auto!important;
    margin-right:auto!important;
}
body.yang-article-enabled .yang-article .alignleft{float:left;margin:8px 28px 20px 0}
body.yang-article-enabled .yang-article .alignright{float:right;margin:8px 0 20px 28px}
body.yang-article-enabled .yang-article::after{content:"";display:table;clear:both}
body.yang-article-enabled .yang-article p:empty{display:none}

body.yang-article-enabled .yang-article hr{
    width:min(150px,40%);
    margin:52px auto;
    border:0;
    border-top:1px solid var(--yang-gold);
    opacity:.65;
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
    body.yang-article-enabled .yang-article{
        max-width:100%;
        padding-inline:24px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width:767px){
    body.yang-article-enabled .yang-article{
        padding-inline:16px;
        font-size:16px;
        line-height:1.8;
    }

    body.yang-article-enabled .yang-article p[style*="text-align: justify"]{
        text-align:left;
    }

    body.yang-article-enabled .yang-article h1{
        font-size:30px !important;
        line-height:1.22 !important;
    }

    body.yang-article-enabled .yang-article h2{
        margin-top:44px !important;
        padding-left:24px !important;
        font-size:24px !important;
        line-height:1.35 !important;
    }
    body.yang-article-enabled .yang-article h2::after{left:24px;width:90px}

    body.yang-article-enabled .yang-article h3{
        margin-top:34px !important;
        font-size:21px !important;
    }

    body.yang-article-enabled .yang-article .yang-auto-sapo,
    body.yang-article-enabled .yang-article .sapo,
    body.yang-article-enabled .yang-article .article-sapo,
    body.yang-article-enabled .yang-article .post-sapo,
    body.yang-article-enabled .yang-article .entry-sapo,
    body.yang-article-enabled .yang-article .yang-sapo,
    body.yang-article-enabled .yang-article .yd-blog-sapo,
    body.yang-article-enabled .yang-article .lead,
    body.yang-article-enabled .yang-article .article-intro{
        margin-bottom:44px !important;
        padding:32px 23px 30px !important;
        font-size:18px !important;
        line-height:1.7 !important;
    }

    body.yang-article-enabled .yang-article blockquote{
        padding:24px 22px 24px 27px;
        font-size:18px;
    }

    body.yang-article-enabled .yang-article .alignleft,
    body.yang-article-enabled .yang-article .alignright{
        float:none;
        display:block;
        margin:25px auto;
    }

    body.yang-article-enabled .yang-article table{
        display:block;
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    body.yang-article-enabled .yang-article th,
    body.yang-article-enabled .yang-article td{
        min-width:145px;
    }

    body.yang-article-enabled .yang-article ol[start]{
        padding:16px 17px 16px 40px;
    }
}
