/*
Theme Name: IT Company Pro — Manage Systems Dark
Theme URI: https://www.managesystems.net/
Template: it-company-pro
Author: Manage Systems
Description: True dark child theme with crimson accent, Space Grotesk + Inter typography. Preserves original imagery.
Version: 1.1.0
Text Domain: it-company-pro-child
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --ms-bg:        #0a0a0a;
  --ms-bg-2:      #111111;
  --ms-surface:   #161616;
  --ms-surface-2: #1f1f1f;
  --ms-border:    #262626;
  --ms-border-2:  #143049;
  --ms-text:      #f5f5f5;
  --ms-text-dim:  #b8b8b8;
  --ms-text-mute: #6f6f6f;
  --ms-red:       #3ba9e0;
  --ms-red-soft:  #74c4ec;
  --ms-red-deep:  #1f6f9f;
  --ms-red-glow:  rgba(59,169,224,0.38);
}

/* ============ BASE ============ */
html, body { background: var(--ms-bg) !important; }

body,
body p, body li, body span, body label, body td, body th,
body input, body select, body textarea, body button,
.entry-content, .site-content, #content, #primary, #main,
.page-content, .post-content {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  color: var(--ms-text-dim) !important;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .widget-title,
.about-us-head h2, .what-do-we-do-head h2,
#what-do-we-do .services-contents h6,
#about-us .about-process-content h6,
.main_title h1, .main_title h2 {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
  color: var(--ms-text) !important;
  letter-spacing: -0.015em;
}
h1, h2 { font-weight: 700 !important; }
h3, h4, h5, h6 { font-weight: 600 !important; }

a { color: var(--ms-red-soft) !important; transition: color .2s ease; }
a:hover, a:focus { color: var(--ms-red) !important; }

p, li, dd, dt, blockquote { color: var(--ms-text-dim) !important; }
hr { border-color: var(--ms-border) !important; }

/* ============ TOP BAR ============ */
#site-topbar, .home #site-topbar, #topbar {
  background: #000 !important;
  border-top: none !important;
  color: var(--ms-text-dim) !important;
}
#site-topbar .top-title,
#site-topbar .top-phone, #site-topbar .top-email,
#site-topbar .top-phone small, #site-topbar .top-email small,
.home #site-topbar .top-phone small, .home #site-topbar .top-email small {
  color: var(--ms-text-dim) !important;
}
#site-topbar .top-phone i, #site-topbar .top-email i,
.home #site-topbar .top-phone i, .home #site-topbar .top-email i,
#site-topbar .socialbox i, .home #site-topbar .socialbox i {
  color: var(--ms-red) !important;
}
#site-topbar .socialbox i:hover, .home #site-topbar .socialbox i:hover {
  color: var(--ms-red-soft) !important;
}

/* ============ HEADER / NAV ============ */
.site-header, .home .site-header, .blog .site-header,
#header, .menubar, .menubar.scrolled {
  background: #0a0a0a !important;
  color: var(--ms-text) !important;
  position: relative !important;
  width: 100%;
  padding-top: 0 !important;
  box-shadow: 0 1px 0 var(--ms-border);
  z-index: 9000 !important;
  pointer-events: auto !important;
}
.home .site-header {
  position: absolute !important;
  background: linear-gradient(180deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0) 100%) !important;
  box-shadow: none;
}
#header { padding-top: 12px !important; padding-bottom: 12px !important; }

/* Sticky-on-scroll header: theme JS toggles .sticky/.stickynavbar on #header */
#header.sticky, #header.stickynavbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: rgba(10,10,10,0.96) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px -8px rgba(0,0,0,0.7);
  pointer-events: auto !important;
}

/* Guarantee menu links are clickable above any sibling content */
.main-navigation, .main-navigation ul, .main-navigation li, .main-navigation a,
#site-navigation, .menu, .menu li, .menu a {
  pointer-events: auto !important;
  position: relative;
}
.menu > ul > li { z-index: 2; }

/* Section title strip must never overlap the header */
.main_title, .container.main_title { position: relative; z-index: 1; }

/* Logo: wrap in a small white pill so the existing white-bg art looks intentional */
#header .logo > div,
.site-header .custom-logo-link {
  display: inline-block;
  background: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.6), 0 0 0 1px var(--ms-border);
}
#header .logo img, .custom-logo, .site-header .custom-logo {
  background: transparent !important;
  max-height: 64px !important;
  width: auto !important;
  display: block;
}

/* Nav */
#site-navigation a, .main-navigation a, .menubar a, .menu > ul > li > a {
  color: var(--ms-text) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}
.main-navigation li:hover > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a {
  color: var(--ms-red) !important;
}
.main-navigation ul ul,
.menubar.scrolled .main-navigation ul ul li {
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
}

/* Header search */
#header .header-search { background: transparent !important; }
#header .header-search input {
  background: var(--ms-surface) !important;
  color: var(--ms-text) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 8px !important;
}
#header .header-search input::placeholder { color: var(--ms-text-mute) !important; }
#header .header-search button, #header .hvr-icon-grow, #header .search-submit {
  background: transparent !important;
  color: var(--ms-red) !important;
  border: none !important;
}

/* ============ SECTIONS ============ */
#about-us, #what-do-we-do, #first-service, #testimonials,
#projects, #team, #blog, #contact-us, #counter-section,
.site-content, #content, #primary,
.entry-content, .page-content, section, .section {
  background: var(--ms-bg) !important;
}

