/* NJMC interior pages: supplement to njmc-home.css.
   Only components the homepage does not already define. */

.page-hero {
  padding: 122px 0 56px;
  background: linear-gradient(135deg, #f0f4ff 0%, var(--mint, #cdeae3) 75%, #fff 100%);
  border-bottom: 1px solid var(--border);
}
.page-hero .hero-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.page-hero h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 12px; }
.page-hero .hero-summary { max-width: 720px; }

.breadcrumb { font-size: .8rem; color: var(--text-muted); margin-bottom: 14px; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal); }
.breadcrumb i { font-style: normal; margin: 0 7px; opacity: .45; }

/* Body copy */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); margin: 46px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.05rem; margin: 30px 0 8px; color: var(--navy); }
.prose p { margin-bottom: 16px; font-size: .97rem; line-height: 1.8; }
.prose ul, .prose ol { margin: 0 0 20px 22px; }
.prose li { margin-bottom: 9px; font-size: .95rem; line-height: 1.75; }
.prose strong { color: var(--navy); font-weight: 600; }
.prose a { color: var(--teal); }
.prose table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: .9rem; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { background: var(--light-bg); color: var(--navy); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; }

/* Numbered process */
.process { list-style: none; margin-left: 0; counter-reset: step; }
.process li { position: relative; padding-left: 46px; margin-bottom: 18px; counter-increment: step; }
.process li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--mint, #cdeae3); color: var(--teal);
  font-weight: 700; font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
}

.callout {
  background: var(--light-bg);
  border-left: 4px solid var(--gold, #c8922a);
  border-radius: 0 10px 10px 0;
  padding: 20px 24px; margin: 28px 0;
}
.callout p { margin-bottom: 0; font-size: .93rem; }
.callout p + p { margin-top: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; list-style: none; }
.chips li {
  margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--teal); background: var(--mint, #cdeae3);
  padding: 5px 12px; border-radius: 14px;
}

/* Author / expertise box */
.author-box {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--light-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 22px 24px; margin: 40px 0 0;
}
.author-box .icon-badge { flex-shrink: 0; }
.author-box h4 { color: var(--navy); font-size: .98rem; margin-bottom: 4px; }
.author-box .role { font-size: .78rem; text-transform: uppercase; letter-spacing: .8px; color: var(--teal); font-weight: 700; margin-bottom: 9px; }
.author-box p { font-size: .88rem; color: var(--text-muted); line-height: 1.7; margin: 0; }
.author-box a { color: var(--teal); }

.article-meta { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; margin-bottom: 12px; }

/* Article / link list */
.insight-list { display: flex; flex-direction: column; gap: 16px; }
.insight-item {
  background: #fff; border: 1px solid var(--border);
  border-left: 4px solid var(--teal);
  border-radius: 0 10px 10px 0; padding: 20px 24px;
  box-shadow: var(--card-shadow);
}
.insight-item h3 { margin-bottom: 5px; font-size: 1.03rem; }
.insight-item h3 a { color: var(--navy); text-decoration: none; }
.insight-item h3 a:hover { color: var(--teal); }
.insight-item p { font-size: .89rem; color: var(--text-muted); line-height: 1.65; margin: 0; }

/* Related links strip */
.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 12px; margin-top: 14px; }
.related a {
  display: block; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; text-decoration: none;
  box-shadow: var(--card-shadow); transition: transform .15s, box-shadow .15s;
}
.related a:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(26,39,68,.12); }
.related .t { display: block; color: var(--navy); font-weight: 600; font-size: .92rem; margin-bottom: 3px; }
.related .d { display: block; color: var(--text-muted); font-size: .81rem; line-height: 1.5; }

.cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2, #223458) 100%);
  color: #fff; border-radius: 12px; padding: 34px 38px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-top: 54px;
}
.cta-band h3 { color: #fff; font-size: 1.15rem; margin-bottom: 5px; }
.cta-band p { color: rgba(255,255,255,.72); font-size: .9rem; margin: 0; max-width: 560px; }
.cta-band .btn-primary { background: var(--gold, #c8922a); }
.cta-band .btn-primary:hover { background: var(--gold-light, #e0ac48); }

/* Mobile menu button: the homepage CSS hides .nav-links under 768px with no toggle */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; cursor: pointer; padding: 0; flex-direction: column; gap: 4px;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  nav .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(26,39,68,.10);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 14px;
  }
  nav .nav-links.open { display: flex; }
  nav .nav-links > li > a, nav .nav-links > a { display: block; padding: 12px 24px; font-size: .95rem; }
  .nav-cta, .lang-toggle { margin: 10px 24px 0; text-align: center; border-radius: 8px !important; }
  .page-hero { padding: 104px 0 42px; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .author-box { flex-direction: column; gap: 12px; }
}

/* RTL */
[dir="rtl"] .prose ul, [dir="rtl"] .prose ol { margin-left: 0; margin-right: 22px; }
[dir="rtl"] .process li { padding-left: 0; padding-right: 46px; }
[dir="rtl"] .process li::before { left: auto; right: 0; }
[dir="rtl"] .callout { border-left: none; border-right: 4px solid var(--gold, #c8922a); border-radius: 10px 0 0 10px; }
[dir="rtl"] .insight-item { border-left: none; border-right: 4px solid var(--teal); border-radius: 10px 0 0 10px; }
[dir="rtl"] .prose th, [dir="rtl"] .prose td { text-align: right; }

.has-sub{position:relative}
.has-sub>a::after{content:' \25BE';font-size:.7em;opacity:.7}
.subnav{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:270px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 30px rgba(26,39,68,.12);padding:8px;list-style:none;display:none;z-index:120}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{display:block}
.subnav li{display:block}
.subnav a{display:block;padding:9px 14px;border-radius:7px;font-size:.86rem;color:var(--text);text-decoration:none}
.subnav a:hover{background:var(--light-bg);color:var(--teal)}
[dir=rtl] .subnav{left:auto;right:50%;transform:translateX(50%)}
@media(max-width:768px){
 .has-sub>a::after,[dir=rtl] .has-sub>a::after{content:''}
 .subnav{position:static;transform:none;display:block;border:none;box-shadow:none;padding:0 0 6px;background:transparent;min-width:0}
 .subnav a{padding:9px 24px 9px 42px;font-size:.88rem;color:var(--text-muted)}
 [dir=rtl] .subnav a{padding:9px 42px 9px 24px}
}
/* Interior hero: the homepage hero styles assume a dark background, so match it. */
.page-hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2,#223458) 55%,#16233c 100%);border-bottom:none}
.page-hero .hero-inner{text-align:start;max-width:1100px;margin:0 auto;padding:0 24px}
.page-hero .breadcrumb{text-align:start;color:rgba(255,255,255,.6)}
.page-hero .breadcrumb a{color:rgba(255,255,255,.78)}
.page-hero .breadcrumb a:hover{color:var(--gold-light,#e0ac48)}
.page-hero .breadcrumb i{color:rgba(255,255,255,.35)}
.page-hero .article-meta{color:rgba(255,255,255,.6)}
.page-hero h1{color:#fff}
.page-hero .hero-summary{color:rgba(255,255,255,.82);max-width:760px}
.page-hero .hero-badge{background:rgba(255,255,255,.12)}
[dir=rtl] .page-hero .hero-inner,[dir=rtl] .page-hero .breadcrumb{text-align:start}

/* Direct answer block and FAQ */
.answer-box{background:var(--mint,#cdeae3);border-left:4px solid var(--teal);border-radius:0 12px 12px 0;padding:20px 24px;margin:0 0 32px}
[dir=rtl] .answer-box{border-left:none;border-right:4px solid var(--teal);border-radius:12px 0 0 12px}
.answer-label{font-size:.7rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--teal);margin-bottom:7px}
.answer-box p{margin:0;font-size:1rem;line-height:1.75;color:var(--navy);font-weight:500}
.faq-h{margin-top:48px}
.faq{border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border);padding:0}
.faq-item summary{cursor:pointer;padding:16px 0;font-weight:600;color:var(--navy);font-size:.97rem;list-style:none;position:relative;padding-right:30px}
[dir=rtl] .faq-item summary{padding-right:0;padding-left:30px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:4px;top:14px;font-size:1.3rem;color:var(--teal);font-weight:400;line-height:1}
[dir=rtl] .faq-item summary::after{right:auto;left:4px}
.faq-item[open] summary::after{content:'\2212'}
.faq-item p{margin:0 0 18px;font-size:.94rem;line-height:1.75;color:var(--text-muted)}