/* ==========================================================================
   DESIGN SYSTEM — color palette
   Source: reference rebuild at C:\Users\ram\Downloads\cts-site\wordpress-theme
   (Tailwind-based static export) — tokens below match its palette exactly so
   this theme's "new look" is consistent with that reference, not a fresh guess.

   Usage rule:
     - navy-900/950/800 -> header/nav, hero, dark emphasis/stats bands, footer
     - surface-soft / white -> standard body content sections (alternate)
     - brand-500/600   -> buttons, links, icons, small highlights, CTA gradient
                          (never a full neutral section bg)
   ========================================================================== */
:root {
    --cts-navy-950: #081121;
    --cts-navy-900: #0A1526;
    --cts-navy-800: #0F1E33;

    --cts-surface-soft: #F4F6F9;
    --cts-white: #FFFFFF;

    --cts-brand-500: #149FE6;
    --cts-brand-600: #0B84C4;
    --cts-brand-50: #EAF7FE;

    --cts-ink: #121A26;
    --cts-ink-muted: #5B6675;
}

/* ==========================================================================
   GLOBAL CHROME — shared across every page (nav, footer, buttons, banners)
   ========================================================================== */

/* Nav bar */
.header-color,
.top-header-color,
.sticky-top.scrolled {
    background-color: var(--cts-navy-900);
}

/* The scrolled header now stays the same navy as the resting header (instead
   of the old near-white scrolled background), so the logo swap the theme did
   on scroll — from the white logo to a second variant meant for a light bg —
   needs to stop too, or the wrong-colored logo would show on a dark header. */
.sticky-top.home-header.scrolled .navbar-brand-a {
    display: block;
}

.sticky-top.home-header.scrolled .navbar-brand-b {
    display: none;
}

/* Hero banner on the homepage: flat navy, same solid color as the header —
   no gradient/glow/grid texture "box" effect, so it reads as one seamless
   dark surface continuing straight down from the nav bar. */
.banner-section {
    background-image: none;
    background-color: var(--cts-navy-900);
    /* Was 0 (only a commented-out, unused padding-top existed), so hero
       copy sat flush against the header with no breathing room — unlike
       every subpage banner, which clears the header by 90px. Matched here
       for a consistent header-to-content gap across the whole site. */
    padding-top: 90px;
}

/* The "+"/"M+" suffix on each hero stat had no color rule at all, so it was
   plain white — identical to the number, with no accent. Colored brand-500 —
   the same single blue used everywhere else (buttons, links, section
   accents) — instead of a second near-blue shade. */
.stat-num .accent {
    color: var(--cts-brand-500);
}

/* "$2.5 Billion+" highlighted in the hero headline, same brand-500 blue. */
.banner-text h1 .text-highlight {
    color: var(--cts-brand-500);
}

/* Hero stats row: matches the reference's plain treatment (a hairline divider
   above three stat columns, no boxed/glass card) instead of the earlier glass
   panel — plus more breathing room above the divider and between columns. */
.hero-status-section {
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    margin-top: 3.5rem;
    padding: 2.25rem 0 0;
}

.hero-status-section .hero-stats {
    gap: 3rem;
}

/* Generic subpage banner (Services / Careers / Life at CTS / Leadership / etc.) + legacy per-page banner variants */
.subpage-banner,
.what-we-do-banner,
.solutions-banner,
.portfolio-banner,
.blog-banner,
.life-at-cts-banner,
.cts-careers-banner {
    background-color: var(--cts-navy-900) !important;
}

