/* County Document Banner */
.county-document-banner {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  background-color: #135B64;
  width: 100%;
  margin: 0;
}

.county-document-banner h1 {
  font-size: 30px;
  color: white;
  margin: 0;
  padding: 40px 0;
}

/* Mobile: smaller heading, explicit centering so a wrapped second line
   doesn't default to left-aligned text, and side padding so text doesn't
   run to the screen edge. */
@media screen and (max-width: 767px) {
  .county-document-banner {
    padding: 0 50px;
  }

  .county-document-banner h1 {
    font-size: 22px;
    text-align: center;
  }
}

/* Long unbroken tokens (URLs, citations, serial numbers) in document body
   text can force the page wider than the viewport. Break them at any point
   rather than letting them overflow. */
.node--type-county-document .field--name-body {
  overflow-wrap: anywhere;
}

/* Document read view: Policy Hub layout — sections menu in left sidebar
   (flyout drawer on mobile via shared policy-hub classes/JS), document
   content on the right. Banner + divider + title render inside the node
   template via the shared partial. */
.county-doc__title {
  text-align: center;
  margin: 0 0 20px;
}

.county-doc__title h2 {
  color: #063047;
  margin: 0;
}

.county-doc__back-wrapper {
  margin-bottom: 20px;
}

.county-doc__back {
  display: inline-block;
  color: #135B64;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 0;
}

.county-doc__back:hover {
  text-decoration: underline;
}

/* In-document sections menu (built by county-document.js) */
.county-doc__toc-heading {
  font-weight: 600;
  color: #063047;
  font-size: 14px;
  margin-bottom: 8px;
}

.county-doc__toc ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.county-doc__toc ul ul {
  padding-left: 16px;
}

.county-doc__toc li {
  margin: 6px 0;
}

.county-doc__toc a {
  color: #135B64;
  text-decoration: none;
  font-size: 14px;
}

.county-doc__toc a:hover {
  text-decoration: underline;
}

/* ─── Print button ───────────────────────────────────────────────────────── */
.county-doc__print {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 20px;
  padding: 6px 14px;
  font-size: 14px;
  border: 1px solid #135B64;
  border-radius: 4px;
  background: transparent;
  color: #135B64;
  cursor: pointer;
}

.county-doc__print:hover {
  background-color: #135B64;
  color: #fff;
}

.county-doc__print::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ─── Print layout ───────────────────────────────────────────────────────────
   This file loads sitewide (global-styling), so every rule below is scoped
   under body.node--type-county-document to avoid affecting print output on
   any other content type. #dgco-border/#topBtn/header/.site-footer are global
   page chrome from page.html.twig — reached via the body class rather than by
   editing that shared template (see CLAUDE.md). */
@media print {
  /* Site chrome: header, footer, decorative borders, back-to-top button. */
  body.node--type-county-document header,
  body.node--type-county-document .site-footer,
  body.node--type-county-document #dgco-border,
  body.node--type-county-document #topBtn,
  /* Hub/nav chrome: banner, divider, mobile section toggle, back-to-hub link,
     and the print button itself. */
  body.node--type-county-document .county-document-banner,
  body.node--type-county-document .dgco-border,
  body.node--type-county-document .policy-hub__filter-toggle,
  body.node--type-county-document .county-doc__back-wrapper,
  body.node--type-county-document .county-doc__print {
    display: none !important;
  }

  /* .policy-hub__layout/.policy-hub__sidebar are a fixed-position mobile
     flyout and a desktop grid column on screen — neither renders usefully in
     print. Force a single stacked column so the sidebar (which in the DOM
     comes before the main content, and after the back-link above is hidden
     contains only the TOC) prints as its own full-width section ahead of the
     document body, the way a book's TOC precedes its body on the page. */
  body.node--type-county-document .policy-hub__layout {
    display: block;
    width: 100%;
  }

  body.node--type-county-document .policy-hub__sidebar {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    background: none;
    z-index: auto;
    overflow: visible;
  }

  body.node--type-county-document .policy-hub__filters-wrapper {
    width: 100%;
    max-width: none;
    height: auto;
    padding: 0;
    box-shadow: none;
    position: static;
    overflow: visible;
    border-bottom: 1pt solid #000;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }

  body.node--type-county-document .policy-hub__main {
    padding: 0;
  }

  /* TOC anchors are inert in print (no clickable links on paper) — that's
     expected, it's a visual reference list like a printed book's TOC. */
  body.node--type-county-document .county-doc__toc a {
    color: inherit;
    text-decoration: none;
  }
}