/*
Theme Name: Kate Theme 2024
Author: Hipinspire
Author URI: https://www.hipinspire.com/
Version: 1.0
*/

/* Mobile nav: theme.min.css only defines a desktop hover dropdown for .sub-menu.
   Show sub-items inline inside the hamburger menu. */
@media (max-width: 1199.98px) {
    header .header-holder .menu-holder .primary-menu > li .sub-menu {
        display: block;
        position: static;
        width: auto;
        padding: 12px 0 0;
        background-color: transparent;
        box-shadow: none;
        border-radius: 0;
    }
    header .header-holder .menu-holder .primary-menu > li .sub-menu li {
        padding: 0 0 0 20px;
        margin: 0 0 10px;
    }
    /* hover arrow is meaningless when the sub-menu is always expanded */
    header .header-holder .menu-holder .primary-menu > li.menu-item-has-children > a::after {
        display: none;
    }
}

/* ===== Responsive pass: fluid type (375px -> 1200px viewport) =====
   Endpoints match the previous fixed mobile/desktop sizes, so only the
   in-between scaling changes. theme.min.css had no mobile rule at all
   for the home hero h1 (46px at every width). */
.home-hero-section .section-title h1 {
    font-size: clamp(32px, 25.6px + 1.7vw, 46px);
    line-height: 1.3;
}
h2,
.case-study-hero-section .section-title h1,
.guidance-hero-section .section-title h1,
.work-hero-section .section-title h1 {
    font-size: clamp(36px, 34.2px + 0.49vw, 40px);
}
.case-study-hero-section .section-title h1 {
    line-height: 1.4;
}
.supp-comp-section .section-title h3 {
    font-size: clamp(22px, 20.2px + 0.49vw, 26px);
}
.about-us-section .text-block h3,
.about-hero-section .text-block h3 {
    font-size: clamp(21px, 19.6px + 0.36vw, 24px);
}
.case-study-hero-section .section-title p {
    font-size: clamp(16px, 14.2px + 0.49vw, 20px);
    line-height: 1.4;
}

/* ===== Wrapping / widow control ===== */
/* No overflow-wrap: break-word on headings: combined with text-wrap: balance,
   Chromium's balancer splits words mid-word (e.g. "Transformatio / n Teams"). */
h1, h2, h3, h4, h5 {
    text-wrap: balance;
}
p, li {
    text-wrap: pretty;
}

/* ===== Readable measure on intro/body copy ===== */
.section-title p,
.text-block p {
    max-width: 65ch;
}
/* Sections that theme.min.css centers need auto margins so the capped
   paragraph stays centered; left-aligned heroes must not get these. */
.why-us-section .section-title p,
.we-serve-section .section-title p,
.artifacts-section .section-title p,
.our-work-section .section-title p,
.testimonials-section .section-title p,
.our-process-section .section-title p,
.quality-section .section-title p,
.ecosystem-section .section-title p,
.work-hero-section .section-title p,
.work-content-section .section-title p,
.services-hero-section .section-title p,
.projects-section .section-title p,
.specialization-section .section-title p,
.solutions-section .section-title p,
.artifacts-2-section .section-title p,
.pricing-section .section-title p,
.guidance-hero-section .section-title p,
.ai-solutions-section .section-title p,
.this-work-section .section-title p,
.ai-work-section .section-title p,
.case-study-hero-section .section-title p,
.case-decisions-section .section-title p {
    margin-left: auto;
    margin-right: auto;
}

/* ===== Mobile reflow fixes ===== */
@media (max-width: 767.98px) {
    /* theme.min.css sets margin: 0 160px 15px 0 with no mobile override */
    .projects-section .box h4,
    .solutions-section .box h4 {
        margin-right: 0;
    }
}
@media (max-width: 575.98px) {
    .specialization-section .specs-slider {
        padding: 44px;
    }
}
/* theme.min.css places the specs-slider arrows 63px outside the box and only
   pulls them in below 768px; between 768px and ~1080px the viewport margin is
   narrower than 63px, so the arrows get clipped. Keep them inside there. */
@media (min-width: 768px) and (max-width: 1085.98px) {
    .specialization-section .specs-slider .slick-arrow.slick-next { right: 0; }
    .specialization-section .specs-slider .slick-arrow.slick-prev { left: 0; }
}

/* Home hero illustration: theme bleeds it to 130% of its column, but between
   ~992px and ~1400px the viewport side margin is narrower than the bleed, so
   the graphic gets sliced at the viewport edge (wrapper clips overflow-x).
   Cap it so it grows only as far as the viewport edge in that range. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .home-hero-section .image-block img {
        max-width: min(130%, calc(100% + 50vw - 468px));
    }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .home-hero-section .image-block img {
        max-width: min(130%, calc(100% + 50vw - 558px));
    }
}