/* ==============================
   CNXCT · Hyperspace overrides (clean)
   ============================== */

/* 1) Brand tokens */
:root{
  --cnxct-slate: #2f6278;   /* base (replaces purple) */
  --cnxct-slate-dark: #254d5e; /* sidebar shade */
  --cnxct-ink: #0a0a0a;

  --cnxct-teal:   #3b91b5;  /* accent teal */
  --cnxct-blue2:  #afd1ed;  /* soft light blue */
  --cnxct-coral:  #d96e4d;  /* CTA */
  --cnxct-white:  #ffffff;
}

/* 2) Typography (kept minimal) */
body.cnxct{
  color: var(--cnxct-ink);
}

/* 3) Replace Hyperspace “purple” areas with slate
   Hyperspace uses .wrapper.style1 for the hero band */
body.cnxct .wrapper.style1{
  color: #fff;
  background: var(--cnxct-slate);
  /* subtle diagonal lines like the template */
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(45deg,  rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  background-blend-mode: overlay;
}

/* 4) Darker sidebar panel */
body.cnxct #sidebar{
  background: var(--cnxct-slate-dark);
}

/* 5) Sidebar nav underline styles
   (Hyperspace draws lines with pseudo-elements) */

/* non-active: subtle single-color line */
body.cnxct #sidebar .inner nav ul li a:before{
  background: rgba(175,209,237,0.25) !important; /* faint light-blue */
}

/* active: gradient teal → light-blue */
body.cnxct #sidebar .inner nav ul li a.active:after{
  background: linear-gradient(90deg, var(--cnxct-teal), var(--cnxct-blue2)) !important;
}

/* 6) Primary button (CTA) uses coral */
body.cnxct .button.primary,
body.cnxct .actions .button.primary{
  background: var(--cnxct-coral);
  border-color: var(--cnxct-coral);
  color: #fff !important;
}
body.cnxct .button.primary:hover,
body.cnxct .actions .button.primary:hover{
  background: #af5135;
  border-color: #af5135;
}

/* 7) Links keep CNXCT accent */
body.cnxct a{
  color: var(--cnxct-teal);
  border-bottom-color: rgba(59,145,181,.35);
}
body.cnxct a:hover{
  color: #2f7d98;
  border-bottom-color: rgba(47,125,152,.45);
}
/* ----- Sidebar underlines: force brand colors everywhere ----- */

/* 1) Default baseline line (all items) */
body.cnxct #sidebar .inner nav ul li a::before{
  background: var(--cnxct-blue2) !important;         /* #afd1ed */
  opacity: .9 !important;
}

/* 2) Active item line (when section is in view) */
body.cnxct #sidebar .inner nav ul li a.active::after{
  background: linear-gradient(90deg, var(--cnxct-teal), var(--cnxct-blue2)) !important;
  opacity: 1 !important;
}

/* 3) Belt & suspenders: if the theme shows ::after even when not active */
body.cnxct #sidebar .inner nav ul li a::after{
  background: linear-gradient(90deg, var(--cnxct-teal), var(--cnxct-blue2)) !important;
}

/* 4) Optional: a subtle hover cue on the baseline */
body.cnxct #sidebar .inner nav ul li a:hover::before{
  background: linear-gradient(90deg, var(--cnxct-blue2), var(--cnxct-teal)) !important;
  opacity: 1 !important;
}
/* =========================================
   CNXCT · Offerings (spotlights) recolor
   – swaps Hyperspace purples for CNXCT slate/teal
   ========================================= */

/* Brand tints for rows (adjust if you want more/less contrast) */
:root{
  --cnxct-slate:   #2f6278; /* your base “anchor” slate */
  --cnxct-slate-1: #2b5870; /* slightly darker */
  --cnxct-slate-2: #274f65; /* darker */
  --cnxct-slate-3: #23465b; /* darkest */
}

