/* ============================================================
   TT DISPLAY MODE
   1. .tt-mode switcher (light / dark / system) in the header,
      the mobile tools row and the drawer footer.
   2. html.dark palette: token overrides + the hard-coded light
      surfaces from the other stylesheets. Sections that are
      already navy/blue (heroes, CTAs, footer) are left as they are.
   Loaded after tt-header / tt-mega-menu / tt-mobile-nav.
   ============================================================ */

/* ---------- 1. switcher ---------- */
.tt-mode {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    box-sizing: border-box;
    height: 36px;
    padding: 3px;
    border: 1px solid var(--tt-border-light, #E8EDF5);
    border-radius: 8px;
    background-color: #fff;
    transition: gap 400ms ease-out;
}
.tt-mode__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--tt-text-muted, #8892A4);
    cursor: pointer;
    transition: width 400ms ease-out, padding 400ms ease-out, opacity 400ms ease-out,
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tt-mode__btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.tt-mode__btn:hover { color: var(--tt-navy, #0A1628); background-color: var(--tt-surface-light, #F8F9FC); }
.tt-mode__btn.is-active { background-color: var(--tt-blue, #1E5DAB); color: #fff; }

/* Desktop variant collapses to the active icon and fans out on hover. */
@media (hover: hover) {
    .tt-mode:not(.tt-mode--mobile) { gap: 0; }
    .tt-mode:not(.tt-mode--mobile):hover,
    .tt-mode:not(.tt-mode--mobile):focus-within { gap: 2px; }
    .tt-mode:not(.tt-mode--mobile) .tt-mode__btn:not(.is-active) { width: 0; min-width: 0; opacity: 0; pointer-events: none; }
    .tt-mode:not(.tt-mode--mobile):hover .tt-mode__btn:not(.is-active),
    .tt-mode:not(.tt-mode--mobile):focus-within .tt-mode__btn:not(.is-active) { width: 28px; opacity: 1; pointer-events: auto; }
    .tt-mode:not(.tt-mode--mobile) .tt-mode__btn.is-active { background-color: transparent; color: var(--tt-text-secondary, #5A6478); }
    .tt-mode:not(.tt-mode--mobile):hover .tt-mode__btn.is-active,
    .tt-mode:not(.tt-mode--mobile):focus-within .tt-mode__btn.is-active { background-color: var(--tt-blue, #1E5DAB); color: #fff; }
}

/* Very narrow phones: keep the header row tidy, the drawer still has it. */
@media (max-width: 430px) {
    .tt-header-tools > .tt-mode { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tt-mode, .tt-mode__btn { transition: none; }
}

/* ---------- 2. dark palette ---------- */
html.dark { color-scheme: dark; }

html.dark {
    --tt-blue: #3F86DE;
    --tt-blue-hover: #5B9BEA;
    --tt-blue-light: rgba(63, 134, 222, 0.16);
    --tt-surface-light: #0E1C31;
    --tt-surface-medium: #16273F;
    --tt-border: #2A3D5C;
    --tt-border-light: #1E2F4A;
    --tt-text-primary: #E9EEF7;
    --tt-text-secondary: #B8C4D4;
    --tt-text-muted: #8FA0B8;
    --tt-text-link: #7FB3F0;
    --tt-text-dark: #E9EEF7;
    --tt-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --tt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --tt-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --tt-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.55);
    --tt-shadow-glow: 0 0 30px rgba(63, 134, 222, 0.2);

    /* blog (linkmasr-style) slate scale, inverted */
    --lm-s50: #0E1C31;
    --lm-s100: #13233C;
    --lm-s200: #1E2F4A;
    --lm-s300: #2A3D5C;
    --lm-s400: #6B7F9C;
    --lm-s500: #8FA0B8;
    --lm-s600: #B8C4D4;
    --lm-s700: #CFD8E6;
    --lm-s800: #E2E8F0;
    --lm-s900: #EEF2F8;
    --lm-s950: #FFFFFF;
    --lm-shadow-xl: 0 20px 25px -5px rgba(0,0,0,.45), 0 8px 10px -6px rgba(0,0,0,.4);
    --lm-shadow-premium: 0 25px 50px -12px rgba(0,0,0,.5);
}

/* page canvas */
html.dark body,
html.dark .tt-page-wrapper,
html.dark .tt-page-content,
html.dark .tt-home,
html.dark .tt-inner-page-wrapper,
html.dark .tt-page,
html.dark .tt-about-intro,
html.dark .lm-section-white,
html.dark .tt-clients-swiper { background: #0A1728; }
html.dark .lm-mesh {
    background:
        radial-gradient(at 0% 0%, rgba(26,111,245,.22) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(139,92,246,.18) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(236,72,153,.10) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(34,211,238,.10) 0px, transparent 50%), #0A1728;
}
html.dark ::selection { background: #3F86DE; color: #fff; }

/* header + desktop menus */
html.dark .tt-header { background: #0A1728; border-bottom-color: #1E2F4A; }
html.dark .tt-header-nav { border-top-color: #1E2F4A; }
html.dark .tt-tagline,
html.dark .tt-hours,
html.dark .tt-search input[type="search"],
html.dark .tt-nav-item > a,
html.dark .tt-mega-links > li > a,
html.dark .tt-sub-menu > li > a { color: #E9EEF7; }
html.dark .tt-nav-item > a:hover,
html.dark .tt-nav-item > a:focus-visible,
html.dark .tt-nav-item.is-current > a,
html.dark .tt-mega-links > li > a:hover,
html.dark .tt-mega-links > li > a:focus-visible,
html.dark .tt-sub-menu > li > a:hover { color: #7FB3F0; }
html.dark .tt-contact-sep { background: #2A3D5C; }
html.dark .tt-mega,
html.dark .tt-sub-menu { background: #0E1C31; border-color: #1E2F4A; box-shadow: 0 18px 50px -14px rgba(0,0,0,.7); }
html.dark .tt-mega-title { border-bottom-color: #1E2F4A; }
html.dark .tt-search input[type="search"] { background: #16273F; }
html.dark .tt-menu-toggle__line { background-color: #E9EEF7; }
html.dark .tt-header-search,
html.dark .tt-header-lang { color: #B8C4D4; border-color: #1E2F4A; }
html.dark .tt-header-search:hover,
html.dark .tt-header-lang:hover { color: #fff; border-color: #3F86DE; }
html.dark .tt-mode { background-color: #0E1C31; border-color: #1E2F4A; }
html.dark .tt-mode__btn:hover { color: #fff; background-color: #16273F; }

/* mobile drawer + search overlay */
html.dark .tt-mnav { background-color: #0A1728; color: #E9EEF7; }
html.dark .tt-mnav__foot { background-color: #0E1C31; }
html.dark .tt-mnav__close { background: #13233C; border-color: #1B2B43; color: #E9EEF7; }
html.dark .tt-mnav__close:hover,
html.dark .tt-mnav__close:focus-visible { background: #3F86DE; border-color: #3F86DE; color: #fff; }
html.dark .tt-mnav__icon { background-color: rgba(255, 255, 255, 0.06); }
html.dark .tt-mnav__expander:hover,
html.dark .tt-mnav__expander:focus-visible { background-color: #13233C; }
html.dark .tt-mnav__link { color: #E9EEF7; }
html.dark .tt-mnav__link--sub { color: #B8C4D4; }
html.dark .tt-mnav__link:hover,
html.dark .tt-mnav__link:focus-visible,
html.dark .tt-mnav__link--active,
html.dark .tt-mnav__link--sub.tt-mnav__link--active { color: #7FB3F0; }
html.dark .tt-search-overlay__panel { background: #0E1C31; }
html.dark .tt-search-overlay__input { color: #E9EEF7; }
html.dark .tt-search-overlay__close:hover { color: #fff; background: #16273F; }

/* headings and navy-as-text */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark .tt-count-up,
html.dark .tt-service-img-body h3,
html.dark .tt-process-step h3,
html.dark .tt-blog-title,
html.dark .tt-industry-card h3,
html.dark .tt-languages-header-text h2,
html.dark .tt-lang-category-title,
html.dark .tt-lang-card-name,
html.dark .tt-why-card h4,
html.dark .tt-testimonial-name,
html.dark .tt-cert-card h4,
html.dark .tt-faq-trigger,
html.dark .tt-prose,
html.dark .tt-prose > p:first-child,
html.dark .tt-prose h2,
html.dark .tt-prose h4,
html.dark .tt-prose strong,
html.dark .tt-prose th,
html.dark .tt-side-nav a,
html.dark .tt-child-title,
html.dark .tt-child-heading,
html.dark .tt-eyebrow-dark,
html.dark .tt-about-intro-text .entry-content a,
html.dark .tt-profile-item h3,
html.dark .tt-field label,
html.dark .tt-contact-info h2,
html.dark .tt-info-item h3,
html.dark .tt-post-card-title a,
html.dark .tt-pagination .page-numbers,
html.dark .tt-to-top,
html.dark .tt-testimonial-who a,
html.dark .tt-inner-card .entry-content { color: #E9EEF7; }
html.dark .tt-prose blockquote { color: #D9CFA8; }
html.dark .tt-child-text,
html.dark .tt-about-intro-text .entry-content,
html.dark .tt-contact-form-card .entry-content,
html.dark .tt-form-page-card .entry-content,
html.dark .tt-info-item p,
html.dark .tt-post-card-excerpt,
html.dark .tt-404-card p,
html.dark .tt-testimonial-text,
html.dark .lm-article-content p,
html.dark .lm-article-content li { color: #C5CFDE; }
html.dark .tt-side-title,
html.dark .tt-post-card-date { color: #8FA0B8; }
html.dark .tt-post-card-title a:hover,
html.dark .tt-side-nav a:hover { color: #7FB3F0; }

/* cards and panels that were white */
html.dark .tt-card,
html.dark .tt-card-flat,
html.dark .tt-stat-card,
html.dark .tt-service-img-card,
html.dark .tt-process-step,
html.dark .tt-blog-card,
html.dark .tt-industry-card,
html.dark .tt-lang-card,
html.dark .tt-why-card,
html.dark .tt-testimonial-card,
html.dark .tt-cert-card,
html.dark .tt-faq-item,
html.dark .tt-side-card,
html.dark .tt-child-card,
html.dark .tt-contact-info,
html.dark .tt-post-card,
html.dark .tt-testimonial,
html.dark .tt-pagination .page-numbers,
html.dark .tt-to-top,
html.dark .tt-clients-prev,
html.dark .tt-clients-next,
html.dark .lm-card,
html.dark .lm-related-card,
html.dark .lm-article-body,
html.dark .lm-search-box { background: #0E1C31; border-color: #1E2F4A; }
html.dark .tt-lang-card-primary { background: linear-gradient(145deg, #13233C 0%, #1A2740 100%) !important; }
html.dark .tt-lang-category { border-bottom-color: #1E2F4A; }
html.dark .tt-process-icon { border-color: #0E1C31; }
html.dark .lm-pill { background: rgba(14, 28, 49, 0.85); border-color: #1E2F4A; }
html.dark .lm-tag { background: #16273F; }
html.dark .lm-side-heading { color: #8FA0B8; }
html.dark .tt-pagination .page-numbers.current,
html.dark .tt-pagination .page-numbers:hover,
html.dark .tt-to-top:hover { background: #3F86DE; color: #fff; }
html.dark .tt-service-img-card:hover,
html.dark .tt-process-step:hover,
html.dark .tt-industry-card:hover,
html.dark .tt-why-card:hover,
html.dark .tt-faq-item:hover,
html.dark .tt-faq-open { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45) !important; }
html.dark .tt-prose tr:nth-child(even) td { background: #13233C; }
html.dark .tt-prose th { background: rgba(63, 134, 222, 0.16); }
html.dark .tt-prose th, html.dark .tt-prose td { border-color: #1E2F4A; }
html.dark .tt-prose hr { border-top-color: #1E2F4A; }
html.dark .tt-profile-item + .tt-profile-item { border-color: rgba(255, 255, 255, 0.08); }
html.dark .tt-post-card-placeholder { background: linear-gradient(135deg, #16273F, #1E2F4A); }
html.dark .tt-side-nav a.is-current { background: #3F86DE; color: #fff; }

/* forms */
html.dark .tt-field input,
html.dark .tt-field select,
html.dark .tt-field textarea { background: #13233C; border-color: #2A3D5C; color: #E9EEF7; }
html.dark .tt-field input::placeholder,
html.dark .tt-field textarea::placeholder { color: #6B7F9C; }
html.dark .tt-field input:focus,
html.dark .tt-field select:focus,
html.dark .tt-field textarea:focus { border-color: #3F86DE; }

/* light-blue chips and soft buttons */
html.dark .tt-iso-chip,
html.dark .tt-article-tags a,
html.dark .tt-info-icon,
html.dark .tt-child-media,
html.dark .tt-post-card-media,
html.dark .tt-gallery-item { background: rgba(63, 134, 222, 0.16); }
html.dark .tt-action-soft:hover,
html.dark .tt-sub-menu > li > a:hover { background: rgba(63, 134, 222, 0.16); }
html.dark .tt-action-white { background: #0E1C31; color: #7FB3F0; }
html.dark .tt-action-white:hover { background: #16273F; }
html.dark .tt-testimonial-quote { color: rgba(63, 134, 222, 0.35); }
html.dark .tt-testimonial-who,
html.dark .tt-post-nav { border-top-color: #1E2F4A; }

/* images keep their own colours but are toned down slightly */
html.dark .tt-clients-swiper img { filter: brightness(0.92); }

/* inline-styled blocks in page-modern-home.php / tt-profile band */
html.dark .tt-about-section { background: #0A1728 !important; }
html.dark .tt-about-experience,
html.dark .tt-why-card { background: #0E1C31 !important; border-color: #1E2F4A !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important; }
html.dark .tt-profile { background: #0E1C31; }

/* inline "color: var(--tt-navy)" on home-page headings/list items (page-modern-home.php) */
html.dark [style*="color: var(--tt-navy)"],
html.dark [style*="color:var(--tt-navy)"] { color: #E9EEF7 !important; }
html.dark .tt-about-content h2,
html.dark .tt-about-list li,
html.dark .tt-about-experience span,
html.dark .tt-why-content h2,
html.dark .tt-why-card h4 { color: #E9EEF7 !important; }

/* blog: keep the navy hero / CTA panels dark with their light text
   (the inverted --lm-s* scale would otherwise flip them) */
html.dark .lm-article-hero { background: #0F172A; }
html.dark .lm-cta-lead,
html.dark .lm-article-lead { color: #CBD5E1; }
html.dark .lm-article-meta,
html.dark .lm-author-role { color: #94A3B8; }
html.dark .lm-article-title,
html.dark .lm-author-name,
html.dark .lm-cta-title { color: #fff; }

/* blog copy that is black in light mode */
html.dark .lm-hero-lead,
html.dark .lm-card-excerpt,
html.dark .lm-toc-link { color: #C5CFDE; }
html.dark .lm-toc-link:hover,
html.dark .lm-toc-link.is-active { color: #7FB3F0; }