/* =========================================================================
   360TechSys theme — design tokens
   Source of truth: design.md. Every colour and font in the site resolves
   through the tokens below, so a retheme is an edit to :root, not a sweep
   through 190 KB of CSS.

   Loaded FIRST, before default.css / my-styles.css, so those files can
   reference the tokens.
   ========================================================================= */

/* ---- Poppins, self-hosted (latin). 400/500/600/700 ---------------------- */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/poppins-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/poppins-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/poppins-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/poppins-700.woff2') format('woff2');
}

:root {
    /* ---- Type ---- */
    --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif;

    /* ---- Brand ---- */
    --color-brand: #e84242;
    --color-brand-hot: #ff224d;
    --color-brand-hover: #ff1a44;
    --color-deep: #073447;
    --color-violet: #605be5;

    /* ---- Ink ---- */
    --color-ink: #333333;
    --color-ink-soft: #444444;
    --color-body: #666666;
    --color-body-soft: #7a7a7a;
    --color-muted: #9b9b9b;

    /* ---- Surfaces ---- */
    --color-surface: #ffffff;
    --color-surface-soft: #fcfcfc;
    --color-surface-alt: #f5f5f5;
    --color-line: #e8e8e8;
    --color-line-soft: #dbdbdb;

    /* ---- Signature gradient: red bleeding into deep teal ---- */
    --gradient-signature: linear-gradient(to bottom right, #e84242 0%, #073447 50%);

    /* ---- Derived: brand at alpha. Used where the old theme used tinted
            gold washes behind sections and carousels. ---- */
    --color-brand-08: rgba(232, 66, 66, 0.08);
    --color-brand-15: rgba(232, 66, 66, 0.15);
    --color-brand-30: rgba(232, 66, 66, 0.3);

    /* ---- Deep at alpha. Used to ground the bottom edge of hero/portfolio
            media. The old theme faded these to a warm gold glow; fading to the
            brand red instead put a muddy red band across the photography, so
            they fade to the deep teal — which is exactly the role design.md
            gives it (the hero gradient's far end). ---- */
    --color-deep-30: rgba(7, 52, 71, 0.32);
    --color-deep-00: rgba(7, 52, 71, 0);

    /* ---- On-deep: text sitting on --color-deep surfaces ---- */
    --color-on-deep: #ffffff;
    --color-on-deep-soft: rgba(255, 255, 255, 0.72);
    --color-on-deep-line: rgba(255, 255, 255, 0.16);

    /* ---- Shape ---- */
    --radius-pill: 25px;

    /* ---- Legacy aliases. The old theme's variable names are referenced in
            ~30 places across my-styles.css and the page-level <style> blocks;
            repointing them here retires the old palette without having to
            chase every call site. ---- */
    --primaryColor: var(--color-brand);
    --secondaryColor: var(--color-deep);
    --primaryBtnBgColor: var(--color-brand);
    --primaryBtnTextColor: #ffffff;
    --primaryBtnHoverBgColor: #ffffff;
    --primaryBtnHoverTextColor: var(--color-brand);
    --gradientOneColor: var(--color-brand);
    --gradientTwoColor: var(--color-brand-hover);
}

/* ---- Base typography (design.md) --------------------------------------- */
body {
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--color-body);
    background-color: var(--color-surface);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-weight: 600;
    color: var(--color-ink);
}

/* The hero headlines were authored as <div class="hh2">, so five pages
   - index, contact-us, privacy-policy, terms-and-conditions and the
   casestudies index - shipped with NO <h1> at all. They are real <h1>s now.
   A <div> has no UA margin and .hh2 sets none either, so without this the tag
   change alone would add 0.67em above AND below every hero headline (~45px at
   67px type). This keeps the change purely semantic: nothing moves on screen.
   `color: inherit` is the other half, and it is NOT cosmetic: the rule three
   lines above paints every h1-h5 with --color-ink (#333). A <div> never matched
   it, so the homepage hero inherited white from .hero-home and looked right;
   the moment it became an <h1> it turned dark grey on the dark hero video.
   Measured before/after: home was rgb(255,255,255) as a div and rgb(51,51,51)
   as an h1. Inheriting restores the div's exact behaviour everywhere.

   .primary-title already declares its own `margin: 0` AND `color`, so the
   casestudies headline needed no equivalent. */
