/* Project-owned overrides for the vendored theme CSS. Keep this the single place
   that controls cross-page heading rules instead of repeating them inline. */

/* h1/h2 font-size grows a lot across breakpoints (theme headings run up to
   ~54-78px on desktop), so a single unitless line-height leaves a much bigger
   visual gap between lines on desktop than on mobile even though the ratio is
   the same. Tighten the ratio progressively as the heading gets bigger so the
   gap stays proportionate. h1 shares this rule so hero headings get the same
   line-height as h2 by default — pages with their own scoped h1 line-height
   (e.g. services/index.blade.php's .services-hero-heading) still win, since a
   class selector outranks this element-level fallback. */
h1, h2 {
    line-height: 1.2;
}

@media (width >= 40rem) {
    h1, h2 {
        line-height: 1.18;
    }
}

@media (width >= 64rem) {
    h1, h2 {
        line-height: 1.14;
    }
}

@media (width >= 80rem) {
    h1, h2 {
        line-height: 1.1;
    }
}

/* Small accent bar used under section headings (hero, capabilities, how-we-work,
   process, services-grid, faqs, insights). One definition so every instance is
   guaranteed the same thickness instead of six duplicated, hand-copied rules. */
.section-underline {
    display: block;
    width: 48px;
    height: 4px;
    background: var(--color-purple-theme);
    border-radius: 2px;
    margin: 22px 0;
}

.section-underline.is-centered {
    margin-left: auto;
    margin-right: auto;
}

/* main.css is a static pre-compiled Tailwind bundle (no local build step
   regenerates it — see package.json), so any h-N/w-N/shrink-0 utility that
   wasn't already in use when it was generated silently no-ops instead of
   erroring, which is easy to miss since nothing looks obviously broken in
   markup review. These are every value actually referenced across the site
   (icon badges, avatars, fixed-height image containers) that was missing,
   added here using the same --spacing formula the theme's own compiled
   utilities use so they're indistinguishable from a real Tailwind build. */
.h-4\.5 { height: calc(var(--spacing) * 4.5); }
.h-5 { height: calc(var(--spacing) * 5); }
.h-6 { height: calc(var(--spacing) * 6); }
.h-8 { height: calc(var(--spacing) * 8); }
.h-12 { height: calc(var(--spacing) * 12); }
.h-16 { height: calc(var(--spacing) * 16); }
.h-24 { height: calc(var(--spacing) * 24); }
.h-32 { height: calc(var(--spacing) * 32); }
.h-64 { height: calc(var(--spacing) * 64); }
.h-80 { height: calc(var(--spacing) * 80); }
.h-96 { height: calc(var(--spacing) * 96); }

.w-4\.5 { width: calc(var(--spacing) * 4.5); }
.w-5 { width: calc(var(--spacing) * 5); }
.w-6 { width: calc(var(--spacing) * 6); }
.w-8 { width: calc(var(--spacing) * 8); }
.w-9 { width: calc(var(--spacing) * 9); }
.w-12 { width: calc(var(--spacing) * 12); }
.w-13 { width: calc(var(--spacing) * 13); }
.w-14 { width: calc(var(--spacing) * 14); }
.w-16 { width: calc(var(--spacing) * 16); }
.w-24 { width: calc(var(--spacing) * 24); }

.shrink-0 { flex-shrink: 0; }

/* .btn-outline-purple is used as a "second CTA" across several hero
   sections (services detail pages, industries, tech & integrations) but
   was never actually defined anywhere in the compiled theme CSS — every
   instance of it sitewide was silently falling back to the theme's
   unstyled default button look (a grey border) instead of the purple
   outline it was clearly meant to be. Defined here, matching the same
   transparent-background-plus-colored-border pattern the theme already
   uses for .btn-tra-black/.btn-tra-gray, just in the brand purple. */
.btn-outline-purple {
    background-color: transparent;
    border-color: var(--color-purple-theme);
    color: var(--color-purple-theme);
}

.btn-outline-purple:hover {
    background-color: var(--color-purple-theme);
    color: #fff;
}

/* The header's sticky/compact state triggers at a fixed 110px of scroll
   (main.js), regardless of how much hero clearance a given page has above
   its eyebrow badge. Every page sharing this hero pattern (pt-8 md:pt-23
   lg:pt-40 xl:pt-48) — all 10 service detail pages, the services and
   industries listing pages, and Tech & Integrations — had that clearance
   tight enough that the eyebrow was already crowding the header by the
   time the trigger fired, instead of firing with room to spare. A little
   extra top padding, desktop only (where the header is fixed), pushes
   that clearance out just enough without leaving a large empty gap under
   the header — first tuned on the AI/ML page, now shared everywhere. */
@media (width >= 64rem) {
    .svc-hero-extra-clearance {
        padding-top: calc(10rem + 16px);
    }
}

@media (width >= 80rem) {
    .svc-hero-extra-clearance {
        padding-top: calc(12rem + 16px);
    }
}