/* =========================================================
   GLOBAL OVERRIDES & FIXES
   ========================================================= */

#experiences p,
#experiences article p,
#experiences article header p,
#experiences article header h4,
#experiences article header h2 {
    margin: 1rem 0 !important;
    line-height: 1.25 !important;
}

/* Add padding inside each experience card */
#experiences .posts article {
    padding: 2rem 1.25rem !important;
}

/* Remove white background in #main */
#main {
    background-color: transparent !important;
}

/* Hide chatbot by default */
.chatbot-container iframe {
    display: none;
}

/* images */
/* parent (span) */
.special-img {
    display: block;
    width: min(100%, 50rem);
    margin: 0 auto 2rem;
}

.smaller-img {
    display: block;
    width: min(100%, 25rem);
    margin: 0 auto 2rem;
}

/* child (image) */
.special-img img,
.smaller-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Embedded resume */
.resume-embed {
    display: block;
    width: 100%;
    height: 80vh;
    min-height: 36rem;
    margin: 0 0 2rem;
    border: 1px solid rgba(255, 230, 200, 0.15);
    border-radius: 6px;
    background: #ffffff;
}

@media screen and (max-width: 736px) {
    .resume-embed {
        height: 70vh;
        min-height: 28rem;
    }
}

/* Chatbot container visual style */
#chatbot .chatbot-container {
    margin-top: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Divider strip */
.section-divider {
    border: 0;
    height: 1px;
    width: 60%;
    margin: 1.5rem auto 2rem auto;
    background: linear-gradient(
        to right,
        rgba(255,230,200,0),
        rgba(255,230,200,0.35),
        rgba(255,230,200,0)
    )
}

/* =========================================================
   BACKGROUND + TEXTURES
   ========================================================= */

#wrapper {
    background-image:
        url("../../images/overlay.png"),
        linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.6)),
        url("../../images/wuxia_texture.JPG");
    background-blend-mode: normal, multiply, normal, overlay;
}

/* Music visualizer */
/* #music-visualizer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    pointer-events: none;
    opacity: 0.25;
    z-index: 10;
} */

/* =========================================================
   TYPOGRAPHY — WUXIA HEADERS & BODY TEXT
   ========================================================= */

/* Brush-stroke style headings */
#wrapper h1, 
#wrapper h2, 
#wrapper h3,
.post header.major h2,
.post header.major h3,
#intro h1,
#intro h2,
header h1,
header h2,
li {
    font-family: "KaiTi", "STKaiti", "SimSun", serif;
    letter-spacing: 1px;
    font-weight: 600;
    background-image: linear-gradient(
        to right,
        rgba(255,230,200,0.9),
        rgba(255,230,200,0.6)
    );
    -webkit-background-clip: text;
    color: transparent;
}

/* Solid opaque text for Intro only */
#intro h1,
#intro h2,
#intro p {
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    color: #ffffff !important;
    text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000;
}

/* Wuxia body text */
.post p,
.posts article p,
section p {
    color: rgba(255, 235, 220, 0.92);
    font-size: 1.05rem;
    line-height: 1.7;
    font-family: "Noto Serif SC", "KaiTi", serif;
}

/* =========================================================
   PANELS (Posts, Featured posts, Cards)
   ========================================================= */

.post,
.posts article,
.post.featured {
    background: rgba(20, 20, 20, 0.55);
    border: 1px solid rgba(255, 230, 200, 0.08);
    border-radius: 8px;

    box-shadow:
        0 0 25px rgba(0, 0, 0, 0.5),
        inset 0 0 35px rgba(0, 0, 0, 0.45),
        0 0 10px rgba(255, 200, 150, 0.15);

    backdrop-filter: blur(4px);

    background-image:
        url("../images/wuxia_texture0.png"),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.55)
        );
    background-blend-mode: overlay, normal;
}

.post:hover,
.posts article:hover,
.post.featured:hover {
    box-shadow:
        0 0 35px rgba(255, 200, 150, 0.25),
        inset 0 0 40px rgba(255, 200, 150, 0.12);
    transform: translateY(-3px);
    transition: 0.3s ease;
}

/* Fix padding on major headers */
.post header.major {
    padding-top: 1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* =========================================================
   BUTTONS — Wuxia Gold Gradient Buttons
   ========================================================= */

.button,
.button.large,
ul.actions.special li a.button,
button,
input[type="button"],
input[type="submit"] {
    background: linear-gradient(145deg, #6b552e, #42351b) !important;
    border-color: rgba(255, 210, 120, 0.75) !important;
    color: rgba(255, 245, 230, 1) !important;

    padding: 0.75rem 2.25rem !important;
    border-radius: 6px;
    font-family: "Noto Serif SC", "KaiTi", serif !important;
    font-size: 1rem !important;
    letter-spacing: 0.5px;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-shadow:
        0 0 12px rgba(0, 0, 0, 0.35),
        inset 0 0 18px rgba(0, 0, 0, 0.45),
        0 0 10px rgba(255, 200, 150, 0.15);

    transition: 0.3s ease;
}

/* Hover glow */
.button:hover,
ul.actions.special li a.button:hover {
    box-shadow:
        0 0 18px rgba(255, 200, 150, 0.35),
        inset 0 0 25px rgba(255, 200, 150, 0.25);
    transform: translateY(-3px);
}

/* =========================================================
   FOOTER STYLING
   ========================================================= */

#footer {
    background: rgba(20, 20, 20, 0.55) !important;
    border: 1px solid rgba(255, 230, 200, 0.1) !important;
    border-radius: 8px;
    backdrop-filter: blur(3px);

    box-shadow:
        0 0 25px rgba(0, 0, 0, 0.5),
        inset 0 0 25px rgba(0, 0, 0, 0.45),
        0 0 12px rgba(255, 200, 150, 0.15);
}

#footer h3,
#footer p,
#footer a {
    color: rgba(255, 235, 220, 0.95) !important;
    font-family: "Noto Serif SC", "KaiTi", serif;
}

#footer ul.icons.alt li .icon:before {
    box-shadow: inset 0 0 0 2px rgba(255, 230, 200, 0.25) !important;
}

/* Make paragraph links white/warm colored */
.post p a,
.post header p a,
section p a {
    color: rgba(255, 235, 220, 0.92) !important;
    border-bottom-color: rgba(255, 235, 220, 0.5) !important;
}

.post p a:hover,
.post header p a:hover,
section p a:hover {
    color: rgba(255, 245, 230, 1) !important;
    border-bottom-color: rgba(255, 245, 230, 0.75) !important;
}

/* ================================
    SKILL TAGS
   ================================ */

.skill-tags {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.skill-tag {
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    font-size: 0.8rem;
    letter-spacing: 0.5px;

    background: linear-gradient(135deg, #8a6a3a, #4a3a22);
    border: 1px solid rgba(255, 220, 160, 0.6);

    color: rgba(255, 245, 230, 0.95);
    font-family: "Noto Serif SC", "KaiTi", serif;

    box-shadow:
        0 0 8px rgba(0, 0, 0, 0.4),
        inset 0 0 6px rgba(0, 0, 0, 0.35);

    transition: 0.25s ease;
}

.skill-tag:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 12px rgba(255, 220, 160, 0.45),
        inset 0 0 10px rgba(0, 0, 0, 0.4);
}

.posts article h4 {
    font-family: "KaiTi", serif;
    font-weight: 600;
    background-image: linear-gradient(
        to right,
        rgba(255,230,200,0.9),
        rgba(255,230,200,0.6)
    );
    -webkit-background-clip: text;
    color: transparent;
}