/* ===========================================================
   Serka Law — SITE-WIDE cinematic CONTENT skin (inner pages)
   Loaded after chrome.css on every non-homepage front-end page.
   Re-expresses the existing dark-only `.sg-*` content design in
   the cinematic FLIPPING tokens (--glass/--text/--muted/--line/
   --gold[-2]/--serif from chrome.css :root + html.light), so:
     • DARK mode stays visually identical (cream/gold/serif),
     • LIGHT mode now adapts (no more black boxes / invisible text),
     • the cinematic field shows through cards (glass depth),
     • the legacy link-accent bleed becomes gold site-wide.
   Scope: body.serka-cine-chrome (inner only — homepage untouched).
   Source classes verified live via CDP on /about-us/, /ru/,
   /service/citizenship-by-investment/ (2026-06-13).
   Rollback: dequeue serka-cine-content / delete this file.
   =========================================================== */

/* ---------- SITE-WIDE SURFACE GUARD → the cinematic field stays visible ---------- */
body.serka-cine-chrome.serka-skinned:not(.wp-admin),
body.serka-cine-chrome.serka-skinned:not(.wp-admin) #page,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .site,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .site-main,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .content-area,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) main,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .page-content,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .elementor,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .elementor-section,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .elementor-top-section,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .elementor-inner-section,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .elementor-container,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .elementor-column,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .elementor-widget-wrap,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .e-con,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .e-con-inner{
  background-color:transparent!important;
}

/* ---------- PANELS / CARDS → adaptive glass (matches homepage card) ---------- */
body.serka-cine-chrome .sg-card{
  background:var(--glass)!important;
  border:1px solid var(--line)!important;
  border-radius:15px!important;
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
html.light body.serka-cine-chrome .sg-card{box-shadow:0 10px 30px rgba(120,90,40,.10)}
/* gold-tinted soft card keeps its accent, adapts border/shadow */
body.serka-cine-chrome .sg-card.sg-soft{background:rgba(194,154,86,.10)!important;border-color:var(--line)!important}
html.light body.serka-cine-chrome .sg-card.sg-soft{background:rgba(134,100,31,.10)!important}
/* subtle fact / table cells → lighter glass token (avoids muddy glass-on-glass) */
body.serka-cine-chrome .sg-fact-card,
body.serka-cine-chrome .sg-table-card{
  background:var(--glass-2)!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
}

/* ---------- TYPOGRAPHY → flipping tokens (force over hardcoded cream) ---------- */
/* strong / heading / value text → --text (cream in dark, ink in light) */
body.serka-cine-chrome .sg-h1,
body.serka-cine-chrome .sg-h2,
body.serka-cine-chrome .sg-h3,
body.serka-cine-chrome .sg-card h2,
body.serka-cine-chrome .sg-card h3,
body.serka-cine-chrome .sg-fact-value,
body.serka-cine-chrome .sg-table-value,
body.serka-cine-chrome .sg-card strong,
body.serka-cine-chrome .sg-card b{color:var(--text)!important}
body.serka-cine-chrome .sg-h1,
body.serka-cine-chrome .sg-h2,
body.serka-cine-chrome .sg-h3{font-family:var(--serif)!important}
/* body / secondary text → --muted (readable both modes; NOT gold — long legal copy) */
body.serka-cine-chrome .sg-lead,
body.serka-cine-chrome .sg-p,
body.serka-cine-chrome .sg-meta,
body.serka-cine-chrome .sg-fact-label,
body.serka-cine-chrome .sg-table-label,
body.serka-cine-chrome .sg-table-item,
body.serka-cine-chrome .sg-list li,
body.serka-cine-chrome .sg-card p,
body.serka-cine-chrome .sg-soft p{color:var(--muted)!important}
/* eyebrow / kicker label → gold */
body.serka-cine-chrome .sg-eyebrow,
body.serka-cine-chrome .sg-kicker{color:var(--gold)!important}

/* ---------- LINKS -> gold (kills legacy accent bleed site-wide) ---------- */
body.serka-cine-chrome .elementor a:not(.sg-btn):not(.elementor-button):not(.sg-btn--primary):not(.sg-btn--ghost){
  color:var(--gold-2)!important;text-decoration:none;transition:color .2s;
}
body.serka-cine-chrome .elementor a:not(.sg-btn):not(.elementor-button):hover{color:var(--gold)!important}
/* byline / meta links keep the muted tone */
body.serka-cine-chrome .sg-meta a,
body.serka-cine-chrome .sg-byline a{color:var(--gold-2)!important}

/* ---------- BUTTONS → gold gradient (primary) + glass (ghost) ---------- */
body.serka-cine-chrome a.sg-btn--primary,
body.serka-cine-chrome .sg-btn.sg-btn--primary{
  background:linear-gradient(145deg,var(--gold-2),var(--gold))!important;
  color:#0a0705!important;border:1px solid rgba(232,202,123,.5)!important;
  border-radius:999px!important;font-weight:800!important;
  box-shadow:0 10px 26px rgba(194,154,86,.28),inset 0 1px 0 rgba(255,255,255,.4)!important;
  transition:transform .2s,box-shadow .25s!important;
}
body.serka-cine-chrome a.sg-btn--primary:hover{transform:translateY(-2px)!important;box-shadow:0 16px 34px rgba(194,154,86,.4),inset 0 1px 0 rgba(255,255,255,.5)!important}
body.serka-cine-chrome a.sg-btn--ghost,
body.serka-cine-chrome .sg-btn.sg-btn--ghost{
  background:var(--glass-2)!important;color:var(--text)!important;
  border:1px solid var(--line)!important;border-radius:999px!important;font-weight:700!important;
  transition:border-color .2s,color .2s!important;
}
body.serka-cine-chrome a.sg-btn--ghost:hover{border-color:var(--gold)!important;color:var(--gold-2)!important}

/* ---------- LISTS → gold markers ---------- */
body.serka-cine-chrome .sg-list{list-style:none;padding-left:0}
body.serka-cine-chrome .sg-list li{position:relative;padding-left:22px}
body.serka-cine-chrome .sg-list li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(194,154,86,.5)}

