/* =========================================================
   HeadcanonLab Corkboard — shared design tokens
   Prefixed (--hccb-*) so they never collide with your theme
   or Elementor's own CSS variables.
   ========================================================= */
:root{
  --hccb-paper:#faf3e2;
  --hccb-paper-2:#fff9ec;
  --hccb-ink:#2c2016;
  --hccb-ink-soft:#5a4a37;
  --hccb-ink-faint:#8a7862;
  --hccb-red:#b93b2e;
  --hccb-red-dark:#8f2c22;
  --hccb-teal:#33625d;
  --hccb-mustard:#d99a3d;
  --hccb-line:rgba(44,32,22,0.14);
  --hccb-shadow:0 10px 24px rgba(30,20,10,0.18);
  --hccb-shadow-sm:0 4px 10px rgba(30,20,10,0.14);
}

.hc-community,
.hc-pin-form-wrap,
.hc-tool-wrap{
  font-family:'Inter',sans-serif;
  color:var(--hccb-ink);
  box-sizing:border-box;
}
.hc-community *, .hc-pin-form-wrap *, .hc-tool-wrap *{ box-sizing:border-box; }

.hc-eyebrow{
  font-family:'Special Elite',monospace;
  font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--hccb-red-dark);
  display:inline-flex;align-items:center;gap:10px;
}
.hc-eyebrow::before{content:"";width:16px;height:1px;background:var(--hccb-red-dark);display:inline-block;}

.hc-section-head{max-width:640px;margin-bottom:30px;}
.hc-section-head h2{
  font-family:'Fraunces',serif;font-weight:600;font-size:clamp(24px,3.2vw,34px);
  margin:14px 0 0;line-height:1.1;color:var(--hccb-ink);
}
.hc-section-head p{font-size:15px;color:var(--hccb-ink-soft);margin-top:12px;line-height:1.6;}

/* ---------- corkboard feed ---------- */
.hc-feed{display:flex;flex-direction:column;gap:14px;max-width:640px;}
.hc-feed-item{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--hccb-paper);border:1px solid var(--hccb-line);border-radius:2px;
  padding:16px 18px;
}
.hc-feed-tag{
  font-family:'Special Elite',monospace;font-size:10px;padding:4px 8px;border-radius:20px;
  color:#fff;white-space:nowrap;margin-top:2px;
}
.hc-tag-humor{background:var(--hccb-mustard);}
.hc-tag-angst{background:var(--hccb-teal);}
.hc-tag-romance{background:var(--hccb-red);}
.hc-tag-adventure{background:#6b5a8c;}
.hc-feed-item p{font-size:14.5px;line-height:1.55;margin:0;color:var(--hccb-ink);}
.hc-feed-item .hc-src{font-size:12px;color:var(--hccb-ink-faint);margin-top:4px;}
.hc-empty{color:var(--hccb-ink-faint);font-style:italic;font-size:14.5px;}

.hc-community-cta{margin-top:26px;}
.hc-btn-primary{
  display:inline-block;background:var(--hccb-red);color:#fff!important;text-decoration:none;
  padding:14px 26px;border-radius:2px;font-weight:700;font-size:14.5px;
  box-shadow:3px 3px 0 var(--hccb-red-dark);transition:transform .15s ease;border:none;cursor:pointer;
}
.hc-btn-primary:hover{transform:translate(-2px,-2px);color:#fff;}

/* ---------- shared "case file" card (form + tool wrapper) ---------- */
.hc-case-form{
  background:var(--hccb-paper-2);border:1px solid var(--hccb-line);border-radius:3px;
  padding:30px 30px 28px;box-shadow:var(--hccb-shadow);position:relative;max-width:520px;
}
.hc-case-form::before{
  content:"";position:absolute;top:-9px;left:32px;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e2685a, var(--hccb-red-dark));
  box-shadow:0 2px 4px rgba(0,0,0,0.4);
}
.hc-case-form .hc-tag{
  font-family:'Special Elite',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--hccb-ink-faint);margin-bottom:6px;display:block;
}
.hc-case-form h3{
  font-family:'Fraunces',serif;font-weight:600;font-size:20px;margin:0 0 20px;color:var(--hccb-ink);
}

