/* styles.css - core layout & responsive styles (updated for NIH-like spacing) */
/* Basic resets & variables */
:root{
  --accent:#1d6f86;
  --dark:#0f4b5a;
  --muted:#666;
  --max-width:90%;
  --sidebar-width:260px;
  --container-padding:24px; /* slightly larger padding like NIH */
  font-family: "MontserratCustom", Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
*{box-sizing:inherit;margin:0;padding:0}
html,body{height:100%}
body{
  color:#222;
  background:#fff;
  line-height:1.55; /* closer to NIH */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px;
}

/* Layout container */
.container{
  max-width: var(--max-width);
  margin:0 auto;
  padding: var(--container-padding);
}

/* Header */
.site-header{background:#fff;border-bottom:4px solid #e6eef1}
.header-inner{display:flex;align-items:center;gap:24px;padding:8px 0}
.logo img{height:40px}
.site-title{flex:1}
.site-title h1{
  font-size:30px;      /* larger, NIH-like heading */
  line-height:1.05;
  margin-bottom:8px;
  font-weight:700;
  letter-spacing:-0.5px;
  text-align:right;
}
.btn-search{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:8px 14px;
  border-radius:4px;
  text-decoration:none;
  font-weight:700;
}

/* Page wrap */
.page-wrap{
  display:flex;
  gap:34px;
  align-items:flex-start;
  margin-top:32px;
}

/* Sidebar */
.sidebar-wrap{
  width:var(--sidebar-width);
  flex:0 0 var(--sidebar-width);
}
.left-nav ul{list-style:none;border:1px solid #eee;padding:8px;background:#fafafa}
.left-nav li{border-bottom:1px solid #eee}
.left-nav li:last-child{border-bottom:0}
.left-nav a{display:block;padding:14px 12px;color:#0b3b46;text-decoration:none;font-weight:700}
.left-nav a:hover{background:#fff6e6}

/* Content */
.content-wrap{
  flex:1;
  min-width:0;
  background:transparent;
  padding-bottom:18px;
}

/* Page title */
.page-title{margin-bottom:22px}
.page-title h2{
  font-size:28px;
  font-weight:700;
  margin-bottom:8px;
}
.page-title p{color:var(--muted);font-size:15px;margin-top:6px;}

/* Utility */
.muted{color:var(--muted);font-weight:600}
img {border-style: none;}

/* FAQ styles - accordion with shading + slide animation */
.faq .accordion{border:1px solid #ececec;border-radius:4px;overflow:hidden}
.faq .acc-item{border-bottom:1px solid #ececec;background:#fff;transition:background-color 220ms ease}
.faq .acc-item:last-child{border-bottom:0}
.faq .acc-head{
  padding:18px 20px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
  user-select:none;
  font-size:15px;
}
.faq .acc-head .chev{font-size:14px;color:#777;transition:transform 220ms ease}

/* Collapsible body: use height animations and inner padding */
.faq .acc-body{
  padding:0 20px;
  display:none;               /* hidden by default */
  height:0;                   /* animated to scrollHeight via JS */
  overflow:hidden;
  background: linear-gradient(180deg, rgba(250,250,250,0) 0%, rgba(250,250,250,0) 100%);
  transition: height 320ms cubic-bezier(.2,.8,.2,1), background-color 320ms ease;
}

/* When item is open, show subtle shaded background on the item */
.faq .acc-item.open{
  background: linear-gradient(180deg, rgba(246,249,250,1) 0%, rgba(255,255,255,1) 100%);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);
}

/* rotate caret when open */
.faq .acc-item.open .acc-head .chev{
  transform: rotate(180deg);
}

/* inside the body, add an inner padding area for consistent spacing */
.faq .acc-body .acc-body-inner{
  padding:18px 0 22px 0;
  color:#333;
  line-height:1.6;
  font-weight:400;
  font-size:15px;
}

/* Add spacing between paragraphs (NIH-style readability) */
.faq .acc-body .acc-body-inner p{
  margin-bottom:14px;
}

/* Remove extra space after last paragraph */
.faq .acc-body .acc-body-inner p:last-child{
  margin-bottom:0;
}

/* Improve list spacing inside FAQ answers */
.faq .acc-body .acc-body-inner ul{
  margin:12px 0 16px 18px;
}

.faq .acc-body .acc-body-inner li{
  margin-bottom:8px;
  line-height:1.5;
}

/* Highlight block (red background) used at end in screenshot */
.faq .highlight-block{
  background:#f06d5d; /* red-ish */
  color:#fff;
  padding:14px;
  border-radius:4px;
  margin-top:18px;
  font-weight:700;
}

/* Resources / publications styles (NIH-like spacing and link styles) */
.publications{margin-bottom:20px}
.publications p{
  margin-bottom:18px;        /* more space between entries */
  color:#0b2b34;
}
.publications strong{
  display:block;
  font-size:16px;
  color:#0b4b5a;
  margin-bottom:6px;
  font-weight:700;
}

/* Publication link style: external links */
.pub-link{
  color:#0b66a3;              /* blue-ish link like NIH */
  text-decoration:underline;
  font-weight:700;
}
.pub-meta{
  color:var(--muted);
  font-size:14px;
  margin-top:6px;
}

/* Lists in resources */
.plist{margin:12px 0 18px 18px}
.plist li{margin-bottom:8px;line-height:1.5}

.resources-link {
  color:#0b66a3;              /* blue-ish link like NIH */
  text-decoration:none;
}

.resources-link li a:hover {
  text-decoration:underline;
}

/* Diagram and other images */
.diagram{
  margin:22px 0;
  text-align:center;
}
.diagram img{max-width:100%;height:auto;border:1px solid #eee;padding:8px;background:#fff}

/* Footer */
.site-footer{
  background:#1f6480;
  color:#fff;
  margin-top:48px;
  font-size:.875rem;
}

.site-footer .footer-inner{
  display:grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap:40px;
  align-items:start;
  padding:36px 20px 30px;
}

.site-footer .col h4{
  margin:0 0 10px;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
}

.site-footer .col p{
  margin:0 0 14px;
  line-height:1.5;
}

.site-footer .col ul{
  list-style:none;
  margin:0;
  padding:0;
}

.site-footer .col li{
  margin:0 0 8px;
  line-height:1.5;
}

.site-footer .col a{
  color:#fff;
  text-decoration:none;
}

.site-footer a:hover {
   text-decoration:underline;
}

.site-footer .social{
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:10px;
}

.site-footer .social a{
  color:#fff;
  font-size:18px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.site-footer .footer-bottom{
  background:#195a72;
  border-top:1px solid rgba(255,255,255,.15);
}

.site-footer .footer-bottom .container{
  padding:14px 20px;
}

.site-footer .footer-bottom small{
  display:block;
  text-align:center;
  color:#e6f2f6;
}

@media (max-width: 900px){
  .site-footer .footer-inner{
    grid-template-columns:1fr 1fr;
    gap:24px 28px;
  }
}

@media (max-width: 640px){
  .site-footer .footer-inner{
    grid-template-columns:1fr;
  }
}

/* Responsive */
@media (max-width:900px){
  .page-wrap{flex-direction:column}
  .sidebar-wrap{width:100%;order:0}
  .left-nav a{padding:12px}
  .header-inner{flex-direction:column;align-items:flex-start}
  .site-title h1{font-size:22px}
  .logo img{height:54px}
  .content-wrap{padding-bottom:12px}
}

.content-section p {
  margin-bottom: 16px;
}

.content-section ul,
.content-section ol {
  margin: 12px 0 18px 20px;
}

.content-section li {
  margin-bottom: 8px;
}

.ccrfooter>span{display:block;font-size:.8125rem;font-weight:normal}