/* ==========================================================================
   NEXICUS theme — a token retheme of the Broadsheet design system.
   Loaded AFTER the design-system stylesheet, so it only re-points the
   system's own custom properties. No parallel components, no layout classes:
   every page still builds with Broadsheet's classes and spacing scale.

   Palette: Teal #249D8F / Golden Yellow #E9C46A / Coral #E76F51 / Cream #FDF0D5
   ========================================================================== */

:root {
  /* ---- Ground & ink ---- */
  --color-bg: #ffffff;
  --color-surface: #fdf0d5;              /* Cream — infographic canvas, section bands */
  --color-text: #16211f;                 /* very dark neutral, faintly teal */
  --color-divider: color-mix(in srgb, #16211f 14%, transparent);

  /* ---- Brand roles ---- */
  --color-accent: #249d8f;               /* Teal — primary, interactive */
  --color-accent-2: #e76f51;             /* Coral — attention, second spot */
  --color-process-yellow: #e9c46a;       /* Golden Yellow — data & infographic accent */

  /* NEXICUS-specific aliases used by the diagrams */
  --nx-teal: #249d8f;
  --nx-gold: #e9c46a;
  --nx-coral: #e76f51;
  --nx-cream: #fdf0d5;

  /* ---- Neutral ramp ---- */
  --color-neutral-100: #f6f7f6;
  --color-neutral-200: #e9ebea;
  --color-neutral-300: #d5d9d8;
  --color-neutral-400: #b6bcba;
  --color-neutral-500: #949c9a;
  --color-neutral-600: #767e7c;
  --color-neutral-700: #5b6362;          /* 6.2:1 on white — muted body copy */
  --color-neutral-800: #3d4443;
  --color-neutral-900: #232c2a;

  /* ---- Teal ramp ---- */
  --color-accent-100: #e9f7f5;
  --color-accent-200: #c9ebe7;
  --color-accent-300: #9adbd3;
  --color-accent-400: #62c2b6;
  --color-accent-500: #249d8f;
  --color-accent-600: #1c8377;
  --color-accent-700: #14655c;           /* 6.4:1 on white — accent body text */
  --color-accent-800: #0e4a43;
  --color-accent-900: #0a332e;

  /* ---- Coral ramp ---- */
  --color-accent-2-100: #fdefeb;
  --color-accent-2-200: #fbdcd3;
  --color-accent-2-300: #f7bdaa;
  --color-accent-2-400: #f0977c;
  --color-accent-2-500: #e76f51;
  --color-accent-2-600: #cf5636;
  --color-accent-2-700: #a63d21;         /* 5.8:1 on white */
  --color-accent-2-800: #7c2e19;
  --color-accent-2-900: #552112;

  /* ---- Gold ramp (data visualisation) ---- */
  --color-gold-100: #fdf7e8;
  --color-gold-200: #faedcb;
  --color-gold-300: #f5dc9d;
  --color-gold-400: #efce80;
  --color-gold-500: #e9c46a;
  --color-gold-600: #c9a24a;
  --color-gold-700: #9a7729;             /* 4.9:1 on white */
  --color-gold-800: #71571d;
  --color-gold-900: #4b3a14;

  /* ---- Geometry: softened from the print-sharp original ---- */
  --radius-sm: 3px;
  --radius-md: 7px;
  --radius-lg: 14px;

  /* ---- Elevation, retuned to the white ground ---- */
  --shadow-sm: 0 1px 2px rgba(22, 33, 31, 0.07), 0 1px 1px rgba(22, 33, 31, 0.04);
  --shadow-md: 0 4px 14px rgba(22, 33, 31, 0.08), 0 1px 3px rgba(22, 33, 31, 0.05);
  --shadow-lg: 0 18px 44px rgba(22, 33, 31, 0.13), 0 2px 8px rgba(22, 33, 31, 0.06);

  /* Diagram stroke weights, so every schematic matches */
  --nx-stroke: 1.6;
  --nx-stroke-bold: 2.6;
}

/* The [hidden] attribute must win over inline display values.
   Carousel slides, tab panels and filterable cards carry an inline
   display:grid/flex for their internal layout; the UA's
   [hidden]{display:none} loses to that inline value, so toggling
   `el.hidden` would set the attribute without hiding anything. */
[hidden] { display: none !important; }

/* Interaction states — themed, never browser defaults. */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 26%, transparent); }