h1.hh2 {
    margin: 0;
    color: inherit;
}

.section-title {
    font-weight: 600;
    color: var(--color-ink);
    font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.75rem);
    line-height: 1.25;
}

/* the red second half of a section title */
.section-title em {
    font-style: normal;
    font-weight: 600;
    color: var(--color-brand);
}

.eyebrow {
    font-weight: 600;
    color: var(--color-brand-hot);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.container-boxed {
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* ---- Logo -------------------------------------------------------------
   One source of truth: assets/img/logo.svg, inlined into the header and the
   footer by includes/logo.php. Replace that file and both update. See the
   header of logo.php for why it is inlined rather than an <img>.

   The mark ships white-winged, because the header and footer are --color-deep.
   Sizing lives here now: logo.php strips the SVG's intrinsic width/height so
   each context can size it independently. */
.zf-brand svg {
    width: 182px;
    height: auto;
    display: block;
}

.ft-logo svg {
    width: 388px;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Case-study pages are the exception: their header is LIGHT until it sticks,
   so the white half of the mark would vanish. Repaint it to ink there. The
   selectors key off the fill values in logo.svg — if you swap the logo, keep
   `white` / `#FFFFFF` on whatever is meant to be white on the dark chrome. */
.inner-case-study .wk_logo svg path[fill="white"],
.inner-case-study .wk_logo svg path[fill="#FFFFFF"],
.inner-case-study .wk_logo svg path[fill^="url(#paint1"],
.inner-case-study .wk_logo svg path[fill^="url(#paint3"] {
    fill: var(--color-deep);
}

/* ...and back to white once that header sticks, because the stuck header is
   deep teal like everywhere else. */
.inner-case-study header.stickedHeader .wk_logo svg path[fill="white"],
.inner-case-study header.stickedHeader .wk_logo svg path[fill="#FFFFFF"],
.inner-case-study header.stickedHeader .wk_logo svg path[fill^="url(#paint1"],
.inner-case-study header.stickedHeader .wk_logo svg path[fill^="url(#paint3"] {
    fill: #ffffff;
}

/* ---- Decorative backdrops ---------------------------------------------
   A handful of sections use painted artwork as a background image (the UAE
   cityscape, the portfolio banner, some CTA panels). They are baked gold and
   violet from the old theme, so no colour token can reach them — and several
   are set inline, per page, so the URL isn't knowable from here.

   Each one is re-hued on a ::before that inherits its parent's background
   verbatim and rotates the hue: gold -> red, violet -> teal. The filtered copy
   paints over the original and covers it. Real content is lifted to z-index 1
   so only the artwork is affected, never the text on top of it.
   White and grey have no hue, so the untinted parts of these images survive
   the rotation unchanged. */
section.cta-contact,
section.hero.wk_portfolio,
section.wk_cta_sec2,
section.fb_cta2 {
    position: relative;
    isolation: isolate;
}

section.cta-contact::before,
section.hero.wk_portfolio::before,
section.wk_cta_sec2::before,
section.fb_cta2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: inherit;
    pointer-events: none;
}

section.cta-contact > *,
section.hero.wk_portfolio > *,
section.wk_cta_sec2 > *,
section.fb_cta2 > * {
    position: relative;
    z-index: 1;
}

/* gold -> brand red */
section.cta-contact::before {
    filter: hue-rotate(-48deg) saturate(0.92);
}

/* violet -> deep teal */
section.hero.wk_portfolio::before,
section.wk_cta_sec2::before,
section.fb_cta2::before {
    filter: hue-rotate(-72deg) saturate(0.8);
}

/* the digital-marketing CTA reuses .cta-contact but its artwork is violet,
   not gold — so it needs the teal rotation, not the red one */
section.cta-contact.wk_cta_sec::before {
    filter: hue-rotate(-72deg) saturate(0.8);
}

/* Cream washes. A dozen CTA panels sit on flat beige artwork (contact-cta-bg,
   ready-transform-bg, the per-service CTA backdrops). Rotating their hue would
   only trade beige for pink; design.md's surfaces are neutral — #ffffff,
   #fcfcfc, #f5f5f5 — so the warm cast is simply desaturated out, leaving the
   texture and the near-white surface the design system actually asks for. */
section.cta-contact-2,
section.wk_cta3_sec,
section.logo_cta,
section.ad_cta3,
.uk_cta_contact {
    position: relative;
    isolation: isolate;
}

/* section.logo_cta is deliberately NOT in this list. The wash below paints a
   desaturated copy of the section's own background over the top, which was
   right while logo_cta sat on cream baked-in artwork. Its artwork is now
   ready-to-transform.jpg — a real colour photograph — and saturate(0) rendered
   it greyscale. */
section.cta-contact-2::before,
section.wk_cta3_sec::before,
section.ad_cta3::before,
.uk_cta_contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: inherit;
    pointer-events: none;
    filter: saturate(0) brightness(1.03);
}

section.cta-contact-2 > *,
section.wk_cta3_sec > *,
section.logo_cta > *,
section.ad_cta3 > *,
.uk_cta_contact > * {
    position: relative;
    z-index: 1;
}

/* ---- Focus. A deliberate accessibility addition; the Elementor original
        had none. ---------------------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--color-brand-hot);
    outline-offset: 3px;
}

/* ---- Scroll ------------------------------------------------------------ */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

/* Lenis's required stylesheet. The case-study pages load Lenis's JS from unpkg
 * but never loaded its CSS, and that combination is what made those pages feel
 * stuck: Lenis scrolls by calling window.scrollTo() on every frame, and the
 * `scroll-behavior: smooth` above made the browser apply its OWN smooth
 * animation to each of those calls. Two smooth-scrollers stacked, so the page
 * crawled - 7500px of wheel input moved the page 1179px.
 *
 * Lenis adds `.lenis.lenis-smooth` to <html> only while it is actually driving
 * the scroll, so this is scoped to that: pages without Lenis keep the native
 * smooth scrolling above for their anchor links.
 *
 * Do NOT "tidy" this by deleting scroll-behavior: smooth instead - that would
 * take smooth anchor scrolling away from the other 9 pages. */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* ---- Filter tabs ------------------------------------------------------- */
/* Shared by portfolio.php (.cases .tab) and the case-study pages
 * (.cases_lk .tab). These rules used to sit in casestudies/…/wkstyle.css@v2.css,
 * which only head-casestudy.php loads - so on portfolio.php the identical markup
 * fell back to unstyled default buttons. They live here because theme.css is the
 * one sheet BOTH head includes pull in.
 *
 * The font was `DM Sans`, a leftover from before the Poppins retheme: that family
 * is no longer loaded, so these were silently rendering in system-ui. Inherit the
 * body font instead of naming one. */

/* Same story as .tab: the header row's grid (title left, filter pills hugging
 * the right edge) only ever existed in the case-study sheet, so on
 * portfolio.php title and tabs just stacked as plain blocks.
 * am_responsive.css@v1.css collapses this to a centered wrapping row <=991px. */
.cases__top {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
    margin-bottom: clamp(20px, 4vw, 36px);
}

/* Match the case-study title treatment (the compact eyebrow style): without
 * this, portfolio.php falls back to the generic h3 size, the title eats half
 * the row and forces the pills to wrap. Scoped selector also outranks
 * am_responsive's `.cases__title {margin-bottom: 20px}`. */
.cases__top .cases__title {
    margin: 0;
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.cases__tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    row-gap: 14px;
}

/* Below ~1350px the title + six pills can't share one line without a lone
 * pill orphaning onto a second row. Stack instead: title above, one clean
 * left-aligned pill row below. am_responsive.css takes over <=991px. */
@media (max-width: 1349px) {
    .cases__top {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .cases__tabs {
        justify-content: flex-start;
    }
}

.tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    min-width: 110px;
    /* Fluid: relaxes to 28px on wide screens, tightens just enough on laptop
     * widths so title + all six pills share one row. */
    padding: 0 clamp(16px, 1.6vw, 28px);
    white-space: nowrap;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid var(--color-line);
    background: #fff;
    color: var(--color-ink);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    /* Not `transition: .5s` — that animated every property (including layout
     * ones) over half a second, which reads as lag. Only paint-cheap props,
     * with a strong ease-out so feedback lands instantly. */
    transition:
        background-color 200ms cubic-bezier(0.23, 1, 0.32, 1),
        border-color 200ms cubic-bezier(0.23, 1, 0.32, 1),
        color 200ms cubic-bezier(0.23, 1, 0.32, 1),
        transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Press feedback: the button visibly acknowledges the click. */
.tab:active {
    transform: scale(0.97);
}

/* Hover is gated to real pointers - on touch, a tap used to paint the red
 * "active" look onto a tab that wasn't selected. */
@media (hover: hover) and (pointer: fine) {
    .tab:hover {
        background: radial-gradient(125.34% 134.49% at 46.22% 80.47%, var(--color-brand) 0%, var(--color-brand-hover) 52%, var(--color-brand) 100%), rgba(0, 0, 0, 0.08);
        border-color: transparent;
    }
}

.tab.is-active {
    background: radial-gradient(125.34% 134.49% at 46.22% 80.47%, var(--color-brand) 0%, var(--color-brand-hover) 52%, var(--color-brand) 100%), rgba(0, 0, 0, 0.08);
    border-color: transparent;
    color: var(--color-ink);
    font-weight: 800;
}

/* The panels the tabs switch between. This was the other half of the same bug:
 * it also lived only in the case-study sheet, so on portfolio.php NO panel was
 * ever hidden - all six rendered stacked down the page, which is why the entire
 * portfolio appeared without anyone touching Load More.
 * Only portfolio.php, casestudies/index.php and klensa.php use .panel, and each
 * has exactly one .is-active, so this is safe to apply globally. */
.panel {
    display: none;
}

.panel.is-active {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   Floating WhatsApp button
   Markup: includes/footer.php (the only partial both head includes share).

   These rules live HERE, in theme.css, and not in my-styles.css, for the same
   reason the Lenis and .tab/.panel rules were moved here: head-casestudy.php
   does NOT load my-styles.css, so anything defined there is invisible on the
   six case-study pages.

   The inline <svg> in footer.php carries a viewBox but no width/height
   attributes, so WITHOUT the .wa-float svg rule below it falls back to the
   default replaced-element size (300x150) and renders enormous. If this block
   is ever removed again, the button breaks — size the svg, don't drop it.

   Deliberately a NEW class (.wa-float) rather than reusing .chat-bottom-right:
   that older class is still defined in my-styles.css + media-queries.css, and
   my-styles.css loads AFTER theme.css on root pages only. Reusing the name
   would give the button one position on root pages and a different one on
   case-study pages.

   z-index 40 is intentionally BELOW .zf-header (50). The mobile nav drawer
   (.zf-drawer) is a child of the header, so a higher value would let this
   button punch through an open mobile menu.
   ========================================================================== */
.wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 40;
    display: block;
    line-height: 0;
    transition: transform .3s ease;
}

.wa-float svg {
    display: block;
    width: 56px;
    height: 56px;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .22));
}

.wa-float:hover,
.wa-float:focus-visible {
    transform: scale(1.08);
}

.wa-float:focus-visible {
    outline: 3px solid var(--color-ink);
    outline-offset: 4px;
    border-radius: 50%;
}

@media (max-width: 991px) {
    .wa-float {
        right: 16px;
        bottom: 16px;
    }

    .wa-float svg {
        width: 48px;
        height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wa-float {
        transition: none;
    }

    .wa-float:hover,
    .wa-float:focus-visible {
        transform: none;
    }
}