/* ==================================================
   CODES ATLAS SYSTEM — FINAL LAYER
   https://www.codesatlassystem.com/

   Purpose:
   Cross-cutting utilities and the small number of rules
   that must win over everything else. This file is linked
   LAST in every page head.

   ---------------------------------------------------
   HOW THE STYLESHEETS ARE LOADED
   ---------------------------------------------------
   Every page links the layers individually, in cascade
   order, rather than pulling them through @import:

     variables → reset → base → layout → components →
     header → hero → services → technologies → portfolio →
     industries → infographics → faq → contact → footer →
     animations → responsive → style

   @import was deliberately avoided. Imported stylesheets
   are fetched serially — the browser cannot discover
   sheet 17 until sheet 16 has parsed — which would add a
   long dependency chain in front of first paint. Separate
   <link> elements are discovered together in the initial
   HTML scan and download in parallel, so the split costs
   nothing on a modern connection while keeping each
   concern in its own maintainable file.

   If a build step is ever added, concatenating the files
   in the order above produces byte-identical behaviour
   from a single request.
================================================== */

/* ==================================================
   VISIBILITY UTILITIES
================================================== */

.is-hidden { display: none !important; }

/* Visible only to pointer/large screens or only to small screens. */
.hide-on-mobile { display: none; }

@media (min-width: 768px) {
  .hide-on-mobile { display: revert; }
  .hide-on-desktop { display: none; }
}

/* ==================================================
   SPACING UTILITIES
   A deliberately small set — layout should come from
   components, not from utility soup.
================================================== */

.mt-0  { margin-top: 0 !important; }
.mt-4  { margin-top: var(--s-4); }
.mt-6  { margin-top: var(--s-6); }
.mt-8  { margin-top: var(--s-8); }
.mt-12 { margin-top: var(--s-12); }

.mb-0  { margin-bottom: 0 !important; }
.mb-4  { margin-bottom: var(--s-4); }
.mb-6  { margin-bottom: var(--s-6); }
.mb-8  { margin-bottom: var(--s-8); }

/* ==================================================
   ALIGNMENT
================================================== */

.text-center { text-align: center; }
.text-left   { text-align: left; }

.full-width { width: 100%; }

/* ==================================================
   COLOUR HELPERS
================================================== */

.text-brand { color: var(--brand-600); }
.text-muted { color: var(--ink-400); }
.text-on-dark { color: var(--color-on-dark); }

/* ==================================================
   OVERFLOW GUARD
   A last line of defence against horizontal scrolling.
   Anything intrinsically wider than the viewport — a
   table, a code sample, a wide diagram — must scroll
   inside its own container, never the page body.
================================================== */

.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

html,
body {
  max-width: 100%;
}

/* ==================================================
   NO-JAVASCRIPT FALLBACKS
   The site is fully readable and navigable without
   JavaScript; these rules remove controls that would
   otherwise do nothing.
================================================== */

.no-js .search-toggle,
.no-js .hero-controls,
.no-js .portfolio-filter,
.no-js .hero-autoplay-toggle {
  display: none;
}

/* Without the slider script every slide is shown in sequence. */
.no-js .hero-slide {
  opacity: 1;
  visibility: visible;
  transform: none;
  position: relative;
}

.no-js .hero-slider__track {
  display: block;
}

/* ==================================================
   REDUCED TRANSPARENCY
   Respect the OS setting by replacing translucent
   surfaces with solid ones.
================================================== */

@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .mobile-call-bar {
    background-color: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .search-overlay {
    background-color: rgba(6, 12, 31, 0.94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hero-panel {
    background-color: rgba(11, 20, 48, 0.9);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ==================================================
   FORCED COLORS (Windows High Contrast)
   Keep borders and focus rings meaningful when the OS
   overrides the palette.
================================================== */

@media (forced-colors: active) {
  .card,
  .infographic,
  .infographic__node,
  .faq-item,
  .form-control {
    border: 1px solid CanvasText;
  }

  .btn {
    border: 1px solid ButtonText;
  }

  .icon-button__glyph,
  .btn__icon,
  .contact-list__icon,
  .infographic__connector::before {
    background-color: CanvasText;
  }

  :focus-visible {
    outline: 3px solid Highlight;
  }
}