/* =====================================================================
   HumanCitizenry · Footer widgets — shared styles for leaf + lock
   Direction A: Whisper (inline expand panel)
   ===================================================================== */

.hc-eco, .hc-sec {
  --hc-fg:#f3efe7;
  --hc-fg-dim:#a8a39a;
  --hc-elev:#1a1a1a;
  --hc-rule:rgba(255,255,255,.08);
  --hc-serif: ui-serif, Georgia, "Times New Roman", serif;
  --hc-sans:  ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  position:relative; display:inline-flex;
  font-family: var(--hc-sans);
  color: var(--hc-fg);
}
.hc-eco { --hc-eco-fill:#5e8753; --hc-eco-vein:#3d5d35; --hc-eco-accent:#79b56a; --hc-speed:5s; }
.hc-sec { --hc-sec-body:#337e98; --hc-sec-shackle:#79b3c9; --hc-sec-accent:#79b3c9; --hc-speed:5s; }

.hc-eco *, .hc-eco *::before, .hc-eco *::after,
.hc-sec *, .hc-sec *::before, .hc-sec *::after { box-sizing: border-box; }

/* Trigger */
.hc-eco__trigger, .hc-sec__trigger {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:76px; height:76px; padding:0; border:0; background:transparent; color:inherit; cursor:pointer;
  border-radius:14px; outline:0; transition: background .22s ease;
}
.hc-eco__trigger:hover, .hc-sec__trigger:hover { background: rgba(255,255,255,.035); }
.hc-eco__trigger:focus-visible { outline:2px solid var(--hc-eco-accent); outline-offset:4px; }
.hc-sec__trigger:focus-visible { outline:2px solid var(--hc-sec-accent); outline-offset:4px; }

/* Icons + idle animation */
.hc-eco__icon, .hc-sec__icon {
  display:inline-flex; width:56px; height:56px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
}
.hc-eco__icon { transform-origin:50% 90%; animation: hc-eco-sway var(--hc-speed) ease-in-out infinite; }
.hc-sec__icon { transform-origin:50% 70%; animation: hc-sec-click var(--hc-speed) ease-in-out infinite; }
.hc-eco__trigger:hover .hc-eco__icon,
.hc-sec__trigger:hover .hc-sec__icon { transform: translateY(-2px) scale(1.04); }

@keyframes hc-eco-sway {
  0%, 100% { transform: rotate(-3.9deg) translateY(0); }
  50%      { transform: rotate( 3.9deg) translateY(-1px); }
}
@keyframes hc-sec-click {
  0%, 70%, 100% { transform: translateY(0) rotate(0); }
  74%           { transform: translateY(-2px) rotate(-3deg); }
  78%           { transform: translateY(0)    rotate(0); }
  82%           { transform: translateY(-1px) rotate(1deg); }
  86%           { transform: translateY(0)    rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hc-eco__icon, .hc-sec__icon { animation: none !important; }
}

/* Hover hint (pill tooltip above icon) */
.hc-eco__hint, .hc-sec__hint {
  position:absolute; left:50%; bottom:calc(100% + 6px);
  transform: translateX(-50%) translateY(4px);
  background:#232323; color:var(--hc-fg); font-size:12px; letter-spacing:.02em;
  padding:7px 11px; border-radius:999px; border:1px solid var(--hc-rule);
  white-space:nowrap; opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.hc-eco__hint::after, .hc-sec__hint::after {
  content:''; position:absolute; left:50%; top:100%;
  transform: translateX(-50%) rotate(45deg);
  width:8px; height:8px; background:#232323;
  border-right:1px solid var(--hc-rule); border-bottom:1px solid var(--hc-rule);
  margin-top:-4px;
}
.hc-eco__trigger:hover .hc-eco__hint, .hc-eco__trigger:focus-visible .hc-eco__hint,
.hc-sec__trigger:hover .hc-sec__hint, .hc-sec__trigger:focus-visible .hc-sec__hint {
  opacity:1; transform: translateX(-50%) translateY(0);
}
.hc-eco.is-open .hc-eco__hint, .hc-sec.is-open .hc-sec__hint { opacity:0 !important; }

/* Panel */
.hc-eco__panel, .hc-sec__panel {
  position:absolute; bottom:calc(100% + 14px);
  width:380px; max-width: calc(100vw - 32px);
  background: var(--hc-elev); border:1px solid var(--hc-rule); border-radius:16px;
  padding:22px 22px 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset;
  z-index:10;
  animation: hc-fw-in .36s cubic-bezier(.2,.8,.2,1);
}
.hc-eco[data-side="left"]  .hc-eco__panel,
.hc-sec[data-side="left"]  .hc-sec__panel { left:-8px;  transform-origin: bottom left;  }
.hc-eco[data-side="right"] .hc-eco__panel,
.hc-sec[data-side="right"] .hc-sec__panel { right:-8px; transform-origin: bottom right; }

.hc-eco__panel::after, .hc-sec__panel::after {
  content:''; position:absolute; top:100%;
  width:14px; height:14px; background: var(--hc-elev);
  border-right:1px solid var(--hc-rule); border-bottom:1px solid var(--hc-rule);
  transform: translateY(-50%) rotate(45deg);
}
.hc-eco[data-side="left"]  .hc-eco__panel::after,
.hc-sec[data-side="left"]  .hc-sec__panel::after { left:38px; }
.hc-eco[data-side="right"] .hc-eco__panel::after,
.hc-sec[data-side="right"] .hc-sec__panel::after { right:38px; }

@keyframes hc-fw-in {
  from { opacity:0; transform: translateY(8px) scale(.985); }
  to   { opacity:1; transform: none; }
}

/* Close button */
.hc-eco__close, .hc-sec__close {
  position:absolute; top:10px; right:12px; width:28px; height:28px;
  background:transparent; border:0; color:var(--hc-fg-dim); font-size:22px; line-height:1;
  cursor:pointer; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  transition: background .18s ease, color .18s ease;
}
.hc-eco__close:hover, .hc-sec__close:hover { background: rgba(255,255,255,.06); color: var(--hc-fg); }

/* Panel head + body */
.hc-eco__panel-head, .hc-sec__panel-head { margin-bottom:18px; padding-right:24px; }
.hc-eco__panel-eyebrow, .hc-sec__panel-eyebrow {
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:8px;
}
.hc-eco__panel-eyebrow { color: var(--hc-eco-accent); }
.hc-sec__panel-eyebrow { color: var(--hc-sec-accent); }

.hc-eco__panel-title, .hc-sec__panel-title {
  font-family: var(--hc-serif); font-size:22px; font-weight:500; font-style:italic;
  letter-spacing:-.015em; line-height:1.15; margin:0 0 8px; color: var(--hc-fg);
}
.hc-eco__panel-lead, .hc-sec__panel-lead {
  font-size:13.5px; line-height:1.55; color: var(--hc-fg-dim); margin:0;
}

.hc-eco__sections, .hc-sec__sections { list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.hc-eco__sections li, .hc-sec__sections li { display:grid; grid-template-columns:36px 1fr; gap:14px; align-items:start; }
.hc-eco__num, .hc-sec__num {
  font-family: var(--hc-serif); font-size:22px; font-style:italic; font-weight:500;
  letter-spacing:-.01em; line-height:1; padding-top:2px;
}
.hc-eco__num { color: var(--hc-eco-accent); }
.hc-sec__num { color: var(--hc-sec-accent); }

.hc-eco__sections h4, .hc-sec__sections h4 {
  font-size:14px; font-weight:600; margin:0 0 4px; letter-spacing:.01em; color: var(--hc-fg);
}
.hc-eco__sections p, .hc-sec__sections p {
  font-size:13.5px; line-height:1.55; color: var(--hc-fg-dim); margin:0;
}

/* Responsive */
@media (max-width: 640px) {
  .hc-eco__panel, .hc-sec__panel { width: min(360px, calc(100vw - 32px)); }
  .hc-eco[data-side="left"]  .hc-eco__panel,
  .hc-eco[data-side="right"] .hc-eco__panel,
  .hc-sec[data-side="left"]  .hc-sec__panel,
  .hc-sec[data-side="right"] .hc-sec__panel {
    left:50%; right:auto; transform: translateX(-50%); transform-origin: bottom center;
  }
  .hc-eco__panel::after, .hc-sec__panel::after {
    left:50% !important; right:auto !important; transform: translate(-50%,-50%) rotate(45deg);
  }
}