/* =============================================================
   KSI Full-Circle Session Security Ecosystem — Hex Diagram
   Elementor widget stylesheet.

   All values driven by --ksi-* custom properties are set inline,
   per widget instance, by class-ksi-hex-ecosystem-widget.php
   (scoped to .elementor-element-{{ id }}). This file only ever
   reads var(--ksi-*, fallback) — it never hardcodes theme values
   itself, so editing the widget in Elementor needs no CSS changes.
   ============================================================= */

* { box-sizing: border-box; }

.ksi-hex-ecosystem {
  /* ---- fallback theme tokens (overridden per-instance by Elementor controls) ---- */
  --ksi-font-family: "Mona Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --ksi-font-weight-bold: 700;
  --ksi-font-weight-regular: 400;

  --ksi-hex-bg-default: #701F2E;
  --ksi-hex-border-default: rgba(255,255,255,0.3);
  --ksi-hex-bg-active: #E5CE83;
  --ksi-hex-border-active: rgba(112,31,46,0.2);

  --ksi-icon-color: #E5CE83;
  --ksi-icon-size-scale: 1;
  --ksi-label-color: #FFFFFF;
  --ksi-heading-color: #701F2E;
  --ksi-desc-color: #000000;

  --ksi-ring-color: #CFCFCF;
  --ksi-mask-color: #FFFFFF;

  --ksi-transition: 320ms cubic-bezier(0.22, 1, 0.36, 1);

  display: block;
  width: 100%;
  max-width: 703px;
  margin-inline: auto;
  container-type: inline-size;
  container-name: ksihex;
}

.ksi-hex-ecosystem__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 702.876 / 731.856;
}
.ksi-hex-item  button.ksi-hex-card {
    background: transparent !important;
} 
/* ---- background layers: ring, center mask, brand mark ---- */

.ksi-hex-ring,
.ksi-hex-mask {
  position: absolute;
  display: block;
  pointer-events: none;
}
.ksi-hex-ring {
  inset: 23.39% 17.84% 23.14% 17.87%;
}
.ksi-hex-mask {
  inset: 33.89% 30.87% 34.3% 30.87%;
}
.ksi-hex-logo {
  position: absolute;
  display: block;
  pointer-events: none;
  left: 41.12%;
  width: 17.92%;
  top: 44.815%;
  height: auto;
  object-fit: contain;
}

/* ---- repeater reset ---- */

.ksi-hex-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ksi-hex-item {
  position: absolute;
  width: 38.253%;
  height: 31.813%;
}

.ksi-hex-item--pos-1 { left: 30.874%; top: 0%; }
.ksi-hex-item--pos-2 { left: 61.749%; top: 16.671%; }
.ksi-hex-item--pos-3 { left: 61.749%; top: 51.925%; }
.ksi-hex-item--pos-4 { left: 30.874%; top: 68.178%; }
.ksi-hex-item--pos-5 { left: 0%;      top: 51.514%; }
.ksi-hex-item--pos-6 { left: 0%;      top: 17.081%; }

/* ---- the hex card itself ---- */

.ksi-hex-card {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  font: inherit;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.ksi-hex-card:hover,
.ksi-hex-card:focus,
.ksi-hex-card:active {
  color: inherit;
  text-decoration: none;
}
.ksi-hex-card:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 4px;
  border-radius: 4px;
}

.ksi-hex-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.ksi-hex-shape__fill {
  fill: var(--ksi-hex-bg-default);
  stroke: var(--ksi-hex-border-default);
  transition: fill var(--ksi-transition), stroke var(--ksi-transition);
}

/* ---- default content: icon + label ---- */

.ksi-hex-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3.41cqw, 24px);
  padding-inline: 18%;
  text-align: center;
  pointer-events: none;
}
.ksi-hex-item--pos-2 .ksi-hex-content,
.ksi-hex-item--pos-4 .ksi-hex-content {
  gap: clamp(10px, 2.56cqw, 18px);
}

.ksi-hex-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--ksi-transition), transform var(--ksi-transition);
}
.ksi-hex-icon svg { width: 100%; height: 100%; display: block; }
.ksi-hex-icon svg [fill]      { fill: var(--ksi-icon-color); }
.ksi-hex-icon svg [stroke]    { stroke: var(--ksi-heading-color); }
.ksi-hex-icon i,
.ksi-hex-icon .e-font-icon-svg svg { color: var(--ksi-icon-color); fill: var(--ksi-icon-color); }