/* Base panel styling (removes template purple) */
body.cnxct .spotlights > section .content {
  background: var(--cnxct-slate) !important;
  color: #fff;
  border-radius: 0.75rem;                 /* keeps the soft card feel */
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

/* Alternate the rows for visual rhythm */
body.cnxct .spotlights > section:nth-child(2) .content { background: var(--cnxct-slate-1) !important; }
body.cnxct .spotlights > section:nth-child(3) .content { background: var(--cnxct-slate-2) !important; }
body.cnxct .spotlights > section:nth-child(4) .content { background: var(--cnxct-slate-3) !important; }
/* If you have more than 4, start the cycle again: */
body.cnxct .spotlights > section:nth-child(5) .content { background: var(--cnxct-slate)   !important; }
body.cnxct .spotlights > section:nth-child(6) .content { background: var(--cnxct-slate-1) !important; }
body.cnxct .spotlights > section:nth-child(7) .content { background: var(--cnxct-slate-2) !important; }
body.cnxct .spotlights > section:nth-child(8) .content { background: var(--cnxct-slate-3) !important; }

/* Headings & text inside the panels */
body.cnxct .spotlights > section .content h2,
body.cnxct .spotlights > section .content h3 { color:#fff; }
body.cnxct .spotlights > section .content p  { color:rgba(255,255,255,.90); }

/* Buttons inside panels */
body.cnxct .spotlights > section .content .actions .button {
  background: transparent;
  color: #fff !important;
  border-color: rgba(255,255,255,.55);
}
body.cnxct .spotlights > section .content .actions .button:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.85);
}

/* Optional: lighten the image edge so photo + panel feel connected */
body.cnxct .spotlights > section .image:before {
  background: linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,0));
}
/* ---- CNXCT: Offerings / Spotlights color fixes ---- */

/* Brand tints for alternating rows (tweak if you want stronger contrast) */
:root{
  --cnxct-slate:     #2f6278;  /* base you picked */
  --cnxct-slate-1:   #2a5a6b;  /* slightly darker */
  --cnxct-slate-2:   #335f73;  /* slightly lighter */
}

/* Kill the template's purple overlays in spotlights */
body.cnxct .spotlights > section .content:before {
  background: none !important;           /* removes purple film */
}

/* Replace the purple block backgrounds with your slate tints */
body.cnxct .spotlights > section .content {
  background: var(--cnxct-slate) !important;
}

body.cnxct .spotlights > section:nth-child(2n) .content {
  background: var(--cnxct-slate-1) !important;
}

body.cnxct .spotlights > section:nth-child(2n+1) .content {
  background: var(--cnxct-slate-2) !important;
}

/* If any inner “alt” layers exist, neutralize them too */
body.cnxct .spotlights > section .content > .inner,
body.cnxct .spotlights > section .content > .inner:before {
  background: transparent !important;
}

/* Buttons inside spotlights: keep your brand colors readable */
body.cnxct .spotlights .actions .button.primary {
  background: var(--cnxct-coral) !important;
  border-color: var(--cnxct-coral) !important;
  color: #fff !important;
}
body.cnxct .spotlights .actions .button.primary:hover {
  background: #af5135 !important;
  border-color: #af5135 !important;
}
/* === CNXCT · kill Hyperspace purple overlay on Spotlights
   and replace with our slate/teal steps =================== */

/* Remove the template's purple content overlay */
body.cnxct .spotlights > section .content:before {
  background: none !important;
}

/* Give the content half our brand background instead */
body.cnxct .spotlights > section .content {
  background: rgba(47, 98, 115, 0.90) !important;   /* slate base */
}

/* Subtle alternation per row (like the original) */
body.cnxct .spotlights > section:nth-child(2n) .content {
  background: rgba(47, 98, 115, 0.82) !important;   /* a touch lighter */
}

/* Some builds also add a hover overlay—neutralize it */
body.cnxct .spotlights > section:hover .content:before {
  background: none !important;
}

