/* ----------------------------------------------------------------
   Idabyte 2026 modernization overrides
   Loaded AFTER the legacy mangled-name stylesheets so source order
   wins. Implements P0-6 (self-hosted fonts), P0-10 (color contrast),
   P0-11 (reduced motion) and a few small a11y polish items from
   MODERNIZATION_AUDIT.md.

   Do NOT inline these into the mangled CSS files — they're frozen
   per the HTTrack-mirror constraint in CLAUDE.md.
   ---------------------------------------------------------------- */

/* ---------- P0-6: self-hosted Inter variable font (400..700) ---------- */
/* Replaces the WebFontLoader-driven Google Fonts load. Subset split
   matches Google Fonts so only the bytes the user needs ship. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter/inter-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter/inter-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter/inter-greek-ext.woff2') format('woff2');
    unicode-range: U+1F00-1FFF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter/inter-greek.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter/inter-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Promote Inter to the system-wide UI font. The legacy stash CSS
   has `body { font-family: Source Sans Pro; }` (which was never
   actually loaded by the WebFontLoader — only Montserrat/Roboto/etc.
   were), so without this rule body text falls back to the browser's
   default serif. Use !important to win over the legacy per-element
   declarations (.entry-title, .vc_btn3, footer rules, etc.). Icon
   fonts (Font Awesome, outline, highgrade, fontawesome) are left
   alone — they keep their existing font-family. */
html, body,
input, select, textarea, button,
h1, h2, h3, h4, h5, h6,
p, li, blockquote, address, label, time, small, em, strong, b,
a, .first_level_menu_link, .vc_btn3, .vc_btn3-style-custom,
.wpb_text_column, .wpb_text_column p, .wpb_text_column li,
.tech-chips li, .clients-eyebrow, .clients-subtitle, .director-role {
    font-family: 'dejarip', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Keep icon-font glyphs in their respective fonts */
.fa, [class*="icon-"], i.fa, i[class*="icon-"], i[class^="fa-"], i[class*=" fa-"] {
    font-family: inherit;
}
i.fa, .fa { font-family: 'fontawesome' !important; }

/* ---------- P0-10: body copy contrast ---------- */
/* Legacy theme uses #888 / #999 for body grey, ~3.5:1 on white = WCAG AA fail.
   #3f3f46 on #fff = 9.6:1, comfortably AAA for normal text. */
body,
p,
.wpb_text_column,
.wpb_text_column p,
.wpb_text_column li,
#hgr_sections p,
#hgr_sections li {
    color: #3f3f46;
}

/* ---------- P0-10: CTA hover/focus darkening ---------- */
/* Inline style="background-color:#1c46f2" on the buttons sets the resting
   color via specificity wins; use !important on :hover/:focus-visible to
   land a darker, AA-on-white shade (#0b2db8 = 7.4:1). */
a.vc_btn3-style-custom:hover,
a.vc_btn3-style-custom:focus,
a.vc_btn3-style-custom:focus-visible {
    background-color: #0b2db8 !important;
    color: #ffffff !important;
    text-decoration: none;
}

/* ---------- P2-1 (small bonus): visible focus ring everywhere ---------- */
*:focus-visible {
    outline: 2px solid #1c46f2;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- Technologies section refresh ---------- */
/* The legacy markup wraps the content in vc_col-sm-2 + vc_col-sm-8 +
   vc_col-sm-2, capping it at ~66% of the container. Clients uses a
   full-width .clients-inner capped at 1140px. Hide the spacer cols
   and stretch the centre column so Technologies matches the Clients
   width. */
#technology-5 { margin-top: 3.2em; }
#technology-5 .vc_col-sm-2 { display: none !important; }
#technology-5 .vc_col-sm-8 {
    width: 100% !important;
    float: none !important;
}

#technology-5 .tech-intro {
    text-align: center;
    color: #6b7280;
    font-size: 16px;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto 40px;
}

#technology-5 .tech-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 32px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: left;
    box-sizing: border-box;
}

