/* cit-hub.css — Citizenship Hub R2. Layered on shared shell + card-system + typography (res24).
   Global OKNO tokens only (shell --gs-* + card-system --ok-*). No new palette/gradient/font/button family. */
.cit{--cit-r-l:18px;--cit-r-m:var(--ok-card-radius);--cit-elev:var(--ok-card-shadow-hover)}
.onh-wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.cit-sec{padding:52px 0}
.cit-sec.cit-band{background:var(--ok-card-surface-quiet)}
.cit-sec--tight{padding:24px 0}
.cit h1,.cit h2,.cit h3,.cit h4,.cit-h1,.cit-h2,.cit-p,.cit-list li{overflow-wrap:break-word;word-break:break-word}
.cit-h1{font-size:34px;line-height:1.14;font-weight:800;color:var(--gs-navy);margin:0 0 16px}
.cit-h2{font-size:25px;line-height:1.2;font-weight:800;color:var(--gs-navy);margin:0 0 14px}
.cit-p{font-size:15px;line-height:1.62;color:var(--ok-ink);margin:0 0 12px}
.cit-lead{font-size:17px;line-height:1.55;color:var(--ok-ink);margin:0 0 14px;max-width:640px}
.cit-status{font-size:13px;color:var(--ok-muted);margin:14px 0 0}
.cit-list{margin:0 0 12px;padding-left:20px}
.cit-list li{font-size:14.5px;line-height:1.55;color:var(--ok-ink);margin:0 0 5px}
.cit-steps{margin:0 0 12px;padding-left:22px}
.cit-steps li{font-size:14.5px;line-height:1.55;color:var(--ok-ink);margin:0 0 7px}
.cit-note{background:var(--ok-card-surface-quiet);border:1px solid var(--ok-card-line);border-left:3px solid var(--gs-teal);border-radius:var(--cit-r-m);padding:12px 16px;font-size:14px;line-height:1.55;color:var(--ok-ink);margin:14px 0}
.cit-inlink{margin:10px 0 0}
.cit-link{color:var(--gs-teal);font-weight:800;text-decoration:none}
.cit-link:hover{text-decoration:underline}

/* buttons — reuse the existing OKNO button family (same tokens/geometry) */
.cit-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:11px 22px;border-radius:12px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;text-decoration:none;border:1.5px solid transparent;white-space:normal;max-width:100%}
.cit-btn--primary{background:var(--gs-teal);color:#fff}
.cit-btn--primary:hover{background:var(--gs-teal-d)}
.cit-btn--ghost{background:var(--ok-card-surface);color:var(--gs-teal);border-color:var(--gs-teal)}
.cit-btn--ghost:hover{background:var(--ok-card-surface-quiet)}
.cit-btn:focus-visible{outline:2px solid var(--gs-navy);outline-offset:2px}
.cit-actions{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 0}

/* breadcrumb */
.cit-crumb{padding:14px 0 0;font-size:13px;color:var(--ok-muted)}
.cit-crumb a{color:var(--gs-teal);text-decoration:none}
.cit-crumb a:hover{text-decoration:underline}
.cit-crumb span{color:var(--ok-muted)}

/* anchor offset = real global header + sticky nav + progress (vars set from measured heights) */
html{scroll-padding-top:calc(var(--cit-hdh,61px) + var(--cit-navh,57px) + 8px)}
/* R2.2: hide the shared bottom action dock ONLY while the citizenship helper modal is open (scoped) */
body.cit-modal-open .okno-fa{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
/* R2.2: dock stays visible through the page end; reserve footer bottom space so the fixed corner dock
   (right:20 bottom:26, ~172px tall) never covers footer links or copyright */
.okno-gs-ft{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
@media (min-width:768px){.okno-gs-ft{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}}
/* sticky chip nav — sticks directly BELOW the sticky global header (top = measured header height) */
.cit-nav{position:sticky;top:var(--cit-hdh,61px);z-index:40;background:var(--ok-card-surface);border-bottom:1px solid var(--ok-card-line)}
.cit-nav .onh-wrap{position:relative}
.cit-nav__row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:16px;padding:8px 16px 8px 0;-webkit-overflow-scrolling:touch}
.cit-nav__row::-webkit-scrollbar{display:none}
/* identical geometry active/inactive (box-sizing + 1px border on both) so the active state never moves layout */
.cit-nav__a{box-sizing:border-box;flex:0 0 auto;display:inline-flex;align-items:center;height:40px;padding:0 13px;border:1px solid transparent;border-radius:999px;font-size:13.5px;font-weight:600;line-height:1;color:var(--ok-muted);text-decoration:none;white-space:nowrap}
.cit-nav__a:hover{color:var(--ok-ink)}
/* active chip: approved accent-subtle surface + accent text + accent border + stronger weight (no new colors) */
.cit-nav__a[aria-current="location"]{background:var(--ok-card-accent);color:var(--gs-teal);border-color:var(--gs-teal);font-weight:700}
.cit-nav__a:focus-visible{outline:2px solid var(--gs-teal);outline-offset:2px}
.cit-nav__progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--gs-teal);transform-origin:left;transform:scaleX(0)}