/* Keep text/buttons readable on our darker content panel */
body.cnxct .spotlights > section .content .inner,
body.cnxct .spotlights > section .content .inner p,
body.cnxct .spotlights > section .content .inner h2,
body.cnxct .spotlights > section .content .inner a {
  color: #eaf3f7 !important; /* light ink on slate */
}

/* Optional: outline the small pill buttons so they pop */
body.cnxct .spotlights .actions .button {
  border-color: rgba(255,255,255,.35) !important;
}
body.cnxct .spotlights .actions .button:hover {
  border-color: rgba(255,255,255,.6) !important;
}
/* Belt & suspenders: if a section-level overlay exists, kill it */
body.cnxct .spotlights > section:before {
  background: none !important;
}
/* === Kill Hyperspace purple overlays in Offerings === */

/* Make sure the content cards use your slate base */
body.cnxct .spotlights > section .content,
body.cnxct .spotlights > section:nth-child(2n) .content {
  background: var(--cnxct-slate) !important; /* #2f6273 from your tokens */
  color: #eaf4fa; /* readable on slate */
}

/* Remove the template's purple gradients / stripes that sit on top */
body.cnxct .spotlights > section:before,
body.cnxct .spotlights > section:after,
body.cnxct .spotlights > section .content:before,
body.cnxct .spotlights > section .content:after {
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
}

/* Some builds also tint the whole wrapper row — clear that too */
body.cnxct .spotlights {
  background: none !important;
}

/* Optional: tiny depth so cards don’t look “flat” after removing overlays */
body.cnxct .spotlights > section {
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  border-radius: 8px;
}
/* ---- CNXCT: kill Hyperspace purple overlays in Spotlights ---- */

