/* GeneratePress Site CSS */ 

/* Header */
.main-navigation:not(.toggled) .main-nav > ul {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
@media (min-width: 769px) {
    .main-navigation:not(.slideout-navigation)  {
        padding-left: 40px;
        padding-right: 40px;
    }
}


/* Slideout content */
.main-navigation.slideout-navigation .inside-navigation.grid-container {
    padding: 0 10px;
}
.slideout-navigation .gb-query-loop-wrapper .gb-query-loop-item {
    margin-bottom: 0;
}

/* Default post comment button */
.form-submit .submit {
    padding: 18px 34px;
}

/* Search results */
@media (min-width: 769px) {
    .search-results .site-main,
    .archive .site-main {
        padding-left:30px;
        padding-right: 30px;
    }
    .search-results article .inside-article,
    .archive article .inside-article {
        padding: 0;
    }
} 

/* End GeneratePress Site CSS */

.lighthouse-sticky-bar {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: white;
  padding: 16px 24px;
  border-bottom: 3px solid #f6c100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: 'Inter', sans-serif;
}

.lighthouse-sticky-bar .headline {
  font-size: 15px;
  font-weight: 500;
  margin-right: 10px;
  line-height: 1.4;
}

.lighthouse-sticky-bar input[type="text"],
.lighthouse-sticky-bar input[type="email"] {
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  min-width: 220px;
}

.lighthouse-sticky-bar button {
  background-color: #f6c100;
  color: black;
  font-weight: 600;
  font-size: 16px;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.lighthouse-sticky-bar button:hover {
  background-color: #e6b200;
}

/* Base style for pullquote */
.wp-block-pullquote {
  font-weight: bold;
  font-size: 1.25rem;
  border-left: 4px solid #88B7FF;
  padding: 1rem 1.5rem;
  background-color: #f2f7ff;
  position: relative;
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.6s ease-out;
}

/* Trigger Pullquote animation when visible */
.wp-block-pullquote.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* End pullquote code */

.podcast-highlight-box {
  background-color: #fdf9ef;
  border: 1px solid #eee;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 32px;
  margin: 48px auto;
  max-width: 720px;
}

.podcast-highlight-heading {
  font-size: 1.5rem;
  margin-bottom: 0.25em;
}

.podcast-highlight-sub {
  font-style: italic;
  color: #555;
  margin-bottom: 24px;
}

.podcast-badge {
  display: inline-block;
  transition: transform 0.2s ease;
}

.podcast-badge:hover {
  animation: wiggle 0.3s ease;
}

@keyframes wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

.podcast-badges-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 16px;
}

/* Style the “Newsletter” menu item as a button */
.main-navigation .main-nav .button-menu-item > a {
  background-color: #ff9900;    /* your brand accent */
  color: #ffffff;               /* button text color */
  padding: 8px 18px;            /* vertical & horizontal padding */
  border-radius: 4px;           /* rounded corners */
  transition: background-color .2s;
}

.main-navigation .main-nav .button-menu-item {
  margin-left: 46px; /* tweak this value to taste */
}
/* Hover state */
.main-navigation .main-nav .button-menu-item > a:hover {
  background-color: #e68a00;    /* slightly darker on hover */
  text-decoration: none;
}


/* 1. Powerful, responsive form heading */
#fluentform_3 .form-heading {
  font-size: clamp(1.5rem, 5vw, 2rem);  /* fluid between 1.5rem & 2rem */
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem;
  text-align: center;
  color: #111;
  letter-spacing: 0.5px;
}

/* 2. Tweak on very small screens if needed */
@media (max-width: 480px) {
  #fluentform_3 .form-heading {
    margin-bottom: 0.75rem;
  }
}

/* bottom-biased shadow for images */
.paper-lift img{
  display:block;
  box-shadow:none !important;                 /* kill any theme box-shadows */
  filter:
    drop-shadow(0 18px 14px rgba(0,0,0,.28))  /* primary bottom-biased shadow */
    drop-shadow(0 3px 2px rgba(0,0,0,.10));   /* tiny contact shadow for realism */
}

/* Block Quote styles for long quotes - establishes "Figure-quote"*/

blockquote {
  position: relative;
  font-style: italic;
}

blockquote:before {
  content: "“";
  position: absolute;
  left: -0.1em;
  top: -0.2em;
  font-size: 4rem;
  line-height: 1;
  opacity: 0.50;
  pointer-events: none;
}

.figure-quote {
  margin: 1.5rem 0;
  padding: 1.25rem 1.25rem 1.25rem 2rem;
  background: rgba(0,0,0,.035);
  border-left: 3px solid rgba(0,0,0,.15);
  max-width: 75ch;
}

.figure-quote blockquote { 
  margin: 0;
  font-style: normal;          /* long quotes: readable */
  line-height: 1.7;
}

.figure-quote blockquote p { margin: 0 0 .9em; }
.figure-quote blockquote p:last-child { margin-bottom: 0; }

