/* ================= PLUGIN STYLESHEET: assets/intake.css ================= */
/* =====================================================================
   Capecchi Legal · Citizenship Document Intake
   Stylesheet v3

   Everything is namespaced under .cli-intake so the theme cannot
   collide with it, and it cannot leak into the theme.

   Colour, in short
   ----------------
   One text colour. Every word the applicant reads is --cli-ink, so the
   page does not drift between black and grey; hierarchy is carried by
   size, weight and spacing instead.

   Capecchi navy (--cli-blue) is the interactive colour: primary buttons,
   the step they are on, a chosen answer, focus rings. The firm's gold
   stays as a graphic accent only - hairlines and the marker inside a
   chosen answer - never as body text.

   Semantic colours stay separate from the brand, because "I have it",
   "help me get it" and "critical" have to read as states whatever the
   theme does.
   ===================================================================== */

.cli-intake{
  /* --- brand ------------------------------------------------------- */
  /* Capecchi navy, pinned. White text sits on this colour, so it cannot be
     left to a theme global: a site whose primary is pale would render a
     white-on-white button. To follow Elementor instead, change this one
     line to var(--e-global-color-primary, #161B45) and check the contrast.
     Fonts and the gold accent below do follow the theme. */
  --cli-blue:   #161B45;
  --cli-blue-2: #0E1130;                  /* pressed / hover */
  --cli-blue-t: #ECEEF6;                  /* tint behind the active step */
  --cli-accent: var(--e-global-color-accent, #9A7B3C);

  /* --- one colour for every word ----------------------------------- */
  --cli-ink: #14161B;

  --cli-font-display: var(--e-global-typography-primary-font-family, Georgia), serif;
  --cli-font-body:    var(--e-global-typography-text-font-family, system-ui), sans-serif;
  --cli-font-cta:     var(--e-global-typography-accent-font-family, system-ui), sans-serif;

  /* --- semantic state colours, deliberately NOT brand --------------- */
  --cli-critical:  #96302A;
  --cli-critical-t:#F5E7E5;
  --cli-ok:        #215F44;
  --cli-ok-t:      #E4EFE8;
  --cli-pending:   #8F5F10;
  --cli-pending-t: #F7EEDD;

  /* --- surfaces ----------------------------------------------------- */
  --cli-paper:  #FFFFFF;
  --cli-shade:  #F6F7FA;
  --cli-line:   rgba(20,22,27,.20);
  --cli-line-2: rgba(20,22,27,.10);
  --cli-r: 3px;
  --cli-pad: 36px;        /* panel side padding; the sticky meter bleeds to it */
  --cli-sticky-top: 0px;  /* raise this if the host theme has a fixed header */

  font-family: var(--cli-font-body);
  color: var(--cli-ink);
  font-size: 16px;
  line-height: 1.55;
  container-type: inline-size;
  /* Nothing inside may push the page sideways. clip, not hidden, so the
     sticky meter still sticks to the viewport. */
  max-width: 100%;
  overflow-x: clip;
}

/* reset only inside our scope */
.cli-intake *,.cli-intake *::before,.cli-intake *::after{box-sizing:border-box}
.cli-intake p{margin:0 0 14px}
.cli-intake h2,.cli-intake h3,.cli-intake h4{
  font-family:var(--cli-font-display);
  color:var(--cli-ink);
  font-weight:400;
  line-height:1.14;
  margin:0 0 12px;
  text-transform:none;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.cli-intake h2{font-size:clamp(24px,3.4vw,34px)}
.cli-intake h3{font-size:21px}
.cli-intake ul,.cli-intake ol{margin:0;padding:0;list-style:none}
.cli-intake button{font-family:inherit;color:var(--cli-ink)}
/* Long names, places and email addresses must never widen a column. */
.cli-intake p,.cli-intake li,.cli-intake label,.cli-intake strong,.cli-intake em,
.cli-intake h2,.cli-intake h3,.cli-intake .cli-opt,.cli-intake .cli-part-t{
  overflow-wrap:anywhere;
}

/* ---------- layout ---------- */
.cli-shell{display:grid;grid-template-columns:210px minmax(0,1fr);gap:40px;align-items:start}
.cli-shell>*{min-width:0}
.cli-rail{position:sticky;top:120px;min-width:0}
.cli-stage{min-width:0}

.cli-lang{display:flex;gap:6px;margin-bottom:20px}
.cli-lang button{font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.1em;
  padding:5px 11px;border:1px solid var(--cli-line);background:var(--cli-paper);
  color:var(--cli-ink);border-radius:2px;cursor:pointer;line-height:1.4}
.cli-lang button:hover{border-color:var(--cli-blue)}
.cli-lang button[aria-pressed="true"]{background:var(--cli-blue);color:#fff;border-color:var(--cli-blue)}

/* ---------- progress rail ----------
   Bigger than it was, and the step the applicant is on is unmistakable:
   navy bar, navy number, tinted ground, bold label. */
.cli-rail-t{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cli-ink);margin-bottom:10px}
.cli-rail ol{display:flex;flex-direction:column;gap:2px}
.cli-rail li{display:flex;gap:10px;align-items:baseline;
  padding:10px 12px;font-size:15px;line-height:1.3;color:var(--cli-ink);
  border-radius:var(--cli-r);border-left:3px solid transparent}
.cli-rail li .cli-n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;width:18px;flex:none;font-weight:600}
.cli-rail li.is-on{background:var(--cli-blue-t);border-left-color:var(--cli-blue);font-weight:700}
.cli-rail li.is-on .cli-n{color:var(--cli-blue)}
.cli-rail li.is-done .cli-n{color:var(--cli-ok)}

.cli-panel{background:var(--cli-paper);border:1px solid var(--cli-line);
  border-radius:var(--cli-r);padding:34px var(--cli-pad);min-width:0}
.cli-eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--cli-ink);margin-bottom:12px}
.cli-lede{font-size:17px;max-width:64ch;margin:0 0 24px}
.cli-rule{border:0;border-top:1px solid var(--cli-line-2);margin:28px 0}
.cli-hint{font-size:13.5px;font-style:normal}

