/* ============================================
   BELLA THEME — Brand Variables & Global Styles
   bellanguyen.co
   ============================================ */

:root {
    --bella-noir:     #1a1a18;
    --bella-clay:     #b5775a;
    --bella-blush:    #e8d5cc;
    --bella-linen:    #f7f2ef;
    --bella-gold:     #c9a882;
    --bella-espresso: #3d3530;
    --font-display: 'Cormorant Garamond', serif;
    --font-body:    'DM Sans', sans-serif;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --transition: 0.3s ease;
}

body { font-family: var(--font-body); background-color: var(--bella-linen); color: var(--bella-noir); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--bella-noir); }
a { color: var(--bella-clay); transition: color var(--transition); }
a:hover { color: var(--bella-espresso); }

:root {
    --theme-palette-color-1: var(--bella-clay);
    --theme-palette-color-2: var(--bella-espresso);
    --theme-palette-color-3: var(--bella-gold);
    --theme-palette-color-4: var(--bella-linen);
    --theme-palette-color-5: var(--bella-blush);
    --theme-palette-color-6: var(--bella-noir);
    --theme-palette-color-7: #ffffff;
    --theme-palette-color-8: var(--bella-noir);
}

.elementor-button.elementor-button-primary,
.elementor-button {
    background-color: var(--bella-clay);
    border-color: var(--bella-clay);
    font-family: var(--font-body);
    letter-spacing: 0.05em;
    transition: background-color var(--transition), border-color var(--transition);
}
.elementor-button:hover { background-color: var(--bella-espresso); border-color: var(--bella-espresso); }

.bella-divider { width: 60px; height: 1px; background-color: var(--bella-gold); margin: 1.5rem auto; }
.bella-section-linen { background-color: var(--bella-linen); }
.bella-section-blush { background-color: var(--bella-blush); }
.bella-section-noir { background-color: var(--bella-noir); color: var(--bella-linen); }
.bella-section-noir h1, .bella-section-noir h2, .bella-section-noir h3, .bella-section-noir h4 { color: var(--bella-linen); }

.e-con.e-flex, .e-con > .e-con-inner { flex-direction: var(--flex-direction, column); }

/* HOME */
.bella-proof-strip > .e-con,
.bella-proof-strip > .e-con-inner > .e-con {
    display: flex; flex-direction: row; flex-wrap: wrap;
    justify-content: space-around; align-items: center; width: 100%;
}
.bella-proof-strip .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-proof-strip .e-con[data-element_type="container"] > .e-con {
    flex: 1 1 0; min-width: 140px; text-align: center;
}

.bella-services-preview > .e-con,
.bella-services-preview > .e-con-inner > .e-con {
    display: flex; flex-direction: row; flex-wrap: wrap;
    justify-content: center; gap: 24px; width: 100%;
}
.bella-services-preview .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-services-preview .e-con[data-element_type="container"] > .e-con {
    flex: 0 1 31%; min-width: 280px;
}

.bella-about-teaser > .e-con,
.bella-about-teaser > .e-con-inner > .e-con {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%;
}
.bella-about-teaser .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-about-teaser .e-con[data-element_type="container"] > .e-con { flex: 1 1 48%; min-width: 300px; }

.bella-about-teaser .bella-placeholder-img .elementor-image,
.bella-about-teaser .bella-placeholder-img {
    width: 100%; height: 100%; min-height: 400px; display: block;
    background-color: var(--bella-blush);
}

/* ABOUT PAGE */
.bella-about-story > .e-con, .bella-about-story > .e-con-inner > .e-con,
.bella-about-philosophy > .e-con, .bella-about-philosophy > .e-con-inner > .e-con,
.bella-about-edu > .e-con, .bella-about-edu > .e-con-inner > .e-con {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%;
}
.bella-about-story .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-about-story .e-con[data-element_type="container"] > .e-con,
.bella-about-philosophy .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-about-philosophy .e-con[data-element_type="container"] > .e-con,
.bella-about-edu .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-about-edu .e-con[data-element_type="container"] > .e-con { flex: 1 1 48%; min-width: 300px; }

.bella-about-stats > .e-con, .bella-about-stats > .e-con-inner > .e-con {
    display: flex; flex-direction: row; flex-wrap: wrap;
    justify-content: space-around; align-items: center; width: 100%;
}
.bella-about-stats .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-about-stats .e-con[data-element_type="container"] > .e-con { flex: 1 1 0; min-width: 140px; text-align: center; }