/* Primary accent buttons + interactive accents -> brand blue, pill-shaped with a soft glow */
.y-primary,
.b-primary,
.b-secondary,
.b-white {
    border-radius: 9999px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.y-primary,
.b-primary:hover,
.b-secondary:hover,
.sticky-top.scrolled .y-primary {
    background-color: var(--cts-brand-500);
}

.y-primary {
    box-shadow: 0 8px 24px -8px rgba(20, 159, 230, 0.5);
    /* !important: at least one page (tpl-leave-request.php) puts a stray
       inline style="background:#1e88c2" directly on a .y-primary button,
       which would otherwise beat this rule and drift from the single brand
       blue used everywhere else. */
    background-color: var(--cts-brand-500) !important;
    color: var(--cts-white) !important;
}

.y-primary:hover {
    background-color: var(--cts-brand-600) !important;
    box-shadow: 0 10px 28px -8px rgba(20, 159, 230, 0.6);
    color: var(--cts-white) !important;
}

/* Newsletter band + footer + "Let's Talk..." CTA band: same flat navy as the
   header/hero, one consistent dark surface across the whole bottom of the
   page. The CTA's button is the standard brand-500 pill — no special-casing
   needed now that it isn't sitting on a blue-family gradient. */
.subscribe-home,
.footer-main,
.get-started-home {
    background-color: var(--cts-navy-900);
    background-image: none;
}

/* ==========================================================================
   TASK 1 — Homepage background consistency (tpl-home.php)
   ========================================================================== */

/* "Trusted by clients..." solutions carousel section */
.solutions-brief {
    background-color: var(--cts-surface-soft);
}

/* Active industry tab: was brand blue (and, before that fix, two mismatched
   blues). Switched to charcoal/navy so the active state reads as a deliberate
   dark selection rather than another blue accent competing with real CTAs. */
.solutions-brief .solutions-brief-list .carousel-indicators .col-md-2.active .solution-icon {
    background-color: var(--cts-navy-900);
}

.solutions-brief .solutions-brief-list .carousel-indicators .col-md-2.active span {
    color: var(--cts-navy-900);
}

/* "What We Do" service cards: was a different hardcoded/ACF hex per card.
   Section becomes off-white, each card becomes white so cards read consistently
   regardless of the per-post background_color value stored in wp-admin. */
.services-brief {
    background-color: var(--cts-surface-soft);
}

.services-brief .card-body .card-list .card-inner {
    background-color: var(--cts-white) !important;
}

/* "Why CloudTech Services": recolored + restyled to match the reference
   project's own "Why CloudTech" section (C:\Users\ram\Downloads\cts-site\
   wordpress-theme\index.html) — a plain white section (not a dark or tinted
   band), a bare uppercase eyebrow label (no pill), and each reason rendered
   as its own bordered white card with a gradient icon badge, rather than a
   flat divided list. The reference's version is an interactive accordion;
   this keeps the existing always-expanded markup/behavior and only borrows
   its color and card treatment. */
#why-cts {
    background-color: var(--cts-white);
    color: var(--cts-ink);
}

#why-cts h2 {
    color: var(--cts-ink);
}

/* The "Technology Partner?" phrase is wrapped in <em> in the markup — reused
   here as the reference's colored-highlight span, dropping the italic. */
#why-cts h2 em {
    color: var(--cts-brand-500);
    font-style: normal;
}

/* Left intro column stays pinned while the reasons scroll past, matching the
   reference's lg:sticky behavior — CSS-only, no JS. */
@media (min-width: 992px) {
    .why-left {
        position: sticky;
        top: 120px;
    }
}

/* Bare uppercase eyebrow, matching the reference's .eyebrow (colored text,
   no pill/background). */
.section-tag {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cts-brand-500);
    margin-bottom: 12px;
}

.why-left p {
    color: var(--cts-ink-muted);
}

/* Each reason becomes its own bordered, shadowed white card instead of a row
   in a flat divided list — matching the reference's per-item accordion card. */
