/* =============================================================
   BYTESPARK DIGITAL - Content pages theme (blog, blog detail, contact)
   Loaded after style.css + theme.css via $extra_css.
   Same look as the home page: tinted sections, white bordered cards,
   pill buttons and badges, minimal shadows.
   ============================================================= */

/* ---------- Shared: eyebrow labels ---------- */
.blog-hero-section .section-label,
.contact-hero .section-label,
.bd-related .section-label {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .85rem; border-radius: 999px;
    border: 1px solid var(--hp-border); background: var(--hp-surface);
    font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: none;
    color: var(--hp-accent); margin-bottom: .8rem;
}

/* ---------- Shared: hero bands (gradient + violet rings + glows) ---------- */
.blog-hero-section,
.contact-hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 3rem 0 2.5rem; background: transparent; border-bottom: 0;
}
.blog-hero-section::before,
.contact-hero::before {
    content: ""; position: absolute; z-index: -2;
    width: 56rem; height: 56rem; right: -20rem; top: -22rem; border-radius: 50%;
    background: repeating-radial-gradient(circle at center, transparent 0 4.2rem, rgba(111, 92, 240, .2) 4.2rem calc(4.2rem + 1px));
    -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 68%);
    mask-image: radial-gradient(circle at center, #000 0%, transparent 68%);
}
.blog-hero-section::after,
.contact-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -3;
    background:
        radial-gradient(28rem 18rem at 4% 0%, rgba(99, 206, 24, .18), transparent 70%),
        radial-gradient(26rem 18rem at 96% 20%, rgba(139, 124, 255, .20), transparent 70%),
        radial-gradient(22rem 12rem at 45% 110%, rgba(224, 68, 156, .08), transparent 70%),
        linear-gradient(180deg, #F6FAFF 0%, #EAF2FF 100%);
}

