<style>
/* ============================================
   TOPO MAPS+ HELP SCOUT - CLEAN GREEN STYLE
   Version 12 - Gradients over content, border fix
   ============================================ */

/* Brand fonts — match topomaps.co (Archivo display/body, IBM Plex Mono labels) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Sunlit palette — matches topomaps.co (warm neutrals, green primary, trail-orange accent) */
  --forest-green: #17620f;          /* sunlit.brand */
  --forest-green-light: #2d8a23;
  --forest-green-lighter: #eef3ec;  /* sunlit.brandTint (warm green tint) */
  --forest-green-dark: #124a0b;     /* sunlit.brandHover */
  --accent: #dd6a2e;                /* sunlit.accent (trail orange) */
  --accent-deep: #c2571f;           /* sunlit.accentDeep */
  --white: #ffffff;                 /* sunlit.paper */
  --off-white: #fbfaf7;             /* sunlit.bg (warm paper) */
  --light-gray: #f2f0e9;            /* sunlit.bgAlt */
  --medium-gray: #d8d4c8;           /* sunlit.line2 (warm border) */
  --text-dark: #1b1e1a;             /* sunlit.ink */
  --text-medium: #44483f;           /* sunlit.ink2 */
  --text-muted: #7a7d70;            /* sunlit.ink3 */
  --transition-smooth: all 0.2s ease;
  --border-radius: 16px;
  --border-radius-small: 10px;
}

/* ---------- BRAND TYPOGRAPHY ---------- */
body,
.navbar .brand,
#fullArticle, article {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
h1, h2, h3, h4,
.category-list .category h3,
#docsSearch h1,
#fullArticle h1, #fullArticle h2, #fullArticle h3,
article h1, article h2, article h3 {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  letter-spacing: -0.01em !important;
}

/* ---------- BODY BACKGROUND ---------- */
body {
  background-color: var(--off-white) !important;
  -webkit-font-smoothing: antialiased;
  position: relative !important;
}

/* ---------- COLORFUL CORNER DECORATIONS ---------- */
body::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle at top left, rgba(76, 175, 80, 0.35) 0%, transparent 60%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
body::after {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle at top right, rgba(221, 106, 46, 0.22) 0%, transparent 60%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ---------- NAVBAR ---------- */
.navbar,
.navbar-inner {
  background: var(--off-white) !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 56px !important;
}
.navbar .brand {
  color: var(--text-dark) !important;
  font-weight: 600 !important;
}

/* ---------- iOS/ANDROID PILL TABS ---------- */
.navbar .nav {
  background: var(--light-gray) !important;
  border-radius: 50px !important;
  padding: 4px 6px !important;
  margin: 10px 15px 0 0 !important;
  float: right !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
}
.navbar .nav li {
  display: inline-block !important;
  float: none !important;
}
.navbar .nav li a {
  background: transparent !important;
  border-radius: 50px !important;
  padding: 6px 16px !important;
  color: var(--text-dark) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: var(--transition-smooth) !important;
}
.navbar .nav li a:hover {
  background: var(--medium-gray) !important;
}
.navbar .nav .active a,
.navbar .nav li.active a {
  background: var(--white) !important;
  color: var(--text-dark) !important;
}

/* ---------- HEADER/SEARCH SECTION ---------- */
#docsSearch {
  background: var(--off-white) !important;
  padding: 60px 20px 50px 20px !important;
  margin-top: 0 !important;
  min-height: auto !important;
  border: none !important;
}
#docsSearch h1 {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: var(--text-dark) !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 24px !important;
}

/* ---------- SEARCH BAR ---------- */
#searchBar {
  background: transparent !important;
  border-radius: 50px !important;
  box-shadow: none !important;
  overflow: visible !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  border: none !important;
  position: relative !important;
  height: 50px !important;
}
#searchBar .search-query {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: calc(100% - 100px) !important;
  height: 50px !important;
  background: var(--white) !important;
  border: 2px solid var(--medium-gray) !important;
  border-right: none !important;
  border-radius: 50px 0 0 50px !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  outline: none !important;
  transition: var(--transition-smooth) !important;
}
#searchBar .search-query:focus {
  border-color: var(--forest-green) !important;
  outline: none !important;
}
#searchBar button {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 100px !important;
  height: 50px !important;
  background: var(--forest-green) !important;
  border: none !important;
  border-radius: 0 50px 50px 0 !important;
  color: var(--white) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: var(--transition-smooth) !important;
}
#searchBar button:hover {
  background: var(--forest-green-dark) !important;
}