/* ==========================================================================
   Motion. Every animation below is opt-in via a class and every one of them
   is disabled under prefers-reduced-motion — no information lives only in
   an animation.
   ========================================================================== */

@keyframes nx-rise   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes nx-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes nx-draw   { from { stroke-dashoffset: var(--nx-len, 400); } to { stroke-dashoffset: 0; } }
@keyframes nx-flow   { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes nx-pulse  { 0%, 100% { opacity: 0.28; transform: scale(1); } 50% { opacity: 0.08; transform: scale(1.55); } }
@keyframes nx-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes nx-slide-in  { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes nx-menu-in   { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Scroll reveal: elements start hidden only once JS has confirmed it can
   observe them (the .nx-obs flag), so a no-JS visitor sees everything. */
.nx-obs .nx-reveal { opacity: 0; }
.nx-obs .nx-reveal.nx-in { animation: nx-rise 0.66s cubic-bezier(0.22, 0.7, 0.2, 1) both; }

.nx-dash { stroke-dasharray: 6 6; animation: nx-flow 1.1s linear infinite; }
.nx-halo { animation: nx-pulse 3.2s ease-in-out infinite; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .nx-obs .nx-reveal,
  .nx-obs .nx-reveal.nx-in { opacity: 1; animation: none; }
  .nx-dash { animation: none; }
  .nx-halo { animation: none; opacity: 0.22; }
  * { scroll-behavior: auto !important; }
}


/* ==========================================================================
   RESPONSIVE SAFETY
   Two gaps found in the audit, fixed globally rather than per page.
   ========================================================================== */

/* 1. Long unbroken strings — emails, URLs, product codes — were the only
      remaining way to force horizontal overflow on a 320px screen. */
body { overflow-wrap: break-word; }
a, p, li, td, th, h1, h2, h3, h4, dd { overflow-wrap: break-word; }

/* 2. Five grids declared minmax(>=300px, 1fr), which cannot fit a 320-360px
      viewport and push the page sideways. Collapse them to one column below
      the point where they stop fitting. */
@media (max-width: 400px) {
  [style*="minmax(300px"], [style*="minmax(320px"], [style*="minmax(330px"],
  [style*="minmax(340px"], [style*="minmax(360px"], [style*="minmax(380px"],
  [style*="minmax(400px"], [style*="minmax(420px"], [style*="minmax(440px"] {
    grid-template-columns: 1fr !important;
  }
}

/* 3. Tables already scroll inside their wrapper; make the affordance visible. */
@media (max-width: 720px) {
  [style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; }
}

/* ==========================================================================
   LIVE CHAT — themed to match the NEXICUS palette
   --------------------------------------------------------------------------
   Tawk renders its window inside a cross-origin iframe, so its interior
   cannot be restyled from here (browser security, not a limitation of this
   build). What IS ours: the trigger controls and the frame around it.
   Interior colours are set in Tawk dashboard → Administration → Chat Widget.
   ========================================================================== */

/* Tawk's own container: match our radius and elevation, keep it clear of the
   Project Consultant in the opposite corner. */
iframe[title*="chat" i], iframe[src*="tawk.to"] {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  max-width: calc(100vw - 20px) !important;
}
@media (max-width: 520px) {
  iframe[src*="tawk.to"] { max-height: 78vh !important; }
}

/* Our chat triggers, in brand voice. */
[data-nx-chat] { cursor: pointer; transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease; }
[data-nx-chat][aria-busy="true"] { opacity: 0.65; cursor: progress; }
button[data-nx-chat]:focus-visible,
a[data-nx-chat]:focus-visible,
[data-nx-chat][role="button"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}