/*
 * Codexia design system: global fixes from the 13 Oct 2026 design audit
 * (quick-fix items, section 10 "Proposed unified standard").
 *
 * Loaded after style.css so these rules win. Values live in the custom
 * properties below; when the Claude Design handover changes a value, change
 * it here once.
 *
 * The testimonial slider (.testimonials-area) has been redesigned separately
 * and is deliberately left out of every rule.
 */

:root {
    /* Colour */
    --cx-primary: #284d91;
    --cx-text: #2e2e2e;
    --cx-text-muted: #555555;
    --cx-surface: #ffffff;
    --cx-surface-alt: #f6f6f6;
    --cx-tint: #f1f6ff;
    --cx-on-primary: #ffffff;

    /* Type scale (desktop) */
    --cx-h1: 48px;
    --cx-h2: 36px;
    --cx-h3: 22px;
    --cx-h4: 18px;
    --cx-body: 16px;
    --cx-lead: 20px;
    --cx-small: 14px;
    --cx-line-body: 1.65;

    /* Shape and spacing */
    --cx-radius-control: 10px;
    --cx-button-height: 52px;
    --cx-field-height: 48px;
    --cx-chip-height: 40px;
    --cx-section-space: 80px;
    --cx-heading-gap: 40px;
    --cx-text-measure: 760px;
}

@media (max-width: 767.98px) {
    :root {
        --cx-h1: 30px;
        --cx-h2: 24px;
        --cx-h3: 18px;
        --cx-h4: 16px;
        --cx-lead: 18px;
        --cx-button-height: 48px;
        --cx-section-space: 48px;
    }
}


/* ---------------------------------------------------------------------------
 * T5 Body text: 16/500, line height 1.65, nothing below 14px, no justify (L4)
 * ------------------------------------------------------------------------ */

body {
    line-height: var(--cx-line-body);
}

/* The testimonial slider keeps the theme's previous line height. */
.testimonials-area {
    line-height: 30px;
}

/* :where() keeps this at element-level specificity, so purpose-built text
   styles (lead, labels, small text) still win over it. */
p:where(:not(.testimonials-area *, .count-text)),
.banner-content,
.services-area .services-items .default-tab .info,
.specialities-area p,
.blog-tab .info p,
.blog-detail p,
.pricing-heading p {
    font-size: var(--cx-body);
    line-height: var(--cx-line-body);
}

.blog-tab .info p,
.blog-detail p {
    text-align: left;
}


/* ---------------------------------------------------------------------------
 * T1 H1: one style on every page. Colour rule stays as built: the H1 is blue
 * and its <span> part is dark, so the blue phrase is the text outside the span.
 * ------------------------------------------------------------------------ */

.banner-caption h1,
.banner-content h1,
.cost-banner-caption h1 {
    font-size: var(--cx-h1);
    font-weight: 800;
    line-height: 1.2;
    text-transform: none;
    color: var(--cx-primary);
}

.banner-caption h1 span,
.banner-content h1 span,
.cost-banner-caption h1 span {
    color: var(--cx-text);
}


/* ---------------------------------------------------------------------------
 * T2 H2 section titles: 36/700 (24 mobile), dark, sentence case
 * ------------------------------------------------------------------------ */

h2:not(.testimonials-area *),
.specialities-area h2,
.process-tab-area h2,
.blog-top-area h2,
.pricing-heading h2 {
    font-size: var(--cx-h2);
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}

/* The "Factors Behind Our Uniqueness" box title is a box heading, not a
   section title; it waits for the inner-hero design (L2). */
.banner-text h2 {
    font-size: 30px;
}

@media (max-width: 1399.98px) {
    .banner-text h2 {
        font-size: 25px;
    }
}

@media (max-width: 767.98px) {
    .banner-text h2 {
        font-size: 20px;
    }
}

/* Subtitle line inside some section titles: 14px minimum on mobile. */
@media (max-width: 767.98px) {
    .contact-area h2 span,
    .contact-form h2 span {
        font-size: var(--cx-small);
    }
}


/* ---------------------------------------------------------------------------
 * T3 Home hero subtitle: a lead paragraph (was an H2), 20/500, 18 mobile
 * ------------------------------------------------------------------------ */

