/* tp-integration.css — additive res24 harmonisation for the two Temporary-Protection page families
   (guide = lg- / living-guide, transition = tt- / lg-). Scoped under .okno-tp-res24 (added to <main>)
   so it overrides the page-local lg-/tt- stylesheets by specificity WITHOUT touching DOM, copy,
   anchors, PDFs, TP2AR or the shared shell. Uses ONLY sitewide shell + card-system tokens. */


/* clip minor pre-existing horizontal spill at narrow widths (inner scrollers unaffected) */
.okno-tp-res24{overflow-x:clip}

/* ---- typography (align to res24 child-page scale) ---- */
.okno-tp-res24 h1{font-size:34px;line-height:1.14;font-weight:800;overflow-wrap:break-word}
.okno-tp-res24 h2{font-size:25px;line-height:1.2;font-weight:800;color:var(--gs-navy);overflow-wrap:break-word}
.okno-tp-res24 h3{font-size:18px;font-weight:800;color:var(--gs-navy);overflow-wrap:break-word}
@media (max-width:640px){ .okno-tp-res24 h1{font-size:26px} .okno-tp-res24 h2{font-size:21px} }

/* ---- section rhythm + wrap ---- */
.okno-tp-res24 .lg-sec,.okno-tp-res24 .tt-wrapsec{padding-top:40px;padding-bottom:40px}
@media (max-width:640px){ .okno-tp-res24 .lg-sec,.okno-tp-res24 .tt-wrapsec{padding-top:30px;padding-bottom:30px} }

