/**
 * T1D Registry Resource Library - Section Styles
 * Scoped to #resourcelibrary. Matches mockup: layout, colors, typography, spacing.
 */

/* ========== Main site header on Resource Library page ========== */
body.resource-library-page #header {
  background: #001965cc;
  padding: 15px 0;
}
body.resource-library-page #header .logo {
  display: block;
}
body.resource-library-page #header .navbar {
  margin-left: 0;
}

/* ========== Section wrapper ========== */
#resourcelibrary.resource-library-section {
  padding: 0;
  margin: 0;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* ========== 1) SECTION HEADER ========== */
.resource-library-section .resource-lib-header {
  width: 100%;
  min-height: 120px;
  padding: 28px 32px 32px;
  background: linear-gradient(135deg, #0d3b5c 0%, #1a5a87 50%, #0d3b5c 100%);
  background-image: url("../img/Banner.png"),
    linear-gradient(
      135deg,
      rgba(13, 59, 92, 0.92) 0%,
      rgba(26, 90, 135, 0.9) 50%,
      rgba(13, 59, 92, 0.92) 100%
    );
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.newpage {
  margin-top: 90px !important;
}

.resource-library-section .resource-lib-header-inner {
  max-width: 100%;
}

.resource-lib-header-inner {
  display: flex;
  gap: 8px;
}

.resource-library-section .resource-lib-header .resource-lib-title-main {
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.resource-library-section .resource-lib-header .resource-lib-title-sub {
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  margin: 4px 0 0 0;
  line-height: 1.3;
}

/* ========== 2) THREE-COLUMN LAYOUT ========== */
.resource-library-section .resource-lib-layout {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 618px;
  height: calc(100vh - 120px);
}

/* ========== LEFT SIDEBAR (Navigation) ========== */
.resource-library-section .resource-lib-sidebar {
  flex: 0 0 260px;
  width: 260px;
  min-width: 260px;
  min-height: 0;
  background: #ffffff;
  border-right: 1px solid #e0e0e0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: hidden;
}

.resource-library-section .resource-lib-search-wrap {
  flex-shrink: 0;
  padding: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.resource-library-section .resource-lib-search {
  width: 100%;
  padding: 10px 12px 10px 36px;
  font-size: 14px;
  line-height: 1.4;
  color: #333333;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
}

.resource-library-section .resource-lib-search::placeholder {
  color: #9ca3af;
}

.resource-library-section .resource-lib-search-wrap {
  position: relative;
}

/* Left sidebar inner content: scrollable when nav list overflows */
.resource-library-section .resource-lib-sidebar .resource-lib-nav {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.resource-library-section
  .resource-lib-sidebar
  .resource-lib-nav::-webkit-scrollbar {
  display: none;
}

.resource-library-section .resource-lib-search-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #9ca3af;
  pointer-events: none;
}

/* Accordion: one parent open at a time */
.resource-library-section .resource-lib-accordion .accordion-item {
  border: none;
  border-radius: 0;
  background: transparent;
}

.resource-library-section
  .resource-lib-accordion
  .accordion-item
  + .accordion-item {
  border-top: 1px solid #e8e8e8;
}

.resource-library-section .resource-lib-accordion .accordion-button {
  font-size: 16px;
  font-weight: 600;
  color: #1a73e8;
  background: transparent;
  padding: 12px 16px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  line-height: 1.35;
}

.resource-library-section
  .resource-lib-accordion
  .accordion-button:not(.collapsed) {
  color: #1a73e8;
  background: #e8f0fe;
  font-weight: 600;
}

.resource-library-section .resource-lib-accordion .accordion-button.collapsed {
  color: #1a73e8;
}

.resource-library-section
  .resource-lib-accordion
  .accordion-button.collapsed
  .resource-lib-nav-icon {
  opacity: 0.7;
}

.resource-library-section .resource-lib-accordion .accordion-button:hover {
  background: #f0f4f8;
}

.resource-library-section
  .resource-lib-accordion
  .accordion-button:not(.collapsed):hover {
  background: #e8f0fe;
}

.resource-library-section .resource-lib-accordion .accordion-button::after {
  margin-left: auto;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  background-size: 12px 12px;
}

.resource-library-section
  .resource-lib-accordion
  .accordion-button
  .bi-house-fill,
.resource-library-section .resource-lib-accordion .accordion-button .bi-server {
  font-size: 18px;
  color: inherit;
  flex-shrink: 0;
}

.resource-library-section
  .resource-lib-accordion
  .accordion-button
  .resource-lib-nav-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 2px;
}

.resource-library-section
  .resource-lib-accordion
  .accordion-button:not(.collapsed)
  .resource-lib-nav-icon {
  opacity: 1;
  filter: none;
}

.resource-library-section .resource-lib-accordion .accordion-body {
  padding: 0 0 12px 0;
  background: transparent;
  border: none;
}

.resource-library-section .resource-lib-nav-children {
  list-style: none;
  margin: 0 0 0 18px;
  padding: 0 0 0 18px;
  border-left: 1px solid #dddddd;
}

.resource-library-section .resource-lib-nav-children li {
  margin: 0;
  padding: 0;
}

.resource-library-section .resource-lib-nav-children a {
  display: block;
  padding: 10px 16px 10px 0;
  font-size: 14px;
  line-height: 1.45;
  color: #3c4043;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.resource-library-section .resource-lib-nav-children a:hover {
  color: #002060;
  background: rgba(232, 240, 254, 0.5);
}

.resource-library-section .resource-lib-nav-children a.active {
  color: #002060;
  font-weight: 600;
  background: rgba(232, 240, 254, 0.35);
}

/* ========== MIDDLE CONTENT AREA ========== */
.resource-library-section .resource-lib-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 32px 40px 48px;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Panels: only one visible at a time */
.resource-library-section .resource-lib-panel {
  display: none;
}
.resource-library-section .resource-lib-panel.active {
  display: block;
}

/* Right sidebar content blocks: only one visible per active panel */
.resource-library-section .resource-lib-right-nav-content {
  display: none;
}
.resource-library-section .resource-lib-right-nav-content.active {
  display: block;
}

/* Active left nav link */
.resource-library-section .resource-lib-nav-link.active {
  font-weight: 600;
  color: #1a73e8;
}
.resource-library-section .resource-lib-nav-link {
  text-decoration: none;
  color: inherit;
}
.resource-library-section .resource-lib-nav-link:hover {
  color: #1a73e8;
}

/* In-content section links (Implementation of Registry): keep pink, work as panel nav */
.resource-library-section .resource-lib-main .resource-lib-content .resource-lib-nav-link[data-resource-panel] {
  color: #e0607b;
  text-decoration: none;
}
.resource-library-section .resource-lib-main .resource-lib-content .resource-lib-nav-link[data-resource-panel]:hover {
  color: #1a73e8;
  text-decoration: underline;
}
.resource-library-section .resource-lib-right-nav .text-muted {
  font-size: 13px;
  color: #6c757d;
}

.resource-library-section .resource-lib-main .resource-lib-page-title {
  font-size: 38px;
  font-weight: 700;
  color: #333333;
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.resource-library-section .resource-lib-main .resource-lib-page-blue-title {
  font-size: 38px;
  font-weight: 700;
  color: #002060;
  margin: 0 0 8px 0;
  line-height: 1.2;
}

/* Base color for all main content – overrides body’s white so text is visible */
.resource-library-section .resource-lib-main .resource-lib-content {
  color: #333333;
}

.resource-library-section .resource-lib-main .resource-lib-subheading {
  font-size: 17px;
  font-weight: 400;
  color: #e0607b;
  margin: 0 0 12px 0;
  line-height: 1.35;
}

.resource-library-section .resource-lib-main .resource-lib-content p {
  font-size: 15px;
  line-height: 1.65;
  color: #555555;
  margin: 0 0 16px 0;
}

.resource-library-section .resource-lib-principle-box {
  background: #e8e8e8;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.65;
  color: #333333;
}

.resource-library-section .resource-lib-principle-box p {
  margin: 0;
  color: inherit;
}

.resource-library-section .resource-lib-principle-icon {
  font-size: 1.5rem;
  color: #5a6c7d;
  margin-top: 2px;
}

.resource-library-section .resource-lib-main .resource-lib-content ul {
  list-style-type: disc;
  margin: 0 0 16px 0;
  padding-left: 24px;
}

.resource-library-section .resource-lib-main .resource-lib-content ul li {
  font-size: 15px;
  line-height: 1.65;
  color: #333333;
  margin-bottom: 6px;
}

.resource-library-section
  .resource-lib-main
  .resource-lib-content
  ul
  li:last-child {
  margin-bottom: 0;
}

/* FAQ and other ordered lists - ensure numbering displays */
.resource-library-section .resource-lib-main .resource-lib-content ol {
  list-style-type: decimal;
  margin: 0 0 16px 0;
  padding-left: 28px;
}

.resource-library-section .resource-lib-main .resource-lib-content ol li {
  font-size: 15px;
  line-height: 1.65;
  color: #333333;
  margin-bottom: 12px;
}

.resource-library-section .resource-lib-main .resource-lib-content ol ol {
  list-style-type: lower-alpha;
  margin: 12px 0 16px 0;
  padding-left: 24px;
}

.resource-library-section .resource-lib-main .resource-lib-content ol ol li {
  margin-bottom: 6px;
}

.resource-library-section
  .resource-lib-main
  .resource-lib-content
  ol
  li:last-child {
  margin-bottom: 0;
}

.resource-library-section
  .resource-lib-main
  .resource-lib-content
  p:last-child {
  margin-bottom: 0;
}

.resource-library-section
  .resource-lib-main
  .resource-lib-content
  h3.resource-lib-heading-blue {
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  color: #002060;
  margin: 15px 0 12px 0;
  line-height: 1.3;
}

.resource-library-section
  .resource-lib-main
  .resource-lib-content
  strong.resource-lib-strong-blue {
  color: #002060;
  font-weight: 700;
}

.resource-library-section
  .resource-lib-main
  .resource-lib-content
  h3.resource-lib-heading-pink {
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: #e0607b;
  margin: 28px 0 12px 0;
  line-height: 1.3;
}

.resource-library-section
  .resource-lib-main
  .resource-lib-content
  h3.resource-lib-heading-gray {
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  color: #555555;
  margin: 28px 0 12px 0;
  line-height: 1.3;
}

.resource-library-section
  .resource-lib-main
  .resource-lib-content
  h4.resource-lib-heading-dark {
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: #333333;
  margin: 20px 0 10px 0;
  line-height: 1.35;
}

.resource-library-section
  .resource-lib-main
  .resource-lib-content
  h5.resource-lib-heading-dark {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #333333;
  margin: 20px 0 10px 0;
  line-height: 1.35;
}

.resource-library-section
  .resource-lib-main
  .resource-lib-content
  h4.resource-lib-heading-pink {
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: #e0607b;
  margin: 20px 0 10px 0;
  line-height: 1.35;
}

.resource-library-section
  .resource-lib-main
  .resource-lib-content
  h5.resource-lib-heading-pink {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #e0607b;
  margin: 20px 0 10px 0;
  line-height: 1.35;
}

/* Deployment Guide: Smart Setup, Email Configuration, T1D Registry – only "On this page" headings in pink */
.resource-library-section #resource-panel-deployment-smart-setup .resource-lib-content h3.resource-lib-heading-pink,
.resource-library-section #resource-panel-deployment-smart-setup .resource-lib-content h4.resource-lib-heading-pink,
.resource-library-section #resource-panel-deployment-email-config .resource-lib-content h3.resource-lib-heading-pink,
.resource-library-section #resource-panel-deployment-email-config .resource-lib-content h4.resource-lib-heading-pink,
.resource-library-section #resource-panel-deployment-t1d-registry .resource-lib-content h3.resource-lib-heading-pink,
.resource-library-section #resource-panel-deployment-t1d-registry .resource-lib-content h4.resource-lib-heading-pink {
  color: #333333;
}
.resource-library-section #resource-panel-deployment-smart-setup #deployment-smart-setup,
.resource-library-section #resource-panel-deployment-email-config #deployment-email-config,
.resource-library-section #resource-panel-deployment-t1d-registry #deployment-t1d-registry {
  color: #e0607b;
}

/* Tables in resource library content – ensure text is visible */
.resource-library-section .resource-lib-main .resource-lib-content .table,
.resource-library-section .resource-lib-main .resource-lib-content .table th,
.resource-library-section .resource-lib-main .resource-lib-content .table td {
  color: #333333;
}

.resource-library-section
  .resource-lib-main
  .resource-lib-content
  .table
  thead
  th {
  background-color: #f0f0f0;
  color: #333333;
  border-color: #dee2e6;
}

/* ========== RIGHT SIDEBAR (In-page navigation) ========== */
.resource-library-section .resource-lib-right-nav {
  flex: 0 0 180px;
  width: 180px;
  min-width: 180px;
  min-height: 0;
  padding: 24px 20px 24px 24px;
  background: #ffffff;
  border-left: 1px solid #eeeeee;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.resource-library-section .resource-lib-right-nav .resource-lib-right-title {
  font-size: 12px;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.resource-library-section .resource-lib-right-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.resource-library-section .resource-lib-right-nav li {
  margin: 0;
  padding: 0;
}

.resource-library-section .resource-lib-right-nav a {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #6c757d;
  text-decoration: none;
  transition: color 0.15s ease;
}

.resource-library-section .resource-lib-right-nav a:hover {
  color: #0d3b5c;
}

/* Hide scrollbars visually; scrolling (wheel, trackpad, keyboard) remains enabled */
.resource-library-section .resource-lib-main::-webkit-scrollbar,
.resource-library-section .resource-lib-right-nav::-webkit-scrollbar,
.resource-library-section
  .resource-lib-sidebar
  .resource-lib-nav::-webkit-scrollbar {
  display: none;
}

/* ========== Transitions for accordion ========== */
.resource-library-section .resource-lib-accordion .accordion-collapse {
  transition: height 0.25s ease-out;
}

/* ========== Responsive: stack sections ========== */
@media (max-width: 991.98px) {
  .resource-library-section .resource-lib-layout {
    flex-direction: column;
    height: auto;
  }

  .resource-library-section .resource-lib-sidebar {
    flex: 0 0 auto;
    width: 100%;
    min-width: 100%;
    border-right: none;
    /* border-bottom: 1px solid #e8e8e8; */
  }

  .resource-library-section .resource-lib-main {
    padding: 24px 20px 32px;
  }

  .resource-library-section .resource-lib-right-nav {
    flex: 0 0 auto;
    width: 100%;
    min-width: 100%;
    border-left: none;
    border-top: 1px solid #eeeeee;
    padding: 20px;
  }
}

@media (max-width: 575.98px) {
  .resource-library-section .resource-lib-header {
    padding: 20px 16px;
    min-height: 100px;
  }

  .resource-library-section .resource-lib-header .resource-lib-title-main {
    font-size: 22px;
  }

  .resource-library-section .resource-lib-header .resource-lib-title-sub {
    font-size: 18px;
  }

  .resource-library-section .resource-lib-main .resource-lib-page-title {
    font-size: 28px;
  }

  .resource-library-section .resource-lib-main .resource-lib-subheading {
    font-size: 18px;
  }
}

/* ========== Code / pre blocks in deployment content ========== */
/* Video tutorials: responsive and consistent spacing */
.resource-library-section .resource-lib-main .resource-lib-content .resource-lib-video-wrap {
  margin: 0 0 28px 0;
  max-width: 100%;
}
.resource-library-section .resource-lib-main .resource-lib-content .resource-lib-video {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  background: #000;
}
.resource-library-section .resource-lib-main .resource-lib-content .resource-lib-video-wrap:last-child {
  margin-bottom: 0;
}

.resource-library-section .resource-lib-pre {
  white-space: pre;
  overflow-x: auto;
  background: #f5f5f5;
  padding: 1rem 1.25rem;
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #333;
  border: 1px solid #e0e0e0;
  margin: 0.75rem 0 1rem;
}
.resource-library-section .resource-lib-content code {
  background: #f0f0f0;
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}