/* About text colors */
#about-us .about-us-head h2,
#about-us .about-process-content h6 { color: var(--ms-text) !important; }
#about-us .about-process-content p { color: var(--ms-text-dim) !important; }
#about-us .about-process-content a { color: var(--ms-red-soft) !important; }

/* About image — keep photo intact, frame it */
#about-us .about-us-image img,
.about-us-image img {
  border-radius: 14px;
  box-shadow: 0 20px 60px -28px rgba(0,0,0,0.85), 0 0 0 1px var(--ms-border);
}

/* ============ SERVICES CARDS ============ */
#what-do-we-do .what-do-we-do-head h2 { color: var(--ms-text) !important; }

#what-do-we-do .services-contents {
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 14px !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
#what-do-we-do .services-contents:hover {
  transform: translateY(-4px);
  border-color: var(--ms-red) !important;
  box-shadow: 0 18px 40px -18px var(--ms-red-glow);
}
#what-do-we-do .services-contents h6 { color: var(--ms-text) !important; }
#what-do-we-do .services-contents .servisec-text p { color: var(--ms-text-dim) !important; }

/* Featured first service & hover state: red gradient */
#what-do-we-do .first-service .inner-service-content,
#what-do-we-do .services-contents:hover .inner-service-content {
  background: linear-gradient(135deg, var(--ms-red-deep) 0%, var(--ms-red) 100%) !important;
  border-radius: 12px;
}
#what-do-we-do .first-service h6,
#what-do-we-do .services-contents:hover h6 { color: #fff !important; }
#what-do-we-do .first-service .servisec-text p,
#what-do-we-do .services-contents:hover .servisec-text p { color: rgba(255,255,255,0.92) !important; }

/* Service icons are dark line-art designed for white cards. Invert so they're visible on dark. */
#what-do-we-do .services-contents img {
  filter: invert(1) brightness(1.1);
  transition: filter .25s ease;
}
#what-do-we-do .first-service img,
#what-do-we-do .services-contents:hover img { filter: none; }

/* ============ INNER BANNER / PAGE TITLE ============ */
.inner_banner, .title-box {
  background: var(--ms-bg) !important;
  position: relative !important;
  z-index: 0;
}
.inner_banner img, .title-box img { width: 100%; display: block; }
.inner_banner::after, .title-box::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.85) 100%);
  pointer-events: none;
  z-index: 0;
}
.main_title {
  background: transparent !important;
  border-bottom: 1px solid var(--ms-border) !important;
}
.main_title h1, .main_title h2 {
  color: var(--ms-text) !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}

/* ============ FORMS & BUTTONS ============ */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
textarea, select {
  background: var(--ms-surface) !important;
  color: var(--ms-text) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--ms-red) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59,169,224,0.22) !important;
}
::placeholder { color: var(--ms-text-mute) !important; }

button, input[type="submit"], input[type="button"],
.button, .btn, .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce .button.alt {
  background: linear-gradient(135deg, var(--ms-red-deep) 0%, var(--ms-red) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  padding: 10px 20px !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
button:hover, .button:hover, .btn:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -10px var(--ms-red-glow);
  color: #fff !important;
}

/* ============ WOOCOMMERCE ============ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce .product,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce table.shop_table,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #payment {
  background: var(--ms-surface) !important;
  color: var(--ms-text) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 12px !important;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--ms-red) !important; }

/* Keep product photos pristine */
.woocommerce img, .woocommerce-product-gallery img,
.entry-content img, .post-thumbnail img,
.wp-block-image img, figure img {
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
}
.entry-content img, .post-thumbnail img, .wp-block-image img { border-radius: 12px; }

/* ============ FOOTER ============ */
#footer, .outer-footer, .footer-cols,
.footer-newsletter, .footer-partners,
.copyright, .credit_link {
  background: #050505 !important;
  color: var(--ms-text-dim) !important;
  border-top: 1px solid var(--ms-border) !important;
}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
.outer-footer h1, .outer-footer h2, .outer-footer h3,
.outer-footer h4, .outer-footer h5, .outer-footer h6 { color: var(--ms-text) !important; }
#footer a, .outer-footer a, .copyright a, .credit_link a { color: var(--ms-text-dim) !important; }
#footer a:hover, .outer-footer a:hover { color: var(--ms-red) !important; }

/* ============ MISC ============ */
.darkbox { background: var(--ms-surface) !important; color: var(--ms-text) !important; }
.serach_inner, .search_popup {
  background: rgba(10,10,10,0.92) !important;
  backdrop-filter: blur(6px);
}
.closepop i, .closebtn i { color: var(--ms-text) !important; }

* { scrollbar-color: var(--ms-red-deep) var(--ms-bg-2); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--ms-bg-2); }
*::-webkit-scrollbar-thumb { background: var(--ms-red-deep); border-radius: 8px; }
::selection { background: var(--ms-red); color: #fff; }

/* ============ RESPONSIVE ============ */
@media (max-width: 991px) {
  .home .site-header {
    position: relative !important;
    background: #0a0a0a !important;
  }
  #header .logo img, .custom-logo { max-height: 52px !important; }
  #header .logo > div { padding: 6px 10px; }
}