.banner-caption .banner-lead {
    font-size: var(--cx-lead);
    font-weight: 500;
    line-height: 1.5;
    color: var(--cx-text);
    margin-bottom: 20px;
}


/* ---------------------------------------------------------------------------
 * M3 Mobile card titles (H3 18, H4 16)
 * ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    h3:not(.testimonials-area *) {
        font-size: var(--cx-h3);
    }

    h4:not(.testimonials-area *) {
        font-size: var(--cx-h4);
    }
}


/* ---------------------------------------------------------------------------
 * T6 Nav "Get In Touch" sub-line: 12px minimum
 * ------------------------------------------------------------------------ */

.main-menu #mega-menu-wrap-primary #mega-menu-primary > li.get-touch-btn > a.mega-menu-link small,
.contact-btn a.btn-default small {
    font-size: 12px;
    line-height: 1.3;
}

/* At 12px the line widens the mobile header button over the logo, so on
   mobile it is removed (the audit allows "remove, or 12px minimum"). */
@media (max-width: 767.98px) {
    .contact-btn a.btn-default small {
        display: none;
    }
}


/* ---------------------------------------------------------------------------
 * B2 / M5 Buttons: 52px tall (48 mobile), 16/600, padding 0 28, radius 10
 * ------------------------------------------------------------------------ */

/* The two-line nav "Get In Touch" button (.contact-btn on mobile) keeps its own layout. */
.btn-default:not(.testimonials-area *):not(.contact-btn *),
.btn-secondary:not(.testimonials-area *),
.loadMoreBtn,
.wpcf7 .wpcf7-submit,
.contact-form input[type="submit"],
.blog-newsletter .tnp-widget-minimal input.tnp-submit,
input.tnp-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cx-button-height);
    height: auto;
    padding: 0 28px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--cx-radius-control);
}

/* Two 16px buttons don't fit side by side on a phone: stack them full width. */
@media (max-width: 767.98px) {
    .banner-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .banner-btns .btn-default,
    .banner-btns .btn-secondary {
        width: 100%;
        white-space: nowrap;
    }
}

/* <input> buttons don't centre text with flex; give them a fixed height. */
.wpcf7 .wpcf7-submit,
.contact-form input[type="submit"],
input.tnp-submit {
    display: inline-block;
    height: var(--cx-button-height);
}


/* ---------------------------------------------------------------------------
 * B6 Form fields: 48px, 16px, radius 10, one surface colour
 * ------------------------------------------------------------------------ */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.contact-form .form-control,
.contact-form .form-select {
    height: var(--cx-field-height);
    font-size: 16px;
    color: var(--cx-text);
    background-color: var(--cx-surface-alt);
}

.wpcf7 textarea,
.contact-form textarea.form-control {
    height: auto;
    font-size: 16px;
    color: var(--cx-text);
}

.wpcf7 select,
.wpcf7 textarea,
.wpcf7 input[type="text"]:not(.wpcf7-countrytext),
.wpcf7 input[type="email"] {
    border-radius: var(--cx-radius-control);
}

/* Phone field: country picker and number read as one 48px box. */
.wpcf7 .wpcf7-countrytext {
    border-radius: var(--cx-radius-control) 0 0 var(--cx-radius-control);
}

.wpcf7 .wpcf7-tel {
    border-radius: 0 var(--cx-radius-control) var(--cx-radius-control) 0;
}

/* On desktop the picker and the number sit in two Bootstrap columns; close
   the gutter between them so they join into one box. (The theme's mobile
   layout already overlaps them into one box.) */
@media (min-width: 768px) {
    .row:has(.wpcf7-countrytext) > [class*="col-"]:has(.wpcf7-countrytext) {
        padding-right: 0;
    }

    .row:has(.wpcf7-countrytext) > [class*="col-"]:has(.wpcf7-tel) {
        padding-left: 0;
    }
}


/* ---------------------------------------------------------------------------
 * B5 Text links: brand blue, 600, underline on hover
 * ------------------------------------------------------------------------ */

