/* ======================================================================== *
 * THE PIXEL MARK — Brand reskin overrides for the Marko template.
 *
 * Strategy: preserve 100% of Marko's layout/structure/animation, and only
 * remap the template's single accent colour (purple #C82AEF) to the brand's
 * Pixel Red #EF4138, plus expose the full brand palette as CSS variables for
 * new components. Loaded AFTER css/style.css so these win the cascade.
 *
 * Source of truth: THE-PIXEL-MARK Brand Style Guide v1.0 (2026).
 * ======================================================================== */

/* ---- Brand palette (available everywhere) ---- */
:root {
  --pixel-red: #ef4138;
  --pixel-red-dark: #c8322b; /* hover / pressed */
  --red-tint: #fbd9d7; /* highlight wash */
  --mark-ink: #2a2f34; /* authority / structure */
  --ink-900: #1b1e22;
  --ink-700: #3a4047;
  --ink-500: #5c636b;
  --ink-300: #9aa0a6;
  --ink-150: #d5d8db;
  --paper-2: #ecedef;
  --paper: #f4f5f6;
  --steel: #ef4138; /* secondary accent */
  --steel-dark: #c8322b;
  --steel-tint: #fbd9d7;
  --signal-gold: #e8c46a; /* campaign accent */

  /* Body font (original template): Plus Jakarta Sans, self-hosted via @fontsource */
  --global-font: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', ui-sans-serif, system-ui,
    sans-serif;
}

/* ---- Accent = STEEL BLUE (secondary: links, dots, data, hovers) ---- *
 * Brand guide: "Steel carries secondary actions, links and data; Red stays
 * reserved for the single key action." So the pervasive template accent is
 * steel, and red is applied only to primary CTA buttons (overrides below). */
:root {
  --accent-color: #ef4138;
  --accent-color-6: #ef413885;
  --star-color: #e8c46a; /* Signal Gold for review stars */

  --box-shadow-top-left: -3px -3px 7px 0px rgba(239, 65, 56, 0.4);
  --box-shadow-bottom-right: 3px 3px 7px 0px rgba(239, 65, 56, 0.4);
  --box-shadow-top-left-wide: -3px -3px 10px 0px rgba(239, 65, 56, 0.4);
  --box-shadow-bottom-right-wide: 3px 3px 10px 0px rgba(239, 65, 56, 0.4);
}

/* ---- Light theme ---- */
.lightmode {
  --accent-color: #ef4138;
  --accent-color-3: #fbd9d7; /* steel tint (was light purple) */
  --accent-color-6: #ef413833;
  --star-color: #e8c46a;
}

/* ---- Sections explicitly kept dark in light mode ---- */
body.lightmode .keep-dark {
  --accent-color: #ef4138;
  --accent-color-6: #ef413885;
  --star-color: #e8c46a;
}

/* ---- icon-circle = Steel Blue #0336F2 ---- */
.icon-circle,
.btn .icon-circle,
.btn-accent .icon-circle {
  background-color: #0336f2 !important;
}
.btn-accent:hover .icon-circle {
  background-color: #0228c4 !important;
}

/* ---- Icons = Steel Blue #0336F2; text & links stay Pixel Red #EF4138 ---- */
.accent-color,
.sub-heading i,
.link-wrapper i,
.service-icon i,
.breadcrumb-item i,
.benefit i,
.chooseus-title i,
.testimonial-header-link-wrapper i,
.card-testimonial .fa-quote-right,
.expertise-link i,
.navbar-nav .nav-link i,
.tpm-faq summary i,
.contact-list i,
#themeIcon {
  color: #0336f2 !important;
}
/* Preserve review stars (gold) and icons sitting inside filled circles (white) */
.stars i {
  color: var(--star-color) !important;
}
.icon-circle i {
  color: #fff !important;
}
/* Service-card icons stay Pixel Red #EF4138 */
.service-icon i {
  color: #ef4138 !important;
}
/* Nav "Services" dropdown arrow -> Pixel Red (override the blue icon rule) */
.navbar .nav-link .fa-angle-down,
.navbar .nav-link i.accent-color {
  color: #ef4138 !important;
}
/* Testimonial section heading ("Real Stories, Real Growth") -> white.
   The title card is dark (--secondary) in dark mode, so white reads well; in light
   mode the card is near-white (--accent-color-4), so keep the heading dark there. */