.blog-hero-title,
.contact-hero-title,
.bd-title {
    font-family: var(--font-heading); font-weight: 800; color: var(--hp-heading);
    letter-spacing: -0.02em; line-height: 1.12;
}
.blog-hero-title,
.contact-hero-title { font-size: clamp(1.9rem, 4.2vw, 3rem); margin: .25rem 0 1rem; }
.contact-hero-title .text-highlight {
    background: linear-gradient(90deg, var(--hp-grad-a), var(--hp-grad-b));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.blog-hero-sub,
.contact-hero-sub { color: var(--hp-muted); font-size: 1.05rem; line-height: 1.65; }
.blog-hero-sub { margin: 0 auto 1.5rem; }
.contact-hero-sub { margin-bottom: 1.5rem; }

/* ---------- Blog hero stats ---------- */
.blog-hero-stats {
    background: var(--hp-surface); border: 1px solid var(--hp-border);
    box-shadow: none; padding: .5rem 1.5rem;
}
.bhs-item strong { color: var(--hp-heading); }
.bhs-item span { color: var(--hp-muted); }
.bhs-sep { background: var(--hp-green); }

/* ---------- Section backgrounds ---------- */
.blog-featured-section { padding: 2.5rem 0 1.5rem; background: var(--hp-tint); }
.blog-grid-section { padding: 1.5rem 0 3rem; background: var(--hp-tint); }
.bd-article-wrap { padding: 2.5rem 0 3rem; background: var(--hp-tint); }
.bd-related { padding: 3rem 0; background: var(--hp-bg-2); border-top: 0; }
.contact-main-section { padding: 3rem 0; background: var(--hp-tint); }

/* ---------- Featured card ---------- */
.blog-featured-card {
    background: var(--hp-surface); border: 1px solid var(--hp-border);
    border-radius: 1.1rem; box-shadow: none;
}
.blog-featured-card:hover { box-shadow: none; transform: translateY(-3px); border-color: var(--hp-green); }
.bfc-image-wrap { min-height: 18rem; }
.blog-featured-card:hover .bfc-image-wrap img { transform: scale(1.03); }
.bfc-badge {
    background: var(--hp-green); color: #07120A; font-size: .72rem; letter-spacing: .06em;
}
.bfc-body { background: var(--hp-surface); padding: 2rem; }
.bfc-meta { margin-bottom: .9rem; }
.bfc-date, .bfc-read { color: var(--hp-muted); }
.bfc-title { color: var(--hp-heading); margin-bottom: .75rem; letter-spacing: -0.01em; }
.bfc-title a:hover { color: var(--hp-accent); }
.bfc-excerpt { color: var(--hp-muted); line-height: 1.65; margin-bottom: 1.25rem; }

/* ---------- Pill buttons (primary green / ghost) ---------- */
.bfc-cta {
    min-height: 2.75rem; padding: .65rem 1.4rem; border: 1px solid transparent;
    background: var(--hp-green); color: #07120A;
    transition: transform .2s ease, background .2s ease;
}
.bfc-cta:hover { background: var(--hp-green-2); color: #07120A; transform: translateY(-2px); }
.bd-all-articles {
    min-height: 2.75rem; padding: .65rem 1.5rem; border: 1px solid var(--hp-border);
    background: var(--hp-surface); color: var(--hp-heading);
    transition: transform .2s ease, border-color .2s ease;
}
.bd-all-articles:hover { background: var(--hp-surface); border-color: var(--hp-green); color: var(--hp-heading); transform: translateY(-2px); }
.bfc-cta:focus-visible,
.bd-all-articles:focus-visible,
.bd-sidebar-cta-btn:focus-visible,
.cf-submit:focus-visible,
.blog-filter:focus-visible,
.bd-share-btn:focus-visible,
.cfaq-trigger:focus-visible { outline: 2px solid var(--hp-accent); outline-offset: 3px; }

/* ---------- Category filter ---------- */
.blog-filter-bar { padding: 0 0 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--hp-border); }
.blog-filter {
    background: var(--hp-surface); border: 1px solid var(--hp-border);
    color: var(--hp-text); font-weight: 600;
}
.blog-filter:hover { background: var(--hp-surface); border-color: var(--hp-green); color: var(--hp-heading); }
.blog-filter.active { background: var(--hp-green); border-color: var(--hp-green); color: #07120A; }

/* ---------- Blog cards ---------- */
.blog-grid { gap: 1.25rem; }
.blog-card {
    background: var(--hp-surface); border: 1px solid var(--hp-border);
    border-radius: 1.1rem; box-shadow: none;
    transition: transform .2s ease, border-color .2s ease;
}
.blog-card:hover { box-shadow: none; transform: translateY(-3px); border-color: var(--hp-green); }
.blog-card:hover .bc-img-wrap img { transform: scale(1.03); }
.bc-img-wrap { background: var(--hp-media); }
.bc-body { padding: 1.25rem; }
.bc-date, .bc-read { color: var(--hp-muted); }
.bc-title { color: var(--hp-heading); }
.bc-title a:hover { color: var(--hp-accent); }
.bc-excerpt { color: var(--hp-muted); }
.bc-footer { border-top: 1px solid var(--hp-border); }
.bc-link { color: var(--hp-accent); }
.bc-link:hover { color: var(--hp-heading); }

/* Category badges: one calm pill style, green text */
.blog-cat,
.blog-cat[class*="blog-cat--"] {
    background: var(--hp-surface); border: 1px solid var(--hp-border);
    color: var(--hp-accent); font-size: .68rem; letter-spacing: .05em;
}
.blog-no-results { color: var(--hp-muted); }
.blog-no-results .bi-search { color: var(--hp-violet); }
.blog-card.blog-hidden { display: none; }

/* ---------- Blog detail: header ---------- */
.bd-hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 1.5rem 1.5rem 1.5rem; margin-bottom: 1.5rem;
    border: 1px solid var(--hp-border); border-radius: 1.1rem;
    background: linear-gradient(180deg, #F6FAFF 0%, #FFFFFF 100%);
}
.bd-hero::before {
    content: ""; position: absolute; z-index: -1;
    width: 30rem; height: 30rem; right: -12rem; top: -14rem; border-radius: 50%;
    background: repeating-radial-gradient(circle at center, transparent 0 3rem, rgba(111, 92, 240, .18) 3rem calc(3rem + 1px));
    -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 68%);
    mask-image: radial-gradient(circle at center, #000 0%, transparent 68%);
}
.bd-breadcrumb { margin-bottom: 1rem; }
.bd-content .bd-breadcrumb ol { padding: 0; margin: 0; }
.bd-breadcrumb li, .bd-breadcrumb [aria-current="page"] { color: var(--hp-muted); }
.bd-breadcrumb a { color: var(--hp-muted); }
.bd-breadcrumb a:hover { color: var(--hp-accent); }
.bd-meta-top { margin-bottom: .9rem; }
.bd-read-time { color: var(--hp-muted); }
.bd-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: 1.1rem; }
.bd-author-avatar, .bd-author-box-avatar { background: var(--hp-green); color: #07120A; }
.bd-author-name { color: var(--hp-heading); }
.bd-author-date { color: var(--hp-muted); }
.bd-share-btn { background: var(--hp-surface); border: 1px solid var(--hp-border); color: var(--hp-heading); }
.bd-share-btn:hover { background: var(--hp-surface); border-color: var(--hp-green); color: var(--hp-heading); }

.bd-cover-wrap { margin-bottom: 1.5rem; }
.bd-cover { border: 1px solid var(--hp-border); border-radius: 1.1rem; box-shadow: none; background: var(--hp-surface); }
.bd-cover figcaption { background: var(--hp-surface); color: var(--hp-muted); }

/* ---------- Blog detail: article body ---------- */
.bd-layout { gap: 2.5rem; }
.bd-content { color: var(--hp-text); }
.bd-lead { color: var(--hp-muted); font-size: 1.1rem; line-height: 1.75; margin-bottom: 1.5rem; }
.bd-content h2 {
    color: var(--hp-heading); letter-spacing: -0.01em;
    margin: 2rem 0 .75rem; padding-top: .75rem; border-top: 1px solid var(--hp-border);
}
.bd-content p, .bd-content li { color: var(--hp-text); font-size: 1rem; line-height: 1.7; }
.bd-content p { margin-bottom: 1rem; }
.bd-content strong { color: var(--hp-heading); }
.bd-content p a, .bd-content li a { color: var(--hp-accent); }
.bd-content p a:hover, .bd-content li a:hover { color: var(--hp-heading); }
.bd-highlight-box,
.bd-highlight-box--green {
    background: var(--hp-surface); border: 1px solid var(--hp-border);
    border-left: 3px solid var(--hp-violet); border-radius: 1.1rem;
    padding: 1.1rem 1.25rem; margin: 1.5rem 0;
}
.bd-highlight-box--green { border-left-color: var(--hp-green); }
.bd-highlight-box .bi { color: var(--hp-violet); }
.bd-highlight-box--green .bi { color: var(--hp-accent); }
.bd-highlight-box div { color: var(--hp-text); }
.bd-highlight-box strong { color: var(--hp-heading); }

.bd-tags { margin: 2rem 0 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--hp-border); }
.bd-tag-label { color: var(--hp-muted); }
.bd-tag { background: var(--hp-surface); border: 1px solid var(--hp-border); color: var(--hp-accent); }
.bd-tag:hover { background: var(--hp-surface); border-color: var(--hp-green); color: var(--hp-accent); }
.bd-share-bar { margin-bottom: 1.5rem; background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 1.1rem; padding: 1rem 1.25rem; }
.bd-share-label { color: var(--hp-heading); }
.bd-share-social--x, .bd-share-social--linkedin, .bd-share-social--wa {
    background: var(--hp-surface); border: 1px solid var(--hp-border); color: var(--hp-heading);
}
.bd-share-social--x:hover, .bd-share-social--linkedin:hover, .bd-share-social--wa:hover {
    background: var(--hp-surface); border-color: var(--hp-green); color: var(--hp-heading);
}
.bd-author-box { background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 1.1rem; padding: 1.5rem; }
.bd-author-box-name { color: var(--hp-heading); }
.bd-author-box-bio { color: var(--hp-muted); }
.bd-author-box-cta { color: var(--hp-accent); }
.bd-author-box-cta:hover { color: var(--hp-heading); }

/* ---------- Blog detail: sidebar ---------- */
.bd-sidebar { gap: 1.25rem; }
.bd-toc { background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 1.1rem; padding: 1.25rem; }
.bd-toc-title { color: var(--hp-heading); border-bottom: 1px solid var(--hp-border); margin-bottom: .75rem; padding-bottom: .6rem; }
.bd-toc-link { color: var(--hp-muted); }
.bd-toc-link::before { color: var(--hp-accent); }
.bd-toc-link:hover { background: var(--hp-tint); color: var(--hp-heading); }
.bd-sidebar-cta {
    position: relative; overflow: hidden; isolation: isolate;
    background: #0A0E33; border: 1px solid rgba(255, 255, 255, .12); border-radius: 1.1rem;
    padding: 1.5rem 1.25rem;
}
.bd-sidebar-cta::before {
    content: ""; position: absolute; z-index: -1; width: 16rem; height: 16rem; right: -7rem; top: -8rem; border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 124, 255, .35), transparent 70%);
}
.bd-sidebar-cta-icon { background: rgba(139, 239, 69, .14); color: #8BEF45; }
.bd-sidebar-cta h3 { color: #FFFFFF; }
.bd-sidebar-cta p { color: #AEB6D6; }
.bd-sidebar-cta-btn { min-height: 2.75rem; background: var(--hp-green); color: #07120A; }
.bd-sidebar-cta-btn:hover { background: var(--hp-green-2); color: #07120A; }

/* ---------- Blog detail: related ---------- */
.bd-related-header { margin-bottom: 2rem; }
.bd-related-title {
    font-size: clamp(1.6rem, 3vw, 2.25rem); color: var(--hp-heading);
    letter-spacing: -0.02em; line-height: 1.15; margin: .5rem 0 0;
}
.bd-related-grid { gap: 1.25rem; margin-bottom: 2rem; }

/* ---------- Contact: hero ---------- */
.contact-hero-inner { gap: 2.5rem; }
.contact-hero-img {
    border: 1px solid var(--hp-border); border-radius: 1.1rem; box-shadow: none;
    background: var(--hp-media);
}
.contact-trust-row { gap: .5rem; }
.contact-trust-item {
    padding: .35rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
    color: var(--hp-text); background: var(--hp-surface); border: 1px solid var(--hp-border);
}
.contact-trust-item .bi { color: var(--hp-accent); font-size: .9rem; }
.contact-info-card { background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 1.1rem; transition: transform .2s ease, border-color .2s ease; }
.contact-info-card:hover { box-shadow: none; transform: translateY(-3px); border-color: var(--hp-green); }
.cic-icon, .cs-detail-icon,
.cic-icon--green, .cs-detail-icon--green,
.cic-icon--wa, .cs-detail-icon--wa { background: var(--hp-tint); color: var(--hp-accent); border: 1px solid var(--hp-border); }
.cic-label, .cic-note { color: var(--hp-muted); }
.cic-value { color: var(--hp-heading); }
.cic-value:hover { color: var(--hp-accent); }

/* ---------- Contact: form card ---------- */
.contact-layout { gap: 2rem; }
.contact-form-box {
    background: var(--hp-surface); border: 1px solid var(--hp-border);
    border-radius: 1.1rem; box-shadow: none;
}
.contact-form-header { background: var(--hp-surface); border-bottom: 1px solid var(--hp-border); padding: 1.5rem 2rem 1.25rem; }
.contact-form-header-icon { background: var(--hp-tint); border: 1px solid var(--hp-border); color: var(--hp-accent); }
.contact-form-title { color: var(--hp-heading); font-size: 1.35rem; letter-spacing: -0.01em; }
.contact-form-sub { color: var(--hp-muted); }
.contact-form { padding: 1.5rem 2rem 2rem; }
.cf-label { color: var(--hp-heading); }
.cf-label span { color: var(--hp-magenta); }
.cf-field { margin-bottom: 0; }
.cf-input, .cf-select, .cf-textarea {
    background: var(--hp-surface); border: 1px solid var(--hp-border); color: var(--hp-heading);
    border-radius: .75rem;
}
.cf-input::placeholder, .cf-textarea::placeholder { color: #7C86A6; }
.cf-input:focus, .cf-select:focus, .cf-textarea:focus {
    background: var(--hp-surface); border-color: var(--hp-green); box-shadow: 0 0 0 3px rgba(99, 206, 24, .22);
}
.cf-input.is-invalid, .cf-select.is-invalid, .cf-textarea.is-invalid { border-color: #D92D20; box-shadow: 0 0 0 3px rgba(217, 45, 32, .12); }
.cf-error { color: #C0261B; }
.cf-service-chip span { background: var(--hp-surface); border: 1px solid var(--hp-border); color: var(--hp-text); font-weight: 600; }
.cf-service-chip:hover span { background: var(--hp-surface); border-color: var(--hp-green); }
.cf-service-chip input:checked + span { background: rgba(99, 206, 24, .16); border-color: var(--hp-green); color: #1D4F02; }
.cf-service-chip input:focus-visible + span { outline: 2px solid var(--hp-accent); outline-offset: 2px; }
.cf-checkbox-wrap { color: var(--hp-text); }
.cf-checkbox-wrap a { color: var(--hp-accent); }
.cf-submit { min-height: 3rem; background: var(--hp-green); color: #07120A; box-shadow: none; }
.cf-submit:hover { background: var(--hp-green-2); box-shadow: none; }
.cf-submit:disabled { box-shadow: none; }
.cf-disclaimer { color: var(--hp-muted); }
.cf-disclaimer .bi { color: var(--hp-accent); }
.cf-success-msg, .cf-error-msg { border-radius: 1.1rem; }

/* ---------- Contact: sidebar ---------- */
.contact-sidebar { gap: 1.25rem; }
.cs-block { background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 1.1rem; padding: 1.25rem; }
.cs-title { color: var(--hp-heading); border-bottom: 1px solid var(--hp-border); margin-bottom: 1rem; padding-bottom: .6rem; }
.cs-detail-label, .cs-timezone, .cs-time--closed { color: var(--hp-muted); }
.cs-detail-value, .cs-day { color: var(--hp-heading); }
a.cs-detail-value.cs-link:hover { color: var(--hp-accent); }
.cs-hours-list li { border-bottom: 1px solid var(--hp-border); }
.cs-time { color: var(--hp-accent); }
.cs-social-card,
.cs-social--fb, .cs-social--ig, .cs-social--li, .cs-social--wa {
    background: var(--hp-surface); border: 1px solid var(--hp-border); color: var(--hp-heading);
    border-radius: 999px;
}
.cs-social-card:hover { transform: translateY(-2px); box-shadow: none; border-color: var(--hp-green); }
.cs-social-card .bi { color: var(--hp-accent); }

/* ---------- Process + FAQ (kept themed in case the blocks are added) ---------- */
.contact-process-section { padding: 3rem 0; background: var(--hp-bg-2); border-top: 0; }
.contact-faq-section { padding: 3rem 0; background: var(--hp-tint); border-top: 0; }
.contact-process-header, .contact-faq-header { margin-bottom: 2rem; }
.contact-process-title, .contact-faq-title {
    font-size: clamp(1.6rem, 3vw, 2.25rem); color: var(--hp-heading); letter-spacing: -0.02em; line-height: 1.15;
}
.cp-step-num { color: var(--hp-accent); }
.cp-step-icon { background: var(--hp-surface); border: 1px solid var(--hp-border); color: var(--hp-accent); }
.cp-step-title { color: var(--hp-heading); }
.cp-step-desc { color: var(--hp-muted); }
.cp-connector { background: var(--hp-green); }
.cfaq-item { background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 1.1rem; }
.cfaq-item:hover, .cfaq-item.is-open { border-color: var(--hp-green); }
.cfaq-trigger { color: var(--hp-heading); }
.cfaq-trigger:hover, .cfaq-item.is-open .cfaq-trigger { background: transparent; color: var(--hp-heading); }
.cfaq-icon { color: var(--hp-accent); }
.cfaq-body { color: var(--hp-muted); }

/* ---------- Responsive (re-asserted after style.css overrides) ---------- */
@media (max-width: 991.98px) {
    .bfc-image-wrap { min-height: 14rem; height: 14rem; }
    .bfc-body { padding: 1.5rem; }
    .bd-layout { gap: 2rem; }
}
@media (max-width: 1024px) {
    .contact-layout { gap: 2rem; }
}
@media (max-width: 767.98px) {
    .blog-hero-section, .contact-hero { padding: 2.5rem 0 2rem; }
    .blog-featured-section { padding: 2rem 0 1rem; }
    .blog-grid-section { padding: 1rem 0 2.5rem; }
    .bd-article-wrap { padding: 2rem 0 2.5rem; }
    .contact-main-section { padding: 2.5rem 0; }
    .bd-related, .contact-process-section, .contact-faq-section { padding: 2.5rem 0; }
    .contact-hero-title { font-size: 1.9rem; }
    .contact-trust-row { flex-direction: row; gap: .5rem; }
    .contact-form-header { padding: 1.25rem 1.25rem 1rem; }
    .contact-form { padding: 1.25rem; }
    .bd-hero { padding: 1.25rem; }
}
@media (max-width: 575.98px) {
    .blog-grid-section { padding: 1rem 0 2.5rem; }
    .bd-article-wrap { padding: 2rem 0 2.5rem; }
    .bd-cover { border-radius: 1.1rem; }
    .bfc-image-wrap { height: 12rem; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .blog-card, .blog-featured-card, .contact-info-card, .bfc-cta, .bd-all-articles, .cs-social-card { transition: none; }
}