.hc-field{margin-bottom:18px;}
.hc-field label{
  display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--hccb-ink-soft);margin-bottom:8px;
}
.hc-field input[type=text],
.hc-field textarea,
.hc-field select{
  width:100%;border:1px solid var(--hccb-line);background:var(--hccb-paper);border-radius:2px;
  padding:12px 13px;font-size:14.5px;color:var(--hccb-ink);font-family:'Inter',sans-serif;
}
.hc-field input:focus, .hc-field textarea:focus, .hc-field select:focus{outline:none;border-color:var(--hccb-teal);}

.hc-generate-btn{
  width:100%;margin-top:4px;background:var(--hccb-red);color:#fff;border:none;
  padding:15px;border-radius:2px;font-weight:700;font-size:15px;
  box-shadow:3px 3px 0 var(--hccb-red-dark);transition:transform .15s ease;cursor:pointer;
}
.hc-generate-btn:hover{transform:translate(-2px,-2px);}
.hc-form-note{font-size:12px;color:var(--hccb-ink-faint);text-align:center;margin-top:12px;}

.hc-form-msg{font-size:13.5px;padding:10px 14px;border-radius:2px;margin-bottom:16px;}
.hc-form-msg.hc-success{background:#e4efe0;color:#33622b;}
.hc-form-msg.hc-error{background:#f4e2df;color:var(--hccb-red-dark);}

/* ---------- tool wrapper (holds your existing generator code) ---------- */
.hc-tool-wrap{margin:20px 0;}
.hc-tool-wrap .hc-eyebrow{margin-bottom:12px;display:block;}
.hc-tool-inner{max-width:560px;}
.hc-legacy-tool{margin-top:10px;}

/* Auto-restyle plain form elements coming from your OLD tool's markup,
   so pasted-in legacy generators inherit the look without edits.
   If your old tool already has heavy custom CSS/classes, these rules
   act as a baseline underneath it — override further as needed. */
.hc-legacy-tool label{
  display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--hccb-ink-soft);margin-bottom:8px;font-family:'Inter',sans-serif;
}
.hc-legacy-tool input[type=text],
.hc-legacy-tool input[type=email],
.hc-legacy-tool input[type=search],
.hc-legacy-tool textarea,
.hc-legacy-tool select{
  width:100%;border:1px solid var(--hccb-line)!important;background:var(--hccb-paper)!important;
  border-radius:2px!important;padding:12px 13px!important;font-size:14.5px!important;
  color:var(--hccb-ink)!important;font-family:'Inter',sans-serif!important;margin-bottom:16px;
  box-shadow:none!important;
}
.hc-legacy-tool input[type=submit],
.hc-legacy-tool button{
  width:100%;background:var(--hccb-red)!important;color:#fff!important;border:none!important;
  padding:15px!important;border-radius:2px!important;font-weight:700!important;font-size:15px!important;
  box-shadow:3px 3px 0 var(--hccb-red-dark)!important;cursor:pointer;font-family:'Inter',sans-serif!important;
  transition:transform .15s ease;
}
.hc-legacy-tool input[type=submit]:hover,
.hc-legacy-tool button:hover{transform:translate(-2px,-2px);}
.hc-legacy-tool p{font-family:'Inter',sans-serif;font-size:14.5px;color:var(--hccb-ink-soft);line-height:1.6;}
.hc-legacy-tool h1, .hc-legacy-tool h2, .hc-legacy-tool h3, .hc-legacy-tool h4{
  font-family:'Fraunces',serif;color:var(--hccb-ink);
}
/* result/output text from an old generator often sits in these common wrappers —
   nudge it toward the handwritten "pinned note" feel automatically */
.hc-legacy-tool .result,
.hc-legacy-tool .output,
.hc-legacy-tool .generator-output,
.hc-legacy-tool .headcanon-result{
  font-family:'Caveat',cursive;font-size:22px;line-height:1.4;color:var(--hccb-ink);
  background:var(--hccb-paper);border:1px solid var(--hccb-line);border-radius:2px;
  padding:16px 18px;margin-top:14px;
}

@media (max-width:600px){
  .hc-case-form{padding:22px 20px;max-width:100%;}
  .hc-feed-item{flex-direction:column;gap:8px;}
}