/* Bootstrap 5.2 colours every unstyled link #0d6efd through this variable. */
:root {
    --bs-link-color: var(--cx-primary);
    --bs-link-hover-color: var(--cx-primary);
}

/* ...except inside the testimonial slider, which keeps its current look. */
.testimonials-area {
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
}

.show-more-link:not(.testimonials-area *),
.service-tab-box .default-tab a,
p a:not(.btn):not(.testimonials-area *) {
    color: var(--cx-primary);
    font-weight: 600;
}

.show-more-link:not(.testimonials-area *):hover,
.service-tab-box .default-tab a:hover,
p a:not(.btn):not(.testimonials-area *):hover {
    text-decoration: underline;
}


/* ---------------------------------------------------------------------------
 * B4 Slider arrows: 44px solid primary circle (testimonial slider excluded)
 * ------------------------------------------------------------------------ */

.portfolio-slider .slick-prev,
.portfolio-slider .slick-next,
.testimonial-carousel .slick-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--cx-primary) !important; /* theme uses !important */
    opacity: 1;
}

.portfolio-slider .slick-prev:hover,
.portfolio-slider .slick-next:hover,
.portfolio-slider .slick-prev:focus,
.portfolio-slider .slick-next:focus,
.testimonial-carousel .slick-arrow:hover,
.testimonial-carousel .slick-arrow:focus {
    background-color: var(--cx-primary) !important;
}


/* ---------------------------------------------------------------------------
 * B7 Portfolio filter chips: 40px, 14/600, #f6f6f6 idle, primary active
 * ------------------------------------------------------------------------ */

.content-area .responsive-tabs .responsive-tabs__list__item,
.content-area .responsive-tabs .responsive-tabs__list__item--active,
.content-area .responsive-tabs .responsive-tabs__list__item--active:hover {
    height: var(--cx-chip-height);
    padding: 0 20px;
    font-size: var(--cx-small);
    font-weight: 600;
    line-height: var(--cx-chip-height);
    border-radius: var(--cx-radius-control);
}

.content-area .responsive-tabs .responsive-tabs__list__item {
    background: var(--cx-surface-alt);
    color: var(--cx-text);
}

.content-area .responsive-tabs .responsive-tabs__list__item:hover,
.content-area .responsive-tabs .responsive-tabs__list__item:focus,
.content-area .responsive-tabs .responsive-tabs__list__item--active,
.content-area .responsive-tabs .responsive-tabs__list__item--active:hover {
    background: var(--cx-primary);
    color: var(--cx-on-primary);
}


/* ---------------------------------------------------------------------------
 * C9 Client logos: 48px tall, natural width, never stretched
 * ------------------------------------------------------------------------ */

.clients-item img {
    height: 48px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
}


/* ---------------------------------------------------------------------------
 * C5 Service icons: one 48x48 box
 * ------------------------------------------------------------------------ */

.services-area .services-items .default-tab .icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}


/* ---------------------------------------------------------------------------
 * C10 Portfolio tech tags: 24px icon + 14px label
 * ------------------------------------------------------------------------ */

.portfolio-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--cx-small);
    font-weight: 600;
}

.portfolio-info img,
.platform .platform-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}


/* ---------------------------------------------------------------------------
 * C12 Stat counter: "+" in the same style as the number
 * ------------------------------------------------------------------------ */

.counter-row span {
    font-size: 1em;
}

.counter-row {
    font-family: 'cera_probold';
    font-size: 60px;
    color: var(--cx-primary);
    line-height: 1.2;
}

.counter-row .count-title {
    font-size: 1em;
}

@media (max-width: 767.98px) {
    .counter-row {
        font-size: 30px;
    }

    .counter .count-text {
        font-size: var(--cx-small);
    }
}


/* ---------------------------------------------------------------------------
 * L1 Section spacing: 80px desktop / 48px mobile, top and bottom equal.
 * Applies to page-level sections (direct children of <body>); the hero
 * banners and the testimonial slider keep their own spacing.
 * ------------------------------------------------------------------------ */

body > .services-area,
body > .specialities-area,
body > .message-area,
body > .portfolio-area,
body > .clients-area,
body > .work-tab-area,
body > .contact-area,
body > .content-area.content-area, /* class repeated to outrank .content-area.inner etc. */
body > .process-tab-area {
    padding-top: var(--cx-section-space);
    padding-bottom: var(--cx-section-space);
}

