/* ==========================================================================
   UNIBRIGHT SOLUTIONS — COMMON INNER-PAGE STYLES
   Applies the About-Us pattern (PPT brand: violet/navy/lavender) to EVERY
   page template. Loaded after brand-override.css and per-page CSS so it
   wins over template inline <style> blocks.

   Source of truth: templates/about.php (+ assets/css/pages/about.css)

   What this file enforces site-wide:
     1. Heading hierarchy           h1=55/34 · h2=44/26 · h3=24/20 · h4=20/19 · h5=17/16
     2. Eyebrow → title pattern     Every common badge/eyebrow class is rendered
                                    as a big H2 (44px) and the heading directly
                                    below becomes H3 (24px), exactly like About.
     3. Section padding             36px top + 36px bottom
     4. Banner padding              10px top + 10px bottom
     5. Color combinations          Dark sections → white text · Light sections → navy text
     6. Container width             90% (no max-width caps)
     7. Card titles                 20px Semibold (PPT H4)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) GLOBAL SECTION PADDING — 36px, matches About .au-section
   -------------------------------------------------------------------------- */
.sec, .section, .sdp-section, .section-padding,
.services-area, .case-studies-section-2, .service-section, .stats-section,
.service-detail, .sdp-cta, .sdp-faq, .sdp-blogs, .sdp-more, .sdp-portfolio,
.sdp-tools, .sdp-why, .sdp-process, .sdp-testi,
section, [class*="section-py"], [class*="-section"],
.au-section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Bootstrap-style spacing helpers harmonised */
.pt-5, .pt-10, .pt-15, .pt-20, .pt-25, .pt-30, .pt-35, .pt-40, .pt-45,
.pt-50, .pt-55, .pt-60, .pt-65, .pt-70, .pt-75, .pt-80, .pt-85, .pt-90,
.pt-95, .pt-100, .pt-105, .pt-110, .pt-115, .pt-120, .pt-125, .pt-130,
.pt-135, .pt-140, .pt-145, .pt-150, .pt-155, .pt-160, .pt-165, .pt-170,
.pt-175, .pt-180, .pt-185, .pt-190, .pt-195, .pt-200 { padding-top: 36px !important; }

.pb-5, .pb-10, .pb-15, .pb-20, .pb-25, .pb-30, .pb-35, .pb-40, .pb-45,
.pb-50, .pb-55, .pb-60, .pb-65, .pb-70, .pb-75, .pb-80, .pb-85, .pb-90,
.pb-95, .pb-100, .pb-105, .pb-110, .pb-115, .pb-120, .pb-125, .pb-130,
.pb-135, .pb-140, .pb-145, .pb-150, .pb-155, .pb-160, .pb-165, .pb-170,
.pb-175, .pb-180, .pb-185, .pb-190, .pb-195, .pb-200 { padding-bottom: 36px !important; }

/* --------------------------------------------------------------------------
   2) BANNER PADDING — 10px (matches About .inner-banner.au-banner)
   -------------------------------------------------------------------------- */
.hero, .hero-section, .hero-area, .banner-area,
.inner-banner, .breadcrumb-wrapper,
[class$="-hero"], [class*="-banner"]:not(.inner-banner-grid):not(.inner-banner-container):not(.inner-banner-content):not(.inner-banner-image) {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* --------------------------------------------------------------------------
   3) EYEBROW → TITLE pattern (About-style hierarchy on EVERY page)
   Common eyebrow / badge class names across templates get rendered as the
   big H2 (44px Bold), and the heading that immediately follows becomes H3
   (24px Semibold). This mirrors templates/about.php structure.
   -------------------------------------------------------------------------- */
