/* CloudCamp 2026 — "Jeg skal på CloudCamp" share-image generator
   Scoped to #cc-share so it coexists with the finago-theme on HubSpot. */

@font-face{font-family:"Borna";src:url("Borna-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Borna";src:url("Borna-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url("Figtree-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url("Figtree-Bold.woff") format("woff");font-weight:700;font-display:swap}

#cc-share{
  --cc-bg:#060709;
  --cc-panel:#0f1117;
  --cc-panel-2:#161a24;
  --cc-line:rgba(255,255,255,.09);
  --cc-text:#ffffff;
  --cc-muted:#ffffff;
  --cc-indigo:#524cf5;
  --cc-peri:#5e7fed;
  --cc-purple:#8459f5;
  --cc-orchid:#b464f8;
  --cc-mint:#88fcdd;
  --cc-grad:linear-gradient(90deg,var(--cc-mint),var(--cc-peri) 45%,var(--cc-purple) 75%,var(--cc-orchid));
  --cc-radius:18px;
  --cc-font:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cc-head:"Borna","Figtree",system-ui,sans-serif;
  font-family:var(--cc-font);
  color:var(--cc-text);
  background:var(--cc-bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow:hidden;
}
#cc-share *,#cc-share *::before,#cc-share *::after{box-sizing:border-box}
#cc-share h1,#cc-share h2,#cc-share h3,#cc-share p{margin:0}
#cc-share button{font:inherit;color:inherit;cursor:pointer}
#cc-share img,#cc-share canvas{display:block;max-width:100%;height:auto}

/* ambient glow */
#cc-share::before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:70vh;max-height:720px;pointer-events:none;
  background:
    radial-gradient(60% 55% at 70% 25%,rgba(82,76,245,.35),transparent 70%),
    radial-gradient(45% 45% at 20% 15%,rgba(136,252,221,.14),transparent 70%);
  filter:blur(30px);
}
#cc-share .cc-wrap{position:relative;max-width:1180px;margin:0 auto;padding:clamp(24px,5vw,64px) 16px clamp(56px,7vw,96px)}

/* ---------- Hero ---------- */
#cc-share .cc-hero>*{min-width:0}
#cc-share .cc-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:clamp(32px,5vw,72px)}
#cc-share .cc-kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;border:1px solid transparent;
  background:linear-gradient(var(--cc-panel),var(--cc-panel)) padding-box,var(--cc-grad) border-box;font-size:14px;font-weight:700;letter-spacing:.01em}
#cc-share .cc-kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--cc-mint)}
#cc-share .cc-h1{font-family:var(--cc-head);font-weight:700;font-size:clamp(34px,5.2vw,62px);line-height:1.02;letter-spacing:-.02em;margin:22px 0 16px}
#cc-share .cc-h1 .thin{font-weight:400;display:block;color:#ffffff}
#cc-share .cc-lede{font-size:clamp(16px,1.4vw,19px);color:var(--cc-muted);max-width:52ch}
#cc-share .cc-steps{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
#cc-share .cc-step{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:999px;background:var(--cc-panel);border:1px solid var(--cc-line);font-size:14px;color:#ffffff}
#cc-share .cc-step b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--cc-grad);color:#0b0c12;font-size:13px}
#cc-share .cc-hero-art{position:relative;justify-self:center;width:min(100%,450px)}
#cc-share .cc-hero-cap{text-align:center;font-size:13.5px;color:#fff;margin:22px 0 0;opacity:.95}
#cc-share .cc-hero-art img{border-radius:22px;box-shadow:0 40px 90px -30px rgba(82,76,245,.55),0 20px 40px -20px rgba(0,0,0,.8);transform:rotate(2deg)}
#cc-share .cc-hero-art::after{content:"";position:absolute;inset:auto -8% -8% -8%;height:40%;background:radial-gradient(50% 60% at 50% 100%,rgba(132,89,245,.35),transparent 70%);filter:blur(20px);z-index:-1}

/* ---------- Studio ---------- */
#cc-share .cc-studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.78fr);gap:clamp(20px,3vw,40px);align-items:start}
#cc-share .cc-stage{position:relative;border-radius:var(--cc-radius);background:var(--cc-panel);border:1px solid var(--cc-line);padding:14px;position:sticky;top:16px}
#cc-share .cc-canvas-frame{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#000;touch-action:none;user-select:none;-webkit-user-select:none}
#cc-share .cc-canvas-frame canvas{width:100%;height:100%}
#cc-share .cc-canvas-frame.is-draggable{cursor:grab}
#cc-share .cc-canvas-frame.is-dragging{cursor:grabbing}
#cc-share .cc-stage-hint{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:13px;color:var(--cc-muted)}
#cc-share .cc-stage-hint .fmt{font-variant-numeric:tabular-nums}