/* ---------- TABLES → glass header + token borders ---------- */
body.serka-cine-chrome .sg-table{border-collapse:separate;border-spacing:0;width:100%}
body.serka-cine-chrome .sg-table th{background:var(--glass-2)!important;color:var(--gold)!important;border-bottom:1px solid var(--line)!important}
body.serka-cine-chrome .sg-table td{color:var(--muted)!important;border-bottom:1px solid var(--line)!important}
body.serka-cine-chrome .sg-table-item{border-bottom:1px solid var(--line)!important}

/* ---------- GENERIC NATIVE-WIDGET SAFETY NET (any non-sg Elementor content) ---------- */
body.serka-cine-chrome .elementor-widget-heading h1,
body.serka-cine-chrome .elementor-widget-heading h2,
body.serka-cine-chrome .elementor-widget-heading h3,
body.serka-cine-chrome .elementor-widget-heading .elementor-heading-title{color:var(--text)!important;font-family:var(--serif)!important}
body.serka-cine-chrome .elementor-widget-text-editor,
body.serka-cine-chrome .elementor-widget-text-editor p,
body.serka-cine-chrome .elementor-widget-text-editor li{color:var(--muted)!important}
body.serka-cine-chrome .elementor-widget-icon-box .elementor-icon-box-title{color:var(--text)!important}
body.serka-cine-chrome .elementor-widget-icon-box .elementor-icon-box-description{color:var(--muted)!important}
/* native Elementor buttons -> gold (override legacy accent) */
body.serka-cine-chrome .elementor-button:not(.cb-wa):not(.cb-sig){
  background:linear-gradient(145deg,var(--gold-2),var(--gold))!important;color:#0a0705!important;border-color:rgba(232,202,123,.5)!important;
}