#technology-5 .tech-group {
    min-width: 0;
}

#technology-5 .tech-cat {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #1c46f2;
    margin: 0 0 14px;
    text-align: left;
}

#technology-5 .tech-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#technology-5 .tech-chips li {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

#technology-5 .tech-chips li:hover {
    border-color: #1c46f2;
    color: #1c46f2;
    background: #f5f7ff;
}

@media (max-width: 900px) {
    #technology-5 .tech-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 24px;
    }
}

@media (max-width: 560px) {
    #technology-5 .tech-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    #technology-5 .tech-intro {
        font-size: 15px;
        margin-bottom: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #technology-5 .tech-chips li {
        transition: none;
    }
}

/* ---------- P2-10: hero secondary CTA ---------- */
/* Pair the primary CONTACT US with a ghost secondary "SEE CLIENTS"
   anchor. Inline style on the primary forces brand-blue solid; the
   secondary picks up its style purely from .idabyte-btn-secondary. */
.idabyte-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

a.idabyte-btn-secondary {
    background-color: transparent !important;
    color: #1c46f2 !important;
    border: 1.5px solid #1c46f2 !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

a.idabyte-btn-secondary:hover,
a.idabyte-btn-secondary:focus,
a.idabyte-btn-secondary:focus-visible {
    background-color: #1c46f2 !important;
    color: #ffffff !important;
    text-decoration: none;
}

@media (max-width: 480px) {
    .idabyte-cta-row { gap: 10px; }
    .idabyte-cta-row a { width: 100%; max-width: 280px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    a.idabyte-btn-secondary { transition: none; }
}

/* ---------- P2-7: skip link ---------- */
/* Visually hidden until keyboard focus, then floats top-left so the
   first Tab press jumps screen-reader and keyboard users past the
   nav into the main content. */
.skip-link {
    position: absolute;
    left: 12px;
    top: -100px;
    z-index: 10000;
    padding: 10px 16px;
    background: #1c46f2;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: top 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 12px;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* The <main> landmark wrapping #hgr_sections shouldn't show a focus
   ring when the skip link sends focus into it — use a soft outline
   only when keyboard-focused, matching the rest of the site. */
main#hgr_sections:focus { outline: none; }
main#hgr_sections:focus-visible { outline: 2px solid #1c46f2; outline-offset: -2px; }

/* ---------- Footer meta line (copyright + privacy) ---------- */
.footer-meta {
    text-align: center;
    margin: 22px 0 0;
    font-size: 13px;
    color: #6b7280;
}
.footer-meta a {
    color: #6b7280;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.15s ease;
}
.footer-meta a:hover,
.footer-meta a:focus,
.footer-meta a:focus-visible {
    color: #1c46f2;
}

/* ---------- Footer width parity with Clients ----------
   The legacy footer is wrapped in a Bootstrap .container that caps
   the whole footer well below the viewport edges. Make the footer
   full-bleed (matching how #clients spans the viewport) and cap the
   inner rows at the same 1140px / 24px padding the .clients-inner
   uses, so the four columns align with the Clients grid above. */
.container.hgr_megafooter {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#contact > .vc_row {
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
    text-align: center;
}

/* Center the text inside each footer column (Director / Address /
   E-mail / Phone) so the block reads as a centered group, matching
   the Clients section's centered headings above. */
#contact .wpb_column,
#contact .wpb_text_column,
#contact .wpb_wrapper,
#contact h5,
#contact address,
#contact strong {
    text-align: center;
}

/* ---------- Footer column widths ----------
   The legacy markup gives Director/Phone vc_col-sm-2 (16.7%) and
   Address/E-mail vc_col-sm-4 (33.3%). Force the four columns onto
   one flex row at equal 25% widths from the small breakpoint up;
   they continue to stack full-width on mobile via the original
   bootstrap fallback. */
@media (min-width: 768px) {
    #contact > .vc_row:first-of-type {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
    }
    #contact > .vc_row:first-of-type > .wpb_column {
        width: 25%;
        float: none;
    }
}