/* ---------- SEARCH RESULTS DROPDOWN ---------- */
#serp-dd {
  border-radius: var(--border-radius-small) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid var(--medium-gray) !important;
}
#serp-dd .result a {
  color: var(--text-dark) !important;
  padding: 12px 16px !important;
}
#serp-dd .result a:hover {
  background: var(--off-white) !important;
}

/* ---------- SECTION HEADERS (BOLD) ---------- */
.contentWrapper > h2,
.content-wrapper > h2,
h2.collection-name,
.collection h2 {
  font-weight: 800 !important;
  color: var(--text-dark) !important;
  font-size: 1.6rem !important;
  margin: 40px 0 20px 0 !important;
  padding-left: 0 !important;
  text-align: center !important;
}

/* ---------- CONTENT WRAPPER ---------- */
.contentWrapper,
.content-wrapper,
.container,
.container-fluid,
.main-content,
main,
.page-content {
  padding-left: 40px !important;
  padding-right: 40px !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- GREY BOX FIX - FORCE TRANSPARENT ---------- */
.contentWrapper,
.content-wrapper,
div[class*="content"],
.main-content,
main {
  background: var(--off-white) !important;
  background-color: var(--off-white) !important;
}
.category-list-wrapper,
.categories-container,
.home-content,
.docs-content,
section,
.section,
.categories,
.collections,
div.row,
.row-fluid,
.span12,
.span9,
.span8,
.span6,
.span4,
.span3 {
  background: transparent !important;
  background-color: transparent !important;
}
body > div,
body > main,
body > section,
#content,
.content,
#main,
.main,
.wrapper,
.page-wrapper,
.site-content {
  background: transparent !important;
  background-color: transparent !important;
}

/* ===========================================
   CATEGORY LIST - WRAPPING GRID (8 CATEGORIES)
   =========================================== */
.category-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 16px !important;
  padding: 10px 20px 20px 20px !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.category-list::after {
  content: '' !important;
  display: table !important;
  clear: both !important;
}

/* ---------- CATEGORY CARDS ---------- */
.category-list .category {
  background: var(--white) !important;
  border: 1px solid var(--medium-gray) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  padding: 24px !important;
  transition: var(--transition-smooth) !important;
  position: relative;
  min-height: 160px !important;
  width: 180px !important;
  min-width: 180px !important;
  flex: 0 0 180px !important;
  max-width: 180px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
.category-list .category::before {
  display: none !important;
}
.category-list .category:hover {
  border-color: var(--forest-green) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  transform: none !important;
  background: var(--white) !important;
}
.category-list .category:hover h2,
.category-list .category:hover h3,
.category-list .category:hover p,
.category-list .category:hover a,
.category-list .category a:hover {
  text-decoration: none !important;
}

/* ---------- CATEGORY ICONS - SVG (No Font Awesome!) ---------- */
.category-list .category h3::before {
  content: '' !important;
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 12px auto !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* 1 - New Users */
.category-list .category:nth-child(1) h3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%2317620f' d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312V248H440c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V136c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H552v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/svg%3E") !important;
}

/* 2 - Topo Maps+ Account */
.category-list .category:nth-child(2) h3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2317620f' d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z'/%3E%3C/svg%3E") !important;
}

/* 3 - Map Tools */
.category-list .category:nth-child(3) h3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%2317620f' d='M384 476.1L192 421.2V35.9L384 90.8V476.1zm32-1.2V88.4L543.1 37.5c15.8-6.3 32.9 5.3 32.9 22.3V394.6c0 9.8-6 18.6-15.1 22.3L416 474.8zM15.1 95.1L160 37.2V423.6L32.9 474.5C17.1 480.8 0 469.2 0 452.2V117.4c0-9.8 6-18.6 15.1-22.3z'/%3E%3C/svg%3E") !important;
}