.testimonial-header-wrapper-title .title-heading {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.lightmode .testimonial-header-wrapper-title .title-heading {
  color: var(--primary) !important;
  -webkit-text-fill-color: var(--primary) !important;
}
/* Case-study tag text ("cs-component") — was unstyled dark; make it theme-aware */
.cs-component span,
.cs-component a {
  color: var(--primary) !important;
}
/* A lone trailing case-study card (odd count) spans the full panel row instead of
   floating at the template's 42%/56.2% masonry width. */
@media (min-width: 1200px) {
  .case-studies-content.cs-solo {
    width: 100% !important;
  }
}
/* Light mode: the header flips to light (original template), so force the nav
   text dark and active/hover red so it stays visible on the light bar. */
body.lightmode .navbar .nav-link {
  color: #1f1f1f !important;
}
body.lightmode .navbar .nav-link.active,
body.lightmode .navbar .nav-link:hover {
  color: #ef4138 !important;
}

/* ---- Section headings: restore the template's subtle dark-mode text gradient
   (transparent 3% -> --primary), solid in light mode. Uses only --primary and
   --accent-transparent (#00000000), so NO accent/purple leak. The hero H1
   (.title-heading-banner) keeps its own separate gradient. The testimonial-title
   white override above is more specific (+!important), so it still wins there. ---- */
.title-heading {
  background-image: linear-gradient(284deg, var(--accent-transparent) 3%, var(--primary) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body.lightmode .title-heading {
  background-image: none !important;
  -webkit-text-fill-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* ---- Template raster icons -> white (dark theme) ---- */
.chooseus-icon img,
.process-icon,
.digital-process-step img {
  filter: brightness(0) invert(1);
}
/* Light theme: flip them dark (white-on-light would be invisible) */
body.lightmode .chooseus-icon img,
body.lightmode .process-icon,
body.lightmode .digital-process-step img {
  filter: brightness(0);
}

/* ---- Hero: solid dark card in BOTH themes (it's .keep-dark, so the light
   H1 needs a dark backdrop or it disappears in light mode) ---- */
.banner-video-container {
  background-color: var(--secondary);
}

/* ---- Original navbar: desktop dropdown on hover (no Bootstrap JS loaded).
   Uses the lg (992px) breakpoint so the horizontal nav shows on laptops too. ---- */
@media (min-width: 992px) {
  .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }
  /* Reproduce Bootstrap's navbar-expand behaviour (template's bootstrap.min.css
     only ships the xl expand rules, so lg was breaking the layout). */
  .navbar-collapse {
    display: flex !important;
    flex-basis: auto !important;
    flex-grow: 1;
  }
  .navbar-nav {
    flex-direction: row !important;
  }
  .navbar-toggler.nav-btn {
    display: none !important;
  }
  /* Dropdown must overlay (absolute), not push the navbar taller. Bootstrap only
     sets this at the xl expand breakpoint, which our lg nav never triggers. */
  .navbar-nav .nav-item.dropdown {
    position: relative;
  }
  .navbar-nav .dropdown-menu {
    position: absolute !important;
    top: 100%;
    left: 0;
  }
}
/* Show the hamburger below the lg breakpoint + shorter mobile header */
@media (max-width: 991.98px) {
  .nav-btn {
    display: inline-block;
  }
  .navbar-collapse {
    display: none !important;
  }
  .navbar-wrapper {
    padding: 12px 16px !important;
  }
  .tpm-logo {
    height: 42px;
  }
}

/* De-duplicate navigation for the accessibility tree: the off-canvas sidebar is
   mobile-only, so remove it from the desktop DOM/a11y tree entirely. */
@media (min-width: 992px) {
  .sidebar,
  .sidebar-overlay {
    display: none !important;
  }
}

/* ---- Inner-page banner: PageHeader.astro now emits the template's native
   .section-banner > .banner-layout-wrapper > .banner-layout structure, which
   supplies the square-grid pattern (.banner-layout-wrapper::before), the bordered
   radial-tint card, the bottom-center accent glow (.banner-layout::before) and the
   gradient divider (.banner-layout .spacer) — all from style.css, resolving to the
   brand red. No custom .tpm-page-header decoration needed here anymore. ---- */

/* Mobile sidebar: guarantee it slides fully on-screen when open. (The template's
   translateX was resolving to identity in this build, leaving it off-screen.) */
.sidebar {
  transition: left 0.4s ease-in-out;
}
.sidebar.active {
  left: 0 !important;
  transform: none !important;
}

/* ---- Brand helper classes for NEW components (service pages, etc.) ---- */
.text-accent {
  color: var(--pixel-red);
}
.bg-ink-surface {
  background-color: var(--mark-ink);
}
.steel-link {
  color: var(--steel);
}
.steel-link:hover {
  color: var(--steel-dark);
}

/* Respect reduced-motion for the scroll-reveal system (accessibility). */
@media (prefers-reduced-motion: reduce) {
  .animate-box {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ---- Skip link (accessibility) ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--pixel-red);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* ---- Mobile drawer (React island: MobileMenu.tsx) ---- */
.tpm-mobile {
  display: none;
}
.tpm-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1200;
}
.tpm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(86vw, 360px);
  background: var(--secondary);
  color: var(--primary);
  z-index: 1300;
  padding: 1.75rem 1.5rem;
  overflow-y: auto;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
}
.tpm-drawer-close {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  cursor: pointer;
}
.tpm-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.tpm-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--accent-color-3);
  text-align: left;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.85rem 0.25rem;
  text-decoration: none;
  cursor: pointer;
}
.tpm-drawer-sub {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-left: 0.75rem;
}
.tpm-drawer-sublink {
  color: var(--text-color);
  text-decoration: none;
  padding: 0.55rem 0.25rem;
  font-size: 0.98rem;
}
.tpm-drawer-sublink:hover,
.tpm-drawer-link:hover {
  color: var(--accent-color);
}
.tpm-drawer-cta {
  margin-top: 1.25rem;
}