.figure-quote::before {
  content: "“";
  position: relative;
  left: -0.5em;
  top: -0.1em;
  font-size: 3rem;
  opacity: .55;
  pointer-events: none;
  display: block;
  line-height: 1;
}

.figure-quote figcaption {
  margin-top: .85rem;
  font-size: .95em;
  color: rgba(0,0,0,.6);
  font-style: italic;          /* attribution only */
}

/* ===================== TeamViz — Consolidated + Responsive ===================== */
/* Design tokens */
.teamviz{
  --bg:#0f172a;
  --panel:#111827;
  --text:#000;       /* readability: all text black */
  --muted:#000;
  --accent:#60a5fa;
  --edge:#94a3b8;
  --node:#fbbf24;
}

/* Standalone framing (safe no-op in Elementor) */
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; background:#faf7df; color:#111; }
main{ max-width:1100px; margin:40px auto; padding:0 20px; }

/* Card */
.teamviz .tv-wrap{
  box-sizing:border-box;
  width:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:20px;
}

/* Header */
.teamviz .tv-header{
  display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  border-bottom:1px solid rgba(0,0,0,.08);
  padding-bottom:12px; margin-bottom:12px;
}
.teamviz .tv-title{ font-weight:700; letter-spacing:.2px; font-size:clamp(18px,2.5vw,24px); }
.teamviz .tv-formula{ color:var(--muted); font-size:13px; }
.teamviz .tv-formula code{ color:var(--text); background:rgba(0,0,0,.06); padding:2px 6px; border-radius:6px }

/* Controls */
.teamviz .tv-controls{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.teamviz .tv-slider-group{
  display:flex; align-items:center; gap:10px;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  padding:10px 12px; border-radius:10px; color:#fff;
}
.teamviz .tv-slider-group label{ margin:0; }
.teamviz input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:220px; height:4px; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--edge));
  outline:none;
}
.teamviz input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid var(--accent);
  box-shadow:0 1px 4px rgba(0,0,0,.4); cursor:pointer;
}
.teamviz input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid var(--accent); cursor:pointer;
}
.teamviz output{
  min-width:2ch; text-align:right; font-weight:700; color:#fff;
  padding:2px 8px; border-radius:8px;
  background:rgba(96,165,250,.15); border:1px solid rgba(96,165,250,.35);
}
.teamviz .tv-toggle{
  display:flex; align-items:center; gap:8px;
  background:var(--panel); padding:8px 10px; border-radius:10px;
  border:1px solid rgba(255,255,255,.08); color:#fff;
}
.teamviz .tv-btn{
  cursor:pointer; background:rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.12);
  padding:8px 10px; border-radius:10px; font-size:14px;
}
.teamviz .tv-stat{ font-variant-numeric:tabular-nums; color:var(--muted); font-size:14px; }

/* Stage */
.teamviz .tv-stage{
  position:relative; width:100%;
  aspect-ratio:16/11; /* team-of-teams */
  background:
    radial-gradient(1200px 600px at 50% 30%, rgba(96,165,250,.08), transparent 60%),
    radial-gradient(900px 900px at 80% 30%, rgba(251,191,36,.08), transparent 65%);
  border:1px solid rgba(0,0,0,.08); border-radius:14px; overflow:hidden;
}
.teamviz svg{ width:100%; height:100%; display:block }

/* Edges, nodes, labels */
.teamviz .tv-edges line{
  stroke:var(--edge);
  stroke-opacity:.65;
  vector-effect:non-scaling-stroke;
  stroke-width:1.5;
}
.teamviz .tv-nodes circle{
  fill:var(--node);
  stroke:rgba(0,0,0,.55);
  stroke-width:.8;
}
.teamviz .tv-labels text{
  fill:var(--text);
  font-size:11.55px; /* +5% */
  opacity:.95;
  pointer-events:none;
  paint-order:stroke;
  stroke:rgba(0,0,0,.45);
  stroke-width:1px;
}