/* busy overlay on canvas */
#cc-share .cc-busy{position:absolute;inset:0;display:none;place-items:center;background:rgba(6,7,9,.62);backdrop-filter:blur(6px);text-align:center;padding:24px}
#cc-share .cc-busy.is-on{display:grid}
#cc-share .cc-busy .ring{width:48px;height:48px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:var(--cc-mint);animation:ccspin .9s linear infinite;margin:0 auto 14px}
@keyframes ccspin{to{transform:rotate(360deg)}}
#cc-share .cc-busy p{font-size:15px}
#cc-share .cc-busy small{display:block;color:var(--cc-muted);margin-top:4px;font-size:13px}

/* empty-state drop target drawn over the canvas */
#cc-share .cc-drop{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;cursor:pointer;
  background:transparent;align-content:start;padding-top:24%}
#cc-share .cc-drop.is-hidden{display:none}
#cc-share .cc-drop .inner{max-width:340px;padding:26px 26px 24px;border-radius:20px;background:rgba(15,17,23,.96);border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
#cc-share .cc-drop .icon{width:64px;height:64px;border-radius:20px;margin:0 auto 16px;display:grid;place-items:center;background:var(--cc-grad);color:#0b0c12;box-shadow:0 18px 40px -16px rgba(136,252,221,.6)}
#cc-share .cc-drop h3{font-family:var(--cc-head);font-weight:700;font-size:22px;line-height:1.2;letter-spacing:0;word-spacing:normal;margin:0 0 8px;color:var(--cc-text)}
#cc-share .cc-drop p{font-size:14px;line-height:1.5;color:#fff;margin:0}
#cc-share .cc-canvas-frame.is-over .cc-drop{outline:2px dashed var(--cc-mint);outline-offset:-10px;background:rgba(82,76,245,.25)}

/* ---------- Panel ---------- */
#cc-share .cc-panel{display:flex;flex-direction:column;gap:14px}
#cc-share .cc-card{background:var(--cc-panel);border:1px solid var(--cc-line);border-radius:var(--cc-radius);padding:20px}
#cc-share .cc-card h2{font-family:var(--cc-head);font-size:19px;line-height:1.2;display:flex;align-items:center;gap:10px;margin-bottom:6px}
#cc-share .cc-card h2 .n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--cc-grad);color:#0b0c12;font-size:13px;font-family:var(--cc-font);font-weight:700}
#cc-share .cc-card .sub{font-size:14px;color:#fff}
#cc-share .cc-card.is-locked{opacity:.85;pointer-events:none}
#cc-share .cc-card.is-locked .cc-btn.primary{opacity:.6}

#cc-share .cc-upload-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
#cc-share .cc-upload-row.only-one{grid-template-columns:1fr}
#cc-share .cc-tip{display:flex;gap:10px;margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--cc-panel-2);font-size:13px;color:#fff}
#cc-share .cc-tip svg{flex:none;margin-top:2px;color:var(--cc-mint)}
#cc-share .cc-tip a{color:var(--cc-mint);text-decoration:underline;text-underline-offset:3px}

#cc-share .cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 18px;border-radius:12px;border:1px solid var(--cc-line);
  background:var(--cc-panel-2);font-weight:700;font-size:15px;transition:transform .12s ease,background .15s ease,border-color .15s ease,opacity .15s}
#cc-share .cc-btn:hover{background:#1d2230;border-color:rgba(255,255,255,.16)}
#cc-share .cc-btn:active{transform:translateY(1px)}
#cc-share .cc-btn:focus-visible{outline:2px solid var(--cc-mint);outline-offset:2px}
#cc-share .cc-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
#cc-share .cc-btn.primary{background:var(--cc-indigo);border-color:transparent;color:#fff;box-shadow:0 12px 30px -12px rgba(82,76,245,.9)}
#cc-share .cc-btn.primary:hover{background:#6560ff}
#cc-share .cc-btn.linkedin{background:#0a66c2;border-color:transparent;color:#fff}
#cc-share .cc-btn.linkedin:hover{background:#1273d4}
#cc-share .cc-btn.ghost{background:transparent}
#cc-share .cc-btn.block{width:100%}
#cc-share .cc-btn svg{flex:none}

#cc-share .cc-seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:12px;background:var(--cc-panel-2);border:1px solid var(--cc-line);margin-top:14px}
#cc-share .cc-seg button{min-height:40px;border:0;border-radius:9px;background:transparent;font-weight:700;font-size:14px;color:var(--cc-muted)}
#cc-share .cc-seg button[aria-pressed="true"]{background:#262c3b;color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.05) inset}