/* hero */
.cit-hero{padding:26px 0 34px}
.cit-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.cit-hero__copy{min-width:0}
.cit-frame{border:1px solid var(--ok-card-line);border-radius:var(--cit-r-l);overflow:hidden;box-shadow:var(--cit-elev);background:var(--ok-card-surface-quiet)}
.cit-hero__pic{display:block;width:100%}
.cit-hero__pic img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}

/* editorial joined module (2026 + documents) */
.cit-edmod{display:grid;grid-template-columns:5fr 7fr;background:var(--ok-card-surface);border:1px solid var(--ok-card-line);border-radius:var(--cit-r-l);overflow:hidden;box-shadow:var(--cit-elev);align-items:stretch}
.cit-edmod__media{min-width:0;background:var(--ok-card-surface-quiet);display:flex}
.cit-edmod__pic{display:block;width:100%;height:100%}
.cit-edmod__pic img{width:100%;height:100%;object-fit:cover;display:block}
.cit-edmod__body{min-width:0;padding:26px 28px}
.cit-edmod__body--rail{border-left:3px solid var(--gs-teal)}
.cit-docgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 22px;margin:6px 0 10px}
.cit-docgroup__h{font-size:15px;font-weight:800;color:var(--gs-navy);margin:0 0 4px}
.cit-docgroup .cit-list{margin:0}

/* helper bar */
.cit-helperbar{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--ok-card-accent);border:1px solid var(--ok-card-line);border-left:3px solid var(--gs-teal);border-radius:var(--cit-r-l);padding:20px 24px;box-shadow:var(--cit-elev)}
.cit-helperbar .cit-h2{margin:0 0 6px;font-size:20px}
.cit-helperbar .cit-p{margin:0}
.cit-helperbar__cta{flex:0 0 auto}

/* modal */
.cit-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.cit-modal[hidden]{display:none}
.cit-modal__backdrop{position:absolute;inset:0;background:var(--gs-navy);opacity:.55}
.cit-modal__box{position:relative;background:var(--ok-card-surface);border-radius:var(--cit-r-l);padding:26px;max-width:520px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--cit-elev)}
.cit-modal__x{position:absolute;right:14px;top:12px;background:none;border:none;font-size:18px;color:var(--ok-muted);cursor:pointer;line-height:1}
.cit-modal__q{margin:0 0 16px}
.cit-modal__qh{font-size:15px;font-weight:800;color:var(--gs-navy);margin:0 0 8px}
.cit-modal__opts{display:flex;flex-direction:column;gap:8px}
.cit-modal__opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid var(--ok-card-line);border-radius:var(--cit-r-m);font-size:14.5px;color:var(--ok-ink);cursor:pointer}
.cit-modal__opt:hover{border-color:var(--gs-teal)}
.cit-modal__result{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 14px}
.cit-modal__note{font-size:13px;color:var(--ok-muted);margin:6px 0 0}

/* four direction cards */
.cit-dirs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:6px 0 22px}
.cit-dir{display:flex;flex-direction:column;background:var(--ok-card-surface);border:1px solid var(--ok-card-line);border-radius:var(--cit-r-l);overflow:hidden;text-decoration:none;box-shadow:var(--cit-elev);transition:border-color .15s}
.cit-dir:hover{border-color:var(--gs-teal)}
.cit-dir:focus-visible{outline:2px solid var(--gs-teal);outline-offset:2px}
.cit-dir__media{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--ok-card-surface-quiet)}
.cit-dir__pic{display:block;width:100%;height:100%}
.cit-dir__pic img{width:100%;height:100%;object-fit:cover;display:block}
.cit-dir__b{display:flex;flex-direction:column;gap:6px;padding:16px 18px;flex:1}
.cit-dir__h{font-size:16px;font-weight:800;color:var(--gs-navy);line-height:1.28}
.cit-dir:hover .cit-dir__h{color:var(--gs-teal)}
.cit-dir__p{font-size:13.5px;line-height:1.5;color:var(--ok-ink)}
.cit-dir__arrow{margin-top:auto;color:var(--gs-teal);font-weight:800;font-size:16px}