/* SERVICES PAGE */
.bella-service-block > .e-con, .bella-service-block > .e-con-inner > .e-con {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%;
}
.bella-service-block .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-service-block .e-con[data-element_type="container"] > .e-con { flex: 1 1 48%; min-width: 300px; }

/* CONTACT PAGE */
.bella-contact-main > .e-con, .bella-contact-main > .e-con-inner > .e-con {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%;
}
.bella-contact-main .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-contact-main .e-con[data-element_type="container"] > .e-con { flex: 1 1 45%; min-width: 300px; }

.bella-contact-info { display: flex; flex-direction: column; gap: 2rem; margin-top: 0.5rem; }
.bella-contact-item-label {
    font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--bella-gold); font-weight: 500; margin: 0 0 0.35rem;
}
.bella-contact-item-value {
    font-family: var(--font-body); font-size: 15px; line-height: 1.7;
    color: rgba(247,242,239,0.85); margin: 0;
}

.bella-contact-main .ff-form-wrap input,
.bella-contact-main .ff-form-wrap select,
.bella-contact-main .ff-form-wrap textarea {
    border: 1px solid #e0d5cc !important; border-radius: 0 !important;
    font-family: var(--font-body) !important; font-size: 15px !important;
    color: var(--bella-noir) !important; background: #faf8f6 !important; padding: 12px 14px !important;
}
.bella-contact-main .ff-form-wrap input:focus,
.bella-contact-main .ff-form-wrap select:focus,
.bella-contact-main .ff-form-wrap textarea:focus {
    border-color: var(--bella-clay) !important; outline: none !important; box-shadow: none !important;
}
.bella-contact-main .ff-form-wrap .ff-btn-submit {
    background-color: var(--bella-clay) !important; border-color: var(--bella-clay) !important;
    border-radius: 0 !important; font-family: var(--font-body) !important; font-size: 13px !important;
    letter-spacing: 0.08em !important; text-transform: uppercase !important; font-weight: 500 !important;
    padding: 14px 36px !important; transition: background-color var(--transition) !important;
}
.bella-contact-main .ff-form-wrap .ff-btn-submit:hover {
    background-color: var(--bella-espresso) !important; border-color: var(--bella-espresso) !important;
}

/* ICON SVG */
.elementor-widget-icon-box .elementor-icon svg.e-font-icon-svg { fill: var(--bella-clay); color: var(--bella-clay); }


/* ============================================
   ABOUT PAGE — 2-col blocks
   ============================================ */

.bella-about-story > .e-con,
.bella-about-story > .e-con-inner > .e-con,
.bella-about-philosophy > .e-con,
.bella-about-philosophy > .e-con-inner > .e-con,
.bella-about-edu > .e-con,
.bella-about-edu > .e-con-inner > .e-con {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%;
}
.bella-about-story .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-about-story .e-con[data-element_type="container"] > .e-con,
.bella-about-philosophy .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-about-philosophy .e-con[data-element_type="container"] > .e-con,
.bella-about-edu .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-about-edu .e-con[data-element_type="container"] > .e-con { flex: 1 1 48%; min-width: 300px; }

.bella-about-stats > .e-con,
.bella-about-stats > .e-con-inner > .e-con {
    display: flex; flex-direction: row; flex-wrap: wrap;
    justify-content: space-around; align-items: center; width: 100%;
}
.bella-about-stats .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-about-stats .e-con[data-element_type="container"] > .e-con { flex: 1 1 0; min-width: 140px; text-align: center; }

/* ============================================
   SERVICES PAGE
   ============================================ */

.bella-service-block > .e-con, .bella-service-block > .e-con-inner > .e-con {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%;
}
.bella-service-block .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-service-block .e-con[data-element_type="container"] > .e-con { flex: 1 1 48%; min-width: 300px; }

/* ============================================
   CONTACT PAGE
   ============================================ */

.bella-contact-main > .e-con, .bella-contact-main > .e-con-inner > .e-con {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%;
}
.bella-contact-main .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-contact-main .e-con[data-element_type="container"] > .e-con { flex: 1 1 45%; min-width: 300px; }