/* Legend */
.teamviz .tv-legend{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  margin-top:10px; color:var(--muted); font-size:13px;
}
.teamviz .tv-badge{
  display:inline-flex; gap:6px; align-items:center;
  padding:4px 8px; border-radius:999px;
  background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.08);
}
.teamviz .tv-dot{ width:10px; height:10px; border-radius:50%; background:var(--node); border:1px solid rgba(0,0,0,.5) }
.teamviz .tv-dot.leader{ background:#facc15; border-color:#92400e; }
.teamviz .tv-line-swatch{ width:16px; height:2px; background:var(--edge) }
.teamviz .tv-footnote{ color:var(--muted); font-size:12px; margin-top:6px }
.teamviz .tv-hint{ color:var(--muted); font-size:12px }

/* Special nodes */
.teamviz-tt .leader-node circle{ fill:#fde68a; stroke:#b45309; stroke-width:1; }
.teamviz .tv-nodes circle.leader{ fill:#facc15; stroke:#92400e; stroke-width:1; }

/* Side annotation labels */
.teamviz .tv-labels text.tv-team { font-weight:600; }
.teamviz .tv-labels text.tv-count { font-size:10.5px; opacity:.95; }
.teamviz .tv-labels text.tv-team,
.teamviz .tv-labels text.tv-count{ dominant-baseline:middle; }

/* Make the first label (Leader) pop slightly */
.teamviz .tv-labels text:nth-of-type(1){
  stroke-width:1.4px;
  stroke:rgba(0,0,0,.65);
  paint-order:stroke;
}

/* ---------- Mobile / Responsive ---------- */
@media (max-width: 720px){
  .teamviz .tv-wrap{ padding:14px }
  .teamviz .tv-header{ gap:10px }
  .teamviz .tv-controls{
    width:100%;
    gap:10px;
    flex-direction:column;     /* stack vertically */
    align-items:stretch;
  }
  .teamviz .tv-slider-group{ width:100%; box-sizing:border-box; padding:10px 12px }
  .teamviz input[type="range"]{ width:100% }  /* no overflow */
  .teamviz output{ align-self:flex-end }
  .teamviz .tv-toggle{ width:100%; justify-content:flex-start }
  .teamviz .tv-btn{ width:100% }               /* big tap target */
  .teamviz .tv-stat{ width:100% }              /* wraps nicely */
  .teamviz .tv-formula{ display:none }         /* hide tiny formula on phones */
  .teamviz .tv-stage{ aspect-ratio: 4/3 }      /* give the graph more height */
}
@media (max-width: 420px){
  .teamviz .tv-stage{ aspect-ratio: 1/1 }      /* square for ultra-small screens */
  .teamviz .tv-labels text{ font-size:10.5px }
  .teamviz .tv-labels text.tv-count{ font-size:10px }
}

/* Compact mode (JS toggles .compact on small widths) */
.teamviz.compact .tv-edges line{ stroke-opacity:.55; stroke-width:1.2 }
.teamviz.compact .tv-labels text.tv-count{ font-size:10px; opacity:.9 }
.teamviz.compact .tv-stage{ border-radius:12px }

/* ================= Figure wrapper for multiple TeamViz widgets ================= */
.teamviz-figure{
  max-width: 1200px;
  margin: 2rem auto;
  padding: 1.5rem 1.5rem 1.25rem;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: #faf7df; /* matches your page background */
}

/* Header (shared title + optional subtitle) */
.teamviz-figure-header{
  margin-bottom: 1rem;
}
.teamviz-figure-title{
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
}
.teamviz-figure-subtitle{
  margin: .25rem 0 0;
  font-size: 14px;
  color: #4b5563;
}

/* Grid that holds the inner widgets */
.teamviz-figure-grid{
  display: grid;
  gap: 1.25rem;
  align-items: stretch;
}

/* Two columns on wider screens, single column on mobile */
@media (min-width: 720px){
  .teamviz-figure-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Shared legend & caption */
.teamviz-figure > .tv-legend{
  margin-top: 1rem;
}

.teamviz-figure-caption{
  margin-top: .5rem;
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
}

/* Make shared legends inside .teamviz-figure look like widget legends */
.teamviz-figure .tv-legend{
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:1rem;
  color:#6b7280;          /* similar to muted text */
  font-size:13px;
}

.teamviz-figure .tv-badge{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.08);
}

.teamviz-figure .tv-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--node, #fbbf24);
  border:1px solid rgba(0,0,0,.5);
}

.teamviz-figure .tv-dot.leader{
  background:#facc15;
  border-color:#92400e;
}

.teamviz-figure .tv-line-swatch{
  width:16px;
  height:2px;
  background:var(--edge, #94a3b8);
}

/* Optional: make primate cliques feel a little softer */
.primates-viz .tv-stage {
  /* you already have a nice background; this just slightly dims it */
  background:
    radial-gradient(900px 500px at 50% 40%, rgba(96,165,250,.06), transparent 65%),
    radial-gradient(900px 700px at 50% 90%, rgba(251,191,36,.05), transparent 70%);
}

.primates-viz .tv-nodes circle {
  /* slightly smaller & softer than team nodes */
  stroke-width: 0.7;
  opacity: 0.95;
}

/* Make SVG groups animatable via transform */
.primates-viz svg g.clique-group {
  transform-box: fill-box;
  transform-origin: center;
}

/* Slightly soften this specific viz */
.primates-viz .tv-stage {
  background:
    radial-gradient(900px 500px at 50% 40%, rgba(96,165,250,.06), transparent 65%),
    radial-gradient(900px 700px at 50% 90%, rgba(251,191,36,.05), transparent 70%);
}

/* Edges: let per-edge stroke colours show through */
.primates-viz .tv-edges line {
  stroke-opacity: 0.7;
  stroke-width: 1.5;
}

/* Hunting-party edges: slightly thicker and dashed */
.primates-viz .tv-edges line.hunt-edge {
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

/* Make circle groups animatable via transforms if needed */
.primates-viz svg g.clique-group {
  transform-box: fill-box;
  transform-origin: center;
}