/**
 * WPBakery Page Builder Extensions
 * Custom CSS for WPBakery elements to match the Nitya Portfolio theme.
 */

/* ─── ROW BACKGROUNDS ──────────────────────────────── */
.vc_row.nt-bg-peach       { background-color: var(--peach) !important; }
.vc_row.nt-bg-cream       { background-color: var(--cream) !important; }
.vc_row.nt-bg-dark        { background-color: var(--deep-brown) !important; }
.vc_row.nt-bg-sage        { background-color: var(--pale-sage) !important; }
.vc_row.nt-bg-white       { background-color: var(--white) !important; }
.vc_row.nt-section-pad    { padding: 100px 0 !important; }
.vc_row.nt-section-pad-lg { padding: 140px 0 !important; }
.vc_row.nt-full-height    { min-height: 100vh !important; display: flex !important; align-items: center !important; }

/* ─── HEADINGS ─────────────────────────────────────── */
.vc_custom_heading {
    font-family: var(--font-display) !important;
}

.nt-display-heading .vc_custom_heading,
.nt-display-heading h1,
.nt-display-heading h2 {
    font-family: var(--font-display) !important;
    color: var(--deep-brown) !important;
    line-height: 1.15 !important;
}

.nt-accent-heading h2,
.nt-accent-heading h3 {
    color: var(--coral) !important;
    font-family: var(--font-accent) !important;
    font-size: 1.6rem !important;
}

.nt-white-heading h1,
.nt-white-heading h2,
.nt-white-heading h3 {
    color: var(--white) !important;
}

/* ─── BUTTONS ──────────────────────────────────────── */
.vc_btn3.nt-btn-primary,
.vc_btn3.vc_btn3-color-juicy-pink.vc_btn3-style-flat {
    background-color: var(--coral) !important;
    color: var(--white) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
    transition: all .3s ease !important;
    border: 2px solid var(--coral) !important;
}
.vc_btn3.nt-btn-primary:hover {
    background-color: var(--deep-brown) !important;
    border-color: var(--deep-brown) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(231,111,81,.3) !important;
}

.vc_btn3.nt-btn-outline {
    background: transparent !important;
    color: var(--coral) !important;
    border: 2px solid var(--coral) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
    transition: all .3s ease !important;
}
.vc_btn3.nt-btn-outline:hover {
    background: var(--coral) !important;
    color: var(--white) !important;
    transform: translateY(-2px) !important;
}

.vc_btn3.nt-btn-dark {
    background: var(--deep-brown) !important;
    color: var(--white) !important;
    border: 2px solid var(--deep-brown) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
    transition: all .3s ease !important;
}
.vc_btn3.nt-btn-dark:hover {
    background: var(--coral) !important;
    border-color: var(--coral) !important;
}

/* ─── TEXT BLOCK ENHANCEMENTS ──────────────────────── */
.nt-lead-text .wpb_text_column p {
    font-size: 1.15rem !important;
    color: var(--mid-brown) !important;
    line-height: 1.85 !important;
}

.nt-white-text .wpb_text_column,
.nt-white-text .wpb_text_column p,
.nt-white-text .wpb_text_column h1,
.nt-white-text .wpb_text_column h2,
.nt-white-text .wpb_text_column h3 {
    color: var(--white) !important;
}

.nt-white-text-muted .wpb_text_column p {
    color: rgba(255,248,238,.75) !important;
}

/* ─── SECTION LABEL SHORTCODE ──────────────────────── */
.nt-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 12px;
}
.nt-section-label::before,
.nt-section-label::after { content: '✦'; font-size: .7rem; }

/* ─── SEPARATOR / DIVIDER ──────────────────────────── */
.vc_separator.nt-squiggle {
    text-align: center;
    border: none !important;
}
.vc_separator.nt-squiggle::after {
    content: '— ✦ —';
    color: var(--warm-orange);
    font-size: 1.2rem;
    letter-spacing: .3em;
}