/* ---------- HERO with background-photo (defensive: keep photo, cinematic veil) ---------- */
body.serka-cine-chrome .sg-hero[style*="background"],
body.serka-cine-chrome .e-con[style*="background-image"]{position:relative}
body.serka-cine-chrome .sg-hero[style*="background"]::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,4,.62),rgba(8,6,4,.82));pointer-events:none;z-index:0}
html.light body.serka-cine-chrome .sg-hero[style*="background"]::before{background:linear-gradient(180deg,rgba(230,220,200,.55),rgba(230,220,200,.78))}
body.serka-cine-chrome .sg-hero>*{position:relative;z-index:1}

/* ---------- FORMS (contact page) → glass inputs, adaptive labels ---------- */
body.serka-cine-chrome .elementor-field-group label,
body.serka-cine-chrome .sg-form label{color:var(--text)!important}
body.serka-cine-chrome input[type=text],
body.serka-cine-chrome input[type=email],
body.serka-cine-chrome input[type=tel],
body.serka-cine-chrome textarea,
body.serka-cine-chrome select,
body.serka-cine-chrome .elementor-field-textual{
  background:var(--glass-2)!important;border:1px solid var(--line)!important;color:var(--text)!important;border-radius:10px!important;
}
body.serka-cine-chrome input::placeholder,
body.serka-cine-chrome textarea::placeholder{color:var(--muted)!important}

/* ---------- LIGHT-MODE CATCH-ALL (safety net vs any missed cream-hardcoded text) ---------- */
html.light body.serka-cine-chrome .sg-page,
html.light body.serka-cine-chrome .sg-card,
html.light body.serka-cine-chrome .sg-grid,
html.light body.serka-cine-chrome .sg-soft,
html.light body.serka-cine-chrome .elementor-widget-text-editor{color:var(--text)}

/* ---------- RTL (ar/he/fa): keep skin direction-neutral ---------- */
body.serka-cine-chrome[dir=rtl] .sg-list li,
[dir=rtl] body.serka-cine-chrome .sg-list li{padding-left:0;padding-right:22px}
[dir=rtl] body.serka-cine-chrome .sg-list li::before{left:auto;right:4px}

@media(prefers-reduced-motion:reduce){body.serka-cine-chrome a.sg-btn--primary{transition:none!important}}

/* SERKA-CONTENT-READABILITY-20260613: force Elementor pages into the chrome theme */
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .elementor-section,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .elementor-top-section,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .elementor-inner-section,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .elementor-container,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .elementor-column,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .elementor-widget-wrap,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .e-con,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .e-con-inner{
  background-image:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
}
body.serka-cine-chrome .elementor-widget-heading h1,
body.serka-cine-chrome .elementor-widget-heading h2,
body.serka-cine-chrome .elementor-widget-heading h3,
body.serka-cine-chrome .elementor-widget-heading h4,
body.serka-cine-chrome .elementor-widget-heading h5,
body.serka-cine-chrome .elementor-widget-heading h6,
body.serka-cine-chrome .elementor-widget-heading .elementor-heading-title,
body.serka-cine-chrome .elementor-widget-icon-box .elementor-icon-box-title,
body.serka-cine-chrome .elementor-widget-icon-box .elementor-icon-box-title a{
  color:var(--text)!important;
  opacity:1!important;
  text-shadow:none!important;
}
body.serka-cine-chrome .elementor-widget-text-editor,
body.serka-cine-chrome .elementor-widget-text-editor p,
body.serka-cine-chrome .elementor-widget-text-editor li,
body.serka-cine-chrome .elementor-widget-text-editor span,
body.serka-cine-chrome .elementor-widget-icon-box .elementor-icon-box-description{
  color:var(--muted)!important;
  opacity:1!important;
  text-shadow:none!important;
}
body.serka-cine-chrome .elementor-widget-text-editor strong,
body.serka-cine-chrome .elementor-widget-text-editor b,
body.serka-cine-chrome .elementor-widget-text-editor u{
  color:var(--text)!important;
}
body.serka-cine-chrome .elementor-widget-icon .elementor-icon-wrapper,
body.serka-cine-chrome .elementor-widget-icon .elementor-icon,
body.serka-cine-chrome .elementor-button,
body.serka-cine-chrome .elementor-button-content-wrapper,
body.serka-cine-chrome .elementor-button-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1.15!important;
  vertical-align:middle!important;
}
body.serka-cine-chrome .elementor-widget-icon .elementor-icon{color:var(--gold-2)!important}
body.serka-cine-chrome .elementor-widget-icon svg,
body.serka-cine-chrome .elementor-button svg{
  display:block!important;
  margin:0!important;
  width:1em!important;
  height:1em!important;
}
body.serka-cine-chrome .elementor-button-content-wrapper{gap:10px!important}
body.serka-cine-chrome .elementor-button-text{line-height:1.15!important}
body.serka-cine-chrome .elementor-widget-divider .elementor-divider-separator{border-color:var(--gold)!important}
html.light body.serka-cine-chrome .elementor-widget-text-editor,
html.light body.serka-cine-chrome .elementor-widget-text-editor p,
html.light body.serka-cine-chrome .elementor-widget-text-editor li,
html.light body.serka-cine-chrome .elementor-widget-text-editor span{color:rgba(36,28,16,.78)!important}

