/* =========================================================
   responsive-fixes.css  (2026-10-23)
   Shared, low-specificity responsive safety layer. Loaded last by the
   head files (head-open.php, in/head-open.php, ae/ng/sp headers) so it
   sits on top of style-*.css without editing those large files.
   Page-specific problems are fixed in the page / template itself.
========================================================= */

/* 0. Brand red: one value for the whole site (#FF0000). Use var(--brand-red) for solid red and
   rgba(var(--brand-red-rgb), .12) for translucent red so no other red shade is introduced. */
:root { --brand-red: #ff0000; --brand-red-rgb: 255, 0, 0; }

/* 1. Root overflow guard.
   Animated or decorative elements (AOS slide-ins, particles, glow circles) must never create a sideways scroll
   or let a phone pan the page. Applied at the root so position:sticky headers keep working. */
html { overflow-x: clip; }

/* 1b. Scroll lock. Menus and modals lock the page with document.body.style.overflow = "hidden" (Bootstrap uses the same, plus .modal-open).
   Because html now carries the guard above, body's overflow is no longer handed to the viewport, so the lock is mirrored onto html here. */
html:has(body[style*="overflow: hidden"]),
html:has(body[style*="overflow:hidden"]),
html:has(body.modal-open) { overflow: hidden; }

/* 2. Media never wider than its container; images keep their aspect ratio when capped. */
img, video, canvas, iframe, embed, object { max-width: 100%; }
img { height: auto; }

/* 3. Long words / URLs wrap instead of pushing the layout wider. */
h1, h2, h3, h4, h5, h6, p, li, dd, blockquote, figcaption, label, summary { overflow-wrap: break-word; }

/* 4. Code and pre-formatted blocks scroll inside themselves. */
pre { max-width: 100%; overflow-x: auto; }

/* 5. Headings that carry an old fixed inline pixel size (45px / 55px / 30px) are scaled down on phones.
   Inline styles can only be beaten with !important; the attribute selectors keep this limited to those headings. */
@media (max-width: 767px) {
    h1[style*="font-size:55px"], h1[style*="font-size: 55px"],
    h2[style*="font-size:45px"], h2[style*="font-size: 45px"] {
        font-size: clamp(1.75rem, 7.2vw, 2.25rem) !important;
        line-height: 1.2 !important;
    }
    h3[style*="font-size:30px"], h3[style*="font-size: 30px"] {
        font-size: clamp(1.35rem, 5.6vw, 1.75rem) !important;
        line-height: 1.25 !important;
    }
}

/* 6. Intro slide-in used on several heroes: a shorter travel distance on small screens. */
@media (max-width: 767px) {
    @keyframes heroSlideIn {
        from { opacity: 0; transform: translateX(20px); }
        to { opacity: 1; transform: translateX(0); }
    }
}

/* 7. Touch targets: about 44px high on touch devices. */
@media (pointer: coarse) {
    .btn, .alive-btn, .btn-round, .an2-btn { min-height: 44px; }
}

/* 8. Keyboard focus is always visible (:where keeps specificity at zero so any page-specific outline still wins). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid #ff0000;
    outline-offset: 2px;
}

/* 9. Respect "reduce motion": animations and transitions finish instantly (end state is still reached). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 10. Small labels never drop below a readable size on phones (selectors prefixed with `body` so they beat the page-level rules
   that set 9-10.5px; named after the elements the audit found on /career, /about, /solutions, /case-study and one service page). */
@media (max-width: 767px) {
    body .badge-strip .badge { font-size: 12px; }
    body .technology-item span { font-size: 12px; }
    body .delivery-badge-content span { font-size: 11px; }
    body .solh-faq-answer-number, body .solh-faq-answer-label, body .solh-cta-label, body .solh-crm-node span { font-size: 11px; }
    body .cs-item-type, body .cs-eyebrow { font-size: 12px; }
    body .hv-title { font-size: 11px; }
}

/* 11. Text links that act as buttons ("Read more", "Explore ...") get a comfortable tap height on touch screens. */
@media (pointer: coarse) {
    .read-more-btn, .sv2-more, .blog-card-link, .cs-item-link, .solh-category-link, .solh-map-link, .bfbtn, .mfd-topic-btn, a.indh-rel {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    div.indh-rel a, .hdd-rel a, .sv2-rel a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}

/* 12. Breadcrumb links, topic buttons and card links: comfortable tap height on touch screens. */
@media (pointer: coarse) {
    .bcx li a { min-height: 44px; }
    .insh-links button, .industry-modern-card__body a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* 13. Remaining touch-target groups found by the final audit:
   service-page related links, the legal contents list, the regional header icons and the regional social icons. */
@media (pointer: coarse) {
    .sv3-rlinks a, .tos-sidebar nav a { display: flex; align-items: center; min-height: 44px; }
    .mobile-icons a, .nav-item.gap-4 a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
}

/* 14. Decorative micro labels found at desktop widths: raised to a readable size (these sit in circles / chips that have room for 11px). */
body .delivery-badge-content span { font-size: 11px; }
body .badge-strip .badge { font-size: 12px; }
body .solh-journey-number, body .solh-faq-answer-number, body .solh-faq-answer-label, body .solh-cta-label, body .solh-crm-center small, body .solh-tech-center small { font-size: 11px; }

/* 15. Regional headers (in / ae / ng / sp). The 8-9 icon + label items need roughly 1000-1100px next to the logo, more than the Bootstrap
   container offers between 992px and 1365px, so the last item ran past the screen edge (and the root clip hid it).
   992-1199px: icons are dropped and spacing tightened. 1200-1365px: icons stay, spacing and type are one step smaller.
   From 1366px up the menu is unchanged. */
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar .navbar-nav.flex-nowrap > .nav-item > .nav-link { padding-left: 10px; padding-right: 10px; font-size: 15px; }
    .navbar .navbar-nav.flex-nowrap > .nav-item > .nav-link > i:first-child { display: none; }
}
@media (min-width: 1200px) and (max-width: 1365px) {
    .navbar .navbar-nav.flex-nowrap > .nav-item > .nav-link { padding-left: 10px; padding-right: 10px; font-size: 15px; }
    .navbar .navbar-nav.flex-nowrap > .nav-item > .nav-link > i:first-child { margin-right: 6px !important; }
    .navbar .navbar-brand { flex-basis: 200px; }
}

/* 16. The regional logos sit in a fixed box (150-180 x 40px) whose proportions differ from the image, which squeezed the logo by up to 26%.
   contain keeps the box and the layout, and restores the artwork's own proportions. */
.navbar-brand img { object-fit: contain; object-position: left center; }

/* 17. Touch comfort for two small text-link groups on the regional pages: the "Let's Connect" pill and the state / city link lists. */
@media (pointer: coarse) {
    .connect-btn { display: inline-flex; align-items: center; min-height: 36px; }
    .city-grid-list .city-link { padding-top: 8px; padding-bottom: 8px; }
}