.why-cts-inner .reason-item {
    border: 1px solid rgba(10, 21, 38, 0.08);
    border-radius: 20px;
    background-color: var(--cts-white);
    box-shadow: 0 1px 3px rgba(16, 30, 51, 0.05), 0 8px 20px -14px rgba(16, 30, 51, 0.12);
    padding: 1.5rem;
    margin-bottom: 16px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.why-cts-inner .reason-item:last-child {
    margin-bottom: 0;
}

.why-cts-inner .reason-item:hover {
    border-color: rgba(20, 159, 230, 0.3);
    box-shadow: 0 1px 3px rgba(16, 30, 51, 0.06), 0 14px 30px -14px rgba(20, 159, 230, 0.25);
}

/* Reason number becomes a solid brand-500 icon-style badge instead of plain
   text, taking the reference's badge shape (rounded square, not a circle) —
   solid rather than a gradient, so it's the same single blue as everywhere
   else on the page (buttons, hero accents, the eyebrow label). */
.reason-num {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background-color: var(--cts-brand-500);
    color: var(--cts-white);
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reason-content h4 {
    color: var(--cts-ink);
}

.reason-content p {
    color: var(--cts-ink-muted);
}

/* "Real Numbers. Real System." process/stats band: flat navy-900, matching
   the hero exactly instead of its own gradient or the old background photo
   (which was set via an inline style on the section and always beat any
   stylesheet rule here — that inline style has been removed from the markup). */
.development-process {
    background-image: none;
    background-color: var(--cts-navy-900);
}

/* Leftover decorative "plant" image (a content:url() on this pseudo-element)
   from the old design — removed so nothing but the flat navy band remains. */
.development-process .process-header::after {
    content: none;
}

/* "+" suffix on the stat figures, same treatment/color as the hero's. */
.development-process .process-body h4 .accent {
    color: var(--cts-brand-500);
}

/* Testimonials carousel section: white card with a border + soft shadow,
   matching the reference's testimonial panel (a white card distinguished by
   shadow/border alone, not by a contrasting section background). */
.testimonials-home .testimonials-inner {
    background-color: var(--cts-white);
    border: 1px solid rgba(10, 21, 38, 0.07);
    border-radius: 24px;
    box-shadow: 0 1px 3px rgba(16, 30, 51, 0.06), 0 8px 24px -12px rgba(16, 30, 51, 0.12);
}

/* Name in navy-900 (the same header color), role muted. */
.testimonials-home .testimonials-inner .inner-content .user-details .name p {
    color: var(--cts-navy-900);
}

.testimonials-home .testimonials-inner .inner-content .user-details .name span {
    color: var(--cts-ink-muted);
}

/* Layout: avatar + name/role were aligned with inline-block + a stray unused
   "top" offset; switched to flex with a real gap, and the avatar gets a
   brand-tinted ring instead of sitting bare against the card. */
.testimonials-home .testimonials-inner .inner-content .user-details {
    display: flex;
    align-items: center;
    gap: 18px;
}

.testimonials-home .testimonials-inner .inner-content .user-details .image {
    margin-right: 0;
    border: 3px solid var(--cts-brand-50);
}

/* Prev/next arrows get a visible resting state (bordered white circle)
   instead of being invisible until hovered; active/hover state is navy-900
   (header color), not the brand blue used for buttons elsewhere. */
.testimonials-home .testimonials-inner .inner-content .t-button {
    background-color: var(--cts-white);
    border: 1px solid rgba(10, 21, 38, 0.1);
}

.testimonials-home .testimonials-inner .inner-content .t-button:hover {
    background-color: var(--cts-navy-900);
}

.testimonials-home .testimonials-inner .inner-content .t-button svg {
    fill: var(--cts-ink-muted);
}

.testimonials-home .testimonials-inner .inner-content .t-button:hover svg {
    fill: var(--cts-white);
}

/* Vertical rhythm: every homepage section had its own one-off top/bottom
   padding (90/60, 120/70+a 48px margin utility, 40/50, 90/20, plus the hero's
   bottom forced to 0 by a Bootstrap pb-0 utility and the stats/testimonials
   sections carrying separate mt-5/margin-bottom utilities on top of their own
   padding). Standardized to a single 90px top/bottom on every section, and
   the old Bootstrap spacing utilities (which use !important) are neutralized
   here with !important so padding is the only thing controlling the gap. */
.solutions-brief {
    padding-top: 90px;
    padding-bottom: 90px;
}

.why-cts-inner {
    padding: 90px 0;
}

.development-process {
    padding-top: 90px;
    padding-bottom: 90px;
    margin-bottom: 0 !important;
}

.testimonials-home {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 90px;
    padding-bottom: 90px;
}

.get-started-home {
    padding-top: 90px;
    padding-bottom: 90px;
}

.subscribe-home {
    padding-top: 90px;
    padding-bottom: 90px;
}

/* ==========================================================================
   TASK 2 — Services + Solutions page background consistency
   (tpl-services.php, tpl-solutions.php — both share the .sidebyside-list
   pattern; tpl-solutions.php additionally still carries its own inline
   style="background-color: <?php echo $background_color ?? '#00b5a3'; ?>"
   on every row, same anti-pattern as the one already fixed here — !important
   on every rule in this block, not just the image panel, so it wins
   regardless)
   ========================================================================== */

.sidebyside-list {
    background-color: var(--cts-surface-soft) !important;
}

/* Each service/solution row's image panel: was a per-post ACF hex (rainbow of
   colors). Forced to a consistent white panel regardless of the stored value.
   tpl-services.php uses .section-list-img; tpl-solutions.php uses
   .solutions-list-img for the same column. */
.sidebyside-list .section-list-img,
.sidebyside-list .solutions-list-img {
    background-color: var(--cts-white) !important;
}

.sidebyside-list .section-list-text {
    background-color: var(--cts-white) !important;
}

/* ==========================================================================
   TASK 6 — Careers page background consistency (tpl-careers.php)
   ========================================================================== */

.cts-careers {
    background-color: var(--cts-surface-soft);
}

.office-details {
    background-color: var(--cts-surface-soft);
}

.office-details .office-inner {
    background-color: var(--cts-white);
}

/* ==========================================================================
   TASK 5 — Leadership page (tpl-leadership.php)
   ========================================================================== */

.leadership-profiles {
    background-color: var(--cts-white);
    padding-top: 90px;
    padding-bottom: 30px;
}

.leadership-intro h2 {
    margin-bottom: 15px;
}

.leadership-intro p {
    color: var(--cts-ink-muted);
}

.leadership-founder-row,
.leadership-managers-row,
.leadership-hr-row {
    margin-top: 40px;
}

.leadership-card {
    background-color: var(--cts-surface-soft);
    border-radius: 16px;
    padding: 35px;
    height: 100%;
    margin-bottom: 30px;
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

.leadership-card-founder {
    background-color: var(--cts-surface-soft);
    border: 1px solid var(--cts-brand-50);
}

.leadership-avatar {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--cts-brand-500), var(--cts-brand-600));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cts-white);
    font-size: 32px;
}