/* 1) Nuke all the purple pseudo-element overlays */
body.cnxct .spotlights > section:before,
body.cnxct .spotlights > section:after,
body.cnxct .spotlights > section > .content:before,
body.cnxct .spotlights > section > .content:after {
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Set our own background on the content cell */
:root { --cnxct-slate:#2f6273; } /* already defined earlier; safe to repeat */

body.cnxct .spotlights > section > .content {
  background: rgba(47, 98, 115, 0.96) !important;   /* slate */
}

/* 3) Keep a subtle alternating tint like the template did */
body.cnxct .spotlights > section:nth-child(2n) > .content {
  background: rgba(47, 98, 115, 0.88) !important;   /* slightly lighter/darker */
}

/* 4) Make sure the panel edge seam isn't purple */
body.cnxct .spotlights > section {
  background: transparent !important; /* row itself */
  box-shadow: none !important;
}

/* 5) Buttons & text remain readable on the new bg */
body.cnxct .spotlights > section > .content,
body.cnxct .spotlights > section > .content h2,
body.cnxct .spotlights > section > .content p {
  color: #e9f3f8; /* light ink on slate */
}
body.cnxct .spotlights > section > .content .actions .button {
  border-color: rgba(255,255,255,.35) !important;
  color: #e9f3f8 !important;
}
body.cnxct .spotlights > section > .content .actions .button:hover {
  border-color: rgba(255,255,255,.6) !important;
}
/* === Kill the remaining purple wrapper layers (Hyperspace) === */
/* Main offerings section wrapper */
body.cnxct .wrapper.style2,
body.cnxct .wrapper.style2:before,
body.cnxct .wrapper.style2:after {
  background: var(--cnxct-slate) !important;      /* your deep slate */
  box-shadow: none !important;
}

/* Each spotlight row sometimes gets its own overlay on the right side */
body.cnxct .wrapper.style2 .spotlights > section,
body.cnxct .wrapper.style2 .spotlights > section:before,
body.cnxct .wrapper.style2 .spotlights > section:after,
body.cnxct .wrapper.style2 .spotlights > section .content,
body.cnxct .wrapper.style2 .spotlights > section .content:before,
body.cnxct .wrapper.style2 .spotlights > section .content:after {
  background: transparent !important;             /* discard purple overlays */
  box-shadow: none !important;
}

/* Keep your cards readable and on-brand */
body.cnxct .wrapper.style2 .spotlights > section .content {
  background: rgba(255,255,255,0.02) !important;  /* ultra-subtle card fill */
  border-radius: 8px;
}
/* CNXCT: kill the last purple sliver seen on overscroll (Safari/mac) */

/* Use your deep teal everywhere the browser might expose the root canvas */
:root { --cnxct-teal-bg: #2e6473; }

html,
body {
  background-color: var(--cnxct-teal-bg) !important;
  background-image: none !important;
}

/* Some HTML5 UP builds tint the body via a fixed ::before layer. Neutralize it. */
body::before,
body::after {
  background: var(--cnxct-teal-bg) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Keep the main wrapper/intro overlays on-brand too (safety net) */
#wrapper::before,
#wrapper::after,
.intro::before,
.intro::after {
  background-color: var(--cnxct-teal-bg) !important;
  background-image: none !important;
}
/* CNXCT · Framework section (brand recolor) */
body.cnxct #framework.wrapper.style3 {
  background: var(--cnxct-slate) !important;   /* deep slate */
  color: #fff;
}

body.cnxct #framework h2,
body.cnxct #framework h3,
body.cnxct #framework p {
  color: #fff;
}

/* Icons: keep them readable on dark */
body.cnxct #framework .icon.solid.major {
  background: var(--cnxct-coral);  /* coral pops */
  color: #fff;
}

/* Button in Framework */
body.cnxct #framework .actions .button {
  background: transparent;
  color: var(--cnxct-coral) !important;
  border-color: var(--cnxct-coral);
}
body.cnxct #framework .actions .button:hover {
  background: var(--cnxct-coral);
  color: #fff !important;
  border-color: var(--cnxct-coral);
}
/* CNXCT · Framework icons refinement */
body.cnxct #framework .icon.solid.major {
  background: transparent;                  /* remove solid coral fill */
  border: 2px solid var(--cnxct-coral);     /* coral outline */
  color: var(--cnxct-coral);                /* coral icon */
  border-radius: 50%;
  width: 3.25rem;
  height: 3.25rem;
  line-height: 3.25rem;
  text-align: center;
  font-size: 1.25rem;
}
/* CNXCT · Framework icon outline style (no fill) */
body.cnxct #framework .icon.major {
  background: transparent !important;
  border: 2px solid var(--cnxct-coral);
  color: var(--cnxct-coral);
  border-radius: 50%;
  width: 3.25rem;
  height: 3.25rem;
  line-height: 3.25rem;
  text-align: center;
  font-size: 1.25rem;
}

/* Make sure the Font Awesome glyph inherits the coral */
body.cnxct #framework .icon.major:before {
  color: inherit !important;
}
/* CNXCT · Results / Case Snapshots */
body.cnxct #results.wrapper.style2 { background: transparent; }

body.cnxct .case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 2rem;
}

body.cnxct .case-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

body.cnxct .case-card .thumb {
  display:block; overflow:hidden; border-radius:10px; margin-bottom:1rem;
}
body.cnxct .case-card .thumb img {
  width:100%; height:220px; object-fit:cover; display:block;
}

