/* JTN Africa fixes on top of the Orisa theme (loaded last on every page by
   _export/finalize.py). */

/* Phones: a little more breathing room than Bootstrap's 12px gutter */
@media (max-width: 575.98px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Floating logo that appears on scroll had no background, so it sat on top of
   text and images; give it the same pill as the MENU button and line the two up
   (same top, same height) */
.at-sticky-logo {
    background: var(--at-neutral-0, #FEFEFE);
    border: 1px solid var(--at-neutral-100, #DFDFDF);
    border-radius: 16px;
    padding: 14px 20px;
    top: 40px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
    .at-sticky-logo {
        padding: 7px 12px;
        top: 20px;
    }
}
/* keep both floating controls on the wider phone content edge set above */
@media (max-width: 575.98px) {
    .at-sticky-logo { left: 20px; }
    .hamburger-sticky-menu { right: 20px; }
}

/* Project / service write-ups: indent lists so bullets sit inside the text
   column, and give headings room above them */
.ck-content ul,
.ck-content ol {
    padding-left: 1.4em;
    margin-bottom: 1.25em;
}
.ck-content li {
    margin-bottom: .35em;
}
.ck-content h2 {
    margin-top: 1.6em;
    margin-bottom: .5em;
}
.ck-content h3 {
    margin-top: 1.25em;
    margin-bottom: .4em;
}
.ck-content > :first-child {
    margin-top: 0;
}

/* Project and service page titles: 40px on a phone was bigger than the image */
@media (max-width: 767.98px) {
    .sec-1-portfolio-details-1 .section-title,
    .sec-1-services-details .section-title {
        font-size: 30px;
        line-height: 1.15;
    }
}

/* Industries / solution category lists: the desktop design reveals the text and
   grows the image on hover, which phones never do - show it all, full width */
@media (max-width: 991.98px) {
    .at-service-item .number {
        font-size: 22px;
        opacity: 1;
        letter-spacing: 0;
    }
    .at-service-item .content .title {
        font-size: 26px;
        line-height: 1.2;
        letter-spacing: -.5px;
        opacity: 1;
    }
    .at-service-item .content .text {
        opacity: 1;
        max-height: none;
        margin-top: 8px;
    }
    .at-service-item .thumb {
        text-align: left;
    }
    .at-service-item .thumb img,
    .at-service-item:hover .thumb img {
        max-width: 100%;
    }
}

/* Animated counters: the theme spaces every digit 12px apart, so "14+" read as
   "1 4 +" (About client row, home statistics) */
.odometer {
    letter-spacing: normal;
}
.block-author + .fz-font-md {
    margin-left: 12px;
}
/* About: decorative icon overlapped the client row on phones and tablets */
@media (max-width: 991.98px) {
    .at-about-svg-wrap {
        display: none;
    }
}

/* Floating "Contact us" launcher overlapped the back-to-top button: it assumed
   back-to-top sits 20px from the edge, but main.css puts it at 50px above 575px.
   Keep a 16px gap in both cases (edge + 44px button + 16px). */
.jtn-contact {
    right: 110px;
}
@media (max-width: 574.98px) {
    .jtn-contact {
        right: 80px;
    }
}

/* Footer "JTN Africa®" wordmark: one line at every width. Size it from its own
   column (container query) instead of fixed breakpoint sizes that wrapped it. */
footer .text-lg-end:has(> .text-scale-anim) {
    container-type: inline-size;
}
footer .text-scale-anim {
    white-space: nowrap;
    /* theme.css forces .fz-160 sizes with !important below 1400px */
    font-size: min(160px, 14.5cqw) !important;
}
footer .text-scale-anim .at-word-span {
    white-space: nowrap;
}

/* Privacy notice / Terms: the legal text had no container (edge to edge), no
   list bullets and cramped headings */
.legal-doc {
    max-width: 820px;
    margin: 0 auto;
    padding: 40px 20px 120px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--at-neutral-800, #333);
}
.legal-doc h1 {
    margin: 0 0 8px;
}
.legal-doc h2 {
    margin: 48px 0 12px;
    padding-top: 24px;
    border-top: 1px solid var(--at-neutral-100, #e6e6e6);
}
.legal-doc h3 {
    margin: 28px 0 8px;
}
.legal-doc p {
    margin: 0 0 16px;
}
.legal-doc ul,
.legal-doc ol {
    list-style: disc;
    padding-left: 1.4em;
    margin: 0 0 20px;
}
.legal-doc ol {
    list-style: decimal;
}
.legal-doc li {
    margin-bottom: 6px;
}
.legal-doc a {
    color: var(--at-theme-primary, #2CB34A);
    text-decoration: underline;
}
.legal-doc blockquote {
    margin: 0 0 32px;
    padding: 16px 20px;
    border-left: 4px solid #F5A524;
    border-radius: 8px;
    background: rgba(245, 165, 36, .12);
    font-size: 15px;
}
.legal-doc blockquote p:last-child {
    margin-bottom: 0;
}

/* Industries / solution lists on desktop: 50px titles in a ~530px column wrapped
   to three lines and ran into the description */
@media (min-width: 992px) {
    .at-service-item .content .title {
        font-size: 36px;
        line-height: 1.15;
        letter-spacing: -1px;
    }
}
/* The hover preview panel crops every image to a near-square; show the whole
   image instead */
.at-service-img-wrapper .hover-image img {
    object-fit: contain;
    background: #08110c; /* matches the framed project images */
}

/* Project galleries with a single image: nothing to page through, so hide the
   slider arrows/dots and the lightbox previous/next buttons */
.project-gallery-slider:has(.swiper-slide:only-child) .swiper-button-prev,
.project-gallery-slider:has(.swiper-slide:only-child) .swiper-button-next,
.project-gallery-slider:has(.swiper-slide:only-child) .swiper-pagination,
body:has(.project-gallery-slider .swiper-slide:only-child) .project-lightbox__nav {
    display: none;
}

/* Multi-image project galleries mix landscape, square and portrait images: keep
   every slide 16:9 so the slider doesn't jump to the tallest one (the lightbox
   still shows each image in full) */
.project-gallery-slider:has(.swiper-slide + .swiper-slide) .project-gallery-item img {
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: var(--bs-tertiary-bg, #f1f1f1);
}

/* Client quotes inside case study write-ups */
.ck-content blockquote {
    margin: 32px 0;
    padding: 20px 24px;
    border-left: 4px solid var(--at-theme-primary, #2CB34A);
    border-radius: 8px;
    background: var(--at-neutral-50, #f6f6f6);
    font-size: 18px;
}
.ck-content blockquote p {
    margin: 0;
}
.ck-content blockquote strong {
    display: block;
    margin-top: 10px;
    font-size: 15px;
}

/* Home hero: client quote under the left image, and a stats card over the
   right image (the theme's .cilent-word-wide-content card) */
.hero-quote blockquote {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 20px;
    line-height: 1.45;
}
.hero-stats .h3 {
    font-size: 40px;
    line-height: 1.1;
}
.hero-quote__avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
}
.cilent-word-wide .hero-stats {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    max-width: 340px;
    margin: 0 auto;
}
@media (max-width: 575.98px) {
    .cilent-word-wide .hero-stats {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }
    .cilent-word-wide .hero-stats .avatar {
        width: 44px;
        height: 44px;
        margin-left: -18px;
    }
}

/* Project grids: centre a lone card on the last row instead of leaving it
   stranded on the left */
[data-block-id="projects"] .container.pt-70 > .row {
    justify-content: center;
}
/* Home "Work we are proud of" shows three cards per row on desktop: the
   narrower cards need smaller titles, and the tag pills collided with the
   headline figure (they still show on Our Work, where cards are wider).
   Tablets get two per row of the same narrow cards, so apply from 768px. */
@media (min-width: 768px) {
    [data-block-id="projects"] .col-lg-4 .card_case__studies-footer-title {
        font-size: 20px;
        line-height: 1.3;
    }
    [data-block-id="projects"] .col-lg-4 .card_case__studies-tags-overlay {
        display: none;
    }
}

/* Home "Why choose us": cards now carry text */
.why-card svg {
    color: var(--at-theme-primary);
}
.why-card h3 {
    margin: 20px 0 8px;
}
.why-card p {
    margin-bottom: 0;
}
@media (max-width: 575.98px) {
    [data-block-id="about-us-information"] .hover-unborder > div {
        padding: 24px !important;
    }
}