/* Bootstrap pt-0 / pt-5 on these sections are !important utilities. */
body > .content-area.pt-0,
body > .process-tab-area.pt-5 {
    padding-top: var(--cx-section-space) !important;
}

/* 40px between a section title block and its content */
.site-heading,
.portfolio-had,
.services-had,
.process-tab-area > .container > h2 {
    margin-bottom: var(--cx-heading-gap);
}


/* ---------------------------------------------------------------------------
 * L3 Long paragraphs: 760px reading width
 * ------------------------------------------------------------------------ */

.specialities-area p,
.our-about-text p,
.our-aim-text p,
.our-vision-text p {
    max-width: var(--cx-text-measure);
    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------------------------
 * L4 Alignment: card text left aligned (section titles stay centred)
 * ------------------------------------------------------------------------ */

.services-area .services-items .default-tab,
.services-area .services-items .default-tab .info {
    text-align: left;
}

.services-area .services-items .default-tab .icon {
    margin-left: 0;
    margin-right: 0;
}


/* ---------------------------------------------------------------------------
 * M1 Screen-reader-only text (the blog search label was 375px wide and
 * pushed the mobile Blog page to 537px)
 * ------------------------------------------------------------------------ */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wp-block-search__inside-wrapper {
    max-width: 100%;
}

.wp-block-search__input {
    min-width: 0;
}


/* ---------------------------------------------------------------------------
 * M2 "What happens next" / process steps on mobile: stacked white cards,
 * titles visible, 14px minimum
 * ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    /* On Get in touch the row is not inside a .container: add the gutter. */
    .process-tab-area > .process-tab-row {
        padding-left: 16px;
        padding-right: 16px;
    }

    .process-tab-row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        overflow: visible;
        white-space: normal;
    }

    .process-tab,
    .process-tab.expand,
    .intelligence .process-tab.expand {
        display: block;
        width: 100%;
        max-width: none;
        padding: 20px;
        text-align: left;
        background: var(--cx-surface);
        border-radius: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .09);
    }

    .process-tab .info,
    .process-tab.expand:hover .info {
        position: static;
        top: auto;
        margin-bottom: 8px;
    }

    .process-tab .info h4,
    .process-tab h4 {
        display: block;
        font-size: var(--cx-h4);
        color: var(--cx-text);
    }

    .process-tab-row .process-tab .icon,
    .process-tab-row .process-tab.expand .icon,
    .process-tab-row .process-tab.expand:hover .icon {
        position: static;
        width: auto !important; /* theme forces 200px with !important */
        height: auto;
        margin: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .process-tab .icon img {
        display: none;
    }

    .process-tab.expand .expand-text {
        min-height: 0;
        padding: 0;
        font-size: var(--cx-small);
        line-height: 1.5;
        color: var(--cx-text);
        background: transparent;
    }

    .process-tab.expand .expand-text p {
        font-size: var(--cx-small);
        line-height: 1.5;
        color: var(--cx-text);
        margin-bottom: 0;
    }
}


/* ---------------------------------------------------------------------------
 * Small text raised to the 14px minimum (desktop and mobile)
 * ------------------------------------------------------------------------ */

.process-tab.expand .expand-text,
.process-tab h4 span,
.pricing-duration,
.popular-badge,
.map-area .location .map-tooltip a,
.map-area .location .map-tooltip,
.blog-page .category-title,
.blog-page .category-title a {
    font-size: var(--cx-small);
}

@media (max-width: 767.98px) {
    .content-area .responsive-tabs .responsive-tabs__list__item {
        font-size: var(--cx-small);
    }
}


/* ---------------------------------------------------------------------------
 * M7 Mobile side gutter: 16px (Bootstrap's default is 12px)
 * ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    .container,
    .container-fluid {
        --bs-gutter-x: 2rem;
    }

    /* The testimonial slider keeps Bootstrap's default gutter. */
    .testimonials-area .container {
        --bs-gutter-x: 1.5rem;
    }
}