/* ─── IMAGE ELEMENTS ───────────────────────────────── */
.nt-rounded-img .vc_single_image-wrapper img,
.nt-rounded-img img {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
}

.nt-circle-img img { border-radius: 50% !important; }

/* ─── ICON BOX ─────────────────────────────────────── */
.nt-icon-box.vc_icon_element {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    box-shadow: var(--shadow-soft);
    transition: all .3s ease;
}
.nt-icon-box.vc_icon_element:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card);
}
.nt-icon-box .vc_icon_element-icon { color: var(--coral) !important; }

/* ─── PROGRESS BARS ────────────────────────────────── */
.vc_progress_bar.nt-skills .vc_bar { background: var(--coral) !important; }
.vc_progress_bar.nt-skills .vc_label { color: var(--deep-brown) !important; font-weight: 700 !important; }
.vc_progress_bar.nt-skills .vc_single_bar { background: rgba(244,162,97,.2) !important; border-radius: 50px !important; }
.vc_progress_bar.nt-skills .vc_bar { border-radius: 50px !important; }

/* ─── TABS ─────────────────────────────────────────── */
.vc_tta-tabs.nt-tabs .vc_tta-tab > a {
    background: transparent !important;
    border: 2px solid rgba(244,162,97,.35) !important;
    border-radius: 50px !important;
    color: var(--mid-brown) !important;
    font-weight: 700 !important;
    font-size: .85rem !important;
    letter-spacing: .05em !important;
    padding: 8px 22px !important;
    transition: all .3s !important;
}
.vc_tta-tabs.nt-tabs .vc_tta-tab.vc_active > a,
.vc_tta-tabs.nt-tabs .vc_tta-tab > a:hover {
    background: var(--coral) !important;
    border-color: var(--coral) !important;
    color: var(--white) !important;
}
.vc_tta-tabs.nt-tabs .vc_tta-panels { border: none !important; padding: 36px 0 0 !important; }

/* ─── GRID / PORTFOLIO WPB ─────────────────────────── */
.nt-portfolio-grid .vc_grid-item-mini {
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    transition: all .35s ease !important;
}
.nt-portfolio-grid .vc_grid-item-mini:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow-card) !important;
}

/* ─── TESTIMONIAL ──────────────────────────────────── */
.nt-testimonial .vc_grid-item {
    background: var(--white) !important;
    border-radius: var(--radius-lg) !important;
    padding: 36px !important;
    box-shadow: var(--shadow-soft) !important;
}

/* ─── NEWSLETTER (WPBakery inline) ─────────────────── */
.nt-newsletter-row {
    background: var(--deep-brown) !important;
    position: relative;
    overflow: hidden;
}
.nt-newsletter-row::before {
    content: '';
    position: absolute;
    top: -50%; left: -10%;
    width: 60%; height: 200%;
    background: radial-gradient(ellipse, rgba(244,162,97,.15) 0%, transparent 60%);
    pointer-events: none;
}

/* ─── CONTACT FORM ─────────────────────────────────── */
.nt-contact-form input,
.nt-contact-form textarea,
.nt-contact-form select {
    border: 2px solid rgba(244,162,97,.3) !important;
    border-radius: var(--radius) !important;
    background: var(--white) !important;
    padding: 14px 18px !important;
    font-family: var(--font-body) !important;
    color: var(--ink) !important;
    width: 100% !important;
    transition: all .3s !important;
}
.nt-contact-form input:focus,
.nt-contact-form textarea:focus {
    border-color: var(--coral) !important;
    box-shadow: 0 0 0 4px rgba(231,111,81,.1) !important;
    outline: none !important;
}

/* ─── RESPONSIVE TWEAKS FOR WPB ────────────────────── */
@media (max-width: 768px) {
    .vc_row.nt-section-pad    { padding: 60px 0 !important; }
    .vc_row.nt-section-pad-lg { padding: 80px 0 !important; }
    .vc_col-sm-6, .vc_col-sm-4, .vc_col-sm-3 { width: 100% !important; }
}