/* 4 - Planning Tools */
.category-list .category:nth-child(4) h3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2317620f' d='M177.9 494.1c-18.7 18.7-49.1 18.7-67.9 0L17.9 401.9c-18.7-18.7-18.7-49.1 0-67.9L378.3 0l133.7 133.7L177.9 494.1zm98.6-290.7l-28.3-28.3 28.3-28.3 28.3 28.3-28.3 28.3zm72.5-72.5L320.7 102.6l28.3-28.3 28.3 28.3-28.3 28.3zm-145 145l-28.3-28.3 28.3-28.3 28.3 28.3-28.3 28.3z'/%3E%3C/svg%3E") !important;
}

/* 5 - On-Trail Tools */
.category-list .category:nth-child(5) h3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%2317620f' d='M192 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm51.3 182.7L224.2 307l49.7 49.7c9 9 14.1 21.2 14.1 33.9V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V397.3l-73.9-73.9c-15.8-15.8-22.2-38.6-16.9-60.3l20.4-84c8.3-34.1 42.7-54.9 76.7-46.4c19 4.8 35.6 16.4 46.4 32.7L305.1 208H336V184c0-13.3 10.7-24 24-24s24 10.7 24 24v55.8c0 .1 0 .2 0 .2s0 .2 0 .2V488c0 13.3-10.7 24-24 24s-24-10.7-24-24V272H296.6c-16 0-31-8-39.9-21.4l-13.3-20zM81.1 471.9L117.3 334c3 4.2 6.4 8.2 10.1 11.9l41.9 41.9L142.9 488.1c-4.5 17.1-22 27.3-39.1 22.8s-27.3-22-22.8-39.1zm55.5-346L101.4 266.5c-3 12.1-14.9 19.9-27.2 17.9l-47.9-8c-14-2.3-22.9-16.3-19.2-30L31.9 155c9.5-34.8 41.1-59 77.2-59h4.2c15.6 0 27.1 14.7 23.3 29.8z'/%3E%3C/svg%3E") !important;
}

/* 6 - Apple Watch */
.category-list .category:nth-child(6) h3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2317620f' d='M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.5 33.3-6.5s4.5-25.9-6.5-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E") !important;
}

/* 7 - Apple CarPlay */
.category-list .category:nth-child(7) h3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2317620f' d='M135.2 117.4L109.1 192H402.9l-26.1-74.6C372.3 104.6 360.2 96 346.6 96H165.4c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32H346.6c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2V400v48c0 17.7-14.3 32-32 32H416c-17.7 0-32-14.3-32-32V400H128v48c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V400 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/%3E%3C/svg%3E") !important;
}

/* 8 - Additional Options and Settings */
.category-list .category:nth-child(8) h3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2317620f' d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/svg%3E") !important;
}

.category-list .category h3 {
  color: var(--text-dark) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  margin-bottom: 8px !important;
}
.category-list .category p {
  color: var(--text-medium) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
}
.category-list .category .article-count {
  color: var(--accent) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* ===========================================
   SIDEBAR - WHITE BACKGROUND + GREEN HOVER
   =========================================== */
.sidebar,
aside,
.categoryList,
.category-sidebar,
nav.categories,
.categories-nav {
  background: var(--white) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 24px !important;
  min-height: 400px !important;
  height: auto !important;
}
.sidebar h3,
.sidebar h4,
aside h3,
aside h4,
.categoryList h3,
.categoryList h4,
.sidebar .title,
aside .title {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--accent-deep) !important;
  margin-bottom: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}
.sidebar a,
aside a,
.categoryList a,
.category-sidebar a,
nav.categories a,
.categories-nav a,
.sidebar li a,
aside li a {
  font-size: 16px !important;
  padding: 12px 8px !important;
  display: block !important;
  color: var(--text-dark) !important;
  line-height: 1.5 !important;
  border-radius: 6px !important;
  transition: var(--transition-smooth) !important;
}
.sidebar a:hover,
aside a:hover,
.categoryList a:hover,
.category-sidebar a:hover,
nav.categories a:hover,
.categories-nav a:hover,
.sidebar li a:hover,
aside li a:hover {
  color: var(--forest-green) !important;
  background: var(--forest-green-lighter) !important;
}
.sidebar li,
aside li,
.categoryList li {
  margin-bottom: 4px !important;
  list-style: none !important;
}
.sidebar ul,
aside ul,
.categoryList ul {
  padding-left: 0 !important;
  margin: 0 !important;
}
.sidebar .active a,
aside .active a,
.categoryList .active a,
.sidebar li.active a,
aside li.active a {
  color: var(--forest-green) !important;
  font-weight: 600 !important;
  background: var(--forest-green-lighter) !important;
}