/* ---------- questions ---------- */
.cli-q{margin:0 0 30px}
.cli-q-l{font-size:17px;font-weight:700;margin-bottom:5px;max-width:58ch}
.cli-q-h{font-size:14.5px;margin-bottom:14px;max-width:66ch}
.cli-multi{margin-left:10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--cli-blue)}
.cli-opts{display:grid;gap:8px}
/* min() so a narrow column can never be forced wider than its container:
   that is what pushed the page sideways on a phone. */
.cli-opts.cli-2{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.cli-opt{
  display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;min-width:0;
  background:var(--cli-paper);border:1px solid var(--cli-line);border-radius:var(--cli-r);
  padding:13px 16px;font-size:15px;line-height:1.35;cursor:pointer;
  border-left:3px solid transparent;
  transition:border-color .13s,background .13s;
}
.cli-opt:hover{border-color:var(--cli-blue)}
.cli-opt:focus-visible{outline:2px solid var(--cli-blue);outline-offset:2px}
.cli-opt .cli-tick{width:16px;height:16px;flex:none;border:1px solid var(--cli-line);
  border-radius:50%;margin-top:2px}
.cli-opt .cli-opt-t{min-width:0;text-wrap:pretty}
.cli-opt[aria-pressed="true"]{border-color:var(--cli-blue);border-left-color:var(--cli-blue);
  background:var(--cli-blue-t);font-weight:600}
.cli-opt[aria-pressed="true"] .cli-tick{background:var(--cli-accent);border-color:var(--cli-accent);
  box-shadow:inset 0 0 0 2.5px #fff}
.cli-opt small{display:block;font-size:13.5px;margin-top:3px;line-height:1.45;font-weight:400}

/* ---------- people ---------- */
.cli-person{border:1px solid var(--cli-line);border-radius:var(--cli-r);
  margin-bottom:10px;background:var(--cli-paper);min-width:0}
.cli-person-h{display:flex;gap:10px;align-items:center;padding:12px 15px;
  border-bottom:1px solid var(--cli-line-2);flex-wrap:wrap}
.cli-person-h .cli-pn{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  color:var(--cli-blue);border:1px solid var(--cli-blue);border-radius:2px;padding:1px 6px;font-weight:600}
.cli-person-h .cli-pl{font-weight:700;font-size:15px}
.cli-person-h .cli-flag{margin-left:6px}
.cli-fields{padding:15px;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.cli-f{min-width:0}
.cli-f label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:5px;font-weight:600}
.cli-f input,.cli-f select,.cli-f textarea{
  width:100%;max-width:100%;font:inherit;font-size:15px;padding:9px 10px;
  border:1px solid var(--cli-line);border-radius:2px;
  background:var(--cli-paper);color:var(--cli-ink)}
.cli-f select{padding-right:26px;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23161B45' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:9px}
.cli-f textarea{line-height:1.5;resize:vertical;min-height:104px}
.cli-f input:focus,.cli-f select:focus,.cli-f textarea:focus{
  outline:none;border-color:var(--cli-blue);box-shadow:0 0 0 2px var(--cli-blue-t)}
.cli-f.cli-wide{grid-column:1/-1}
.cli-f .cli-hint{margin-top:5px}
.cli-count{min-height:1em}

/* ---------- documents ---------- */
.cli-group{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;margin:26px 0 9px;padding-bottom:6px;
  border-bottom:1px solid var(--cli-accent);font-weight:600}
.cli-group:first-child{margin-top:0}
.cli-doc{border:1px solid var(--cli-line);border-radius:var(--cli-r);padding:14px 16px;
  margin-bottom:7px;background:var(--cli-paper);border-left:3px solid transparent;min-width:0}
.cli-doc.set-have{border-left-color:var(--cli-ok)}
.cli-doc.set-help{border-left-color:var(--cli-pending)}
.cli-doc.set-na{background:var(--cli-shade)}
.cli-doc-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.cli-doc-id{flex:1 1 340px;min-width:0}
.cli-doc-w{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase;margin-bottom:4px;font-weight:600}
.cli-doc-t{font-weight:700;font-size:15.5px;line-height:1.35}
.cli-doc-y{font-size:14px;margin:8px 0 0;max-width:74ch}
.cli-keep{font-size:13.5px;margin:9px 0 0;padding:8px 12px;border-radius:2px;
  background:var(--cli-ok-t);border-left:3px solid var(--cli-ok);max-width:74ch}
.cli-keep[hidden]{display:none}
.cli-flag{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  border:1px solid var(--cli-critical);color:var(--cli-critical);background:var(--cli-critical-t);
  border-radius:2px;padding:1px 5px;margin-left:8px;vertical-align:2px;white-space:nowrap}

.cli-seg{display:flex;border:1px solid var(--cli-line);border-radius:2px;overflow:hidden;flex:none}
.cli-seg button{font-size:13.5px;padding:8px 13px;background:var(--cli-paper);border:0;
  border-left:1px solid var(--cli-line);cursor:pointer;white-space:nowrap}
.cli-seg button:first-child{border-left:0}
.cli-seg button:hover{background:var(--cli-blue-t)}
.cli-seg button:focus-visible{outline:2px solid var(--cli-blue);outline-offset:-2px}
.cli-seg button[aria-pressed="true"]{background:var(--cli-blue);color:#fff;font-weight:600}
.cli-seg button.cli-h[aria-pressed="true"]{background:var(--cli-ok);color:#fff}
.cli-seg button.cli-p[aria-pressed="true"]{background:var(--cli-pending);color:#fff}

/* ---------- meter ---------- */
/* All the spacing lives in padding, never margin: a margin here is a transparent
   window and the cards scrolling underneath show through it. */
.cli-meter{position:sticky;top:var(--cli-sticky-top);z-index:3;background:var(--cli-paper);
  padding:14px var(--cli-pad) 16px;margin:0 calc(-1 * var(--cli-pad));
  border-bottom:1px solid var(--cli-line-2);box-shadow:0 8px 14px -12px rgba(20,22,27,.4)}
.cli-docs .cli-group:first-child{margin-top:18px}
.cli-meter-r{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  align-items:baseline;margin-bottom:8px}
.cli-meter-n{font-size:15px;font-weight:700}
.cli-meter-s{font-size:13.5px}
.cli-bar{height:5px;background:var(--cli-line-2);border-radius:99px;overflow:hidden}
.cli-bar i{display:block;height:100%;width:0;background:var(--cli-blue);transition:width .35s ease}

/* ---------- summary lists ---------- */
.cli-box{border:1px solid var(--cli-line);border-radius:var(--cli-r);background:var(--cli-paper);
  padding:20px 22px;margin-bottom:14px;min-width:0}
.cli-sum li{padding:8px 0;border-top:1px solid var(--cli-line-2);display:flex;gap:12px;
  align-items:baseline;font-size:15px}
.cli-sum li:first-child{border-top:0}
.cli-mk{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  width:76px;flex:none;padding-top:2px}
.cli-mk.have{color:var(--cli-ok)}
.cli-mk.help{color:var(--cli-pending)}
.cli-mk.todo{color:var(--cli-critical)}

/* ---------- buttons and notes ---------- */
.cli-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px;padding-top:22px;
  border-top:1px solid var(--cli-accent)}
.cli-btn{
  font-family:var(--cli-font-cta);font-size:15px;font-weight:600;letter-spacing:.01em;
  padding:12px 24px;border-radius:2px;cursor:pointer;border:1px solid var(--cli-blue);
  background:var(--cli-blue);color:#fff;text-decoration:none;display:inline-block;
  transition:background .13s,border-color .13s;
}
.cli-btn:hover{background:var(--cli-blue-2);border-color:var(--cli-blue-2);color:#fff}
.cli-btn:active{background:var(--cli-blue-2);border-color:var(--cli-blue-2)}
.cli-btn:disabled{opacity:.35;cursor:not-allowed}
.cli-btn:focus-visible{outline:2px solid var(--cli-blue);outline-offset:2px}
.cli-btn.cli-ghost{background:transparent;color:var(--cli-blue);border-color:var(--cli-line)}
.cli-btn.cli-ghost:hover{background:var(--cli-blue-t);border-color:var(--cli-blue);color:var(--cli-blue)}

.cli-note{border-left:3px solid var(--cli-accent);padding:4px 0 4px 16px;font-size:14px;
  max-width:70ch;margin:18px 0}
.cli-legal{font-size:13px;line-height:1.6;margin-top:26px;padding-top:18px;
  border-top:1px solid var(--cli-line-2);max-width:80ch}
.cli-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  background:var(--cli-blue);color:#fff;padding:12px 20px;border-radius:2px;
  font-size:14.5px;z-index:9999;max-width:calc(100vw - 32px)}
.cli-linkbtn{display:inline-flex;align-items:center;font-size:14.5px;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:12px 4px}
.cli-linkbtn:hover{color:var(--cli-blue)}

/* ---------- resume bar ---------- */
.cli-resume{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
  border:1px solid var(--cli-line);border-left:4px solid var(--cli-accent);
  border-radius:var(--cli-r);padding:15px 18px;margin-bottom:18px;background:var(--cli-shade);
}
.cli-resume strong{font-size:15.5px}
.cli-resume-a{display:flex;gap:8px;flex-wrap:wrap}
.cli-resume .cli-btn{padding:9px 17px;font-size:14px}

/* ---------- the file to send ---------- */
.cli-warnbox{
  border:1px solid var(--cli-pending);border-left:4px solid var(--cli-pending);
  border-radius:var(--cli-r);padding:15px 18px;margin-bottom:14px;
  background:var(--cli-pending-t);font-size:15px;
}
.cli-warnbox strong{display:block;margin-bottom:3px}
.cli-dl{border-left:4px solid var(--cli-blue)}
.cli-part{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid var(--cli-line);border-radius:2px;padding:14px 16px;
  background:var(--cli-shade);min-width:0;
}
.cli-part>div{min-width:0}
.cli-part-t{font-weight:700;font-size:15px}
.cli-part .cli-btn{padding:10px 20px}
.cli-part-a{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
#cli-send-msg:not(:empty){margin-top:16px}
/* honeypot: off-screen for people, irresistible to form-filling bots */
.cli-hp{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}

/* =====================================================================
   Narrow. Two identical blocks on purpose: the container query handles a
   narrow column inside a wide window, the media query handles a phone
   (and browsers without container queries). A container cannot restyle
   itself, so anything set on .cli-intake lives in the media block only.
   ===================================================================== */
@container (max-width: 820px){
  .cli-shell{grid-template-columns:minmax(0,1fr);gap:22px}
  .cli-rail{position:static}
  .cli-rail ol{gap:1px}
  .cli-rail li{padding:9px 11px;font-size:14.5px}
  .cli-panel{padding:24px 18px}
  .cli-meter{padding-left:18px;padding-right:18px;margin-left:-18px;margin-right:-18px}
  .cli-doc-top{flex-direction:column}
  .cli-doc-id{flex:0 1 auto}
  /* stack the three states so the labels stay whole and the targets stay tappable */
  .cli-seg{flex:0 1 auto;width:100%;flex-direction:column}
  .cli-seg button{border-left:0;border-top:1px solid var(--cli-line);padding:11px 13px;text-align:left}
  .cli-seg button:first-child{border-top:0}
  .cli-part-a{justify-content:flex-start}
  .cli-part .cli-btn,.cli-part-a .cli-btn{flex:1 1 auto}
  .cli-actions .cli-btn{flex:1 1 auto;text-align:center}
}
@media (max-width:820px){
  .cli-intake{--cli-pad:18px}
  .cli-shell{grid-template-columns:minmax(0,1fr);gap:22px}
  .cli-rail{position:static}
  .cli-rail ol{gap:1px}
  .cli-rail li{padding:9px 11px;font-size:14.5px}
  .cli-panel{padding:24px var(--cli-pad)}
  .cli-doc-top{flex-direction:column}
  .cli-doc-id{flex:0 1 auto}
  .cli-seg{flex:0 1 auto;width:100%;flex-direction:column}
  .cli-seg button{border-left:0;border-top:1px solid var(--cli-line);padding:11px 13px;text-align:left}
  .cli-seg button:first-child{border-top:0}
  .cli-part-a{justify-content:flex-start}
  .cli-part .cli-btn,.cli-part-a .cli-btn{flex:1 1 auto}
  .cli-actions .cli-btn{flex:1 1 auto;text-align:center}
}
@media (prefers-reduced-motion:reduce){.cli-intake *{transition:none!important;animation:none!important}}
@media print{
  .cli-rail,.cli-actions,.cli-meter,.cli-resume,.cli-lang{display:none}
  .cli-panel{border:0;padding:0}
  .cli-shell{grid-template-columns:1fr}
}