/* Hawaiʻi Cesspool Help shared navigation and content system, V1.8.0 */
:root {
  --hch-green: #0a7a58;
  --hch-green-dark: #075f45;
  --hch-deep: #0f2d25;
  --hch-deep-2: #173f34;
  --hch-coral: #a32a19;
  --hch-coral-hover: #842014;
  --hch-ink: #243a33;
  --hch-muted: #5f716a;
  --hch-bg: #f5f8f7;
  --hch-card: #ffffff;
  --hch-border: #d9e5e0;
  --hch-soft: #eaf5f0;
  --hch-radius: 14px;
  --hch-shadow: 0 8px 24px rgba(15, 45, 37, 0.08);
}

/* Navigation. These rules retain the approved home and start page header. */
.navbar {
  align-items: center;
  background: var(--hch-deep) !important;
  color: #fff;
  display: flex;
  gap: 12px;
  height: 70px;
  justify-content: space-between;
  left: 0;
  padding: 0 16px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10000;
}
.navbar .navbar-brand,
.navbar .navbar-brand:link,
.navbar .navbar-brand:visited {
  align-items: center;
  color: #fff !important;
  display: flex;
  flex: 1 1 auto;
  font-weight: 800;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}
.navbar .navbar-brand img { flex: 0 0 auto; height: 42px; width: 42px; border-radius: 8px; }
.navbar .navbar-brand span {
  color: #fff !important;
  display: block;
  font-size: clamp(1rem, 4vw, 1.18rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navbar .navbar-cta { display: none; }
.navbar .navbar-cta a {
  background: var(--hch-coral);
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  font-weight: 800;
  padding: 9px 17px;
  text-decoration: none;
  white-space: nowrap;
}
.navbar .navbar-cta a:hover,
.navbar .navbar-cta a:focus-visible { background: var(--hch-coral-hover); }
.navbar .nav-toggle {
  align-items: center;
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  cursor: pointer;
  display: inline-flex !important;
  flex: 0 0 48px;
  height: 48px;
  justify-content: center;
  margin: 0;
  padding: 10px !important;
  -webkit-text-fill-color: #fff !important;
}
.navbar .nav-toggle svg { display:block; fill:none; height:29px; stroke:#fff !important; stroke-linecap:round; stroke-width:2.5; width:29px; }
.navbar .nav-toggle:hover,
.navbar .nav-toggle:focus-visible { background: rgba(255,255,255,.09) !important; }
.navbar .nav-menu {
  background: rgba(15,45,37,.995);
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
  display: none;
  left: 0;
  max-height: calc(100dvh - 70px);
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 70px;
  z-index: 9999;
}
.navbar .nav-menu.open { display: block !important; }
.navbar .nav-menu > ul { display:block !important; list-style:none; margin:0; padding:8px 0 14px; }
.navbar .nav-menu li { border-top:1px solid rgba(255,255,255,.09); list-style:none; margin:0; padding:0; }
.navbar .nav-menu a,
.navbar .dropdown-toggle {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: #fff !important;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  justify-content: space-between;
  line-height: 1.3;
  min-height: 50px;
  padding: 13px 22px;
  text-align: left;
  text-decoration: none;
  width: 100%;
  -webkit-text-fill-color: #fff !important;
}
.navbar .nav-menu a[aria-current="page"] { background: rgba(255,255,255,.10); }
.navbar .nav-menu a:hover,
.navbar .dropdown-toggle:hover { background: rgba(255,255,255,.07); }
.navbar .nav-dropdown { position: relative; }
.navbar .dropdown-sub { background:rgba(0,0,0,.18); display:none; list-style:none; margin:0; padding:0 0 0 18px; position:static; }
.navbar .dropdown-sub.open { display:block !important; }
.navbar .dropdown-sub a { color:#dcefe7 !important; font-size:.95rem; font-weight:520; min-height:46px; padding:11px 22px; }
.navbar .nav-toggle:focus-visible,
.navbar .nav-menu a:focus-visible,
.navbar .dropdown-toggle:focus-visible { outline:2px solid #fff; outline-offset:2px; }
body.hch-menu-open { overflow:hidden; }

@media (min-width: 960px) {
  .navbar { padding: 0 28px; }
  .navbar .navbar-brand { flex:0 1 auto; }
  .navbar .navbar-brand img { height:44px; width:44px; }
  .navbar .navbar-brand span { font-size:1.08rem; }
  .navbar .navbar-cta { display:flex !important; left:50%; position:absolute; transform:translateX(-50%); }
  .navbar .nav-toggle { display:none !important; }
  .navbar .nav-menu { background:transparent; box-shadow:none; display:block !important; flex:0 0 auto; left:auto; max-height:none; overflow:visible; position:static; right:auto; top:auto; }
  .navbar .nav-menu > ul { align-items:center; display:flex !important; gap:18px; padding:0; }
  .navbar .nav-menu li { border:0; }
  .navbar .nav-menu a,
  .navbar .dropdown-toggle { display:inline-flex; min-height:44px; padding:0; width:auto; }
  .navbar .nav-menu a[aria-current="page"] { background:transparent; box-shadow: inset 0 -2px 0 #fff; }
  .navbar .dropdown-toggle { gap:5px; }
  .navbar .dropdown-sub { background:rgba(15,45,37,.995); border-radius:0 0 10px 10px; box-shadow:0 8px 20px rgba(0,0,0,.30); left:0; min-width:230px; padding:6px 0; position:absolute; top:100%; }
  .navbar .nav-dropdown:hover > .dropdown-sub,
  .navbar .nav-dropdown:focus-within > .dropdown-sub,
  .navbar .dropdown-sub.open { display:block !important; }
  .navbar .dropdown-sub a { display:flex; padding:9px 16px; width:100%; }
}

/* Shared content pages */
.hch-content-page,
.hch-content-page *,
.hch-content-page *::before,
.hch-content-page *::after { box-sizing: border-box; }
body.hch-content-page {
  background: var(--hch-bg) !important;
  color: var(--hch-ink) !important;
  overflow-wrap: break-word;
  padding-top: 70px;
}
body.hch-content-page::after { content:none !important; display:none !important; height:0 !important; }
.hch-content-page main.article,
.hch-content-page main.district-article,
.hch-content-page main.faq-page,
.hch-content-page .guide-inner,
.hch-content-page .blog-index,
.hch-content-page main:not(.article):not(.district-article):not(.faq-page) {
  margin-left:auto;
  margin-right:auto;
}
.hch-content-page main.article,
.hch-content-page main.faq-page,
.hch-content-page .guide-inner { max-width:780px !important; padding:42px 20px 96px !important; }
.hch-content-page main:not(.article):not(.district-article):not(.faq-page) { max-width:920px; }
.hch-content-page main.article > h1,
.hch-content-page main.article > header h1,
.hch-content-page main.district-article h1,
.hch-content-page main.faq-page > h1 {
  color:var(--hch-green) !important;
  font-size:clamp(1.9rem,7vw,2.7rem) !important;
  letter-spacing:-.025em;
  line-height:1.12 !important;
  margin-bottom:12px !important;
}
.hch-content-page header.hero {
  background:var(--hch-deep) !important;
  color:#fff !important;
}
.hch-content-page header.hero h1,
.hch-content-page header.hero p { color:#fff !important; -webkit-text-fill-color:#fff !important; }
.hch-content-page main h2,
.hch-content-page .blog-index h2 { color:var(--hch-green) !important; line-height:1.22; }
.hch-content-page main h3 { color:var(--hch-deep) !important; line-height:1.3; }
.hch-content-page main p,
.hch-content-page main li { color:var(--hch-ink) !important; font-size:1rem; line-height:1.72; }
.hch-content-page main a:not(.btn):not(.card-btn):not(.start-here-card),
.hch-content-page .resource-box a:not(.btn),
.hch-content-page .related-content a:not(.btn) {
  color:var(--hch-green-dark) !important;
  text-decoration:underline;
  text-decoration-color:currentColor !important;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.hch-content-page .article-byline,
.hch-content-page .page-updated { color:var(--hch-muted) !important; font-size:.9rem; }
.hch-content-page .article-byline > span { display:block; }

/* Breadcrumbs */
.hch-content-page .breadcrumb { color:var(--hch-muted); font-size:.9rem; margin:0 0 24px; }
.hch-content-page .breadcrumb ol { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; }
.hch-content-page .breadcrumb li { color:var(--hch-muted) !important; font-size:.9rem !important; line-height:1.45 !important; list-style:none; margin:0; padding:0; }
.hch-content-page .breadcrumb li:not(:last-child)::after { color:#87918e; content:"/"; margin-left:6px; }
.hch-content-page .breadcrumb a { color:var(--hch-green-dark) !important; text-decoration:none !important; }
.hch-content-page .breadcrumb [aria-current="page"] { color:var(--hch-deep); font-weight:650; }

/* Answer boxes and resource cards */
.hch-content-page .article-answer,
.hch-content-page .quick-answer,
.hch-content-page .faq-intro {
  background:var(--hch-soft) !important;
  border-left:5px solid var(--hch-green) !important;
  border-radius:12px !important;
  color:#24453b !important;
  font-size:1.06rem !important;
  line-height:1.68 !important;
  margin:20px 0 30px !important;
  padding:18px 20px !important;
}
.hch-content-page .related-content,
.hch-content-page .resource-box,
.hch-content-page .source-box {
  background:#fff !important;
  border:1px solid var(--hch-border) !important;
  border-radius:var(--hch-radius) !important;
  box-shadow:var(--hch-shadow);
  margin:30px 0;
  padding:20px 22px !important;
}
.hch-content-page .related-content h2,
.hch-content-page .resource-box h2,
.hch-content-page .source-box h2 { font-size:1.25rem; margin-top:0; }

/* Compact buttons */
.hch-content-page .btn,
.hch-content-page .card-btn {
  align-items:center !important;
  appearance:none;
  background:var(--hch-coral) !important;
  border:0 !important;
  border-radius:999px !important;
  color:#fff !important;
  display:inline-flex !important;
  font-size:1rem !important;
  font-weight:800 !important;
  justify-content:center;
  line-height:1.15 !important;
  max-width:100% !important;
  min-height:46px !important;
  min-width:0 !important;
  padding:12px 20px !important;
  text-decoration:none !important;
  white-space:normal;
  width:auto !important;
  -webkit-text-fill-color:#fff !important;
}
.hch-content-page .btn:hover,
.hch-content-page .btn:focus-visible,
.hch-content-page .card-btn:hover,
.hch-content-page .card-btn:focus-visible { background:var(--hch-coral-hover) !important; }

/* Lead panels */
.hch-content-page .bottom-cta,
.hch-content-page .conversion-panel,
.hch-content-page .district-next-step {
  background:var(--hch-deep) !important;
  border-radius:18px !important;
  color:#fff !important;
  margin:38px 0 30px !important;
  padding:28px 24px !important;
  text-align:center;
}
.hch-content-page .bottom-cta :is(h2,h3,p,li,strong,em,span),
.hch-content-page .conversion-panel :is(h2,h3,p,li,strong,em,span),
.hch-content-page .district-next-step :is(h2,h3,p,li,strong,em,span) {
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.hch-content-page .bottom-cta h2,
.hch-content-page .conversion-panel h2,
.hch-content-page .district-next-step h2 { margin-top:0; }
.hch-content-page .cta-actions { align-items:center; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:16px; }
.hch-content-page .cta-call,
.hch-content-page .bottom-cta a:not(.btn),
.hch-content-page .conversion-panel a:not(.btn),
.hch-content-page .district-next-step a:not(.btn) {
  color:#fff !important;
  font-weight:750;
  text-decoration:underline !important;
  text-underline-offset:4px;
  -webkit-text-fill-color:#fff !important;
}

/* Mobile lead button */
.hch-content-page .sticky-cta {
  align-items:center;
  background:var(--hch-coral) !important;
  border:0 !important;
  border-radius:999px !important;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  color:#fff !important;
  display:inline-flex !important;
  font-size:.95rem !important;
  font-weight:850 !important;
  justify-content:center;
  left:50%;
  line-height:1.15 !important;
  max-width:calc(100vw - 36px) !important;
  min-height:46px !important;
  padding:11px 18px !important;
  position:fixed;
  text-decoration:none !important;
  transform:translateX(-50%);
  transition:opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  white-space:nowrap;
  width:auto !important;
  z-index:9000;
  -webkit-text-fill-color:#fff !important;
}
.hch-content-page .sticky-cta.hidden { opacity:0; pointer-events:none; transform:translateX(-50%) translateY(18px); visibility:hidden; }
.hch-content-page.hch-has-sticky { padding-bottom:76px; }

/* Blog index */
.hch-blog-index .blog-index { max-width:1120px !important; padding:42px 20px 96px !important; }
.hch-blog-index .blog-intro {
  background:#fff !important;
  border:1px solid var(--hch-border) !important;
  border-top:5px solid var(--hch-green) !important;
  border-radius:16px !important;
  box-shadow:var(--hch-shadow);
  margin-bottom:26px !important;
  padding:24px !important;
}
.hch-blog-index .blog-intro h2 { font-size:1.42rem !important; margin:0 0 10px !important; }
.hch-blog-index .start-here-grid { display:grid; gap:12px; margin:0 0 36px; }
.hch-blog-index .start-here-card {
  background:var(--hch-soft);
  border:1px solid #cfe3da;
  border-radius:13px;
  color:var(--hch-deep) !important;
  display:block;
  font-weight:800;
  line-height:1.35;
  min-height:64px;
  padding:15px 16px;
  text-decoration:none !important;
}
.hch-blog-index .start-here-card span { color:var(--hch-muted); display:block; font-size:.84rem; font-weight:550; margin-top:4px; }
.hch-blog-index .section-title { border-bottom:2px solid var(--hch-green) !important; color:var(--hch-green) !important; font-size:1.42rem !important; margin:38px 0 16px !important; padding-bottom:9px; }
.hch-blog-index .article-group { display:grid; gap:16px; }
.hch-blog-index .article-card {
  background:#fff !important;
  border:1px solid var(--hch-border) !important;
  border-radius:var(--hch-radius) !important;
  box-shadow:var(--hch-shadow) !important;
  display:flex;
  flex-direction:column;
  gap:9px;
  min-width:0;
  padding:20px !important;
}
.hch-blog-index .card-category { background:var(--hch-deep) !important; color:#fff !important; font-size:.72rem; letter-spacing:.04em; }
.hch-blog-index .card-title,
.hch-blog-index .card-title a { color:var(--hch-green-dark) !important; }
.hch-blog-index .card-summary { color:#42584f !important; }
.hch-blog-index .card-btn { align-self:flex-start; margin-top:auto; }

/* District pages use the same reading width and visual rhythm as articles. */
.hch-district-page main.district-article { max-width:780px !important; padding:42px 20px 96px !important; }
.hch-district-page .district-header {
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:var(--hch-ink) !important;
  margin:0 0 28px !important;
  padding:0 !important;
  text-align:left !important;
}
.hch-district-page .district-kicker { color:var(--hch-green-dark) !important; font-size:.82rem !important; font-weight:850; letter-spacing:.075em !important; margin:0 0 9px !important; text-transform:uppercase; }
.hch-district-page .district-header h1 { color:var(--hch-green) !important; margin:0 0 14px !important; -webkit-text-fill-color:var(--hch-green) !important; }
.hch-district-page .district-header .district-lead { color:var(--hch-ink) !important; font-size:1.06rem !important; line-height:1.7 !important; margin:0 !important; max-width:none !important; -webkit-text-fill-color:var(--hch-ink) !important; }
.hch-district-page .district-snapshot {
  background:#fff !important;
  border:1px solid var(--hch-border) !important;
  border-left:5px solid var(--hch-green) !important;
  border-radius:var(--hch-radius) !important;
  box-shadow:var(--hch-shadow) !important;
  display:grid !important;
  gap:0 !important;
  margin:0 0 32px !important;
  padding:4px 20px !important;
}
.hch-district-page .district-card {
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--hch-border) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:18px 0 !important;
}
.hch-district-page .district-card:last-child { border-bottom:0 !important; }
.hch-district-page .district-card h2 { color:var(--hch-green) !important; font-size:1.08rem !important; margin:0 0 8px !important; }
.hch-district-page .district-card p { margin:0 !important; }
.hch-district-page .district-related { display:grid; gap:13px; grid-template-columns:1fr !important; margin:20px 0 34px; }
.hch-district-page .district-related a {
  background:#fff;
  border:1px solid var(--hch-border);
  border-radius:12px;
  color:var(--hch-green-dark) !important;
  display:block;
  font-weight:750;
  padding:15px 16px;
  text-decoration:none !important;
}

/* FAQ */
.hch-faq-page .faq-toc { background:#fff !important; border:1px solid var(--hch-border) !important; border-radius:14px !important; box-shadow:var(--hch-shadow); padding:18px !important; }
.hch-faq-page .faq-toc ul { margin:0 !important; }
.hch-faq-page .faq-toc a {
  align-items:center;
  background:var(--hch-soft) !important;
  border-radius:9px;
  color:var(--hch-green-dark) !important;
  display:flex;
  font-weight:750;
  line-height:1.35;
  min-height:44px;
  padding:10px 12px;
  text-decoration:none !important;
}
.hch-faq-page .faq-item { background:#fff !important; border:1px solid var(--hch-border) !important; border-radius:12px !important; margin:0 0 10px !important; overflow:hidden; }
.hch-faq-page .faq-item summary { color:var(--hch-deep) !important; cursor:pointer; font-weight:800; line-height:1.4; padding:16px 18px !important; }
.hch-faq-page .faq-answer { border-top:1px solid var(--hch-border); padding:0 18px 16px; }
.hch-faq-page .faq-section-title { margin-top:38px !important; }

/* Resource and comparison pages */
.hch-resource-page main.article ul,
.hch-resource-page main.article ol { padding-left:24px; }
.hch-resource-page main.article li { margin:7px 0; }
.hch-comparison-page .system-comparison { margin:22px 0 34px; }
.hch-comparison-page .system-comparison-table { background:#fff; border-collapse:separate !important; border-spacing:0; border:1px solid var(--hch-border); border-radius:14px; box-shadow:var(--hch-shadow); overflow:hidden; table-layout:fixed; width:100%; }
.hch-comparison-page .system-comparison-table th,
.hch-comparison-page .system-comparison-table td { border:0 !important; border-bottom:1px solid var(--hch-border) !important; border-right:1px solid var(--hch-border) !important; padding:14px !important; text-align:left; vertical-align:top; white-space:normal !important; word-break:normal; }
.hch-comparison-page .system-comparison-table th:last-child,
.hch-comparison-page .system-comparison-table td:last-child { border-right:0 !important; }
.hch-comparison-page .system-comparison-table tbody tr:last-child td { border-bottom:0 !important; }
.hch-comparison-page .system-comparison-table th { background:var(--hch-deep) !important; color:#fff !important; font-size:.9rem; line-height:1.3; }
.hch-comparison-page .system-comparison-table td:first-child { color:var(--hch-green-dark) !important; font-weight:850; }

/* Footer */
.hch-content-page footer { background:var(--hch-deep) !important; color:#dcefe7 !important; line-height:1.55; margin-top:0 !important; }
.hch-content-page footer a { color:#aeead2 !important; }

@media (min-width:680px) {
  .hch-blog-index .start-here-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hch-blog-index .article-group { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (min-width:720px) {
  .hch-district-page main.district-article { padding:56px 26px 108px !important; }
  .hch-district-page .district-snapshot { grid-template-columns:repeat(3,minmax(0,1fr)) !important; padding:0 !important; }
  .hch-district-page .district-card { border-bottom:0 !important; border-right:1px solid var(--hch-border) !important; padding:20px !important; }
  .hch-district-page .district-card:last-child { border-right:0 !important; }
}
@media (min-width:768px) {
  .hch-content-page .sticky-cta { display:none !important; }
  .hch-content-page.hch-has-sticky { padding-bottom:0; }
  .hch-content-page main.article,
  .hch-content-page main.faq-page,
  .hch-content-page .guide-inner { padding:56px 26px 104px !important; }
}
@media (min-width:1040px) {
  .hch-blog-index .start-here-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hch-blog-index .article-group.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width:767px) {
  .hch-content-page .cta-actions { flex-direction:column !important; }
  .hch-content-page .cta-actions .btn { width:auto !important; }
}
@media (max-width:700px) {
  .hch-comparison-page .system-comparison-table,
  .hch-comparison-page .system-comparison-table tbody,
  .hch-comparison-page .system-comparison-table tr,
  .hch-comparison-page .system-comparison-table td { display:block !important; width:100% !important; }
  .hch-comparison-page .system-comparison-table { background:transparent; border:0; box-shadow:none; }
  .hch-comparison-page .system-comparison-table thead { border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; }
  .hch-comparison-page .system-comparison-table tbody { display:grid !important; gap:16px; }
  .hch-comparison-page .system-comparison-table tr { background:#fff; border:1px solid var(--hch-border); border-radius:14px; box-shadow:var(--hch-shadow); overflow:hidden; }
  .hch-comparison-page .system-comparison-table td { border:0 !important; border-top:1px solid var(--hch-border) !important; padding:14px 16px !important; }
  .hch-comparison-page .system-comparison-table td:first-child { background:var(--hch-deep); border-top:0 !important; color:#fff !important; font-size:1.12rem; }
  .hch-comparison-page .system-comparison-table td:not(:first-child)::before { color:var(--hch-green-dark); content:attr(data-label); display:block; font-size:.76rem; font-weight:850; letter-spacing:.055em; margin-bottom:5px; text-transform:uppercase; }
}

/* HCH STICKY BOTTOM POSITION V1.8.3 */
@media (max-width:767px) {
  .sticky-cta {
    top:auto !important;
    right:auto !important;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left:50% !important;
    transform:translateX(-50%) !important;
  }
}