body.cnxct .case-card h3 { margin: .25rem 0 .5rem; color:#fff; }
body.cnxct .case-card .desc { color: rgba(255,255,255,.88); margin:0 0 .5rem; }
body.cnxct .case-card .impact { color:#eaf3f7; margin:0 0 .75rem; }

body.cnxct .case-card .pull {
  margin:.25rem 0 .75rem;
  padding-left:1rem;
  border-left:3px solid var(--cnxct-coral);
  color: rgba(255,255,255,.9);
  font-style: italic;
}

body.cnxct .case-card .more {
  color: var(--cnxct-teal);
  border-bottom: 1px dotted rgba(59,145,181,.4);
}
body.cnxct .case-card .more:hover { color:#2f7d98; }

/* Badge */
body.cnxct .case-card .badge {
  position:absolute; top:.75rem; left:.75rem;
  background: rgba(217,110,77,.15); /* coral tint */
  color: var(--cnxct-coral);
  font-size:.75rem; padding:.2rem .5rem;
  border-radius:.5rem;
}

/* Responsive */
@media (max-width: 980px){
  body.cnxct .case-grid { grid-template-columns: 1fr; }
}
/* ===== CNXCT · Scheduler Modal (full-viewport fit) ===== */
.cnxct-modal[hidden] { display:none !important; }
.cnxct-modal { position:fixed; inset:0; z-index:10000; }

.cnxct-modal__backdrop {
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:saturate(120%) blur(2px);
}

/* Centered dialog, max width on desktop, near-full height always */
.cnxct-modal__dialog {
  position:absolute;
  top:4vh; left:50%; transform:translateX(-50%);
  width:min(1100px, 96vw);
  height:92vh;           /* taller than before */
  background:#1f3e4a;    /* brand slate background behind iframe edges */
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  overflow:hidden;       /* no scrollbars on container; iframe handles scroll */
}

/* Close button stays visible */
.cnxct-modal__close {
  position:absolute; top:.25rem; right:.6rem;
  background:transparent; border:0; color:#fff; font-size:2rem; line-height:1;
  cursor:pointer; opacity:.9; z-index:1;
}
.cnxct-modal__close:hover { opacity:1; }

/* Iframe always fills the dialog */
.cnxct-modal__frame {
  position:absolute; inset:0; border:0; width:100%; height:100%;
  background:#fff;
}

.cnxct-modal__fallback {
  position:absolute; bottom:.5rem; left:1rem; right:1rem;
  font-size:.85rem; color:#e6f2f7; text-align:left;
}

/* Small screens or short windows = truly full screen */
@media (max-width: 900px), (max-height: 780px){
  .cnxct-modal__dialog {
    top:0; left:0; transform:none;
    width:100vw; height:100vh; border-radius:0;
  }
}
/* Make sure nothing sits above the modal */
body.cnxct .cnxct-modal { position: fixed; inset: 0; z-index: 999999; }
body.cnxct .cnxct-modal__backdrop { z-index: 999999; }
body.cnxct .cnxct-modal__dialog   { z-index: 1000000; }

/* Drop footer (purple bar) below modal, even if the theme gave it a high z-index */
body.cnxct #footer,
body.cnxct .footer,
body.cnxct footer {
  position: relative !important;
  z-index: 1 !important;
}

/* If any ancestor had transforms that create a stacking context, neutralize them on the modal */
body.cnxct .cnxct-modal { transform: none !important; will-change: auto !important; }
/* Modal close button styling */
body.cnxct .cnxct-modal__close {
  color: #222 !important;         /* dark text */
  font-size: 2rem !important;     /* make it big enough */
  font-weight: bold !important;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

body.cnxct .cnxct-modal__close:hover {
  opacity: 1;
  color: #000 !important;         /* pure black on hover */
  cursor: pointer;
}
.bsky-svg {
  width: 20px;
  height: 20px;
  fill: #f26c4f; /* coral button color */
}
.icon.bluesky:hover .bsky-svg {
  fill: #fff; /* turns white on hover */
}
#footer {
  background-color: #16434e; /* darker teal */
  color: #fff;
}
/* Add breathing room between icons and headings in Framework section */
#framework .icon {
  margin-right: 0.75rem; /* ~12px space between icon and text */
  flex-shrink: 0;
}

#framework h3 {
  display: flex;
  align-items: center; /* keeps icon vertically aligned with heading text */
}