/* -----------------------------------------------------------
   NOC Article Page – Cleaned & Consolidated
   - One source of truth for navbar offset
   - No duplicate rules
   - Scoped to article pages/components
------------------------------------------------------------ */

/* ========== Fixed-top navbar offset (articles pages only) ========== */
.page-articles {
  --nav-offset: 88px; /* desktop default */
}
.page-articles main { padding-top: var(--nav-offset); }

@media (max-width: 991.98px) {
  .page-articles { --nav-offset: 72px; } /* tablet / mobile */
}

/* In case any old rule added a top margin on first .articles section */
.page-articles .articles:first-of-type { margin-top: 0 !important; }

/* ========== Articles landing: hero + search + section title ========== */
.articles { padding: 16px 0; }

.articles .back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  text-decoration: none;
}
.articles .back-btn img { width: 18px; height: 18px; }
.articles .back-btn:hover { text-decoration: underline; }

.articles .search-form .input-group { justify-content: center; }
.articles .search-form .form-control { max-width: 560px; }
@media (max-width: 576px) {
  .articles .search-form .form-control { max-width: 100%; }
}

.articles .section-title {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
}
.articles .section-title span { color: #2937f0; }

/* ========== Article content typography ========== */
.article-content {
  font-family: 'Inter', 'Mulish', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: #212529;
  max-width: 740px;
  margin: 0 auto;
  padding: 40px 20px;
}
/* Shared heading look */
.article-content h1,
.article-content h2,
.article-content h3 {
  line-height: 1.3;
  font-weight: 600;
  color: #1a1a1a;
}

/* Individual sizes & spacing (tighter h3) */
.article-content h1 {
  margin: 0 0 0.75rem;
  font-size: 2rem;
}
@media (min-width: 992px) {
  .article-content h1 { font-size: 2.25rem; }
}

.article-content h2 {
  margin: 1.25rem 0 0.75rem;
  font-size: 1.5rem;
}

.article-content h3 {
  margin: 1.1rem 0 0.6rem;
  font-size: 1.25rem;
}

/* Optional: reduce top gap when a heading is followed by code/table/list */
.article-content h3 + pre,
.article-content h3 + table,
.article-content h3 + ul { margin-top: 0.4rem; }

.article-content p { margin: 0 0 1rem; font-size: 18px; }
.article-content ul,
.article-content ol { margin-left: 2em; margin-bottom: 1.5em; }
.article-content li { margin-bottom: 0.5em; }

.article-content blockquote {
  border-left: 4px solid #d6d9ff;
  padding-left: 1em;
  color: #555;
  font-style: italic;
  margin: 2em 0;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.article-content a { color: #2937f0; text-decoration: underline; }
.article-content a:hover { color: #212cc0; }

.article-content img {
  max-width: 100%;
  height: auto;
  margin: 20px 0;
  border-radius: 6px;
}

/* Tables */
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 16px;
}
.article-content th,
.article-content td { border: 1px solid #dee2e6; padding: 8px 10px; }
.article-content th { background-color: #f4f6ff; text-align: left; }

/* Code blocks */
.article-content pre {
  background: #f8f9fc;
  border: 1px solid #eef1f5;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 1rem 0 1.25rem;
  overflow: auto;
  line-height: 1.6;
  font-size: 14px;
}
.article-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 14px;
}

/* Trim first/last margins inside article body */
.article-content > *:first-child { margin-top: 0 !important; }
.article-content > *:last-child  { margin-bottom: 0 !important; }

/* ========== DNSArchive-style cards adapted to NOC ========== */
.articles .article-box {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(20, 28, 58, 0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.articles .article-box:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(20, 28, 58, 0.12);
}

.articles .article-box .a-body { padding: 18px 18px 10px; }

.articles .article-box .a-footer {
  margin-top: auto;
  padding: 12px 18px;
  border-top: 1px solid #eef1f5;
  font-size: 14px;
  color: #6c757d;
}
.articles .article-box .a-footer a { color: #2937f0; text-decoration: none; }
.articles .article-box .a-footer a:hover { text-decoration: underline; }

/* Only color plain links in the footer, not the button */
.articles .article-box .a-footer a:not(.btn-readmore) {
  color: #2937f0;
  text-decoration: none;
}
.articles .article-box .a-footer a:not(.btn-readmore):hover {
  text-decoration: underline;
}

/* Read More button – force visible text on blue background */
.articles .article-box .a-footer .btn-readmore,
.article-card .btn-readmore {
  background-color: #2937f0;
  color: #fff !important;       /* override generic link color */
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  line-height: 1.2;
  white-space: nowrap;
  display: inline-block;
}

.articles .article-box .a-footer .btn-readmore:hover,
.article-card .btn-readmore:hover {
  background-color: #212cc0;
  color: #fff !important;
  text-decoration: none;
}

/* Meta row */
.articles .article-box .date,
.articles .article-box .date time { font-size: 14px; color: #6c757d; }
.articles .article-box .author img {
  width: 22px; height: 22px; border-radius: 50%; margin-right: 8px;
}
.articles .article-box .author div { font-size: 14px; color: #495057; }

/* Title & summary */
.articles .article-box a.title { text-decoration: none; }
.articles .article-box a.title h5 {
  margin: 0 0 8px 0;
  color: #1a1a1a;
  line-height: 1.35;
}
.articles .article-box p { margin: 0 0 6px 0; color: #212529; }

/* Read More button (cards) */
.article-card .btn-readmore,
.articles .article-box .btn-readmore {
  background-color: #2937f0;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
}
.article-card .btn-readmore:hover,
.articles .article-box .btn-readmore:hover { background-color: #212cc0; color: #fff; }

/* ========== Sidebar ========== */
/* Wrapper (parent template wraps this in .col-lg-4) */
.sidebar { display: flex; flex-direction: column; gap: 16px; }
.sidebar-sticky { position: sticky; top: calc(var(--nav-offset, 88px) + 16px); }
@media (max-width: 991.98px) { .sidebar-sticky { position: static; } }

/* Ensure sidebar content isn't clipped by parent columns */
.article-layout .col-lg-4 { overflow: visible; }

/* Boxes */
.r-box {
  background: #f9fafb;
  border: 1px solid #eef1f5;
  border-left: 4px solid #2937f0;
  border-radius: 12px;
  padding: 16px;
}
.r-box + .r-box { margin-top: 16px; } /* instead of margin-bottom to work with flex gap */

.r-box h6 {
  margin: 0 0 8px 0;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
}
.r-box p { color: #444; font-size: 0.95rem; margin: 0; }
.r-box a { word-break: break-word; overflow-wrap: anywhere; }

/* Two-column utility list */
.t-list { list-style: none; padding-left: 0; margin: 0; }
.t-list.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
}
@media (max-width: 576px) {
  .t-list.two { grid-template-columns: 1fr; }
}
.t-list li {
  position: relative;
  padding-left: 16px;
  color: #212529;
  font-size: 0.95rem;
  line-height: 1.4;
}
.t-list li::before {
  content: "•";
  position: absolute; left: 0; top: 0;
  color: #98a2b3;
}

/* Promo panels */
.r-box.promo { background: #f9f9ff; border-left-color: #7f8cff; }
.r-box .promo-link {
  color: #2937f0;
  text-decoration: underline;
  font-weight: 600;
  font-size: 0.95rem;
}
.r-box .promo-link:hover { color: #212cc0; text-decoration: underline; }

/* ========== Article detail layout (8/4 split) ========== */
/* Use: <div class="row article-layout"><div class="col-lg-8">…</div><div class="col-lg-4">…</div></div> */
.article-layout { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1rem; }

@media (min-width: 992px) {
  /* Make the article body fill its column (not centered/inset) */
  .articles .col-lg-8 .article-content,
  .articles .col-lg-9 .article-content {
    max-width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 24px; /* small breathing room near gutter */
  }
  /* Slightly tighter overall padding on desktop */
  .article-content { padding: 24px 0 40px; }
}

/* ========== Inline Promos (promo.php) ========== */
.promo-panel {
  background: #f6f9fc;
  border: 1px solid #eef1f5;
  border-left: 4px solid #2937f0;   /* NOC primary */
  border-radius: 12px;
  padding: 18px 20px;
  margin: 20px 0;
}
.promo-panel.is-compact { padding: 14px 16px; margin: 16px 0; }

.promo-wrap {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.promo-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: block;
}
.promo-icon .pi-stroke { stroke: #2937f0; fill: none; }
.promo-icon .pi-fill { fill: #e6edf4; } /* subtle fill for icons */

.promo-copy { flex: 1 1 260px; min-width: 240px; }
.promo-title {
  margin: 0 0 6px;
  color: #1a1a1a;
  font-weight: 700;
  line-height: 1.2;
}
.promo-desc {
  margin: 0 0 12px;
  color: #444;
}

/* CTA Button (NOC palette) */
/* CTA Button (standalone) */
.btn-cta {
  display: inline-block;
  background-color: #2937f0;
  color: #fff !important;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.btn-cta:hover,
.btn-cta:focus {
  background-color: #212cc0;
  color: #fff !important;
}
/* Make .btn-cta a proper Bootstrap variant */
.btn.btn-cta {
  /* Bootstrap custom properties so .btn renders correctly */
  --bs-btn-color: #fff;
  --bs-btn-bg: #2937f0;
  --bs-btn-border-color: #2937f0;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #212cc0;
  --bs-btn-hover-border-color: #212cc0;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1b23a8;
  --bs-btn-active-border-color: #1b23a8;

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #9aa6ff;
  --bs-btn-disabled-border-color: #9aa6ff;

  color: var(--bs-btn-color) !important;
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  border-radius: 8px;
  padding: 8px 14px;
  line-height: 1.2;
  text-decoration: none;
}
.btn.btn-cta:hover,
.btn.btn-cta:focus {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color) !important;
}

/* Search dropdown styling */
#searchResults {
  z-index: 1050;              /* above the navbar */
  max-height: 340px;
  overflow-y: auto;
  border-radius: 8px;
}
#searchResults .list-group-item {
  padding: 10px 12px;
}
#searchResults .list-group-item a {
  text-decoration: none;
}

/* Soft panel variant: no left accent, just subtle background */
.r-box.soft {
  background: #f9f9ff;           /* DNSArchive-style soft panel */
  border: 1px solid #eef1f5;
  border-left: none;              /* remove the left accent bar */
  border-radius: 12px;
}

/* Simple list variant: no custom bullets or left indent */
.t-list.simple { display: block; }
.t-list.simple li {
  padding-left: 0;
}
.t-list.simple li::before {
  content: none;
}

/* Make each card fill its column vertically */
.articles .article-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Footer locked to the bottom, button aligned right */
.articles .article-box .a-footer {
  margin-top: auto;                 /* push footer to bottom */
  padding: 12px 18px;
  border-top: 1px solid #eef1f5;
  font-size: 14px;
  color: #6c757d;

  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;   /* text left, button right */
}

.articles .article-box .a-footer .btn-readmore {
  white-space: nowrap;
}

/* Optional: clamp heights so rows look extra tidy */
.articles .article-box a.title h5{
  display: -webkit-box;
  -webkit-line-clamp: 2;            /* keep titles to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  min-height: calc(1.35em * 2);
}

.articles .article-box p{
  display: -webkit-box;
  -webkit-line-clamp: 3;            /* keep summaries to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
  min-height: calc(1.6em * 3);
  margin: 0;
}

/* ========== Article header spacing ========== */
.articles header { margin-bottom: 1rem !important; }
.articles header .text-muted.small { margin-top: .25rem; }