/* =========================================================
   INNER-PAGE.CSS — Public Health Engineering Department, Government of Meghalaya
   Inner pages: banner (title + breadcrumb), one-column page content,
   tables, PDF labels, images and videos.
   Load after style.css, footer.css, accessibility-style.css and phe-content.css.
   All colours and font sizes are the tokens from style.css (:root).
   ========================================================= */


/* ---------- Banner: photo with a dark key-colour overlay ----------
   Uses the homepage banner photo. To use another photo, change the url(). */
.banner { position: relative; z-index: 1; margin: 0; clear: both; }
.banner .banner_inner {
  min-height: 15rem;
  padding: 3rem 5rem;
  background-color: var(--dbim-wintergreen-dream);
  background-image:
    linear-gradient(90deg, rgba(14, 30, 68, .92) 0%, rgba(var(--dbim-shadow-rgb), .80) 55%, rgba(var(--dbim-shadow-rgb), .65) 100%),
    url("../images/banner/banner-1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.banner .banner_content { max-width: 120rem; }
/* Page title (Bootstrap's .fs-4 would make it 15px) */
.banner .banner_logo p,
.banner .banner_logo p.fs-4 {
  margin: 0 0 1rem;
  color: var(--dbim-white);
  font-size: var(--dbim-fs-h1-sm) !important;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.breadcrumb-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--dbim-white);
  font-size: var(--dbim-fs-label);
  font-weight: 700;
  line-height: 1.5;
}
.breadcrumb-trail li { display: inline-flex; align-items: center; }
.breadcrumb-trail li + li::before {
  content: "\00BB";                    /* » */
  margin: 0 .8rem;
  color: var(--dbim-white);
  font-weight: 400;
}
.banner .breadcrumb-trail a {
  color: var(--dbim-white);
  font-size: var(--dbim-fs-p1);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: .3rem;
}
.banner .breadcrumb-trail a:hover { color: var(--dbim-azureish-white-bg); text-decoration-thickness: 2px; }
.banner .breadcrumb-trail a:focus-visible {
  outline: 3px solid var(--dbim-white);
  outline-offset: 2px;
  border-radius: 2px;
}
.breadcrumb-trail [aria-current="page"] { font-weight: 700; }

@media (max-width: 768px) {
  .banner .banner_inner { min-height: 12rem; padding: 2rem; }
  .banner .banner_logo p,
  .banner .banner_logo p.fs-4 { font-size: var(--dbim-fs-h2-sm) !important; }
  .breadcrumb-trail,
  .banner .breadcrumb-trail a { font-size: var(--dbim-fs-p2); }
  .breadcrumb-trail li + li::before { margin: 0 .6rem; }
}

/* ---------- Layout: one column, no sidebar ---------- */
.waw.inner-page { padding: 3.2rem 0 4.8rem; }
.waw.inner-page .waw-inner.no-sidebar { display: block; }
.waw.inner-page .waw-left.page-content {
  max-width: 120rem;
  margin: 0 auto;
  padding: 1rem 0 2.4rem;
}
.waw.inner-page .explore_head { margin-bottom: 2.8rem; }
.waw.inner-page .explore_head h1 { margin: 0; font-size: var(--dbim-fs-h1-md); line-height: 1.25; }
.waw.inner-page .explore_head span { max-width: calc(100% - 180px); }

@media (max-width: 767px) {
  .waw.inner-page { padding: 2rem 0 3.2rem; }
  .waw.inner-page .explore_head h1 { font-size: var(--dbim-fs-h1-sm); }
  .waw.inner-page .explore_head span { max-width: 100%; padding: 0; font-size: inherit; }   /* style.css sets 1.15rem (≈12px) */
  .waw.inner-page .explore_head span::before,
  .waw.inner-page .explore_head span::after { display: none; }
}

/* ---------- Page text ---------- */
.page-content .grid {
  display: block;
  color: var(--dbim-dark-text);
  font-size: var(--dbim-fs-p1);
  line-height: 1.7;
}
.page-content .grid p,
.page-content .grid li,
.page-content .grid td,
.page-content .grid th { font-size: var(--dbim-fs-p1); line-height: 1.6; }
.page-content .grid p { margin: 0 0 1.6rem; }
.page-content .grid h2 {
  margin: 3.2rem 0 1.4rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--dbim-line);
  color: var(--dbim-wintergreen-dream);
  font-size: var(--dbim-fs-h2);
  font-weight: 700;
  line-height: 1.3;
}
.page-content .grid h2:first-child { margin-top: 0; }
.page-content .grid h3 {
  margin: 2.4rem 0 1rem;
  color: var(--dbim-wintergreen-dream);
  font-size: var(--dbim-fs-h3);
  font-weight: 700;
  line-height: 1.35;
}
.page-content .grid ul,
.page-content .grid ol { margin: 0 0 2rem; padding-left: 2.4rem; }
.page-content .grid li { margin-bottom: .8rem; }
.page-content .grid li::marker { color: var(--dbim-powder-blue); }

.waw .page-content .grid a {
  color: var(--dbim-text-accent);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.waw .page-content .grid a:hover { color: var(--dbim-wintergreen-dream); text-decoration-thickness: 2px; }
.page-content .grid a:focus-visible {
  outline: 3px solid var(--dbim-wintergreen-dream);
  outline-offset: 2px;
  border-radius: 2px;
}

/* "(PDF, 148KB)" after a link */
.page-content .file-type { color: var(--dbim-text-muted); font-size: .9em; font-weight: 400; white-space: nowrap; }
/* Old pdf icon gifs that are still inside some lists */
.page-content img[src$="iconpdf.gif"] { display: inline; width: 16px; height: 16px; margin: 0 .3rem; vertical-align: -2px; }

/* ---------- Tables ---------- */
.page-content .table-responsive { margin-bottom: 2.4rem; }
.page-content .grid table {
  width: 100%;
  margin-bottom: 2.4rem;
  border-collapse: collapse;
  background: var(--dbim-white);
}
.page-content .grid table th,
.page-content .grid table td {
  padding: 1rem 1.2rem;
  border: 1px solid var(--dbim-line);
  text-align: left;
  vertical-align: top;
}
.page-content .grid table th,
.page-content .grid table thead td {
  background: var(--dbim-wintergreen-dream);
  color: var(--dbim-white);
  font-weight: 700;
}
.page-content .grid table th a,
.page-content .grid table thead td a { color: var(--dbim-white) !important; }
.page-content .grid table tbody tr:nth-child(even) > td { background: var(--dbim-surface-tint); }

/* ---------- Images and videos ---------- */
.page-content .grid img { max-width: 100%; height: auto; }
.page-content .grid iframe,
.page-content .grid video { display: block; max-width: 100%; margin: 0 auto 2rem; border: 0; }
.page-content .grid .ratio { margin-bottom: 2rem; }

/* ---------- Short intro line + "View the archive" link ---------- */
.page-content .page-intro { margin: 0 0 2.4rem; font-size: var(--dbim-fs-p1); line-height: 1.6; }
.page-content .archive-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  margin-top: 1.2rem;
  padding: .8rem 2rem;
  border: 2px solid var(--dbim-wintergreen-dream);
  border-radius: .6rem;
  color: var(--dbim-wintergreen-dream) !important;
  font-weight: 700;
  text-decoration: none !important;
}
.page-content .archive-link:hover { background: var(--dbim-wintergreen-dream); color: var(--dbim-white) !important; }