.ksi-hex-icon--rfid         { width: calc(clamp(46px, 10.82cqw, 76px) * var(--ksi-icon-size-scale)); height: calc(clamp(33px, 7.68cqw, 54px) * var(--ksi-icon-size-scale)); }
.ksi-hex-icon--fido         { width: calc(clamp(44px, 10.53cqw, 74px) * var(--ksi-icon-size-scale)); height: calc(clamp(44px, 10.53cqw, 74px) * var(--ksi-icon-size-scale)); }
.ksi-hex-icon--face         { width: calc(clamp(40px,  9.25cqw, 65px) * var(--ksi-icon-size-scale)); height: calc(clamp(40px,  9.25cqw, 65px) * var(--ksi-icon-size-scale)); }
.ksi-hex-icon--mobile       { width: calc(clamp(41px,  9.68cqw, 68px) * var(--ksi-icon-size-scale)); height: calc(clamp(41px,  9.68cqw, 68px) * var(--ksi-icon-size-scale)); }
.ksi-hex-icon--fingerprint  { width: calc(clamp(45px, 10.67cqw, 75px) * var(--ksi-icon-size-scale)); height: calc(clamp(44px, 10.53cqw, 74px) * var(--ksi-icon-size-scale)); }
.ksi-hex-icon--presencelock { width: calc(clamp(52px, 12.38cqw, 87px) * var(--ksi-icon-size-scale)); height: calc(clamp(39px,  9.25cqw, 65px) * var(--ksi-icon-size-scale)); }

.ksi-hex-label {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--ksi-font-family);
  font-weight: var(--ksi-font-weight-bold);
  font-size: clamp(14px, 2.56cqw, 18px);
  line-height: 1.3;
  color: var(--ksi-label-color);
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: break-word;
  transition: color var(--ksi-transition), font-size var(--ksi-transition);
}
.ksi-hex-item--pos-1 .ksi-hex-label { white-space: nowrap !important; }

.ksi-hex-desc {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--ksi-font-family);
  font-weight: var(--ksi-font-weight-regular);
  font-size: clamp(11px, 1.99cqw, 14px);
  line-height: 1.3;
  color: var(--ksi-desc-color);
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: break-word;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity var(--ksi-transition), max-height var(--ksi-transition);
}

/* ---- active state: hover, keyboard focus, or tap ----
   Gold fill, heading colour swaps to burgundy, icon hides,
   description reveals. Only the interacted hex changes; all
   others remain in their default state (CSS handles this
   per-item automatically, no coordination needed). ---- */

.ksi-hex-item:hover .ksi-hex-shape__fill,
.ksi-hex-item:focus-within .ksi-hex-shape__fill,
.ksi-hex-item.is-active .ksi-hex-shape__fill {
  fill: var(--ksi-hex-bg-active);
  stroke: var(--ksi-hex-border-active);
}

.ksi-hex-item:hover .ksi-hex-icon,
.ksi-hex-item:focus-within .ksi-hex-icon,
.ksi-hex-item.is-active .ksi-hex-icon {
  opacity: 0;
  transform: scale(0.85);
  position: absolute;
  pointer-events: none;
}

.ksi-hex-item:hover .ksi-hex-label,
.ksi-hex-item:focus-within .ksi-hex-label,
.ksi-hex-item.is-active .ksi-hex-label {
  color: var(--ksi-heading-color);
  font-size: clamp(15px, 2.85cqw, 20px);
}

.ksi-hex-item:hover .ksi-hex-desc,
.ksi-hex-item:focus-within .ksi-hex-desc,
.ksi-hex-item.is-active .ksi-hex-desc {
  max-height: 6em;
  opacity: 1;
}

.ksi-hex-item:hover .ksi-hex-content,
.ksi-hex-item:focus-within .ksi-hex-content,
.ksi-hex-item.is-active .ksi-hex-content {
  gap: clamp(6px, 1.14cqw, 8px);
  padding-inline: 17%;
}
.ksi-hex-item:hover .ksi-hex-label,
.ksi-hex-item:focus-within .ksi-hex-label,
.ksi-hex-item.is-active .ksi-hex-label {
  white-space: normal !important;
}

/* Elevate the active hex above its neighbours so its (slightly
   larger) heading text is never clipped by a sibling's stacking
   order on overlap-prone breakpoints. */
.ksi-hex-item:hover,
.ksi-hex-item:focus-within,
.ksi-hex-item.is-active {
  z-index: 5;
}

/* =============================================================
   Small-screen fallback
   The interlocking hex layout has no mobile spec in Figma.
   Below ~480px of stage width it degrades to a simple stacked
   list so content stays legible; swap for a real mobile design
   when one exists.
   ============================================================= */
@container ksihex (max-width: 480px) {
  .ksi-hex-ecosystem__stage {
    aspect-ratio: auto;
    max-width: 360px;
  }
  .ksi-hex-ring, .ksi-hex-mask, .ksi-hex-logo { display: none; }
  .ksi-hex-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .ksi-hex-item {
    position: static;
    width: 100%;
    height: auto;
  }
  .ksi-hex-card { aspect-ratio: 268.876 / 200; }
}