/* ===========================================
   SORT DROPDOWN
   =========================================== */
select,
.sort-select,
select.sort,
.sortBy,
.sort-by,
select[name="sort"],
.articleList select,
.articles select,
.content select,
#sortBy,
.sort-dropdown {
  min-width: 200px !important;
  width: auto !important;
  height: auto !important;
  padding: 12px 40px 12px 16px !important;
  font-size: 14px !important;
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: #1b1e1a !important;
  line-height: 1.4 !important;
  border: 1px solid var(--medium-gray) !important;
  border-radius: 10px !important;
  background-color: #ffffff !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231b1e1a' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
select option {
  color: #1b1e1a !important;
  background: #ffffff !important;
  padding: 12px !important;
  font-size: 14px !important;
}

/* ===========================================
   MAIN CONTENT/ARTICLE BOX - ALL BORDERS REMOVED
   =========================================== */
.collection,
.collection.collection,
div.collection,
.twoCol .collection,
.threeCol .collection,
.article-list-container,
.articles-container,
.content-main,
.main-content-area,
#mainContent,
.mainContent {
  background: var(--white) !important;
  border: none !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 24px !important;
  margin: 12px !important;
  transition: var(--transition-smooth) !important;
}
.collection:hover,
.collection.collection:hover {
  border: none !important;
  transform: none !important;
  box-shadow: none !important;
}
.collection a {
  color: var(--text-dark) !important;
}

/* Extra sweep: catch any leftover Help Scout wrappers */
.twoCol > div,
.threeCol > div,
.row-fluid > div[class*="span"],
.mainCol,
.main-col,
#mainCol {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ===========================================
   ARTICLE HOVER
   =========================================== */
.articleList li,
.articles li,
.article-item,
ul.articles > li,
.article-list li {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--light-gray) !important;
  transition: var(--transition-smooth) !important;
  border-radius: 0 !important;
  margin: 0 -16px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  display: block !important;
  width: calc(100% + 32px) !important;
}
.articleList li:hover,
.articles li:hover,
.article-item:hover,
ul.articles > li:hover,
.article-list li:hover {
  background: var(--off-white) !important;
  padding-left: 20px !important;
}
.articleList li a,
.articles li a,
.article-item a,
ul.articles > li a,
.article-list li a {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ===========================================
   ARTICLE PAGE IMAGES
   =========================================== */
#fullArticle img,
.article-content img,
.article img,
.articleBody img,
.article-body img {
  max-width: 450px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 20px auto !important;
  border-radius: var(--border-radius-small) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ===========================================
   ARTICLE PAGE - SINGLE WHITE BOX
   =========================================== */
article,
.article,
.article-wrapper,
.article-content,
.articleBody,
.article-body,
#fullArticle,
.paper,
.paper-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Apply white box ONLY to the main article container - NO border or shadow */
.contentWrapper article,
.content-wrapper article,
main article,
.mainCol article,
.main-column article,
#mainCol article {
  background: var(--white) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 40px !important;
  margin: 0 !important;
  max-width: 100% !important;
  line-height: 1.7 !important;
}

.contentWrapper article > *,
.content-wrapper article > *,
main article > *,
.mainCol article > *,
.main-column article > *,
#mainCol article > * {
  background: transparent !important;
}

