/* =====================================================================
   INTIN WEBSITE v2 – UPDATES (Nov 2026)
   Load right after app.css in layouts/app.blade.php:
   <link href="{{ asset('website/v2/css/intin-updates.css') }}" rel="stylesheet">
   Contains: unified section headings, detail-page heading wrapper,
   uniform client-logo size.
   ===================================================================== */

/* =====================================================================
   UNIFIED SECTION HEADINGS (same look as "Your Benefits" on every page)
   Dark first part + brand-blue highlight word + underline.
   :not(#_h1):not(#_h2) only raises specificity so these rules win over
   section-level "#section h2.heading-secondary" overrides. Opacity /
   transform are NOT touched, so existing scroll animations still work.
   ===================================================================== */
:root {
    --heading-unified-ink: #101828;
    --heading-unified-accent: var(--primary-color, #0078AA);
}

h2.heading-secondary:not(#_h1):not(#_h2) {
    position: relative;
    display: inline-block;
    margin-bottom: 24px !important;
    color: var(--heading-unified-ink) !important;
    font-family: var(--font-family-heading) !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    font-style: normal !important;
    line-height: 1.15 !important;
    letter-spacing: normal !important;
}

/* Highlighted part */
h2.heading-secondary:not(#_h1):not(#_h2) span {
    color: var(--heading-unified-accent) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

/* Underline: low specificity for transform so section animations keep control */
h2.heading-secondary::after {
    transform: translateX(-50%);
    transform-origin: center;
}

h2.heading-secondary:not(#_h1):not(#_h2)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 75px;
    height: 3px;
    border-radius: 50px;
    background: linear-gradient(90deg, var(--heading-unified-accent), rgba(0, 120, 170, .15));
}

@media (max-width: 767px) {
    h2.heading-secondary:not(#_h1):not(#_h2) {
        font-size: 31px !important;
    }
}

@media (max-width: 420px) {
    h2.heading-secondary:not(#_h1):not(#_h2) {
        font-size: 28px !important;
    }
}

/* Wrapper for unified headings on solution / case-study detail pages */
.unified-heading-wrap {
    width: 100%;
    text-align: center;
    margin: 0 0 34px;
    padding: 0;
    border: 0;
}

.unified-heading-wrap h2.heading-secondary:not(#_h1):not(#_h2) {
    text-align: center !important;
    text-transform: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    opacity: 1;
}

/* Old decorative lines next to these headings are replaced by the unified underline */
.capabilities-modern-header .header-line,
.solutions-heading .solutions-heading-line {
    display: none !important;
}

@media (max-width: 767px) {
    .unified-heading-wrap {
        margin-bottom: 28px;
    }
}


/* Uniform logo size: every logo fits in the same box, regardless of its own dimensions */
#client-logos .track img.client_logo_img {
    flex: 0 0 auto;
    width: 150px !important;
    height: 64px !important;
    max-width: none;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 767px) {
    #client-logos .track img.client_logo_img {
        width: 110px !important;
        height: 48px !important;
    }
}


/* =====================================================================
   STANDARD TYPOGRAPHY SCALE (whole website content area)
   Scoped to <main role="main"> so header, footer and the AI assistant
   are not affected. :not(#_t1):not(#_t2) only raises specificity so
   these rules win over page/section level font rules.
   Section headings (h2.heading-secondary) are defined above.
   ---------------------------------------------------------------------
   Level            Font                      Desktop  Mobile  Weight
   Page title  h1   Helvetica Neue Condensed  50px     34px    800
   Card title  h2*  Helvetica Neue Condensed  22px     20px    700
               h3
   Small title h4-6 Helvetica Neue Condensed  18px     17px    700
   Body        p,li Lato                      16px     15px    400
   Caption    small Lato                      14px     13px    400
   Buttons          Lato                      15px     15px    700
   (* h2 that is not a section heading)
   ===================================================================== */
:root {
    --type-h1: 50px;
    --type-card-title: 22px;
    --type-small-title: 18px;
    --type-body: 16px;
    --type-caption: 14px;
    --type-button: 15px;
}

main[role="main"] h1:not(#_t1):not(#_t2) {
    font-family: var(--font-family-heading) !important;
    font-size: var(--type-h1) !important;
    font-weight: 800 !important;
    font-style: normal !important;
    line-height: 1.15 !important;
}

main[role="main"] h2:not(.heading-secondary):not(#_t1):not(#_t2),
main[role="main"] h3:not(#_t1):not(#_t2) {
    font-family: var(--font-family-heading) !important;
    font-size: var(--type-card-title) !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.25 !important;
}

main[role="main"] h4:not(#_t1):not(#_t2),
main[role="main"] h5:not(#_t1):not(#_t2),
main[role="main"] h6:not(#_t1):not(#_t2) {
    font-family: var(--font-family-heading) !important;
    font-size: var(--type-small-title) !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.3 !important;
}

main[role="main"] p:not(#_t1):not(#_t2),
main[role="main"] li:not(#_t1):not(#_t2) {
    font-family: var(--font-family-base) !important;
    font-size: var(--type-body) !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
}

/* Bold words inside paragraphs keep their emphasis */
main[role="main"] p strong,
main[role="main"] p b,
main[role="main"] li strong,
main[role="main"] li b {
    font-weight: 700 !important;
}

main[role="main"] small:not(#_t1):not(#_t2) {
    font-family: var(--font-family-base) !important;
    font-size: var(--type-caption) !important;
    font-weight: 400 !important;
}

main[role="main"] .btn:not(#_t1):not(#_t2),
main[role="main"] button:not(#_t1):not(#_t2) {
    font-family: var(--font-family-base) !important;
    font-size: var(--type-button) !important;
    font-weight: 700 !important;
}

@media (max-width: 767px) {
    :root {
        --type-h1: 34px;
        --type-card-title: 20px;
        --type-small-title: 17px;
        --type-body: 15px;
        --type-caption: 13px;
    }
}

/* Secondary h1 inside the narrow Join/Engage side card: use section-heading size */
main[role="main"] .join-left h1:not(#_t1):not(#_t2) {
    font-size: 38px !important;
}

/* One body font for the whole website.
   new/css/style.css and new/css/solution-page.css set body to "DM Sans";
   this brings every page back to Lato. */
body {
    font-family: var(--font-family-base), sans-serif !important;
}

main[role="main"] .explore,
main[role="main"] .back,
main[role="main"] .toolkit {
    font-family: var(--font-family-base), sans-serif !important;
}

/* Solutions / Engage intro title (a <strong>, not a heading tag) = section heading look */
main[role="main"] .intro > strong:not(#_t1):not(#_t2) {
    font-family: var(--font-family-heading) !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: normal !important;
    color: var(--heading-unified-ink) !important;
}

@media (max-width: 767px) {
    main[role="main"] .join-left h1:not(#_t1):not(#_t2),
    main[role="main"] .intro > strong:not(#_t1):not(#_t2) {
        font-size: 28px !important;
    }
}