/* Browsers italicise <address> by default — keep it upright in the
   footer so it matches the Director / E-mail / Phone columns. */
#contact address {
    font-style: normal;
}

/* ---------- Footer director role descriptor ---------- */
.director-role {
    display: inline-block;
    margin: 4px 0 8px;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
    font-weight: 400;
}

/* ---------- P0-11: prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    /* Kill the Visual Composer fade-on-scroll animations */
    .wpb_animate_when_almost_visible,
    .wpb_animate_when_almost_visible.wpb_start_animation,
    .wpb_fadeIn,
    .wpb_fadeInUp,
    .fadeIn,
    .fadeInUp {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Disable the parallax cloud photo — render it as a static background */
    [data-vc-parallax] {
        background-attachment: scroll !important;
    }

    /* Stop the hover lift on client logos */
    #clients .clients-grid li:hover .clients-logo,
    #clients .clients-grid li:focus-within .clients-logo {
        transform: none !important;
    }
}

/* ---------- P1-4: dark mode (prefers-color-scheme) ----------
   No JS toggle — when the OS theme is dark, the @media block below
   activates. Light mode is the cascade default and isn't touched.
   Color tokens defined as custom properties so the few spots that
   already declare hex colors don't have to change in two places. */
@media (prefers-color-scheme: dark) {
    :root {
        --idb-bg-page: #0b1020;
        --idb-bg-section-alt: #131c34;
        --idb-text-primary: #f1f5f9;
        --idb-text-body: #cbd5e1;
        --idb-text-muted: #94a3b8;
        --idb-border: #334155;
        --idb-border-soft: #1e293b;
        --idb-brand: #7c95ff;
        --idb-brand-hover: #a3b3ff;
        --idb-chip-bg: #1e293b;
        --idb-chip-hover-bg: #1c2540;
    }

    /* Surfaces — body and the main wrapper. The legacy theme sets
       body { background: #FFFFFF } and #hgr_sections { background-color: #fff }
       inline; both are flipped here. .vc_section is left transparent so
       the page reads as one continuous dark surface (no banding). */
    html, body, #website_boxed, main#hgr_sections, #hgr_sections,
    .container, .container.hgr_megafooter {
        background-color: var(--idb-bg-page) !important;
        color: var(--idb-text-body) !important;
    }
    .vc_section, .vc_section-has-fill, .vc_row, .wpb_column,
    .wpb_text_column, .wpb_wrapper {
        background-color: transparent !important;
    }

    /* Headings + body text */
    h1, h2, h3, h4, h5, h6 {
        color: var(--idb-text-primary) !important;
    }
    p, li, address, strong, b, em {
        color: var(--idb-text-body) !important;
    }

    /* Muted helpers */
    .clients-subtitle, .tech-intro, .director-role,
    #clients .clients-subtitle, .footer-meta, .footer-meta a {
        color: var(--idb-text-muted) !important;
    }
    .footer-meta a:hover,
    .footer-meta a:focus,
    .footer-meta a:focus-visible {
        color: var(--idb-brand) !important;
    }

    /* Footer mailto: / tel: anchors — they sit inside <strong> tags and
       inherit the legacy link colour (dark blue), which barely shows on
       a dark surface. Match the surrounding body text (same shade as
       the director name and address) so they read as a coherent block;
       brand-blue only on hover/focus to signal clickability. */
    #contact a,
    #contact a:link,
    #contact a:visited {
        color: var(--idb-text-body) !important;
        text-decoration: none;
    }
    #contact a:hover,
    #contact a:focus,
    #contact a:focus-visible {
        color: var(--idb-brand) !important;
    }

    /* Brand-coloured eyebrows / category labels */
    .clients-eyebrow,
    #technology-5 .tech-cat {
        color: var(--idb-brand) !important;
    }

    /* Clients section — slightly lifted band */
    #clients {
        background-color: var(--idb-bg-section-alt) !important;
        border-top-color: var(--idb-border-soft) !important;
        border-bottom-color: var(--idb-border-soft) !important;
    }

    /* Tech chips */
    #technology-5 .tech-chips li {
        background: var(--idb-chip-bg) !important;
        color: var(--idb-text-body) !important;
        border-color: var(--idb-border) !important;
    }
    #technology-5 .tech-chips li:hover {
        background: var(--idb-chip-hover-bg) !important;
        color: var(--idb-brand) !important;
        border-color: var(--idb-brand) !important;
    }

    /* Navbar stays dark to match the body. The "logo@2x.png" file is
       actually a JPEG with a solid white background (no alpha channel),
       so a plain brightness/invert filter would render the whole
       rectangle white. Combining `filter: invert(1)` with
       `mix-blend-mode: difference` solves it: invert flips dark→light
       and white→black, then `difference` against the dark navbar makes
       matching-tone pixels read as transparent, leaving a clean white
       silhouette of the original logo. */
    #hgr_top_navbar_container {
        background-color: var(--idb-bg-page) !important;
        /* Inline CSS at index.html:2164 sets border-bottom: 1px solid
           #e9ecef on the navbar, which reads as a thin white line in
           dark mode. Drop it. */
        border-bottom-color: transparent !important;
    }
    #main_navbar a, .first_level_menu_link {
        color: var(--idb-text-body) !important;
    }
    #main_navbar a:hover, .first_level_menu_link:hover {
        color: var(--idb-brand) !important;
    }
    .logo {
        filter: invert(1);
        mix-blend-mode: difference;
    }

    /* Hero parallax: Visual Composer's JS paints clouds.jpg as a
       background-image on #hero-19 — it bleeds through dark-mode
       backgrounds because background-color doesn't override
       background-image. Strip the image entirely in dark mode. */
    #hero-19,
    [data-vc-parallax],
    .vc_parallax,
    .vc_parallax-inner,
    .vc_general.vc_parallax {
        background-image: none !important;
    }

    /* Service icons: dark line art on transparent — silhouette to white. */
    .vc_single_image-img {
        filter: brightness(0) invert(0.95);
    }

    /* Service-card hover (.column-hover:hover) is hardcoded to
       background-color:#fff !important in style7bcd.css line 4171.
       In dark mode that turns the card into a white block on hover.
       Lift to a slightly raised dark surface and keep the soft shadow. */
    .column-hover:hover {
        background-color: var(--idb-bg-section-alt) !important;
        border-color: var(--idb-border) !important;
        box-shadow: 0px 30px 80px 0 rgba(0, 0, 0, 0.55) !important;
    }

    /* Client logos: rather than per-logo filters that lose brand
       palette, give each cell a soft white card so the brand colours
       stay intact and contrast is guaranteed. Common SaaS pattern. */
    #clients .clients-grid li {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 10px;
    }
    /* Drop the earlier per-logo inversions — light card handles it. */
    #clients .clients-logo[src*="markerstudy"],
    #clients .clients-logo[src*="next"],
    #clients .clients-logo[src*="inawisdom"],
    #clients .clients-logo[src*="paypoint"],
    #clients .clients-logo[src*="bromcom"] {
        filter: none !important;
    }

    /* Secondary CTA — the ghost button needs the lighter brand swatch
       to keep AA contrast against the dark page. */
    a.idabyte-btn-secondary {
        color: var(--idb-brand) !important;
        border-color: var(--idb-brand) !important;
    }
    a.idabyte-btn-secondary:hover,
    a.idabyte-btn-secondary:focus,
    a.idabyte-btn-secondary:focus-visible {
        background-color: var(--idb-brand) !important;
        color: var(--idb-bg-page) !important;
    }

    /* Skip link still uses the resting brand blue (it's only visible
       on focus and high contrast against either theme is fine), but
       on dark it should match the lifted brand swatch for harmony. */
    .skip-link {
        background: var(--idb-brand);
    }
}