/* ===========================================================
   SERKA-CLASSIC-PAGECONTENT-READABILITY-20260617
   Hello-theme classic content (main#content.site-main > .page-content)
   renders bare <p>/<a>/<h*>/<table> — e.g. WPML CBI guide post
   translations. It is NOT .sg-* nor .elementor-widget-*, so every
   block above missed it and it fell through to the legacy used-css
   (#wpr-usedcss: a{color:#cc3366} + dim cream p @ .68 alpha), giving
   the user-reported dim/hard-to-read body + pink links. Map bare
   content to the cinematic tokens at FULL strength (long legal copy
   must read crisply) + gold links (kills the #cc3366 bleed). Scope:
   body.serka-cine-chrome .page-content only -> .sg-* / Elementor
   pages untouched. Tokens flip light/dark via skin.css :root /
   html.light. Rollback: delete this block from content-skin.css.
   =========================================================== */
body.serka-cine-chrome .page-content{color:var(--text)}
body.serka-cine-chrome .page-content p,
body.serka-cine-chrome .page-content li,
body.serka-cine-chrome .page-content td,
body.serka-cine-chrome .page-content dd,
body.serka-cine-chrome .page-content blockquote{
  color:var(--text)!important;opacity:1!important;text-shadow:none!important;
}
body.serka-cine-chrome .page-content h1,
body.serka-cine-chrome .page-content h2,
body.serka-cine-chrome .page-content h3,
body.serka-cine-chrome .page-content h4,
body.serka-cine-chrome .page-content h5,
body.serka-cine-chrome .page-content h6{
  color:var(--text)!important;font-family:var(--serif)!important;opacity:1!important;
}
body.serka-cine-chrome .page-content strong,
body.serka-cine-chrome .page-content b{color:var(--text)!important}
/* links -> gold, kill legacy #cc3366 used-css bleed on bare anchors */
body.serka-cine-chrome .page-content a{
  color:var(--gold-2)!important;text-decoration:underline;
  text-decoration-color:var(--line);text-underline-offset:3px;transition:color .2s;
}
body.serka-cine-chrome .page-content a:hover{color:var(--gold)!important;text-decoration-color:var(--gold)}
/* classic table -> glass header + token borders (matches .sg-table) */
body.serka-cine-chrome .page-content table{border-collapse:separate;border-spacing:0;width:100%;margin:1.3em 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
body.serka-cine-chrome .page-content table th{background:var(--glass-2)!important;color:var(--gold)!important;border-bottom:1px solid var(--line)!important;padding:11px 13px;text-align:start;font-family:var(--serif)}
body.serka-cine-chrome .page-content table td{color:var(--text)!important;border-bottom:1px solid var(--line)!important;padding:11px 13px}
/* light-mode explicit parity (tokens already flip; safety net) */
html.light body.serka-cine-chrome .page-content p,
html.light body.serka-cine-chrome .page-content li,
html.light body.serka-cine-chrome .page-content td,
html.light body.serka-cine-chrome .page-content h1,
html.light body.serka-cine-chrome .page-content h2,
html.light body.serka-cine-chrome .page-content h3{color:var(--text)!important}

/* consistency 20260618: deterministic .sg-h1 page-title size — the legacy Customizer CSS that normalized H1 size was removed; pin so size is independent of RUCSS/theme.css state. Bold premium title, larger than h2. */
body.serka-cine-chrome .sg-h1{font-size:clamp(33px,10.5vw,46px)!important;line-height:1.12;letter-spacing:-.01em}


/* ── P1-5 readability (20260618): reading measure + section rhythm ──────────────
   Lean service/content shell measured ~143 chars/line at desktop (.page-content 1140px
   @16px) — roughly 2x the readable maximum (45-75ch). Cap raw text-flow measure to ~70ch
   (left-aligned, NO centering; <table> and designed .sg-* cards keep full width) and
   restore H2/H3 top rhythm (H2 top-margin measured 8px → cramped section breaks).
   Inner content pages only (this stylesheet is not enqueued on the homepage); mobile is a
   no-op (text already narrower than the cap). Reversible: delete this block. */
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .page-content > p,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .page-content > ul,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .page-content > ol,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .page-content > h2,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .page-content > h3{max-width:42rem!important;margin-left:auto!important;margin-right:auto!important}
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .page-content > h2{margin-top:2.4rem}
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .page-content > h3{margin-top:1.6rem}

/* dark hero-title contrast fix 20260618: theme .page-header h1.entry-title keeps light #333 ink in dark (1.59 contrast on #0a0705). Dark-only (:not(.light)) -> --text token; light mode untouched (9.29). Reversible: delete this block. */
html.serka-skin-root:not(.light) .page-header h1.entry-title,
html.serka-skin-root:not(.light) .page-header .entry-title{color:var(--text)!important;-webkit-text-fill-color:var(--text)!important}

/* SERKA-CONTENT-SVG-SIZE-GUARD-20260618: bare inline <svg> with NO width attribute inside classic
   .page-content (Hello theme) stretched to container width — measured 604x604 / 604x537 on
   /ru/why-us-how-do-we-work/ — because content-skin only constrained .elementor-widget-icon svg /
   .elementor-button svg, so bare content SVGs fell through. Constrain un-sized inline content icons
   to a sane size; any SVG carrying a width attr is left untouched. Base scope. Reversible: delete. */
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .page-content svg:not([width]),
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .elementor-widget-text-editor svg:not([width]){
  width:1.5em!important;height:1.5em!important;
  max-width:1.5em!important;max-height:1.5em!important;
  display:inline-block;vertical-align:-0.18em;flex:0 0 auto
}

/* long raw-URL anchors in profile/content must wrap (fix 2163px overflow 20260618-urlwrap) */
body.serka-cine-chrome .page-content a,body.serka-cine-chrome .sk-verify a,body.serka-cine-chrome .sk-bio a{overflow-wrap:anywhere;word-break:break-word}

/* ===== P1-6 reading-measure for .sk-* custom Elementor pages (20260623) =====
   .sk-page prose (.sk-lead/.sk-p/.sk-h1 + h2/h3/ul/ol) rendered at full 1140px (~143ch),
   uncapped — the P1-5 .page-content cap never reached it. Cap to ~78ch centered reading
   column (matches .page-content @42rem). .sk-grid / cards stay full width (not direct
   prose children). text-align unchanged (left). Mobile no-op. Reversible: delete block. */
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .sk-page > p,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .sk-page > h1,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .sk-page > h2,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .sk-page > h3,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .sk-page > ul,
body.serka-cine-chrome.serka-skinned:not(.wp-admin) .sk-page > ol{
  max-width:42rem!important;
  margin-left:auto!important;
  margin-right:auto!important;
}