/* full catalogue */
.cit-catalogue{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cit-ground{background:var(--ok-card-surface);border:1px solid var(--ok-card-line);border-radius:var(--cit-r-l);padding:22px 24px}
.cit-ground--other{grid-column:1/-1;background:var(--ok-card-surface-quiet)}
.cit-ground__h{font-size:18px;font-weight:800;color:var(--gs-navy);margin:0 0 10px;line-height:1.28}
.cit-ground__sh{font-size:15px;font-weight:800;color:var(--gs-navy);margin:14px 0 6px}
.cit-ground__foot{margin-top:14px}

/* submitted-application doors */
.cit-modbox{background:var(--ok-card-surface);border:1px solid var(--ok-card-line);border-radius:var(--cit-r-l);padding:28px}
.cit-band .cit-modbox{background:var(--ok-card-surface)}
.cit-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 14px}
.cit-door{display:flex;flex-direction:column;background:var(--ok-card-surface-quiet);border:1px solid var(--ok-card-line);border-radius:var(--cit-r-m);padding:18px 20px}
.cit-door__h{font-size:16px;font-weight:800;color:var(--gs-navy);margin:0 0 8px}
.cit-door__b{flex:1}
.cit-door__foot{margin-top:12px}

/* what to check */
.cit-checkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cit-check{background:var(--ok-card-surface);border:1px solid var(--ok-card-line);border-radius:var(--cit-r-m);padding:18px 20px}
.cit-check__h{font-size:15.5px;font-weight:800;color:var(--gs-teal);margin:0 0 6px}
.cit-check .cit-p{font-size:14px;margin:0}

/* services */
.cit-svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cit-svc{display:flex;flex-direction:column;background:var(--ok-card-surface);border:1px solid var(--ok-card-line);border-radius:var(--cit-r-l);padding:20px 22px}
.cit-svc__h{font-size:16.5px;font-weight:800;color:var(--gs-navy);margin:0 0 8px;line-height:1.28}
.cit-svc .cit-p{font-size:14px}
.cit-svc__foot{margin-top:auto;padding-top:12px}

/* obstacles */
.cit-obst{background:var(--ok-card-surface);border:1px solid var(--ok-card-line);border-radius:var(--cit-r-l);padding:22px 26px}
.cit-obst .cit-list{margin:0;columns:2;column-gap:32px}

/* reviews */
.cit-reviews{margin:12px 0}

/* faq */
.cit-faqs{display:flex;flex-direction:column;gap:10px}
.cit-faq{border:1px solid var(--ok-card-line);border-radius:var(--cit-r-m);background:var(--ok-card-surface);overflow:hidden}
.cit-faq>summary{list-style:none;cursor:pointer;padding:15px 44px 15px 18px;font-size:15.5px;font-weight:800;color:var(--gs-navy);position:relative}
.cit-faq>summary::-webkit-details-marker{display:none}
.cit-faq>summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid var(--ok-muted);border-bottom:2px solid var(--ok-muted);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.cit-faq[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.cit-faq__a{padding:2px 18px 16px}
.cit-faq__a .cit-p{font-size:14.5px;margin:0}

/* final accent panel */
.cit-final{background:var(--gs-navy);border-radius:22px;padding:40px;color:#fff}
.cit-final .cit-h2{color:#fff}
.cit-final .cit-p,.cit-final .cit-list li{color:rgba(255,255,255,.9)}
.cit-final__actions{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 0}
.cit-final .cit-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.cit-final .cit-btn--ghost:hover{background:rgba(255,255,255,.9)}

/* responsive */
@media (max-width:1000px){
  .cit-hero__grid{grid-template-columns:1fr;gap:22px}
  /* mobile first fold: hero copy (H1 + lead + CTAs + status) before the image */
  .cit-hero__copy{order:0}
  .cit-hero__media{order:1;margin-top:4px}
  .cit-edmod{grid-template-columns:1fr}
  .cit-dirs{grid-template-columns:repeat(2,1fr)}
  .cit-catalogue{grid-template-columns:1fr}
  .cit-doors{grid-template-columns:1fr}
  .cit-checkgrid,.cit-svcgrid{grid-template-columns:repeat(2,1fr)}
  .cit-docgrid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cit-sec{padding:36px 0}
  .cit-h1{font-size:26px}.cit-h2{font-size:21px}.cit-lead{font-size:15.5px}
  .cit-dirs{grid-template-columns:1fr}
  .cit-checkgrid,.cit-svcgrid{grid-template-columns:1fr}
  .cit-obst .cit-list{columns:1}
  .cit-modbox,.cit-ground,.cit-edmod__body{padding:18px}
  .cit-final{padding:26px 20px}
  /* reserve room so the fixed corner action dock (right:20 bottom:26, ~172px tall) never covers the
     final CTA buttons; footer stays clear because the shell hides the dock near .okno-gs-ft */
  .cit-sec#final{padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}
  .cit-final__actions{padding-bottom:56px}
  .cit-helperbar{padding:18px}
  .cit-actions .cit-btn,.cit-final__actions .cit-btn{width:100%}
  .cit-nav__a{height:44px}
  .cit-nav__row{padding-top:7px;padding-bottom:7px}
}