/* Polynucleotides (PN) — Subpages (additive CSS)
   Load after ../../../styles.css and ../../rtl.css
   This file is shared by all subpages in /he/knowledge/polynucleotides-explained/
*/

/* Hero */
.sub-hero{
  background: var(--bg-main);
  padding: clamp(28px, 4vw, 50px) 0 clamp(18px, 3vw, 34px);
}
.sub-hero-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 clamp(18px, 3vw, 28px);
}

.sub-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin: 0 0 12px;
  color: rgba(20,20,20,0.72);
  font-size: 13px;
  line-height: 1.5;
}
.sub-breadcrumb a{ text-decoration:none; }
.sub-breadcrumb a:hover{ text-decoration: underline; text-underline-offset: 3px; }

.sub-kicker{
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: rgba(20,20,20,0.68);
  font-weight: 700;
}
.sub-hero h1{
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 5.6vw, 46px);
  line-height: 1.06;
}
.sub-subhead{
  margin: 0;
  max-width: 85ch;
  color: var(--muted);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.8;
}

/* Main */
.sub-main{
  background: var(--bg-section);
  padding: clamp(46px, 6vw, 86px) 0;
}
.sub-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 clamp(18px, 3vw, 28px);
}
.sub-article{
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: clamp(18px, 2.6vw, 28px);
}

.sub-article h2{
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 2.8vw, 32px);
}
.sub-article h3{
  margin: 14px 0 8px;
  font-weight: 900;
  font-size: 16px;
  color: rgba(20,20,20,0.92);
}
.sub-article p{
  margin: 0 0 12px;
  color: rgba(20,20,20,0.82);
  line-height: 1.85;
  font-size: 16px;
}

.sub-section{
  scroll-margin-top: 100px;
  padding: 10px 0 18px;
  border-bottom: 1px solid rgba(20,20,20,0.08);
}
.sub-section:last-child{ border-bottom:none; padding-bottom: 6px; }

.sub-list{
  margin: 0 0 12px;
  padding: 0 18px 0 0;
  display:grid;
  gap: 10px;
  color: rgba(20,20,20,0.82);
  line-height: 1.75;
}
.sub-note{
  margin: 6px 0 0;
  color: rgba(62,62,62,0.82);
  font-size: 14px;
  line-height: 1.6;
}

/* Callout */
.sub-callout{
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(20,20,20,0.10);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  margin: 0 0 14px;
}
.sub-callout-title{
  margin: 0 0 6px;
  font-weight: 900;
  font-size: 13px;
  color: rgba(20,20,20,0.88);
}
.sub-callout p{ margin:0; font-size: 15px; }

/* Tables */
.sub-table-wrap{
  border-radius: 16px;
  border: 1px solid rgba(20,20,20,0.10);
  overflow: auto;
  background: rgba(255,255,255,0.70);
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
  margin: 10px 0 14px;
}
.sub-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.sub-table th, .sub-table td{
  text-align: right;
  vertical-align: top;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(20,20,20,0.08);
  color: rgba(20,20,20,0.82);
  line-height: 1.6;
  font-size: 14px;
}
.sub-table thead th{
  font-weight: 900;
  font-size: 13px;
  background: rgba(247,242,234,0.55);
}
.sub-table tbody tr:last-child td{ border-bottom: none; }

/* Related links */
.sub-related{
  margin-top: 10px;
  background: rgba(247,242,234,0.38);
  border: 1px solid rgba(20,20,20,0.10);
  border-radius: 16px;
  padding: 12px 14px 10px;
}
.sub-related-title{
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 13px;
  color: rgba(20,20,20,0.88);
}
.sub-related ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 10px;
}
.sub-related a{
  font-weight: 800;
  text-decoration: none;
}
.sub-related a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* FAQ */
.sub-faq{
  border: 1px solid rgba(20,20,20,0.10);
  border-radius: 16px;
  padding: 10px 12px;
  margin: 0 0 10px;
  background: rgba(255,255,255,0.70);
}
.sub-faq summary{
  cursor:pointer;
  font-weight: 900;
  color: rgba(20,20,20,0.88);
  line-height: 1.6;
}
.sub-faq-body{ padding-top: 10px; }
.sub-faq-body p{ margin:0; font-size: 15px; }

/* IDENTICAL, low-pressure CTA (shared) */
.kb-cta{
  margin-top: 18px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(20,20,20,0.10);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.06);
}
.kb-cta-inner{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
  align-items: center;
}
.kb-cta-copy h2{
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
}
.kb-cta-copy p{
  margin: 0;
  color: rgba(20,20,20,0.78);
  line-height: 1.7;
  font-size: 14px;
}
.kb-cta-actions{
  display: grid;
  gap: 10px;
  overflow: hidden; /* containment */
}
/* CTA containment scoped ONLY to this block */
.kb-cta-actions .cta{
  position: static !important;
  transform: none !important;
  display: inline-flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  justify-content: center;
  margin: 0 !important;
}
.kb-cta-actions .cta::before,
.kb-cta-actions .cta::after{
  display: none !important;
}

/* Ghost CTA helper (doesn't change global rules) */
.cta-ghost{
  background: rgba(255,255,255,0.40);
  color: rgba(20,20,20,0.92);
  border: 1px solid rgba(20,20,20,0.12);
  box-shadow: none;
}
.cta-ghost::before,
.cta-ghost::after{ display:none; }

/* Responsive */
@media (max-width: 980px){
  .kb-cta-inner{ grid-template-columns: 1fr; }
  .sub-table{ min-width: 640px; }
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}

/* Mobile overflow prevention */
@media (max-width: 820px){
  html{ overflow-x: hidden; }
  .cta{ min-width: 0 !important; max-width: 100% !important; }
}

/* LTR overrides for English/French (CSS was authored for RTL Hebrew) */
.toc-list,
.pillar-toc,
.pillar-bullets,
.sub-list{
  padding-left: 28px !important;
  padding-right: 0 !important;
  list-style-position: outside;
  margin-left: 8px !important;
}
.toc-list{ padding-left: 28px !important; }
.pillar-bullets li,
.sub-list li{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.pillar-bullets li::before,
.sub-list li::before{
  right: auto !important;
  left: -16px !important;
}
.sub-breadcrumb,
.pill-breadcrumb,
.kb-breadcrumb{
  text-align: left;
}
/* Tables: allow horizontal scroll within their own wrapper, but constrain on mobile */
@media (max-width: 820px){
  .pill-table-wrap,
  .sub-table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .pill-table,
  .sub-table{
    min-width: 0 !important;
    width: 100%;
    font-size: 13px !important;
  }
  .pill-table th,
  .pill-table td,
  .sub-table th,
  .sub-table td{
    padding: 8px 8px !important;
    word-break: break-word;
    text-align: left !important;
  }
}

/* Mobile: ensure article body content has comfortable side padding */
@media (max-width: 820px){
  .sub-article,
  .pillar-article,
  .pillar-section{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .sub-list,
  .pillar-bullets,
  .toc-list{
    padding-left: 28px !important;
  }
}