.leadership-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.leadership-badge {
    display: inline-block;
    background-color: var(--cts-brand-50);
    color: var(--cts-brand-600);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.leadership-info h3 {
    margin: 0 0 4px;
    font-size: 22px;
}

.leadership-title {
    color: var(--cts-brand-600);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 12px;
}

.leadership-info p {
    color: var(--cts-ink-muted);
    margin: 0;
    line-height: 1.7;
}

.leadership-values {
    background-color: var(--cts-surface-soft);
    padding-top: 70px;
    padding-bottom: 90px;
}

.leadership-values-header h2 {
    margin-bottom: 50px;
}

.value-card {
    background-color: var(--cts-white);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 25px;
    text-align: left;
}

.value-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background-color: var(--cts-brand-50);
    color: var(--cts-brand-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 18px;
}

.value-card h4 {
    margin-bottom: 8px;
}

.value-card p {
    color: var(--cts-ink-muted);
    margin: 0;
    line-height: 1.6;
}

/* ==========================================================================
   TASK 7 — Remaining pages: route the last one-off hardcoded backgrounds
   onto the shared tokens (404, Contact, Pricing, Life at CTS, Blog,
   Career/Internship detail pages).
   ========================================================================== */

/* 404 page */
.fourzerofour-wrapper {
    background-color: var(--cts-surface-soft);
}

/* Contact page */
.contact-us-body {
    background-color: var(--cts-white);
}

/* Contact page's info panel + form panel were both the same one-off grey-blue
   (#909fbe, otherwise only used as a solution-category tag color elsewhere) —
   not a rotating multi-color system here, just a stray hex. Routed onto the
   real dark token so it matches the header/hero/footer instead of standing
   alone. */
.contact-info-div,
.contact-form {
    background-color: var(--cts-navy-800);
}

/* Pricing page comparison table header */
.p-table-header .pth-div.space {
    background-color: var(--cts-surface-soft);
}

/* Life at CTS page */
.our-core-values,
.cv-card .icon {
    background-color: var(--cts-surface-soft);
}

.cv-card:hover .icon {
    background-color: var(--cts-brand-500);
}

.our-vision-wrap .our-vision {
    background-color: var(--cts-navy-800);
}

.our-vision-wrap .our-vision-image {
    background-color: var(--cts-brand-500);
}

.vision-gallery .gallery-img img {
    background-color: var(--cts-brand-50);
}

/* Blog listing tag chip */
.our-blog-page .blog-list .blog-tag {
    background-color: var(--cts-brand-500);
}

/* Career/Internship single detail page */
.careers-details-inner {
    background-color: var(--cts-white);
}