#cc-share .cc-field{margin-top:16px}
#cc-share .cc-field label{display:flex;justify-content:space-between;font-size:13.5px;color:#fff;margin-bottom:8px}
#cc-share .cc-field label output{color:var(--cc-text);font-variant-numeric:tabular-nums}
#cc-share input[type=range]{width:100%;accent-color:var(--cc-indigo);height:28px}
#cc-share .cc-range-ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--cc-muted);margin-top:-2px}
#cc-share .cc-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
#cc-share .cc-row .cc-btn{flex:1 1 auto}

#cc-share textarea{width:100%;min-height:150px;resize:vertical;margin-top:14px;padding:14px;border-radius:12px;border:1px solid var(--cc-line);background:var(--cc-panel-2);color:var(--cc-text);font:inherit;font-size:14px;line-height:1.55}
#cc-share textarea:focus{outline:2px solid var(--cc-indigo);outline-offset:1px}
#cc-share .cc-count{font-size:12.5px;color:var(--cc-muted);text-align:right;margin-top:6px;font-variant-numeric:tabular-nums}

#cc-share .cc-actions{display:grid;gap:10px;margin-top:14px}
#cc-share .cc-fine{font-size:12.5px;color:var(--cc-muted);margin-top:10px}
#cc-share .cc-fine a{color:var(--cc-mint)}

/* toast */
#cc-share .cc-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:50;
  background:#1b2030;border:1px solid var(--cc-line);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;box-shadow:0 20px 50px -20px rgba(0,0,0,.9);transition:all .22s ease;max-width:calc(100vw - 32px)}
#cc-share .cc-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* step 3: save + copy */
#cc-share .cc-action{margin-top:16px;padding:16px;border-radius:14px;background:var(--cc-panel-2);border:1px solid var(--cc-line);transition:border-color .2s}
#cc-share .cc-action.is-done{border-color:rgba(136,252,221,.45)}
#cc-share .cc-action-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
#cc-share .cc-action-head b{display:block;font-size:15.5px}
#cc-share .cc-action-head small{display:block;color:#fff;font-size:13px;margin-top:2px}
#cc-share .cc-letter{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:9px;background:var(--cc-grad);color:#0b0c12;font-weight:700;font-size:14px}
#cc-share .cc-action textarea{margin-top:0;min-height:130px;background:var(--cc-panel)}
#cc-share .cc-action .cc-count{margin-bottom:10px}
#cc-share .cc-done{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:13.5px;color:var(--cc-mint)}
#cc-share .cc-done svg{flex:none;margin-top:1px}
#cc-share .cc-done i{font-style:normal;color:#fff}
#cc-share .cc-then{margin-top:16px;padding:16px;border-radius:14px;background:var(--cc-panel-2);border:1px solid var(--cc-line)}
#cc-share .cc-then ol{list-style:none;margin:0 0 14px;padding:0 0 0 40px;display:grid;gap:8px}
#cc-share .cc-then li{display:flex;gap:10px;align-items:center;font-size:14px;color:#ffffff}
#cc-share .cc-then li b{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:#262c3b;font-size:12px;color:#fff}
#cc-share .cc-then li i{font-style:normal;color:#fff;font-weight:700}
#cc-share a.cc-btn{text-decoration:none}

/* footer strip */
#cc-share .cc-foot{margin-top:clamp(40px,6vw,80px);padding-top:24px;border-top:1px solid var(--cc-line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--cc-muted)}
#cc-share .cc-foot a{color:#ffffff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}

.cc-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:900px){
  #cc-share .cc-hero{grid-template-columns:1fr;text-align:left}
  #cc-share .cc-hero-art{display:none}
  #cc-share .cc-studio{grid-template-columns:1fr}
  #cc-share .cc-stage{position:relative;top:auto;padding:10px}
}
@media (max-width:520px){
  #cc-share .cc-upload-row{grid-template-columns:1fr}
  #cc-share .cc-wrap{padding-left:16px;padding-right:16px}
}
@media (prefers-reduced-motion:reduce){
  #cc-share *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
#cc-share [hidden]{display:none!important}
@media (max-width:520px){
  #cc-share .cc-drop{padding:12% 16px 0}
  #cc-share .cc-drop .inner{max-width:300px;padding:16px 16px 14px;border-radius:16px}
  #cc-share .cc-drop .icon{width:48px;height:48px;border-radius:14px;margin-bottom:10px}
  #cc-share .cc-drop h3{font-size:18px;margin-bottom:4px}
  #cc-share .cc-drop p{font-size:12.5px;line-height:1.4}
}