@media (max-width: 1199.98px) {
  .tpm-mobile {
    display: block;
  }
  .tpm-desktop-nav,
  .tpm-desktop-only {
    display: none !important;
  }
}

/* ---- Forms ---- */
.tpm-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.tpm-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.tpm-form.is-loading {
  opacity: 0.65;
  pointer-events: none;
}
.tpm-form-footer {
  margin-top: 0.25rem;
}
@media (max-width: 640px) {
  .tpm-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Long-form prose (MDX bodies: services, blog, case studies) ---- */
.tpm-prose {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  color: var(--text-color);
  font-size: var(--font-size-lg);
  line-height: 1.75;
}
.tpm-prose > *:first-child {
  margin-top: 0;
}
.tpm-prose h2 {
  font-size: var(--font-size-9xl);
  color: var(--primary);
  margin: 2.5rem 0 1rem;
  line-height: 1.2;
}
.tpm-prose h3 {
  font-size: var(--font-size-6xl);
  color: var(--primary);
  margin: 2rem 0 0.75rem;
}
.tpm-prose h4 {
  font-size: var(--font-size-3xl);
  color: var(--primary);
  margin: 1.5rem 0 0.5rem;
}
.tpm-prose p {
  margin: 0 0 1.25rem;
}
.tpm-prose ul,
.tpm-prose ol {
  margin: 0 0 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tpm-prose li {
  list-style: disc;
}
.tpm-prose ol li {
  list-style: decimal;
}
.tpm-prose a {
  color: var(--accent-color);
  text-decoration: underline;
}
.tpm-prose strong {
  color: var(--primary);
}
/* Pull-quotes styled like the template's .quote-container (bordered radial card +
   soft accent glow) since MDX can't emit the full nested markup. */
.tpm-prose blockquote {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid var(--accent-color-3);
  border-radius: var(--global-border-radius);
  padding: 30px;
  margin: 1.75rem 0;
  background-color: transparent;
  background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 70%);
  color: var(--primary);
  font-style: italic;
}
.tpm-prose blockquote::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.2;
  pointer-events: none;
  background-image: radial-gradient(at bottom center, var(--accent-color) 0%, var(--accent-transparent) 60%);
}
.tpm-prose img {
  border-radius: 16px;
  max-width: 100%;
  height: auto;
}
.tpm-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.tpm-prose th,
.tpm-prose td {
  border: 1px solid var(--accent-color-3);
  padding: 0.65rem 0.85rem;
  text-align: left;
}