/* ---- buttons -> res24 (box-sizing so <a> heights are correct; teal fill / teal outline) ---- */
.okno-tp-res24 .lg-btn,.okno-tp-res24 .tt-widget-cta{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-weight:800;font-size:15px;border:1.5px solid transparent;white-space:normal;max-width:100%;text-decoration:none}
.okno-tp-res24 .lg-btn--primary{background:var(--gs-teal);color:#fff;border-color:var(--gs-teal)}
.okno-tp-res24 .lg-btn--primary:hover{background:var(--gs-teal-d);border-color:var(--gs-teal-d)}
.okno-tp-res24 .lg-btn--ghost{background:var(--ok-card-surface);color:var(--gs-teal);border-color:var(--gs-teal)}
.okno-tp-res24 .lg-btn--ghost:hover{background:var(--ok-card-surface-quiet)}
.okno-tp-res24 .lg-btn:focus-visible{outline:2px solid var(--gs-navy);outline-offset:2px}
@media (max-width:640px){ .okno-tp-res24 .lg-cta-row .lg-btn:not(.lg-btn--share){min-height:52px;width:100%} .okno-tp-res24 .lg-cta-row:not(.lg-hero__cta):not(.tt-hero__cta){display:flex;flex-direction:column;gap:12px} }

/* ---- cards -> res24 light card ---- */
.okno-tp-res24 .lg-qa__card,.okno-tp-res24 .lg-prob__card,.okno-tp-res24 .tt-proof__card,.okno-tp-res24 .tt-related__a{background:var(--ok-card-surface);border:1px solid var(--ok-card-line);border-radius:16px}
.okno-tp-res24 .lg-qa__card--primary{border-color:var(--gs-teal)}
.okno-tp-res24 .tt-related__a{display:flex;align-items:center;gap:10px;padding:16px 18px;color:var(--gs-navy);font-weight:700;text-decoration:none}
.okno-tp-res24 .tt-related__a:hover{border-color:var(--gs-teal);color:var(--gs-teal)}

/* ---- chip navigation -> res24 chips ---- */
.okno-tp-res24 .tt-chips{background:var(--ok-card-surface);border-bottom:1px solid var(--ok-card-line)}
.okno-tp-res24 .tt-chips a,.okno-tp-res24 .tt-chips button{border-radius:999px;font-weight:700;font-size:13.5px;color:var(--ok-muted);min-height:40px}
.okno-tp-res24 .tt-chips a.on,.okno-tp-res24 .tt-chips a[aria-current],.okno-tp-res24 .tt-chips .on{background:var(--ok-card-surface-quiet);color:var(--gs-teal)}
@media (max-width:640px){ .okno-tp-res24 .tt-chips a,.okno-tp-res24 .tt-chips button{min-height:44px} }

/* ---- accessible disclosures ---- */
.okno-tp-res24 .lg-acc{border:1px solid var(--ok-card-line);border-radius:12px;background:var(--ok-card-surface);overflow:hidden}
.okno-tp-res24 .lg-acc__h{font-weight:800;color:var(--gs-navy)}

/* ---- PDF / document-kit cards -> res24 download cards ---- */
.okno-tp-res24 .lg-pdf,.okno-tp-res24 .lg-kit{background:var(--ok-card-surface);border:1px solid var(--ok-card-line);border-radius:14px}
.okno-tp-res24 .lg-pdf--current{border-color:var(--gs-teal)}
.okno-tp-res24 .lg-pdf__dl,.okno-tp-res24 .lg-kit__dl{color:var(--gs-teal);font-weight:800;text-decoration:none}
.okno-tp-res24 .lg-pdf__dl:hover,.okno-tp-res24 .lg-kit__dl:hover{text-decoration:underline}
.okno-tp-res24 .lg-pdf__badge--current{background:var(--gs-teal);color:#fff}

/* ---- pricing -> res24 ---- */
.okno-tp-res24 .tt-price{background:var(--ok-card-surface);border:1px solid var(--ok-card-line);border-radius:16px}
.okno-tp-res24 .tt-price__v{color:var(--gs-teal);font-weight:800}

/* ---- tables -> res24 (readable, scroll inside container on narrow) ---- */
.okno-tp-res24 table{border-collapse:collapse;font-size:14.5px;max-width:100%}
.okno-tp-res24 table th{background:var(--ok-card-surface-quiet);color:var(--gs-navy);font-weight:800}
.okno-tp-res24 table th,.okno-tp-res24 table td{border-top:1px solid var(--ok-card-line);padding:11px 14px;text-align:left}
@media (max-width:768px){ .okno-tp-res24 .lg-sec table,.okno-tp-res24 .tt-wrapsec table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} }

/* ---- hero visual treatment (within existing DOM) ---- */
.okno-tp-res24 .lg-pic,.okno-tp-res24 .tt-hero__media img,.okno-tp-res24 .lg-hero__grid img{border-radius:18px}

/* ---- inserted shared review-widget section (res24 band) ---- */
.okno-tp-reviews{padding:40px 0;background:var(--ok-card-surface-quiet)}
.okno-tp-reviews .onh-wrap,.okno-tp-reviews__in{max-width:1120px;margin:0 auto;padding:0 20px}
.okno-tp-reviews h2{font-size:25px;font-weight:800;color:var(--gs-navy);margin:0 0 8px}
.okno-tp-reviews p{font-size:15px;color:var(--ok-ink);margin:0 0 16px;max-width:720px}
.okno-tp-reviews__w{margin:8px 0}
.okno-tp-reviews__fb{display:inline-block;margin-top:12px;color:var(--gs-teal);font-weight:800;text-decoration:none}
.okno-tp-reviews__fb:hover{text-decoration:underline}

/* ---- R1.1 hero contrast + utility actions ---- */
/* hero action wrappers are ROWS, never a solid panel over the photo */
.okno-tp-res24 .lg-hero__cta,.okno-tp-res24 .tt-hero__cta{background:none;border:0;padding:0;min-height:0;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* keep the two hero actions as separate controls: primary = shared CTA, secondary = shared outline (lg-btn--ghost already handled) */
/* Share = compact utility control: intrinsic width, >=44x44, never full-width */
.okno-tp-res24 .lg-btn--share{width:auto;min-width:44px;min-height:44px;padding:10px 14px;flex:0 0 auto;background:var(--ok-card-surface);color:var(--gs-teal);border:1.5px solid var(--ok-card-line);border-radius:12px}
.okno-tp-res24 .lg-btn--share:hover{background:var(--ok-card-surface-quiet)}

/* ---- R1.1-E: page-local sticky nav -> SHARED res24 chip family (lg-nav) ---- */
nav.lg-nav{background:var(--ok-card-surface);border-bottom:1px solid var(--ok-card-line);box-shadow:none;background-image:none;padding:0;margin:0;min-height:0}
.lg-nav .lg-nav__in{display:flex;align-items:center;gap:14px;max-width:1120px;margin:0 auto;padding:6px 20px;min-height:0}
.lg-nav .lg-nav__title{display:none}                 /* shared chip nav has no title label */
.lg-nav .lg-nav__ic{display:none}                    /* no pictograms in the chip row */
.lg-nav .lg-nav__row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:1 1 0;min-width:0;scroll-padding-inline:16px;margin:0;padding:0 16px 0 0}
.lg-nav .lg-nav__row::-webkit-scrollbar{display:none}
.lg-nav .lg-nav__a{flex:0 0 auto;display:inline-flex;align-items:center;gap:0;background:none;background-image:none;border:0;box-shadow:none;border-radius:999px;padding:0 13px;height:40px;min-height:0;line-height:1;font-family:inherit;font-weight:600;font-size:13.5px;color:var(--ok-muted);text-decoration:none;white-space:nowrap}
.lg-nav .lg-nav__a:hover{color:var(--ok-ink);background:none}
.lg-nav .lg-nav__a[aria-current="location"]{background:var(--ok-card-surface-quiet);color:var(--gs-teal)} /* R1.2: canonical active (JS sets aria-current="location") */
.lg-nav .lg-nav__a:focus-visible{outline:2px solid var(--gs-teal);outline-offset:2px}
.lg-nav .lg-nav__count,.lg-nav .lg-nav__marker,.lg-nav .lg-nav__prog{display:none} /* neutralize non-shared active markers */
@media (max-width:640px){ .lg-nav .lg-nav__in{gap:0;padding:6px 12px 6px 16px} .lg-nav .lg-nav__a{height:44px} .lg-nav .lg-nav__cta{display:none} nav.lg-nav{max-height:60px} }
/* reading progress: compositor-safe transform (no layout on scroll), fixed track height */
.lg-progress{height:3px}
.lg-progress__bar{width:100%;height:100%;transform-origin:left center;transform:scaleX(0);will-change:transform;background:var(--gs-teal)}
/* stable anchor landing below the sticky header+nav (native + JS), no re-jump */
html{scroll-padding-top:104px}
@media(max-width:640px){html{scroll-padding-top:92px}}