/* Restore image styling inside articles */
.contentWrapper article img,
.content-wrapper article img,
main article img,
.mainCol article img {
  border-radius: var(--border-radius-small) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Two-column layout containers */
.twoCol .mainCol,
.twoCol .main-column,
.twoCol .span8,
.twoCol .span9,
.with-sidebar .mainCol,
.with-sidebar .main-column {
  background: transparent !important;
}
.twoCol .mainCol > article,
.twoCol .main-column > article,
.twoCol .span8 > article,
.twoCol .span9 > article {
  background: var(--white) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 40px !important;
}

.twoCol .mainCol > article > *,
.twoCol .main-column > article > *,
.twoCol .span8 > article > *,
.twoCol .span9 > article > * {
  background: transparent !important;
}

/* Restore content spacing */
.twoCol .mainCol > article h1,
.twoCol .mainCol > article h2,
.twoCol .mainCol > article h3,
.twoCol .mainCol > article p,
.twoCol .mainCol > article ul,
.twoCol .mainCol > article ol {
  margin-bottom: 16px !important;
}

#fullArticle h1,
#fullArticle h2,
#fullArticle h3,
article h1,
article h2,
article h3 {
  color: var(--text-dark) !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
  background: transparent !important;
}
#fullArticle p,
#fullArticle li,
article p,
article li {
  color: var(--text-medium) !important;
  margin-bottom: 14px !important;
  background: transparent !important;
}

/* Article links - green with underline */
#fullArticle a,
article a,
.contentWrapper article a {
  color: var(--forest-green) !important;
  text-decoration: underline !important;
}

/* ---------- POPULAR ARTICLES ---------- */
.most-pop-articles .popArticles a {
  color: var(--text-dark) !important;
}
.most-pop-articles .popArticles a:hover {
  color: var(--text-medium) !important;
}

/* ---------- LINKS (global base) ---------- */
a {
  color: var(--text-dark) !important;
  text-decoration: none !important;
  transition: var(--transition-smooth) !important;
}
a:hover {
  color: var(--forest-green) !important;
  text-decoration: none !important;
}

/* ===========================================
   FOOTER
   =========================================== */
footer,
.footer {
  background: var(--off-white) !important;
  background-color: var(--off-white) !important;
  clear: both !important;
  position: relative !important;
  z-index: 1 !important;
  color: var(--text-medium) !important;
  padding: 40px 24px !important;
  margin-top: 40px !important;
  border-top: 1px solid var(--medium-gray) !important;
}
footer a,
.footer a {
  color: var(--text-dark) !important;
}
footer a:hover,
.footer a:hover {
  color: var(--forest-green) !important;
}

/* ---------- FORMS ---------- */
textarea {
  border: 2px solid var(--medium-gray) !important;
  border-radius: var(--border-radius-small) !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  transition: var(--transition-smooth) !important;
}
textarea:focus,
select:focus {
  border-color: var(--forest-green) !important;
  outline: none !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  #docsSearch {
	padding: 40px 16px 30px 16px !important;
  }
  #docsSearch h1 {
	font-size: 1.5rem !important;
  }
  .category-list {
	padding: 10px 0 !important;
	justify-content: center !important;
  }
  .category-list .category {
	width: 100% !important;
	max-width: 100% !important;
	min-width: auto !important;
	flex: 1 1 100% !important;
	min-height: auto !important;
	padding: 20px !important;
  }
  .navbar .nav {
	margin: 8px 10px 0 0 !important;
  }
  .navbar .nav li a {
	padding: 5px 12px !important;
	font-size: 13px !important;
  }
  #searchBar {
	max-width: 100% !important;
	height: 46px !important;
  }
  #searchBar .search-query {
	height: 46px !important;
	width: calc(100% - 80px) !important;
  }
  #searchBar button {
	height: 46px !important;
	width: 80px !important;
	font-size: 14px !important;
  }
  .sidebar,
  aside {
	min-height: auto !important;
  }
  #fullArticle img,
  .article-content img,
  article img {
	max-width: 100% !important;
  }
}

/* ===========================================
   SIDEBAR SEARCH BAR
   =========================================== */
.sidebar #searchBar,
aside #searchBar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  overflow: visible !important;
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  gap: 0 !important;
}
.sidebar #searchBar .search-query,
aside #searchBar .search-query,
.sidebar input.search-query,
aside input.search-query {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: calc(100% - 54px) !important;
  height: 44px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  border: 1px solid var(--medium-gray) !important;
  border-right: none !important;
  border-radius: 10px 0 0 10px !important;
  background: var(--white) !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.sidebar #searchBar button,
aside #searchBar button {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 54px !important;
  height: 44px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  border-radius: 0 10px 10px 0 !important;
  background: var(--forest-green) !important;
  color: var(--white) !important;
  border: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

/* ---------- UTILITIES ---------- */
html {
  scroll-behavior: smooth;
}
::selection {
  background: rgba(221, 106, 46, 0.18);
  color: var(--text-dark);
}
</style>