.bella-contact-info { display: flex; flex-direction: column; gap: 2rem; margin-top: 0.5rem; }
.bella-contact-item-label { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bella-gold); font-weight: 500; margin: 0 0 0.35rem; }
.bella-contact-item-value { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: rgba(247,242,239,0.85); margin: 0; }

.bella-contact-main .ff-form-wrap input,
.bella-contact-main .ff-form-wrap select,
.bella-contact-main .ff-form-wrap textarea {
    border: 1px solid #e0d5cc !important; border-radius: 0 !important;
    font-family: var(--font-body) !important; font-size: 15px !important;
    color: var(--bella-noir) !important; background: #faf8f6 !important; padding: 12px 14px !important;
}
.bella-contact-main .ff-form-wrap input:focus,
.bella-contact-main .ff-form-wrap select:focus,
.bella-contact-main .ff-form-wrap textarea:focus { border-color: var(--bella-clay) !important; outline: none !important; box-shadow: none !important; }
.bella-contact-main .ff-form-wrap .ff-btn-submit {
    background-color: var(--bella-clay) !important; border-color: var(--bella-clay) !important;
    border-radius: 0 !important; font-family: var(--font-body) !important; font-size: 13px !important;
    letter-spacing: 0.08em !important; text-transform: uppercase !important; font-weight: 500 !important;
    padding: 14px 36px !important; transition: background-color var(--transition) !important;
}
.bella-contact-main .ff-form-wrap .ff-btn-submit:hover { background-color: var(--bella-espresso) !important; border-color: var(--bella-espresso) !important; }

/* ============================================
   PORTFOLIO PAGE
   ============================================ */

.bella-portfolio-gallery > .e-con, .bella-portfolio-gallery > .e-con-inner > .e-con {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%;
}
.bella-portfolio-gallery .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-portfolio-gallery .e-con[data-element_type="container"] > .e-con { flex: 0 1 33.333%; min-width: 280px; }

.bella-portfolio-process > .e-con, .bella-portfolio-process > .e-con-inner > .e-con {
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 24px; width: 100%;
}
.bella-portfolio-process .e-con[data-element_type="container"] > .e-con-inner > .e-con,
.bella-portfolio-process .e-con[data-element_type="container"] > .e-con { flex: 0 1 30%; min-width: 260px; }

/* ============================================
   JOURNAL PAGE
   ============================================ */

.bella-coming-soon { text-align: center; padding: 60px 40px; border: 1px solid var(--bella-gold); max-width: 560px; margin: 0 auto; }
.bella-coming-soon-icon { font-size: 24px; color: var(--bella-gold); margin-bottom: 1rem; }
.bella-coming-soon-text { font-family: var(--font-display); font-size: 28px; color: var(--bella-noir); font-weight: 600; margin: 0 0 1rem; }
.bella-coming-soon-sub { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--bella-espresso); margin: 0; }
.bella-coming-soon-sub a { color: var(--bella-clay); text-decoration: none; }

.bella-topics-grid { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; width: 100%; margin-top: 1rem; }
.bella-topic-card { flex: 0 1 300px; min-width: 260px; border-top: 2px solid var(--bella-gold); padding-top: 24px; }
.bella-topic-tag { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bella-clay); font-weight: 500; margin: 0 0 10px; }
.bella-topic-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--bella-noir); margin: 0 0 12px; line-height: 1.2; }
.bella-topic-desc { font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: var(--bella-espresso); margin: 0; }

/* ============================================
   NAVIGATION CTA
   ============================================ */

.bella-nav-cta > a { background-color: var(--bella-clay) !important; color: #ffffff !important; padding: 8px 20px !important; transition: background-color var(--transition) !important; }
.bella-nav-cta > a:hover { background-color: var(--bella-espresso) !important; }


/* ============================================
   FOOTER — Social Icons
   ============================================ */

.bella-footer-socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 8px 0;
}

.bella-footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(201, 168, 130, 0.4);
    color: var(--bella-gold);
    font-size: 15px;
    text-decoration: none;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.bella-footer-socials a:hover {
    background-color: var(--bella-clay);
    border-color: var(--bella-clay);
    color: #ffffff;
}

/* Widget area wrapper in footer */
.ct-footer .widget-area,
.ct-footer .widget {
    margin: 0;
    padding: 0;
}