/* =========================================================
   wheel.css — the SDG wheel

   Drawn to match the official UN wheel: straight-edged tiles
   on a light ground. Each goal is one <a class="wedge">
   holding its tile, number, name and icon, so the hover lift
   moves everything together.
   ========================================================= */

.wheel-section{
  padding:88px 0 96px;
  background:var(--paper-raised);
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
}

.wheel-layout{display:grid; justify-items:center;}
.wheel-wrap{width:100%; max-width:900px;}
.wheel-wrap svg{width:100%; height:auto; overflow:visible; display:block;}

/* ---------- one goal ---------- */
.wedge{
  cursor:pointer;
  /* --tx / --ty are the outward direction, set per tile in wheel.js */
  transform:translate(0,0);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.wedge-slice{transition:filter .3s ease;}

/* labels ride along with the group automatically */
.wedge-label{
  fill:#fff; pointer-events:none;
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
}
.wedge-num{font-size:24px; font-weight:700;}
.wedge-name{font-size:14px; font-weight:600; letter-spacing:0.012em;}
.wedge-icon{pointer-events:none;}

/* hover / keyboard focus: the tile lifts outward, labels included */
.wedge:hover,
.wedge:focus-visible{
  transform:translate(calc(var(--tx) * 18px), calc(var(--ty) * 18px));
}
.wedge:hover .wedge-slice,
.wedge:focus-visible .wedge-slice{
  filter:brightness(1.08) drop-shadow(0 12px 20px rgba(20,32,22,0.28));
}
.wedge:focus-visible{outline:none;}
.wedge:focus-visible .wedge-slice{stroke:var(--ink);}

/* dim the rest of the wheel so the hovered goal reads clearly */
.wheel-svg:hover .wedge:not(:hover){opacity:0.55;}

/* ---------- centre lockup ---------- */
.hub-line{
  fill:#29ABE2; font-family:'Manrope',sans-serif;
  font-size:62px; font-weight:800; letter-spacing:-0.01em;
}
.hub-goals{
  fill:#5E87C6; font-family:'Manrope',sans-serif;
  font-size:76px; font-weight:800; letter-spacing:-0.01em;
}