.hero-badge,
.au-eyebrow,
.sdp-eyebrow,
.section-eyebrow,
.section-pre-title,
.section-tag,
.bik01-lbl,
.sub-title.bg-color-2 span,
.sub-title > span,
.breadcrumb-sub-title,
[class*="-eyebrow"]:not(.au-section.is-dark *),
[class*="-pre-title"] {
    display: inline-block !important;
    border: 0 !important;
    font-family: 'Space Grotesk', 'Inter', Calibri, system-ui, sans-serif !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;
    text-transform: none !important;
    padding: 0 2px 2px 0 !important;
    margin: 0 0 14px !important;
    border-radius: 0 !important;
    /* Gradient text on light backgrounds — navy → soft purple */
    background-image: linear-gradient(90deg, #05053E 0%, #2D1F70 35%, #7B61FF 70%, #B8A7FF 100%) !important;
    background-color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.hero-badge::before,
.au-eyebrow::before,
.sdp-eyebrow::before,
.hero-badge .dot,
.hero-badge .hbdot,
.hero-badge .dot-g,
.hero-badge .dot-t,
.hero-badge .dot-teal,
.hero-badge .hero-badge-dot {
    display: none !important;
}

/* Dark backgrounds → eyebrow becomes white→lavender gradient */
.bg-navy .hero-badge,           .bg-navy .au-eyebrow,           .bg-navy [class*="-eyebrow"],
.sdp-process .hero-badge,       .sdp-process .au-eyebrow,
.sdp-testi  .hero-badge,        .sdp-testi  .au-eyebrow,
.hero .hero-badge,              .hero .au-eyebrow,              .hero [class*="-eyebrow"],
.hero-section .hero-badge,      .hero-section .au-eyebrow,
.banner-area .hero-badge,       .banner-area .au-eyebrow,
.inner-banner .hero-badge,      .inner-banner .au-eyebrow,
.breadcrumb-wrapper .breadcrumb-sub-title,
.au-section.is-dark .au-eyebrow,
.au-section.is-grad .au-eyebrow,
[class$="-hero"] .hero-badge,
[class*="-banner"] .hero-badge,
[data-bg-dark] .hero-badge,
[data-bg-dark] .au-eyebrow {
    background-image: linear-gradient(90deg, #FFFFFF 0%, #D8D8FF 55%, #B8A7FF 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* The heading directly under any eyebrow → H3 size (24px Semibold) */
.hero-badge        + h1, .hero-badge        + h2, .hero-badge        + h3,
.au-eyebrow        + h1, .au-eyebrow        + h2, .au-eyebrow        + h3,
.sdp-eyebrow       + h1, .sdp-eyebrow       + h2, .sdp-eyebrow       + h3,
.section-eyebrow   + h1, .section-eyebrow   + h2, .section-eyebrow   + h3,
.bik01-lbl         + h1, .bik01-lbl         + h2, .bik01-lbl         + h3,
.sub-title         + h1, .sub-title         + h2, .sub-title         + h3,
[class*="-eyebrow"]+ h1, [class*="-eyebrow"]+ h2, [class*="-eyebrow"]+ h3,
[class*="-pre-title"]+ h1, [class*="-pre-title"]+ h2, [class*="-pre-title"]+ h3 {
    font-family: 'Inter', 'Space Grotesk', Calibri, system-ui, sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.4px !important;
    margin: 0 0 12px !important;
    color: var(--brand-bg-deep) !important;
    text-transform: none !important;
}

/* Dark backgrounds → following heading turns white */
.bg-navy .hero-badge + *,
.bg-navy .au-eyebrow + *,
.hero .hero-badge + *,                 .hero .au-eyebrow + *,
.hero-section .hero-badge + *,         .hero-section .au-eyebrow + *,
.banner-area .hero-badge + *,          .banner-area .au-eyebrow + *,
.inner-banner .hero-badge + *,         .inner-banner .au-eyebrow + *,
.breadcrumb-wrapper .breadcrumb-sub-title + *,
.au-section.is-dark .au-eyebrow + *,
.au-section.is-grad .au-eyebrow + *,
[class$="-hero"] .hero-badge + *,
[class*="-banner"] .hero-badge + * {
    color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   4) HEADING HIERARCHY (PPT) — h1 55 · h2 44 · h3 24 · h4 20 · h5 17
   Already in brand-override.css; this is the canonical mobile breakpoint.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    h1, .h1   { font-size: 34px !important; line-height: 1.1 !important; letter-spacing: -0.8px !important; }
    h2, .h2   { font-size: 26px !important; line-height: 1.15 !important; letter-spacing: -0.5px !important; }
    h3, .h3   { font-size: 20px !important; }
    h4, .h4   { font-size: 19px !important; }
    h5, .h5   { font-size: 16px !important; }

    .hero-badge, .au-eyebrow,
    [class*="-eyebrow"], [class*="-pre-title"],
    .sub-title.bg-color-2 span, .sub-title > span,
    .breadcrumb-sub-title { font-size: 26px !important; }

    .hero-badge + h1, .hero-badge + h2, .hero-badge + h3,
    .au-eyebrow + h1, .au-eyebrow + h2, .au-eyebrow + h3,
    .sub-title + h1, .sub-title + h2, .sub-title + h3 { font-size: 20px !important; }
}

/* --------------------------------------------------------------------------
   5) CARD BG / BORDER / RADIUS — single brand look (matches .au-card)
   -------------------------------------------------------------------------- */
.lead-c, .week-c, .stat-card, .feature-card, .why-card, .blog-card, .more-card,
.testi-card, .pc-card, .proc-card, .tool-card, .case-card, .team-card,
.service-box-items, .services-item-4, .value-box-items, .icon-items,
.sdp-cta-card, .sdp-blog-card, .sdp-more-card, .sdp-process-step,
.sdp-tool-card, .sdp-why-card,
[class*="-card"]:not(.lead-c-badge):not(.del-c-img):not(.au-card-img):not(.au-stat-card):not(.au-story-img),
.bik01-card, .au-card {
    background: #FFFFFF !important;
    border: 1.5px solid rgba(123, 97, 255, 0.14) !important;
    border-radius: 18px !important;
    transition: transform .3s, border-color .3s, box-shadow .3s !important;
}
.lead-c:hover, .week-c:hover, .stat-card:hover, .feature-card:hover,
.why-card:hover, .blog-card:hover, .more-card:hover, .testi-card:hover,
.au-card:hover, [class*="-card"]:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(123, 97, 255, 0.45) !important;
    box-shadow: 0 22px 50px rgba(123, 97, 255, 0.18) !important;
}

/* Cards inside dark sections invert */
.bg-navy .lead-c, .bg-navy [class*="-card"],
.au-section.is-dark .lead-c, .au-section.is-dark [class*="-card"],
.au-section.is-grad .lead-c, .au-section.is-grad [class*="-card"],
.sdp-process [class*="-card"], .sdp-testi [class*="-card"] {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(216, 216, 255, 0.14) !important;
    color: #FFFFFF !important;
}
.bg-navy [class*="-card"]:hover,
.au-section.is-dark [class*="-card"]:hover,
.au-section.is-grad [class*="-card"]:hover {
    background: rgba(123, 97, 255, 0.10) !important;
    border-color: rgba(184, 167, 255, 0.42) !important;
}

/* --------------------------------------------------------------------------
   6) BODY TEXT COLOR — navy on light, soft white on dark
   -------------------------------------------------------------------------- */
section p, .sec p, .au-section p, [class*="-section"] p {
    color: #475067;
    font-family: 'Inter', 'Space Grotesk', sans-serif;
    font-size: 15px;
    line-height: 1.7;
}
.bg-navy p, .bg-navy li, .bg-navy span,
.au-section.is-dark p, .au-section.is-dark li,
.au-section.is-grad p, .au-section.is-grad li,
.sdp-process p, .sdp-testi p,
.hero p, .hero-section p, .banner-area p,
.inner-banner p, .breadcrumb-wrapper p,
[class$="-hero"] p, [class*="-banner"] p {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* --------------------------------------------------------------------------
   7) CONTAINER WIDTH — 90% (matches About .au-container)
   -------------------------------------------------------------------------- */
.wrap, .container, .container-fluid,
.container-sm, .container-md, .container-lg, .container-xl, .container-xxl,
.hero-inner, .inner-banner-container, .sdp-container,
.au-container, .ub-header-inner, .ub-mega-inner, .ub-topbar-inner {
    width: 90% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* --------------------------------------------------------------------------
   8) MOBILE — collapse multi-col grids; tighten section padding
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .sec, .section, .au-section, section, [class*="-section"] {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
}

/* --------------------------------------------------------------------------
   9) DEMO-HOME (templates/demo-home.php) — .bik01-* classes
   Force the brand button + card style on this template's bespoke classes.
   -------------------------------------------------------------------------- */
.bik01-btn-navy,
.bik01-btn-prp,
.bik01-btn-out,
.bik01-btn-out-w {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: linear-gradient(90deg, #6B5BFF 0%, #B8A7FF 100%) !important;
    color: #FFFFFF !important;
    font-family: 'Inter', 'Space Grotesk', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    padding: 14px 32px !important;
    border-radius: 6px !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    white-space: nowrap !important;
}
.bik01-btn-navy:hover,
.bik01-btn-prp:hover,
.bik01-btn-out:hover,
.bik01-btn-out-w:hover {
    background: linear-gradient(90deg, #6B5BFF 0%, #B8A7FF 100%) !important;
    color: #FFFFFF !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 0 -6px rgba(123, 97, 255, 0.40), 0 18px 30px -10px rgba(123, 97, 255, 0.45) !important;
}

/* demo-home hero badge → H2 size (already covered by .hero-badge rule,
   but .bik01-hero-badge is the actual class on this template) */
.bik01-hero-badge {
    display: inline-block !important;
    background: transparent !important;
    border: 0 !important;
    color: #FFFFFF !important;
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    text-transform: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.bik01-hero-badge .bik01-blink { display: none !important; }

/* The heading directly under .bik01-hero-badge → H3 size (PPT 24px) */
.bik01-hero-badge + h1,
.bik01-hero-badge + h2 {
    font-family: 'Inter', 'Space Grotesk', sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.4px !important;
    margin: 0 0 12px !important;
    color: #FFFFFF !important;
}

/* demo-home hero title (h1) → keep PPT 55px banner h1 size */
.bik01-hero-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-size: 55px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -1.5px !important;
    color: #FFFFFF !important;
    margin: 0 0 16px !important;
}

/* demo-home section labels & subheads use PPT sizes via .bik01-lbl / .bik01-st
   (already in common-inner rule via [class*="-lbl"]; reinforce specifically) */
.bik01-lbl {
    display: inline-block !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--brand-bg-deep) !important;
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    text-transform: none !important;
}
.bik01-lbl::before { display: none !important; }
.bik01-lbl-w { color: #FFFFFF !important; }

.bik01-st {
    font-family: 'Inter', 'Space Grotesk', sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.4px !important;
    color: var(--brand-bg-deep) !important;
    margin: 0 0 12px !important;
}
.bik01-st-w { color: #FFFFFF !important; }

/* demo-home service cards — match About .au-card */
.bik01-svc,
.bik01-card {
    background: #FFFFFF !important;
    border: 1.5px solid rgba(123, 97, 255, 0.14) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 30px rgba(5, 5, 62, 0.08) !important;
}
.bik01-svc:hover,
.bik01-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(123, 97, 255, 0.45) !important;
    box-shadow: 0 22px 50px rgba(123, 97, 255, 0.18) !important;
}
.bik01-svc-body h3,
.bik01-svc-body h4,
.bik01-card h3,
.bik01-card h4 {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.2px !important;
    color: var(--brand-bg-deep) !important;
    margin: 0 0 10px !important;
}
.bik01-svc-body p {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    color: #475067 !important;
    line-height: 1.65 !important;
}
.bik01-svc-img-tag {
    background: rgba(123, 97, 255, 0.92) !important;
    color: #FFFFFF !important;
}
.bik01-svc-tag {
    color: var(--brand-violet) !important;
    font-weight: 700 !important;
}
.bik01-svc::after {
    background: linear-gradient(90deg, #7B61FF, #B8A7FF) !important;
}

/* demo-home hero overlay — match brand banner overlay (already done via brand-override) */
.bik01-hero-ov { background: transparent !important; }

@media (max-width: 768px) {
    .bik01-btn-navy, .bik01-btn-prp, .bik01-btn-out, .bik01-btn-out-w {
        font-size: 15px !important;
        padding: 12px 26px !important;
    }
    .bik01-hero-badge,
    .bik01-lbl { font-size: 26px !important; line-height: 1.15 !important; }
    .bik01-hero-title { font-size: 34px !important; line-height: 1.1 !important; letter-spacing: -0.8px !important; }
    .bik01-hero-badge + h1, .bik01-hero-badge + h2,
    .bik01-st { font-size: 20px !important; }
    .bik01-svc-body h3, .bik01-svc-body h4 { font-size: 19px !important; }
}

/* --------------------------------------------------------------------------
   10) STRICT PPT TYPOGRAPHY on Home Demo page
   Every h1 → 55px, h2 → 44px, h3 → 24px, p → 15px on this template,
   regardless of class or container.
   -------------------------------------------------------------------------- */
.page-template-demo-home h1,
.page-template-templatesdemo-home-php h1,
body.page-template-demo-home .bik01-hero-title,
.bik01-hero h1 {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-size: 55px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -1.5px !important;
}
.page-template-demo-home h2,
.page-template-templatesdemo-home-php h2,
.bik01-hero h2 {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
    color: inherit !important;
}
.page-template-demo-home h3,
.page-template-templatesdemo-home-php h3,
.bik01-hero h3 {
    font-family: 'Inter', 'Space Grotesk', sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.4px !important;
}
.page-template-demo-home h4,
.page-template-templatesdemo-home-php h4 {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}
.page-template-demo-home h5,
.page-template-templatesdemo-home-php h5 {
    font-size: 17px !important;
    font-weight: 600 !important;
}
.page-template-demo-home p,
.page-template-templatesdemo-home-php p,
.page-template-demo-home li,
.page-template-templatesdemo-home-php li,
.bik01-hero-subtitle,
.bik01-hero-services,
.bik01-hero-slogan,
.bik01-hero-tagline {
    font-family: 'Inter', 'Space Grotesk', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
}

/* Mobile column for demo-home */
@media (max-width: 768px) {
    .page-template-demo-home h1,
    .page-template-templatesdemo-home-php h1,
    .bik01-hero h1, .bik01-hero-title { font-size: 34px !important; line-height: 1.1 !important; letter-spacing: -0.8px !important; }
    .page-template-demo-home h2,
    .page-template-templatesdemo-home-php h2,
    .bik01-hero h2 { font-size: 26px !important; line-height: 1.15 !important; letter-spacing: -0.5px !important; }
    .page-template-demo-home h3,
    .page-template-templatesdemo-home-php h3 { font-size: 20px !important; }
    .page-template-demo-home h4,
    .page-template-templatesdemo-home-php h4 { font-size: 19px !important; }
    .page-template-demo-home h5,
    .page-template-templatesdemo-home-php h5 { font-size: 16px !important; }
    .page-template-demo-home p,
    .page-template-templatesdemo-home-php p,
    .page-template-demo-home li,
    .page-template-templatesdemo-home-php li,
    .bik01-hero-subtitle,
    .bik01-hero-services,
    .bik01-hero-slogan,
    .bik01-hero-tagline { font-size: 14px !important; }
}